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

package/DataGrid/GridHeaderMobile.js

@@ -24,9 +24,6 @@ const GridHeaderMobile = () => {
                     gap: 16,
                     justifyContent: 'space-between',
                     display: 'flex',
-                }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, {}), iconPosition: "after" }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => {
-                                    var _a, _b;
-                                    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), icon: selectedView.id === view.id ? ((0, jsx_runtime_1.jsx)(icons_1.Icons.Checkmark, {})) : undefined, children: (_b = (_a = view.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : view.name }, view.id));
-                                }) }) })] }) })] }));
+                }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, {}), iconPosition: "after" }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), icon: selectedView.id === view.id ? ((0, jsx_runtime_1.jsx)(icons_1.Icons.Checkmark, {})) : undefined, children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) })] }));
 };
 exports.GridHeaderMobile = GridHeaderMobile;

package/DataGrid/GridListContainer.js

@@ -35,13 +35,15 @@ const GridListContainer = () => {
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
     const uniqueRecords = (0, react_1.useMemo)(() => {
-        var _a;
-        return ((_a = data === null || data === void 0 ? void 0 : data.records.map((record) => (Object.assign(Object.assign({}, record), { __uuid: (0, uuid_1.v4)() })))) !== null && _a !== void 0 ? _a : fallbackData);
-    }, [data === null || data === void 0 ? void 0 : data.records]);
+        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: () => { 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: () => 40,
         overscan: 5,
         enabled: true,
@@ -51,14 +53,14 @@ const GridListContainer = () => {
     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]);
-    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: () => {
+    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',

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

@@ -66,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;
     const styles = useStyles();
     const data = (0, hooks_1.useGridData)();
     const dataState = (0, hooks_1.useGridDataState)();
@@ -87,8 +86,8 @@ 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,
@@ -107,9 +106,11 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         tableWrapperRef,
     });
     const uniqueRecords = (0, react_1.useMemo)(() => {
-        var _a;
-        return ((_a = data === null || data === void 0 ? void 0 : data.records.map((record) => (Object.assign(Object.assign({}, record), { __uuid: (0, uuid_1.v4)() })))) !== null && _a !== void 0 ? _a : fallbackData);
-    }, [data === null || data === void 0 ? void 0 : data.records]);
+        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;
@@ -144,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,
@@ -159,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();
@@ -186,10 +185,10 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         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: () => {
+    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,
@@ -217,7 +216,10 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
                                         borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
                                     }, children: headerGroup.headers.map((header) => header.isPlaceholder
                                         ? null
-                                        : (0, react_table_1.flexRender)(header.column.columnDef.header, Object.assign(Object.assign({}, header.getContext()), { key: header.id }))) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
+                                        : (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',
                                     flexDirection: 'column',
                                     transform: 'translateY(-33px)',
@@ -237,7 +239,10 @@ 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));
+                                        }, 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',
@@ -255,7 +260,7 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
                                                 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: {
+                                    }) }, index))) }))] }) }), data?.records.length === 0 && !dataState.isFetching && ((0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',

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

@@ -7,9 +7,9 @@ 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.displayName = 'TableCellCheckbox';

package/DataGrid/TableCell/TableCellChoice.js

@@ -8,11 +8,10 @@ const react_1 = require("react");
 const TableCellBase_1 = require("./TableCellBase");
 function TableCellChoice(props) {
     const bgColor = (0, react_1.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;
+        return props.attribute.options.find((option) => option.value === props.value)?.color;
     }, [props.attribute.options, props.value]);
     const color = (0, react_1.useMemo)(() => {
         if (!bgColor) {

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

@@ -28,10 +28,14 @@ exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width, target
                     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.displayName = 'TableCellLink';

package/DataGrid/useTableColumns.js

@@ -20,6 +20,7 @@ const componentStore_1 = require("../componentStore");
 const GridColumnHeader_1 = require("../DataGrid/GridColumnHeader");
 const TableCell_1 = require("../DataGrid/TableCell");
 const TableCellLink_1 = require("../DataGrid/TableCell/TableCellLink");
+const avatar_1 = require("../utils/avatar");
 const ActionCell_1 = require("./ActionCell");
 const TableCellChoice_1 = require("./TableCell/TableCellChoice");
 const columnHelper = (0, react_table_1.createColumnHelper)();
@@ -55,18 +56,14 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     }, [contextCommands, mutableContextCommandState]);
     const tableWrapperSize = (0, hooks_2.useElementSize)(tableWrapperRef, 100);
     const columnWidths = (0, react_1.useMemo)(() => {
-        var _a;
-        const availableWidth = Math.max(0, ((_a = tableWrapperSize.width) !== null && _a !== void 0 ? _a : 0) - 32 - 32 - 16);
+        const availableWidth = Math.max(0, (tableWrapperSize.width ?? 0) - 32 - 32 - 16);
         const { columns: calculatedColumns } = (0, utils_1.calculateColumnWidths)({
             availableWidth,
             gapWidth: 0,
-            columns: columns.map((column) => {
-                var _a, _b;
-                return ({
-                    width: (_a = column.width) !== null && _a !== void 0 ? _a : 100,
-                    maxWidth: (_b = column.maxWidth) !== null && _b !== void 0 ? _b : 1000,
-                });
-            }),
+            columns: columns.map((column) => ({
+                width: column.width ?? 100,
+                maxWidth: column.maxWidth ?? 1000,
+            })),
         });
         return calculatedColumns;
     }, [columns, tableWrapperSize.width]);
@@ -79,18 +76,17 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
     const headingSelectionState = (0, react_1.useMemo)(() => {
-        var _a;
-        if ((data === null || data === void 0 ? void 0 : data.records.length) === 0) {
+        if (data?.records.length === 0) {
             return false;
         }
         if (selectedIds.length === 0) {
             return false;
         }
-        if (selectedIds.length === ((_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.length)) {
+        if (selectedIds.length === dataRef.current?.records.length) {
             return true;
         }
         return 'mixed';
-    }, [data === null || data === void 0 ? void 0 : data.records.length, selectedIds]);
+    }, [data?.records.length, selectedIds]);
     const actionColumns = (0, react_1.useMemo)(() => {
         if (disableContextMenu)
             return [];
@@ -125,13 +121,11 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         if (disableSelection)
             return [];
         function getAllIds() {
-            var _a, _b;
-            return ((_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((record) => record[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
+            return (dataRef.current?.records.map((record) => record[schema.idAttribute]) ?? []);
         }
         function toggleAllSelectedIds() {
             setSelectedIdsRef.current((ids) => {
-                var _a;
-                if (ids.length === ((_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.length)) {
+                if (ids.length === dataRef.current?.records.length) {
                     return [];
                 }
                 return getAllIds();
@@ -247,7 +241,6 @@ function renderCellHeaderContent({ column, props, disableColumnResize, disableCo
     return ((0, jsx_runtime_1.jsx)(GridColumnHeader_1.TableHeaderFilterCell, { columnName: column.name, sortDirection: props.column.getIsSorted() || undefined, minWidth: props.header.getSize(), column: column, resizable: !disableColumnResize, disableFilter: disableColumnFilter, disableSort: disableColumnSort, onChangeSortDirection: onChangeSortDirection, attribute: attribute, onResetSize: props.column.resetSize, resizeHandler: props.header.getResizeHandler(), children: column.label }, column.id));
 }
 function renderCellContent({ info, column, schema, schemaStore, locale, routeResolver, openRecord, recordSetSetter, router, }) {
-    var _a, _b, _c;
     const { currency, dateFormats, timezone, timeFormats } = locale;
     let attribute;
     let value;
@@ -257,13 +250,13 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         const entity = schema.attributes[lookup].entity;
         const lookupSchema = schemaStore.getSchema(entity);
         attribute = lookupSchema.attributes[field];
-        value = (_b = (_a = info.row.original.$expand) === null || _a === void 0 ? void 0 : _a[lookup]) === null || _b === void 0 ? void 0 : _b[field];
+        value = info.row.original.$expand?.[lookup]?.[field];
     }
     else {
         attribute = schema.attributes[column.name];
         value = info.getValue();
     }
-    const formattedValue = (_c = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
+    const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
         currency: currency.currency,
         dateFormat: dateFormats.short,
         timeFormat: timeFormats.short,
@@ -271,7 +264,7 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         currencyDisplay: currency.currencyDisplay,
         currencySign: currency.currencySign,
         locale: locale.locale,
-    })) !== null && _c !== void 0 ? _c : '';
+    }) ?? '';
     if (column.plainText) {
         return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
     }
@@ -283,34 +276,33 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         return ((0, jsx_runtime_1.jsx)(Component, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
     }
     if (schema.primaryAttribute === column.name) {
-        const path = routeResolver({
-            logicalName: schema.logicalName,
-            type: app_1.PageType.EntityForm,
-            id: info.row.original[schema.idAttribute],
+        return renderPrimaryAttribute({
+            info,
+            column,
+            routeResolver,
+            openRecord,
+            schema,
+            value: value,
         });
-        return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: value, width: info.column.getSize(), href: path, onClick: () => {
-                openRecord(info.row.original[schema.idAttribute]);
-            } }, column.id));
     }
-    switch (attribute === null || attribute === void 0 ? void 0 : attribute.type) {
+    switch (attribute?.type) {
         case 'money':
             return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize(), textAlignment: "right" }, column.id));
         case 'lookup': {
-            if (!value) {
-                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
-            }
-            const path = routeResolver({
-                logicalName: attribute.entity,
-                type: app_1.PageType.EntityForm,
-                id: value.id,
+            return renderLookupAttribute({
+                info,
+                column,
+                schemaStore,
+                routeResolver,
+                recordSetSetter,
+                router,
+                value,
+                attribute,
+                formattedValue,
             });
-            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: path, onClick: () => {
-                    recordSetSetter('', []);
-                    router.push(path);
-                } }, column.id));
         }
         case 'attachment': {
-            const url = value === null || value === void 0 ? void 0 : value.url;
+            const url = value?.url;
             if (!url) {
                 return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
             }
@@ -321,3 +313,55 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
     }
     return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
 }
+function renderPrimaryAttribute({ info, column, schema, routeResolver, openRecord, value, }) {
+    const path = routeResolver({
+        logicalName: schema.logicalName,
+        type: app_1.PageType.EntityForm,
+        id: info.row.original[schema.idAttribute],
+    });
+    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [renderPrimaryAttributeAvatar({
+                    info,
+                    schema,
+                    value,
+                }), value] }), width: info.column.getSize(), href: path, onClick: () => {
+            openRecord(info.row.original[schema.idAttribute]);
+        } }, column.id));
+}
+function renderPrimaryAttributeAvatar({ info, schema, value, }) {
+    if (!schema.avatarAttribute) {
+        return null;
+    }
+    const avatarAttribute = schema.attributes[schema.avatarAttribute];
+    if (avatarAttribute.type !== 'attachment') {
+        return null;
+    }
+    const avatarValue = info.row.original[schema.avatarAttribute];
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
+            width: 24,
+            height: 24,
+            fontSize: react_components_1.tokens.fontSizeBase100,
+        }, name: value, color: (0, avatar_1.getAvatarColor)(value), image: {
+            src: avatarValue?.url,
+        } }));
+}
+function renderLookupAttribute({ value, info, column, schemaStore, routeResolver, recordSetSetter, router, attribute, formattedValue, }) {
+    if (!value) {
+        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+    }
+    const lookupSchema = schemaStore.getSchema(attribute.entity);
+    const path = routeResolver({
+        logicalName: attribute.entity,
+        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: {
+                        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: () => {
+            recordSetSetter('', []);
+            router.push(path);
+        } }, column.id));
+}

package/DialogContainer/AlertDialog.js

@@ -4,12 +4,9 @@ exports.AlertDialog = AlertDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 function AlertDialog(props) {
-    var _a;
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
-            var _a;
-            (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props);
+            props.onDismiss?.();
         }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [!!props.title && (0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: props.title }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: props.message }), (0, jsx_runtime_1.jsx)(react_components_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: () => {
-                                var _a;
-                                (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props);
-                            }, children: (_a = props.confirmText) !== null && _a !== void 0 ? _a : 'Close' }) })] }) }) }));
+                                props.onConfirm?.();
+                            }, children: props.confirmText ?? 'Close' }) })] }) }) }));
 }

package/DialogContainer/ConfirmDialog.js

@@ -4,15 +4,11 @@ exports.ConfirmDialog = ConfirmDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 function ConfirmDialog(props) {
-    var _a, _b;
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
-            var _a;
-            (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props);
+            props.onDismiss?.();
         }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [!!props.title && (0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: props.title }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: props.message }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", onClick: () => {
-                                    var _a;
-                                    (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-                                }, children: (_a = props.cancelText) !== null && _a !== void 0 ? _a : 'Cancel' }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: () => {
-                                    var _a;
-                                    (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props);
-                                }, children: (_b = props.confirmText) !== null && _b !== void 0 ? _b : 'Confirm' })] })] }) }) }));
+                                    props.onCancel?.();
+                                }, children: props.cancelText ?? 'Cancel' }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: () => {
+                                    props.onConfirm?.();
+                                }, children: props.confirmText ?? 'Confirm' })] })] }) }) }));
 }

package/DialogContainer/DialogContainer.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -21,7 +10,7 @@ const PromptDialog_1 = require("./PromptDialog");
 const DialogContainer = () => {
     const items = (0, hooks_1.useDialogItems)();
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((item) => {
-            const { id, isOpen } = item, options = __rest(item, ["id", "isOpen"]);
+            const { id, isOpen, ...options } = item;
             switch (options.type) {
                 case 'alert':
                     return ((0, jsx_runtime_1.jsx)(AlertDialog_1.AlertDialog, { message: options.text, open: isOpen, confirmText: options.confirmButtonLabel, onConfirm: options.onConfirm, onDismiss: options.onDismiss, title: options.title }, id));
@@ -35,7 +24,7 @@ const DialogContainer = () => {
                         // confirmButtonLabel={options.confirmButtonLabel}
                         defaultValues: options.defaultValues, onCancel: options.onCancel, onDismiss: options.onDismiss, onConfirm: options.onConfirm, text: options.text, title: options.title, open: isOpen, cancelText: options.cancelButtonLabel, confirmText: options.confirmButtonLabel }, id));
                 case 'custom':
-                    return ((0, jsx_runtime_1.jsx)(options.Component, Object.assign({ id: id, isOpen: isOpen }, options.props), id));
+                    return ((0, jsx_runtime_1.jsx)(options.Component, { id: id, isOpen: isOpen, ...options.props }, id));
             }
             return null;
         }) }));

package/DialogContainer/ErrorDialog.js

@@ -5,10 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
 function ErrorDialog(props) {
-    var _a;
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
-            var _a;
-            (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props);
+            props.onDismiss?.();
         }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsxs)(react_components_1.DialogTitle, { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
                                     color: react_components_1.tokens.colorPaletteRedForeground1,
                                     // marginBottom: tokens.spacingVerticalL,
@@ -16,7 +14,6 @@ function ErrorDialog(props) {
                                     alignItems: 'center',
                                     marginRight: react_components_1.tokens.spacingHorizontalS,
                                 }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Error, {}) }), props.title || 'Error'] }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: props.message }), (0, jsx_runtime_1.jsx)(react_components_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", style: { background: react_components_1.tokens.colorPaletteRedBackground3 }, onClick: () => {
-                                var _a;
-                                (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props);
-                            }, children: (_a = props.confirmText) !== null && _a !== void 0 ? _a : 'Close' }) })] }) }) }));
+                                props.onConfirm?.();
+                            }, children: props.confirmText ?? 'Close' }) })] }) }) }));
 }