@headless-adminapp/fluent 1.4.29 → 1.4.31

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -59,6 +59,9 @@ const TableHeaderFilterCell = ({ children, sortDirection, onChangeSortDirection,
     const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
     const attribute = (0, react_1.useMemo)(() => {
         const _attribute = schema.attributes[column.name];
+        if (!_attribute) {
+            throw new Error(`Attribute not found: ${column.name} in ${schema.logicalName}`);
+        }
         if (!column.expandedKey) {
             return _attribute;
         }
@@ -101,7 +104,7 @@ const TableHeaderFilterCell = ({ children, sortDirection, onChangeSortDirection,
     if (!disableFilter) {
         menuItems.push(filterMenuItems);
     }
-    const headerCell = ((0, jsx_runtime_1.jsxs)(react_components_1.TableHeaderCell, { as: "div", className: (0, react_components_1.mergeClasses)(styles.root, align === 'right' && styles.right), style: {
+    const headerCell = ((0, jsx_runtime_1.jsxs)(react_components_1.TableHeaderCell, { as: "th", className: (0, react_components_1.mergeClasses)(styles.root, align === 'right' && styles.right), style: {
             textAlign: align,
             width: minWidth,
             minWidth: minWidth,

package/DataGrid/useTableColumns.js

@@ -66,17 +66,19 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
             columns: columns.map((column) => {
                 const attribute = schema.attributes[column.name];
                 let defaultMaxWidth = 1000;
-                if (attribute.type === 'date') {
-                    if (attribute.format === 'datetime') {
-                        defaultMaxWidth = 200;
+                if (attribute) {
+                    if (attribute.type === 'date') {
+                        if (attribute.format === 'datetime') {
+                            defaultMaxWidth = 200;
+                        }
+                        else {
+                            defaultMaxWidth = 100;
+                        }
                     }
-                    else {
-                        defaultMaxWidth = 100;
+                    else if (attribute.type === 'money') {
+                        defaultMaxWidth = 150;
                     }
                 }
-                else if (attribute.type === 'money') {
-                    defaultMaxWidth = 150;
-                }
                 return {
                     width: column.width ?? 100,
                     maxWidth: column.maxWidth ?? defaultMaxWidth,

package/Insights/Header.js

@@ -48,7 +48,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", { 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 }) }));
+                                    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, required: attribute.required }) }));
                                 } }, attributeName));
                         }) })] }))] }));
 };

package/Insights/WidgetDataGridContainer.d.ts

@@ -11,6 +11,5 @@ interface WidgetDataGridContainerProps {
     viewId?: string;
     allowContextMenu?: boolean;
 }
-/*** @deprecated Need refactoring */
 export declare function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, title, view, viewId, allowContextMenu, }: Readonly<WidgetDataGridContainerProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/Insights/WidgetDataGridContainer.js

@@ -6,6 +6,7 @@ const command_1 = require("@headless-adminapp/app/command");
 const hooks_1 = require("@headless-adminapp/app/command/hooks");
 const DataGridProvider_1 = require("@headless-adminapp/app/datagrid/DataGridProvider");
 const hooks_2 = require("@headless-adminapp/app/datagrid/hooks");
+const historystate_1 = require("@headless-adminapp/app/historystate");
 const hooks_3 = require("@headless-adminapp/app/hooks");
 const hooks_4 = require("@headless-adminapp/app/metadata/hooks");
 const BodyLoading_1 = require("../components/BodyLoading");
@@ -13,7 +14,6 @@ const DataGrid_1 = require("../DataGrid");
 const GridListContainer_1 = require("../DataGrid/GridListContainer");
 const WidgetSection_1 = require("./WidgetSection");
 const WidgetTitleBar_1 = require("./WidgetTitleBar");
-/*** @deprecated Need refactoring */
 function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, title, view, viewId, allowContextMenu, }) {
     const schema = (0, hooks_4.useSchema)(logicalName);
     const { view: _view, isLoadingView } = (0, hooks_4.useExperienceView)(logicalName, viewId);
@@ -28,7 +28,7 @@ function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, ti
     if (!schema) {
         return ((0, jsx_runtime_1.jsx)(WidgetSection_1.WidgetSection, { children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, position: 'relative' }, children: "Schema not found" }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: [], onChangeView: () => { }, commands: contextCommands, allowViewSelection: false, maxRecords: maxRecords, extraFilter: filter, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer, { title: title, commands: commands, allowContextMenu: allowContextMenu }) }));
+    return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: "~", children: (0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: [], onChangeView: () => { }, commands: contextCommands, allowViewSelection: false, maxRecords: maxRecords, extraFilter: filter, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer, { title: title, commands: commands, allowContextMenu: allowContextMenu }) }) }));
 }
 const FormSubgridContainer = ({ title, commands, allowContextMenu, }) => {
     const isMobile = (0, hooks_3.useIsMobile)();

package/PageBoard/HeaderQuickFilter.js

@@ -15,7 +15,7 @@ const HeaderQuickFilter = () => {
             display: 'flex',
             gap: react_components_1.tokens.spacingHorizontalS,
         }, children: Object.entries(quickFilter.attributes).map(([key, attribute]) => {
-            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelHidden: true, labelPosition: "top", children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: key, value: values[key] ?? null, onChange: (value) => setValue(key, value) }) }) }, key));
+            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelHidden: true, labelPosition: "top", children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: key, value: values[key] ?? null, onChange: (value) => setValue(key, value), required: attribute.required }) }) }, key));
         }) }));
 };
 exports.HeaderQuickFilter = HeaderQuickFilter;

package/PageCalendar/Header.js

@@ -38,7 +38,7 @@ function Header({ filterForm, onCreateButtonClick, }) {
                                 } })] })] }), !!config.filterAttributes &&
                 Object.keys(config.filterAttributes).length > 0 && ((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", { 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 }) }));
+                                    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, required: attribute.required }) }));
                                 } }, attributeName));
                         }) })] }))] }));
 }

package/PageEntityForm/EditableGridControl/CardUi.js

@@ -66,7 +66,7 @@ const CardUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, ali
                                                     const previousValue = field.value;
                                                     field.onChange(value);
                                                     eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, field.name, value, previousValue);
-                                                }, onBlur: field.onBlur, placeholder: "" }) }));
+                                                }, onBlur: field.onBlur, placeholder: "", allowNewRecord: true, allowNavigation: true, allowQuickCreate: true }) }));
                                     } }) }, attributeName));
                         }) }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), !readOnly && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "primary", onClick: () => onRemoveRow?.(index), style: {
                             alignSelf: 'flex-start',

package/PageEntityForm/EditableGridControl/TableUi.js

@@ -70,7 +70,7 @@ const TableUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, al
                                                     const previousValue = field.value;
                                                     field.onChange(value);
                                                     eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, field.name, value, previousValue);
-                                                }, onBlur: field.onBlur, placeholder: "" }) }));
+                                                }, onBlur: field.onBlur, placeholder: "", allowNewRecord: true, allowNavigation: true, allowQuickCreate: true }) }));
                                     } }) }, attributeName));
                         }), !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "subtle", onClick: () => onRemoveRow?.(index) }) }))] }, item.__key))) })] }));
 };

package/PageEntityForm/StandardControl.js

@@ -166,6 +166,7 @@ const StandardControl = (props) => {
                 disabled: isDisabled,
                 readOnly,
                 skeleton,
+                required,
             };
             const Control = componentStore_1.componentStore.getComponent('Form.DateRangeControl') ?? DateRangeControl_1.DateRangeControl;
             return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });

package/PageInsight/PageInsight.js

@@ -2,16 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageInsight = PageInsight;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const historystate_1 = require("@headless-adminapp/app/historystate");
 const insights_1 = require("@headless-adminapp/app/insights");
 const mutable_1 = require("@headless-adminapp/app/mutable");
+const route_1 = require("@headless-adminapp/app/route");
 const store_1 = require("@headless-adminapp/app/store");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const InsightsContainer_1 = require("../Insights/InsightsContainer");
+const historyKey = 'page-insight';
+function mergeInitialStateWithHistory(initialValue, historyState) {
+    return {
+        ...initialValue,
+        ...historyState,
+    };
+}
 function PageInsight({ config, }) {
+    const router = (0, route_1.useRouter)();
     const filterForm = (0, react_hook_form_1.useForm)({
         mode: 'all',
-        defaultValues: config.defaultFilter,
+        defaultValues: mergeInitialStateWithHistory(config.defaultFilter, router.getState(historyKey)
+            ?.filter),
         shouldUnregister: false,
     });
     const filterValues = filterForm.watch();
@@ -27,5 +38,10 @@ function PageInsight({ config, }) {
             filterValues,
         });
     }, [config, filterValues, insightsValues]);
-    return ((0, jsx_runtime_1.jsx)(insights_1.InsightsContext.Provider, { value: insightsValues, children: (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...filterForm, children: (0, jsx_runtime_1.jsx)(InsightsContainer_1.InsightsContainer, {}) }) }));
+    (0, react_1.useEffect)(() => {
+        router.setState(historyKey, {
+            filter: filterValues,
+        });
+    }, [filterValues, router]);
+    return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: historyKey, children: (0, jsx_runtime_1.jsx)(insights_1.InsightsContext.Provider, { value: insightsValues, children: (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...filterForm, children: (0, jsx_runtime_1.jsx)(InsightsContainer_1.InsightsContainer, {}) }) }) }));
 }

package/components/fluent/Dropdown.js

@@ -5,10 +5,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
 const tokens_1 = require("./tokens");
+const useSizeStyles = (0, react_components_1.makeStyles)({
+    small: {
+        minHeight: tokens_1.extendedTokens.controlMinHeightS,
+    },
+    medium: {
+        minHeight: tokens_1.extendedTokens.controlMinHeightM,
+    },
+    large: {
+        minHeight: tokens_1.extendedTokens.controlMinHeightL,
+    },
+});
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
         borderRadius: tokens_1.extendedTokens.controlBorderRadius,
-        minHeight: tokens_1.extendedTokens.controlMinHeightM,
         '&::after': {
             borderBottomLeftRadius: tokens_1.extendedTokens.controlBorderRadius,
             borderBottomRightRadius: tokens_1.extendedTokens.controlBorderRadius,
@@ -34,7 +44,8 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.Dropdown = (0, react_1.forwardRef)(function Dropdown({ className, ...rest }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, (rest.appearance === 'outline' || !rest.appearance) &&
+    const sizeStyles = useSizeStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { ...rest, className: (0, react_components_1.mergeClasses)(styles.root, sizeStyles[rest.size || 'medium'], (rest.appearance === 'outline' || !rest.appearance) &&
             styles.outlined, className), ref: ref, listbox: {
             className: styles.listbox,
         } }));

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

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

package/form/controls/DateRangeControl/DateRangeControl.js

@@ -16,7 +16,7 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-function DateRangeControl({ value, onChange, onBlur, onFocus, disabled, maxDate, minDate, readOnly, skeleton, }) {
+function DateRangeControl({ value, onChange, onBlur, onFocus, disabled, maxDate, minDate, readOnly, skeleton, required, }) {
     const [open, setOpen] = (0, react_1.useState)(false);
     const styles = useStyles();
     const { dateRangeFormats } = (0, locale_1.useLocale)();
@@ -34,7 +34,7 @@ function DateRangeControl({ value, onChange, onBlur, onFocus, disabled, maxDate,
             setOpen(data.open);
         }, positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(fluent_1.Input, { appearance: "filled-darker", readOnly: true, className: styles.input, value: formattedValue, onChange: () => { }, style: {
                         width: '100%',
-                    } }) }), (0, jsx_runtime_1.jsx)(fluent_1.PopoverSurface, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(PopoverContent_1.PopoverContent, { value: value, minDate: minDate, maxDate: maxDate, onChange: (value) => {
+                    } }) }), (0, jsx_runtime_1.jsx)(fluent_1.PopoverSurface, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(PopoverContent_1.PopoverContent, { value: value, minDate: minDate, maxDate: maxDate, required: required, onChange: (value) => {
                         setOpen(false);
                         onChange?.(value);
                         onBlur?.();

package/form/controls/DateRangeControl/PopoverContent.js

@@ -7,10 +7,118 @@ 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 isoWeek_1 = __importDefault(require("dayjs/plugin/isoWeek"));
 const react_1 = require("react");
+const AppStringContext_1 = require("../../../App/AppStringContext");
 const fluent_1 = require("../../../components/fluent");
+const GroupedSelectControl_1 = __importDefault(require("../GroupedSelectControl"));
 const CalendarItem_1 = require("./CalendarItem");
 const utils_1 = require("./utils");
+dayjs_1.default.extend(isoWeek_1.default);
+const DATE_FORMAT = 'YYYY-MM-DD';
+function createOption(label, values) {
+    return {
+        label,
+        value: `${values[0]}_${values[1]}`,
+    };
+}
+function getFiscalYear(date) {
+    if (date.month() < 3) {
+        return date.year() - 1;
+    }
+    return date.year();
+}
+function startOfFiscalYear(year) {
+    return (0, dayjs_1.default)(`${year}-04-01`).startOf('day');
+}
+function endOfFiscalYear(year) {
+    return (0, dayjs_1.default)(`${year + 1}-03-31`).endOf('day');
+}
+function relativeStartOfFiscalyear(offset) {
+    const currentFY = getFiscalYear((0, dayjs_1.default)());
+    const targetFY = currentFY + offset;
+    return startOfFiscalYear(targetFY);
+}
+function relativeEndOfFiscalyear(offset) {
+    const currentFY = getFiscalYear((0, dayjs_1.default)());
+    const targetFY = currentFY + offset;
+    return endOfFiscalYear(targetFY);
+}
+function useQuickOptionGroups() {
+    const { operatorStrings } = (0, AppStringContext_1.useAppStrings)();
+    return (0, react_1.useMemo)(() => {
+        const options = [];
+        options.push({
+            label: 'Week',
+            options: [
+                createOption(operatorStrings.thisWeek, [
+                    (0, dayjs_1.default)().startOf('isoWeek').format(DATE_FORMAT),
+                    (0, dayjs_1.default)().endOf('isoWeek').format(DATE_FORMAT),
+                ]),
+                createOption(operatorStrings.nextWeek, [
+                    (0, dayjs_1.default)().add(1, 'week').startOf('isoWeek').format(DATE_FORMAT),
+                    (0, dayjs_1.default)().add(1, 'week').endOf('isoWeek').format(DATE_FORMAT),
+                ]),
+                createOption(operatorStrings.lastWeek, [
+                    (0, dayjs_1.default)().subtract(1, 'week').startOf('isoWeek').format(DATE_FORMAT),
+                    (0, dayjs_1.default)().subtract(1, 'week').endOf('isoWeek').format(DATE_FORMAT),
+                ]),
+            ],
+        });
+        options.push({
+            label: 'Month',
+            options: [
+                createOption(operatorStrings.thisMonth, [
+                    (0, dayjs_1.default)().startOf('month').format(DATE_FORMAT),
+                    (0, dayjs_1.default)().endOf('month').format(DATE_FORMAT),
+                ]),
+                createOption(operatorStrings.nextMonth, [
+                    (0, dayjs_1.default)().add(1, 'month').startOf('month').format(DATE_FORMAT),
+                    (0, dayjs_1.default)().add(1, 'month').endOf('month').format(DATE_FORMAT),
+                ]),
+                createOption(operatorStrings.lastMonth, [
+                    (0, dayjs_1.default)().subtract(1, 'month').startOf('month').format(DATE_FORMAT),
+                    (0, dayjs_1.default)().subtract(1, 'month').endOf('month').format(DATE_FORMAT),
+                ]),
+            ],
+        });
+        options.push({
+            label: 'Year',
+            options: [
+                createOption(operatorStrings.thisYear, [
+                    (0, dayjs_1.default)().startOf('year').format(DATE_FORMAT),
+                    (0, dayjs_1.default)().endOf('year').format(DATE_FORMAT),
+                ]),
+                createOption(operatorStrings.nextYear, [
+                    (0, dayjs_1.default)().add(1, 'year').startOf('year').format(DATE_FORMAT),
+                    (0, dayjs_1.default)().add(1, 'year').endOf('year').format(DATE_FORMAT),
+                ]),
+                createOption(operatorStrings.lastYear, [
+                    (0, dayjs_1.default)().subtract(1, 'year').startOf('year').format(DATE_FORMAT),
+                    (0, dayjs_1.default)().subtract(1, 'year').endOf('year').format(DATE_FORMAT),
+                ]),
+            ],
+        });
+        options.push({
+            label: 'Fiscal Year',
+            options: [
+                createOption(operatorStrings.thisFiscalYear, [
+                    relativeStartOfFiscalyear(0).format(DATE_FORMAT),
+                    relativeEndOfFiscalyear(0).format(DATE_FORMAT),
+                ]),
+                createOption(operatorStrings.nextFiscalYear, [
+                    relativeStartOfFiscalyear(1).format(DATE_FORMAT),
+                    relativeEndOfFiscalyear(1).format(DATE_FORMAT),
+                ]),
+                createOption(operatorStrings.lastFiscalYear, [
+                    relativeStartOfFiscalyear(-1).format(DATE_FORMAT),
+                    relativeEndOfFiscalyear(-1).format(DATE_FORMAT),
+                ]),
+            ],
+        });
+        return options;
+    }, [operatorStrings]);
+}
 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)());
@@ -63,6 +171,7 @@ const PopoverContent = ({ value, minDate, maxDate, onChange, required, showApply
                 ]);
             }, children: "Apply" }, "apply"));
     }
+    const optionGroups = useQuickOptionGroups();
     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) => {
@@ -71,11 +180,35 @@ const PopoverContent = ({ value, minDate, maxDate, onChange, required, showApply
                                 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: {
+                            } })] }), (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: actions })] }) }));
+                        alignItems: 'center',
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 120 }, children: (0, jsx_runtime_1.jsx)(GroupedSelectControl_1.default, { placeholder: "Custom range", value: `${date1?.format(DATE_FORMAT) ?? ''}_${date2?.format(DATE_FORMAT) ?? ''}`, size: "small", onChange: (value) => {
+                                    if (!value) {
+                                        return;
+                                    }
+                                    const parts = value.split('_');
+                                    const date1 = (0, dayjs_1.default)(parts[0]);
+                                    const date2 = (0, dayjs_1.default)(parts[1]);
+                                    setNavigationDate1((0, dayjs_1.default)(parts[0]));
+                                    if (date1.year() === date2.year() &&
+                                        date1.month() === date2.month()) {
+                                        setNavigationDate2((0, dayjs_1.default)(parts[0]).add(1, 'month'));
+                                    }
+                                    else {
+                                        setNavigationDate2(date2);
+                                    }
+                                    setInternalValue([(0, dayjs_1.default)(parts[0]), (0, dayjs_1.default)(parts[1])]);
+                                    if (!showApplyButton) {
+                                        onChange?.(parts);
+                                    }
+                                }, optionGroups: optionGroups }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flex: 1,
+                                gap: react_components_1.tokens.spacingHorizontalS,
+                                justifyContent: 'flex-end',
+                            }, children: actions })] })] }) }));
 };
 exports.PopoverContent = PopoverContent;

package/form/controls/GroupedSelectControl.d.ts

@@ -0,0 +1,15 @@
+import { DropdownProps } from '@fluentui/react-components';
+import { ControlProps } from './types';
+export interface Lookup<T = string> {
+    label: string;
+    value: T;
+}
+export type GroupedSelectControlProps<T> = ControlProps<T> & {
+    optionGroups: Array<{
+        label: string;
+        options: Lookup<T>[];
+    }>;
+    clearable?: boolean;
+    size?: DropdownProps['size'];
+};
+export default function GroupedSelectControl<T extends string | number>({ value, onChange, optionGroups, id, name, disabled, onBlur, onFocus, placeholder, skeleton, clearable, size, }: Readonly<GroupedSelectControlProps<T>>): import("react/jsx-runtime").JSX.Element;

package/form/controls/GroupedSelectControl.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = GroupedSelectControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
+const Option_1 = require("../../components/fluent/Option");
+const SkeletonControl_1 = require("./SkeletonControl");
+function GroupedSelectControl({ value, onChange, optionGroups, id, name, disabled, onBlur, onFocus, placeholder, skeleton, clearable, size, }) {
+    const handleChange = (value) => {
+        const option = optionGroups
+            .flatMap((group) => group.options)
+            .find((x) => String(x.value) === String(value));
+        if (option) {
+            onChange?.(option.value);
+        }
+        else {
+            onChange?.(null);
+        }
+    };
+    const selectedOption = (0, react_1.useMemo)(() => optionGroups
+        .flatMap((group) => group.options)
+        .find((x) => x.value === value), [optionGroups, value]);
+    if (skeleton) {
+        return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
+    }
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Dropdown, { placeholder: placeholder, id: id, name: name, appearance: "filled-darker", size: size, value: selectedOption?.label ?? '', selectedOptions: value ? [String(value)] : [], onOptionSelect: (event, data) => {
+            handleChange(data.optionValue);
+        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), style: {
+            pointerEvents: disabled ? 'none' : undefined,
+            width: '100%',
+            minWidth: 'unset',
+        }, clearable: clearable, clearButton: {
+            style: {
+                marginRight: react_components_1.tokens.spacingHorizontalXS,
+            },
+        }, expandIcon: {
+            style: {
+                marginRight: -6,
+            },
+        }, children: optionGroups.map((group) => ((0, jsx_runtime_1.jsx)(react_components_1.OptionGroup, { label: group.label, children: group.options.map((option) => ((0, jsx_runtime_1.jsx)(Option_1.Option, { value: String(option.value), children: option.label }, option.value))) }, group.label))) }));
+}

package/form/controls/SelectControl.d.ts

@@ -1,10 +1,12 @@
+import { DropdownProps } from '@fluentui/react-components';
 import { ControlProps } from './types';
 export interface Lookup<T = string> {
     label: string;
     value: T;
 }
-export interface SelectControlProps<T> extends ControlProps<T> {
+export type SelectControlProps<T> = ControlProps<T> & {
     options: Lookup<T>[];
     clearable?: boolean;
-}
-export default function SelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, clearable, }: Readonly<SelectControlProps<T>>): import("react/jsx-runtime").JSX.Element;
+    size?: DropdownProps['size'];
+};
+export default function SelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, clearable, size, }: Readonly<SelectControlProps<T>>): import("react/jsx-runtime").JSX.Element;

package/form/controls/SelectControl.js

@@ -7,7 +7,7 @@ const react_1 = require("react");
 const fluent_1 = require("../../components/fluent");
 const Option_1 = require("../../components/fluent/Option");
 const SkeletonControl_1 = require("./SkeletonControl");
-function SelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, clearable, }) {
+function SelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, clearable, size, }) {
     const transformedOptions = (0, react_1.useMemo)(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
     const handleChange = (value) => {
         const option = options.find((x) => String(x.value) === value);
@@ -22,7 +22,7 @@ function SelectControl({ value, onChange, options, id, name, disabled, onBlur, o
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsx)(fluent_1.Dropdown, { placeholder: placeholder, id: id, name: name, appearance: "filled-darker", 
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Dropdown, { placeholder: placeholder, id: id, name: name, appearance: "filled-darker", size: size, 
         // data={transformedOptions}
         value: selectedOption?.label ?? '', 
         // onChange={(e, v) => handleChange(v as string)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.29",
+  "version": "1.4.31",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/lodash": "4.17.20"
   },
-  "gitHead": "bf59bd13938acd5768f93b2524fe58e103981395"
+  "gitHead": "3c6a0b0fc245e8d9c6a4cb6811cbba079dfa5146"
 }