@headless-adminapp/fluent 0.0.17-alpha.1

package/DataGrid/useTableColumns.js

@@ -0,0 +1,251 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTableColumns = useTableColumns;
+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 hooks_2 = require("@headless-adminapp/app/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const hooks_3 = require("@headless-adminapp/app/metadata/hooks");
+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 app_1 = require("@headless-adminapp/core/experience/app");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = require("react");
+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 columnHelper = (0, react_table_1.createColumnHelper)();
+const useStyles = (0, react_components_1.makeStyles)({
+    selectionCell: {
+        position: 'sticky',
+        left: 0,
+        background: react_components_1.tokens.colorNeutralBackground1,
+        zIndex: 1,
+        display: 'flex',
+        alignItems: 'center',
+    },
+});
+function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }) {
+    const styles = useStyles();
+    const data = (0, hooks_1.useGridData)();
+    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 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)();
+    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 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 { 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,
+                });
+            }),
+        });
+        return calculatedColumns;
+    }, [columns, tableWrapperSize.width]);
+    const gridColumns = (0, hooks_1.useGridColumns)();
+    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 dataRef = (0, react_1.useRef)(data);
+    dataRef.current = data;
+    return (0, react_1.useMemo)(() => {
+        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,
+                });
+            }),
+            ...(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,
+        schema.idAttribute,
+        schema.attributes,
+        schema.primaryAttribute,
+        schema.logicalName,
+        styles.selectionCell,
+        columnWidths,
+        disableColumnResize,
+        disableColumnFilter,
+        disableColumnSort,
+        setSorting,
+        currency.currency,
+        dateFormats.short,
+        getSchema,
+        routeResolver,
+        openRecord,
+        recordSetSetter,
+        router,
+        mutableContextCommandState,
+    ]);
+}

package/DataGrid/utils.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const adjustTableHeight: (tableRef: RefObject<HTMLTableElement>, virtualHeight: number) => number | undefined;

package/DataGrid/utils.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adjustTableHeight = void 0;
+const adjustTableHeight = (tableRef, virtualHeight) => {
+    if (!tableRef.current)
+        return;
+    // calculate the height for the pseudo element after the table
+    const existingPseudoElement = window.getComputedStyle(tableRef.current, '::after');
+    const existingPseudoHeight = parseFloat(existingPseudoElement.height) || 0;
+    const tableHeight = tableRef.current.clientHeight - existingPseudoHeight;
+    const pseudoHeight = Math.max(virtualHeight - tableHeight, 0);
+    document.documentElement.style.setProperty('--pseudo-height', `${pseudoHeight}px`);
+    return pseudoHeight;
+};
+exports.adjustTableHeight = adjustTableHeight;

package/DialogContainer/AlertDialog.d.ts

@@ -0,0 +1,10 @@
+interface AlertDialogProps {
+    open: boolean;
+    title?: string;
+    message: string;
+    onConfirm?: () => void;
+    onDismiss?: () => void;
+    confirmText?: string;
+}
+export declare function AlertDialog(props: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/DialogContainer/AlertDialog.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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);
+        }, 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' }) })] }) }) }));
+}

package/DialogContainer/ConfirmDialog.d.ts

@@ -0,0 +1,12 @@
+interface ConfirmDialogProps {
+    open: boolean;
+    title?: string;
+    message: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onDismiss?: () => void;
+    confirmText?: string;
+    cancelText?: string;
+}
+export declare function ConfirmDialog(props: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/DialogContainer/ConfirmDialog.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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);
+        }, 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' })] })] }) }) }));
+}

package/DialogContainer/DialogContainer.d.ts

@@ -0,0 +1 @@
+export declare const DialogContainer: () => import("react/jsx-runtime").JSX.Element;

package/DialogContainer/DialogContainer.js

@@ -0,0 +1,43 @@
+"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");
+const hooks_1 = require("@headless-adminapp/app/dialog/hooks");
+const AlertDialog_1 = require("./AlertDialog");
+const ConfirmDialog_1 = require("./ConfirmDialog");
+const ErrorDialog_1 = require("./ErrorDialog");
+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"]);
+            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));
+                case 'confirm':
+                    return ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.ConfirmDialog, { message: options.text, title: options.title, onCancel: options.onCancel, onConfirm: options.onConfirm, onDismiss: options.onDismiss, open: isOpen, cancelText: options.cancelButtonLabel, confirmText: options.confirmButtonLabel }, id));
+                case 'error':
+                    return ((0, jsx_runtime_1.jsx)(ErrorDialog_1.ErrorDialog, { message: options.text, open: isOpen, confirmText: options.confirmButtonLabel, onConfirm: options.onConfirm, onDismiss: options.onDismiss, title: options.title }, id));
+                case 'prompt':
+                    return ((0, jsx_runtime_1.jsx)(PromptDialog_1.PromptDialog, { attributes: options.attributes, 
+                        // cancelButtonLabel={options.cancelButtonLabel}
+                        // 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 null;
+        }) }));
+};
+exports.DialogContainer = DialogContainer;

package/DialogContainer/ErrorDialog.d.ts

@@ -0,0 +1,10 @@
+interface ErrorDialogProps {
+    open: boolean;
+    title?: string;
+    message: string;
+    onConfirm?: () => void;
+    onDismiss?: () => void;
+    confirmText?: string;
+}
+export declare function ErrorDialog(props: ErrorDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/DialogContainer/ErrorDialog.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorDialog = ErrorDialog;
+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);
+        }, 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,
+                                    display: 'inline-flex',
+                                    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' }) })] }) }) }));
+}

package/DialogContainer/PromptDialog.d.ts

@@ -0,0 +1,27 @@
+import { PromptDialogOptions } from '@headless-adminapp/core/experience/dialog';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import * as yup from 'yup';
+interface PromptDialogProps<SA extends SchemaAttributes = SchemaAttributes> {
+    open: boolean;
+    title?: PromptDialogOptions<SA>['title'];
+    text?: PromptDialogOptions<SA>['text'];
+    cancelText?: PromptDialogOptions<SA>['cancelButtonLabel'];
+    attributes: PromptDialogOptions<SA>['attributes'];
+    defaultValues: PromptDialogOptions<SA>['defaultValues'];
+    confirmText?: PromptDialogOptions<SA>['confirmButtonLabel'];
+    onConfirm?: PromptDialogOptions<SA>['onConfirm'];
+    onCancel?: PromptDialogOptions<SA>['onCancel'];
+    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<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+}>>) & import("lodash").MemoizedFunction;
+export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A) => yup.ObjectSchema<{
+    [x: string]: any;
+}, yup.AnyObject, {
+    [x: string]: any;
+}, "">) & import("lodash").MemoizedFunction;
+export {};

package/DialogContainer/PromptDialog.js

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateValidationSchema = exports.formValidator = void 0;
+exports.PromptDialog = PromptDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const utils_1 = require("@headless-adminapp/app/dataform/utils");
+const yup_1 = require("@hookform/resolvers/yup");
+const lodash_1 = require("lodash");
+const react_hook_form_1 = require("react-hook-form");
+const yup = __importStar(require("yup"));
+const SectionControl_1 = require("../DataForm/SectionControl");
+const StandardControl_1 = require("../PageEntityForm/StandardControl");
+function PromptDialog(props) {
+    var _a, _b;
+    const form = (0, react_hook_form_1.useForm)({
+        mode: 'all',
+        defaultValues: props.defaultValues,
+        shouldUnregister: false,
+        resolver: (0, exports.formValidator)(props.attributes),
+    });
+    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);
+        }, 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.jsxs)(react_components_1.DialogContent, { children: [!!props.text && (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: props.text }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: react_components_1.tokens.spacingVerticalM,
+                                    marginTop: react_components_1.tokens.spacingVerticalL,
+                                    marginBottom: react_components_1.tokens.spacingVerticalL,
+                                }, children: Object.entries(props.attributes).map(([attributeName, attribute]) => {
+                                    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: attributeName, render: ({ field, fieldState, formState }) => {
+                                            var _a, _b;
+                                            const isError = (fieldState.isTouched || formState.isSubmitted) &&
+                                                !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message);
+                                            const errorMessage = fieldState.isTouched || formState.isSubmitted
+                                                ? (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message
+                                                : '';
+                                            return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError }) }));
+                                        } }, attributeName));
+                                }) })] }), (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", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: () => __awaiter(this, void 0, void 0, function* () {
+                                    yield form.handleSubmit((values) => __awaiter(this, void 0, void 0, function* () {
+                                        var _a;
+                                        (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, values);
+                                    }))();
+                                }), children: (_b = props.confirmText) !== null && _b !== void 0 ? _b : 'Confirm' })] })] }) }) }));
+}
+exports.formValidator = (0, lodash_1.memoize)(function formValidator(attributes) {
+    return (values, context, options) => __awaiter(this, void 0, void 0, function* () {
+        const validator = (0, exports.generateValidationSchema)(attributes);
+        const resolver = (0, yup_1.yupResolver)(validator);
+        const result = yield resolver(values, context, options);
+        // console.log(result);
+        return result;
+    });
+}, (attributes) => JSON.stringify({ attributes }));
+exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema(attributes) {
+    const columns = Object.keys(attributes);
+    return yup.object().shape(Object.assign({}, columns.reduce((acc, column) => {
+        const attribute = attributes[column];
+        const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, 'en', {});
+        return Object.assign(Object.assign({}, acc), { [column]: validationSchema });
+    }, {})));
+}, (attributes) => JSON.stringify({ attributes }));

package/DialogContainer/index.d.ts

@@ -0,0 +1 @@
+export { DialogContainer } from './DialogContainer';

package/DialogContainer/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContainer = void 0;
+var DialogContainer_1 = require("./DialogContainer");
+Object.defineProperty(exports, "DialogContainer", { enumerable: true, get: function () { return DialogContainer_1.DialogContainer; } });

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 headless-adminapp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/OverflowCommandBar/OverflowCommandBar.d.ts

@@ -0,0 +1,10 @@
+import { CommandItemState } from '@headless-adminapp/app/command';
+import { FC } from 'react';
+interface OverflowCommandBarProps {
+    commands: CommandItemState[][];
+    align?: 'start' | 'end';
+    beforeDivider?: boolean;
+    afterDivider?: boolean;
+}
+export declare const OverflowCommandBar: FC<OverflowCommandBarProps>;
+export {};

package/OverflowCommandBar/OverflowCommandBar.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverflowCommandBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
+const react_1 = require("react");
+const CommandBar_1 = __importDefault(require("../CommandBar"));
+const OverflowMenu_1 = require("./OverflowMenu");
+const render_1 = require("./render");
+const OverflowCommandBar = ({ commands, align = 'start', afterDivider, beforeDivider, }) => {
+    const { language } = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Overflow, { children: (0, jsx_runtime_1.jsxs)(CommandBar_1.default.Wrapper, { overflow: "hidden", align: align, children: [beforeDivider && (0, jsx_runtime_1.jsx)(CommandBar_1.default.Divider, {}), commands.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [groupIndex > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.OverflowDivider, { groupId: String(groupIndex - 1), children: (0, jsx_runtime_1.jsx)(CommandBar_1.default.Divider, {}) })), group.map((item, index) => {
+                            const commandType = item.type;
+                            switch (item.type) {
+                                case 'menu':
+                                    return ((0, jsx_runtime_1.jsx)(react_components_1.OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: (0, render_1.renderCommandItem)(`${groupIndex}-${index}`, item, language) }, index));
+                                case 'button':
+                                    return ((0, jsx_runtime_1.jsx)(react_components_1.OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: (0, render_1.renderCommandItem)(`${groupIndex}-${index}`, item, language) }, index));
+                                case 'label':
+                                    return ((0, jsx_runtime_1.jsx)(react_components_1.OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: (0, render_1.renderCommandItem)(`${groupIndex}-${index}`, item, language) }, index));
+                                case 'icon':
+                                    return ((0, jsx_runtime_1.jsx)(react_components_1.OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: (0, render_1.renderCommandItem)(`${groupIndex}-${index}`, item, language) }, index));
+                                default:
+                                    throw new Error(`Unknown command type: ${commandType}`);
+                            }
+                        })] }, groupIndex))), (0, jsx_runtime_1.jsx)(OverflowMenu_1.OverflowMenu, { items: commands }), afterDivider && (0, jsx_runtime_1.jsx)(CommandBar_1.default.Divider, {})] }) }));
+};
+exports.OverflowCommandBar = OverflowCommandBar;

package/OverflowCommandBar/OverflowMenu.d.ts

@@ -0,0 +1,4 @@
+import { CommandItemState } from '@headless-adminapp/app/command';
+export declare const OverflowMenu: React.FC<{
+    items: CommandItemState[][];
+}>;