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

package/DataGrid/TableCell/TableCellCheckbox.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellCheckbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const TableCellCheckbox = ({ checked, onChange, }) => {
+const react_1 = require("react");
+exports.TableCellCheckbox = (0, react_1.memo)(({ checked, onChange }) => {
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: { display: 'flex', alignItems: 'center' }, onClick: (event) => {
             event.stopPropagation();
         }, children: (0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { checked: checked !== null && checked !== void 0 ? checked : false, onChange: (event) => {
                 event.stopPropagation();
                 onChange === null || onChange === void 0 ? void 0 : onChange(event);
             } }) }));
-};
-exports.TableCellCheckbox = TableCellCheckbox;
+});
+exports.TableCellCheckbox.displayName = 'TableCellCheckbox';

package/DataGrid/TableCell/TableCellChoice.d.ts

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

package/DataGrid/TableCell/TableCellChoice.js

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

package/DataGrid/TableCell/TableCellLink.d.ts

@@ -4,5 +4,6 @@ export interface TableCellLinkProps {
     href?: string;
     onClick?: () => void;
     width: number;
+    target?: string;
 }
 export declare const TableCellLink: FC<TableCellLinkProps>;

package/DataGrid/TableCell/TableCellLink.js

@@ -4,7 +4,8 @@ exports.TableCellLink = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/route/hooks");
-const TableCellLink = ({ value, href, onClick, width, }) => {
+const react_1 = require("react");
+exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width, target }) => {
     const router = (0, hooks_1.useRouter)();
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
             textOverflow: 'ellipsis',
@@ -15,7 +16,10 @@ const TableCellLink = ({ value, href, onClick, width, }) => {
             maxWidth: width,
             display: 'flex',
             alignItems: 'center',
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, onClick: (event) => {
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, target: target, onClick: (event) => {
+                if (target === '_blank') {
+                    return;
+                }
                 if (event.metaKey || event.ctrlKey) {
                     return;
                 }
@@ -29,5 +33,5 @@ const TableCellLink = ({ value, href, onClick, width, }) => {
                     event.preventDefault();
                 }
             }, children: value }) }));
-};
-exports.TableCellLink = TableCellLink;
+});
+exports.TableCellLink.displayName = 'TableCellLink';

package/DataGrid/TableCell/TableCellText.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const TableCellBase_1 = require("./TableCellBase");
-const TableCellText = ({ value, width, textAlignment, }) => {
+exports.TableCellText = (0, react_1.memo)(({ value, width, textAlignment }) => {
     return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
             textAlign: textAlignment || 'left',
             textOverflow: 'ellipsis',
@@ -19,6 +20,10 @@ const TableCellText = ({ value, width, textAlignment, }) => {
             // display: 'flex',
             // alignItems: 'center',
             // borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: { overflow: 'hidden', textOverflow: 'ellipsis', width: '100%' }, children: value }) }));
-};
-exports.TableCellText = TableCellText;
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                width: '100%',
+            }, children: value }) }));
+});
+exports.TableCellText.displayName = 'TableCellText';

package/DataGrid/types.d.ts

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

package/DataGrid/types.js

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

package/DataGrid/useTableColumns.d.ts

@@ -1,5 +1,4 @@
-import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
-import { Data } from '@headless-adminapp/core/transport';
+import { UniqueRecord } from './types';
 export declare function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }: {
     disableSelection?: boolean;
     disableContextMenu?: boolean;
@@ -7,4 +6,4 @@ export declare function useTableColumns({ disableSelection, disableContextMenu,
     disableColumnFilter?: boolean;
     disableColumnSort?: boolean;
     tableWrapperRef: React.RefObject<HTMLDivElement>;
-}): import("@tanstack/react-table").AccessorFnColumnDef<Data<InferredSchemaType<SchemaAttributes>>, unknown>[];
+}): import("@tanstack/react-table").AccessorFnColumnDef<UniqueRecord, unknown>[];

package/DataGrid/useTableColumns.js

@@ -5,6 +5,7 @@ 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 useOpenRecord_1 = require("@headless-adminapp/app/datagrid/hooks/useOpenRecord");
 const hooks_2 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const hooks_3 = require("@headless-adminapp/app/metadata/hooks");
@@ -15,10 +16,12 @@ const utils_1 = require("@headless-adminapp/app/utils");
 const app_1 = require("@headless-adminapp/core/experience/app");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
+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 ActionCell_1 = require("./ActionCell");
+const TableCellChoice_1 = require("./TableCell/TableCellChoice");
 const columnHelper = (0, react_table_1.createColumnHelper)();
 const useStyles = (0, react_components_1.makeStyles)({
     selectionCell: {
@@ -36,19 +39,21 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const columns = (0, hooks_1.useGridColumns)();
     const [, setSorting] = (0, hooks_1.useGridSorting)();
     const schema = (0, hooks_1.useDataGridSchema)();
-    const { getSchema } = (0, hooks_3.useMetadata)();
-    const [, setSelectedIds] = (0, hooks_1.useGridSelection)();
+    const { schemaStore } = (0, hooks_3.useMetadata)();
+    const [selectedIds, setSelectedIds] = (0, hooks_1.useGridSelection)();
     const setSelectedIdsRef = (0, react_1.useRef)(setSelectedIds);
     setSelectedIdsRef.current = setSelectedIds;
     const isSubgrid = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.isSubGrid);
     const contextCommands = isSubgrid
-        ? (0, hooks_1.useSubGridCommands)()
-        : (0, hooks_1.useMainGridContextCommands)();
+        ? // eslint-disable-next-line react-hooks/rules-of-hooks
+            (0, hooks_1.useSubGridContextCommands)()
+        : // eslint-disable-next-line react-hooks/rules-of-hooks
+            (0, hooks_1.useMainGridContextCommands)();
     const mutableContextCommandState = (0, mutable_1.useMutableState)(contextCommands, true);
     (0, react_1.useEffect)(() => {
         mutableContextCommandState.setValue(contextCommands);
     }, [contextCommands, mutableContextCommandState]);
-    const tableWrapperSize = (0, hooks_2.useElementSize)(tableWrapperRef);
+    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);
@@ -69,183 +74,250 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const routeResolver = (0, hooks_5.useRouteResolver)();
     const router = (0, hooks_5.useRouter)();
     const recordSetSetter = (0, hooks_4.useRecordSetSetter)();
-    const openRecord = (0, react_1.useCallback)((id) => {
-        var _a, _b;
-        const path = routeResolver({
-            logicalName: schema.logicalName,
-            type: app_1.PageType.EntityForm,
-            id,
-        });
-        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
-        router.push(path);
-    }, [
-        recordSetSetter,
-        routeResolver,
-        router,
-        schema.idAttribute,
-        schema.logicalName,
-    ]);
-    const { currency, dateFormats } = (0, locale_1.useLocale)();
+    const openRecord = (0, useOpenRecord_1.useOpenRecord)();
+    const locale = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
-    return (0, react_1.useMemo)(() => {
+    const headingSelectionState = (0, react_1.useMemo)(() => {
+        var _a;
+        if ((data === null || data === void 0 ? void 0 : 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)) {
+            return true;
+        }
+        return 'mixed';
+    }, [data === null || data === void 0 ? void 0 : data.records.length, selectedIds]);
+    const actionColumns = (0, react_1.useMemo)(() => {
+        if (disableContextMenu)
+            return [];
         return [
-            ...(disableSelection
-                ? []
-                : [
-                    columnHelper.accessor((info) => info[schema.idAttribute], {
-                        id: '$selectColumn',
-                        header: () => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { checked: 'mixed', as: 'th', style: {
-                                position: 'sticky',
-                                display: 'flex',
-                                left: 0,
-                                top: 0,
-                                background: react_components_1.tokens.colorNeutralBackground3,
-                                zIndex: 1,
-                                width: 32,
-                                maxWidth: 32,
-                                minWidth: 32,
-                            } })),
-                        cell: (info) => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { className: (0, react_components_1.mergeClasses)(styles.selectionCell), checked: info.row.getIsSelected(), onClick: (event) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                                setSelectedIdsRef.current((ids) => {
-                                    const id = info.row.original[schema.idAttribute];
-                                    if (ids.includes(id)) {
-                                        return ids.filter((i) => i !== id);
-                                    }
-                                    return [...ids, id];
-                                });
-                            }, style: {
-                                width: 32,
-                                maxWidth: 32,
-                                minWidth: 32,
-                            } })),
-                        enableResizing: false,
-                        size: 32,
-                        minSize: 32,
-                        maxSize: 32,
-                    }),
-                ]),
-            ...gridColumns.map((column, index) => {
-                return columnHelper.accessor((info) => info[column.name], {
-                    id: column.id,
-                    header: (props) => {
-                        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: (direction) => {
-                                setSorting([
-                                    {
-                                        field: column.name,
-                                        order: direction,
-                                    },
-                                ]);
-                            }, attribute: schema.attributes[column.name], onResetSize: props.column.resetSize, resizeHandler: props.header.getResizeHandler(), children: column.label }, column.id));
-                    },
-                    cell: (info) => {
-                        var _a, _b, _c;
-                        let attribute;
-                        let value;
-                        if (column.expandedKey) {
-                            const lookup = column.name;
-                            const field = column.expandedKey;
-                            const entity = schema.attributes[lookup]
-                                .entity;
-                            const lookupSchema = 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];
-                        }
-                        else {
-                            attribute = schema.attributes[column.name];
-                            value = info.getValue();
-                        }
-                        const formattedValue = (_c = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
-                            currency: currency.currency,
-                            dateFormat: dateFormats.short,
-                        })) !== null && _c !== void 0 ? _c : '';
-                        if (schema.primaryAttribute === column.name) {
-                            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: 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) {
-                            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 ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: path, onClick: () => {
-                                        recordSetSetter('', []);
-                                        router.push(path);
-                                    } }, column.id));
-                        }
-                        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
-                    },
-                    enableResizing: true,
-                    size: columnWidths[index],
-                    minSize: 100,
-                    maxSize: 1000,
-                });
+            columnHelper.accessor((info) => info[schema.idAttribute], {
+                id: '$actionColumn',
+                header: () => ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { style: {
+                        minWidth: 32,
+                        flexShrink: 0,
+                        // width: 32,
+                        flex: 1,
+                        position: 'sticky',
+                        display: 'flex',
+                        right: 0,
+                        top: 0,
+                        // zIndex: 1,
+                        background: react_components_1.tokens.colorNeutralBackground1,
+                        borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+                    }, children: "\u00A0" })),
+                cell: (info) => ((0, jsx_runtime_1.jsx)(ActionCell_1.ActionCell, { onOpen: () => {
+                        const id = info.row.original[schema.idAttribute];
+                        setSelectedIdsRef.current([id]);
+                    }, mutableState: mutableContextCommandState })),
+                enableResizing: false,
+                size: 32,
+                minSize: 32,
+                maxSize: 32,
+            }),
+        ];
+    }, [disableContextMenu, mutableContextCommandState, schema.idAttribute]);
+    const selectionColumns = (0, react_1.useMemo)(() => {
+        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 : []);
+        }
+        function toggleAllSelectedIds() {
+            setSelectedIdsRef.current((ids) => {
+                var _a;
+                if (ids.length === ((_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.length)) {
+                    return [];
+                }
+                return getAllIds();
+            });
+        }
+        function excludeId(ids, id) {
+            return ids.filter((i) => i !== id);
+        }
+        function toggleSelectedId(info) {
+            setSelectedIdsRef.current((ids) => {
+                const id = info.row.original[schema.idAttribute];
+                if (ids.includes(id)) {
+                    return excludeId(ids, id);
+                }
+                return [...ids, id];
+            });
+        }
+        return [
+            columnHelper.accessor((info) => info[schema.idAttribute], {
+                id: '$selectColumn',
+                header: () => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { checked: headingSelectionState, as: 'th', style: {
+                        position: 'sticky',
+                        display: 'flex',
+                        left: 0,
+                        top: 0,
+                        background: react_components_1.tokens.colorNeutralBackground1,
+                        zIndex: 1,
+                        width: 32,
+                        maxWidth: 32,
+                        minWidth: 32,
+                    }, onClick: toggleAllSelectedIds })),
+                cell: (info) => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { className: (0, react_components_1.mergeClasses)(styles.selectionCell), checked: info.row.getIsSelected(), onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        toggleSelectedId(info);
+                    }, style: {
+                        width: 32,
+                        maxWidth: 32,
+                        minWidth: 32,
+                    } })),
+                enableResizing: false,
+                size: 32,
+                minSize: 32,
+                maxSize: 32,
             }),
-            ...(disableContextMenu
-                ? []
-                : [
-                    columnHelper.accessor((info) => info[schema.idAttribute], {
-                        id: '$actionColumn',
-                        header: () => ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { style: {
-                                minWidth: 32,
-                                flexShrink: 0,
-                                // width: 32,
-                                flex: 1,
-                                position: 'sticky',
-                                display: 'flex',
-                                right: 0,
-                                top: 0,
-                                // zIndex: 1,
-                                background: react_components_1.tokens.colorNeutralBackground3,
-                                borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
-                            }, children: "\u00A0" })),
-                        cell: (info) => ((0, jsx_runtime_1.jsx)(ActionCell_1.ActionCell, { onOpen: () => {
-                                const id = info.row.original[schema.idAttribute];
-                                setSelectedIdsRef.current([id]);
-                            }, mutableState: mutableContextCommandState })),
-                        enableResizing: false,
-                        size: 32,
-                        minSize: 32,
-                        maxSize: 32,
-                    }),
-                ]),
         ];
     }, [
         disableSelection,
-        gridColumns,
-        disableContextMenu,
+        headingSelectionState,
         schema.idAttribute,
-        schema.attributes,
-        schema.primaryAttribute,
-        schema.logicalName,
         styles.selectionCell,
+    ]);
+    const restColumns = (0, react_1.useMemo)(() => {
+        return gridColumns.map((column, index) => {
+            function onChangeSortDirection(direction) {
+                setSorting([
+                    {
+                        field: column.name,
+                        order: direction,
+                    },
+                ]);
+            }
+            return columnHelper.accessor((info) => info[column.name], {
+                id: column.id,
+                header: (props) => {
+                    return renderCellHeaderContent({
+                        props,
+                        column,
+                        disableColumnResize,
+                        disableColumnFilter,
+                        disableColumnSort,
+                        onChangeSortDirection,
+                        attribute: schema.attributes[column.name],
+                    });
+                },
+                cell: (info) => renderCellContent({
+                    info,
+                    column,
+                    schema,
+                    locale,
+                    schemaStore,
+                    routeResolver,
+                    openRecord,
+                    recordSetSetter,
+                    router,
+                }),
+                enableResizing: true,
+                size: columnWidths[index],
+                minSize: 100,
+                maxSize: 1000,
+            });
+        });
+    }, [
+        gridColumns,
         columnWidths,
         disableColumnResize,
         disableColumnFilter,
         disableColumnSort,
+        schema,
         setSorting,
-        currency.currency,
-        dateFormats.short,
-        getSchema,
+        locale,
+        schemaStore,
         routeResolver,
         openRecord,
         recordSetSetter,
         router,
-        mutableContextCommandState,
     ]);
+    return (0, react_1.useMemo)(() => {
+        return [...selectionColumns, ...restColumns, ...actionColumns];
+    }, [selectionColumns, restColumns, actionColumns]);
+}
+function renderCellHeaderContent({ column, props, disableColumnResize, disableColumnFilter, disableColumnSort, onChangeSortDirection, attribute, }) {
+    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;
+    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 = (_b = (_a = info.row.original.$expand) === null || _a === void 0 ? void 0 : _a[lookup]) === null || _b === void 0 ? void 0 : _b[field];
+    }
+    else {
+        attribute = schema.attributes[column.name];
+        value = info.getValue();
+    }
+    const formattedValue = (_c = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
+        currency: currency.currency,
+        dateFormat: dateFormats.short,
+        timeFormat: timeFormats.short,
+        timezone,
+        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));
+    }
+    if (column.component) {
+        const Component = componentStore_1.componentStore.getComponent(column.component);
+        if (!Component) {
+            throw new Error(`Component with name ${column.component} not found`);
+        }
+        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 ((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) {
+        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 ((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;
+            if (!url) {
+                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+            }
+            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: url, target: "_blank" }, column.id));
+        }
+        case 'choice':
+            return ((0, jsx_runtime_1.jsx)(TableCellChoice_1.TableCellChoice, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
+    }
+    return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
 }

package/DialogContainer/PromptDialog.d.ts

@@ -1,3 +1,4 @@
+import { FormValidationStringSet } from '@headless-adminapp/app/form';
 import { PromptDialogOptions } from '@headless-adminapp/core/experience/dialog';
 import { SchemaAttributes } from '@headless-adminapp/core/schema';
 import * as yup from 'yup';
@@ -14,12 +15,12 @@ interface PromptDialogProps<SA extends SchemaAttributes = SchemaAttributes> {
     onDismiss?: PromptDialogOptions<SA>['onDismiss'];
 }
 export declare function PromptDialog(props: PromptDialogProps): import("react/jsx-runtime").JSX.Element;
-export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
+export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A, language: string, strings: FormValidationStringSet) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
 }>>) & import("lodash").MemoizedFunction;
-export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A) => yup.ObjectSchema<{
+export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A, language: string, strings: FormValidationStringSet) => yup.ObjectSchema<{
     [x: string]: any;
 }, yup.AnyObject, {
     [x: string]: any;