@headless-adminapp/fluent 1.3.1 → 1.4.0

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.1",
+  "version": "1.4.0",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -52,5 +52,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "019339a44fae0fcce5466041f922710b08b79172"
+  "gitHead": "a064c301b98e340b142e8daeac078b4cdf5ad99a"
 }

package/PageCalendar/EventDialog/AttributeController.d.ts

@@ -1,11 +0,0 @@
-import { Attribute } from '@headless-adminapp/core';
-import { Path, UseFormReturn } from 'react-hook-form';
-import { BaseFieldValues } from './types';
-interface AttributeControllerProps {
-    attribute: Attribute;
-    attributeName: Path<BaseFieldValues>;
-    form: UseFormReturn<BaseFieldValues>;
-    readOnly?: boolean;
-}
-export declare function AttributeController({ attribute, attributeName, form, readOnly, }: Readonly<AttributeControllerProps>): import("react/jsx-runtime").JSX.Element;
-export {};

package/PageCalendar/EventDialog/AttributeController.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AttributeController = AttributeController;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_hook_form_1 = require("react-hook-form");
-const SectionControl_1 = require("../../DataForm/SectionControl");
-const StandardControl_1 = require("../../PageEntityForm/StandardControl");
-function AttributeController({ attribute, attributeName, form, readOnly, }) {
-    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: attributeName, render: ({ field, fieldState, formState }) => {
-            const isError = (fieldState.isTouched || formState.isSubmitted) &&
-                !!fieldState.error?.message;
-            const errorMessage = fieldState.isTouched || formState.isSubmitted
-                ? fieldState.error?.message
-                : '';
-            return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: readOnly || attribute.readonly }) }));
-        } }));
-}

package/form/controls/DateRangeControl.d.ts

@@ -1,12 +0,0 @@
-import { ControlProps } from './types';
-export interface DateRangeControlProps extends ControlProps<[string, string]> {
-    maxDate?: Date;
-    minDate?: Date;
-}
-export declare function DateRangeControl({ value, onChange, id, name, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }: DateRangeControlProps): import("react/jsx-runtime").JSX.Element;
-export declare const cornersClassNames: {
-    topRightCornerDate: string;
-    topLeftCornerDate: string;
-    bottomRightCornerDate: string;
-    bottomLeftCornerDate: string;
-};

package/form/controls/DateRangeControl.js

@@ -1,293 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cornersClassNames = void 0;
-exports.DateRangeControl = DateRangeControl;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_calendar_compat_1 = require("@fluentui/react-calendar-compat");
-const react_components_1 = require("@fluentui/react-components");
-const locale_1 = require("@headless-adminapp/app/locale");
-const dayjs_1 = __importDefault(require("dayjs"));
-const react_1 = require("react");
-const AppStringContext_1 = require("../../App/AppStringContext");
-function formatDateRange(value, dateRangeFormat) {
-    if (!value || value.length !== 2) {
-        return '';
-    }
-    const [start, end] = value.map((date) => (0, dayjs_1.default)(date)); //.tz(timezone));
-    if (start.isSame(end, 'year')) {
-        if (start.isSame(end, 'month')) {
-            if (start.isSame(end, 'day')) {
-                return start.format(dateRangeFormat.date);
-            }
-            else {
-                return (start.format(dateRangeFormat.sameMonth[0]) +
-                    dateRangeFormat.separator +
-                    end.format(dateRangeFormat.sameMonth[1]));
-            }
-        }
-        else {
-            return (start.format(dateRangeFormat.sameYear[0]) +
-                dateRangeFormat.separator +
-                end.format(dateRangeFormat.sameYear[1]));
-        }
-    }
-    else {
-        return (start.format(dateRangeFormat.date) +
-            dateRangeFormat.separator +
-            end.format(dateRangeFormat.date));
-    }
-}
-function DateRangeControl({ value, onChange, id, name, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }) {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const { dateRangeFormats } = (0, locale_1.useLocale)();
-    const formattedValue = (0, react_1.useMemo)(() => {
-        return formatDateRange(value, dateRangeFormats.short);
-    }, [value, dateRangeFormats]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Popover, { open: open, onOpenChange: (_, data) => {
-                if (readOnly || disabled) {
-                    return;
-                }
-                onFocus?.();
-                setOpen(data.open);
-            }, positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Input, { appearance: "filled-darker", readOnly: true, style: { cursor: 'pointer' }, value: formattedValue, onChange: () => { } }) }), (0, jsx_runtime_1.jsx)(react_components_1.PopoverSurface, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(PopoverContent, { value: value, minDate: minDate, maxDate: maxDate, onChange: (value) => {
-                            setOpen(false);
-                            onChange?.(value);
-                            onBlur?.();
-                        } }) })] }) }));
-}
-const PopoverContent = ({ value, minDate, maxDate, onChange, required, }) => {
-    const [internalValue, setInternalValue] = (0, react_1.useState)([value ? new Date(value[0]) : null, value ? new Date(value[1]) : null]);
-    // const [date1, setDate1] = useState<string | null>(null);
-    // const [date2, setDate2] = useState<string | null>(null);
-    const [navigationDate1, setNavigationDate1] = (0, react_1.useState)(internalValue[0] ?? (0, dayjs_1.default)().toDate());
-    const [navigationDate2, setNavigationDate2] = (0, react_1.useState)(internalValue[1] ?? (0, dayjs_1.default)().add(1, 'month').toDate());
-    const [date1, date2] = internalValue;
-    // useEffect(() => {
-    //   if (value) {
-    //     let d1 = new Date(value[0]);
-    //     let d2 = new Date(value[1]);
-    //     if (d1 > d2) {
-    //       const temp = d1;
-    //       d1 = d2;
-    //       d2 = temp;
-    //     }
-    //     setDate1(d1.toISOString());
-    //     setDate2(d2.toISOString());
-    //   }
-    // }, [value]);
-    const leftMaxDate = !date1 && date2
-        ? (0, dayjs_1.default)(date2).subtract(1, 'month').endOf('month').toDate()
-        : undefined;
-    const rightMinDate = !date2 && date1
-        ? (0, dayjs_1.default)(date1).add(1, 'month').startOf('month').toDate()
-        : undefined;
-    const _minDate = minDate
-        ? new Date(minDate)
-        : date1
-            ? new Date(date1)
-            : undefined;
-    const _maxDate = maxDate
-        ? new Date(maxDate)
-        : date2
-            ? new Date(date2)
-            : undefined;
-    // const date1Ref = useRef<string | null>(date1);
-    // const date2Ref = useRef<string | null>(date2);
-    // date1Ref.current = date1;
-    // date2Ref.current = date2;
-    const handleCalendarChange = (date, isLeftCalendar) => {
-        if ((date1 && date2) || (!date1 && !date2)) {
-            if (isLeftCalendar) {
-                setInternalValue([date, null]);
-                // setDate1(date.toISOString());
-                // setDate2(null);
-                setNavigationDate2((0, dayjs_1.default)(date).add(1, 'month').toDate());
-            }
-            else {
-                setInternalValue([null, date]);
-                // setDate2(date.toISOString());
-                // setDate1(null);
-                setNavigationDate1((0, dayjs_1.default)(date).subtract(1, 'month').toDate());
-            }
-        }
-        else {
-            let d1 = date1;
-            let d2 = date2;
-            const v = [date1, date2].filter(Boolean);
-            v.push(date);
-            v.sort((a, b) => a.getTime() - b.getTime());
-            // setDate1(v[0]);
-            // setDate2(v[1]);
-            console.log('v', v);
-            setInternalValue(v.map((d) => new Date(d)));
-        }
-        // const newValues = [...__values] as [string | null, string | null];
-        // if (newValues[0] && newValues[1]) {
-        //   newValues[0] = null;
-        //   newValues[1] = null;
-        // }
-        // if (!newValues[0]) {
-        //   newValues[0] = date.toISOString();
-        // } else {
-        //   newValues[1] = date.toISOString();
-        // }
-        // // Swap values if the first date is after the second date
-        // if (
-        //   newValues[0] &&
-        //   newValues[1] &&
-        //   new Date(newValues[0]) > new Date(newValues[1])
-        // ) {
-        //   const temp = newValues[0];
-        //   newValues[0] = newValues[1];
-        //   newValues[1] = temp;
-        // }
-        // __setValues(newValues);
-    };
-    // date1, date2
-    // [from, to]
-    // navigate date1
-    // navigate date2
-    // First selection in left calendar is start date
-    // First selection in right calendar is end date
-    // Second selection is conditional
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex' }, children: [JSON.stringify(internalValue), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(CalendarItem, { date1: date1, date2: date2, navigatedDate: navigationDate1, maxDate: leftMaxDate ?? maxDate, minDate: minDate, onSelectDate: (date) => {
-                                    handleCalendarChange(date, true);
-                                }, onNavigateDate: (date) => {
-                                    setNavigationDate1(date);
-                                } }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)(CalendarItem, { date1: date1, date2: date2, navigatedDate: navigationDate2, minDate: rightMinDate ?? minDate, maxDate: maxDate, onSelectDate: (date) => {
-                                    handleCalendarChange(date, false);
-                                }, onNavigateDate: (date) => {
-                                    setNavigationDate2(date);
-                                } })] }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            gap: react_components_1.tokens.spacingHorizontalS,
-                            padding: react_components_1.tokens.spacingVerticalS,
-                            justifyContent: 'flex-end',
-                        }, children: [!required && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { size: "small", appearance: "secondary", onClick: () => {
-                                    onChange?.(null);
-                                    setInternalValue([null, null]);
-                                }, children: "Clear" })), (0, jsx_runtime_1.jsx)(react_components_1.Button, { size: "small", appearance: "primary", disabled: !internalValue[0] || !internalValue[1], onClick: () => {
-                                    if (!internalValue[0] || !internalValue[1]) {
-                                        return;
-                                    }
-                                    onChange?.([
-                                        (0, dayjs_1.default)(internalValue[0]).format('YYYY-MM-DD'),
-                                        (0, dayjs_1.default)(internalValue[1]).format('YYYY-MM-DD'),
-                                    ]);
-                                }, children: "Apply" })] })] })] }));
-};
-exports.cornersClassNames = {
-    topRightCornerDate: 'fui-CalendarDayGrid__topRightCornerDate',
-    topLeftCornerDate: 'fui-CalendarDayGrid__topLeftCornerDate',
-    bottomRightCornerDate: 'fui-CalendarDayGrid__bottomRightCornerDate',
-    bottomLeftCornerDate: 'fui-CalendarDayGrid__bottomLeftCornerDate',
-};
-function checkIsSameMonth(date1, date2) {
-    return date1.isSame(date2, 'month');
-}
-function applyRoundedStyles({ element, date, navigatedDate, selectedDate1, selectedDate2, classNames, }) {
-    if (!classNames.daySelected) {
-        return;
-    }
-    const _date = (0, dayjs_1.default)(date); //.tz(timezone);
-    const _navigatedDate = (0, dayjs_1.default)(navigatedDate); //.tz(timezone);
-    const _selectedDate1 = (0, dayjs_1.default)(selectedDate1); //.tz(timezone);
-    const _selectedDate2 = (0, dayjs_1.default)(selectedDate2); //.tz(timezone);
-    const isSameMonth = checkIsSameMonth(_navigatedDate, _date);
-    const isSelected = isSameMonth &&
-        selectedDate1 &&
-        selectedDate2 &&
-        date >= selectedDate1 &&
-        date <= selectedDate2;
-    if (!isSelected) {
-        element.classList.remove(...classNames.daySelected.split(' '));
-        element.classList.add(exports.cornersClassNames.topLeftCornerDate);
-        element.classList.add(exports.cornersClassNames.topRightCornerDate);
-        element.classList.add(exports.cornersClassNames.bottomLeftCornerDate);
-        element.classList.add(exports.cornersClassNames.bottomRightCornerDate);
-        return;
-    }
-    const aboveDate = _date.subtract(7, 'day');
-    const belowDate = _date.add(7, 'day');
-    const leftDate = _date.subtract(1, 'day');
-    const rightDate = _date.add(1, 'day');
-    const isFirstDay = _date.day() === 1; // Monday
-    const isLastDay = _date.day() === 0; // Sunday
-    const isAboveDateInRange = !aboveDate.isBefore(_selectedDate1);
-    const isBelowDateInRange = !belowDate.isAfter(_selectedDate2);
-    const isLeftDateInRange = !leftDate.isBefore(_selectedDate1);
-    const isRightDateInRange = !rightDate.isAfter(_selectedDate2);
-    const isAboveDateInSameMonth = checkIsSameMonth(aboveDate, _navigatedDate);
-    const isBelowDateInSameMonth = checkIsSameMonth(belowDate, _navigatedDate);
-    const isLeftDateInSameMonth = checkIsSameMonth(leftDate, _navigatedDate);
-    const isRightDateInSameMonth = checkIsSameMonth(rightDate, _navigatedDate);
-    const nothingOnLeft = !isLeftDateInRange || isFirstDay || !isLeftDateInSameMonth;
-    const nothingOnRight = !isRightDateInRange || isLastDay || !isRightDateInSameMonth;
-    const nothingAbove = !isAboveDateInRange || !isAboveDateInSameMonth;
-    const nothingBelow = !isBelowDateInRange || !isBelowDateInSameMonth;
-    const hasTopLeftRadius = nothingOnLeft && nothingAbove;
-    const hasTopRightRadius = nothingOnRight && nothingAbove;
-    const hasBottomLeftRadius = nothingOnLeft && nothingBelow;
-    const hasBottomRightRadius = nothingOnRight && nothingBelow;
-    const classToAdd = classNames.daySelected.split(' ');
-    const classToRemove = [];
-    if (hasTopLeftRadius) {
-        classToAdd.push(exports.cornersClassNames.topLeftCornerDate);
-    }
-    else {
-        classToRemove.push(exports.cornersClassNames.topLeftCornerDate);
-    }
-    if (hasTopRightRadius) {
-        classToAdd.push(exports.cornersClassNames.topRightCornerDate);
-    }
-    else {
-        classToRemove.push(exports.cornersClassNames.topRightCornerDate);
-    }
-    if (hasBottomLeftRadius) {
-        classToAdd.push(exports.cornersClassNames.bottomLeftCornerDate);
-    }
-    else {
-        classToRemove.push(exports.cornersClassNames.bottomLeftCornerDate);
-    }
-    if (hasBottomRightRadius) {
-        classToAdd.push(exports.cornersClassNames.bottomRightCornerDate);
-    }
-    else {
-        classToRemove.push(exports.cornersClassNames.bottomRightCornerDate);
-    }
-    element.classList.add(...classToAdd);
-    element.classList.remove(...classToRemove);
-}
-const CalendarItem = ({ date1, date2, navigatedDate, maxDate, minDate, onNavigateDate, onSelectDate, }) => {
-    const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
-    const date1Ref = (0, react_1.useRef)(date1);
-    const date2Ref = (0, react_1.useRef)(date2);
-    const navigatedDateRef = (0, react_1.useRef)(navigatedDate);
-    date1Ref.current = date1;
-    date2Ref.current = date2;
-    navigatedDateRef.current = navigatedDate;
-    const customDayCellRef = (0, react_1.useCallback)((element, date, classNames) => {
-        if (!element) {
-            return;
-        }
-        applyRoundedStyles({
-            element,
-            navigatedDate: navigatedDateRef.current,
-            date,
-            selectedDate1: date1Ref.current,
-            selectedDate2: date2Ref.current,
-            classNames,
-        });
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(react_calendar_compat_1.Calendar, { showMonthPickerAsOverlay: true, showGoToToday: false, highlightSelectedMonth: false, highlightCurrentMonth: false, firstDayOfWeek: react_calendar_compat_1.DayOfWeek.Monday, strings: datePickerStrings, calendarDayProps: {
-            customDayCellRef: customDayCellRef,
-            onNavigateDate: onNavigateDate,
-            navigatedDate: navigatedDate,
-        }, calendarMonthProps: {
-            navigatedDate: navigatedDate,
-            onNavigateDate: onNavigateDate,
-        }, maxDate: maxDate, minDate: minDate, onSelectDate: onSelectDate }));
-};

package/form/controls/TimeControl.d.ts

@@ -1,4 +0,0 @@
-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;