En: Shesha width handling

shesha-core/src/Shesha.Application/Shesha.Application.csproj

@@ -113,6 +113,11 @@
         <None Remove="ConfigMigrations\package20260202_1055.shaconfig" />
         <None Remove="ConfigMigrations\package20260209_2056.shaconfig" />
         <None Remove="ConfigMigrations\package20260225_1631.shaconfig" />
+        <None Remove="ConfigMigrations\package20260304_1119.shaconfig" />
+        <None Remove="ConfigMigrations\package20260306_1033.shaconfig" />
+        <None Remove="ConfigMigrations\package20260306_1109.shaconfig" />
+        <None Remove="ConfigMigrations\package20260306_1135.shaconfig" />
+        <None Remove="ConfigMigrations\package20260309_1350.shaconfig" />
         <None Remove="Excel\template.xlsx" />
         <None Remove="ConfigMigrations\package20230324_1835.shaconfig" />
         <None Remove="ConfigMigrations\package20230411_1238.shaconfig" />
@@ -123,6 +128,11 @@
     </ItemGroup>
     <ItemGroup>
         <EmbeddedResource Include="ConfigMigrations\package20260225_1631.shaconfig" />
+        <EmbeddedResource Include="ConfigMigrations\package20260304_1119.shaconfig" />
+        <EmbeddedResource Include="ConfigMigrations\package20260306_1033.shaconfig" />
+        <EmbeddedResource Include="ConfigMigrations\package20260306_1109.shaconfig" />
+        <EmbeddedResource Include="ConfigMigrations\package20260306_1135.shaconfig" />
+        <EmbeddedResource Include="ConfigMigrations\package20260309_1350.shaconfig" />
         <EmbeddedResource Include="Excel\template.xlsx" />
     </ItemGroup>
     <ItemGroup>

shesha-reactjs/package.json

@@ -186,7 +186,7 @@
     "rc-picker": "^4.11.3",
     "react-ace": "^10.1.0",
     "react-beautiful-dnd": "^13.1.0",
-    "react-big-calendar": "^1.15.0",
+    "react-big-calendar": "^1.19.4",
     "react-chartjs-2": "^5.3.0",
     "react-error-boundary": "^3.1.4",
     "react-fast-marquee": "^1.6.5",

shesha-reactjs/src/components/calendar/index.tsx

@@ -343,7 +343,7 @@ export const CalendarControl: FC<ICalendarProps> = (props) => {
           onDoubleClickEvent={handleCustomDoubleClick}
           onSelectSlot={handleSlotClick}
           eventPropGetter={(event: any) => ({
-            style: { backgroundColor: event.color || primaryColor, height: '100%' },
+            style: { backgroundColor: event.color || primaryColor },
           })}
           components={{
             event: EventComponent,

shesha-reactjs/src/components/configurableForm/styles/styles.ts

@@ -33,6 +33,7 @@ export const ShaFormStyles = createGlobalStyle`
     .${formClassNames.shaForm} {
         .${formClassNames.shaComponentsContainer} {
             min-height: 32px;
+            height: 100%;
             &.horizontal {
                 .${formClassNames.shaComponentsContainerInner} {
                     display: flex;

shesha-reactjs/src/components/dataList/index.tsx

@@ -764,6 +764,7 @@ export const DataList: FC<Partial<IDataListProps>> = ({
       default:
         return {
           ...containerStyles,
+          width: '100%',
           display: 'grid',
           gridTemplateColumns: '1fr',
           alignItems: 'stretch',

shesha-reactjs/src/components/dataList/styles/styles.ts

@@ -21,10 +21,6 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }) => {
             margin: unset !important;
         }
 
-       .ant-collapse>.ant-collapse-item >.ant-collapse-header {
-             margin: 4px !important;
-        }
-
         .ant-divider-horizontal{
             min-width: unset !important;
         }
@@ -211,4 +207,4 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }) => {
     shaDatalistCard,
     shaDatalistHorizontal,
   };
-});
+});

shesha-reactjs/src/components/dropdown/style.ts

@@ -1,7 +1,7 @@
 import { createStyles } from '@/styles';
 import { CSSProperties } from 'react';
 
-export const useStyles = createStyles(({ css, cx, token }, { style }: { style: CSSProperties }) => {
+export const useStyles = createStyles(({ css, cx, token }, { style }: { style: CSSProperties }) => {
   const dropdown = cx("sha-dropdown", css`
     --ant-color-text: ${style.color} !important;
     --ant-font-weight-strong: ${style.fontWeight} !important;
@@ -71,4 +71,4 @@ export const useStyles = createStyles(({ css, cx, token }, { style }: { style: C
   return {
     dropdown,
   };
-});
+});

shesha-reactjs/src/components/entityPicker/index.tsx

@@ -11,6 +11,7 @@ import { EntityPickerModal } from './modal';
 import { getValueByPropertyName } from '@/utils/object';
 import { SheshaError } from '@/utils/errors';
 import { addPx } from '@/utils/style';
+import { useAvailableConstantsData } from '@/providers/form/utils';
 const EntityPickerReadOnly = (props: IEntityPickerProps): JSX.Element => {
   const { entityType, displayEntityKey, value } = props;
 
@@ -71,6 +72,7 @@ const EntityPickerEditable = (props: IEntityPickerProps): JSX.Element => {
 
   const { styles } = useStyles({ style });
   const selectRef = useRef(undefined);
+  const allData = useAvailableConstantsData();
 
   const [showModal, setShowModal] = useState(false);
 
@@ -227,7 +229,7 @@ const EntityPickerEditable = (props: IEntityPickerProps): JSX.Element => {
                 paddingBottom,
                 paddingLeft,
                 borderLeftStyle: dividerStyle?.style ?? 'solid',
-                borderLeftWidth: addPx(dividerStyle?.width) ?? '1px',
+                borderLeftWidth: addPx(dividerStyle?.width, allData) ?? '1px',
                 borderLeftColor: dividerStyle?.color ?? '#d9d9d9',
                 borderRadius: `0px ${borderRadii?.[1]} ${borderRadii?.[2]} 0px`,
                 height: '100%',

shesha-reactjs/src/components/entityPicker/styles/styles.ts

@@ -74,6 +74,7 @@ export const useStyles = createStyles(({ css, cx, prefixCls, token }, { style }:
   const entitySelect = cx("entity-select", css`
         --ant-color-text: ${style?.color || '#000'} !important;
         width: calc(100% - 32px) !important;
+        flex-basis: unset !important;
         &:hover {
                 border-color: ${token.colorPrimary} !important;
               }

shesha-reactjs/src/components/entityReference/index.tsx

@@ -259,7 +259,7 @@ export const EntityReference: FC<IEntityReferenceProps> = (props) => {
           Boolean(props.additionalProperties) && props.additionalProperties?.length > 0 && props.additionalProperties.some((p) => p.key === 'id')
             ? props.additionalProperties
             : [{ key: 'id', value: '{{entityReference.id}}' }],
-        modalWidth: addPx(props.modalWidth),
+        modalWidth: addPx(props.modalWidth, executionContext),
         skipFetchData: props.skipFetchData ?? false,
         submitHttpVerb: props.submitHttpVerb ?? 'PUT',
       },
@@ -356,7 +356,7 @@ export const EntityReference: FC<IEntityReferenceProps> = (props) => {
           entityId={entityId}
           entityType={entityType}
           getEntityUrl={props.getEntityUrl}
-          width={addPx(cappedWidth)}
+          width={addPx(cappedWidth, executionContext)}
           formIdentifier={formIdentifier}
           formType={formType}
           // Pass formArguments with entity ID to enable form's data loader (same algorithm as dialog mode)
@@ -375,7 +375,7 @@ export const EntityReference: FC<IEntityReferenceProps> = (props) => {
         <span className={styles.innerEntityReferenceSpanBoxStyle} title={props.displayType === 'textTitle' ? props.textTitle : (typeof displayText === 'string' ? displayText : undefined)}>{displayTextByType}</span>
       </Button>
     );
-  }, [fetched, styles, props, displayText, formIdentifier, entityId, displayTextByType, dialogExecute, properties, entityType, formType]);
+  }, [fetched, styles, props, displayText, formIdentifier, entityId, displayTextByType, dialogExecute, properties, entityType, formType, executionContext]);
 
   if (props.formSelectionMode === 'name' && !props.formIdentifier)
     return (

shesha-reactjs/src/components/fileUpload/index.tsx

@@ -221,7 +221,7 @@ export const FileUpload: FC<IFileUploadProps> = ({
     accept: allowedFileTypes?.join(','),
     multiple: false,
     fileList: fileInfo ? [fileInfo] : [],
-    style: !isDragger && stylesProp,
+    style: !isDragger ? stylesProp : undefined,
     customRequest: onCustomRequest,
     beforeUpload: (file) => {
       if (!isFileTypeAllowed(file.name, allowedFileTypes)) {

shesha-reactjs/src/components/formDesigner/components/configurableFormItemLive.tsx

@@ -1,11 +1,13 @@
 import React, { FC, useMemo } from 'react';
 import { Form, FormItemProps } from 'antd';
-import { getFieldNameFromExpression, getValidationRules } from '@/providers/form/utils';
+import { getFieldNameFromExpression, getValidationRules, useAvailableConstantsData } from '@/providers/form/utils';
 import classNames from 'classnames';
 import { useFormItem, useShaFormInstance } from '@/providers';
 import { IConfigurableFormItemProps } from './model';
 import { ConfigurableFormItemContext } from './configurableFormItemContext';
 import { ConfigurableFormItemForm } from './configurableFormItemForm';
+import { designerConstants } from '../utils/designerConstants';
+import { addPx } from '@/utils/style';
 
 export const ConfigurableFormItemLive: FC<IConfigurableFormItemProps> = ({
   children,
@@ -20,6 +22,9 @@ export const ConfigurableFormItemLive: FC<IConfigurableFormItemProps> = ({
   const getFormData = getPublicFormApi().getFormData;
   const formItem = useFormItem();
   const { namePrefix, wrapperCol: formItemWrapperCol, labelCol: formItemlabelCol } = formItem;
+  const shaForm = useShaFormInstance();
+  const isInDesigner = shaForm.formMode === 'designer';
+  const allData = useAvailableConstantsData();
 
   const layout = useMemo(() => {
     // Make sure the `wrapperCol` and `labelCol` from `FormItemProver` override the ones from the main form
@@ -29,6 +34,22 @@ export const ConfigurableFormItemLive: FC<IConfigurableFormItemProps> = ({
   const { hideLabel, hidden } = model;
   if (hidden) return null;
 
+  const { top: defaultMarginTop, left: defaultMarginLeft, right: defaultMarginRight, bottom: defaultMarginBottom } = designerConstants.DEFAULT_FORM_ITEM_MARGINS;
+
+  // In designer mode: NEVER apply margins to Form.Item (wrapper handles them)
+  // In live mode: Apply margins from allStyles.margins or use defaults
+  // Note: margins are stored separately so inner components don't get them (prevents double margins)
+  const rawMargins = isInDesigner
+    ? { marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0 }
+    : (model?.allStyles?.margins || {});
+
+  const {
+    marginTop = defaultMarginTop,
+    marginBottom = defaultMarginBottom,
+    marginRight = defaultMarginRight,
+    marginLeft = defaultMarginLeft,
+  } = rawMargins;
+
   const propName = namePrefix && !model.initialContext
     ? namePrefix + '.' + model.propertyName
     : model.propertyName;
@@ -46,6 +67,12 @@ export const ConfigurableFormItemLive: FC<IConfigurableFormItemProps> = ({
     wrapperCol: hideLabel ? { span: 24 } : layout?.wrapperCol,
     // layout: model.layout, this property appears to have been removed from the Ant component
     name: model.context ? undefined : getFieldNameFromExpression(propName),
+    style: {
+      marginTop: addPx(marginTop, allData),
+      marginBottom: addPx(marginBottom, allData),
+      marginRight: addPx(marginRight, allData),
+      marginLeft: addPx(marginLeft, allData),
+    },
   };
 
   if (typeof children === 'function') {

shesha-reactjs/src/components/formDesigner/components/configurableFormItemSetting.tsx

@@ -5,14 +5,16 @@ import { getPropertySettingsFromData } from '@/designer-components/_settings/uti
 import { SettingsControl, useShaFormInstance } from '@/index';
 import { IConfigurableFormItemChildFunc, IConfigurableFormItemProps } from './model';
 import { ConfigurableFormItemLive } from './configurableFormItemLive';
+import { useStyles } from './styles';
+import classNames from 'classnames';
 
 export const ConfigurableFormItemSetting: FC<IConfigurableFormItemProps> = ({
   children,
   model,
   valuePropName,
 }) => {
   const { formData } = useShaFormInstance();
-
+  const { styles } = useStyles();
   if (model.hidden) return null;
 
   const { _mode: mode } = getPropertySettingsFromData(formData, model.propertyName);
@@ -51,7 +53,7 @@ export const ConfigurableFormItemSetting: FC<IConfigurableFormItemProps> = ({
         validate: { required: model.validate?.required },
         hidden: model.hidden,
       }}
-      className="sha-js-label"
+      className={classNames(styles.settingsFormItem, "sha-js-label")}
       labelCol={{ span: 24 }}
       wrapperCol={{ span: 24 }}
     >

shesha-reactjs/src/components/formDesigner/components/model.ts

@@ -1,4 +1,4 @@
-import { IConfigurableFormComponent } from "@/index";
+import { IComponentModelProps } from "@/index";
 import { ColProps } from "antd";
 import { ReactNode } from "react";
 
@@ -9,7 +9,7 @@ export type IConfigurableFormItemChildFunc = (
 ) => ReactNode;
 
 export interface IConfigurableFormItemProps {
-  model: IConfigurableFormComponent;
+  model: IComponentModelProps;
   readonly children?: ReactNode | IConfigurableFormItemChildFunc;
   className?: string;
   valuePropName?: string;

shesha-reactjs/src/components/formDesigner/components/styles.ts

@@ -0,0 +1,11 @@
+import { createStyles } from '@/styles';
+
+export const useStyles = createStyles(({ css, cx }) => {
+  const settingsFormItem = cx(css`
+        margin: 0px !important;
+  `);
+
+  return {
+    settingsFormItem,
+  };
+});