@headless-adminapp/fluent 0.0.17-alpha.24 → 0.0.17-alpha.26

package/CommandBar/Button.d.ts

@@ -1,5 +1,6 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
 import { Icon } from '@headless-adminapp/icons';
+import { MemoExoticComponent } from 'react';
 export interface CommandButtonProps {
     Icon: Icon;
     iconPosition?: 'before' | 'after';
@@ -8,4 +9,4 @@ export interface CommandButtonProps {
     onClick?: () => void;
     disabled?: boolean;
 }
-export declare const CommandButton: ForwardRefComponent<CommandButtonProps>;
+export declare const CommandButton: MemoExoticComponent<ForwardRefComponent<CommandButtonProps>>;

package/CommandBar/Button.js

@@ -29,8 +29,8 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
 });
 const ToolbarButtonInternal = react_components_1.ToolbarButton;
-exports.CommandButton = (0, react_1.forwardRef)(function CommandButton({ Icon, text, danger, onClick, disabled, iconPosition = 'before' }, ref) {
+exports.CommandButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandButton({ Icon, text, danger, onClick, disabled, iconPosition = 'before' }, ref) {
     const styles = useStyles();
     return ((0, jsx_runtime_1.jsx)(ToolbarButtonInternal, { ref: ref, type: "button", icon: !!Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : undefined, iconPosition: iconPosition, disabled: disabled, onClick: onClick, className: (0, react_components_1.mergeClasses)(styles.root, danger && styles.danger), children: text }));
-});
+}));
 exports.CommandButton.displayName = 'CommandButton';

package/CommandBar/Divider.d.ts

@@ -1,2 +1,3 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
-export declare const CommandDivider: ForwardRefComponent<{}>;
+import { MemoExoticComponent } from 'react';
+export declare const CommandDivider: MemoExoticComponent<ForwardRefComponent<{}>>;

package/CommandBar/Divider.js

@@ -4,7 +4,7 @@ exports.CommandDivider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
-exports.CommandDivider = (0, react_1.forwardRef)(function CommandDivider(_, ref) {
+exports.CommandDivider = (0, react_1.memo)((0, react_1.forwardRef)(function CommandDivider(_, ref) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarDivider, { ref: ref, style: { paddingInline: react_components_1.tokens.spacingHorizontalXS } }));
-});
+}));
 exports.CommandDivider.displayName = 'CommandDivider';

package/CommandBar/IconButton.d.ts

@@ -1,9 +1,10 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
 import { Icon } from '@headless-adminapp/icons';
+import { MemoExoticComponent } from 'react';
 export interface CommandIconButtonProps {
     Icon: Icon;
     disabled?: boolean;
     onClick?: () => void;
     danger?: boolean;
 }
-export declare const CommandIconButton: ForwardRefComponent<CommandIconButtonProps>;
+export declare const CommandIconButton: MemoExoticComponent<ForwardRefComponent<CommandIconButtonProps>>;

package/CommandBar/IconButton.js

@@ -25,8 +25,8 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-exports.CommandIconButton = (0, react_1.forwardRef)(function CommandIconButton({ Icon, disabled, onClick, danger }, ref) {
+exports.CommandIconButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandIconButton({ Icon, disabled, onClick, danger }, ref) {
     const styles = useStyles();
     return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), disabled: disabled, onClick: onClick, className: (0, react_components_1.mergeClasses)(styles.root, danger && styles.danger) }));
-});
+}));
 exports.CommandIconButton.displayName = 'CommandIconButton';

package/CommandBar/Label.d.ts

@@ -1,7 +1,8 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
 import { Icon } from '@headless-adminapp/icons';
+import { MemoExoticComponent } from 'react';
 export interface CommandLabelProps {
     Icon?: Icon;
     text: string;
 }
-export declare const CommandLabel: ForwardRefComponent<CommandLabelProps>;
+export declare const CommandLabel: MemoExoticComponent<ForwardRefComponent<CommandLabelProps>>;

package/CommandBar/Label.js

@@ -16,8 +16,8 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-exports.CommandLabel = (0, react_1.forwardRef)(function CommandLabel({ Icon, text }, ref) {
+exports.CommandLabel = (0, react_1.memo)((0, react_1.forwardRef)(function CommandLabel({ Icon, text }, ref) {
     const styles = useStyles();
     return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, type: "button", icon: !!Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : undefined, className: (0, react_components_1.mergeClasses)(styles.root), children: text }));
-});
+}));
 exports.CommandLabel.displayName = 'CommandLabel';

package/CommandBar/MenuButton.d.ts

@@ -1,6 +1,7 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
 import { ArrayGroupWithAtLeastOne } from '@headless-adminapp/core/types';
 import { Icon } from '@headless-adminapp/icons';
+import { MemoExoticComponent } from 'react';
 import { MenuItemProps } from './MenuItem';
 export interface CommandMenuButtonProps {
     Icon: Icon;
@@ -10,4 +11,4 @@ export interface CommandMenuButtonProps {
     onClick?: () => void;
     items: ArrayGroupWithAtLeastOne<MenuItemProps>;
 }
-export declare const CommandMenuButton: ForwardRefComponent<CommandMenuButtonProps>;
+export declare const CommandMenuButton: MemoExoticComponent<ForwardRefComponent<CommandMenuButtonProps>>;

package/CommandBar/MenuButton.js

@@ -32,12 +32,12 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-exports.CommandMenuButton = (0, react_1.forwardRef)(function CommandMenuButton({ Icon, items, text, danger, disabled, onClick }, ref) {
+exports.CommandMenuButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandMenuButton({ Icon, items, text, danger, disabled, onClick }, ref) {
     const styles = useStyles();
     return (
     // <div ref={ref}>
     (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => ((0, jsx_runtime_1.jsx)(react_components_1.SplitButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, disabled: disabled, children: text })) })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuButton, { ref: ref, appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(styles.menuButton), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] })
     // </div>
     );
-});
+}));
 exports.CommandMenuButton.displayName = 'CommandMenuButton';

package/CommandBar/MenuItem.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
 const MenuList_1 = require("./MenuList");
 const useStyles = (0, react_components_1.makeStyles)({
     splitMenuRight: {
@@ -27,11 +28,11 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const MenuItem = ({ Icon, text, disabled, danger, onClick, items, }) => {
+exports.MenuItem = (0, react_1.memo)(({ Icon, text, disabled, danger, onClick, items }) => {
     const styles = useStyles();
     if (!(items === null || items === void 0 ? void 0 : items.length)) {
         return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { disabled: disabled, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
     }
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [onClick ? ((0, jsx_runtime_1.jsxs)(react_components_1.MenuSplitGroup, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }), (0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { className: (0, react_components_1.mergeClasses)(styles.splitMenuRight) }) })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
-};
-exports.MenuItem = MenuItem;
+});
+exports.MenuItem.displayName = 'MenuItem';

package/CommandBar/MenuItems.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
 const MenuItem_1 = require("./MenuItem");
-const MenuItems = ({ items }) => {
+exports.MenuItems = (0, react_1.memo)(({ items }) => {
     return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: items === null || items === void 0 ? void 0 : items.map((group, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), group.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { Icon: item.Icon, onClick: item.onClick, text: item.text, danger: item.danger, disabled: item.disabled, items: item.items }, index)))] }, index))) }));
-};
-exports.MenuItems = MenuItems;
+});
+exports.MenuItems.displayName = 'MenuItems';

package/CommandBar/MenuList.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
 const MenuItems_1 = require("./MenuItems");
-const MenuList = ({ items }) => {
+exports.MenuList = (0, react_1.memo)(({ items }) => {
     return ((0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: !(items === null || items === void 0 ? void 0 : items.length) ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { style: {
                 color: react_components_1.tokens.colorNeutralForegroundDisabled,
                 fontStyle: 'italic',
             }, children: "No items" })) : ((0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { items: items })) }));
-};
-exports.MenuList = MenuList;
+});
+exports.MenuList.displayName = 'MenuList';

package/CommandBar/Wrapper.d.ts

@@ -1,8 +1,8 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
-import { PropsWithChildren } from 'react';
+import { MemoExoticComponent, PropsWithChildren } from 'react';
 export interface CommandBarWrapperProps {
     overflow?: 'hidden' | 'auto';
     className?: string;
     align?: 'start' | 'end';
 }
-export declare const CommandBarWrapper: ForwardRefComponent<PropsWithChildren<CommandBarWrapperProps>>;
+export declare const CommandBarWrapper: MemoExoticComponent<ForwardRefComponent<PropsWithChildren<CommandBarWrapperProps>>>;

package/CommandBar/Wrapper.js

@@ -17,8 +17,8 @@ const useStyles = (0, react_components_1.makeStyles)({
         overflow: 'auto',
     },
 });
-exports.CommandBarWrapper = (0, react_1.forwardRef)(function CommandBarWrapper({ children, overflow, className, align = 'start' }, ref) {
+exports.CommandBarWrapper = (0, react_1.memo)((0, react_1.forwardRef)(function CommandBarWrapper({ children, overflow, className, align = 'start' }, ref) {
     const styles = useStyles();
     return ((0, jsx_runtime_1.jsx)(react_components_1.Toolbar, { ref: ref, style: { justifyContent: 'flex-' + align }, className: (0, react_components_1.mergeClasses)(styles.root, overflow === 'hidden' ? styles.overflowHidden : styles.overflowAuto, className), children: children }));
-});
+}));
 exports.CommandBarWrapper.displayName = 'CommandBarWrapper';

package/CommandBar/index.d.ts

@@ -1,9 +1,9 @@
 declare const CommandBar: {
-    Wrapper: import("@fluentui/react-components").ForwardRefComponent<import("react").PropsWithChildren<import("./Wrapper").CommandBarWrapperProps>>;
-    Button: import("@fluentui/react-components").ForwardRefComponent<import("./Button").CommandButtonProps>;
-    MenuButton: import("@fluentui/react-components").ForwardRefComponent<import("./MenuButton").CommandMenuButtonProps>;
-    Divider: import("@fluentui/react-components").ForwardRefComponent<{}>;
-    IconButton: import("@fluentui/react-components").ForwardRefComponent<import("./IconButton").CommandIconButtonProps>;
-    Label: import("@fluentui/react-components").ForwardRefComponent<import("./Label").CommandLabelProps>;
+    Wrapper: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<import("react").PropsWithChildren<import("./Wrapper").CommandBarWrapperProps>>>;
+    Button: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<import("./Button").CommandButtonProps>>;
+    MenuButton: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<import("./MenuButton").CommandMenuButtonProps>>;
+    Divider: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<{}>>;
+    IconButton: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<import("./IconButton").CommandIconButtonProps>>;
+    Label: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<import("./Label").CommandLabelProps>>;
 };
 export default CommandBar;

package/DataGrid/ActionCell.d.ts

@@ -4,5 +4,5 @@ interface ActionCellProps {
     onOpen: () => void;
     mutableState: MutableState<MenuItemCommandState[][]>;
 }
-export declare function ActionCell({ onOpen, mutableState }: ActionCellProps): import("react/jsx-runtime").JSX.Element;
+export declare const ActionCell: import("react").NamedExoticComponent<ActionCellProps>;
 export {};

package/DataGrid/ActionCell.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionCell = ActionCell;
+exports.ActionCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
+const react_1 = require("react");
 const TableCell_1 = require("../DataGrid/TableCell");
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
-function ActionCell({ onOpen, mutableState }) {
+exports.ActionCell = (0, react_1.memo)(function ActionCell({ onOpen, mutableState, }) {
     const transformedCommands = (0, mutable_1.useMutableStateSelector)(mutableState, (state) => state);
-    return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellAction, { onOpen: onOpen, items: transformedCommands.map((item) => (0, OverflowCommandBar_1.transformMenuItems)(item, 'en')) }));
-}
+    const { language } = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellAction, { onOpen: onOpen, items: transformedCommands.map((item) => (0, OverflowCommandBar_1.transformMenuItems)(item, language)) }));
+});
+exports.ActionCell.displayName = 'ActionCell';

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -100,7 +100,7 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     if (!disableFilter) {
         menuItems.push(filterMenuItems);
     }
-    const headerCell = ((0, jsx_runtime_1.jsxs)(react_components_1.TableHeaderCell, { 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: "div", className: (0, react_components_1.mergeClasses)(styles.root, align === 'right' && styles.right), style: {
             textAlign: align,
             width: minWidth,
             minWidth: minWidth,
@@ -144,9 +144,9 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     if (disableFilter && disableSort) {
         return headerCell;
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: headerCell }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: menuItems.map((x, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), x] }, i))) }) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: visible, onOpenChange: () => setVisible(false), children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 400 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: strings.filterBy }), (0, jsx_runtime_1.jsx)(FilterForm_1.FilterForm, { attribute: attribute, defaultValue: filterCondition, onApply: (condition) => {
-                                    onChangeFilterCondition === null || onChangeFilterCondition === void 0 ? void 0 : onChangeFilterCondition(condition);
-                                    setVisible(false);
-                                }, onCancel: () => setVisible(false) })] }) }) })] }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("th", { children: [(0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: headerCell }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: menuItems.map((x, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), x] }, i))) }) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: visible, onOpenChange: () => setVisible(false), children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 400 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: strings.filterBy }), (0, jsx_runtime_1.jsx)(FilterForm_1.FilterForm, { attribute: attribute, defaultValue: filterCondition, onApply: (condition) => {
+                                        onChangeFilterCondition === null || onChangeFilterCondition === void 0 ? void 0 : onChangeFilterCondition(condition);
+                                        setVisible(false);
+                                    }, onCancel: () => setVisible(false) })] }) }) })] }) }));
 };
 exports.TableHeaderFilterCell = TableHeaderFilterCell;

package/DataGrid/GridTableContainer.js

@@ -12,6 +12,7 @@ const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
 const react_table_1 = require("@tanstack/react-table");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
+const uuid_1 = require("uuid");
 const ScrollbarWithMoreDataRequest_1 = require("./ScrollbarWithMoreDataRequest");
 const useTableColumns_1 = require("./useTableColumns");
 const utils_1 = require("./utils");
@@ -54,7 +55,7 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 const fallbackData = [];
 const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort, disableColumnResize, disableContextMenu, disableSelection, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const styles = useStyles();
     const data = (0, hooks_1.useGridData)();
     const dataState = (0, hooks_1.useGridDataState)();
@@ -93,16 +94,24 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         disableSelection,
         tableWrapperRef,
     });
+    const uniqueRecords = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = data === null || data === void 0 ? void 0 : data.records.map((record) => (Object.assign(Object.assign({}, record), { __uuid: (0, uuid_1.v4)() })))) !== null && _a !== void 0 ? _a : fallbackData);
+    }, [data === null || data === void 0 ? void 0 : data.records]);
+    const idMapping = (0, react_1.useMemo)(() => uniqueRecords.reduce((acc, record) => {
+        acc[record[schema.idAttribute]] = record.__uuid;
+        return acc;
+    }, {}), [uniqueRecords, schema.idAttribute]);
     const rowSelection = (0, react_1.useMemo)(() => {
         return selectedIds.reduce((acc, id) => {
-            acc[id] = true;
+            acc[idMapping[id]] = true;
             return acc;
         }, {});
-    }, [selectedIds]);
+    }, [selectedIds, idMapping]);
     const table = (0, react_table_1.useReactTable)({
-        data: (_a = data === null || data === void 0 ? void 0 : data.records) !== null && _a !== void 0 ? _a : fallbackData,
+        data: uniqueRecords,
         columns: tableColumns,
-        getRowId: (row) => row[schema.idAttribute],
+        getRowId: (row) => row.__uuid,
         enableRowSelection: true,
         getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
         columnResizeMode: 'onChange',
@@ -165,9 +174,9 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         if (isScrollNearBottom)
             handlePseudoResize();
     }, [isScrollNearBottom, virtualItems.length, handlePseudoResize]);
-    const isScrolledToRight = ((_d = (_c = (_b = tableWrapperRef.current) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.scrollLeft) ===
-        ((_h = (_g = (_f = (_e = tableWrapperRef.current) === null || _e === void 0 ? void 0 : _e.parentElement) === null || _f === void 0 ? void 0 : _f.parentElement) === null || _g === void 0 ? void 0 : _g.scrollWidth) !== null && _h !== void 0 ? _h : 0) -
-            ((_m = (_l = (_k = (_j = tableWrapperRef.current) === null || _j === void 0 ? void 0 : _j.parentElement) === null || _k === void 0 ? void 0 : _k.parentElement) === null || _l === void 0 ? void 0 : _l.clientWidth) !== null && _m !== void 0 ? _m : 0);
+    const isScrolledToRight = ((_c = (_b = (_a = tableWrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.scrollLeft) ===
+        ((_g = (_f = (_e = (_d = tableWrapperRef.current) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.parentElement) === null || _f === void 0 ? void 0 : _f.scrollWidth) !== null && _g !== void 0 ? _g : 0) -
+            ((_l = (_k = (_j = (_h = tableWrapperRef.current) === null || _h === void 0 ? void 0 : _h.parentElement) === null || _j === void 0 ? void 0 : _j.parentElement) === null || _k === void 0 ? void 0 : _k.clientWidth) !== null && _l !== void 0 ? _l : 0);
     return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data === null || data === void 0 ? void 0 : data.records, hasMore: dataState === null || dataState === void 0 ? void 0 : dataState.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
                 fetchNextPage();
             }, children: (0, jsx_runtime_1.jsx)("div", { style: {

package/DataGrid/TableCell/TableCellCheckbox.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellCheckbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const TableCellCheckbox = ({ checked, onChange, }) => {
+const react_1 = require("react");
+exports.TableCellCheckbox = (0, react_1.memo)(({ checked, onChange }) => {
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: { display: 'flex', alignItems: 'center' }, onClick: (event) => {
             event.stopPropagation();
         }, children: (0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { checked: checked !== null && checked !== void 0 ? checked : false, onChange: (event) => {
                 event.stopPropagation();
                 onChange === null || onChange === void 0 ? void 0 : onChange(event);
             } }) }));
-};
-exports.TableCellCheckbox = TableCellCheckbox;
+});
+exports.TableCellCheckbox.displayName = 'TableCellCheckbox';

package/DataGrid/TableCell/TableCellLink.js

@@ -4,7 +4,8 @@ exports.TableCellLink = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/route/hooks");
-const TableCellLink = ({ value, href, onClick, width, }) => {
+const react_1 = require("react");
+exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width }) => {
     const router = (0, hooks_1.useRouter)();
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
             textOverflow: 'ellipsis',
@@ -29,5 +30,5 @@ const TableCellLink = ({ value, href, onClick, width, }) => {
                     event.preventDefault();
                 }
             }, children: value }) }));
-};
-exports.TableCellLink = TableCellLink;
+});
+exports.TableCellLink.displayName = 'TableCellLink';

package/DataGrid/TableCell/TableCellText.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const TableCellBase_1 = require("./TableCellBase");
-const TableCellText = ({ value, width, textAlignment, }) => {
+exports.TableCellText = (0, react_1.memo)(({ value, width, textAlignment }) => {
     return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
             textAlign: textAlignment || 'left',
             textOverflow: 'ellipsis',
@@ -19,6 +20,10 @@ const TableCellText = ({ value, width, textAlignment, }) => {
             // display: 'flex',
             // alignItems: 'center',
             // borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: { overflow: 'hidden', textOverflow: 'ellipsis', width: '100%' }, children: value }) }));
-};
-exports.TableCellText = TableCellText;
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                width: '100%',
+            }, children: value }) }));
+});
+exports.TableCellText.displayName = 'TableCellText';

package/DataGrid/useTableColumns.d.ts

@@ -1,5 +1,8 @@
 import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
 import { Data } from '@headless-adminapp/core/transport';
+export type UniqueRecord = Data<InferredSchemaType<SchemaAttributes>> & {
+    __uuid: string;
+};
 export declare function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }: {
     disableSelection?: boolean;
     disableContextMenu?: boolean;
@@ -7,4 +10,4 @@ export declare function useTableColumns({ disableSelection, disableContextMenu,
     disableColumnFilter?: boolean;
     disableColumnSort?: boolean;
     tableWrapperRef: React.RefObject<HTMLDivElement>;
-}): import("@tanstack/react-table").AccessorFnColumnDef<Data<InferredSchemaType<SchemaAttributes>>, unknown>[];
+}): import("@tanstack/react-table").AccessorFnColumnDef<UniqueRecord, unknown>[];

package/DataGrid/useTableColumns.js

@@ -73,7 +73,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const router = (0, hooks_5.useRouter)();
     const recordSetSetter = (0, hooks_4.useRecordSetSetter)();
     const openRecord = (0, useOpenRecord_1.useOpenRecord)();
-    const { currency, dateFormats } = (0, locale_1.useLocale)();
+    const { currency, dateFormats, timezone } = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
     const headingSelectionState = (0, react_1.useMemo)(() => {
@@ -89,173 +89,180 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         }
         return 'mixed';
     }, [data === null || data === void 0 ? void 0 : data.records.length, selectedIds]);
-    return (0, react_1.useMemo)(() => {
+    const actionColumns = (0, react_1.useMemo)(() => {
+        if (disableContextMenu)
+            return [];
         return [
-            ...(disableSelection
-                ? []
-                : [
-                    columnHelper.accessor((info) => info[schema.idAttribute], {
-                        id: '$selectColumn',
-                        header: () => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { checked: headingSelectionState, as: 'th', style: {
-                                position: 'sticky',
-                                display: 'flex',
-                                left: 0,
-                                top: 0,
-                                background: react_components_1.tokens.colorNeutralBackground3,
-                                zIndex: 1,
-                                width: 32,
-                                maxWidth: 32,
-                                minWidth: 32,
-                            }, onClick: () => {
-                                setSelectedIdsRef.current((ids) => {
-                                    var _a, _b, _c;
-                                    if (ids.length === ((_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.length)) {
-                                        return [];
-                                    }
-                                    return ((_c = (_b = dataRef.current) === null || _b === void 0 ? void 0 : _b.records.map((record) => record[schema.idAttribute])) !== null && _c !== void 0 ? _c : []);
-                                });
-                            } })),
-                        cell: (info) => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { className: (0, react_components_1.mergeClasses)(styles.selectionCell), checked: info.row.getIsSelected(), onClick: (event) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                                setSelectedIdsRef.current((ids) => {
-                                    const id = info.row.original[schema.idAttribute];
-                                    if (ids.includes(id)) {
-                                        return ids.filter((i) => i !== id);
-                                    }
-                                    return [...ids, id];
-                                });
-                            }, style: {
-                                width: 32,
-                                maxWidth: 32,
-                                minWidth: 32,
-                            } })),
-                        enableResizing: false,
-                        size: 32,
-                        minSize: 32,
-                        maxSize: 32,
-                    }),
-                ]),
-            ...gridColumns.map((column, index) => {
-                return columnHelper.accessor((info) => info[column.name], {
-                    id: column.id,
-                    header: (props) => {
-                        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: (direction) => {
-                                setSorting([
-                                    {
-                                        field: column.name,
-                                        order: direction,
-                                    },
-                                ]);
-                            }, attribute: schema.attributes[column.name], onResetSize: props.column.resetSize, resizeHandler: props.header.getResizeHandler(), children: column.label }, column.id));
-                    },
-                    cell: (info) => {
-                        var _a, _b, _c;
-                        let attribute;
-                        let value;
-                        if (column.expandedKey) {
-                            const lookup = column.name;
-                            const field = column.expandedKey;
-                            const entity = schema.attributes[lookup]
-                                .entity;
-                            const lookupSchema = schemaStore.getSchema(entity);
-                            attribute = lookupSchema.attributes[field];
-                            value = (_b = (_a = info.row.original.$expand) === null || _a === void 0 ? void 0 : _a[lookup]) === null || _b === void 0 ? void 0 : _b[field];
-                        }
-                        else {
-                            attribute = schema.attributes[column.name];
-                            value = info.getValue();
-                        }
-                        const formattedValue = (_c = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
-                            currency: currency.currency,
-                            dateFormat: dateFormats.short,
-                        })) !== null && _c !== void 0 ? _c : '';
-                        if (schema.primaryAttribute === column.name) {
-                            const path = routeResolver({
-                                logicalName: schema.logicalName,
-                                type: app_1.PageType.EntityForm,
-                                id: info.row.original[schema.idAttribute],
-                            });
-                            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: value, width: info.column.getSize(), href: path, onClick: () => {
-                                    openRecord(info.row.original[schema.idAttribute]);
-                                } }, column.id));
-                        }
-                        switch (attribute === null || attribute === void 0 ? void 0 : attribute.type) {
-                            case 'money':
-                                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize(), textAlignment: "right" }, column.id));
-                            case 'lookup':
-                                if (!value) {
-                                    return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
-                                }
-                                const path = routeResolver({
-                                    logicalName: attribute.entity,
-                                    type: app_1.PageType.EntityForm,
-                                    id: value.id,
-                                });
-                                return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: path, onClick: () => {
-                                        recordSetSetter('', []);
-                                        router.push(path);
-                                    } }, column.id));
-                        }
-                        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
-                    },
-                    enableResizing: true,
-                    size: columnWidths[index],
-                    minSize: 100,
-                    maxSize: 1000,
-                });
+            columnHelper.accessor((info) => info[schema.idAttribute], {
+                id: '$actionColumn',
+                header: () => ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { style: {
+                        minWidth: 32,
+                        flexShrink: 0,
+                        // width: 32,
+                        flex: 1,
+                        position: 'sticky',
+                        display: 'flex',
+                        right: 0,
+                        top: 0,
+                        // zIndex: 1,
+                        background: react_components_1.tokens.colorNeutralBackground3,
+                        borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+                    }, children: "\u00A0" })),
+                cell: (info) => ((0, jsx_runtime_1.jsx)(ActionCell_1.ActionCell, { onOpen: () => {
+                        const id = info.row.original[schema.idAttribute];
+                        setSelectedIdsRef.current([id]);
+                    }, mutableState: mutableContextCommandState })),
+                enableResizing: false,
+                size: 32,
+                minSize: 32,
+                maxSize: 32,
+            }),
+        ];
+    }, [disableContextMenu, mutableContextCommandState, schema.idAttribute]);
+    const selectionColumns = (0, react_1.useMemo)(() => {
+        if (disableSelection)
+            return [];
+        return [
+            columnHelper.accessor((info) => info[schema.idAttribute], {
+                id: '$selectColumn',
+                header: () => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { checked: headingSelectionState, as: 'th', style: {
+                        position: 'sticky',
+                        display: 'flex',
+                        left: 0,
+                        top: 0,
+                        background: react_components_1.tokens.colorNeutralBackground3,
+                        zIndex: 1,
+                        width: 32,
+                        maxWidth: 32,
+                        minWidth: 32,
+                    }, onClick: () => {
+                        setSelectedIdsRef.current((ids) => {
+                            var _a, _b, _c;
+                            if (ids.length === ((_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.length)) {
+                                return [];
+                            }
+                            return ((_c = (_b = dataRef.current) === null || _b === void 0 ? void 0 : _b.records.map((record) => record[schema.idAttribute])) !== null && _c !== void 0 ? _c : []);
+                        });
+                    } })),
+                cell: (info) => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { className: (0, react_components_1.mergeClasses)(styles.selectionCell), checked: info.row.getIsSelected(), onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setSelectedIdsRef.current((ids) => {
+                            const id = info.row.original[schema.idAttribute];
+                            if (ids.includes(id)) {
+                                return ids.filter((i) => i !== id);
+                            }
+                            return [...ids, id];
+                        });
+                    }, style: {
+                        width: 32,
+                        maxWidth: 32,
+                        minWidth: 32,
+                    } })),
+                enableResizing: false,
+                size: 32,
+                minSize: 32,
+                maxSize: 32,
             }),
-            ...(disableContextMenu
-                ? []
-                : [
-                    columnHelper.accessor((info) => info[schema.idAttribute], {
-                        id: '$actionColumn',
-                        header: () => ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { style: {
-                                minWidth: 32,
-                                flexShrink: 0,
-                                // width: 32,
-                                flex: 1,
-                                position: 'sticky',
-                                display: 'flex',
-                                right: 0,
-                                top: 0,
-                                // zIndex: 1,
-                                background: react_components_1.tokens.colorNeutralBackground3,
-                                borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
-                            }, children: "\u00A0" })),
-                        cell: (info) => ((0, jsx_runtime_1.jsx)(ActionCell_1.ActionCell, { onOpen: () => {
-                                const id = info.row.original[schema.idAttribute];
-                                setSelectedIdsRef.current([id]);
-                            }, mutableState: mutableContextCommandState })),
-                        enableResizing: false,
-                        size: 32,
-                        minSize: 32,
-                        maxSize: 32,
-                    }),
-                ]),
         ];
     }, [
         disableSelection,
-        gridColumns,
-        disableContextMenu,
+        headingSelectionState,
         schema.idAttribute,
-        schema.attributes,
-        schema.primaryAttribute,
-        schema.logicalName,
         styles.selectionCell,
+    ]);
+    const restColumns = (0, react_1.useMemo)(() => {
+        return gridColumns.map((column, index) => {
+            return columnHelper.accessor((info) => info[column.name], {
+                id: column.id,
+                header: (props) => {
+                    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: (direction) => {
+                            setSorting([
+                                {
+                                    field: column.name,
+                                    order: direction,
+                                },
+                            ]);
+                        }, attribute: schema.attributes[column.name], onResetSize: props.column.resetSize, resizeHandler: props.header.getResizeHandler(), children: column.label }, column.id));
+                },
+                cell: (info) => {
+                    var _a, _b, _c;
+                    let attribute;
+                    let value;
+                    if (column.expandedKey) {
+                        const lookup = column.name;
+                        const field = column.expandedKey;
+                        const entity = schema.attributes[lookup]
+                            .entity;
+                        const lookupSchema = schemaStore.getSchema(entity);
+                        attribute = lookupSchema.attributes[field];
+                        value = (_b = (_a = info.row.original.$expand) === null || _a === void 0 ? void 0 : _a[lookup]) === null || _b === void 0 ? void 0 : _b[field];
+                    }
+                    else {
+                        attribute = schema.attributes[column.name];
+                        value = info.getValue();
+                    }
+                    const formattedValue = (_c = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
+                        currency: currency.currency,
+                        dateFormat: dateFormats.short,
+                        timezone,
+                    })) !== null && _c !== void 0 ? _c : '';
+                    if (schema.primaryAttribute === column.name) {
+                        const path = routeResolver({
+                            logicalName: schema.logicalName,
+                            type: app_1.PageType.EntityForm,
+                            id: info.row.original[schema.idAttribute],
+                        });
+                        return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: value, width: info.column.getSize(), href: path, onClick: () => {
+                                openRecord(info.row.original[schema.idAttribute]);
+                            } }, column.id));
+                    }
+                    switch (attribute === null || attribute === void 0 ? void 0 : attribute.type) {
+                        case 'money':
+                            return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize(), textAlignment: "right" }, column.id));
+                        case 'lookup':
+                            if (!value) {
+                                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+                            }
+                            const path = routeResolver({
+                                logicalName: attribute.entity,
+                                type: app_1.PageType.EntityForm,
+                                id: value.id,
+                            });
+                            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: path, onClick: () => {
+                                    recordSetSetter('', []);
+                                    router.push(path);
+                                } }, column.id));
+                    }
+                    return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
+                },
+                enableResizing: true,
+                size: columnWidths[index],
+                minSize: 100,
+                maxSize: 1000,
+            });
+        });
+    }, [
         columnWidths,
-        disableColumnResize,
-        disableColumnFilter,
-        disableColumnSort,
-        setSorting,
         currency.currency,
         dateFormats.short,
-        schemaStore,
-        routeResolver,
+        disableColumnFilter,
+        disableColumnResize,
+        disableColumnSort,
+        gridColumns,
         openRecord,
         recordSetSetter,
+        routeResolver,
         router,
-        mutableContextCommandState,
-        headingSelectionState,
+        schema.attributes,
+        schema.idAttribute,
+        schema.logicalName,
+        schema.primaryAttribute,
+        schemaStore,
+        setSorting,
+        timezone,
     ]);
+    return (0, react_1.useMemo)(() => {
+        return [...selectionColumns, ...restColumns, ...actionColumns];
+    }, [selectionColumns, restColumns, actionColumns]);
 }

package/ToastNotificationContainer/index.js

@@ -27,7 +27,7 @@ const Item = ({ item, toasterId, }) => {
             return;
         }
         opened.current = true;
-        dispatchToast((0, jsx_runtime_1.jsxs)(react_components_1.Toast, { children: [!!item.title && (0, jsx_runtime_1.jsx)(react_components_1.ToastTitle, { children: item.title }), (0, jsx_runtime_1.jsx)(react_components_1.ToastBody, { children: item.text }), !!((_a = item.actions) === null || _a === void 0 ? void 0 : _a.length) && ((0, jsx_runtime_1.jsx)(react_components_1.ToastFooter, { children: item.actions.map((action, index) => ((0, jsx_runtime_1.jsx)(react_components_1.Link, { onClick: action.onClick, children: action.text }, index))) }))] }), {
+        dispatchToast((0, jsx_runtime_1.jsxs)(react_components_1.Toast, { children: [(0, jsx_runtime_1.jsx)(react_components_1.ToastTitle, { children: item.title }), (0, jsx_runtime_1.jsx)(react_components_1.ToastBody, { children: item.text }), !!((_a = item.actions) === null || _a === void 0 ? void 0 : _a.length) && ((0, jsx_runtime_1.jsx)(react_components_1.ToastFooter, { children: item.actions.map((action, index) => ((0, jsx_runtime_1.jsx)(react_components_1.Link, { onClick: action.onClick, children: action.text }, index))) }))] }), {
             timeout: 2000,
             intent: item.type,
             pauseOnHover: true,

package/form/controls/DateControl.js

@@ -8,14 +8,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
 const locale_1 = require("@headless-adminapp/app/locale");
 const dayjs_1 = __importDefault(require("dayjs"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 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 } = (0, locale_1.useLocale)();
+    const { dateFormats, timezone } = (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 === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", 
         // size="sm"
         // error={error}
         // maxDate={maxDate}
         // minDate={minDate}
-        disabled: disabled, readOnly: readOnly, formatDate: (date) => (date ? (0, dayjs_1.default)(date).format(dateFormats.short) : ''), value: value ? new Date(value) : null, onSelectDate: (date) => onChange === null || onChange === void 0 ? void 0 : onChange(date ? date.toISOString() : null), strings: datePickerStrings }));
+        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 === null || onChange === void 0 ? void 0 : onChange(date ? (0, dayjs_1.default)(date).tz(timezone).startOf('day').toISOString() : null), strings: datePickerStrings }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.24",
+  "version": "0.0.17-alpha.26",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -42,7 +42,8 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-hook-form": "7.52.2",
+    "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "3280eb0e29b7a026f0251771f564b33c123c9bec"
+  "gitHead": "038654b9eb117468f483652a99089cd92764d9d0"
 }