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

package/DataGrid/CustomizeColumns/CustomizeColumns.js

@@ -1,40 +1,34 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomizeColumns = CustomizeColumns;
-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 mutable_1 = require("@headless-adminapp/app/mutable");
-const icons_1 = require("@headless-adminapp/icons");
-const immutability_helper_1 = __importDefault(require("immutability-helper"));
-const react_1 = require("react");
-const react_dnd_1 = require("react-dnd");
-const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
-const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
-const AddColumns_1 = require("./AddColumns");
-const ColumnItem_1 = require("./ColumnItem");
-function CustomizeColumns({ onClose, opened }) {
-    const columns = (0, hooks_1.useGridColumns)();
-    const setContextValue = (0, mutable_1.useContextSetValue)(datagrid_1.GridContext);
-    const [showAddColumns, setShowAddColumns] = (0, react_1.useState)(false);
-    const [items, setItems] = (0, react_1.useState)(columns);
-    const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
-    const isDirty = (0, react_1.useMemo)(() => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Divider, Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, tokens, } from '@fluentui/react-components';
+import { GridContext, } from '@headless-adminapp/app/datagrid';
+import { useGridColumns } from '@headless-adminapp/app/datagrid/hooks';
+import { useContextSetValue } from '@headless-adminapp/app/mutable';
+import { Icons } from '@headless-adminapp/icons';
+import update from 'immutability-helper';
+import { useCallback, useMemo, useState } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { usePageEntityViewStrings } from '../../PageEntityView/PageEntityViewStringContext';
+import { AddColumns } from './AddColumns';
+import { ColumnItem } from './ColumnItem';
+export function CustomizeColumns({ onClose, opened }) {
+    const columns = useGridColumns();
+    const setContextValue = useContextSetValue(GridContext);
+    const [showAddColumns, setShowAddColumns] = useState(false);
+    const [items, setItems] = useState(columns);
+    const strings = usePageEntityViewStrings();
+    const isDirty = useMemo(() => {
         return JSON.stringify(items) !== JSON.stringify(columns);
     }, [columns, items]);
-    const moveItem = (0, react_1.useCallback)((dragIndex, hoverIndex) => {
-        setItems((prevCards) => (0, immutability_helper_1.default)(prevCards, {
+    const moveItem = useCallback((dragIndex, hoverIndex) => {
+        setItems((prevCards) => update(prevCards, {
             $splice: [
                 [dragIndex, 1],
                 [hoverIndex, 0, prevCards[dragIndex]],
             ],
         }));
     }, []);
-    const onColumnAdd = (0, react_1.useCallback)((column) => {
+    const onColumnAdd = useCallback((column) => {
         setItems((prev) => {
             if (prev.some((x) => x.id === column.id)) {
                 return prev;
@@ -42,37 +36,37 @@ function CustomizeColumns({ onClose, opened }) {
             return [...prev, column];
         });
     }, []);
-    const onColumnRemove = (0, react_1.useCallback)((column) => {
+    const onColumnRemove = useCallback((column) => {
         setItems((prev) => prev.filter((x) => x.id !== column.id));
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Drawer, { separator: true, open: opened, position: "end", size: "small", children: [(0, jsx_runtime_1.jsx)(react_components_1.DrawerHeader, { children: (0, jsx_runtime_1.jsx)(react_components_1.DrawerHeaderTitle, { action: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, {}), onClick: onClose }), children: strings.editColumns }) }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%', display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs(Drawer, { separator: true, open: opened, position: "end", size: "small", children: [_jsx(DrawerHeader, { children: _jsx(DrawerHeaderTitle, { action: _jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: _jsx(Icons.Close, {}), onClick: onClose }), children: strings.editColumns }) }), _jsxs("div", { style: { width: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: {
                             display: 'flex',
                             gap: 8,
-                            marginBottom: react_components_1.tokens.spacingVerticalXS,
-                            paddingInline: react_components_1.tokens.spacingHorizontalS,
-                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), style: {
-                                    fontWeight: react_components_1.tokens.fontSizeBase400,
+                            marginBottom: tokens.spacingVerticalXS,
+                            paddingInline: tokens.spacingHorizontalS,
+                        }, children: [_jsx(Button, { appearance: "subtle", icon: _jsx(Icons.Add, {}), style: {
+                                    fontWeight: tokens.fontSizeBase400,
                                     minWidth: 'unset',
-                                }, onClick: () => setShowAddColumns(true), children: strings.add }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Edit, {}), style: { fontWeight: react_components_1.tokens.fontSizeBase400, minWidth: 'unset' }, disabled: !isDirty, onClick: () => {
+                                }, onClick: () => setShowAddColumns(true), children: strings.add }), _jsx(Button, { appearance: "subtle", icon: _jsx(Icons.Edit, {}), style: { fontWeight: tokens.fontSizeBase400, minWidth: 'unset' }, disabled: !isDirty, onClick: () => {
                                     setItems(columns);
-                                }, children: strings.reset })] }), (0, jsx_runtime_1.jsx)(AddColumns_1.AddColumns, { onColumnAdd: onColumnAdd, onColumnRemove: onColumnRemove, columns: items, opened: showAddColumns, onClose: () => setShowAddColumns(false) }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, {})] }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { paddingInline: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                }, children: strings.reset })] }), _jsx(AddColumns, { onColumnAdd: onColumnAdd, onColumnRemove: onColumnRemove, columns: items, opened: showAddColumns, onClose: () => setShowAddColumns(false) }), _jsx(Divider, {})] }), _jsx(DrawerBody, { style: { paddingInline: tokens.spacingHorizontalS }, children: _jsx(DndProvider, { backend: HTML5Backend, children: _jsx("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             width: '100%',
-                            gap: react_components_1.tokens.spacingVerticalS,
+                            gap: tokens.spacingVerticalS,
                             // padding: tokens.spacingHorizontalS,
-                            paddingBlock: react_components_1.tokens.spacingVerticalS,
-                        }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ColumnItem_1.ColumnItem, { index: index, item: item, moveItem: moveItem, isFirst: index === 0, isLast: index === items.length - 1, onRemove: () => onColumnRemove(item), stringSet: strings }, item.id))) }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            paddingBlock: tokens.spacingVerticalS,
+                        }, children: items.map((item, index) => (_jsx(ColumnItem, { index: index, item: item, moveItem: moveItem, isFirst: index === 0, isLast: index === items.length - 1, onRemove: () => onColumnRemove(item), stringSet: strings }, item.id))) }) }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [_jsx(Divider, {}), _jsxs("div", { style: {
                             display: 'flex',
                             padding: 8,
                             gap: 8,
                             justifyContent: 'flex-end',
-                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
+                        }, children: [_jsx(Button, { onClick: () => {
                                     setContextValue({
                                         columns: items,
                                     });
                                     onClose();
-                                }, appearance: "primary", children: strings.apply }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
+                                }, appearance: "primary", children: strings.apply }), _jsx(Button, { onClick: () => {
                                     onClose();
                                 }, children: strings.cancel })] })] })] }));
 }

package/DataGrid/CustomizeColumns/index.js

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

package/DataGrid/FormSubgridCommandContainer.js

@@ -1,24 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormSubgridCommandContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const datagrid_1 = require("@headless-adminapp/app/datagrid");
-const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
-const mutable_1 = require("@headless-adminapp/app/mutable");
-const OverflowCommandBar_1 = require("../OverflowCommandBar");
-const FormSubgridCommandContainer = () => {
-    const isSubgrid = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.isSubGrid);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GridContext } from '@headless-adminapp/app/datagrid';
+import { useMainGridCommands, useSubGridCommands, } from '@headless-adminapp/app/datagrid/hooks';
+import { useContextSelector } from '@headless-adminapp/app/mutable';
+import { OverflowCommandBar } from '../OverflowCommandBar';
+export const FormSubgridCommandContainer = () => {
+    const isSubgrid = useContextSelector(GridContext, (state) => state.isSubGrid);
     if (isSubgrid) {
-        return (0, jsx_runtime_1.jsx)(InternalSubGridCommandContainer, {});
+        return _jsx(InternalSubGridCommandContainer, {});
     }
-    return (0, jsx_runtime_1.jsx)(InternalMainGridCommandContainer, {});
+    return _jsx(InternalMainGridCommandContainer, {});
 };
-exports.FormSubgridCommandContainer = FormSubgridCommandContainer;
 const InternalMainGridCommandContainer = () => {
-    const gridCommands = (0, hooks_1.useMainGridCommands)();
-    return (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: gridCommands });
+    const gridCommands = useMainGridCommands();
+    return _jsx(OverflowCommandBar, { commands: gridCommands });
 };
 const InternalSubGridCommandContainer = () => {
-    const gridCommands = (0, hooks_1.useSubGridCommands)();
-    return (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: gridCommands });
+    const gridCommands = useSubGridCommands();
+    return _jsx(OverflowCommandBar, { commands: gridCommands });
 };

package/DataGrid/FormSubgridViewSelector.js

@@ -1,21 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormSubgridViewSelector = void 0;
-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 locale_1 = require("@headless-adminapp/app/locale");
-const mutable_1 = require("@headless-adminapp/app/mutable");
-const icons_1 = require("@headless-adminapp/icons");
-const FormSubgridViewSelector = () => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, } from '@fluentui/react-components';
+import { GridContext } from '@headless-adminapp/app/datagrid';
+import { useChangeView, useGridViewLookupData, useSelectedView, } from '@headless-adminapp/app/datagrid/hooks';
+import { useLocale } from '@headless-adminapp/app/locale';
+import { useContextSelector } from '@headless-adminapp/app/mutable';
+import { Icons } from '@headless-adminapp/icons';
+export const FormSubgridViewSelector = () => {
     var _a, _b;
-    const viewLookup = (0, hooks_1.useGridViewLookupData)();
-    const selectedView = (0, hooks_1.useSelectedView)();
-    const changeView = (0, hooks_1.useChangeView)();
-    const { language } = (0, locale_1.useLocale)();
-    const allowViewSelection = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.allowViewSelection);
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    const viewLookup = useGridViewLookupData();
+    const selectedView = useSelectedView();
+    const changeView = useChangeView();
+    const { language } = useLocale();
+    const allowViewSelection = useContextSelector(GridContext, (state) => state.allowViewSelection);
+    return (_jsx("div", { style: {
             alignItems: 'center',
             paddingBlock: 4,
             paddingInline: 4,
@@ -23,19 +20,18 @@ const FormSubgridViewSelector = () => {
             width: '100%',
             display: 'flex',
             height: 40,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: _jsx("div", { style: {
                 flex: 1,
                 alignItems: 'center',
                 gap: 16,
                 justifyContent: 'space-between',
                 display: 'flex',
-            }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: allowViewSelection ? (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}) : null, iconPosition: "after", style: {
+            }, children: _jsxs(Menu, { children: [_jsx(MenuTrigger, { children: _jsx(Button, { appearance: "subtle", icon: allowViewSelection ? _jsx(Icons.ChevronDown, {}) : null, iconPosition: "after", style: {
                                 paddingInline: 8,
                                 paddingBlock: 4,
                                 pointerEvents: allowViewSelection ? 'auto' : 'none',
-                            }, children: (_b = (_a = selectedView.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : selectedView.name }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => {
+                            }, children: (_b = (_a = selectedView.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : selectedView.name }) }), _jsx(MenuPopover, { children: _jsx(MenuList, { children: viewLookup.map((view) => {
                                 var _a, _b;
-                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), children: (_b = (_a = view.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : view.name }, view.id));
+                                return (_jsx(MenuItem, { onClick: () => changeView(view.id), children: (_b = (_a = view.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : view.name }, view.id));
                             }) }) })] }) }) }));
 };
-exports.FormSubgridViewSelector = FormSubgridViewSelector;

package/DataGrid/GridColumnHeader/ConditionValueControl.js

@@ -1,35 +1,29 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConditionValueControl = ConditionValueControl;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
-const transport_1 = require("@headless-adminapp/app/transport");
-const FormControl_1 = __importDefault(require("../../form/FormControl"));
-function ConditionValueControl({ attribute, type, value, onChange, }) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMetadata } from '@headless-adminapp/app/metadata/hooks';
+import { useDataService } from '@headless-adminapp/app/transport';
+import FormControl from '../../form/FormControl';
+export function ConditionValueControl({ attribute, type, value, onChange, }) {
     var _a, _b, _c, _d;
-    const dataService = (0, transport_1.useDataService)();
-    const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
+    const dataService = useDataService();
+    const { schemaStore, experienceStore } = useMetadata();
     switch (type) {
         case 'string':
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "text", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
+            return (_jsx(FormControl, { type: "text", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
                     onChange === null || onChange === void 0 ? void 0 : onChange(value);
                 } }));
         case 'number':
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "number", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
+            return (_jsx(FormControl, { type: "number", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
                     onChange === null || onChange === void 0 ? void 0 : onChange(value);
                 } }));
         case 'money':
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "currency", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
+            return (_jsx(FormControl, { type: "currency", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
                     onChange === null || onChange === void 0 ? void 0 : onChange(value);
                 } }));
         case 'lookup':
             if (attribute.type !== 'lookup') {
                 return null;
             }
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "lookups", async: true, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
+            return (_jsx(FormControl, { type: "lookups", async: true, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
                     onChange === null || onChange === void 0 ? void 0 : onChange(value !== null && value !== void 0 ? value : []);
                 } }));
         // return (
@@ -46,14 +40,14 @@ function ConditionValueControl({ attribute, type, value, onChange, }) {
         //   />
         // );
         case 'date':
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "date", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
+            return (_jsx(FormControl, { type: "date", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
                     onChange === null || onChange === void 0 ? void 0 : onChange(value);
                 } }));
         case 'boolean':
             if (attribute.type !== 'boolean') {
                 return null;
             }
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "multi-select", options: [
+            return (_jsx(FormControl, { type: "multi-select", options: [
                     {
                         label: (_a = attribute.trueLabel) !== null && _a !== void 0 ? _a : 'Yes',
                         value: 'true',
@@ -73,7 +67,7 @@ function ConditionValueControl({ attribute, type, value, onChange, }) {
             }
             const isNumeric = 'number' in attribute && attribute.number === true;
             // const isString = 'string' in attribute && attribute.string === true;
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "multi-select", options: attribute.options.map((x) => {
+            return (_jsx(FormControl, { type: "multi-select", options: attribute.options.map((x) => {
                     var _a;
                     return ({
                         label: x.label,

package/DataGrid/GridColumnHeader/FilterForm.js

@@ -1,26 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterForm = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const column_filter_1 = require("@headless-adminapp/app/datagrid/column-filter");
-const react_1 = require("react");
-const AppStringContext_1 = require("../../App/AppStringContext");
-const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
-const ConditionValueControl_1 = require("./ConditionValueControl");
-const OperatorSelect_1 = require("./OperatorSelect");
-const utils_1 = require("./utils");
-const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
-    const [operator, setOperator] = (0, react_1.useState)((0, utils_1.getDefaultOperator)(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.operator, attribute.type));
-    const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
-    const { operatorStrings } = (0, AppStringContext_1.useAppStrings)();
-    const operatorOptions = (0, react_1.useMemo)(() => {
-        return (0, column_filter_1.getLocalizedOperatorOptions)(operatorStrings);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogActions, DialogContent, DialogTrigger, tokens, } from '@fluentui/react-components';
+import { getLocalizedOperatorOptions } from '@headless-adminapp/app/datagrid/column-filter';
+import { Fragment, useMemo, useState } from 'react';
+import { useAppStrings } from '../../App/AppStringContext';
+import { usePageEntityViewStrings } from '../../PageEntityView/PageEntityViewStringContext';
+import { ConditionValueControl } from './ConditionValueControl';
+import { OperatorSelect } from './OperatorSelect';
+import { getDefaultOperator, getDefaultValues } from './utils';
+export const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
+    const [operator, setOperator] = useState(getDefaultOperator(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.operator, attribute.type));
+    const strings = usePageEntityViewStrings();
+    const { operatorStrings } = useAppStrings();
+    const operatorOptions = useMemo(() => {
+        return getLocalizedOperatorOptions(operatorStrings);
     }, [operatorStrings]);
-    const selectedOption = (0, react_1.useMemo)(() => {
+    const selectedOption = useMemo(() => {
         return operatorOptions[attribute.type].find((option) => option.value === operator);
     }, [operator, attribute.type, operatorOptions]);
-    const [values, setValues] = (0, react_1.useState)((0, utils_1.getDefaultValues)(selectedOption, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value, attribute.type));
+    const [values, setValues] = useState(getDefaultValues(selectedOption, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value, attribute.type));
     const handleChangeOperator = (operator) => {
         setOperator(operator);
         setValues([]);
@@ -32,26 +29,25 @@ const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
             return next;
         });
     };
-    const isValid = (0, react_1.useMemo)(() => {
+    const isValid = useMemo(() => {
         return (!!selectedOption &&
             values.filter((value) => {
                 return value !== null && value !== undefined;
             }).length === selectedOption.controls.length);
     }, [selectedOption, values]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { style: { paddingBlock: 8 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs(Fragment, { children: [_jsx(DialogContent, { style: { paddingBlock: 8 }, children: _jsxs("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
-                        gap: react_components_1.tokens.spacingVerticalS,
-                    }, children: [(0, jsx_runtime_1.jsx)(OperatorSelect_1.OperatorSelect, { attribute: attribute, onChange: (value) => handleChangeOperator(value), value: operator }), selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.controls.map((x, i) => {
+                        gap: tokens.spacingVerticalS,
+                    }, children: [_jsx(OperatorSelect, { attribute: attribute, onChange: (value) => handleChangeOperator(value), value: operator }), selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.controls.map((x, i) => {
                             var _a;
-                            return ((0, jsx_runtime_1.jsx)(ConditionValueControl_1.ConditionValueControl, { type: x, attribute: attribute, value: (_a = values[i]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
+                            return (_jsx(ConditionValueControl, { type: x, attribute: attribute, value: (_a = values[i]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
                                     handleChangeValue(value, i);
                                 } }, x + String(i)));
-                        })] }) }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", onClick: onCancel, children: strings.cancel }) }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { type: "submit", appearance: "primary", disabled: !isValid, onClick: () => {
+                        })] }) }), _jsxs(DialogActions, { children: [_jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(Button, { appearance: "secondary", onClick: onCancel, children: strings.cancel }) }), _jsx(Button, { type: "submit", appearance: "primary", disabled: !isValid, onClick: () => {
                             onApply === null || onApply === void 0 ? void 0 : onApply({
                                 operator,
                                 value: values,
                             });
                         }, children: strings.apply })] })] }));
 };
-exports.FilterForm = FilterForm;

package/DataGrid/GridColumnHeader/OperatorSelect.js

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OperatorSelect = OperatorSelect;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const column_filter_1 = require("@headless-adminapp/app/datagrid/column-filter");
-const transport_1 = require("@headless-adminapp/app/transport");
-const react_1 = require("react");
-const AppStringContext_1 = require("../../App/AppStringContext");
-const SelectControl_1 = __importDefault(require("../../form/controls/SelectControl"));
-function OperatorSelect({ attribute, value, onChange, }) {
-    const { operatorStrings } = (0, AppStringContext_1.useAppStrings)();
-    const dataService = (0, transport_1.useDataService)();
-    const operatorOptions = (0, react_1.useMemo)(() => {
-        return (0, column_filter_1.getLocalizedOperatorOptions)(operatorStrings);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getLocalizedOperatorOptions } from '@headless-adminapp/app/datagrid/column-filter';
+import { useDataService } from '@headless-adminapp/app/transport';
+import { useMemo } from 'react';
+import { useAppStrings } from '../../App/AppStringContext';
+import SelectControl from '../../form/controls/SelectControl';
+export function OperatorSelect({ attribute, value, onChange, }) {
+    const { operatorStrings } = useAppStrings();
+    const dataService = useDataService();
+    const operatorOptions = useMemo(() => {
+        return getLocalizedOperatorOptions(operatorStrings);
     }, [operatorStrings]);
-    const options = (0, react_1.useMemo)(() => {
+    const options = useMemo(() => {
         const supportedOperators = dataService.supportedOperators;
         let operators = operatorOptions[attribute.type];
         if (supportedOperators) {
@@ -24,5 +18,5 @@ function OperatorSelect({ attribute, value, onChange, }) {
         }
         return operators;
     }, [attribute.type, operatorOptions, dataService]);
-    return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, { options: options, onChange: (value) => onChange === null || onChange === void 0 ? void 0 : onChange(value), value: value }));
+    return (_jsx(SelectControl, { options: options, onChange: (value) => onChange === null || onChange === void 0 ? void 0 : onChange(value), value: value }));
 }

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableHeaderFilterCell = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
-const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
-const icons_1 = require("@headless-adminapp/icons");
-const react_1 = require("react");
-const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
-const FilterForm_1 = require("./FilterForm");
-const useStyles = (0, react_components_1.makeStyles)({
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogBody, DialogSurface, DialogTitle, makeStyles, Menu, MenuDivider, MenuItem, MenuList, MenuPopover, MenuTrigger, mergeClasses, TableHeaderCell, tokens, } from '@fluentui/react-components';
+import { useDataGridSchema, useGridColumnFilter, } from '@headless-adminapp/app/datagrid/hooks';
+import { useMetadata } from '@headless-adminapp/app/metadata/hooks';
+import { Icons } from '@headless-adminapp/icons';
+import { Fragment, useMemo, useRef, useState, } from 'react';
+import { usePageEntityViewStrings } from '../../PageEntityView/PageEntityViewStringContext';
+import { FilterForm } from './FilterForm';
+const useStyles = makeStyles({
     root: {
         cursor: 'pointer',
         userSelect: 'none',
         '&:active': {
-            backgroundColor: react_components_1.tokens.colorSubtleBackgroundPressed,
+            backgroundColor: tokens.colorSubtleBackgroundPressed,
         },
         '&:hover [data-id="resize-handle"]': {
             opacity: 0.5,
@@ -41,7 +38,7 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
     resizeHandleInner: {
         width: '2px',
-        background: react_components_1.tokens.colorNeutralForeground1,
+        background: tokens.colorNeutralForeground1,
         // borderLeft: `1px solid ${tokens.colorNeutralForeground1}`,
         // borderRight: `1px solid ${tokens.colorNeutralForeground1}`,
     },
@@ -51,7 +48,7 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const TableHeaderFilterCell = ({ children, sortDirection, 
+export const TableHeaderFilterCell = ({ children, sortDirection, 
 // onChangeFilterCondition,
 onChangeSortDirection, 
 // attribute,
@@ -59,11 +56,11 @@ onChangeSortDirection,
 minWidth, 
 // onChangeWidth,
 column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) => {
-    const [visible, setVisible] = (0, react_1.useState)(false);
-    const schema = (0, hooks_1.useDataGridSchema)();
-    const { schemaStore } = (0, hooks_2.useMetadata)();
-    const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
-    const attribute = (0, react_1.useMemo)(() => {
+    const [visible, setVisible] = useState(false);
+    const schema = useDataGridSchema();
+    const { schemaStore } = useMetadata();
+    const strings = usePageEntityViewStrings();
+    const attribute = useMemo(() => {
         const _attribute = schema.attributes[column.name];
         if (!column.expandedKey) {
             return _attribute;
@@ -74,7 +71,7 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
         const lookupSchema = schemaStore.getSchema(_attribute.entity);
         return lookupSchema.attributes[column.expandedKey];
     }, [column.expandedKey, column.name, schemaStore, schema.attributes]);
-    const align = (0, react_1.useMemo)(() => {
+    const align = useMemo(() => {
         switch (attribute.type) {
             case 'money':
             case 'number':
@@ -84,14 +81,14 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
         }
     }, [attribute.type]);
     const styles = useStyles();
-    const isResizingRef = (0, react_1.useRef)(false);
-    const [columnFilters, setColumnFilters] = (0, hooks_1.useGridColumnFilter)();
+    const isResizingRef = useRef(false);
+    const [columnFilters, setColumnFilters] = useGridColumnFilter();
     const filterCondition = columnFilters[column.id];
     const onChangeFilterCondition = (condition) => {
         setColumnFilters(column.id, condition);
     };
-    const sortMenuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowUp, { size: 16 }), onClick: () => onChangeSortDirection === null || onChangeSortDirection === void 0 ? void 0 : onChangeSortDirection('asc'), children: strings.sortByAscending }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowDown, { size: 16 }), onClick: () => onChangeSortDirection === null || onChangeSortDirection === void 0 ? void 0 : onChangeSortDirection('desc'), children: strings.sortByDescending })] }));
-    const filterMenuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }), onClick: () => setVisible(!visible), children: strings.filter }), !!filterCondition && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.FilterDismiss, { size: 16 }), onClick: () => {
+    const sortMenuItems = (_jsxs(_Fragment, { children: [_jsx(MenuItem, { icon: _jsx(Icons.ArrowUp, { size: 16 }), onClick: () => onChangeSortDirection === null || onChangeSortDirection === void 0 ? void 0 : onChangeSortDirection('asc'), children: strings.sortByAscending }), _jsx(MenuItem, { icon: _jsx(Icons.ArrowDown, { size: 16 }), onClick: () => onChangeSortDirection === null || onChangeSortDirection === void 0 ? void 0 : onChangeSortDirection('desc'), children: strings.sortByDescending })] }));
+    const filterMenuItems = (_jsxs(_Fragment, { children: [_jsx(MenuItem, { icon: _jsx(Icons.Filter, { size: 16 }), onClick: () => setVisible(!visible), children: strings.filter }), !!filterCondition && (_jsx(MenuItem, { icon: _jsx(Icons.FilterDismiss, { size: 16 }), onClick: () => {
                     onChangeFilterCondition(undefined);
                 }, children: strings.clearFilter }))] }));
     const menuItems = [];
@@ -101,18 +98,18 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     if (!disableFilter) {
         menuItems.push(filterMenuItems);
     }
-    const headerCell = ((0, jsx_runtime_1.jsxs)(react_components_1.TableHeaderCell, { as: "div", className: (0, react_components_1.mergeClasses)(styles.root, align === 'right' && styles.right), style: {
+    const headerCell = (_jsxs(TableHeaderCell, { as: "div", className: mergeClasses(styles.root, align === 'right' && styles.right), style: {
             textAlign: align,
             width: minWidth,
             minWidth: minWidth,
             maxWidth: minWidth,
             display: 'flex',
             alignItems: 'center',
-            fontWeight: react_components_1.tokens.fontWeightMedium,
+            fontWeight: tokens.fontWeightMedium,
             // pointerEvents: disableFilter && disableSort ? 'none' : 'auto',
         }, onClick: (event) => {
             event.preventDefault();
-        }, aside: resizable ? ((0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.resizeHandle), "data-id": "resize-handle", onClick: (event) => {
+        }, aside: resizable ? (_jsx("div", { className: mergeClasses(styles.resizeHandle), "data-id": "resize-handle", onClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
             }, onDoubleClick: (event) => {
@@ -130,7 +127,7 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
                 event.stopPropagation();
                 event.preventDefault();
                 resizeHandler === null || resizeHandler === void 0 ? void 0 : resizeHandler(event);
-            }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.resizeHandleInner) }) })) : null, onMouseUp: (event) => {
+            }, children: _jsx("div", { className: mergeClasses(styles.resizeHandleInner) }) })) : null, onMouseUp: (event) => {
             event.preventDefault();
             if (isResizingRef.current) {
                 return;
@@ -138,16 +135,15 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
             isResizingRef.current = false;
         }, sortable: !disableSort, 
         // sortDirection="ascending"
-        sortDirection: getSortDirection(sortDirection), children: [children, !!filterCondition && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 2, color: react_components_1.tokens.colorNeutralForeground1 }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }) }))] }));
+        sortDirection: getSortDirection(sortDirection), children: [children, !!filterCondition && (_jsx("div", { style: { marginTop: 2, color: tokens.colorNeutralForeground1 }, children: _jsx(Icons.Filter, { size: 16 }) }))] }));
     if (disableFilter && disableSort) {
         return headerCell;
     }
-    return ((0, jsx_runtime_1.jsxs)("th", { children: [(0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: headerCell }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: menuItems.map((x, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), x] }, i))) }) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: visible, onOpenChange: () => setVisible(false), children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 400 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: strings.filterBy }), (0, jsx_runtime_1.jsx)(FilterForm_1.FilterForm, { attribute: attribute, defaultValue: filterCondition, onApply: (condition) => {
+    return (_jsxs("th", { children: [_jsxs(Menu, { positioning: "below-start", children: [_jsx(MenuTrigger, { children: headerCell }), _jsx(MenuPopover, { children: _jsx(MenuList, { children: menuItems.map((x, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx(MenuDivider, {}), x] }, i))) }) })] }), _jsx(Dialog, { open: visible, onOpenChange: () => setVisible(false), children: _jsx(DialogSurface, { style: { maxWidth: 400 }, children: _jsxs(DialogBody, { children: [_jsx(DialogTitle, { children: strings.filterBy }), _jsx(FilterForm, { attribute: attribute, defaultValue: filterCondition, onApply: (condition) => {
                                     onChangeFilterCondition(condition);
                                     setVisible(false);
                                 }, onCancel: () => setVisible(false) })] }) }) })] }));
 };
-exports.TableHeaderFilterCell = TableHeaderFilterCell;
 const getSortDirection = (direction) => {
     if (direction === 'asc') {
         return 'ascending';

package/DataGrid/GridColumnHeader/index.js

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

package/DataGrid/GridColumnHeader/utils.js

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDefaultOperator = getDefaultOperator;
-exports.getDefaultValues = getDefaultValues;
-function getDefaultOperator(operator, attributeType) {
+export function getDefaultOperator(operator, attributeType) {
     if (operator) {
         return operator;
     }
@@ -14,7 +10,7 @@ function getDefaultOperator(operator, attributeType) {
     }
     return 'eq';
 }
-function getDefaultValues(operator, value, _attributeType) {
+export function getDefaultValues(operator, value, _attributeType) {
     if (!value)
         return [];
     return Array.isArray(value) ? value : [value];