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

package/DataGrid/GridTableContainer.js

@@ -1,27 +1,24 @@
-"use strict";
-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 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)({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body1, makeStyles, mergeClasses, SkeletonItem, Table, TableBody, TableCell, TableHeader, TableRow, tokens, } from '@fluentui/react-components';
+import { ScrollbarWithMoreDataRequest } from '@headless-adminapp/app/components/ScrollbarWithMoreDataRequest';
+import { GridContext } from '@headless-adminapp/app/datagrid';
+import { useDataGridSchema, useGridColumns, useGridData, useGridDataState, useGridSelection, useGridSorting, } from '@headless-adminapp/app/datagrid/hooks';
+import { useLocale } from '@headless-adminapp/app/locale';
+import { useContextSelector } from '@headless-adminapp/app/mutable';
+import { useOpenForm } from '@headless-adminapp/app/navigation';
+import { useRecordSetSetter } from '@headless-adminapp/app/recordset/hooks';
+import { Icons } from '@headless-adminapp/icons';
+import { flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { v4 as uuid } from 'uuid';
+import { usePageEntityViewStrings } from '../PageEntityView/PageEntityViewStringContext';
+import { useTableColumns } from './useTableColumns';
+import { adjustTableHeight } from './utils';
+const useStyles = makeStyles({
     root: {
         '[aria-selected="true"]': {
-            background: react_components_1.tokens.colorBrandBackground2,
+            background: tokens.colorBrandBackground2,
             '& .fui-TableSelectionCell': {
                 background: 'inherit',
             },
@@ -39,9 +36,9 @@ const useStyles = (0, react_components_1.makeStyles)({
             },
         },
         '& .tableCellAction': {
-            background: react_components_1.tokens.colorNeutralBackground1,
+            background: tokens.colorNeutralBackground1,
         },
-        borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
         '& .fui-TableCell': {
         // borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
         // borderBottom: 'none !important',
@@ -50,7 +47,7 @@ const useStyles = (0, react_components_1.makeStyles)({
     selectionCell: {
         position: 'sticky',
         left: 0,
-        background: react_components_1.tokens.colorNeutralBackground1,
+        background: tokens.colorNeutralBackground1,
         zIndex: 1,
         display: 'flex',
         alignItems: 'center',
@@ -65,28 +62,28 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
 });
 const fallbackData = [];
-const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort, disableColumnResize, disableContextMenu, disableSelection, }) => {
+export const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort, disableColumnResize, disableContextMenu, disableSelection, }) => {
     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)();
-    const fetchNextPage = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.fetchNextPage);
-    const columns = (0, hooks_1.useGridColumns)();
-    const [sorting] = (0, hooks_1.useGridSorting)();
-    const schema = (0, hooks_1.useDataGridSchema)();
-    const [selectedIds, setSelectedIds] = (0, hooks_1.useGridSelection)();
-    const setSelectedIdsRef = (0, react_1.useRef)(setSelectedIds);
+    const data = useGridData();
+    const dataState = useGridDataState();
+    const fetchNextPage = useContextSelector(GridContext, (state) => state.fetchNextPage);
+    const columns = useGridColumns();
+    const [sorting] = useGridSorting();
+    const schema = useDataGridSchema();
+    const [selectedIds, setSelectedIds] = useGridSelection();
+    const setSelectedIdsRef = useRef(setSelectedIds);
     setSelectedIdsRef.current = setSelectedIds;
-    const sortingState = (0, react_1.useMemo)(() => {
+    const sortingState = useMemo(() => {
         return sorting.map((sort) => ({
             id: sort.field,
             desc: sort.order === 'desc',
         }));
     }, [sorting]);
-    const tableWrapperRef = (0, react_1.useRef)(null);
-    const recordSetSetter = (0, hooks_2.useRecordSetSetter)();
-    const openFormInternal = (0, navigation_1.useOpenForm)();
-    const openRecord = (0, react_1.useCallback)((id) => {
+    const tableWrapperRef = useRef(null);
+    const recordSetSetter = useRecordSetSetter();
+    const openFormInternal = useOpenForm();
+    const openRecord = 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({
@@ -94,11 +91,11 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
             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);
+    const { direction } = useLocale();
+    const strings = usePageEntityViewStrings();
+    const dataRef = useRef(data);
     dataRef.current = data;
-    const tableColumns = (0, useTableColumns_1.useTableColumns)({
+    const tableColumns = useTableColumns({
         disableColumnFilter,
         disableColumnResize,
         disableColumnSort,
@@ -106,26 +103,26 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         disableSelection,
         tableWrapperRef,
     });
-    const uniqueRecords = (0, react_1.useMemo)(() => {
+    const uniqueRecords = 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);
+        return ((_a = data === null || data === void 0 ? void 0 : data.records.map((record) => (Object.assign(Object.assign({}, record), { __uuid: uuid() })))) !== 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) => {
+    const idMapping = useMemo(() => uniqueRecords.reduce((acc, record) => {
         acc[record[schema.idAttribute]] = record.__uuid;
         return acc;
     }, {}), [uniqueRecords, schema.idAttribute]);
-    const rowSelection = (0, react_1.useMemo)(() => {
+    const rowSelection = useMemo(() => {
         return selectedIds.reduce((acc, id) => {
             acc[idMapping[id]] = true;
             return acc;
         }, {});
     }, [selectedIds, idMapping]);
-    const table = (0, react_table_1.useReactTable)({
+    const table = useReactTable({
         data: uniqueRecords,
         columns: tableColumns,
         getRowId: (row) => row.__uuid,
         enableRowSelection: true,
-        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+        getCoreRowModel: getCoreRowModel(),
         columnResizeMode: 'onChange',
         columnResizeDirection: 'ltr',
         onRowSelectionChange: () => {
@@ -136,29 +133,29 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
             sorting: sortingState,
         },
     });
-    const tableRef = (0, react_1.useRef)(table);
+    const tableRef = useRef(table);
     tableRef.current = table;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         tableRef.current.resetColumnSizing();
     }, [columns]);
     const rows = table.getRowModel().rows;
-    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+    const virtualizer = 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: () => 44,
         overscan: 30,
         paddingStart: 33,
     });
-    const tableElementRef = (0, react_1.useRef)(null);
+    const tableElementRef = useRef(null);
     const virtualItems = virtualizer.getVirtualItems();
     const virtualSize = virtualizer.getTotalSize();
-    const [isScrollNearBottom, setIsScrollNearBottom] = (0, react_1.useState)(false);
+    const [isScrollNearBottom, setIsScrollNearBottom] = useState(false);
     // callback to adjust the height of the pseudo element
-    const handlePseudoResize = (0, react_1.useCallback)(() => {
-        return (0, utils_1.adjustTableHeight)(tableElementRef, virtualSize);
+    const handlePseudoResize = useCallback(() => {
+        return adjustTableHeight(tableElementRef, virtualSize);
     }, [virtualSize]);
     // callback to handle scrolling, checking if we are near the bottom
-    const handleScroll = (0, react_1.useCallback)(() => {
+    const handleScroll = 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;
@@ -168,7 +165,7 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
     }, [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)(() => {
+    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;
         if (scrollable)
@@ -182,19 +179,19 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
     // if we are near the bottom of the table, resize the pseudo element each time
     // the length of virtual items changes (which is effectively the number of table
     // rows rendered to the DOM). This ensures we don't scroll too far or too short.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (isScrollNearBottom)
             handlePseudoResize();
     }, [isScrollNearBottom, virtualItems.length, handlePseudoResize]);
     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: () => {
+    return (_jsx("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: _jsxs(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: {
+            }, children: [_jsx("div", { style: {
                         paddingInline: noPadding ? 0 : 8,
                         position: 'relative',
-                    }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)(react_components_1.Table, { style: {
+                    }, ref: tableWrapperRef, children: _jsxs(Table, { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             borderCollapse: 'collapse',
@@ -203,27 +200,27 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
                             ['--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: {
+                        }, ref: tableElementRef, className: "table-pseduo", children: [_jsx(TableHeader, { style: {
                                     display: 'flex',
                                     position: 'sticky',
                                     top: 0,
-                                    background: react_components_1.tokens.colorNeutralBackground1,
+                                    background: tokens.colorNeutralBackground1,
                                     zIndex: 2,
-                                }, children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+                                }, children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { style: {
                                         position: 'sticky',
                                         top: 0,
                                         display: 'flex',
                                         minWidth: 'calc(100% - 16px)',
-                                        borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+                                        borderBottom: `${tokens.strokeWidthThin} solid ${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: {
+                                        : flexRender(header.column.columnDef.header, Object.assign(Object.assign({}, header.getContext()), { key: header.id }))) }, headerGroup.id))) }), _jsx(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, { "aria-selected": row.getIsSelected(), className: (0, react_components_1.mergeClasses)(styles.root), style: {
+                                    return (_jsx(TableRow, { "aria-selected": row.getIsSelected(), className: mergeClasses(styles.root), style: {
                                             display: 'flex',
                                             height: `${virtualRow.size}px`,
                                             minWidth: 'calc(100% - 16px)',
@@ -237,33 +234,32 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
                                         }, 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: {
+                                        }, children: row.getVisibleCells().map((cell) => flexRender(cell.column.columnDef.cell, Object.assign(Object.assign({}, cell.getContext()), { key: cell.column.id }))) }, row.id));
+                                }) }), dataState.isFetching && (_jsx(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: {
+                                }, children: Array.from({ length: 10 }).map((_, index) => (_jsx(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: {
+                                        return (_jsx(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: {
+                                            }, children: _jsx(SkeletonItem, { size: 16 }) }, column.id));
+                                    }) }, index))) }))] }) }), (data === null || data === void 0 ? void 0 : data.records.length) === 0 && !dataState.isFetching && (_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 })] }))] }) }));
+                        gap: tokens.spacingVerticalL,
+                        color: tokens.colorNeutralForeground3,
+                    }, children: [_jsx("div", { children: _jsx(Icons.Search, { size: 64 }) }), _jsx(Body1, { children: strings.noRecordsFound })] }))] }) }));
 };
-exports.GridTableContainer = GridTableContainer;

package/DataGrid/TableCell/TableCellAction.js

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableCellAction = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const icons_1 = require("@headless-adminapp/icons");
-const MenuList_1 = require("../../CommandBar/MenuList");
-const useStyles = (0, react_components_1.makeStyles)({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, makeStyles, Menu, MenuPopover, MenuTrigger, TableCell, tokens, } from '@fluentui/react-components';
+import { Icons } from '@headless-adminapp/icons';
+import { MenuList } from '../../CommandBar/MenuList';
+const useStyles = makeStyles({
     button: {
         '&:hover': {
-            background: react_components_1.tokens.colorNeutralBackground5,
+            background: tokens.colorNeutralBackground5,
         },
     },
 });
-const TableCellAction = ({ items, onOpen, }) => {
+export const TableCellAction = ({ items, onOpen, }) => {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { className: "tableCellAction", style: {
+    return (_jsx(TableCell, { className: "tableCellAction", style: {
             display: 'flex',
             padding: 0,
             // width: 32,
@@ -29,13 +26,12 @@ const TableCellAction = ({ items, onOpen, }) => {
             justifyContent: 'right',
             // background: 'white',
             // boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-            borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
-        }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "before-top", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}), onClick: onOpen, className: styles.button, style: {
+            borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
+        }, children: _jsxs(Menu, { positioning: "before-top", children: [_jsx(MenuTrigger, { children: _jsx(Button, { appearance: "transparent", icon: _jsx(Icons.MoreVertical, {}), onClick: onOpen, className: styles.button, style: {
                             // background: 'white',
                             // boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
                             boxShadow: 'var(--action-shadow)',
                             borderRadius: 0,
                             // background: tokens.colorNeutralBackground1,
-                        } }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }) }));
+                        } }) }), _jsx(MenuPopover, { children: _jsx(MenuList, { items: items }) })] }) }));
 };
-exports.TableCellAction = TableCellAction;

package/DataGrid/TableCell/TableCellBase.js

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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 }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableCell as TableCellInternal } from '@fluentui/react-components';
+export const TableCellBase = ({ children, onClick, style, }) => {
+    return (_jsx(TableCellInternal, { onClick: onClick, style: Object.assign({ display: 'flex', alignItems: 'center' }, style), children: children }));
 };
-exports.TableCellBase = TableCellBase;

package/DataGrid/TableCell/TableCellCheckbox.js

@@ -1,15 +1,12 @@
-"use strict";
-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 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) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox, TableCell } from '@fluentui/react-components';
+import { memo } from 'react';
+export const TableCellCheckbox = memo(({ checked, onChange }) => {
+    return (_jsx(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: _jsx(Checkbox, { checked: checked !== null && checked !== void 0 ? checked : false, onChange: (event) => {
                 event.stopPropagation();
                 onChange === null || onChange === void 0 ? void 0 : onChange(event);
             } }) }));
 });
-exports.TableCellCheckbox.displayName = 'TableCellCheckbox';
+TableCellCheckbox.displayName = 'TableCellCheckbox';

package/DataGrid/TableCell/TableCellChoice.js

@@ -1,31 +1,28 @@
-"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)(() => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tag } from '@fluentui/react-components';
+import { isColorDark } from '@headless-adminapp/app/utils/color';
+import { useMemo } from 'react';
+import { TableCellBase } from './TableCellBase';
+export function TableCellChoice(props) {
+    const bgColor = useMemo(() => {
         var _a;
         if (!props.value || !props.attribute.options) {
             return;
         }
         return (_a = props.attribute.options.find((option) => option.value === props.value)) === null || _a === void 0 ? void 0 : _a.color;
     }, [props.attribute.options, props.value]);
-    const color = (0, react_1.useMemo)(() => {
+    const color = useMemo(() => {
         if (!bgColor) {
             return;
         }
-        return (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
+        return isColorDark(bgColor) ? '#FFFFFF' : '#000000';
     }, [bgColor]);
-    return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
+    return (_jsx(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.Tag, { size: "small", style: { backgroundColor: bgColor, color }, children: props.formattedValue }) }));
+        }, children: _jsx(Tag, { size: "small", style: { backgroundColor: bgColor, color }, children: props.formattedValue }) }));
 }

package/DataGrid/TableCell/TableCellLink.d.ts

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

package/DataGrid/TableCell/TableCellLink.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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 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: {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link, TableCell, tokens } from '@fluentui/react-components';
+import { useRouter } from '@headless-adminapp/app/route/hooks';
+import { memo } from 'react';
+export const TableCellLink = memo(({ value, href, onClick, width, target }) => {
+    const router = useRouter();
+    return (_jsx(TableCell, { style: {
             textOverflow: 'ellipsis',
             overflow: 'hidden',
             whiteSpace: 'nowrap',
@@ -16,7 +13,7 @@ exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width, target
             maxWidth: width,
             display: 'flex',
             alignItems: 'center',
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, target: target, onClick: (event) => {
+        }, children: _jsx(Link, { as: "a", href: href, target: target, onClick: (event) => {
                 if (target === '_blank') {
                     return;
                 }
@@ -32,6 +29,10 @@ exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width, target
                     router.push(href);
                     event.preventDefault();
                 }
+            }, style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: tokens.spacingHorizontalXS,
             }, children: value }) }));
 });
-exports.TableCellLink.displayName = 'TableCellLink';
+TableCellLink.displayName = 'TableCellLink';

package/DataGrid/TableCell/TableCellText.js

@@ -1,11 +1,8 @@
-"use strict";
-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");
-exports.TableCellText = (0, react_1.memo)(({ value, width, textAlignment }) => {
-    return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { TableCellBase } from './TableCellBase';
+export const TableCellText = memo(({ value, width, textAlignment }) => {
+    return (_jsx(TableCellBase, { style: {
             textAlign: textAlignment || 'left',
             textOverflow: 'ellipsis',
             overflow: 'hidden',
@@ -20,10 +17,10 @@ exports.TableCellText = (0, react_1.memo)(({ value, width, textAlignment }) => {
             // display: 'flex',
             // alignItems: 'center',
             // borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: _jsx("div", { style: {
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 width: '100%',
             }, children: value }) }));
 });
-exports.TableCellText.displayName = 'TableCellText';
+TableCellText.displayName = 'TableCellText';

package/DataGrid/TableCell/index.js

@@ -1,20 +1,4 @@
-"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TableCellBase"), exports);
-__exportStar(require("./TableCellText"), exports);
-__exportStar(require("./TableCellAction"), exports);
-__exportStar(require("./TableCellCheckbox"), exports);
+export * from './TableCellBase';
+export * from './TableCellText';
+export * from './TableCellAction';
+export * from './TableCellCheckbox';

package/DataGrid/index.js

@@ -1,11 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridTableContainer = exports.GridPaginationContainer = exports.GridHeaderContainer = exports.CommandContainer = void 0;
-var CommandContainer_1 = require("./CommandContainer");
-Object.defineProperty(exports, "CommandContainer", { enumerable: true, get: function () { return CommandContainer_1.CommandContainer; } });
-var GridHeaderContainer_1 = require("./GridHeaderContainer");
-Object.defineProperty(exports, "GridHeaderContainer", { enumerable: true, get: function () { return GridHeaderContainer_1.GridHeaderContainer; } });
-var GridPaginationContainer_1 = require("./GridPaginationContainer");
-Object.defineProperty(exports, "GridPaginationContainer", { enumerable: true, get: function () { return GridPaginationContainer_1.GridPaginationContainer; } });
-var GridTableContainer_1 = require("./GridTableContainer");
-Object.defineProperty(exports, "GridTableContainer", { enumerable: true, get: function () { return GridTableContainer_1.GridTableContainer; } });
+export { CommandContainer } from './CommandContainer';
+export { GridHeaderContainer } from './GridHeaderContainer';
+export { GridPaginationContainer } from './GridPaginationContainer';
+export { GridTableContainer } from './GridTableContainer';

package/DataGrid/types.js

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