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

package/DataGrid/useTableColumns.js

@@ -1,63 +1,61 @@
-"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 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");
-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 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)({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, makeStyles, mergeClasses, TableHeaderCell, TableSelectionCell, tokens, } from '@fluentui/react-components';
+import { GridContext, } from '@headless-adminapp/app/datagrid';
+import { useDataGridSchema, useGridColumns, useGridData, useGridSelection, useGridSorting, useMainGridContextCommands, useSubGridContextCommands, } from '@headless-adminapp/app/datagrid/hooks';
+import { useOpenRecord } from '@headless-adminapp/app/datagrid/hooks/useOpenRecord';
+import { useElementSize } from '@headless-adminapp/app/hooks';
+import { useLocale } from '@headless-adminapp/app/locale';
+import { useMetadata } from '@headless-adminapp/app/metadata/hooks';
+import { useContextSelector, useMutableState, } from '@headless-adminapp/app/mutable';
+import { useRecordSetSetter } from '@headless-adminapp/app/recordset/hooks';
+import { useRouter, useRouteResolver, } from '@headless-adminapp/app/route/hooks';
+import { calculateColumnWidths, getAttributeFormattedValue, } from '@headless-adminapp/app/utils';
+import { PageType } from '@headless-adminapp/core/experience/app';
+import { createColumnHelper, } from '@tanstack/react-table';
+import { Fragment, useEffect, useMemo, useRef } from 'react';
+import { componentStore } from '../componentStore';
+import { TableHeaderFilterCell } from '../DataGrid/GridColumnHeader';
+import { TableCellText } from '../DataGrid/TableCell';
+import { TableCellLink } from '../DataGrid/TableCell/TableCellLink';
+import { getAvatarColor } from '../utils/avatar';
+import { ActionCell } from './ActionCell';
+import { TableCellChoice } from './TableCell/TableCellChoice';
+const columnHelper = createColumnHelper();
+const useStyles = makeStyles({
     selectionCell: {
         position: 'sticky',
         left: 0,
-        background: react_components_1.tokens.colorNeutralBackground1,
+        background: tokens.colorNeutralBackground1,
         zIndex: 1,
         display: 'flex',
         alignItems: 'center',
     },
 });
-function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }) {
+export 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 { schemaStore } = (0, hooks_3.useMetadata)();
-    const [selectedIds, setSelectedIds] = (0, hooks_1.useGridSelection)();
-    const setSelectedIdsRef = (0, react_1.useRef)(setSelectedIds);
+    const data = useGridData();
+    const columns = useGridColumns();
+    const [, setSorting] = useGridSorting();
+    const schema = useDataGridSchema();
+    const { schemaStore } = useMetadata();
+    const [selectedIds, setSelectedIds] = useGridSelection();
+    const setSelectedIdsRef = useRef(setSelectedIds);
     setSelectedIdsRef.current = setSelectedIds;
-    const isSubgrid = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.isSubGrid);
+    const isSubgrid = useContextSelector(GridContext, (state) => state.isSubGrid);
     const contextCommands = isSubgrid
         ? // eslint-disable-next-line react-hooks/rules-of-hooks
-            (0, hooks_1.useSubGridContextCommands)()
+            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)(() => {
+            useMainGridContextCommands();
+    const mutableContextCommandState = useMutableState(contextCommands, true);
+    useEffect(() => {
         mutableContextCommandState.setValue(contextCommands);
     }, [contextCommands, mutableContextCommandState]);
-    const tableWrapperSize = (0, hooks_2.useElementSize)(tableWrapperRef, 100);
-    const columnWidths = (0, react_1.useMemo)(() => {
+    const tableWrapperSize = useElementSize(tableWrapperRef, 100);
+    const columnWidths = 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)({
+        const { columns: calculatedColumns } = calculateColumnWidths({
             availableWidth,
             gapWidth: 0,
             columns: columns.map((column) => {
@@ -70,15 +68,15 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         });
         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, useOpenRecord_1.useOpenRecord)();
-    const locale = (0, locale_1.useLocale)();
-    const dataRef = (0, react_1.useRef)(data);
+    const gridColumns = useGridColumns();
+    const routeResolver = useRouteResolver();
+    const router = useRouter();
+    const recordSetSetter = useRecordSetSetter();
+    const openRecord = useOpenRecord();
+    const locale = useLocale();
+    const dataRef = useRef(data);
     dataRef.current = data;
-    const headingSelectionState = (0, react_1.useMemo)(() => {
+    const headingSelectionState = useMemo(() => {
         var _a;
         if ((data === null || data === void 0 ? void 0 : data.records.length) === 0) {
             return false;
@@ -91,13 +89,13 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         }
         return 'mixed';
     }, [data === null || data === void 0 ? void 0 : data.records.length, selectedIds]);
-    const actionColumns = (0, react_1.useMemo)(() => {
+    const actionColumns = useMemo(() => {
         if (disableContextMenu)
             return [];
         return [
             columnHelper.accessor((info) => info[schema.idAttribute], {
                 id: '$actionColumn',
-                header: () => ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { style: {
+                header: () => (_jsx(TableHeaderCell, { style: {
                         minWidth: 32,
                         flexShrink: 0,
                         // width: 32,
@@ -107,10 +105,10 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                         right: 0,
                         top: 0,
                         // zIndex: 1,
-                        background: react_components_1.tokens.colorNeutralBackground1,
-                        borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+                        background: tokens.colorNeutralBackground1,
+                        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
                     }, children: "\u00A0" })),
-                cell: (info) => ((0, jsx_runtime_1.jsx)(ActionCell_1.ActionCell, { onOpen: () => {
+                cell: (info) => (_jsx(ActionCell, { onOpen: () => {
                         const id = info.row.original[schema.idAttribute];
                         setSelectedIdsRef.current([id]);
                     }, mutableState: mutableContextCommandState })),
@@ -121,7 +119,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
             }),
         ];
     }, [disableContextMenu, mutableContextCommandState, schema.idAttribute]);
-    const selectionColumns = (0, react_1.useMemo)(() => {
+    const selectionColumns = useMemo(() => {
         if (disableSelection)
             return [];
         function getAllIds() {
@@ -152,18 +150,18 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         return [
             columnHelper.accessor((info) => info[schema.idAttribute], {
                 id: '$selectColumn',
-                header: () => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { checked: headingSelectionState, as: 'th', style: {
+                header: () => (_jsx(TableSelectionCell, { checked: headingSelectionState, as: 'th', style: {
                         position: 'sticky',
                         display: 'flex',
                         left: 0,
                         top: 0,
-                        background: react_components_1.tokens.colorNeutralBackground1,
+                        background: 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) => {
+                cell: (info) => (_jsx(TableSelectionCell, { className: mergeClasses(styles.selectionCell), checked: info.row.getIsSelected(), onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         toggleSelectedId(info);
@@ -184,7 +182,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         schema.idAttribute,
         styles.selectionCell,
     ]);
-    const restColumns = (0, react_1.useMemo)(() => {
+    const restColumns = useMemo(() => {
         return gridColumns.map((column, index) => {
             function onChangeSortDirection(direction) {
                 setSorting([
@@ -239,12 +237,12 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         recordSetSetter,
         router,
     ]);
-    return (0, react_1.useMemo)(() => {
+    return 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));
+    return (_jsx(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;
@@ -263,7 +261,7 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         attribute = schema.attributes[column.name];
         value = info.getValue();
     }
-    const formattedValue = (_c = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
+    const formattedValue = (_c = getAttributeFormattedValue(attribute, value, {
         currency: currency.currency,
         dateFormat: dateFormats.short,
         timeFormat: timeFormats.short,
@@ -273,51 +271,102 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         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));
+        return (_jsx(TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
     }
     if (column.component) {
-        const Component = componentStore_1.componentStore.getComponent(column.component);
+        const Component = 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() }));
+        return (_jsx(Component, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
     }
     if (schema.primaryAttribute === column.name) {
-        const path = routeResolver({
-            logicalName: schema.logicalName,
-            type: app_1.PageType.EntityForm,
-            id: info.row.original[schema.idAttribute],
+        return renderPrimaryAttribute({
+            info,
+            column,
+            routeResolver,
+            openRecord,
+            schema,
+            value: value,
         });
-        return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: value, width: info.column.getSize(), href: path, onClick: () => {
-                openRecord(info.row.original[schema.idAttribute]);
-            } }, column.id));
     }
     switch (attribute === null || attribute === void 0 ? void 0 : attribute.type) {
         case 'money':
-            return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize(), textAlignment: "right" }, column.id));
+            return (_jsx(TableCellText, { value: formattedValue, width: info.column.getSize(), textAlignment: "right" }, column.id));
         case 'lookup': {
-            if (!value) {
-                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
-            }
-            const path = routeResolver({
-                logicalName: attribute.entity,
-                type: app_1.PageType.EntityForm,
-                id: value.id,
+            return renderLookupAttribute({
+                info,
+                column,
+                schemaStore,
+                routeResolver,
+                recordSetSetter,
+                router,
+                value,
+                attribute,
+                formattedValue,
             });
-            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: path, onClick: () => {
-                    recordSetSetter('', []);
-                    router.push(path);
-                } }, column.id));
         }
         case 'attachment': {
             const url = value === null || value === void 0 ? void 0 : value.url;
             if (!url) {
-                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+                return (_jsx(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));
+            return (_jsx(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 (_jsx(TableCellChoice, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
+    }
+    return (_jsx(TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
+}
+function renderPrimaryAttribute({ info, column, schema, routeResolver, openRecord, value, }) {
+    const path = routeResolver({
+        logicalName: schema.logicalName,
+        type: PageType.EntityForm,
+        id: info.row.original[schema.idAttribute],
+    });
+    return (_jsx(TableCellLink, { value: _jsxs(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 (_jsx(Avatar, { style: {
+            width: 24,
+            height: 24,
+            fontSize: tokens.fontSizeBase100,
+        }, name: value, color: getAvatarColor(value), image: {
+            src: avatarValue === null || avatarValue === void 0 ? void 0 : avatarValue.url,
+        } }));
+}
+function renderLookupAttribute({ value, info, column, schemaStore, routeResolver, recordSetSetter, router, attribute, formattedValue, }) {
+    if (!value) {
+        return (_jsx(TableCellText, { value: "", width: info.column.getSize() }, column.id));
     }
-    return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
+    const lookupSchema = schemaStore.getSchema(attribute.entity);
+    const path = routeResolver({
+        logicalName: attribute.entity,
+        type: PageType.EntityForm,
+        id: value.id,
+    });
+    return (_jsx(TableCellLink, { value: _jsxs(Fragment, { children: [!!lookupSchema.avatarAttribute && (_jsx(Avatar, { style: {
+                        width: 24,
+                        height: 24,
+                        fontSize: tokens.fontSizeBase100,
+                    }, name: formattedValue, color: getAvatarColor(formattedValue), image: {
+                        src: value.avatar,
+                    } })), formattedValue] }), width: info.column.getSize(), href: path, onClick: () => {
+            recordSetSetter('', []);
+            router.push(path);
+        } }, column.id));
 }

package/DataGrid/utils.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.adjustTableHeight = void 0;
-const adjustTableHeight = (tableRef, virtualHeight) => {
+export const adjustTableHeight = (tableRef, virtualHeight) => {
     if (!tableRef.current)
         return;
     // calculate the height for the pseudo element after the table
@@ -12,4 +9,3 @@ const adjustTableHeight = (tableRef, virtualHeight) => {
     document.documentElement.style.setProperty('--pseudo-height', `${pseudoHeight}px`);
     return pseudoHeight;
 };
-exports.adjustTableHeight = adjustTableHeight;

package/DialogContainer/AlertDialog.js

@@ -1,14 +1,11 @@
-"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) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, } from '@fluentui/react-components';
+export function AlertDialog(props) {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
+    return (_jsx(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: () => {
+        }, children: _jsx(DialogSurface, { style: { maxWidth: 480 }, children: _jsxs(DialogBody, { children: [!!props.title && _jsx(DialogTitle, { children: props.title }), _jsx(DialogContent, { children: props.message }), _jsx(DialogActions, { children: _jsx(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.js

@@ -1,17 +1,14 @@
-"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) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, } from '@fluentui/react-components';
+export function ConfirmDialog(props) {
     var _a, _b;
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
+    return (_jsx(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: () => {
+        }, children: _jsx(DialogSurface, { style: { maxWidth: 480 }, children: _jsxs(DialogBody, { children: [!!props.title && _jsx(DialogTitle, { children: props.title }), _jsx(DialogContent, { children: props.message }), _jsxs(DialogActions, { children: [_jsx(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: () => {
+                                }, children: (_a = props.cancelText) !== null && _a !== void 0 ? _a : 'Cancel' }), _jsx(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.js

@@ -1,4 +1,3 @@
-"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)
@@ -10,34 +9,31 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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) => {
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDialogItems } from '@headless-adminapp/app/dialog/hooks';
+import { AlertDialog } from './AlertDialog';
+import { ConfirmDialog } from './ConfirmDialog';
+import { ErrorDialog } from './ErrorDialog';
+import { PromptDialog } from './PromptDialog';
+export const DialogContainer = () => {
+    const items = useDialogItems();
+    return (_jsx(_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));
+                    return (_jsx(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));
+                    return (_jsx(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));
+                    return (_jsx(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, 
+                    return (_jsx(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 (_jsx(options.Component, Object.assign({ id: id, isOpen: isOpen }, options.props), id));
             }
             return null;
         }) }));
 };
-exports.DialogContainer = DialogContainer;

package/DialogContainer/ErrorDialog.js

@@ -1,21 +1,18 @@
-"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) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, tokens, } from '@fluentui/react-components';
+import { Icons } from '@headless-adminapp/icons';
+export function ErrorDialog(props) {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
+    return (_jsx(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,
+        }, children: _jsx(DialogSurface, { style: { maxWidth: 480 }, children: _jsxs(DialogBody, { children: [_jsxs(DialogTitle, { style: { display: 'flex', alignItems: 'center' }, children: [_jsx("span", { style: {
+                                    color: 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: () => {
+                                    marginRight: tokens.spacingHorizontalS,
+                                }, children: _jsx(Icons.Error, {}) }), props.title || 'Error'] }), _jsx(DialogContent, { children: props.message }), _jsx(DialogActions, { children: _jsx(Button, { appearance: "primary", style: { background: 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' }) })] }) }) }));