shesha-io · James-Baloyi · Apr 16, 2025 · Apr 7, 2025 · Apr 7, 2025 · Apr 8, 2025
diff --git a/shesha-reactjs/src/components/entityPicker/index.tsx b/shesha-reactjs/src/components/entityPicker/index.tsx
@@ -1,5 +1,5 @@
 import { EllipsisOutlined } from '@ant-design/icons';
-import { Button, Space, Select, Skeleton, ConfigProvider } from 'antd';
+import { Button, Space, Select, Skeleton } from 'antd';
 import { DefaultOptionType } from 'antd/lib/select';
 import React, { useMemo, useRef, useState } from 'react';
 import { useEntitySelectionData } from '@/utils/entity';
@@ -63,13 +63,13 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
     outcomeValueFunc,
     incomeValueFunc,
     placeholder,
-    hideBorder
+    dividerStyle
   } = props;
 
   if (!entityType)
     throw SheshaError.throwPropertyError('entityType');
 
-  const { styles } = useStyles(style);
+  const { styles } = useStyles({ style });
   const selectRef = useRef(undefined);
 
   const [showModal, setShowModal] = useState(false);
@@ -147,79 +147,83 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
     if (onChange) onChange(null, null);
   };
 
-  const { background, backgroundImage, borderRadius, borderWidth, borderTopWidth, width, minWidth, maxWidth,
-    borderBottomWidth, borderRightColor, borderRightStyle, borderColor, borderBottomLeftRadius,
-    borderTopLeftRadius, MozBorderTopColors, borderTopStyle, borderTopColor, borderTop, boxShadow,
-    borderBottom, borderBottomColor, borderBottomStyle, borderRight, borderRightWidth, ...restStyle } = style;
+  const { borderBottomLeftRadius,
+    borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, width, minWidth, maxWidth, boxShadow, background, backgroundImage, marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft, ...restStyle } = style;
 
   const borderRadii = style?.borderRadius?.toString().split(' ');
 
   return (
     <div className={styles.entityPickerContainer}>
       <div>
-        <ConfigProvider
-          theme={{
-            components: {
-              Select: {
-                fontSize: Number(style?.fontSize ?? 14),
-                colorText: style?.color,
-                fontFamily: style?.fontFamily,
-                fontWeightStrong: Number(style.fontWeight)
-              },
-            },
-          }}
-        >
-          {useButtonPicker ? (
-            <Button onClick={handleButtonPickerClick} size={size} {...(pickerButtonProps || {})}>
-              {title}
-            </Button>
-          ) : (
-            <Space.Compact style={{ width: '100%', ...style }}>
-              <Select
-                size={size}
-                onDropdownVisibleChange={(_e) => {
-                  selectRef.current.blur();
-                  showPickerDialog();
-                }}
-                onClear={onClear}
-                value={selection.loading ? undefined : valueId}
-                placeholder={selection.loading ? 'Loading...' : placeholder}
-                notFoundContent={''}
-                defaultValue={defaultValue}
-                disabled={disabled || selection.loading}
-                ref={selectRef}
-                allowClear
-                mode={selectedMode}
-                options={options}
-                variant={hideBorder ? 'borderless' : null}
-                suffixIcon={null}
-                onChange={handleMultiChange}
-                className={styles.entitySelect}
-                style={{ width: '100%' }}
-                loading={selection.loading}
-              >
-                {''}
-              </Select>
-              <Button
-                onClick={showPickerDialog}
-                className={styles.pickerInputGroupEllipsis}
-                disabled={disabled}
-                loading={loading ?? false}
-                size={size}
-                icon={<EllipsisOutlined />}
-                style={{
-                  ...restStyle,
-                  borderRadius: `0px ${borderRadii?.[1]} ${borderRadii?.[2]} 0px`,
-                  background: 'transparent',
-                  borderLeft: '1px solid #d9d9d9',
-                  height: '100%',
-                  zIndex: 1,
-                }}
-                type='text'
-              />
-            </Space.Compact>
-          )}
-        </ConfigProvider>
+        {useButtonPicker ? (
+          <Button onClick={handleButtonPickerClick} size={size} {...(pickerButtonProps || {})} style={style}>
+            {title}
+          </Button>
+        ) : (
+          <Space.Compact style={{
+            width, minWidth, maxWidth, boxShadow, marginTop, marginRight, marginBottom, marginLeft, background, backgroundImage, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius
+          }}>
+            <Select
+              size={size}
+              onDropdownVisibleChange={(_e) => {
+                selectRef.current.blur();
+                showPickerDialog();
+              }}
+              onClear={onClear}
+              value={selection.loading ? undefined : valueId}
+              placeholder={selection.loading ? 'Loading...' : placeholder}
+              notFoundContent={''}
+              defaultValue={defaultValue}
+              disabled={disabled || selection.loading}
+              ref={selectRef}
+              allowClear
+              mode={selectedMode}
+              options={options}
+              variant='borderless'
+              suffixIcon={null}
+              onChange={handleMultiChange}
+              className={styles.entitySelect}
+              style={{
+                ...restStyle,
+                borderRight: 'none',
+                marginTop: 0,
+                marginRight: 0, marginBottom: 0, marginLeft: 0, paddingTop, paddingRight, paddingBottom, paddingLeft,
+                borderTopRightRadius: 0, borderBottomRightRadius: 0,
+                borderTopLeftRadius,
+                borderBottomLeftRadius
+              }}
+              loading={selection.loading}
+            >
+              {''}
+            </Select>
+            <Button
+              onClick={showPickerDialog}
+              className={styles.pickerInputGroupEllipsis}
+              disabled={disabled}
+              loading={loading ?? false}
+              icon={<EllipsisOutlined />}
+              style={{
+                ...restStyle,
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                marginTop: 0,
+                marginRight: 0,
+                marginBottom: 0,
+                marginLeft: 0,
+                paddingTop,
+                paddingRight,
+                paddingBottom,
+                paddingLeft,
+                borderLeftStyle: dividerStyle?.style ?? 'solid',
+                borderLeftWidth: dividerStyle?.width ?? '1px',
+                borderLeftColor: dividerStyle?.color ?? '#d9d9d9',
+                borderRadius: `0px ${borderRadii?.[1]} ${borderRadii?.[2]} 0px`,
+                zIndex: 1,
+              }}
+              type='text'
+            />
+          </Space.Compact>
+        )}
       </div>
 
       {showModal && <EntityPickerModal {...props} onCloseModal={() => setShowModal(false)} />}

diff --git a/shesha-reactjs/src/components/entityPicker/modal.tsx b/shesha-reactjs/src/components/entityPicker/modal.tsx
@@ -35,7 +35,7 @@ const EntityPickerModalInternal = (props: IEntityPickerModalProps) => {
     onCloseModal,
   } = props;
 
-  const { styles } = useStyles();
+  const { styles } = useStyles({});
   const [modalId] = useState(nanoid()); // use generated value because formId was changed. to be reviewed
   const [state, setState] = useState<IEntityPickerState>({ showModal: true });
   const hidePickerDialog = () => {
@@ -55,7 +55,7 @@ const EntityPickerModalInternal = (props: IEntityPickerModalProps) => {
   const { globalState } = useGlobalState();
   const { formData } = useForm();
   const pageContext = useDataContextManager(false)?.getPageContext();
-  
+
   useEffect(() => {
     registerConfigurableColumns(modalId, configurableColumns);
   }, [configurableColumns]);
@@ -72,13 +72,13 @@ const EntityPickerModalInternal = (props: IEntityPickerModalProps) => {
       onSelect(row);
     } else {
       if (isMultiple) {
-        const values = !!valueId ? (Array.isArray(valueId) ? valueId : [valueId]): [];
+        const values = !!valueId ? (Array.isArray(valueId) ? valueId : [valueId]) : [];
         if (!values.includes(row.id)) {
-          const vs = !!value ? (Array.isArray(value) ? value : [value]): [];
+          const vs = !!value ? (Array.isArray(value) ? value : [value]) : [];
           onChange([...vs, outcomeValueFunc(row, {})], null);
         }
       } else {
-        onChange(outcomeValueFunc(row, {}),null);
+        onChange(outcomeValueFunc(row, {}), null);
       }
     }
 
@@ -117,7 +117,7 @@ const EntityPickerModalInternal = (props: IEntityPickerModalProps) => {
       [
         { match: 'data', data: formData },
         { match: 'globalState', data: globalState },
-        { match: 'pageContext', data: {...pageContext?.getFull()} },
+        { match: 'pageContext', data: { ...pageContext?.getFull() } },
       ],
       propertyMetadataAccessor
     ).then(evaluatedFilters => {
@@ -233,7 +233,7 @@ const EntityPickerModalInternal = (props: IEntityPickerModalProps) => {
 };
 
 export const EntityPickerModal = (props: IEntityPickerModalProps) => {
-  
+
   return (
     <DataTableProvider
       userConfigId={'table_' + props.name}

diff --git a/shesha-reactjs/src/components/entityPicker/models.ts b/shesha-reactjs/src/components/entityPicker/models.ts
@@ -7,6 +7,7 @@ import { FormIdentifier } from '@/providers/form/models';
 import { ITableViewProps } from '@/providers/dataTable/filters/models';
 import { ModalFooterButtons } from '@/providers/dynamicModal/models';
 import { ButtonGroupItemProps } from '@/index';
+import { IBorderValue } from '@/designer-components/_settings/utils/border/interfaces';
 
 interface IWrappedEntityPickerProps {
   entityType?: string;
@@ -65,4 +66,5 @@ export interface IEntityPickerProps extends Omit<IWrappedEntityPickerProps, 'onD
   placeholder: string;
   incomeValueFunc: IncomeValueFunc;
   outcomeValueFunc: OutcomeValueFunc;
+  dividerStyle?: IBorderValue['border']['middle'];
 }
diff --git a/shesha-reactjs/src/components/entityPicker/styles/styles.ts b/shesha-reactjs/src/components/entityPicker/styles/styles.ts
@@ -1,6 +1,7 @@
 import { createStyles, sheshaStyles } from '@/styles';
+import { CSSProperties } from 'react';
 
-export const useStyles = createStyles(({ css, cx, prefixCls }) => {
+export const useStyles = createStyles(({ css, cx, prefixCls }, { style }: { style?: CSSProperties }) => {
   const pickerEllipsisBtnWidth = "45px";
 
   const pickerInputGroup = "picker-input-group";
@@ -11,7 +12,6 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
   const shaReactTable = "sha-react-table";
   const shaGlobalTableFilter = "sha-global-table-filter";
 
-
   const entityPickerContainer = cx("entity-picker-container", css`
     .${pickerInputGroup} {
       .${pickerInputGroupInput} {
@@ -65,19 +65,31 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
     `);
 
   const entitySelect = cx("entity-select", css`
+        --ant-color-text: ${style?.color || '#000'} !important;
+        width: calc(100% - 32px) !important;
         &:hover: {
                 color: colorTextSecondary,
               }
 
         .ant-select-selector > ant-select-selection-search, ant-select-selection-placeholder {
-          all: inherit !important;
           border-right: 1px solid #d9d9d9;
           padding: 0 8px !important;
           * {
+            font-size: ${style?.fontSize || '14px'} !important;
+            font-weight: ${style?.fontWeight} !important;
+            color: ${style?.color || '#000'} !important;
+            font-family: ${style?.fontFamily || 'inherit'} !important;  
             border-top-right-radius: 0 !important;
             border-bottom-right-radius: 0 !important;
             }
           }
+
+          .ant-select-selection-item {
+            font-size: ${style?.fontSize || '14px'} !important;
+            font-weight: ${style?.fontWeight} !important;
+            color: ${style?.color || '#000'} !important;
+            font-family: ${style?.fontFamily || 'inherit'} !important;  
+          }
       `);
 
   return {

diff --git a/shesha-reactjs/src/designer-components/_common-migrations/migrateStyles.ts b/shesha-reactjs/src/designer-components/_common-migrations/migrateStyles.ts
@@ -72,7 +72,7 @@ export const migratePrevStyles = <T extends ExtendedType>(prev: T, defaults?: Om
                 weight: prevStyles?.fontWeight as string || defaults?.font?.weight || '400',
             },
             dimensions: {
-                width: prev.block ? '100%' : addPx(prevStyles?.width) || addPx(prev?.dimensions?.width) || defaults?.dimensions?.width,
+                width: prev.block ? '100%' : addPx(prevStyles?.width) || addPx(prev?.width) || addPx(prev?.dimensions?.width) || defaults?.dimensions?.width,
                 height: addPx(prevStyles?.height) || heightFromSize || addPx(prev?.dimensions?.height) || defaults?.dimensions?.height,
                 minHeight: addPx(prev?.dimensions?.minHeight) || defaults?.dimensions?.minHeight,
                 maxHeight: addPx(prev?.dimensions?.maxHeight) || defaults?.dimensions?.maxHeight,

diff --git a/shesha-reactjs/src/designer-components/_settings/utils/border/interfaces.ts b/shesha-reactjs/src/designer-components/_settings/utils/border/interfaces.ts
@@ -39,6 +39,12 @@ export interface IBorderValue {
             color?: string;
             style?: IBorderType;
         };
+        middle?: {
+            width?: string | number;
+            unit?: string;
+            color?: string;
+            style?: IBorderType;
+        };
     };
     radiusType?: string;
     borderType?: string;

diff --git a/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx b/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx
@@ -115,7 +115,8 @@ export const borderSides = [
     { value: "top", icon: "BorderTopOutlined", title: "Top" },
     { value: "right", icon: "BorderRightOutlined", title: "Right" },
     { value: "bottom", icon: "BorderBottomOutlined", title: "Bottom" },
-    { value: "left", icon: "BorderLeftOutlined", title: "Left" }
+    { value: "left", icon: "BorderLeftOutlined", title: "Left" },
+    { value: "middle", icon: "BorderHorizontalOutlined", title: "Middle" }
 ];
 
 
@@ -133,7 +134,7 @@ const generateCode = (type: string, isCustom: boolean, isResponsive: boolean, pa
     return `return getSettingValue(${devicePath}${path ? '?.' + path : ''}?.border?.${type}) !== "${isCustom ? "custom" : "all"}";`;
 };
 
-export const getBorderInputs = (path = '', isResponsive: boolean = true) => {
+export const getBorderInputs = (path = '', isResponsive: boolean = true, hasMiddle: boolean = false) => {
 
     const borderProp = path ? `${path}.border.border` : 'border.border';
 
@@ -190,7 +191,7 @@ export const getBorderInputs = (path = '', isResponsive: boolean = true) => {
             id: 'borderStyleRow',
             parentId: 'borderStylePnl',
             hidden: { _code: generateCode('borderType', true, isResponsive, path), _mode: 'code', _value: false } as any,
-            components: borderSides.map(sideValue => {
+            components: borderSides.slice(0, hasMiddle ? 5 : 4).map(sideValue => {
                 const side = sideValue.value;
 
                 return new DesignerToolbarSettings()

diff --git a/shesha-reactjs/src/designer-components/dataTable/table/columnsEditor/columnSettings.ts b/shesha-reactjs/src/designer-components/dataTable/table/columnsEditor/columnSettings.ts
@@ -153,18 +153,20 @@ export const getColumnSettings = (data?: any) => ({
                             "inputs": [
                                 {
                                     "id": "anchored1",
-                                    "type": "dropdown",
+                                    "type": "radio",
                                     "propertyName": "anchored",
                                     "label": "Anchored",
                                     "jsSetting": true,
-                                    "dropdownOptions": [
+                                    "buttonGroupOptions": [
                                         {
-                                            "label": "Left",
-                                            "value": "left"
+                                            "title": "Left",
+                                            "value": "left",
+                                            "icon": "LeftOutlined"
                                         },
                                         {
-                                            "label": "Right",
-                                            "value": "right"
+                                            "title": "Right",
+                                            "value": "right",
+                                            "icon": "RightOutlined"
                                         }
                                     ],
                                     "allowClear": true

diff --git a/shesha-reactjs/src/designer-components/entityPicker/index.tsx b/shesha-reactjs/src/designer-components/entityPicker/index.tsx
@@ -49,6 +49,9 @@ export interface IEntityPickerComponentProps extends IConfigurableFormComponent,
   widthUnits?: string;
   buttons?: ButtonGroupItemProps[];
   footerButtons?: ModalFooterButtons;
+  dividerWidth?: string;
+  dividerStyle?: CSSProperties['borderLeftStyle'];
+  dividerColor?: string;
 }
 
 const EntityPickerComponent: IToolboxComponent<IEntityPickerComponentProps> = {
@@ -198,6 +201,7 @@ const EntityPickerComponent: IToolboxComponent<IEntityPickerComponentProps> = {
               value={value}
               onChange={onChangeInternal}
               size={model.size}
+              dividerStyle={border?.border?.middle}
             />
           );
         }}
@@ -257,7 +261,7 @@ const EntityPickerComponent: IToolboxComponent<IEntityPickerComponentProps> = {
       ...model,
       editMode: 'inherited',
       entityType: isEntityReferencePropertyMetadata(propMetadata)
-        ? propMetadata.entityType 
+        ? propMetadata.entityType
         : isEntityReferenceArrayPropertyMetadata(propMetadata)
           ? propMetadata.entityType
           : undefined,