@headless-adminapp/fluent 1.3.1 → 1.4.0

package/PageEntityForm/StandardControl.js

@@ -45,7 +45,7 @@ const StandardControl = (props) => {
     // hideLabel,
     hidePlaceholder, readOnly, 
     // quickViewControl,
-    allowNavigation, allowNewRecord, autoHeight, maxHeight, } = props;
+    allowNavigation, allowNewRecord, autoHeight, maxHeight, skeleton, } = props;
     const isDisabled = readOnly;
     // const label = hideLabel ? undefined : _label ?? attribute.label;
     const placeholder = hidePlaceholder
@@ -82,6 +82,7 @@ const StandardControl = (props) => {
                 error: isError,
                 disabled: readOnly,
                 readOnly,
+                skeleton,
             };
             switch (attribute.format) {
                 case 'text': {
@@ -117,19 +118,19 @@ const StandardControl = (props) => {
             switch (attribute.format) {
                 case 'decimal': {
                     const Control = componentStore_1.componentStore.getComponent('Form.DecimalControl') ?? DecimalControl_1.DecimalControl;
-                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly, decimalPlaces: attribute.decimalPlaces }));
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly, decimalPlaces: attribute.decimalPlaces, skeleton: skeleton }));
                 }
                 case 'integer': {
                     const Control = componentStore_1.componentStore.getComponent('Form.IntegerControl') ?? IntegerControl_1.IntegerControl;
-                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly, skeleton: skeleton }));
                 }
                 case 'duration': {
                     const Control = componentStore_1.componentStore.getComponent('Form.DurationControl') ?? DurationControl_1.DurationControl;
-                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly, skeleton: skeleton }));
                 }
                 case 'time': {
                     const Control = componentStore_1.componentStore.getComponent('Form.TimeControl') ?? TimeControl_1.TimeControl;
-                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly, skeleton: skeleton }));
                 }
                 default: {
                     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
@@ -146,6 +147,7 @@ const StandardControl = (props) => {
                 error: isError,
                 disabled: isDisabled,
                 readOnly,
+                skeleton,
             };
             if (attribute.format === 'datetime') {
                 const Control = componentStore_1.componentStore.getComponent('Form.DateTimeControl') ?? DateTimeControl_1.DateTimeControl;
@@ -167,68 +169,47 @@ const StandardControl = (props) => {
                 error: isError,
                 disabled: isDisabled,
                 readOnly,
+                skeleton,
             };
             const Control = componentStore_1.componentStore.getComponent('Form.DateRangeControl') ?? DateRangeControl_1.DateRangeControl;
             return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
         }
         case 'money': {
             const Control = componentStore_1.componentStore.getComponent('Form.CurrencyControl') ?? CurrencyControl_1.CurrencyControl;
-            return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, skeleton: skeleton }));
         }
         case 'lookup': {
             const Control = componentStore_1.componentStore.getComponent('Form.LookupControl') ?? LookupControl_1.LookupControl;
-            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord, skeleton: skeleton }));
         }
         case 'lookups': {
             const Control = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl') ?? MultiSelectLookupControl_1.MultiSelectLookupControl;
-            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord, skeleton: skeleton }));
         }
         case 'regarding': {
             const Control = componentStore_1.componentStore.getComponent('Form.RegardingControl') ?? RegardingControl_1.RegardingControl;
-            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, entities: attribute.entities, schemaStore: schemaStore, experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, entities: attribute.entities, schemaStore: schemaStore, experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord, skeleton: skeleton }));
         }
         case 'boolean': {
             const Control = componentStore_1.componentStore.getComponent('Form.SwitchControl') ?? SwitchControl_1.SwitchControl;
-            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly, skeleton: skeleton }));
         }
         case 'choice': {
             const Control = componentStore_1.componentStore.getComponent('Form.SelectControl') ?? SelectControl_1.default;
-            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, skeleton: skeleton }));
         }
         case 'choices': {
             const Control = componentStore_1.componentStore.getComponent('Form.MultiSelectControl') ?? MultiSelectControl_1.default;
-            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, skeleton: skeleton }));
         }
         case 'attachment': {
             const Control = componentStore_1.componentStore.getComponent('Form.AttachmentControl') ?? AttachmentControl_1.AttachmentControl;
-            return ((0, jsx_runtime_1.jsx)(Control, { fileService: fileService, format: attribute.format, location: attribute.location, name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, fileServiceContext: props.fileServiceContext }));
+            return ((0, jsx_runtime_1.jsx)(Control, { fileService: fileService, format: attribute.format, location: attribute.location, name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, fileServiceContext: props.fileServiceContext, skeleton: skeleton }));
         }
         case 'attachments': {
             const Control = componentStore_1.componentStore.getComponent('Form.AttachmentsControl') ?? AttachmentsControl_1.AttachmentsControl;
-            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, skeleton: skeleton }));
         }
-        // case 'attachment': {
-        //   return (
-        //     <FormControl
-        //       type="attachment"
-        //       name={name}
-        //       label={label}
-        //       required={required}
-        //       value={value}
-        //       onChange={onChange}
-        //       onBlur={onBlur}
-        //       error={isError}
-        //       helperText={errorMessage}
-        //       disabled={isDisabled}
-        //       placeholder={placeholder}
-        //       borderOnFocusOnly={borderOnFocusOnly}
-        //       readOnly={readOnly}
-        //       format={attribute.format}
-        //       maxSize={attribute.maxSize}
-        //       fileService={fileService}
-        //     />
-        //   );
-        // }
     }
     const FallBackControl = componentStore_1.componentStore.getComponent('StandardControl.FallBack');
     if (FallBackControl) {

package/PageEntityView/PageEntityView.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const historystate_1 = require("@headless-adminapp/app/historystate");
 const hooks_1 = require("@headless-adminapp/app/hooks");
 const PageEntityViewProvider_1 = require("@headless-adminapp/app/providers/PageEntityViewProvider");
 const icons_1 = require("@headless-adminapp/icons");
@@ -30,6 +31,6 @@ const PageEntityView = ({ logicalName, viewId, onChangeView, useV2, }) => {
     else {
         content = (0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainerV2, {});
     }
-    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: content }));
+    return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: 'page-entity-view.' + logicalName, children: (0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: content }) }));
 };
 exports.PageEntityView = PageEntityView;

package/Skeleton/TextSkeleton.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface TextSkeletonProps {
+    width?: number | string;
+    height?: number | string;
+}
+export declare const TextSkeletonProps: FC<TextSkeletonProps>;
+export declare const Body1Skeleton: FC<Omit<TextSkeletonProps, 'height' | 'textHeight'>>;
+export declare const Subtitle2Skeleton: FC<Omit<TextSkeletonProps, 'height' | 'textHeight'>>;
+export declare const Caption1Skeleton: FC<Omit<TextSkeletonProps, 'height' | 'textHeight'>>;
+export {};

package/Skeleton/TextSkeleton.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Caption1Skeleton = exports.Subtitle2Skeleton = exports.Body1Skeleton = exports.TextSkeletonProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const TextSkeletonProps = ({ width, height }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { height: height, display: 'flex', alignItems: 'center' }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: { width, height: '75%' } }) }));
+};
+exports.TextSkeletonProps = TextSkeletonProps;
+const Body1Skeleton = (props) => {
+    return (0, jsx_runtime_1.jsx)(exports.TextSkeletonProps, { ...props, height: react_components_1.tokens.lineHeightBase300 });
+};
+exports.Body1Skeleton = Body1Skeleton;
+const Subtitle2Skeleton = (props) => {
+    return (0, jsx_runtime_1.jsx)(exports.TextSkeletonProps, { ...props, height: react_components_1.tokens.lineHeightBase400 });
+};
+exports.Subtitle2Skeleton = Subtitle2Skeleton;
+const Caption1Skeleton = (props) => {
+    return (0, jsx_runtime_1.jsx)(exports.TextSkeletonProps, { ...props, height: react_components_1.tokens.lineHeightBase300 });
+};
+exports.Caption1Skeleton = Caption1Skeleton;

package/form/controls/AttachmentControl.js

@@ -9,6 +9,7 @@ const utils_1 = require("@headless-adminapp/core/utils");
 const icons_1 = require("@headless-adminapp/icons");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
+const SkeletonControl_1 = require("./SkeletonControl");
 function useAttachmentSelector({ fileService, fileServiceContext, location, onChange, }) {
     const openErrorDialog = (0, hooks_1.useOpenErrorDialog)();
     const { isPending, mutate: handleFile } = (0, react_query_1.useMutation)({
@@ -101,7 +102,7 @@ const AttachmentImageControl = ({ value, disabled, readOnly, onChange, fileServi
                                 justifyContent: 'center',
                             }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "small" }) })] }))] }) }));
 };
-const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChange, placeholder, fileService, fileServiceContext, location, format, }) => {
+const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChange, placeholder, fileService, fileServiceContext, location, format, skeleton, }) => {
     const { isProcessing, selectFile } = useAttachmentSelector({
         fileService,
         fileServiceContext,
@@ -132,6 +133,12 @@ const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChan
                 return icons_1.Icons.Document;
         }
     }, [format]);
+    if (skeleton) {
+        if (format === 'image') {
+            return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, { height: 100, width: 100 });
+        }
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     if (format === 'image') {
         return ((0, jsx_runtime_1.jsx)(AttachmentImageControl, { value: value, disabled: disabled, readOnly: readOnly, id: id, name: name, onBlur: onBlur, onChange: onChange, placeholder: placeholder, fileService: fileService, fileServiceContext: fileServiceContext, location: location }));
     }
@@ -142,7 +149,7 @@ const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChan
                         width: '100%',
                         height: 30,
                         borderRadius: react_components_1.tokens.borderRadiusMedium,
-                        backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                        backgroundColor: react_components_1.tokens.colorNeutralBackground3,
                         display: 'flex',
                         paddingLeft: react_components_1.tokens.spacingHorizontalS,
                         gap: react_components_1.tokens.spacingHorizontalS,
@@ -164,7 +171,7 @@ const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChan
                     width: '100%',
                     height: 30,
                     borderRadius: react_components_1.tokens.borderRadiusMedium,
-                    backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                    backgroundColor: react_components_1.tokens.colorNeutralBackground3,
                     display: 'flex',
                     paddingLeft: react_components_1.tokens.spacingHorizontalS,
                     gap: react_components_1.tokens.spacingHorizontalS,

package/form/controls/AttachmentsControl.js

@@ -6,8 +6,12 @@ const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/core/utils");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
-const AttachmentsControl = ({ onChange, id, onBlur, onFocus, disabled, readOnly, value, }) => {
+const SkeletonControl_1 = require("./SkeletonControl");
+const AttachmentsControl = ({ onChange, id, onBlur, onFocus, disabled, readOnly, value, skeleton, }) => {
     const inputRef = (0, react_1.useRef)(null);
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TagPicker, { appearance: "filled-darker", disabled: disabled, open: false, children: [(0, jsx_runtime_1.jsx)(react_components_1.TagPickerControl, { onFocus: onFocus, onBlur: onBlur, id: id, style: { paddingBlock: react_components_1.tokens.spacingVerticalXXS }, expandIcon: null, children: (0, jsx_runtime_1.jsxs)(react_components_1.TagGroup, { style: {
                                 flexWrap: 'wrap',
                                 columnGap: react_components_1.tokens.spacingHorizontalXS,

package/form/controls/CurrencyControl.d.ts

@@ -1,4 +1,4 @@
 import { ControlProps } from './types';
 export interface CurrencyControlProps extends ControlProps<number> {
 }
-export declare function CurrencyControl({ value, onChange, id, name, onBlur, onFocus, disabled, placeholder, autoFocus, readOnly, }: CurrencyControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function CurrencyControl({ value, onChange, id, name, onBlur, onFocus, disabled, placeholder, autoFocus, readOnly, skeleton, }: CurrencyControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/CurrencyControl.js

@@ -5,11 +5,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
 const react_1 = require("react");
+const SkeletonControl_1 = require("./SkeletonControl");
 function CurrencyControl({ value, onChange, id, name, onBlur, onFocus, 
 // error,
 disabled, placeholder, autoFocus, 
 // borderOnFocusOnly,
-readOnly, }) {
+readOnly, skeleton, }) {
     const symbol = (0, locale_1.useCurrencySymbol)();
     const [internalValue, setInternalValue] = (0, react_1.useState)(value ? value.toString() : '');
     const internalValueRef = (0, react_1.useRef)(internalValue);
@@ -45,6 +46,9 @@ readOnly, }) {
         setInternalValue(value);
         onChange?.(Number(value));
     };
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), appearance: "filled-darker", onFocus: () => onFocus?.(), contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), readOnly: readOnly || disabled, style: {
             width: '100%',
         } }));

package/form/controls/DateControl.d.ts

@@ -3,4 +3,4 @@ export interface DateControlProps extends ControlProps<string> {
     maxDate?: Date;
     minDate?: Date;
 }
-export declare function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: Readonly<DateControlProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, skeleton, }: Readonly<DateControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/DateControl.js

@@ -14,11 +14,15 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
 const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const AppStringContext_1 = require("../../App/AppStringContext");
+const SkeletonControl_1 = require("./SkeletonControl");
 dayjs_1.default.extend(utc_1.default);
 dayjs_1.default.extend(timezone_1.default);
-function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
+function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, skeleton, }) {
     const { dateFormats } = (0, locale_1.useLocale)();
     const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus?.(), onBlur: () => onBlur?.(), placeholder: placeholder, appearance: "filled-darker", firstDayOfWeek: react_calendar_compat_1.DayOfWeek.Monday, showMonthPickerAsOverlay: true, disabled: disabled, readOnly: readOnly, formatDate: (date) => (date ? (0, dayjs_1.default)(date).format(dateFormats.short) : ''), value: value ? new Date(value) : null, onSelectDate: (date) => {
             onChange?.(date ? (0, dayjs_1.default)(date).format('YYYY-MM-DD') : null);
         }, strings: datePickerStrings, style: {

package/form/controls/DateRangeControl/DateRangeControl.d.ts

@@ -3,4 +3,4 @@ export interface DateRangeControlProps extends ControlProps<[string, string]> {
     maxDate?: Date;
     minDate?: Date;
 }
-export declare function DateRangeControl({ value, onChange, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }: Readonly<DateRangeControlProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangeControl({ value, onChange, onBlur, onFocus, disabled, maxDate, minDate, readOnly, skeleton, }: Readonly<DateRangeControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/DateRangeControl/DateRangeControl.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
 const react_1 = require("react");
+const SkeletonControl_1 = require("../SkeletonControl");
 const PopoverContent_1 = require("./PopoverContent");
 const utils_1 = require("./utils");
 const useStyles = (0, react_components_1.makeStyles)({
@@ -14,13 +15,16 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-function DateRangeControl({ value, onChange, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }) {
+function DateRangeControl({ value, onChange, onBlur, onFocus, disabled, maxDate, minDate, readOnly, skeleton, }) {
     const [open, setOpen] = (0, react_1.useState)(false);
     const styles = useStyles();
     const { dateRangeFormats } = (0, locale_1.useLocale)();
     const formattedValue = (0, react_1.useMemo)(() => {
         return (0, utils_1.formatDateRange)(value, dateRangeFormats.short);
     }, [value, dateRangeFormats]);
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { open: open, onOpenChange: (_, data) => {
             if (readOnly || disabled) {
                 return;

package/form/controls/DateTimeControl.d.ts

@@ -3,4 +3,4 @@ export interface DateTimeControlProps extends ControlProps<string> {
     maxDate?: Date;
     minDate?: Date;
 }
-export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: Readonly<DateTimeControlProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, skeleton, }: Readonly<DateTimeControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/DateTimeControl.js

@@ -15,11 +15,12 @@ const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFor
 const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
 const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const react_1 = require("react");
+const SkeletonControl_1 = require("./SkeletonControl");
 const utils_1 = require("./TimeControl/utils");
 dayjs_1.default.extend(customParseFormat_1.default);
 dayjs_1.default.extend(utc_1.default);
 dayjs_1.default.extend(timezone_1.default);
-function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
+function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, skeleton, }) {
     const { dateFormats: { short: dateFormat }, timeFormats: { short: timeFormat }, timezone, } = (0, locale_1.useLocale)();
     const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat) : '');
     const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
@@ -34,6 +35,13 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
     }, [value, timezone, timeFormat]);
     const isReadonly = readOnly || disabled;
     const [isDatePickerOpen, setIsDatePickerOpen] = (0, react_1.useState)(false);
+    if (skeleton) {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: react_components_1.tokens.spacingHorizontalS,
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {}) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {}) })] }));
+    }
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',

package/form/controls/DecimalControl.d.ts

@@ -2,4 +2,4 @@ import { ControlProps } from './types';
 export interface DecimalControlProps extends ControlProps<number> {
     decimalPlaces?: number;
 }
-export declare function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, }: DecimalControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, skeleton, }: DecimalControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/DecimalControl.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable unused-imports/no-unused-vars */
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
-function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, }) {
+const SkeletonControl_1 = require("./SkeletonControl");
+function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, skeleton, }) {
     const [internalValue, setInternalValue] = (0, react_1.useState)(value ? value.toString() : '');
     const internalValueRef = (0, react_1.useRef)(internalValue);
     internalValueRef.current = internalValue;
@@ -46,6 +47,9 @@ function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, dis
         setInternalValue(value);
         onChange?.(Number(value));
     };
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), readOnly: readOnly || disabled, style: {
             width: '100%',
         } }));

package/form/controls/DurationControl.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/app/utils");
 const react_1 = require("react");
+const SkeletonControl_1 = require("./SkeletonControl");
 const useStyles = (0, react_components_1.makeStyles)({
     listbox: {
         maxHeight: '300px !important',
@@ -101,7 +102,7 @@ const options = [
         value: '4320',
     },
 ];
-const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, }) => {
+const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, skeleton, }) => {
     const [searchText, setSearchText] = (0, react_1.useState)('');
     const [filterEnabled, setFilterEnabled] = (0, react_1.useState)(false);
     const styles = useStyles();
@@ -114,6 +115,9 @@ const DurationControl = ({ value, onChange, id, name, onBlur, onFocus, placehold
         }
         return options.filter((item) => item.text.toLowerCase().includes(searchText.toLowerCase()));
     }, [searchText, filterEnabled]);
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: '100%' }, children: (0, jsx_runtime_1.jsx)(react_components_1.Combobox, { name: name, appearance: "filled-darker", placeholder: placeholder, inputMode: "search", style: { width: '100%', minWidth: 'unset' }, listbox: { className: styles.listbox }, autoComplete: "off", readOnly: readOnly || disabled, value: searchText, disableAutoFocus: true, selectedOptions: value ? [value.toString()] : [], onBlur: () => {
                 let newValue = null;
                 if (searchText) {

package/form/controls/EmailControl.d.ts

@@ -3,4 +3,4 @@ export interface EmailControlProps extends ControlProps<string> {
     autoComplete?: string;
     textTransform?: 'capitalize' | 'uppercase' | 'lowercase' | 'none';
 }
-export declare function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, }: Readonly<EmailControlProps>): import("react/jsx-runtime").JSX.Element;
+export declare function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, skeleton, }: Readonly<EmailControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/EmailControl.js

@@ -4,7 +4,11 @@ exports.EmailControl = EmailControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
-function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, }) {
+const SkeletonControl_1 = require("./SkeletonControl");
+function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, textTransform, readOnly, skeleton, }) {
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "email", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 
         // size="sm"
         value: value || '', onChange: (e) => {

package/form/controls/IdControl.d.ts

@@ -4,4 +4,4 @@ import { ControlProps } from './types';
 export interface IdControlProps extends ControlProps<Id> {
     idTypes: IdTypes;
 }
-export declare function IdControl({ idTypes, ...props }: Readonly<IdControlProps>): import("react/jsx-runtime").JSX.Element;
+export declare function IdControl({ idTypes, skeleton, ...props }: Readonly<IdControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/IdControl.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IdControl = IdControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const IntegerControl_1 = require("./IntegerControl");
+const SkeletonControl_1 = require("./SkeletonControl");
 const TextControl_1 = require("./TextControl");
 function formatGuid(value) {
     if (!value) {
@@ -37,7 +38,10 @@ function formatObjectId(value) {
     value = value.replace(/[^0-9a-fA-F]/g, '');
     return value.substring(0, 24).toLowerCase();
 }
-function IdControl({ idTypes, ...props }) {
+function IdControl({ idTypes, skeleton, ...props }) {
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     if ('string' in idTypes && idTypes.string) {
         return (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { ...props, value: props.value });
     }

package/form/controls/IntegerControl.d.ts

@@ -1,4 +1,4 @@
 import { ControlProps } from './types';
 export interface IntegerControlProps extends ControlProps<number> {
 }
-export declare function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }: IntegerControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, skeleton, }: IntegerControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/IntegerControl.js

@@ -4,7 +4,11 @@ exports.IntegerControl = IntegerControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable unused-imports/no-unused-vars */
 const react_components_1 = require("@fluentui/react-components");
-function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, }) {
+const SkeletonControl_1 = require("./SkeletonControl");
+function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, skeleton, }) {
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsx)(react_components_1.SpinButton, { appearance: "filled-darker", placeholder: placeholder, id: id, name: name, value: value ?? null, readOnly: readOnly || disabled, style: {
             width: '100%',
         }, onChange: (e, data) => {

package/form/controls/LookupControl.js

@@ -12,6 +12,7 @@ const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
 const RecordCard_1 = require("../../PageEntityForm/RecordCard");
 const avatar_1 = require("../../utils/avatar");
+const SkeletonControl_1 = require("./SkeletonControl");
 const useLookupData_1 = require("./useLookupData");
 function LookupControl(props) {
     const Control = LookupControlMd;
@@ -32,7 +33,7 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, dataService, schema, viewId, allowNavigation, allowNewRecord, }) => {
+const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, dataService, schema, viewId, allowNavigation, allowNewRecord, skeleton, }) => {
     const [lookupEnabled, setLookupEnabled] = (0, react_1.useState)(false);
     const [open, setOpen] = (0, react_1.useState)(false);
     const [searchText, setSearchText] = (0, react_1.useState)('');
@@ -113,6 +114,9 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
             });
         }
     };
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })), placeholder: !value ? placeholder : '', inputMode: "search", style: { width: '100%', minWidth: 'unset' }, autoComplete: "off", readOnly: readOnly || disabled, 
                 // disabled={disabled}
                 open: open && !value && !readOnly && !disabled, value: !value ? searchText : '', onOpenChange: (e, data) => setOpen(data.open), onChange: (e) => {

package/form/controls/MultiSelectControl.d.ts

@@ -3,4 +3,4 @@ import { ControlProps } from './types';
 export interface MultiSelectControlProps<T> extends ControlProps<T[]> {
     options: Lookup<T>[];
 }
-export default function MultiSelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }: MultiSelectControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, }: MultiSelectControlProps<T>): import("react/jsx-runtime").JSX.Element;

package/form/controls/MultiSelectControl.js

@@ -4,13 +4,17 @@ exports.default = MultiSelectControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
-function MultiSelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }) {
+const SkeletonControl_1 = require("./SkeletonControl");
+function MultiSelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, }) {
     const transformedOptions = (0, react_1.useMemo)(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
     const handleChange = (value) => {
         const selectedOptions = options.filter((x) => value.includes(String(x.value)));
         onChange?.(selectedOptions.map((x) => x.value));
     };
     const selectedOptions = (0, react_1.useMemo)(() => options.filter((x) => value?.includes(x.value)), [options, value]);
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { placeholder: placeholder, id: id, name: name, appearance: "filled-darker", multiselect: true, value: selectedOptions.map((x) => x.label).join(', '), selectedOptions: value ? value.map(String) : [], onOptionSelect: (event, data) => {
             handleChange(data.selectedOptions);
         }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), disabled: disabled, style: {

package/form/controls/MultiSelectLookupControl.js

@@ -10,6 +10,7 @@ const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
 const RecordCard_1 = require("../../PageEntityForm/RecordCard");
+const SkeletonControl_1 = require("./SkeletonControl");
 const useLookupData_1 = require("./useLookupData");
 function MultiSelectLookupControl(props) {
     const Control = LookupControlMd;
@@ -30,7 +31,7 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, dataService, schema, viewId, allowNavigation, allowNewRecord, }) => {
+const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, dataService, schema, viewId, allowNavigation, allowNewRecord, skeleton, }) => {
     const [lookupEnabled, setLookupEnabled] = (0, react_1.useState)(false);
     const [open, setOpen] = (0, react_1.useState)(false);
     const [searchText, setSearchText] = (0, react_1.useState)('');
@@ -121,6 +122,9 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
             onChange?.(newValue);
         }
     };
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%', height: containerHeight }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', right: 4, bottom: 8 }, children: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })) }), input: {
                     style: {
                         position: 'absolute',