@headless-adminapp/fluent 1.3.3 → 1.4.2

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',

package/form/controls/RegardingControl.js

@@ -14,6 +14,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 RegardingControl(props) {
     const Control = LookupControlMd;
@@ -34,7 +35,7 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, dataService, entities, schemaStore, allowNavigation, }) => {
+const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, dataService, entities, schemaStore, allowNavigation, skeleton, }) => {
     const [lookupEnabled, setLookupEnabled] = (0, react_1.useState)(false);
     const [open, setOpen] = (0, react_1.useState)(false);
     const [searchText, setSearchText] = (0, react_1.useState)('');
@@ -119,6 +120,9 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
         }
         return schemaStore.getSchema(value?.logicalName);
     }, [schemaStore, value]);
+    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/RichTextControl.js

@@ -26,8 +26,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const SkeletonControl_1 = require("./SkeletonControl");
 const ReactQuill = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-quill'))));
-const RichTextControl = ({ value, onChange, id, onBlur, onFocus, disabled, readOnly, }) => {
+const RichTextControl = ({ value, onChange, id, onBlur, onFocus, disabled, readOnly, skeleton, }) => {
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, { height: 200 });
+    }
     return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(ReactQuill, { value: value ?? '', onChange: onChange, className: "hdlapp_rte", readOnly: disabled || readOnly, style: { maxHeight: '400px', minHeight: '200px' }, onFocus: onFocus, onBlur: onBlur, id: id }) }));
 };
 exports.RichTextControl = RichTextControl;

package/form/controls/SelectControl.d.ts

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

package/form/controls/SelectControl.js

@@ -4,7 +4,8 @@ exports.default = SelectControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
-function SelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }) {
+const SkeletonControl_1 = require("./SkeletonControl");
+function SelectControl({ 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 option = options.find((x) => String(x.value) === value);
@@ -16,6 +17,9 @@ function SelectControl({ value, onChange, options, id, name, disabled, onBlur, o
         }
     };
     const selectedOption = (0, react_1.useMemo)(() => options.find((x) => x.value === 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", 
         // data={transformedOptions}
         value: selectedOption?.label ?? '', 

package/form/controls/SkeletonControl.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface SkeletonControlProps {
+    height?: number;
+    width?: number | string;
+}
+export declare const SkeletonControl: FC<SkeletonControlProps>;
+export {};

package/form/controls/SkeletonControl.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const useStyles = (0, react_components_1.makeStyles)({
+    skeleton: {
+        backgroundColor: 'var(--colorNeutralBackground3)',
+        '&:after': {
+            backgroundImage: 'linear-gradient(to right, var(--colorNeutralBackground3) 0%, var(--colorNeutralBackground6) 50%, var(--colorNeutralBackground3) 100%)',
+        },
+    },
+});
+const SkeletonControl = ({ height = 32, width, }) => {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: { height: height - 4, width }, className: styles.skeleton }) }));
+};
+exports.SkeletonControl = SkeletonControl;

package/form/controls/SwitchControl.d.ts

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

package/form/controls/SwitchControl.js

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchControl = SwitchControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, }) {
+const SkeletonControl_1 = require("./SkeletonControl");
+function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, skeleton, }) {
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, { width: 80 });
+    }
     return ((0, jsx_runtime_1.jsx)(react_components_1.Switch, { checked: value ?? false, onChange: (e) => onChange?.(e.currentTarget.checked), id: id, name: name, disabled: disabled, readOnly: readOnly, onBlur: onBlur, onFocus: onFocus }));
 }

package/form/controls/TelephoneControl.d.ts

@@ -2,4 +2,4 @@ import { ControlProps } from './types';
 export interface TelephoneControlProps extends ControlProps<string> {
     autoComplete?: string;
 }
-export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }: Readonly<TelephoneControlProps>): import("react/jsx-runtime").JSX.Element;
+export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, skeleton, }: Readonly<TelephoneControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/TelephoneControl.js

@@ -7,7 +7,8 @@ const locale_1 = require("@headless-adminapp/app/locale");
 const phone_1 = require("@headless-adminapp/app/utils/phone");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
-function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }) {
+const SkeletonControl_1 = require("./SkeletonControl");
+function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, skeleton, }) {
     const [internalValue, setInternalValue] = (0, react_1.useState)('');
     const { region } = (0, locale_1.useLocale)();
     const number = (0, react_1.useMemo)(() => {
@@ -24,6 +25,9 @@ function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placehol
         setInternalValue(parsedPhoneNumber.formattedInternationalValue);
         onChange?.(parsedPhoneNumber.rawValue);
     };
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: (e) => setInternalValue?.(e.target.value), onBlur: () => {
             handleChange();
             onBlur?.();

package/form/controls/TextAreaControl.d.ts

@@ -5,4 +5,4 @@ export interface TextAreaControlProps extends ControlProps<string> {
     autoHeight?: boolean;
     maxHeight?: number;
 }
-export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows, textTransform, autoHeight, maxHeight, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows, textTransform, autoHeight, maxHeight, skeleton, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/TextAreaControl.js

@@ -4,8 +4,9 @@ exports.TextAreaControl = TextAreaControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
+const SkeletonControl_1 = require("./SkeletonControl");
 const DEFAULT_MAX_HEIGHT = 260;
-function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows = 5, textTransform, autoHeight, maxHeight, }) {
+function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows = 5, textTransform, autoHeight, maxHeight, skeleton, }) {
     const textAreaRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const textarea = textAreaRef.current;
@@ -35,6 +36,9 @@ function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFoc
         }
         onChange?.(newValue);
     };
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, { height: 116 });
+    }
     return ((0, jsx_runtime_1.jsx)(react_components_1.Textarea, { ref: textAreaRef, placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value ?? '', onChange: handleInput, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // error={error}
         readOnly: disabled || readOnly, rows: rows, style: {

package/form/controls/TextControl.d.ts

@@ -8,4 +8,4 @@ export interface TextControlProps extends ControlProps<string> {
     appearance?: InputProps['appearance'];
     maxLength?: number;
 }
-export declare function TextControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, autoFocus, autoCapitalize, autoCorrect, textTransform, readOnly, appearance, maxLength, }: TextControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, autoFocus, autoCapitalize, autoCorrect, textTransform, readOnly, appearance, maxLength, skeleton, }: TextControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/TextControl.js

@@ -3,12 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextControl = TextControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const SkeletonControl_1 = require("./SkeletonControl");
 function TextControl({ value, onChange, id, name, onBlur, onFocus, 
 // error,
 placeholder, disabled, autoComplete, autoFocus, autoCapitalize, autoCorrect, textTransform, 
 // borderOnFocusOnly,
-readOnly, appearance = 'filled-darker', maxLength, }) {
+readOnly, appearance = 'filled-darker', maxLength, skeleton, }) {
     const readonly = disabled || readOnly;
+    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, name: name, autoFocus: autoFocus, appearance: appearance, value: value || '', onChange: (e) => {
             textTransform === 'uppercase'
                 ? onChange?.(e.target.value.toUpperCase())

package/form/controls/TimeControl/TimeControl.d.ts

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

package/form/controls/TimeControl/TimeControl.js

@@ -12,9 +12,10 @@ const icons_1 = require("@headless-adminapp/icons");
 const dayjs_1 = __importDefault(require("dayjs"));
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 const react_1 = require("react");
+const SkeletonControl_1 = require("../SkeletonControl");
 const utils_1 = require("./utils");
 dayjs_1.default.extend(customParseFormat_1.default);
-function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled, readOnly, }) {
+function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled, readOnly, skeleton, }) {
     const { timeFormats: { short: timeFormat }, timezone, } = (0, locale_1.useLocale)();
     const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)().startOf('day').add(value, 'minutes').format(timeFormat) : '');
     const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
@@ -34,6 +35,9 @@ function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled,
         }
         return (0, dayjs_1.default)().startOf('day').add(value, 'minutes').toDate();
     }, [value]);
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             alignItems: 'center',

package/form/controls/UrlControl.d.ts

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

package/form/controls/UrlControl.js

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

package/form/controls/types.d.ts

@@ -11,4 +11,5 @@ export interface ControlProps<T> {
     autoFocus?: boolean;
     borderOnFocusOnly?: boolean;
     readOnly?: boolean;
+    skeleton?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.3.3",
+  "version": "1.4.2",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -52,5 +52,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "87e20148674670e3e9aaa2fa2cb62266875d9342"
+  "gitHead": "150c2a6eee123cdb3cb42b1f42f1b4bea8db2756"
 }