@headless-adminapp/fluent 0.0.17-alpha.5 → 0.0.17-alpha.52

package/DataGrid/CustomizeColumns/CustomizeColumns.d.ts

@@ -1,6 +1,6 @@
 interface CustomizeColumnsProps {
-    opened: boolean;
-    onClose: () => void;
+    readonly opened: boolean;
+    readonly onClose: () => void;
 }
 export declare function CustomizeColumns({ onClose, opened }: CustomizeColumnsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/DataGrid/CustomizeColumns/CustomizeColumns.js

@@ -62,9 +62,7 @@ function CustomizeColumns({ onClose, opened }) {
                             gap: react_components_1.tokens.spacingVerticalS,
                             // padding: tokens.spacingHorizontalS,
                             paddingBlock: react_components_1.tokens.spacingVerticalS,
-                        }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ColumnItem_1.ColumnItem, { index: index, item: item, moveItem: moveItem, isFirst: index === 0, isLast: index === items.length - 1, onRemove: () => {
-                                setItems((prev) => prev.filter((_, i) => i !== index));
-                            }, stringSet: strings }, item.id))) }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ColumnItem_1.ColumnItem, { index: index, item: item, moveItem: moveItem, isFirst: index === 0, isLast: index === items.length - 1, onRemove: () => onColumnRemove(item), stringSet: strings }, item.id))) }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             padding: 8,
                             gap: 8,

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',
@@ -44,7 +46,7 @@ const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
                             var _a;
                             return ((0, jsx_runtime_1.jsx)(ConditionValueControl_1.ConditionValueControl, { type: x, attribute: attribute, value: (_a = values[i]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
                                     handleChangeValue(value, i);
-                                } }, i));
+                                } }, x + String(i)));
                         })] }) }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", onClick: onCancel, children: strings.cancel }) }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { type: "submit", appearance: "primary", disabled: !isValid, onClick: () => {
                             onApply === null || onApply === void 0 ? void 0 : onApply({
                                 operator,

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,12 +71,13 @@ 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':
+            case 'number':
                 return 'right';
             default:
                 return 'left';
@@ -91,7 +92,7 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     };
     const sortMenuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowUp, { size: 16 }), onClick: () => onChangeSortDirection === null || onChangeSortDirection === void 0 ? void 0 : onChangeSortDirection('asc'), children: strings.sortByAscending }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowDown, { size: 16 }), onClick: () => onChangeSortDirection === null || onChangeSortDirection === void 0 ? void 0 : onChangeSortDirection('desc'), children: strings.sortByDescending })] }));
     const filterMenuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }), onClick: () => setVisible(!visible), children: strings.filter }), !!filterCondition && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.FilterDismiss, { size: 16 }), onClick: () => {
-                    onChangeFilterCondition === null || onChangeFilterCondition === void 0 ? void 0 : onChangeFilterCondition(undefined);
+                    onChangeFilterCondition(undefined);
                 }, children: strings.clearFilter }))] }));
     const menuItems = [];
     if (!disableSort) {
@@ -100,13 +101,14 @@ 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,
             maxWidth: minWidth,
             display: 'flex',
             alignItems: 'center',
+            fontWeight: react_components_1.tokens.fontWeightMedium,
             // pointerEvents: disableFilter && disableSort ? 'none' : 'auto',
         }, onClick: (event) => {
             event.preventDefault();
@@ -136,17 +138,24 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
             isResizingRef.current = false;
         }, sortable: !disableSort, 
         // sortDirection="ascending"
-        sortDirection: sortDirection === 'asc'
-            ? 'ascending'
-            : sortDirection === 'desc'
-                ? 'descending'
-                : undefined, children: [children, !!filterCondition && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 2, color: react_components_1.tokens.colorNeutralForeground1 }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }) }))] }));
+        sortDirection: getSortDirection(sortDirection), children: [children, !!filterCondition && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 2, color: react_components_1.tokens.colorNeutralForeground1 }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }) }))] }));
     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);
+    return ((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(condition);
                                     setVisible(false);
                                 }, onCancel: () => setVisible(false) })] }) }) })] }));
 };
 exports.TableHeaderFilterCell = TableHeaderFilterCell;
+const getSortDirection = (direction) => {
+    if (direction === 'asc') {
+        return 'ascending';
+    }
+    else if (direction === 'desc') {
+        return 'descending';
+    }
+    else {
+        return undefined;
+    }
+};

package/DataGrid/GridColumnHeader/utils.js

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaultOperator = getDefaultOperator;
 exports.getDefaultValues = getDefaultValues;
 function getDefaultOperator(operator, attributeType) {
-    return operator
-        ? operator
-        : attributeType === 'date'
-            ? 'on'
-            : attributeType === 'choice' || attributeType === 'lookup'
-                ? 'in'
-                : 'eq';
+    if (operator) {
+        return operator;
+    }
+    if (attributeType === 'date') {
+        return 'on';
+    }
+    if (attributeType === 'choice' || attributeType === 'lookup') {
+        return 'in';
+    }
+    return 'eq';
 }
 function getDefaultValues(operator, value, _attributeType) {
     if (!value)

package/DataGrid/GridHeaderDesktop.js

@@ -31,9 +31,12 @@ const GridHeaderDesktop = (props) => {
                     gap: 16,
                     justifyContent: 'space-between',
                     display: 'flex',
-                }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}), iconPosition: "after", children: (_b = (_a = selectedView.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : selectedView.name }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => {
+                }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}), iconPosition: "after", style: {
+                                    fontSize: react_components_1.tokens.fontSizeBase400,
+                                    fontWeight: react_components_1.tokens.fontWeightMedium,
+                                }, children: (_b = (_a = selectedView.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : selectedView.name }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => {
                                     var _a, _b;
                                     return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), children: (_b = (_a = view.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : view.name }, view.id));
-                                }) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: [props.headingRight, (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 24 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (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.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: [props.headingRight, (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 24 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (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), appearance: "filled-darker" })] })] }));
 };
 exports.GridHeaderDesktop = GridHeaderDesktop;

package/DataGrid/GridHeaderMobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface GridHeaderMobileProps {
+}
+export declare const GridHeaderMobile: FC<GridHeaderMobileProps>;
+export {};

package/DataGrid/GridHeaderMobile.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridHeaderMobile = 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/datagrid/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const icons_1 = require("@headless-adminapp/icons");
+const AppStringContext_1 = require("../App/AppStringContext");
+const GridHeaderMobile = () => {
+    const viewLookup = (0, hooks_1.useGridViewLookupData)();
+    const selectedView = (0, hooks_1.useSelectedView)();
+    const changeView = (0, hooks_1.useChangeView)();
+    const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
+    const { language } = (0, locale_1.useLocale)();
+    const appStrings = (0, AppStringContext_1.useAppStrings)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            alignItems: 'center',
+            paddingInline: 8,
+            gap: 8,
+            display: 'flex',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { alignItems: 'center', display: 'flex', gap: 16, flex: 1 }, 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), style: { flex: 1 } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    alignItems: 'center',
+                    gap: 16,
+                    justifyContent: 'space-between',
+                    display: 'flex',
+                }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, {}), iconPosition: "after" }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => {
+                                    var _a, _b;
+                                    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), icon: selectedView.id === view.id ? ((0, jsx_runtime_1.jsx)(icons_1.Icons.Checkmark, {})) : undefined, children: (_b = (_a = view.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : view.name }, view.id));
+                                }) }) })] }) })] }));
+};
+exports.GridHeaderMobile = GridHeaderMobile;

package/DataGrid/GridListContainer.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+interface GridListContainerProps {
+    disableSelection?: boolean;
+    disableContextMenu?: boolean;
+    disableColumnResize?: boolean;
+    disableColumnSort?: boolean;
+    disableColumnReorder?: boolean;
+    disableColumnFilter?: boolean;
+    noPadding?: boolean;
+}
+export declare const GridListContainer: FC<GridListContainerProps>;
+export {};

package/DataGrid/GridListContainer.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridListContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
+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 react_virtual_1 = require("@tanstack/react-virtual");
+const react_1 = require("react");
+const uuid_1 = require("uuid");
+const RecordCard_1 = require("../PageEntityForm/RecordCard");
+const RecordCardLoading_1 = require("../PageEntityForm/RecordCardLoading");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        '&:hover': {
+            background: react_components_1.tokens.colorNeutralBackground1Hover,
+        },
+    },
+});
+const fallbackData = [];
+const GridListContainer = () => {
+    const styles = useStyles();
+    const data = (0, hooks_1.useGridData)();
+    const dataState = (0, hooks_1.useGridDataState)();
+    const fetchNextPage = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.fetchNextPage);
+    const schema = (0, hooks_1.useDataGridSchema)();
+    const view = (0, hooks_1.useSelectedView)();
+    const tableWrapperRef = (0, react_1.useRef)(null);
+    const { direction } = (0, locale_1.useLocale)();
+    const dataRef = (0, react_1.useRef)(data);
+    dataRef.current = data;
+    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 rows = uniqueRecords;
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: () => { var _a, _b; return (_b = (_a = tableWrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement; },
+        estimateSize: () => 40,
+        overscan: 5,
+        enabled: true,
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    const virtualSize = virtualizer.getTotalSize();
+    const recordSetSetter = (0, hooks_2.useRecordSetSetter)();
+    const openFormInternal = (0, navigation_1.useOpenForm)();
+    const openRecord = (0, react_1.useCallback)((id) => {
+        var _a, _b;
+        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,
+            id,
+        });
+    }, [openFormInternal, recordSetSetter, schema.idAttribute, schema.logicalName]);
+    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: {
+                    position: 'relative',
+                }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        width: '100%',
+                        height: virtualizer.getTotalSize(),
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }, children: virtualItems.map((virtualRow) => {
+                                const row = rows[virtualRow.index];
+                                return ((0, jsx_runtime_1.jsx)("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, className: (0, react_components_1.mergeClasses)(styles.root), style: {
+                                        width: '100%',
+                                        position: 'absolute',
+                                        transform: `translateY(${virtualRow.start}px)`,
+                                    }, onClick: () => {
+                                        const id = row[schema.idAttribute];
+                                        openRecord(id);
+                                    }, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: row, schema: schema, selected: false }) }, virtualRow.key));
+                            }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                width: '100%',
+                                position: 'absolute',
+                                transform: `translateY(${virtualSize}px)`,
+                            }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RecordCardLoading_1.RecordCardLoading, { cardView: view.experience.card, schema: schema }, index))) }))] }) }) }) }));
+};
+exports.GridListContainer = GridListContainer;

package/DataGrid/GridTableContainer.js

@@ -3,21 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridTableContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
 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 icons_1 = require("@headless-adminapp/icons");
 const react_table_1 = require("@tanstack/react-table");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
-const ScrollbarWithMoreDataRequest_1 = require("./ScrollbarWithMoreDataRequest");
+const uuid_1 = require("uuid");
+const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
 const useTableColumns_1 = require("./useTableColumns");
 const utils_1 = require("./utils");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
+        '[aria-selected="true"]': {
+            background: react_components_1.tokens.colorBrandBackground2,
+            '& .fui-TableSelectionCell': {
+                background: 'inherit',
+            },
+            '& .tableCellAction': {
+                background: 'inherit',
+            },
+        },
         '&:hover': {
             // background: tokens.colorNeutralForeground1Hover,
             '& .fui-TableSelectionCell': {
@@ -55,7 +66,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,26 +84,18 @@ 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 strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
     const tableColumns = (0, useTableColumns_1.useTableColumns)({
@@ -103,16 +106,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,74 +186,84 @@ 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);
-    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: () => {
+    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.jsxs)(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: {
-                    paddingInline: noPadding ? 0 : 8,
-                    position: 'relative',
-                }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)(react_components_1.Table, { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        borderCollapse: 'collapse',
-                        width: '100%',
-                        height: virtualizer.getTotalSize() + 33,
-                        ['--action-shadow']: !isScrolledToRight
-                            ? '-2px 0px 6px rgba(0, 0, 0, 0.12)'
-                            : 'none',
-                    }, ref: tableElementRef, className: "table-pseduo", children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
-                                display: 'flex',
-                                position: 'sticky',
-                                top: 0,
-                                background: react_components_1.tokens.colorNeutralBackground3,
-                                zIndex: 2,
-                            }, children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        paddingInline: noPadding ? 0 : 8,
+                        position: 'relative',
+                    }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)(react_components_1.Table, { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            borderCollapse: 'collapse',
+                            width: '100%',
+                            height: virtualizer.getTotalSize() + 33,
+                            ['--action-shadow']: !isScrolledToRight
+                                ? '-2px 0px 6px rgba(0, 0, 0, 0.12)'
+                                : 'none',
+                        }, ref: tableElementRef, className: "table-pseduo", children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
+                                    display: 'flex',
                                     position: 'sticky',
                                     top: 0,
-                                    display: 'flex',
-                                    minWidth: 'calc(100% - 16px)',
-                                }, children: headerGroup.headers.map((header) => header.isPlaceholder
-                                    ? null
-                                    : (0, react_table_1.flexRender)(header.column.columnDef.header, Object.assign(Object.assign({}, header.getContext()), { key: header.id }))) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                transform: 'translateY(-33px)',
-                            }, children: virtualItems.map((virtualRow) => {
-                                const row = rows[virtualRow.index];
-                                return ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { className: (0, react_components_1.mergeClasses)(styles.root), style: {
+                                    background: react_components_1.tokens.colorNeutralBackground1,
+                                    zIndex: 2,
+                                }, children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+                                        position: 'sticky',
+                                        top: 0,
                                         display: 'flex',
-                                        height: `${virtualRow.size}px`,
                                         minWidth: 'calc(100% - 16px)',
-                                        position: 'absolute',
-                                        transform: `translateY(${virtualRow.start}px)`,
-                                    }, onClick: () => {
-                                        setSelectedIdsRef.current(() => {
-                                            const id = row.original[schema.idAttribute];
-                                            return [id];
-                                        });
-                                    }, onDoubleClick: () => {
-                                        const id = row.original[schema.idAttribute];
-                                        openRecord(id);
-                                    }, children: row.getVisibleCells().map((cell) => (0, react_table_1.flexRender)(cell.column.columnDef.cell, Object.assign(Object.assign({}, cell.getContext()), { key: cell.column.id }))) }, row.id));
-                            }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                position: 'absolute',
-                                transform: `translateY(${virtualSize}px)`,
-                            }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+                                        borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+                                    }, children: headerGroup.headers.map((header) => header.isPlaceholder
+                                        ? null
+                                        : (0, react_table_1.flexRender)(header.column.columnDef.header, Object.assign(Object.assign({}, header.getContext()), { key: header.id }))) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
                                     display: 'flex',
-                                    height: 44,
-                                    alignItems: 'center',
-                                }, children: table.getAllColumns().map((column, index) => {
-                                    if (!column.getIsVisible())
-                                        return null;
-                                    return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
+                                    flexDirection: 'column',
+                                    transform: 'translateY(-33px)',
+                                }, children: virtualItems.map((virtualRow) => {
+                                    const row = rows[virtualRow.index];
+                                    return ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { "aria-selected": row.getIsSelected(), className: (0, react_components_1.mergeClasses)(styles.root), style: {
                                             display: 'flex',
-                                            alignItems: 'center',
-                                            width: column.getSize(),
-                                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16 }) }, index));
-                                }) }, index))) }))] }) }) }) }));
+                                            height: `${virtualRow.size}px`,
+                                            minWidth: 'calc(100% - 16px)',
+                                            position: 'absolute',
+                                            transform: `translateY(${virtualRow.start}px)`,
+                                        }, onClick: () => {
+                                            setSelectedIdsRef.current(() => {
+                                                const id = row.original[schema.idAttribute];
+                                                return [id];
+                                            });
+                                        }, onDoubleClick: () => {
+                                            const id = row.original[schema.idAttribute];
+                                            openRecord(id);
+                                        }, children: row.getVisibleCells().map((cell) => (0, react_table_1.flexRender)(cell.column.columnDef.cell, Object.assign(Object.assign({}, cell.getContext()), { key: cell.column.id }))) }, row.id));
+                                }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    position: 'absolute',
+                                    transform: `translateY(${virtualSize}px)`,
+                                }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+                                        display: 'flex',
+                                        height: 44,
+                                        alignItems: 'center',
+                                    }, children: table.getAllColumns().map((column) => {
+                                        if (!column.getIsVisible())
+                                            return null;
+                                        return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                width: column.getSize(),
+                                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16 }) }, column.id));
+                                    }) }, index))) }))] }) }), (data === null || data === void 0 ? void 0 : data.records.length) === 0 && !dataState.isFetching && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        position: 'absolute',
+                        inset: 0,
+                        gap: react_components_1.tokens.spacingVerticalL,
+                        color: react_components_1.tokens.colorNeutralForeground3,
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 64 }) }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: strings.noRecordsFound })] }))] }) }));
 };
 exports.GridTableContainer = GridTableContainer;

package/DataGrid/TableCell/TableCellBase.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, FC, MouseEventHandler, ReactNode } from 'react';
 export interface TableCellBaseProps {
     children?: ReactNode;
-    onClick?: MouseEventHandler | undefined;
-    style?: CSSProperties | undefined;
+    onClick?: MouseEventHandler;
+    style?: CSSProperties;
 }
 export declare const TableCellBase: FC<TableCellBaseProps>;