shesha-io · James-Baloyi · May 21, 2025 · Apr 22, 2025 · Apr 22, 2025 · Apr 22, 2025
diff --git a/shesha-reactjs/src/components/panel/styles/styles.ts b/shesha-reactjs/src/components/panel/styles/styles.ts
@@ -52,9 +52,7 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }, {
     paddingTop,
     paddingBottom,
     paddingLeft,
-    paddingRight,
-    border,
-    ...rest
+    paddingRight
   } = bodyStyle;
 
   const {
@@ -115,7 +113,6 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }, {
     }
 
     > .ant-collapse-item > .ant-collapse-content {
-      ${rest}
       width: ${width};
       min-width: ${minWidth};
       max-width: ${maxWidth};

diff --git a/shesha-reactjs/src/designer-components/_settings/utils/CustomDropdown.tsx b/shesha-reactjs/src/designer-components/_settings/utils/CustomDropdown.tsx
@@ -14,14 +14,15 @@ interface CustomDropdownProps {
     customTooltip?: string;
     onAddCustomOption?: (newOption: string) => void;
     onChange?: (value: string) => void;
-    variant?: 'borderless' | 'outlined' | 'filled';
+    placeholder?: string;
 }
 
 const CustomDropdown: FC<CustomDropdownProps> = ({
     value,
     options,
     readOnly,
     label,
+    placeholder,
     defaultValue,
     customTooltip,
     onChange,
@@ -83,6 +84,7 @@ const CustomDropdown: FC<CustomDropdownProps> = ({
             size={size}
             onChange={onChange}
             defaultValue={defaultValue}
+            placeholder={placeholder}
             dropdownRender={(menu) => (
                 <>
                     {menu}

diff --git a/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx b/shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx
@@ -166,6 +166,7 @@ export const getBorderInputs = (path = '', isResponsive: boolean = true, hasMidd
                     type: 'textField',
                     label: "Width",
                     hideLabel: true,
+                    placeholder: '0',
                     propertyName: `${borderProp}.all.width`,
                 },
                 {
@@ -174,6 +175,7 @@ export const getBorderInputs = (path = '', isResponsive: boolean = true, hasMidd
                     propertyName: `${borderProp}.all.style`,
                     type: "dropdown",
                     hideLabel: true,
+                    placeholder: 'Solid',
                     width: 60,
                     dropdownOptions: borderStyles,
                 },
@@ -214,6 +216,7 @@ export const getBorderInputs = (path = '', isResponsive: boolean = true, hasMidd
                                 type: 'textField',
                                 label: "Width",
                                 hideLabel: true,
+                                placeholder: '0',
                                 propertyName: `${borderProp}.${side}.width`,
                             },
                             {
@@ -222,6 +225,7 @@ export const getBorderInputs = (path = '', isResponsive: boolean = true, hasMidd
                                 propertyName: `${borderProp}.${side}.style`,
                                 type: "dropdown",
                                 hideLabel: true,
+                                placeholder: 'Solid',
                                 width: 60,
                                 dropdownOptions: borderStyles,
                             },
@@ -271,6 +275,7 @@ export const getCornerInputs = (path = '', isResponsive: boolean = true, hideCor
                     type: 'numberField',
                     icon: 'ExpandOutlined',
                     tooltip: 'Styles will apply to all corners',
+                    placeholder: '0',
                     propertyName: path ? `${path}.border.radius.all` : 'border.radius.all',
                 }
             ]
@@ -290,6 +295,7 @@ export const getCornerInputs = (path = '', isResponsive: boolean = true, hideCor
                     defaultValue: 0,
                     type: 'numberField',
                     icon: cornerValue.icon,
+                    placeholder: '0',
                     hidden: { _code: hideCornerConditions[corner], _mode: 'code', _value: false } as any,
                     tooltip: `${humanizeString(corner)} corner`,
                     propertyName: path ? `${path}.border.radius.${corner}` : `border.radius.${corner}`,

diff --git a/shesha-reactjs/src/designer-components/_settings/utils/overflow/util.tsx b/shesha-reactjs/src/designer-components/_settings/utils/overflow/util.tsx
@@ -1,9 +1,7 @@
-import { CSSProperties } from "react";
-
-export const getOverflowStyle = (overflow: CSSProperties['overflow'], hideScrollBar: boolean): React.CSSProperties => {
+export const getOverflowStyle = (overflow, hideScrollBar: boolean): React.CSSProperties => {
     if (!overflow) return {};
     return {
-        overflow: overflow,
+        overflow: 'auto',
         scrollbarWidth: 'thin',
         '::-webkit-scrollbar': {
             width: '8px',
@@ -12,7 +10,7 @@ export const getOverflowStyle = (overflow: CSSProperties['overflow'], hideScroll
         ...(hideScrollBar && {
             '::-webkit-scrollbar': { display: 'none' },
             'msOverflowStyle': 'none',
-            'scrollbarWidth': 'none'
+            'scrollbarWidth': 'none',
         })
     };
 };
diff --git a/shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx b/shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx
@@ -125,7 +125,7 @@ const CollapsiblePanelComponent: IToolboxComponent<ICollapsiblePanelComponentPro
           header,
           content,
           collapsible: 'icon',
-          overflow: 'auto',
+          overflow: true,
         };
       })
       .add<ICollapsiblePanelComponentProps>(2, (prev) => migratePropertyName(migrateCustomFunctions(prev)))

diff --git a/shesha-reactjs/src/designer-components/collapsiblePanel/settingsForm.ts b/shesha-reactjs/src/designer-components/collapsiblePanel/settingsForm.ts
@@ -4,7 +4,6 @@ import { getBorderInputs, getCornerInputs } from '../_settings/utils/border/util
 import { backgroundTypeOptions, positionOptions, repeatOptions, sizeOptions } from '../_settings/utils/background/utils';
 import { fontTypes, fontWeights, textAlign } from '../_settings/utils/font/utils';
 import { nanoid } from '@/utils/uuid';
-import { overflowOptions } from '../_settings/utils/dimensions/utils';
 
 export const getSettings = () => {
   // Generate unique IDs for main sections
@@ -314,16 +313,6 @@ export const getSettings = () => {
                               }
                             ]
                           })
-                          .addSettingsInput({
-                            id: nanoid(),
-                            parentId: styleRouterId,
-                            inline: true,
-                            inputType: 'dropdown',
-                            label: 'Overflow',
-                            defaultValue: 'auto',
-                            propertyName: 'overflow',
-                            dropdownOptions: overflowOptions
-                          })
                           .toJson()
                         ]
                       }

diff --git a/shesha-reactjs/src/designer-components/container/containerComponent.tsx b/shesha-reactjs/src/designer-components/container/containerComponent.tsx
@@ -136,7 +136,8 @@ const ContainerComponent: IToolboxComponent<IContainerComponentProps> = {
           noDefaultStyling: prev?.noDefaultStyling,
           gridColumnsCount: prev?.gridColumnsCount,
           flexWrap: prev?.flexWrap,
-          gap: prev?.gap || 8
+          gap: prev?.gap || 8,
+          overflow: prev?.overflow || true,
         };
 
         return {

diff --git a/shesha-reactjs/src/designer-components/container/data.ts b/shesha-reactjs/src/designer-components/container/data.ts
@@ -214,7 +214,6 @@ export const defaultStyles = (prev?: IContainerComponentProps): IStyleType & ICo
     justifySelf: prev?.justifySelf ?? "normal",
     noDefaultStyling: prev?.noDefaultStyling ?? false,
     gridColumnsCount: prev?.gridColumnsCount ?? null,
-    gap: prev?.gap ?? '8px',
-    overflow: prev?.overflow ?? 'auto'
+    gap: prev?.gap ?? '8px'
   };
 };
diff --git a/shesha-reactjs/src/designer-components/container/settingsForm.ts b/shesha-reactjs/src/designer-components/container/settingsForm.ts
@@ -16,7 +16,6 @@ import {
 import { FormLayout } from 'antd/lib/form/Form';
 import { getBorderInputs, getCornerInputs } from '../_settings/utils/border/utils';
 import { backgroundTypeOptions, positionOptions, repeatOptions, sizeOptions } from '../_settings/utils/background/utils';
-import { overflowOptions } from '../_settings/utils/dimensions/utils';
 
 export const getSettings = (data) => {
   // Generate unique IDs for major components
@@ -541,27 +540,6 @@ export const getSettings = (data) => {
                               dropdownOptions: TEXT_JUSTIFY
                             }
                           )
-                          .addSettingsInputRow({
-                            id: nanoid(),
-                            parentId: displayCollapsiblePanelId,
-                            inline: false,
-                            readOnly: { _code: 'return  getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
-                            inputs: [
-                              {
-                                type: 'dropdown',
-                                id: nanoid(),
-                                label: 'Overflow',
-                                propertyName: 'overflow',
-                                dropdownOptions: overflowOptions
-                              },
-                              {
-                                id: nanoid(),
-                                type: 'switch',
-                                label: "Hide Scroll Bar",
-                                propertyName: 'hideScrollBar'
-                              }
-                            ],
-                          })
                           .toJson()
                         ]
                       }

diff --git a/shesha-reactjs/src/designer-components/dropdown/index.tsx b/shesha-reactjs/src/designer-components/dropdown/index.tsx
@@ -56,7 +56,7 @@ const DropdownComponent: IToolboxComponent<IDropdownComponentProps, ITextFieldCo
 
           return <Dropdown
             {...model}
-            style={{ ...model.allStyles.fullStyle, overflow: 'auto' }}
+            style={{ ...model.allStyles.fullStyle }}
             {...customEvent}
             defaultValue={calculatedModel.defaultValue}
             value={value}

diff --git a/shesha-reactjs/src/designer-components/inputComponent/index.tsx b/shesha-reactjs/src/designer-components/inputComponent/index.tsx
@@ -116,6 +116,7 @@ export const InputComponent: FC<Omit<ISettingsInputProps, 'hidden'>> = (props) =
                 style={{ width: "100%" }}
                 defaultValue={defaultValue}
                 onChange={onChange}
+                placeholder={placeholder}
                 options={[...(options || [])].map(option => ({ ...option, label: iconElement(option.label, option.value, tooltip, {}, styles) }))}
             />;
         }
@@ -145,8 +146,7 @@ export const InputComponent: FC<Omit<ISettingsInputProps, 'hidden'>> = (props) =
         case 'customDropdown': {
             const options = dropdownOptions as IDropdownOption[];
 
-            return <CustomDropdown
-                variant={variant} value={value || defaultValue}
+            return <CustomDropdown value={value || defaultValue} placeholder={placeholder}
                 defaultValue={defaultValue} options={options.map(option => ({ ...option, label: iconElement(option.label, option.value, tooltip, {}, styles) }))} readOnly={readOnly} onChange={onChange} size={size} customTooltip={props.customTooltip} />;
         }
         case 'textArea':

diff --git a/shesha-reactjs/src/designer-components/profileDropdown/settingsForm.ts b/shesha-reactjs/src/designer-components/profileDropdown/settingsForm.ts
@@ -1,7 +1,7 @@
 import { DesignerToolbarSettings } from '@/interfaces/toolbarSettings';
 import { nanoid } from '@/utils/uuid';
-import { FormLayout } from 'antd/lib/form/Form';
 import { fontTypes, fontWeights, textAlign } from '../_settings/utils/font/utils';
+import { FormLayout } from 'antd/es/form/Form';
 
 export const getSettings = (data: any) => {
   const searchableTabsId = nanoid();

diff --git a/shesha-reactjs/src/designer-components/tabs/index.tsx b/shesha-reactjs/src/designer-components/tabs/index.tsx
@@ -134,6 +134,7 @@ const TabsComponent: IToolboxComponent<ITabsComponentProps> = {
       const initialCardStyle = { ...defaultCardStyles, font: { ...defaultCardStyles.font, color: '#000000' } };
       return {
         ...newModel,
+        overflow: true,
         card: { ...initialCardStyle },
         desktop: { ...newModel.desktop, card: { ...initialCardStyle } },
         tablet: { ...newModel.tablet, card: { ...initialCardStyle } },

diff --git a/shesha-reactjs/src/designer-components/tabs/settingsForm.ts b/shesha-reactjs/src/designer-components/tabs/settingsForm.ts
@@ -5,7 +5,6 @@ import { getBorderInputs, getCornerInputs } from '../_settings/utils/border/util
 import { backgroundTypeOptions, positionOptions, repeatOptions, sizeOptions } from '../_settings/utils/background/utils';
 import { onAddNewItem } from './utils';
 import { getItemSettings } from './itemSettings';
-import { overflowOptions } from '../_settings/utils/dimensions/utils';
 import { nanoid } from '@/utils/uuid';
 
 export const getSettings = () => {
@@ -300,24 +299,6 @@ export const getSettings = () => {
                                                             }
                                                         ]
                                                     })
-                                                    .addSettingsInputRow({
-                                                        id: nanoid(),
-                                                        inputs: [{
-                                                            id: nanoid(),
-                                                            type: 'dropdown',
-                                                            label: 'Overflow',
-                                                            defaultValue: 'auto',
-                                                            propertyName: 'overflow',
-                                                            dropdownOptions: overflowOptions
-                                                        },
-                                                        {
-                                                            id: nanoid(),
-                                                            type: 'switch',
-                                                            label: "Hide Scroll Bar",
-                                                            propertyName: 'hideScrollBar'
-                                                        }
-                                                        ]
-                                                    })
                                                     .toJson()
                                                 ]
                                             }

diff --git a/shesha-reactjs/src/designer-components/wizard/index.tsx b/shesha-reactjs/src/designer-components/wizard/index.tsx
@@ -87,7 +87,7 @@ const TabsComponent: IToolboxComponent<Omit<IWizardComponentProps, 'size'>> = {
       .add<IWizardComponentProps>(4, (prev) => migrateWizardActions(prev))
       .add<IWizardComponentProps>(5, (prev) => ({ ...migrateFormApi.properties(prev) }))
       .add<IWizardComponentProps>(6, (prev) => removeComponents(prev))
-      .add<IWizardComponentProps>(7, (prev) => ({ ...migratePrevStyles({ ...prev, primaryTextColor: '#fff' }, defaultStyles()) })),
+      .add<IWizardComponentProps>(7, (prev) => ({ ...migratePrevStyles({ ...prev, primaryTextColor: '#fff' }, defaultStyles()), overflow: true })),
   settingsFormMarkup: () => getSettings(),
   validateSettings: (model) => validateConfigurableComponentSettings(getSettings(), model),