@headless-adminapp/fluent 0.0.17-alpha.25 → 0.0.17-alpha.27

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/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/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

@@ -89,175 +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,
-                            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,
-                });
+            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/PageEntityForm/StandardControl.js

@@ -19,13 +19,14 @@ const LookupControl_1 = require("../form/controls/LookupControl");
 const MultiSelectControl_1 = __importDefault(require("../form/controls/MultiSelectControl"));
 const MultiSelectLookupControl_1 = require("../form/controls/MultiSelectLookupControl");
 const NumberControl_1 = require("../form/controls/NumberControl");
+const RichTextControl_1 = require("../form/controls/RichTextControl");
 const SelectControl_1 = __importDefault(require("../form/controls/SelectControl"));
 const SwitchControl_1 = require("../form/controls/SwitchControl");
 const TelephoneControl_1 = require("../form/controls/TelephoneControl");
 const TextAreaControl_1 = require("../form/controls/TextAreaControl");
 const TextControl_1 = require("../form/controls/TextControl");
 const StandardControl = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const { attribute, label: _label, isError, 
     // errorMessage,
     name, value, onBlur, onChange, 
@@ -78,11 +79,15 @@ const StandardControl = (props) => {
                     const Control = (_f = componentStore_1.componentStore.getComponent('Form.TextAreaControl')) !== null && _f !== void 0 ? _f : TextAreaControl_1.TextAreaControl;
                     return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
                 }
+                case 'richtext': {
+                    const Control = (_g = componentStore_1.componentStore.getComponent('Form.RichTextControl')) !== null && _g !== void 0 ? _g : RichTextControl_1.RichTextControl;
+                    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
+                }
                 default:
                     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
             }
         case 'number': {
-            const Control = (_g = componentStore_1.componentStore.getComponent('Form.NumberControl')) !== null && _g !== void 0 ? _g : NumberControl_1.NumberControl;
+            const Control = (_h = componentStore_1.componentStore.getComponent('Form.NumberControl')) !== null && _h !== void 0 ? _h : NumberControl_1.NumberControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
         }
         case 'date': {
@@ -97,11 +102,11 @@ const StandardControl = (props) => {
                 readOnly,
             };
             if (attribute.format === 'datetime') {
-                const Control = (_h = componentStore_1.componentStore.getComponent('Form.DateTimeControl')) !== null && _h !== void 0 ? _h : DateTimeControl_1.DateTimeControl;
+                const Control = (_j = componentStore_1.componentStore.getComponent('Form.DateTimeControl')) !== null && _j !== void 0 ? _j : DateTimeControl_1.DateTimeControl;
                 return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
             }
             else {
-                const Control = (_j = componentStore_1.componentStore.getComponent('Form.DateControl')) !== null && _j !== void 0 ? _j : DateControl_1.DateControl;
+                const Control = (_k = componentStore_1.componentStore.getComponent('Form.DateControl')) !== null && _k !== void 0 ? _k : DateControl_1.DateControl;
                 return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
             }
         }
@@ -116,35 +121,35 @@ const StandardControl = (props) => {
                 disabled: isDisabled,
                 readOnly,
             };
-            const Control = (_k = componentStore_1.componentStore.getComponent('Form.DateRangeControl')) !== null && _k !== void 0 ? _k : DateRangeControl_1.DateRangeControl;
+            const Control = (_l = componentStore_1.componentStore.getComponent('Form.DateRangeControl')) !== null && _l !== void 0 ? _l : DateRangeControl_1.DateRangeControl;
             return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
         }
         case 'money': {
-            const Control = (_l = componentStore_1.componentStore.getComponent('Form.CurrencyControl')) !== null && _l !== void 0 ? _l : CurrencyControl_1.CurrencyControl;
+            const Control = (_m = componentStore_1.componentStore.getComponent('Form.CurrencyControl')) !== null && _m !== void 0 ? _m : CurrencyControl_1.CurrencyControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'lookup': {
-            const Control = (_m = componentStore_1.componentStore.getComponent('Form.LookupControl')) !== null && _m !== void 0 ? _m : LookupControl_1.LookupControl;
+            const Control = (_o = componentStore_1.componentStore.getComponent('Form.LookupControl')) !== null && _o !== void 0 ? _o : LookupControl_1.LookupControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'lookups': {
-            const Control = (_o = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl')) !== null && _o !== void 0 ? _o : MultiSelectLookupControl_1.MultiSelectLookupControl;
+            const Control = (_p = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl')) !== null && _p !== void 0 ? _p : MultiSelectLookupControl_1.MultiSelectLookupControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'boolean': {
-            const Control = (_p = componentStore_1.componentStore.getComponent('Form.SwitchControl')) !== null && _p !== void 0 ? _p : SwitchControl_1.SwitchControl;
+            const Control = (_q = componentStore_1.componentStore.getComponent('Form.SwitchControl')) !== null && _q !== void 0 ? _q : SwitchControl_1.SwitchControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
         }
         case 'choice': {
-            const Control = (_q = componentStore_1.componentStore.getComponent('Form.SelectControl')) !== null && _q !== void 0 ? _q : SelectControl_1.default;
+            const Control = (_r = componentStore_1.componentStore.getComponent('Form.SelectControl')) !== null && _r !== void 0 ? _r : SelectControl_1.default;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'choices': {
-            const Control = (_r = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _r !== void 0 ? _r : MultiSelectControl_1.default;
+            const Control = (_s = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _s !== void 0 ? _s : MultiSelectControl_1.default;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'attachments': {
-            const Control = (_s = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _s !== void 0 ? _s : AttachmentsControl_1.AttachmentsControl;
+            const Control = (_t = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _t !== void 0 ? _t : AttachmentsControl_1.AttachmentsControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         // case 'attachment': {

package/form/controls/CurrencyControl.js

@@ -4,18 +4,48 @@ exports.CurrencyControl = CurrencyControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
+const react_1 = require("react");
 function CurrencyControl({ value, onChange, id, name, onBlur, onFocus, 
 // error,
 disabled, placeholder, autoFocus, 
 // borderOnFocusOnly,
 readOnly, }) {
-    var _a;
     const symbol = (0, locale_1.useCurrencySymbol)();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value ? Number(e.target.value) : null), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), appearance: "filled-darker", onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
-        // invalid={error}
-        // icon={<div>₹</div>}
-        // startDecorator={<div>₹</div>}
-        contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), disabled: disabled, readOnly: readOnly, style: {
+    const [internalValue, setInternalValue] = (0, react_1.useState)(value ? value.toString() : '');
+    const internalValueRef = (0, react_1.useRef)(internalValue);
+    internalValueRef.current = internalValue;
+    (0, react_1.useEffect)(() => {
+        let _value = '';
+        if (typeof value === 'number') {
+            _value = value.toString();
+        }
+        if (!_value && internalValueRef.current === '-') {
+            return;
+        }
+        if (internalValueRef.current !== _value) {
+            setInternalValue(_value);
+        }
+    }, [value]);
+    const handleChange = (e) => {
+        let value = e.target.value;
+        if (!value) {
+            setInternalValue('');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
+        }
+        value = value.replace(',', '');
+        if (value === '-') {
+            setInternalValue('-');
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return;
+        }
+        if (isNaN(Number(value))) {
+            return;
+        }
+        setInternalValue(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(Number(value));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), appearance: "filled-darker", onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), disabled: disabled, readOnly: readOnly, style: {
             width: '100%',
         } }));
 }

package/form/controls/RichTextControl.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ControlProps } from './types';
+export interface RichTextControlProps extends ControlProps<string> {
+}
+export declare const RichTextControl: FC<RichTextControlProps>;

package/form/controls/RichTextControl.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ReactQuill = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-quill'))));
+const RichTextControl = ({ value, onChange, id, onBlur, onFocus, disabled, readOnly, }) => {
+    return ((0, jsx_runtime_1.jsx)(ReactQuill, { value: value !== null && value !== void 0 ? value : '', onChange: onChange, className: "hdlapp_rte", readOnly: disabled || readOnly, style: { maxHeight: '400px', minHeight: '200px' }, onFocus: onFocus, onBlur: onBlur, id: id }));
+};
+exports.RichTextControl = RichTextControl;

package/form/controls/SwitchControl.d.ts

@@ -1,4 +1,4 @@
 import { ControlProps } from './types';
 export interface SwitchControlProps extends ControlProps<boolean> {
 }
-export declare function SwitchControl({}: SwitchControlProps): null;
+export declare function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, }: SwitchControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/SwitchControl.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchControl = SwitchControl;
-function SwitchControl({}) {
-    return null;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function SwitchControl({ value, onChange, id, name, disabled, readOnly, onBlur, onFocus, }) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Switch, { checked: value !== null && value !== void 0 ? value : false, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.checked), id: id, name: name, disabled: disabled, readOnly: readOnly, onBlur: onBlur, onFocus: onFocus }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.25",
+  "version": "0.0.17-alpha.27",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -17,10 +17,10 @@
     "url": "https://github.com/headless-adminapp/adminapp/issues"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && sass src/styles/index.scss dist/styles.css --no-source-map",
     "clean": "rm -rf dist && rm -f tsconfig.tsbuildinfo",
     "ts-check": "tsc --noEmit",
-    "copy-files": "cp package.json dist && cp src/index.css dist",
+    "copy-files": "cp package.json dist",
     "prepublishOnly": "pnpm run build && pnpm run copy-files",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -42,7 +42,10 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-hook-form": "7.52.2",
+    "react-quill": "^2.0.0",
+    "sass": "1.81.0",
+    "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "0a42b982d6113067cd2f9739ec646d138c1a5274"
+  "gitHead": "249b7141dedc93a334d3d918d134bd167cecd6ae"
 }

package/styles.css

@@ -0,0 +1,100 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+.TextControl_readonly:after {
+  border-bottom-color: var(--colorNeutralStrokeDisabled) !important;
+}
+
+.FormBody_scrollview > div {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacingVerticalM);
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.fui-MenuItem__icon > svg,
+.fui-Button__icon > svg {
+  width: inherit;
+  height: inherit;
+}
+
+.hdlapp_rte {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--colorNeutralBackground3);
+  overflow: hidden;
+  border-radius: var(--borderRadiusMedium);
+  border: 1px solid transparent;
+}
+.hdlapp_rte:focus-within {
+  border-color: var(--colorNeutralForeground2BrandSelected);
+}
+.hdlapp_rte .ql-snow .ql-picker {
+  color: var(--colorNeutralForeground3Hover);
+}
+.hdlapp_rte .ql-snow .ql-stroke {
+  stroke: var(--colorNeutralForeground3Hover);
+}
+.hdlapp_rte .ql-snow.ql-toolbar button:hover,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+  color: var(--colorNeutralForeground1);
+}
+.hdlapp_rte .ql-snow.ql-toolbar button:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.hdlapp_rte .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.hdlapp_rte .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.hdlapp_rte .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: var(--colorNeutralForeground1);
+}
+.hdlapp_rte .ql-snow.ql-toolbar {
+  border: none;
+}
+.hdlapp_rte .ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border-top: 1px solid var(--colorNeutralBackground1Hover);
+}
+.hdlapp_rte .ql-container.ql-snow {
+  border: none;
+}

package/index.css

@@ -1,27 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-}
-
-.TextControl_readonly:after {
-  border-bottom-color: var(--colorNeutralStrokeDisabled) !important;
-}
-
-.FormBody_scrollview > div {
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacingVerticalM);
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-.fui-MenuItem__icon > svg,
-.fui-Button__icon > svg {
-  width: inherit;
-  height: inherit;
-}