@headless-adminapp/fluent 0.0.17-alpha.3 → 0.0.17-alpha.30

package/App/AppHeaderContianer.js

@@ -61,7 +61,7 @@ const AppHeaderContainer = () => {
                                                 }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession === null || authSession === void 0 ? void 0 : authSession.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession === null || authSession === void 0 ? void 0 : authSession.email })] })] }), (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { marginInline: 0 } }), (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { style: { width: 200, marginBottom: 4 }, children: [(_b = app.accountMenuItems) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
                                                 var _a, _b;
                                                 const Icon = item.icon;
-                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, children: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label }, index));
+                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, children: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label }, index));
                                             }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout })] })] })] })] })] }));
 };
 exports.AppHeaderContainer = AppHeaderContainer;

package/App/NavigationContainer.js

@@ -43,14 +43,14 @@ const NavigationContainer = () => {
     const isRouteActive = (0, hooks_1.useIsRouteActive)();
     const routeResolver = (0, hooks_1.useRouteResolver)();
     return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: isOpen, type: type, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => {
-                                var _a;
+                                var _a, _b;
                                 const navItem = (0, utils_1.transformNavPageItem)({
                                     item,
                                     schemaMetadataDic: schemaMetadataDic,
                                     language,
                                     routeResolver,
                                 });
-                                const Icon = (_a = navItem.icon) !== null && _a !== void 0 ? _a : icons_1.IconPlaceholder;
+                                const Icon = (_b = (_a = navItem.icon) !== null && _a !== void 0 ? _a : icons_1.Icons.Entity) !== null && _b !== void 0 ? _b : icons_1.IconPlaceholder;
                                 const isActive = isRouteActive(selectedPath, item);
                                 return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: navItem.link, onClick: (event) => {
                                         event.preventDefault();

package/App/QuickActionItem.js

@@ -24,7 +24,7 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 const QuickActionItem = ({ label, Icon, onClick, link, }) => {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), appearance: "transparent", as: "a", href: link, title: label, className: styles.root, onClick: (event) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), appearance: "transparent", as: "a", href: link, title: label, className: styles.root, onClick: (event) => {
             event.preventDefault();
             onClick === null || onClick === void 0 ? void 0 : onClick();
         } }));

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, {}), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, 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, {}), 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 }) })] })
+    (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, {}), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
+        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, {}), 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, {}), 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;
+    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.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/CustomizeColumns/AddColumns.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddColumns = AddColumns;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const builders_1 = require("@headless-adminapp/app/builders");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const utils_1 = require("@headless-adminapp/app/locale/utils");
 const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
@@ -26,7 +26,7 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
     }))
         .filter(({ attribute }) => attribute.type === 'lookup');
     const columnGroups = Object.assign({ root: {
-            label: (0, builders_1.localizedLabel)(language, schema),
+            label: (0, utils_1.localizedLabel)(language, schema),
             columns: (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(schema.attributes).map((key) => ({
                 name: key,
             })), schemaStore, language),
@@ -37,9 +37,9 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
             expandedKey: nestedKey,
         })), schemaStore, language);
         acc[key] = {
-            label: (0, builders_1.localizedLabel)(language, attribute) +
+            label: (0, utils_1.localizedLabel)(language, attribute) +
                 ' (' +
-                (0, builders_1.localizedLabel)(language, lookupSchema) +
+                (0, utils_1.localizedLabel)(language, lookupSchema) +
                 ')',
             columns,
         };
@@ -64,7 +64,6 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
                             gap: 8,
                             marginBottom: react_components_1.tokens.spacingVerticalXS,
                             paddingInline: react_components_1.tokens.spacingHorizontalS,
-                            width: '100%',
                         }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { value: (_a = selectedGroupItem === null || selectedGroupItem === void 0 ? void 0 : selectedGroupItem.label) !== null && _a !== void 0 ? _a : '', selectedOptions: selectedGroupItem ? [String(selectedGroupItem.key)] : [], onOptionSelect: (event, data) => {
                                     setSelectedGroup(data.optionValue);
                                 }, style: { flex: 1, minWidth: 'unset' }, positioning: {

package/DataGrid/CustomizeColumns/ColumnItem.js

@@ -71,12 +71,14 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
     drag(drop(ref));
     return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
             background: react_components_1.tokens.colorNeutralBackground4,
-            padding: react_components_1.tokens.spacingHorizontalXS,
+            paddingBlock: react_components_1.tokens.spacingVerticalXS,
+            paddingLeft: react_components_1.tokens.spacingHorizontalS,
             cursor: 'move',
             opacity,
             borderRadius: react_components_1.tokens.borderRadiusMedium,
             display: 'flex',
             flexDirection: 'row',
+            alignItems: 'center',
         }, "data-handler-id": handlerId, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { flex: 1 }, children: item.label }), (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}), appearance: "transparent", size: "small" }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: onRemove, children: stringSet.remove }), !isFirst && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
                                         moveItem(index, index - 1);
                                     }, children: stringSet.moveUp })), !isLast && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {

package/DataGrid/GridColumnHeader/FilterForm.js

@@ -34,7 +34,9 @@ const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
     };
     const isValid = (0, react_1.useMemo)(() => {
         return (!!selectedOption &&
-            values.filter(Boolean).length === selectedOption.controls.length);
+            values.filter((value) => {
+                return value !== null && value !== undefined;
+            }).length === selectedOption.controls.length);
     }, [selectedOption, values]);
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { style: { paddingBlock: 8 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',

package/DataGrid/GridColumnHeader/OperatorSelect.js

@@ -6,16 +6,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OperatorSelect = OperatorSelect;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const column_filter_1 = require("@headless-adminapp/app/datagrid/column-filter");
+const transport_1 = require("@headless-adminapp/app/transport");
 const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
 const SelectControl_1 = __importDefault(require("../../form/controls/SelectControl"));
 function OperatorSelect({ attribute, value, onChange, }) {
     const { operatorStrings } = (0, AppStringContext_1.useAppStrings)();
+    const dataService = (0, transport_1.useDataService)();
     const operatorOptions = (0, react_1.useMemo)(() => {
         return (0, column_filter_1.getLocalizedOperatorOptions)(operatorStrings);
     }, [operatorStrings]);
     const options = (0, react_1.useMemo)(() => {
-        return operatorOptions[attribute.type];
-    }, [attribute.type, operatorOptions]);
+        const supportedOperators = dataService.supportedOperators;
+        let operators = operatorOptions[attribute.type];
+        if (supportedOperators) {
+            operators = operators.filter((option) => supportedOperators[attribute.type].includes(option.value));
+        }
+        return operators;
+    }, [attribute.type, operatorOptions, dataService]);
     return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, { options: options, onChange: (value) => onChange === null || onChange === void 0 ? void 0 : onChange(value), value: value }));
 }

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -61,7 +61,7 @@ minWidth,
 column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) => {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const schema = (0, hooks_1.useDataGridSchema)();
-    const { getSchema } = (0, hooks_2.useMetadata)();
+    const { schemaStore } = (0, hooks_2.useMetadata)();
     const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
     const attribute = (0, react_1.useMemo)(() => {
         const _attribute = schema.attributes[column.name];
@@ -71,9 +71,9 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
         if (_attribute.type !== 'lookup') {
             throw new Error('Invalid attribute type');
         }
-        const lookupSchema = getSchema(_attribute.entity);
+        const lookupSchema = schemaStore.getSchema(_attribute.entity);
         return lookupSchema.attributes[column.expandedKey];
-    }, [column.expandedKey, column.name, getSchema, schema.attributes]);
+    }, [column.expandedKey, column.name, schemaStore, schema.attributes]);
     const align = (0, react_1.useMemo)(() => {
         switch (attribute.type) {
             case 'money':
@@ -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/GridHeaderDesktop.js

@@ -24,7 +24,6 @@ const GridHeaderDesktop = (props) => {
             alignItems: 'center',
             paddingInline: 8,
             gap: 16,
-            width: '100%',
             display: 'flex',
         }, children: [(0, jsx_runtime_1.jsx)(CustomizeColumns_1.CustomizeColumns, { opened: isColumnCustomizationOpen, onClose: () => setIsColumnCustomizationOpen(false) }), (0, jsx_runtime_1.jsx)("div", { style: {
                     flex: 1,

package/DataGrid/GridTableContainer.js

@@ -7,12 +7,12 @@ const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
+const navigation_1 = require("@headless-adminapp/app/navigation");
 const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
-const hooks_3 = require("@headless-adminapp/app/route/hooks");
-const app_1 = require("@headless-adminapp/core/experience/app");
 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");
@@ -55,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)();
@@ -73,25 +73,16 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         }));
     }, [sorting]);
     const tableWrapperRef = (0, react_1.useRef)(null);
-    const routeResolver = (0, hooks_3.useRouteResolver)();
-    const router = (0, hooks_3.useRouter)();
     const recordSetSetter = (0, hooks_2.useRecordSetSetter)();
+    const openFormInternal = (0, navigation_1.useOpenForm)();
     const openRecord = (0, react_1.useCallback)((id) => {
         var _a, _b;
-        const path = routeResolver({
+        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
+        openFormInternal({
             logicalName: schema.logicalName,
-            type: app_1.PageType.EntityForm,
             id,
         });
-        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
-        router.push(path);
-    }, [
-        recordSetSetter,
-        routeResolver,
-        router,
-        schema.idAttribute,
-        schema.logicalName,
-    ]);
+    }, [openFormInternal, recordSetSetter, schema.idAttribute, schema.logicalName]);
     const { direction } = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
@@ -103,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',
@@ -175,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';