@headless-adminapp/fluent 1.2.4 → 1.3.1

package/DataGrid/useTableColumns.js

@@ -258,7 +258,6 @@ function renderCellHeaderContent({ column, props, disableColumnResize, disableCo
     return ((0, jsx_runtime_1.jsx)(GridColumnHeader_1.TableHeaderFilterCell, { columnName: column.name, sortDirection: props.column.getIsSorted() || undefined, minWidth: props.header.getSize(), column: column, resizable: !disableColumnResize, disableFilter: disableColumnFilter, disableSort: disableColumnSort, onChangeSortDirection: onChangeSortDirection, attribute: attribute, onResetSize: props.column.resetSize, resizeHandler: props.header.getResizeHandler(), children: column.label }, column.id));
 }
 function renderCellContent({ info, column, schema, schemaStore, locale, routeResolver, openRecord, recordSetSetter, router, }) {
-    const { currency, dateFormats, timezone, timeFormats } = locale;
     let attribute;
     let value;
     if (column.expandedKey) {
@@ -273,16 +272,7 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         attribute = schema.attributes[column.name];
         value = info.getValue();
     }
-    const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
-        currency: currency.currency,
-        dateFormat: dateFormats.short,
-        timeFormat: timeFormats.short,
-        timezone,
-        currencyDisplay: currency.currencyDisplay,
-        currencySign: currency.currencySign,
-        locale: locale.locale,
-        region: locale.region,
-    }) ?? '';
+    const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) ?? '';
     if (column.plainText) {
         return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
     }

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

@@ -3,15 +3,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WidgetTableContainer = void 0;
 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 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, }) => {
-    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 locale = (0, locale_1.useLocale)();
+    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,
@@ -22,21 +49,17 @@ 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];
-                                        const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value) ?? '';
+                                        const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) ??
+                                            '';
                                         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/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -26,6 +26,7 @@ let previousCachedActiveTabInfo = null;
 const PageEntityFormDesktopContainer = () => {
     const dataState = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.dataState);
     const strings = (0, PageEntityFormStringContext_1.usePageEntityFormStrings)();
+    const locale = (0, locale_1.useLocale)();
     const recordId = (0, hooks_1.useRecordId)();
     const record = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.record);
     const activeTab = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.activeTab);
@@ -120,7 +121,7 @@ const PageEntityFormDesktopContainer = () => {
                                                             width: react_components_1.tokens.spacingHorizontalXXL,
                                                             opacity: 0.5,
                                                         } })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: attribute.label }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: formInstance.control, name: controlName, render: ({ field }) => {
-                                                                    return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_2.getAttributeFormattedValue)(attribute, field.value) }));
+                                                                    return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_2.getAttributeFormattedValue)(attribute, field.value, locale) }));
                                                                 } })] })] }, controlName));
                                         }) })] }), !!processFlowSteps?.length && ((0, jsx_runtime_1.jsx)(ProcessFlow_1.ProcessFlow, { height: 28, rounded: false, items: processFlowSteps })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => {
                                             setActiveTab(value.value);

package/PageEntityForm/RecordCard.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RecordCard = RecordCard;
 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 utils_1 = require("@headless-adminapp/app/utils");
 const ChoiceBadge_1 = require("../components/ChoiceBadge");
 const useStyles = (0, react_components_1.makeStyles)({
@@ -36,6 +37,7 @@ function createIntial(name) {
 }
 function RecordCard({ schema, cardView, record, selected, }) {
     const styles = useStyles();
+    const locale = (0, locale_1.useLocale)();
     const _record = record;
     const recordTitle = _record[schema.primaryAttribute];
     const initials = createIntial(recordTitle);
@@ -60,7 +62,7 @@ function RecordCard({ schema, cardView, record, selected, }) {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
-                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: (0, utils_1.getAttributeFormattedValue)(schema.attributes[cardView.primaryColumn], _record[cardView.primaryColumn]) }), cardView.secondaryColumns?.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema }, column.name)))] }), !!cardView.rightColumn?.length && ((0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: (0, utils_1.getAttributeFormattedValue)(schema.attributes[cardView.primaryColumn], _record[cardView.primaryColumn], locale) }), cardView.secondaryColumns?.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema, locale: locale }, column.name)))] }), !!cardView.rightColumn?.length && ((0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'flex-end',
@@ -76,12 +78,12 @@ function RecordCard({ schema, cardView, record, selected, }) {
                         }
                     }
                     if (column.variant === 'strong') {
-                        return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name));
+                        return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(value, attribute, locale) }, column.name));
                     }
-                    return ((0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name));
+                    return ((0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(value, attribute, locale) }, column.name));
                 }) }))] }));
 }
-function SecondaryColumnContent({ record: _record, column, schema, }) {
+function SecondaryColumnContent({ record: _record, column, schema, locale, }) {
     const value = _record[column.name];
     if (!value) {
         return null;
@@ -110,7 +112,7 @@ function SecondaryColumnContent({ record: _record, column, schema, }) {
                 }, children: choices.map((choice) => ((0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: choice.value }, choice.value))) }, column.name));
         }
     }
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, (0, utils_1.getAttributeFormattedValue)(attribute, value)] }, column.name));
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, (0, utils_1.getAttributeFormattedValue)(attribute, value, locale)] }, column.name));
 }
 const ChoiceTag = ({ attribute, value, }) => {
     return (0, jsx_runtime_1.jsx)(ChoiceBadge_1.ChoiceBadge, { attribute: attribute, value: value, size: "small" });

package/form/controls/DateControl.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateControl = DateControl;
 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 react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
 const locale_1 = require("@headless-adminapp/app/locale");
@@ -16,13 +17,13 @@ const AppStringContext_1 = require("../../App/AppStringContext");
 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, }) {
-    const { dateFormats, timezone } = (0, locale_1.useLocale)();
+    const { dateFormats } = (0, locale_1.useLocale)();
     const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
-    return ((0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus?.(), onBlur: () => onBlur?.(), placeholder: placeholder, appearance: "filled-darker", disabled: disabled, readOnly: readOnly, formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormats.short) : '', value: value ? new Date(value) : null, onSelectDate: (date) => {
-            onChange?.(date
-                ? (0, dayjs_1.default)(date).tz(timezone, true).startOf('day').toISOString()
-                : null);
-        }, strings: datePickerStrings, contentAfter: (0, jsx_runtime_1.jsx)("div", { style: {
+    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: {
+            width: '100%',
+        }, contentAfter: (0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',

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

@@ -0,0 +1,13 @@
+import dayjs from 'dayjs';
+import { FC } from 'react';
+interface CalendarItemProps {
+    date1: dayjs.Dayjs | null;
+    date2: dayjs.Dayjs | null;
+    navigatedDate: dayjs.Dayjs;
+    maxDate?: Date;
+    minDate?: Date;
+    onNavigateDate?: (date: Date) => void;
+    onSelectDate?: (date: Date) => void;
+}
+export declare const CalendarItem: FC<CalendarItemProps>;
+export {};

package/form/controls/DateRangeControl/CalendarItem.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarItem = void 0;
+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 dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = require("react");
+const AppStringContext_1 = require("../../../App/AppStringContext");
+const utils_1 = require("./utils");
+const useStyles = (0, react_components_1.makeStyles)({
+    selected: {
+        color: `${react_components_1.tokens.colorNeutralForeground1Static} !important`,
+    },
+});
+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 styles = useStyles();
+    const customDayCellRef = (0, react_1.useCallback)((element, date, classNames) => {
+        if (!element) {
+            return;
+        }
+        if (!classNames.daySelected) {
+            return;
+        }
+        (0, utils_1.applyRoundedStyles)({
+            element,
+            navigatedDate: navigatedDateRef.current,
+            date: (0, dayjs_1.default)(date),
+            selectedDate1: date1Ref.current,
+            selectedDate2: date2Ref.current,
+            daySelectedClassNames: classNames.daySelected + ' ' + styles.selected,
+        });
+    }, [styles.selected]);
+    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.toDate(),
+        }, calendarMonthProps: {
+            navigatedDate: navigatedDate.toDate(),
+            onNavigateDate: onNavigateDate,
+        }, maxDate: maxDate, minDate: minDate, onSelectDate: onSelectDate }));
+};
+exports.CalendarItem = CalendarItem;

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

@@ -0,0 +1,6 @@
+import { ControlProps } from '../types';
+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;

package/form/controls/DateRangeControl/DateRangeControl.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeControl = DateRangeControl;
+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 PopoverContent_1 = require("./PopoverContent");
+const utils_1 = require("./utils");
+const useStyles = (0, react_components_1.makeStyles)({
+    input: {
+        '& > input': {
+            cursor: 'pointer',
+        },
+    },
+});
+function DateRangeControl({ value, onChange, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }) {
+    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]);
+    return ((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, className: styles.input, value: formattedValue, onChange: () => { }, style: {
+                        width: '100%',
+                    } }) }), (0, jsx_runtime_1.jsx)(react_components_1.PopoverSurface, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(PopoverContent_1.PopoverContent, { value: value, minDate: minDate, maxDate: maxDate, onChange: (value) => {
+                        setOpen(false);
+                        onChange?.(value);
+                        onBlur?.();
+                    } }) })] }));
+}

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+interface PopoverContentProps {
+    value: [string, string] | null;
+    minDate?: Date;
+    maxDate?: Date;
+    onChange?: (value: [string, string] | null) => void;
+    required?: boolean;
+    showApplyButton?: boolean;
+}
+export declare const PopoverContent: FC<PopoverContentProps>;
+export {};

package/form/controls/DateRangeControl/PopoverContent.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = require("react");
+const CalendarItem_1 = require("./CalendarItem");
+const utils_1 = require("./utils");
+const PopoverContent = ({ value, minDate, maxDate, onChange, required, showApplyButton, }) => {
+    const [internalValue, setInternalValue] = (0, react_1.useState)([value ? (0, dayjs_1.default)(value[0]) : null, value ? (0, dayjs_1.default)(value[1]) : null]);
+    const [navigationDate1, setNavigationDate1] = (0, react_1.useState)(value ? (0, dayjs_1.default)(value[0]) : (0, dayjs_1.default)());
+    const [navigationDate2, setNavigationDate2] = (0, react_1.useState)(value
+        ? (0, utils_1.selectMaxDate)((0, dayjs_1.default)(internalValue[0]).add(1, 'month'), internalValue[1])
+        : (0, dayjs_1.default)().add(1, 'month'));
+    const [date1, date2] = internalValue;
+    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 handleCalendarChange = (date, isLeftCalendar) => {
+        if ((date1 && date2) || (!date1 && !date2)) {
+            if (isLeftCalendar) {
+                setInternalValue([(0, dayjs_1.default)(date), null]);
+                setNavigationDate2((0, dayjs_1.default)(date).add(1, 'month'));
+            }
+            else {
+                setInternalValue([null, (0, dayjs_1.default)(date)]);
+                setNavigationDate1((0, dayjs_1.default)(date).subtract(1, 'month'));
+            }
+        }
+        else {
+            const v = [date1, date2].filter(Boolean);
+            v.push((0, dayjs_1.default)(date));
+            v.sort((a, b) => a.valueOf() - b.valueOf());
+            setInternalValue(v.map((d) => d));
+            if (!showApplyButton) {
+                onChange?.([v[0].format('YYYY-MM-DD'), v[1].format('YYYY-MM-DD')]);
+            }
+        }
+    };
+    const actions = [];
+    if (!required) {
+        actions.push((0, jsx_runtime_1.jsx)(react_components_1.Button, { size: "small", appearance: "secondary", onClick: () => {
+                onChange?.(null);
+                setInternalValue([null, null]);
+            }, children: "Clear" }, "clear"));
+    }
+    if (showApplyButton) {
+        actions.push((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" }, "apply"));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex' }, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(CalendarItem_1.CalendarItem, { date1: date1, date2: date2, navigatedDate: navigationDate1, maxDate: leftMaxDate ?? maxDate, minDate: minDate, onSelectDate: (date) => {
+                                handleCalendarChange(date, true);
+                            }, onNavigateDate: (date) => {
+                                setNavigationDate1((0, dayjs_1.default)(date));
+                            } }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)(CalendarItem_1.CalendarItem, { date1: date1, date2: date2, navigatedDate: navigationDate2, minDate: rightMinDate ?? minDate, maxDate: maxDate, onSelectDate: (date) => {
+                                handleCalendarChange(date, false);
+                            }, onNavigateDate: (date) => {
+                                setNavigationDate2((0, dayjs_1.default)(date));
+                            } })] }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        gap: react_components_1.tokens.spacingHorizontalS,
+                        padding: react_components_1.tokens.spacingVerticalS,
+                        justifyContent: 'flex-end',
+                    }, children: actions })] }) }));
+};
+exports.PopoverContent = PopoverContent;

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

@@ -0,0 +1 @@
+export { DateRangeControl, type DateRangeControlProps, } from './DateRangeControl';

package/form/controls/DateRangeControl/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeControl = void 0;
+var DateRangeControl_1 = require("./DateRangeControl");
+Object.defineProperty(exports, "DateRangeControl", { enumerable: true, get: function () { return DateRangeControl_1.DateRangeControl; } });

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

@@ -0,0 +1,13 @@
+import { DateRangeFormat } from '@headless-adminapp/core/experience/locale/types';
+import dayjs from 'dayjs';
+export declare function formatDateRange(value: [string, string] | null, dateRangeFormat: DateRangeFormat): string;
+export declare function applyRoundedStyles({ element, date, navigatedDate, selectedDate1, selectedDate2, daySelectedClassNames, }: {
+    element: HTMLElement;
+    date: dayjs.Dayjs;
+    navigatedDate: dayjs.Dayjs;
+    selectedDate1: dayjs.Dayjs | null;
+    selectedDate2: dayjs.Dayjs | null;
+    daySelectedClassNames: string;
+}): void;
+export declare function selectMaxDate(date1: dayjs.Dayjs, date2: dayjs.Dayjs | null): dayjs.Dayjs;
+export declare function selectMinDate(date1: dayjs.Dayjs, date2: dayjs.Dayjs | null): dayjs.Dayjs;

package/form/controls/DateRangeControl/utils.js

@@ -0,0 +1,129 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDateRange = formatDateRange;
+exports.applyRoundedStyles = applyRoundedStyles;
+exports.selectMaxDate = selectMaxDate;
+exports.selectMinDate = selectMinDate;
+const dayjs_1 = __importDefault(require("dayjs"));
+function formatDateRange(value, dateRangeFormat) {
+    if (!value || value.length !== 2) {
+        return '';
+    }
+    const [start, end] = value.map((date) => (0, dayjs_1.default)(date));
+    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));
+    }
+}
+const 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, daySelectedClassNames, }) {
+    const _date = date;
+    const _navigatedDate = navigatedDate;
+    const _selectedDate1 = selectedDate1;
+    const _selectedDate2 = selectedDate2;
+    const isSameMonth = checkIsSameMonth(_navigatedDate, _date);
+    const isSelected = isSameMonth &&
+        selectedDate1 &&
+        selectedDate2 &&
+        date >= selectedDate1 &&
+        date <= selectedDate2;
+    if (!isSelected) {
+        element.classList.remove(...daySelectedClassNames.split(' '));
+        element.classList.add(cornersClassNames.topLeftCornerDate);
+        element.classList.add(cornersClassNames.topRightCornerDate);
+        element.classList.add(cornersClassNames.bottomLeftCornerDate);
+        element.classList.add(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 = daySelectedClassNames.split(' ');
+    const classToRemove = [];
+    if (hasTopLeftRadius) {
+        classToAdd.push(cornersClassNames.topLeftCornerDate);
+    }
+    else {
+        classToRemove.push(cornersClassNames.topLeftCornerDate);
+    }
+    if (hasTopRightRadius) {
+        classToAdd.push(cornersClassNames.topRightCornerDate);
+    }
+    else {
+        classToRemove.push(cornersClassNames.topRightCornerDate);
+    }
+    if (hasBottomLeftRadius) {
+        classToAdd.push(cornersClassNames.bottomLeftCornerDate);
+    }
+    else {
+        classToRemove.push(cornersClassNames.bottomLeftCornerDate);
+    }
+    if (hasBottomRightRadius) {
+        classToAdd.push(cornersClassNames.bottomRightCornerDate);
+    }
+    else {
+        classToRemove.push(cornersClassNames.bottomRightCornerDate);
+    }
+    element.classList.add(...classToAdd);
+    element.classList.remove(...classToRemove);
+}
+function selectMaxDate(date1, date2) {
+    if (!date2) {
+        return date1;
+    }
+    return date1.isAfter(date2) ? date1 : date2;
+}
+function selectMinDate(date1, date2) {
+    if (!date2) {
+        return date1;
+    }
+    return date1.isBefore(date2) ? date1 : date2;
+}

package/form/controls/DateRangeControl.d.ts

@@ -1,6 +1,12 @@
 import { ControlProps } from './types';
-export interface DateRangeControlProps extends ControlProps<[string | null, string | null]> {
+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

@@ -3,45 +3,291 @@ 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_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
+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 DateRangeControl({ value, onChange, id, name, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }) {
-    const [from, setFrom] = (0, react_1.useState)(value ? value[0] : null);
-    const [to, setTo] = (0, react_1.useState)(value ? value[1] : null);
-    const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
-    const { dateFormats } = (0, locale_1.useLocale)();
-    (0, react_1.useEffect)(() => {
-        if (value) {
-            setFrom(value[0]);
-            setTo(value[1]);
+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]));
         }
-    }, [value]);
+    }
+    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)
-        : from
-            ? new Date(from)
+        : date1
+            ? new Date(date1)
+            : undefined;
+    const _maxDate = maxDate
+        ? new Date(maxDate)
+        : date2
+            ? new Date(date2)
             : undefined;
-    const _maxDate = maxDate ? new Date(maxDate) : to ? new Date(to) : undefined;
-    const handleChangeFrom = (date) => {
-        setFrom(date ? date.toISOString() : null);
-        // if (date && to) {
-        onChange?.([date?.toISOString() ?? null, to]);
+    // 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;
         // }
-    };
-    const handleChangeTo = (date) => {
-        setTo(date ? date.toISOString() : null);
-        // if (date && from) {
-        onChange?.([from, date?.toISOString() ?? 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);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 8 }, children: [(0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus?.(), onBlur: () => onBlur?.(), placeholder: "From", appearance: "filled-darker", disabled: disabled, readOnly: readOnly, formatDate: (date) => date ? (0, dayjs_1.default)(date).format(dateFormats.short) : '', value: from ? new Date(from) : null, onSelectDate: (date) => handleChangeFrom(date), strings: datePickerStrings, minDate: minDate, maxDate: _maxDate, style: { flex: 1 }, input: {
-                    style: { width: '100%' },
-                } }), (0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus?.(), onBlur: () => onBlur?.(), placeholder: "To", appearance: "filled-darker", disabled: disabled, readOnly: readOnly, formatDate: (date) => (date ? (0, dayjs_1.default)(date).format('YYYY-MM-DD') : ''), value: to ? new Date(to) : null, onSelectDate: (date) => handleChangeTo(date), strings: datePickerStrings, minDate: _minDate, maxDate: maxDate, style: { flex: 1 }, input: {
-                    style: { width: '100%' },
-                } })] }));
+    // 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/DateTimeControl.js

@@ -15,6 +15,7 @@ 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 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);
@@ -45,7 +46,7 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                     if (!isOpen) {
                         onBlur?.();
                     }
-                }, onFocus: () => onFocus?.(), onBlur: () => onBlur?.(), placeholder: placeholder, appearance: "filled-darker", formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormat) : '', readOnly: isReadonly, value: value ? new Date(value) : null, onSelectDate: (date) => {
+                }, onFocus: () => onFocus?.(), onBlur: () => onBlur?.(), placeholder: placeholder, appearance: "filled-darker", showMonthPickerAsOverlay: true, formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormat) : '', readOnly: isReadonly, value: value ? new Date(value) : null, onSelectDate: (date) => {
                     if (!date) {
                         onChange?.(null);
                     }
@@ -99,7 +100,7 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                             .toISOString());
                     }
                     else if (data.selectedTimeText) {
-                        let resolvedTime = resolveTimeValue(data.selectedTimeText, timeFormat);
+                        let resolvedTime = (0, utils_1.resolveTimeValue)(data.selectedTimeText, timeFormat);
                         if (!resolvedTime) {
                             setInternalTimeValue(value ? (0, dayjs_1.default)(value).format(timeFormat) : '');
                             return;
@@ -125,13 +126,3 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                         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();
-}

package/form/controls/EmailControl.js

@@ -18,5 +18,6 @@ function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
         readOnly: disabled || readOnly, autoComplete: autoComplete, style: {
             flex: 1,
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
+            width: '100%',
         }, contentAfter: !!value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => window.open(`mailto:${value}`, '_blank'), color: "primary", appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Mail, {}), size: "small" })) : undefined }));
 }

package/form/controls/IntegerControl.js

@@ -5,7 +5,9 @@ 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, }) {
-    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, onChange: (e, data) => {
+    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) => {
             if (data.value !== undefined) {
                 onChange?.(data.value);
             }

package/form/controls/MultiSelectControl.js

@@ -13,5 +13,7 @@ function MultiSelectControl({ value, onChange, options, id, name, disabled, onBl
     const selectedOptions = (0, react_1.useMemo)(() => options.filter((x) => value?.includes(x.value)), [options, value]);
     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, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
+        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), disabled: disabled, style: {
+            width: '100%',
+        }, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
 }

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/form/controls/SelectControl.js

@@ -22,5 +22,5 @@ function SelectControl({ value, onChange, options, id, name, disabled, onBlur, o
         // onChange={(e, v) => handleChange(v as string)}
         selectedOptions: value ? [String(value)] : [], onOptionSelect: (event, data) => {
             handleChange(data.optionValue);
-        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), style: { pointerEvents: disabled ? 'none' : undefined }, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
+        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), style: { pointerEvents: disabled ? 'none' : undefined, width: '100%' }, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
 }

package/form/controls/TextAreaControl.js

@@ -37,5 +37,7 @@ function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFoc
     };
     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 }));
+        readOnly: disabled || readOnly, rows: rows, style: {
+            width: '100%',
+        } }));
 }

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

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

package/form/controls/TimeControl/TimeControl.js

@@ -0,0 +1,78 @@
+"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");
+const utils_1 = require("./utils");
+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 = (0, utils_1.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 }) }) }) }));
+}

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

@@ -0,0 +1 @@
+export { TimeControl, TimeControlProps } from './TimeControl';

package/form/controls/TimeControl/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeControl = void 0;
+var TimeControl_1 = require("./TimeControl");
+Object.defineProperty(exports, "TimeControl", { enumerable: true, get: function () { return TimeControl_1.TimeControl; } });

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

@@ -0,0 +1 @@
+export declare function resolveTimeValue(value: string, timeFormat: string): Date | undefined;

package/form/controls/TimeControl/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveTimeValue = resolveTimeValue;
+const dayjs_1 = __importDefault(require("dayjs"));
+const STANDARD_TIME_REGEX = /^(\d{1,2}):?(\d{2})?([ap]m)?$/i;
+function resolveTimeValue(value, timeFormat) {
+    if (!value) {
+        return;
+    }
+    // Check if the value matches the standard time format (H, HH, H:MM, HH:MM, H:MM AM/PM, HH:MM AM/PM)
+    const standardTimeMatch = STANDARD_TIME_REGEX.exec(value);
+    if (standardTimeMatch) {
+        const hour = Number(standardTimeMatch[1]);
+        const minute = standardTimeMatch[2] ? Number(standardTimeMatch[2]) : 0;
+        const isPM = standardTimeMatch[3]
+            ? standardTimeMatch[3].toLowerCase().startsWith('p')
+            : false;
+        if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
+            return;
+        }
+        let adjustedHour = hour;
+        if (isPM && hour < 12) {
+            adjustedHour += 12; // Convert PM hour to 24-hour format
+        }
+        if (!isPM && standardTimeMatch[3] && hour === 12) {
+            adjustedHour = 0; // Convert 12 AM to 0 hours
+        }
+        return (0, dayjs_1.default)()
+            .set('hour', adjustedHour)
+            .set('minute', minute)
+            .set('second', 0)
+            .toDate();
+    }
+    const time = (0, dayjs_1.default)(value, timeFormat);
+    if (!time.isValid()) {
+        return;
+    }
+    return time.toDate();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.2.4",
+  "version": "1.3.1",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -52,5 +52,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "776239a44a2e6d53c3f92665f516feff4e8a83b6"
+  "gitHead": "019339a44fae0fcce5466041f922710b08b79172"
 }