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

package/DataGrid/useTableColumns.js

@@ -13,13 +13,17 @@ const mutable_1 = require("@headless-adminapp/app/mutable");
 const hooks_4 = require("@headless-adminapp/app/recordset/hooks");
 const hooks_5 = require("@headless-adminapp/app/route/hooks");
 const utils_1 = require("@headless-adminapp/app/utils");
+const phone_1 = require("@headless-adminapp/app/utils/phone");
 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 avatar_1 = require("../utils/avatar");
 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: {
@@ -38,33 +42,29 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const [, setSorting] = (0, hooks_1.useGridSorting)();
     const schema = (0, hooks_1.useDataGridSchema)();
     const { schemaStore } = (0, hooks_3.useMetadata)();
-    const [, setSelectedIds] = (0, hooks_1.useGridSelection)();
+    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
         ? // eslint-disable-next-line react-hooks/rules-of-hooks
-            (0, hooks_1.useSubGridCommands)()
+            (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);
+        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]);
@@ -73,167 +73,309 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const router = (0, hooks_5.useRouter)();
     const recordSetSetter = (0, hooks_4.useRecordSetSetter)();
     const openRecord = (0, useOpenRecord_1.useOpenRecord)();
-    const { currency, dateFormats } = (0, locale_1.useLocale)();
+    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)(() => {
+        if (data?.records.length === 0) {
+            return false;
+        }
+        if (selectedIds.length === 0) {
+            return false;
+        }
+        if (selectedIds.length === dataRef.current?.records.length) {
+            return true;
+        }
+        return 'mixed';
+    }, [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 = 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,
-                        })) !== 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() {
+            return (dataRef.current?.records.map((record) => record[schema.idAttribute]) ?? []);
+        }
+        function toggleAllSelectedIds() {
+            setSelectedIdsRef.current((ids) => {
+                if (ids.length === dataRef.current?.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,
+        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, }) {
+    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 = info.row.original.$expand?.[lookup]?.[field];
+    }
+    else {
+        attribute = schema.attributes[column.name];
+        value = info.getValue();
+    }
+    const formattedValue = (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,
+        region: locale.region,
+    }) ?? '';
+    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) {
+        return renderPrimaryAttribute({
+            info,
+            column,
+            routeResolver,
+            openRecord,
+            schema,
+            value: value,
+        });
+    }
+    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': {
+            return renderLookupAttribute({
+                info,
+                column,
+                schemaStore,
+                routeResolver,
+                recordSetSetter,
+                router,
+                value,
+                attribute,
+                formattedValue,
+            });
+        }
+        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)(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() }));
+    }
+    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));
+        }
+    }
+    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)(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' }) })] }) }) }));
 }

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,22 @@ 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, language, strings, region, }: {
+    attributes: A;
+    language: string;
+    strings: FormValidationStringSet;
+    region: string;
+}) => (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, language, strings, region, }: {
+    attributes: A;
+    language: string;
+    strings: FormValidationStringSet;
+    region: string;
+}) => yup.ObjectSchema<{
     [x: string]: any;
 }, yup.AnyObject, {
     [x: string]: any;