@headless-adminapp/fluent 0.0.17-alpha.8 → 1.0.1

package/DataGrid/GridListContainer.js

@@ -0,0 +1,93 @@
+"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)(() => {
+        return (data?.records.map((record) => ({
+            ...record,
+            __uuid: (0, uuid_1.v4)(),
+        })) ?? fallbackData);
+    }, [data?.records]);
+    const rows = uniqueRecords;
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: () => tableWrapperRef.current?.parentElement?.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) => {
+        recordSetSetter(schema.logicalName, dataRef.current?.records.map((x) => x[schema.idAttribute]) ??
+            []);
+        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?.records, hasMore: 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/GridPaginationContainer.js

@@ -7,7 +7,6 @@ const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const react_1 = require("react");
 const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
 const GridPaginationContainer = () => {
-    var _a, _b, _c;
     const data = (0, hooks_1.useGridData)();
     const [selectedIds] = (0, hooks_1.useGridSelection)();
     const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
@@ -15,6 +14,6 @@ const GridPaginationContainer = () => {
                 color: react_components_1.tokens.colorNeutralForeground3,
                 display: 'flex',
                 gap: 8,
-            }, children: [(0, jsx_runtime_1.jsxs)("span", { children: [strings.records, ": ", (_a = data === null || data === void 0 ? void 0 : data.count) !== null && _a !== void 0 ? _a : '-'] }), (0, jsx_runtime_1.jsx)("span", { children: "|" }), (0, jsx_runtime_1.jsxs)("span", { children: [strings.loaded, ": ", (_b = data === null || data === void 0 ? void 0 : data.records.length) !== null && _b !== void 0 ? _b : '-'] }), (selectedIds.length > 0 || ((_c = data === null || data === void 0 ? void 0 : data.count) !== null && _c !== void 0 ? _c : 0) > 0) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "|" }), (0, jsx_runtime_1.jsxs)("span", { children: [strings.selected, ": ", selectedIds.length] })] }))] }) }));
+            }, children: [(0, jsx_runtime_1.jsxs)("span", { children: [strings.records, ": ", data?.count ?? '-'] }), (0, jsx_runtime_1.jsx)("span", { children: "|" }), (0, jsx_runtime_1.jsxs)("span", { children: [strings.loaded, ": ", data?.records.length ?? '-'] }), (selectedIds.length > 0 || (data?.count ?? 0) > 0) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "|" }), (0, jsx_runtime_1.jsxs)("span", { children: [strings.selected, ": ", selectedIds.length] })] }))] }) }));
 };
 exports.GridPaginationContainer = GridPaginationContainer;

package/DataGrid/GridTableContainer.js

@@ -3,20 +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 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': {
@@ -54,7 +66,6 @@ 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;
     const styles = useStyles();
     const data = (0, hooks_1.useGridData)();
     const dataState = (0, hooks_1.useGridDataState)();
@@ -75,14 +86,15 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
     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 : []);
+        recordSetSetter(schema.logicalName, dataRef.current?.records.map((x) => x[schema.idAttribute]) ??
+            []);
         openFormInternal({
             logicalName: schema.logicalName,
             id,
         });
     }, [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)({
@@ -93,16 +105,26 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         disableSelection,
         tableWrapperRef,
     });
+    const uniqueRecords = (0, react_1.useMemo)(() => {
+        return (data?.records.map((record) => ({
+            ...record,
+            __uuid: (0, uuid_1.v4)(),
+        })) ?? fallbackData);
+    }, [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',
@@ -123,7 +145,7 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
     const rows = table.getRowModel().rows;
     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; },
+        getScrollElement: () => tableWrapperRef.current?.parentElement?.parentElement,
         estimateSize: () => 44,
         overscan: 30,
         paddingStart: 33,
@@ -138,18 +160,16 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
     }, [virtualSize]);
     // callback to handle scrolling, checking if we are near the bottom
     const handleScroll = (0, react_1.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if ((_b = (_a = tableWrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) {
-            const scrollPosition = (_e = (_d = (_c = tableWrapperRef.current) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.scrollTop;
-            const visibleHeight = (_h = (_g = (_f = tableWrapperRef.current) === null || _f === void 0 ? void 0 : _f.parentElement) === null || _g === void 0 ? void 0 : _g.parentElement) === null || _h === void 0 ? void 0 : _h.clientHeight;
+        if (tableWrapperRef.current?.parentElement?.parentElement) {
+            const scrollPosition = tableWrapperRef.current?.parentElement?.parentElement?.scrollTop;
+            const visibleHeight = tableWrapperRef.current?.parentElement?.parentElement?.clientHeight;
             setIsScrollNearBottom(scrollPosition > virtualSize * 0.95 - visibleHeight);
         }
     }, [virtualSize]);
     // add an event listener on the scrollable parent container and resize the
     // pseudo element whenever the table renders with new data
     (0, react_1.useEffect)(() => {
-        var _a, _b;
-        const scrollable = (_b = (_a = tableWrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement;
+        const scrollable = tableWrapperRef.current?.parentElement?.parentElement;
         if (scrollable)
             scrollable.addEventListener('scroll', handleScroll);
         handlePseudoResize();
@@ -165,74 +185,90 @@ 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 = tableWrapperRef.current?.parentElement?.parentElement?.scrollLeft ===
+        (tableWrapperRef.current?.parentElement?.parentElement?.scrollWidth ?? 0) -
+            (tableWrapperRef.current?.parentElement?.parentElement?.clientWidth ?? 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?.records, hasMore: 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, {
+                                            ...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, {
+                                            ...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?.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>;

package/DataGrid/TableCell/TableCellBase.js

@@ -4,6 +4,11 @@ exports.TableCellBase = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const TableCellBase = ({ children, onClick, style, }) => {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { onClick: onClick, style: Object.assign({ display: 'flex', alignItems: 'center' }, style), children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { onClick: onClick, style: {
+            display: 'flex',
+            alignItems: 'center',
+            // borderBottom: `var(--strokeWidthThin) solid var(--colorNeutralStroke2)`,
+            ...style,
+        }, children: children }));
 };
 exports.TableCellBase = TableCellBase;

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) => {
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { checked: checked ?? false, onChange: (event) => {
                 event.stopPropagation();
-                onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                onChange?.(event);
             } }) }));
-};
-exports.TableCellCheckbox = TableCellCheckbox;
+});
+exports.TableCellCheckbox.displayName = 'TableCellCheckbox';

package/DataGrid/TableCell/TableCellChoice.d.ts

@@ -0,0 +1,15 @@
+import { ChoiceAttribute } from '@headless-adminapp/core/attributes';
+import { ViewColumn } from '@headless-adminapp/core/experience/view';
+import { Schema } from '@headless-adminapp/core/schema';
+import { UniqueRecord } from '../types';
+interface TableCellChoiceProps {
+    column: ViewColumn;
+    schema: Schema;
+    record: UniqueRecord;
+    value: unknown;
+    attribute: ChoiceAttribute<string | number>;
+    formattedValue: string;
+    width: number;
+}
+export declare function TableCellChoice(props: TableCellChoiceProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/DataGrid/TableCell/TableCellChoice.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellChoice = TableCellChoice;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const color_1 = require("@headless-adminapp/app/utils/color");
+const react_1 = require("react");
+const TableCellBase_1 = require("./TableCellBase");
+function TableCellChoice(props) {
+    const bgColor = (0, react_1.useMemo)(() => {
+        if (!props.value || !props.attribute.options) {
+            return;
+        }
+        return props.attribute.options.find((option) => option.value === props.value)?.color;
+    }, [props.attribute.options, props.value]);
+    const color = (0, react_1.useMemo)(() => {
+        if (!bgColor) {
+            return;
+        }
+        return (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
+    }, [bgColor]);
+    return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            width: props.width,
+            minWidth: props.width,
+            maxWidth: props.width,
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Badge, { style: {
+                backgroundColor: bgColor,
+                color,
+                fontWeight: react_components_1.tokens.fontWeightRegular,
+            }, children: props.formattedValue }) }));
+}

package/DataGrid/TableCell/TableCellLink.d.ts

@@ -1,8 +1,9 @@
 import { FC } from 'react';
 export interface TableCellLinkProps {
-    value: string | undefined | null;
+    value: React.ReactNode | undefined | null;
     href?: string;
     onClick?: () => void;
     width: number;
+    target?: string;
 }
 export declare const TableCellLink: FC<TableCellLinkProps>;

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, target }) => {
     const router = (0, hooks_1.useRouter)();
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
             textOverflow: 'ellipsis',
@@ -15,7 +16,10 @@ const TableCellLink = ({ value, href, onClick, width, }) => {
             maxWidth: width,
             display: 'flex',
             alignItems: 'center',
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, onClick: (event) => {
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, target: target, onClick: (event) => {
+                if (target === '_blank') {
+                    return;
+                }
                 if (event.metaKey || event.ctrlKey) {
                     return;
                 }
@@ -24,10 +28,14 @@ const TableCellLink = ({ value, href, onClick, width, }) => {
                     onClick();
                     return;
                 }
-                if (href === null || href === void 0 ? void 0 : href.startsWith('/')) {
+                if (href?.startsWith('/')) {
                     router.push(href);
                     event.preventDefault();
                 }
+            }, style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: react_components_1.tokens.spacingHorizontalXS,
             }, 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/types.d.ts

@@ -0,0 +1,5 @@
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Data } from '@headless-adminapp/core/transport';
+export type UniqueRecord = Data<InferredSchemaType<SchemaAttributes>> & {
+    __uuid: string;
+};

package/DataGrid/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/DataGrid/useTableColumns.d.ts

@@ -1,5 +1,4 @@
-import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
-import { Data } from '@headless-adminapp/core/transport';
+import { UniqueRecord } from './types';
 export declare function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }: {
     disableSelection?: boolean;
     disableContextMenu?: boolean;
@@ -7,4 +6,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>[];