@headless-adminapp/fluent 1.4.17 → 1.4.19

package/App/AppHeaderContianer.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppHeaderContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const react_nav_preview_1 = require("@fluentui/react-nav-preview");
 const app_1 = require("@headless-adminapp/app/app");
 const hooks_1 = require("@headless-adminapp/app/auth/hooks");
 const useIsSkipAuthCheck_1 = require("@headless-adminapp/app/auth/hooks/useIsSkipAuthCheck");
@@ -28,7 +27,7 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
 exports.AppHeaderContainer = AppHeaderContainer;
 const NavHamburger = ({ onNavToggle }) => {
     const isMobile = (0, hooks_2.useIsMobile)();
-    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.Hamburger, { style: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Hamburger, { style: {
             color: 'inherit',
             width: !isMobile ? 44 : undefined,
             maxWidth: !isMobile ? 44 : undefined,
@@ -37,7 +36,7 @@ const NavHamburger = ({ onNavToggle }) => {
 const NavBackButton = () => {
     const isMobile = (0, hooks_2.useIsMobile)();
     const router = (0, route_1.useRouter)();
-    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.Hamburger, { style: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Hamburger, { style: {
             color: 'inherit',
             width: !isMobile ? 44 : undefined,
             maxWidth: !isMobile ? 44 : undefined,

package/App/Navigation/NavCategoryItemComponent.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavCategoryItemComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const react_nav_preview_1 = require("@fluentui/react-nav-preview");
 const icons_1 = require("@headless-adminapp/icons");
 const useStyles = (0, react_components_1.makeStyles)({
     activeNavCategoryItem: {
@@ -15,6 +14,6 @@ const useStyles = (0, react_components_1.makeStyles)({
 const NavCategoryItemComponent = ({ item, isActive, }) => {
     const styles = useStyles();
     const Icon = item.Icon ?? icons_1.IconPlaceholder;
-    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavCategoryItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { filled: isActive, color: isActive ? 'var(--colorNeutralForeground2BrandSelected)' : undefined }), className: isActive ? styles.activeNavCategoryItem : undefined, children: item.label }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.NavCategoryItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { filled: isActive, color: isActive ? 'var(--colorNeutralForeground2BrandSelected)' : undefined }), className: isActive ? styles.activeNavCategoryItem : undefined, children: item.label }));
 };
 exports.NavCategoryItemComponent = NavCategoryItemComponent;

package/App/Navigation/NavItemComponent.js

@@ -3,11 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavItemComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const react_nav_preview_1 = require("@fluentui/react-nav-preview");
 const usePrefetch_1 = require("./usePrefetch");
 const NavItemComponent = ({ item, onClick, isMini, }) => {
     (0, usePrefetch_1.usePrefetch)(item);
-    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: item.link, onClick: (event) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.NavItem, { href: item.link, onClick: (event) => {
             event.preventDefault();
             onClick(item);
         }, style: {

package/App/Navigation/NavSubItemComponent.js

@@ -3,11 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavSubItemComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const react_nav_preview_1 = require("@fluentui/react-nav-preview");
 const usePrefetch_1 = require("./usePrefetch");
 const NavSubItemComponent = ({ item, onClick, }) => {
     (0, usePrefetch_1.usePrefetch)(item);
-    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSubItem, { href: item.link, onClick: (event) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.NavSubItem, { href: item.link, onClick: (event) => {
             event.preventDefault();
             onClick(item);
         }, style: {

package/App/Navigation/NavigationContainer.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const react_nav_preview_1 = require("@fluentui/react-nav-preview");
 const app_1 = require("@headless-adminapp/app/app");
 const locale_1 = require("@headless-adminapp/app/locale");
 const hooks_1 = require("@headless-adminapp/app/route/hooks");
@@ -58,17 +57,17 @@ const NavigationContainer = ({ open, type, onOpenChange, isMini, }) => {
             router.push(item.link);
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", selectedCategoryValue: "active", defaultOpenCategories: ['active'], open: open || isMini, type: type, onOpenChange: (_value, data) => onOpenChange(data.open), onNavItemSelect: () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_components_1.NavDrawer, { selectedValue: "active", selectedCategoryValue: "active", defaultOpenCategories: ['active'], open: open || isMini, type: type, onOpenChange: (_value, data) => onOpenChange(data.open), onNavItemSelect: () => {
                 // do nothing
-            }, style: { width: isMini ? 60 : undefined }, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: {
+            }, style: { width: isMini ? 60 : undefined }, children: (0, jsx_runtime_1.jsx)(react_components_1.NavDrawerBody, { style: {
                     paddingTop: 8,
-                }, children: sections.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!section.hideLabel && !isMini && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: section.label })), isMini && index > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }) })), section.items.map((item) => {
+                }, children: sections.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!section.hideLabel && !isMini && ((0, jsx_runtime_1.jsx)(react_components_1.NavSectionHeader, { children: section.label })), isMini && index > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }) })), section.items.map((item) => {
                             if (item.type === app_2.PageType.Category) {
                                 const isActive = item.items.some((subItem) => subItem.active);
                                 if (isMini) {
                                     return ((0, jsx_runtime_1.jsx)(NavMiniCategoryMenu_1.NavMiniCategoryMenu, { isActive: isActive, item: item, onSelect: handleNavigation }, item.key));
                                 }
-                                return ((0, jsx_runtime_1.jsxs)(react_nav_preview_1.NavCategory, { value: isActive ? 'active' : '', children: [(0, jsx_runtime_1.jsx)(NavCategoryItemComponent_1.NavCategoryItemComponent, { item: item, isActive: isActive }), (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSubItemGroup, { children: item.items.map((subItem) => ((0, jsx_runtime_1.jsx)(NavSubItemComponent_1.NavSubItemComponent, { item: subItem, onClick: handleNavigation }, subItem.key))) })] }, item.key));
+                                return ((0, jsx_runtime_1.jsxs)(react_components_1.NavCategory, { value: isActive ? 'active' : '', children: [(0, jsx_runtime_1.jsx)(NavCategoryItemComponent_1.NavCategoryItemComponent, { item: item, isActive: isActive }), (0, jsx_runtime_1.jsx)(react_components_1.NavSubItemGroup, { children: item.items.map((subItem) => ((0, jsx_runtime_1.jsx)(NavSubItemComponent_1.NavSubItemComponent, { item: subItem, onClick: handleNavigation }, subItem.key))) })] }, item.key));
                             }
                             return ((0, jsx_runtime_1.jsx)(NavItemComponent_1.NavItemComponent, { item: item, onClick: handleNavigation, isMini: isMini }, item.key));
                         })] }, section.label))) }) }) }));

package/DataGrid/GridPaginationContainer.js

@@ -3,17 +3,70 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridPaginationContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+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 react_1 = require("react");
+const formatters_1 = require("../Insights/charts/formatters");
 const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
 const GridPaginationContainer = () => {
     const data = (0, hooks_1.useGridData)();
     const [selectedIds] = (0, hooks_1.useGridSelection)();
     const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_components_1.Body1, { style: {
-                color: react_components_1.tokens.colorNeutralForeground3,
-                display: 'flex',
-                gap: 8,
-            }, 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] })] }))] }) }));
+    const locale = (0, locale_1.useLocale)();
+    const leftSideItems = [];
+    const rightSideItems = [];
+    leftSideItems.push({
+        label: strings.records,
+        value: data?.count ?? '-',
+    });
+    leftSideItems.push({
+        label: strings.loaded,
+        value: data?.records.length ?? '-',
+    });
+    if (data?.count && selectedIds.length) {
+        leftSideItems.push({
+            label: strings.selected,
+            value: selectedIds.length,
+        });
+    }
+    const range = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.cellSelectionRange);
+    const gridColumns = (0, hooks_1.useGridColumns)();
+    const schema = (0, hooks_1.useDataGridSchema)();
+    if (range &&
+        range.start.column === range.end.column &&
+        range.start.row !== range.end.row) {
+        const startRowIndex = Math.min(range.start.row, range.end.row);
+        const endRowIndex = Math.max(range.start.row, range.end.row);
+        const columnIndex = range.start.column;
+        const column = gridColumns[columnIndex];
+        const attribute = schema.attributes[column.name];
+        rightSideItems.push({
+            label: 'Count',
+            value: endRowIndex - startRowIndex + 1,
+        });
+        if (attribute.type === 'money') {
+            const total = data?.records
+                .slice(startRowIndex, endRowIndex + 1)
+                .reduce((sum, record) => {
+                return sum + (record[column.name] ?? 0);
+            }, 0);
+            rightSideItems.push({
+                label: 'Sum',
+                value: (0, formatters_1.formatCurrency)(locale, total),
+            });
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                    color: react_components_1.tokens.colorNeutralForeground3,
+                    display: 'flex',
+                    gap: 8,
+                }, children: leftSideItems.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)("span", { children: "|" }), (0, jsx_runtime_1.jsxs)("span", { children: [item.label, ": ", item.value] })] }, index))) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                    color: react_components_1.tokens.colorNeutralForeground3,
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: 8,
+                }, children: rightSideItems.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)("span", { children: "|" }), (0, jsx_runtime_1.jsxs)("span", { children: [item.label, ": ", item.value] })] }, index))) })] }));
 };
 exports.GridPaginationContainer = GridPaginationContainer;

package/DataGrid/GridTableContainer.js

@@ -16,6 +16,7 @@ const react_1 = require("react");
 const uuid_1 = require("uuid");
 const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
 const constants_1 = require("./constants");
+const useDataGridKeyboardEvent_1 = require("./useDataGridKeyboardEvent");
 const useTableColumns_1 = require("./useTableColumns");
 const utils_1 = require("./utils");
 const useStyles = (0, react_components_1.makeStyles)({
@@ -199,6 +200,7 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         if (isScrollNearBottom)
             handlePseudoResize();
     }, [isScrollNearBottom, virtualItems.length, handlePseudoResize]);
+    (0, useDataGridKeyboardEvent_1.useDataGridKeyboardEvent)(tableElementRef);
     const isScrolledToRight = tableWrapperRef.current?.parentElement?.parentElement?.scrollLeft ===
         (tableWrapperRef.current?.parentElement?.parentElement?.scrollWidth ?? 0) -
             (tableWrapperRef.current?.parentElement?.parentElement?.clientWidth ?? 0);
@@ -217,7 +219,8 @@ 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: {
+                            userSelect: 'none',
+                        }, ref: tableElementRef, tabIndex: 0, className: "table-pseduo", children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
                                     display: 'flex',
                                     position: 'sticky',
                                     top: 0,

package/DataGrid/TableCell/TableCellChoice.d.ts

@@ -1,4 +1,5 @@
 import { ChoiceAttribute } from '@headless-adminapp/core/attributes';
+import { FC } from 'react';
 import { CellDisplayType } from './TableCellBase';
 interface TableCellChoiceProps {
     value: unknown;
@@ -8,4 +9,10 @@ interface TableCellChoiceProps {
     display?: CellDisplayType;
 }
 export declare function TableCellChoice(props: Readonly<TableCellChoiceProps>): import("react/jsx-runtime").JSX.Element;
+interface TableCellChoiceContentProps {
+    attribute: ChoiceAttribute<string | number>;
+    formattedValue: string;
+    value: unknown;
+}
+export declare const TableCellChoiceContent: FC<TableCellChoiceContentProps>;
 export {};

package/DataGrid/TableCell/TableCellChoice.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellChoiceContent = void 0;
 exports.TableCellChoice = TableCellChoice;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ChoiceBadge_1 = require("../../components/ChoiceBadge");
@@ -12,5 +13,9 @@ function TableCellChoice(props) {
             width: props.width,
             minWidth: props.width,
             maxWidth: props.width,
-        }, display: props.display, children: (0, jsx_runtime_1.jsx)(ChoiceBadge_1.ChoiceBadge, { attribute: props.attribute, formattedValue: props.formattedValue, value: props.value }) }));
+        }, display: props.display, children: (0, jsx_runtime_1.jsx)(exports.TableCellChoiceContent, { attribute: props.attribute, formattedValue: props.formattedValue, value: props.value }) }));
 }
+const TableCellChoiceContent = (props) => {
+    return ((0, jsx_runtime_1.jsx)(ChoiceBadge_1.ChoiceBadge, { attribute: props.attribute, formattedValue: props.formattedValue, value: props.value }));
+};
+exports.TableCellChoiceContent = TableCellChoiceContent;

package/DataGrid/TableCell/TableCellLink.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { CellDisplayType } from './TableCellBase';
 export interface TableCellLinkProps {
     value: React.ReactNode | undefined | null;
@@ -9,3 +9,10 @@ export interface TableCellLinkProps {
     display?: CellDisplayType;
 }
 export declare const TableCellLink: FC<TableCellLinkProps>;
+interface TableCellLinkContentProps {
+    target?: string;
+    href?: string;
+    onClick?: () => void;
+}
+export declare const TableCellLinkContent: FC<PropsWithChildren<TableCellLinkContentProps>>;
+export {};

package/DataGrid/TableCell/TableCellLink.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableCellLink = void 0;
+exports.TableCellLinkContent = 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, display = 'flex' }) => {
-    const router = (0, hooks_1.useRouter)();
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
             textOverflow: 'ellipsis',
             overflow: 'hidden',
@@ -17,26 +16,31 @@ exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width, target
             display,
             alignItems: 'center',
             height: '100%',
-        }, 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;
-                }
-                if (onClick) {
-                    event.preventDefault();
-                    onClick();
-                    return;
-                }
-                if (href?.startsWith('/')) {
-                    router.push(href);
-                    event.preventDefault();
-                }
-            }, style: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: react_components_1.tokens.spacingHorizontalXS,
-            }, children: value }) }));
+        }, children: (0, jsx_runtime_1.jsx)(exports.TableCellLinkContent, { target: target, href: href, onClick: onClick, children: value }) }));
 });
 exports.TableCellLink.displayName = 'TableCellLink';
+const TableCellLinkContent = ({ children, target, href, onClick }) => {
+    const router = (0, hooks_1.useRouter)();
+    return ((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;
+            }
+            if (onClick) {
+                event.preventDefault();
+                onClick();
+                return;
+            }
+            if (href?.startsWith('/')) {
+                router.push(href);
+                event.preventDefault();
+            }
+        }, style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: react_components_1.tokens.spacingHorizontalXS,
+        }, children: children }));
+};
+exports.TableCellLinkContent = TableCellLinkContent;

package/DataGrid/TableCell/TableCellText.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { CellDisplayType } from './TableCellBase';
 export interface TableCellTextProps {
     value: string;
@@ -7,3 +7,4 @@ export interface TableCellTextProps {
     display?: CellDisplayType;
 }
 export declare const TableCellText: FC<TableCellTextProps>;
+export declare const TableCellTextContent: FC<PropsWithChildren>;

package/DataGrid/TableCell/TableCellText.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableCellText = void 0;
+exports.TableCellTextContent = exports.TableCellText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const TableCellBase_1 = require("./TableCellBase");
@@ -10,20 +10,17 @@ exports.TableCellText = (0, react_1.memo)(({ value, width, textAlignment, displa
             textOverflow: 'ellipsis',
             overflow: 'hidden',
             whiteSpace: 'nowrap',
-            // maxWidth: 50,
-            // width: 50,
-            // width: '100%',
             width,
             minWidth: width,
             maxWidth: width,
-            // minWidth: 200,
-            // 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 }) }));
+        }, children: (0, jsx_runtime_1.jsx)(exports.TableCellTextContent, { children: value }) }));
 });
 exports.TableCellText.displayName = 'TableCellText';
+const TableCellTextContent = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '100%',
+        }, children: children }));
+};
+exports.TableCellTextContent = TableCellTextContent;

package/DataGrid/TableCell/TableCellWrapper.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+interface TableCellWrapperProps {
+    rowIndex: number;
+    columnIndex: number;
+    textAlignment?: 'left' | 'center' | 'right';
+    width?: number;
+}
+export declare const TableCellWrapper: FC<PropsWithChildren<TableCellWrapperProps>>;
+export {};

package/DataGrid/TableCell/TableCellWrapper.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+function isCellSelected(rowIndex, columnIndex, range) {
+    if (rowIndex < 0 || columnIndex < 0) {
+        return false;
+    }
+    const rowStart = Math.min(range.start.row, range.end.row);
+    const rowEnd = Math.max(range.start.row, range.end.row);
+    const columnStart = Math.min(range.start.column, range.end.column);
+    const columnEnd = Math.max(range.start.column, range.end.column);
+    return (rowStart <= rowIndex &&
+        rowEnd >= rowIndex &&
+        columnStart <= columnIndex &&
+        columnEnd >= columnIndex);
+}
+const TableCellWrapper = ({ children, rowIndex, columnIndex, textAlignment, width, }) => {
+    const range = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.cellSelectionRange);
+    const setValue = (0, mutable_1.useContextSetValue)(datagrid_1.GridContext);
+    const selectionInfo = (0, react_1.useMemo)(() => {
+        if (!range)
+            return;
+        const isSelectedCell = isCellSelected(rowIndex, columnIndex, range);
+        if (!isSelectedCell)
+            return;
+        const isLeftCellSelected = isCellSelected(rowIndex, columnIndex - 1, range);
+        const isRightCellSelected = isCellSelected(rowIndex, columnIndex + 1, range);
+        const isAboveCellSelected = isCellSelected(rowIndex - 1, columnIndex, range);
+        const isBelowCellSelected = isCellSelected(rowIndex + 1, columnIndex, range);
+        return {
+            selected: isSelectedCell,
+            left: !isLeftCellSelected,
+            right: !isRightCellSelected,
+            top: !isAboveCellSelected,
+            bottom: !isBelowCellSelected,
+        };
+    }, [range, rowIndex, columnIndex]);
+    return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%',
+            textAlign: textAlignment ?? 'left',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            width,
+            minWidth: width,
+            maxWidth: width,
+            ...(0, utils_1.getSelectedCellStyle)(selectionInfo),
+        }, onMouseDown: (e) => {
+            if (e.button !== 0)
+                return; // Only handle left mouse button
+            if (e.shiftKey && range) {
+                // change end
+                setValue({
+                    cellSelectionRange: {
+                        start: range.start,
+                        end: { row: rowIndex, column: columnIndex },
+                        active: true,
+                    },
+                });
+            }
+            else {
+                setValue({
+                    cellSelectionRange: {
+                        start: { row: rowIndex, column: columnIndex },
+                        end: { row: rowIndex, column: columnIndex },
+                        active: true,
+                    },
+                });
+            }
+        }, onMouseEnter: (e) => {
+            if (range?.active) {
+                setValue({
+                    cellSelectionRange: {
+                        start: range.start,
+                        end: { row: rowIndex, column: columnIndex },
+                        active: true,
+                    },
+                });
+            }
+        }, children: children }));
+};
+exports.TableCellWrapper = TableCellWrapper;

package/DataGrid/TableCell/utils.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+export interface SelectionInfo {
+    selected?: boolean;
+    left?: boolean;
+    right?: boolean;
+    top?: boolean;
+    bottom?: boolean;
+}
+export declare function getSelectedCellStyle(info: SelectionInfo | undefined): Pick<CSSProperties, "backgroundColor" | "boxShadow"> | undefined;

package/DataGrid/TableCell/utils.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectedCellStyle = getSelectedCellStyle;
+const react_components_1 = require("@fluentui/react-components");
+function getSelectedCellStyle(info) {
+    if (!info)
+        return;
+    const styles = {};
+    if (info.selected) {
+        styles.backgroundColor = `color-mix(in srgb, ${react_components_1.tokens.colorBrandBackground2} 60%, transparent)`;
+    }
+    const shadows = [];
+    if (info.left) {
+        shadows.push(`inset 1px 0 0 ${react_components_1.tokens.colorBrandStroke1}`);
+    }
+    if (info.right) {
+        shadows.push(`inset -1px 0 0 ${react_components_1.tokens.colorBrandStroke1}`);
+    }
+    if (info.top) {
+        shadows.push(`inset 0 1px 0 ${react_components_1.tokens.colorBrandStroke1}`);
+    }
+    if (info.bottom) {
+        shadows.push(`inset 0 -1px 0 ${react_components_1.tokens.colorBrandStroke1}`);
+    }
+    if (shadows.length > 0) {
+        styles.boxShadow = shadows.join(', ');
+    }
+    return styles;
+}

package/DataGrid/useDataGridKeyboardEvent.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useDataGridKeyboardEvent(tableElementRef: RefObject<HTMLTableElement>): void;

package/DataGrid/useDataGridKeyboardEvent.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataGridKeyboardEvent = useDataGridKeyboardEvent;
+const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const locale_1 = require("@headless-adminapp/app/locale");
+const metadata_1 = require("@headless-adminapp/app/metadata");
+const utils_1 = require("@headless-adminapp/app/utils");
+const react_1 = require("react");
+function useDataGridKeyboardEvent(tableElementRef) {
+    const context = (0, react_1.useContext)(datagrid_1.GridContext);
+    const locale = (0, locale_1.useLocale)();
+    const { schemaStore } = (0, metadata_1.useMetadata)();
+    (0, react_1.useEffect)(() => {
+        const contextValue = context.value;
+        const isTableActive = function () {
+            if (!tableElementRef.current)
+                return;
+            let activeElement = document.activeElement;
+            while (activeElement && activeElement !== tableElementRef.current) {
+                activeElement = activeElement?.parentElement;
+            }
+            return activeElement === tableElementRef.current;
+        };
+        const handleCopy = async (e) => {
+            const range = contextValue.current.cellSelectionRange;
+            const data = contextValue.current.data;
+            const gridColumns = contextValue.current.columns;
+            const schema = contextValue.current.schema;
+            if (!range) {
+                return;
+            }
+            if (!isTableActive()) {
+                return;
+            }
+            e.preventDefault();
+            const startRowIndex = Math.min(range.start.row, range.end.row);
+            const endRowIndex = Math.max(range.start.row, range.end.row);
+            const startColumnIndex = Math.min(range.start.column, range.end.column);
+            const endColumnIndex = Math.max(range.start.column, range.end.column);
+            const lineItems = [];
+            for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
+                const rowItems = [];
+                for (let colIndex = startColumnIndex; colIndex <= endColumnIndex; colIndex++) {
+                    const column = gridColumns[colIndex];
+                    let attribute = schema.attributes[column.name];
+                    let value = data?.records[rowIndex]?.[column.name];
+                    if (column.expandedKey) {
+                        const lookup = column.name;
+                        const field = column.expandedKey;
+                        const entity = schema.attributes[lookup]
+                            .entity;
+                        const lookupSchema = schemaStore.getSchema(entity);
+                        attribute = lookupSchema.attributes[field];
+                        value = data?.records[rowIndex]?.$expand?.[lookup]?.[field];
+                    }
+                    const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value, locale);
+                    rowItems.push(formattedValue ?? '');
+                }
+                lineItems.push(rowItems.join('\t'));
+            }
+            await navigator.clipboard.writeText(lineItems.join('\n'));
+        };
+        const handleSelectAll = (e) => {
+            if (!contextValue.current.data?.records.length) {
+                return;
+            }
+            if (!isTableActive()) {
+                return;
+            }
+            e.preventDefault();
+            context.setValue({
+                cellSelectionRange: {
+                    start: { row: 0, column: 0 },
+                    end: {
+                        row: contextValue.current.data.records.length - 1,
+                        column: contextValue.current.columns.length - 1,
+                    },
+                    active: false,
+                },
+            });
+        };
+        const handleKeyDown = async (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
+                await handleCopy(e);
+            }
+            else if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+                handleSelectAll(e);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [tableElementRef, context, locale, schemaStore]);
+}

package/DataGrid/useTableColumns.d.ts

@@ -1,10 +1,6 @@
-import { TransformedViewColumn } from '@headless-adminapp/app/datagrid';
 import { InternalRouteResolver, RouterInstance } from '@headless-adminapp/app/route/context';
 import { LookupAttribute } from '@headless-adminapp/core/attributes';
-import { SchemaAttributes } from '@headless-adminapp/core/schema';
 import { ISchemaStore } from '@headless-adminapp/core/store';
-import { CellContext } from '@tanstack/react-table';
-import { CellDisplayType } from './TableCell';
 import { UniqueRecord } from './types';
 export declare function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }: {
     disableSelection?: boolean;
@@ -14,14 +10,11 @@ export declare function useTableColumns({ disableSelection, disableContextMenu,
     disableColumnSort?: boolean;
     tableWrapperRef: React.RefObject<HTMLDivElement>;
 }): import("@tanstack/react-table").AccessorFnColumnDef<UniqueRecord, unknown>[];
-export declare function renderLookupAttribute({ value, info, column, schemaStore, routeResolver, router, attribute, formattedValue, display, }: {
+export declare function renderLookupAttribute({ value, schemaStore, routeResolver, router, attribute, formattedValue, }: {
     value: unknown;
-    info?: CellContext<UniqueRecord, unknown>;
-    column?: TransformedViewColumn<SchemaAttributes>;
     schemaStore: ISchemaStore;
     routeResolver: InternalRouteResolver;
     router: RouterInstance;
     attribute: LookupAttribute;
     formattedValue: string;
-    display?: CellDisplayType;
 }): import("react/jsx-runtime").JSX.Element;

package/DataGrid/useTableColumns.js

@@ -24,6 +24,7 @@ const GridColumnHeader_1 = require("./GridColumnHeader");
 const TableCell_1 = require("./TableCell");
 const TableCellChoice_1 = require("./TableCell/TableCellChoice");
 const TableCellLink_1 = require("./TableCell/TableCellLink");
+const TableCellWrapper_1 = require("./TableCell/TableCellWrapper");
 const columnHelper = (0, react_table_1.createColumnHelper)();
 const useStyles = (0, react_components_1.makeStyles)({
     selectionCell: {
@@ -88,6 +89,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const router = (0, hooks_4.useRouter)();
     const openRecord = (0, useOpenRecord_1.useOpenRecord)();
     const locale = (0, locale_1.useLocale)();
+    const setValue = (0, mutable_1.useContextSetValue)(datagrid_1.GridContext);
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
     const headingSelectionState = (0, react_1.useMemo)(() => {
@@ -124,6 +126,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                 cell: (info) => ((0, jsx_runtime_1.jsx)(ActionCell_1.ActionCell, { onOpen: () => {
                         const id = info.row.original[schema.idAttribute];
                         setSelectedIdsRef.current([id]);
+                        setValue({ cellSelectionRange: null });
                     }, mutableState: mutableContextCommandState })),
                 enableResizing: false,
                 size: 32,
@@ -145,6 +148,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                 }
                 return getAllIds();
             });
+            setValue({ cellSelectionRange: null });
         }
         function excludeId(ids, id) {
             return ids.filter((i) => i !== id);
@@ -157,6 +161,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                 }
                 return [...ids, id];
             });
+            setValue({ cellSelectionRange: null });
         }
         return [
             columnHelper.accessor((info) => info[schema.idAttribute], {
@@ -193,6 +198,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         headingSelectionState,
         schema.idAttribute,
         styles.selectionCell,
+        setValue,
     ]);
     const restColumns = (0, react_1.useMemo)(() => {
         return gridColumns.map((column, index) => {
@@ -228,6 +234,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                     primaryAttributeName: schema.primaryAttribute,
                     idAttributeName: schema.idAttribute,
                     avatarAttributeName: schema.avatarAttribute,
+                    disableSelection,
                 }),
                 enableResizing: true,
                 size: columnWidths[index],
@@ -248,6 +255,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         routeResolver,
         openRecord,
         router,
+        disableSelection,
     ]);
     return (0, react_1.useMemo)(() => {
         return [...selectionColumns, ...restColumns, ...actionColumns];
@@ -256,7 +264,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
 function renderCellHeaderContent({ column, props, disableColumnResize, disableColumnFilter, disableColumnSort, onChangeSortDirection, }) {
     return ((0, jsx_runtime_1.jsx)(GridColumnHeader_1.TableHeaderFilterCell, { sortDirection: props.column.getIsSorted(), minWidth: props.header.getSize(), column: column, resizable: !disableColumnResize, disableFilter: disableColumnFilter, disableSort: disableColumnSort, onChangeSortDirection: onChangeSortDirection, onResetSize: props.column.resetSize, resizeHandler: props.header.getResizeHandler(), children: column.label }, column.id));
 }
-function renderCellContent({ info, column, attributes, schemaStore, locale, routeResolver, openRecord, router, primaryAttributeName, idAttributeName, avatarAttributeName, }) {
+function renderCellContent({ info, column, attributes, schemaStore, locale, routeResolver, openRecord, router, primaryAttributeName, idAttributeName, avatarAttributeName, disableSelection, }) {
     let attribute;
     let value;
     if (column.expandedKey) {
@@ -272,8 +280,10 @@ function renderCellContent({ info, column, attributes, schemaStore, locale, rout
         value = info.getValue();
     }
     const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) ?? '';
+    const rowIndex = info.row.index;
+    const columnIndex = info.column.getIndex() + (disableSelection ? 0 : -1);
     if (column.plainText) {
-        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
+        return ((0, jsx_runtime_1.jsx)(TableCellWrapper_1.TableCellWrapper, { width: info.column.getSize(), rowIndex: rowIndex, columnIndex: columnIndex, children: (0, jsx_runtime_1.jsx)(TableCell_1.TableCellTextContent, { children: formattedValue }) }, column.id));
     }
     if (column.component) {
         let Component;
@@ -303,77 +313,75 @@ function renderCellContent({ info, column, attributes, schemaStore, locale, rout
             idAttributeName,
             avatarAttributeName,
             value: value,
+            rowIndex,
+            columnIndex,
         });
     }
     switch (attribute?.type) {
         case 'money':
         case 'number':
-            return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize(), textAlignment: attribute.type === 'number' &&
+            return ((0, jsx_runtime_1.jsx)(TableCellWrapper_1.TableCellWrapper, { width: info.column.getSize(), rowIndex: rowIndex, columnIndex: columnIndex, textAlignment: attribute.type === 'number' &&
                     ['duration', 'time'].includes(attribute.format)
                     ? 'left'
-                    : 'right' }, column.id));
+                    : 'right', children: (0, jsx_runtime_1.jsx)(TableCell_1.TableCellTextContent, { children: formattedValue }) }, column.id));
         case 'lookup': {
-            return renderLookupAttribute({
-                info,
-                column,
-                schemaStore,
-                routeResolver,
-                router,
-                value,
-                attribute,
-                formattedValue,
-            });
+            return ((0, jsx_runtime_1.jsx)(TableCellWrapper_1.TableCellWrapper, { width: info?.column.getSize(), rowIndex: rowIndex, columnIndex: columnIndex, children: renderLookupAttribute({
+                    schemaStore,
+                    routeResolver,
+                    router,
+                    value,
+                    attribute,
+                    formattedValue,
+                }) }, column?.id));
         }
         case 'regarding': {
-            return renderRegardingAttribute({
-                info,
-                column,
-                schemaStore,
-                routeResolver,
-                router,
-                value,
-                attribute,
-                formattedValue,
-            });
+            return ((0, jsx_runtime_1.jsx)(TableCellWrapper_1.TableCellWrapper, { width: info?.column.getSize(), rowIndex: rowIndex, columnIndex: columnIndex, children: renderRegardingAttribute({
+                    schemaStore,
+                    routeResolver,
+                    router,
+                    value,
+                    attribute,
+                    formattedValue,
+                }) }, column?.id));
         }
         case 'attachment': {
             const url = value?.url;
             if (!url) {
-                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+                return ((0, jsx_runtime_1.jsx)(TableCellWrapper_1.TableCellWrapper, { width: info.column.getSize(), rowIndex: rowIndex, columnIndex: columnIndex, children: (0, jsx_runtime_1.jsx)(TableCell_1.TableCellTextContent, {}) }, column.id));
             }
-            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: url, target: "_blank" }, column.id));
+            return ((0, jsx_runtime_1.jsxs)(TableCellWrapper_1.TableCellWrapper, { width: info.column.getSize(), rowIndex: rowIndex, columnIndex: columnIndex, children: [(0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLinkContent, { href: url, target: "_blank" }), formattedValue] }, column.id));
         }
         case 'choice':
-            return ((0, jsx_runtime_1.jsx)(TableCellChoice_1.TableCellChoice, { value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
+            return ((0, jsx_runtime_1.jsx)(TableCellWrapper_1.TableCellWrapper, { width: info.column.getSize(), rowIndex: rowIndex, columnIndex: columnIndex, children: (0, jsx_runtime_1.jsx)(TableCellChoice_1.TableCellChoiceContent, { value: value, attribute: attribute, formattedValue: formattedValue }) }, column.id));
     }
     if (attribute.type === 'string' && attribute.format === 'phone') {
         const parsedNumber = (0, phone_1.parsePhoneNumber)(value, locale.region);
         if (parsedNumber.isValid && parsedNumber.uri) {
-            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: parsedNumber.uri }, column.id));
+            return ((0, jsx_runtime_1.jsx)(TableCellWrapper_1.TableCellWrapper, { width: info.column.getSize(), rowIndex: rowIndex, columnIndex: columnIndex, children: (0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLinkContent, { href: parsedNumber.uri, children: formattedValue }) }, column.id));
         }
     }
     if (attribute.type === 'string' &&
         attribute.format === 'email' &&
         value &&
         typeof value === 'string') {
-        return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: `mailto:${value}` }, column.id));
+        return ((0, jsx_runtime_1.jsx)(TableCellWrapper_1.TableCellWrapper, { width: info.column.getSize(), rowIndex: rowIndex, columnIndex: columnIndex, children: (0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLinkContent, { href: `mailto:${value}`, children: formattedValue }) }, column.id));
     }
-    return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
+    return ((0, jsx_runtime_1.jsx)(TableCellWrapper_1.TableCellWrapper, { width: info.column.getSize(), rowIndex: rowIndex, columnIndex: columnIndex, children: (0, jsx_runtime_1.jsx)(TableCell_1.TableCellTextContent, { children: formattedValue }) }, column.id));
 }
-function renderPrimaryAttribute({ info, column, attributes, routeResolver, openRecord, value, idAttributeName, avatarAttributeName, }) {
+function renderPrimaryAttribute({ info, column, attributes, routeResolver, openRecord, value, idAttributeName, avatarAttributeName, rowIndex, columnIndex, }) {
     const path = routeResolver({
         logicalName: info.row.original.$entity,
         type: app_1.PageType.EntityForm,
         id: info.row.original[idAttributeName],
     });
-    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [renderPrimaryAttributeAvatar({
-                    info,
-                    value,
-                    avatarAttributeName,
-                    attributes,
-                }), value] }), width: info.column.getSize(), href: path, onClick: () => {
-            openRecord?.(info.row.original[idAttributeName], info.row.original.$entity);
-        } }, column.id));
+    return ((0, jsx_runtime_1.jsx)(TableCellWrapper_1.TableCellWrapper, { width: info.column.getSize(), rowIndex: rowIndex, columnIndex: columnIndex, children: (0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLinkContent, { href: path, onClick: () => {
+                openRecord?.(info.row.original[idAttributeName], info.row.original.$entity);
+            }, children: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [renderPrimaryAttributeAvatar({
+                        info,
+                        value,
+                        avatarAttributeName,
+                        attributes,
+                    }), value] }) }) }, column.id));
 }
 function renderPrimaryAttributeAvatar({ info, value, avatarAttributeName, attributes, }) {
     if (!avatarAttributeName) {
@@ -392,9 +400,9 @@ function renderPrimaryAttributeAvatar({ info, value, avatarAttributeName, attrib
             src: avatarValue?.url,
         } }));
 }
-function renderLookupAttribute({ value, info, column, schemaStore, routeResolver, router, attribute, formattedValue, display, }) {
+function renderLookupAttribute({ value, schemaStore, routeResolver, router, attribute, formattedValue, }) {
     if (!value) {
-        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info?.column.getSize(), display: display }, column?.id));
+        return (0, jsx_runtime_1.jsx)(TableCell_1.TableCellTextContent, {});
     }
     const lookupSchema = schemaStore.getSchema(attribute.entity);
     const path = routeResolver({
@@ -402,23 +410,23 @@ function renderLookupAttribute({ value, info, column, schemaStore, routeResolver
         type: app_1.PageType.EntityForm,
         id: value.id,
     });
-    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { display: display, value: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!!lookupSchema.avatarAttribute && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
+    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLinkContent, { href: path, onClick: () => {
+            router.push(path);
+        }, children: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!!lookupSchema.avatarAttribute && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
                         width: 24,
                         height: 24,
                         fontSize: react_components_1.tokens.fontSizeBase100,
                     }, name: formattedValue, color: (0, avatar_1.getAvatarColor)(formattedValue), image: {
                         src: value.avatar,
-                    } })), formattedValue] }), width: info?.column.getSize(), href: path, onClick: () => {
-            router.push(path);
-        } }, column?.id));
+                    } })), formattedValue] }) }));
 }
-function renderRegardingAttribute({ value, info, column, schemaStore, routeResolver, router, formattedValue, }) {
+function renderRegardingAttribute({ value, schemaStore, routeResolver, router, formattedValue, }) {
     if (!value) {
-        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+        return (0, jsx_runtime_1.jsx)(TableCell_1.TableCellTextContent, {});
     }
     const hasSchema = schemaStore.hasSchema(value.logicalName);
     if (!hasSchema) {
-        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+        return (0, jsx_runtime_1.jsx)(TableCell_1.TableCellTextContent, {});
     }
     const logicalName = value.logicalName;
     const lookupSchema = schemaStore.getSchema(logicalName);
@@ -427,13 +435,13 @@ function renderRegardingAttribute({ value, info, column, schemaStore, routeResol
         type: app_1.PageType.EntityForm,
         id: value.id,
     });
-    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!!lookupSchema.avatarAttribute && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
+    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLinkContent, { href: path, onClick: () => {
+            router.push(path);
+        }, children: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!!lookupSchema.avatarAttribute && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
                         width: 24,
                         height: 24,
                         fontSize: react_components_1.tokens.fontSizeBase100,
                     }, name: formattedValue, color: (0, avatar_1.getAvatarColor)(formattedValue), image: {
                         src: value.avatar,
-                    } })), formattedValue] }), width: info.column.getSize(), href: path, onClick: () => {
-            router.push(path);
-        } }, column.id));
+                    } })), formattedValue] }) }));
 }

package/Insights/WidgetTableContainer.js

@@ -71,20 +71,14 @@ const WidgetTable = ({ columns, attributes, data, }) => {
                             case 'money':
                                 return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: { textAlign: 'right' }, children: formattedValue }, column));
                             case 'lookup':
-                                return (0, useTableColumns_1.renderLookupAttribute)({
-                                    column: {
-                                        id: column,
-                                        label: attribute.label,
-                                        name: column,
-                                    },
-                                    value,
-                                    attribute,
-                                    router,
-                                    routeResolver,
-                                    schemaStore,
-                                    formattedValue,
-                                    display: 'table-cell',
-                                });
+                                return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: (0, useTableColumns_1.renderLookupAttribute)({
+                                        value,
+                                        attribute,
+                                        router,
+                                        routeResolver,
+                                        schemaStore,
+                                        formattedValue,
+                                    }) }, column));
                             case 'choice':
                                 return ((0, jsx_runtime_1.jsx)(TableCellChoice_1.TableCellChoice, { value: value, attribute: attribute, formattedValue: formattedValue, display: "table-cell" }, column));
                             case 'attachment': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.17",
+  "version": "1.4.19",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -24,7 +24,6 @@
     "@fluentui/react-calendar-compat": "^0.3.7",
     "@fluentui/react-components": "^9.68.3",
     "@fluentui/react-datepicker-compat": "^0.6.12",
-    "@fluentui/react-nav-preview": "^0.13.9",
     "@fluentui/react-timepicker-compat": "^0.4.13",
     "@tanstack/react-query": "^5.84.2"
   },
@@ -52,5 +51,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "a5a471cce4df9e87552b23e3de8c90d53e4adf43"
+  "gitHead": "65c5192a870badd4de4c135261d5aeafae063756"
 }