@headless-adminapp/fluent 1.3.0 → 1.3.3

package/Insights/Header.js

@@ -43,7 +43,7 @@ const Header = () => {
                                 eventManager.emit('INSIGHT_REFRESH_TRIGGER');
                             }, children: "Refresh" }) })] }), !!config.filterAttributes && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: Object.entries(config.filterAttributes).map(([attributeName, attribute]) => {
                             return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: filterForm.control, name: attributeName, render: ({ field }) => {
-                                    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
+                                    return ((0, jsx_runtime_1.jsx)("div", { style: { width: 210, minWidth: 210 }, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
                                 } }, attributeName));
                         }) })] }))] }));
 };

package/Insights/WidgetSection.js

@@ -11,6 +11,7 @@ const WidgetSection = ({ children }) => {
             boxShadow: 'none',
             borderRadius: react_components_1.tokens.borderRadiusXLarge,
             flexDirection: 'column',
+            overflow: 'hidden',
         }, children: children }));
 };
 exports.WidgetSection = WidgetSection;

package/Insights/WidgetTableContainer.js

@@ -8,12 +8,37 @@ const utils_1 = require("@headless-adminapp/app/utils");
 const BodyLoading_1 = require("../components/BodyLoading");
 const WidgetSection_1 = require("./WidgetSection");
 const WidgetTitleBar_1 = require("./WidgetTitleBar");
+const useStyles = (0, react_components_1.makeStyles)({
+    table: {
+        borderCollapse: 'collapse',
+        width: '100%',
+        '& tr': {
+            borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+        },
+        '& th': {
+            fontWeight: react_components_1.tokens.fontWeightMedium,
+            minWidth: '32px',
+            flexShrink: 0,
+            flex: 1,
+            position: 'sticky',
+            background: react_components_1.tokens.colorNeutralBackground3,
+            borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+        },
+        '& td': {
+            height: '36px',
+        },
+    },
+    headerAlignRight: {
+        textAlign: 'right',
+        '& > div': {
+            justifyContent: 'flex-end',
+        },
+    },
+});
 const WidgetTableContainer = ({ title, columns, attributes, isPending, isFetching, commands, data, }) => {
     const locale = (0, locale_1.useLocale)();
-    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: title, commands: commands }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative', overflow: 'auto' }, children: [!isPending && ((0, jsx_runtime_1.jsxs)(react_components_1.Table, { style: {
-                            borderCollapse: 'collapse',
-                            width: '100%',
-                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: title, commands: commands }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative', overflow: 'auto' }, children: [!isPending && ((0, jsx_runtime_1.jsxs)(react_components_1.Table, { className: styles.table, children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
                                     position: 'sticky',
                                     top: 0,
                                     background: react_components_1.tokens.colorNeutralBackground3,
@@ -24,14 +49,9 @@ const WidgetTableContainer = ({ title, columns, attributes, isPending, isFetchin
                                         minWidth: 'calc(100% - 16px)',
                                     }, children: columns.map((column, index) => {
                                         const attribute = attributes[column];
-                                        return ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { style: {
-                                                minWidth: 32,
-                                                flexShrink: 0,
-                                                flex: 1,
-                                                position: 'sticky',
-                                                background: react_components_1.tokens.colorNeutralBackground3,
-                                                borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
-                                            }, children: attribute.label }, column + String(index)));
+                                        return ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { align: "right", className: attribute?.type === 'money'
+                                                ? styles.headerAlignRight
+                                                : '', children: attribute.label }, column + String(index)));
                                     }) }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: data.map((row, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { children: columns.map((column) => {
                                         const attribute = attributes[column];
                                         const value = row[column];
@@ -39,7 +59,7 @@ const WidgetTableContainer = ({ title, columns, attributes, isPending, isFetchin
                                             '';
                                         switch (attribute?.type) {
                                             case 'money':
-                                                return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: formattedValue }, column));
+                                                return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: { textAlign: 'right' }, children: formattedValue }, column));
                                             case 'lookup':
                                                 return null;
                                         }

package/form/controls/MultiSelectLookupControl.js

@@ -129,7 +129,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                         left: inputLeft,
                         height: 30,
                     },
-                }, placeholder: placeholder, inputMode: "search", style: { width: '100%', height: '100%' }, autoComplete: "off", readOnly: readOnly || disabled, open: open && !readOnly && !disabled, value: searchText, onOpenChange: (e, data) => {
+                }, placeholder: placeholder, inputMode: "search", style: { width: '100%', height: '100%', minWidth: 'unset' }, autoComplete: "off", readOnly: readOnly || disabled, open: open && !readOnly && !disabled, value: searchText, onOpenChange: (e, data) => {
                     setOpen(data.open);
                 }, onChange: (e) => {
                     setSearchText(e.target.value);

package/package.json

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

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;

package/form/controls/TimeControl.js

@@ -1,87 +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.TimeControl = TimeControl;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const react_timepicker_compat_1 = require("@fluentui/react-timepicker-compat");
-const locale_1 = require("@headless-adminapp/app/locale");
-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");
-dayjs_1.default.extend(customParseFormat_1.default);
-function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled, readOnly, }) {
-    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);
-    internalTimeValueRef.current = internalTimeValue;
-    (0, react_1.useEffect)(() => {
-        const updatedValue = typeof value === 'number'
-            ? (0, dayjs_1.default)().startOf('day').add(value, 'minutes').format(timeFormat)
-            : '';
-        if (internalTimeValueRef.current !== updatedValue) {
-            setInternalTimeValue(updatedValue);
-        }
-    }, [value, timezone, timeFormat]);
-    const isReadonly = readOnly || disabled;
-    const selectedTime = (0, react_1.useMemo)(() => {
-        if (typeof value !== 'number') {
-            return null;
-        }
-        return (0, dayjs_1.default)().startOf('day').add(value, 'minutes').toDate();
-    }, [value]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: react_components_1.tokens.spacingHorizontalS,
-        }, children: (0, jsx_runtime_1.jsx)(react_timepicker_compat_1.TimePicker, { appearance: "filled-darker", style: {
-                flex: 1,
-                minWidth: 0,
-                pointerEvents: isReadonly ? 'none' : 'auto',
-            }, placeholder: placeholder, id: id, name: name, input: {
-                style: { minWidth: 0 },
-            }, readOnly: isReadonly, selectedTime: selectedTime, freeform: true, value: internalTimeValue, onTimeChange: (_, data) => {
-                if (data.selectedTime) {
-                    onChange?.((0, dayjs_1.default)(data.selectedTime).diff((0, dayjs_1.default)().startOf('day'), 'minutes'));
-                }
-                else if (data.selectedTimeText) {
-                    let resolvedTime = resolveTimeValue(data.selectedTimeText, timeFormat);
-                    if (!resolvedTime) {
-                        setInternalTimeValue(value ? (0, dayjs_1.default)(value).format(timeFormat) : '');
-                        return;
-                    }
-                    const newValue = (0, dayjs_1.default)(resolvedTime).diff((0, dayjs_1.default)().startOf('day'), 'minutes');
-                    if (newValue !== value) {
-                        onChange?.(newValue);
-                    }
-                    setInternalTimeValue((0, dayjs_1.default)(resolvedTime).format(timeFormat));
-                }
-                else {
-                    setInternalTimeValue('');
-                    onChange?.(null);
-                }
-            }, onInput: (e) => {
-                setInternalTimeValue(e.currentTarget.value);
-            }, onBlur: () => {
-                onBlur?.();
-            }, expandIcon: (0, jsx_runtime_1.jsx)("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginRight: -4,
-                    color: react_components_1.tokens.colorNeutralForeground2,
-                }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }) }) }));
-}
-function resolveTimeValue(value, timeFormat) {
-    if (!value) {
-        return;
-    }
-    const time = (0, dayjs_1.default)(value, timeFormat);
-    if (!time.isValid()) {
-        return;
-    }
-    return time.toDate();
-}