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

package/DataGrid/CustomizeColumns/CustomizeColumns.js

@@ -1,34 +1,39 @@
-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(() => {
+"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 DndProvider_1 = require("../../components/DndProvider");
+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)(() => {
         return JSON.stringify(items) !== JSON.stringify(columns);
     }, [columns, items]);
-    const moveItem = useCallback((dragIndex, hoverIndex) => {
-        setItems((prevCards) => update(prevCards, {
+    const moveItem = (0, react_1.useCallback)((dragIndex, hoverIndex) => {
+        setItems((prevCards) => (0, immutability_helper_1.default)(prevCards, {
             $splice: [
                 [dragIndex, 1],
                 [hoverIndex, 0, prevCards[dragIndex]],
             ],
         }));
     }, []);
-    const onColumnAdd = useCallback((column) => {
+    const onColumnAdd = (0, react_1.useCallback)((column) => {
         setItems((prev) => {
             if (prev.some((x) => x.id === column.id)) {
                 return prev;
@@ -36,37 +41,37 @@ export function CustomizeColumns({ onClose, opened }) {
             return [...prev, column];
         });
     }, []);
-    const onColumnRemove = useCallback((column) => {
+    const onColumnRemove = (0, react_1.useCallback)((column) => {
         setItems((prev) => prev.filter((x) => x.id !== column.id));
     }, []);
-    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: {
+    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: {
                             display: 'flex',
                             gap: 8,
-                            marginBottom: tokens.spacingVerticalXS,
-                            paddingInline: tokens.spacingHorizontalS,
-                        }, children: [_jsx(Button, { appearance: "subtle", icon: _jsx(Icons.Add, {}), style: {
-                                    fontWeight: tokens.fontSizeBase400,
+                            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,
                                     minWidth: 'unset',
-                                }, onClick: () => setShowAddColumns(true), children: strings.add }), _jsx(Button, { appearance: "subtle", icon: _jsx(Icons.Edit, {}), style: { fontWeight: tokens.fontSizeBase400, minWidth: 'unset' }, disabled: !isDirty, onClick: () => {
+                                }, 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: () => {
                                     setItems(columns);
-                                }, 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: {
+                                }, 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)(DndProvider_1.DndProvider, { children: (0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             width: '100%',
-                            gap: tokens.spacingVerticalS,
+                            gap: react_components_1.tokens.spacingVerticalS,
                             // padding: tokens.spacingHorizontalS,
-                            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: {
+                            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: {
                             display: 'flex',
                             padding: 8,
                             gap: 8,
                             justifyContent: 'flex-end',
-                        }, children: [_jsx(Button, { onClick: () => {
+                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
                                     setContextValue({
                                         columns: items,
                                     });
                                     onClose();
-                                }, appearance: "primary", children: strings.apply }), _jsx(Button, { onClick: () => {
+                                }, appearance: "primary", children: strings.apply }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
                                     onClose();
                                 }, children: strings.cancel })] })] })] }));
 }

package/DataGrid/CustomizeColumns/index.js

@@ -1 +1,5 @@
-export { CustomizeColumns } from './CustomizeColumns';
+"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; } });

package/DataGrid/FormSubgridCommandContainer.js

@@ -1,20 +1,24 @@
-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);
+"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);
     if (isSubgrid) {
-        return _jsx(InternalSubGridCommandContainer, {});
+        return (0, jsx_runtime_1.jsx)(InternalSubGridCommandContainer, {});
     }
-    return _jsx(InternalMainGridCommandContainer, {});
+    return (0, jsx_runtime_1.jsx)(InternalMainGridCommandContainer, {});
 };
+exports.FormSubgridCommandContainer = FormSubgridCommandContainer;
 const InternalMainGridCommandContainer = () => {
-    const gridCommands = useMainGridCommands();
-    return _jsx(OverflowCommandBar, { commands: gridCommands });
+    const gridCommands = (0, hooks_1.useMainGridCommands)();
+    return (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: gridCommands });
 };
 const InternalSubGridCommandContainer = () => {
-    const gridCommands = useSubGridCommands();
-    return _jsx(OverflowCommandBar, { commands: gridCommands });
+    const gridCommands = (0, hooks_1.useSubGridCommands)();
+    return (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: gridCommands });
 };

package/DataGrid/FormSubgridViewSelector.js

@@ -1,18 +1,20 @@
-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 = useGridViewLookupData();
-    const selectedView = useSelectedView();
-    const changeView = useChangeView();
-    const { language } = useLocale();
-    const allowViewSelection = useContextSelector(GridContext, (state) => state.allowViewSelection);
-    return (_jsx("div", { style: {
+"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 = () => {
+    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: {
             alignItems: 'center',
             paddingBlock: 4,
             paddingInline: 4,
@@ -20,18 +22,16 @@ export const FormSubgridViewSelector = () => {
             width: '100%',
             display: 'flex',
             height: 40,
-        }, children: _jsx("div", { style: {
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 flex: 1,
                 alignItems: 'center',
                 gap: 16,
                 justifyContent: 'space-between',
                 display: 'flex',
-            }, children: _jsxs(Menu, { children: [_jsx(MenuTrigger, { children: _jsx(Button, { appearance: "subtle", icon: allowViewSelection ? _jsx(Icons.ChevronDown, {}) : null, iconPosition: "after", style: {
+            }, 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: {
                                 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 }) }), _jsx(MenuPopover, { children: _jsx(MenuList, { children: viewLookup.map((view) => {
-                                var _a, _b;
-                                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));
-                            }) }) })] }) }) }));
+                            }, children: selectedView.localizedNames?.[language] ?? 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) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) }) }));
 };
+exports.FormSubgridViewSelector = FormSubgridViewSelector;

package/DataGrid/GridColumnHeader/ConditionValueControl.js

@@ -1,30 +1,35 @@
-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 = useDataService();
-    const { schemaStore, experienceStore } = useMetadata();
+"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, }) {
+    const dataService = (0, transport_1.useDataService)();
+    const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
     switch (type) {
         case 'string':
-            return (_jsx(FormControl, { type: "text", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "text", value: value ?? null, onChange: (value) => {
+                    onChange?.(value);
                 } }));
         case 'number':
-            return (_jsx(FormControl, { type: "number", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "number", value: value ?? null, onChange: (value) => {
+                    onChange?.(value);
                 } }));
         case 'money':
-            return (_jsx(FormControl, { type: "currency", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "currency", value: value ?? null, onChange: (value) => {
+                    onChange?.(value);
                 } }));
         case 'lookup':
             if (attribute.type !== 'lookup') {
                 return null;
             }
-            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 ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "lookups", async: true, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, value: value ?? null, onChange: (value) => {
+                    onChange?.(value ?? []);
                 } }));
         // return (
         //   <FormControl
@@ -40,25 +45,24 @@ export function ConditionValueControl({ attribute, type, value, onChange, }) {
         //   />
         // );
         case 'date':
-            return (_jsx(FormControl, { type: "date", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "date", value: value ?? null, onChange: (value) => {
+                    onChange?.(value);
                 } }));
         case 'boolean':
             if (attribute.type !== 'boolean') {
                 return null;
             }
-            return (_jsx(FormControl, { type: "multi-select", options: [
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "multi-select", options: [
                     {
-                        label: (_a = attribute.trueLabel) !== null && _a !== void 0 ? _a : 'Yes',
+                        label: attribute.trueLabel ?? 'Yes',
                         value: 'true',
                     },
                     {
-                        label: (_b = attribute.falseLabel) !== null && _b !== void 0 ? _b : 'No',
+                        label: attribute.falseLabel ?? 'No',
                         value: 'false',
                     },
-                ], value: (_c = value === null || value === void 0 ? void 0 : value.map((x) => (x === true ? 'true' : 'false'))) !== null && _c !== void 0 ? _c : [], onChange: (value) => {
-                    var _a;
-                    onChange === null || onChange === void 0 ? void 0 : onChange((_a = value === null || value === void 0 ? void 0 : value.map((x) => x === 'true')) !== null && _a !== void 0 ? _a : []);
+                ], value: value?.map((x) => (x === true ? 'true' : 'false')) ?? [], onChange: (value) => {
+                    onChange?.(value?.map((x) => x === 'true') ?? []);
                 } }));
         case 'choice':
         case 'choices':
@@ -67,15 +71,11 @@ export function ConditionValueControl({ attribute, type, value, onChange, }) {
             }
             const isNumeric = 'number' in attribute && attribute.number === true;
             // const isString = 'string' in attribute && attribute.string === true;
-            return (_jsx(FormControl, { type: "multi-select", options: attribute.options.map((x) => {
-                    var _a;
-                    return ({
-                        label: x.label,
-                        value: isNumeric ? (_a = x.value) === null || _a === void 0 ? void 0 : _a.toString() : x.value,
-                    });
-                }), value: (_d = value === null || value === void 0 ? void 0 : value.map((x) => (isNumeric ? x.toString() : x))) !== null && _d !== void 0 ? _d : [], onChange: (value) => {
-                    var _a;
-                    onChange === null || onChange === void 0 ? void 0 : onChange((_a = value === null || value === void 0 ? void 0 : value.map((x) => (isNumeric ? +x : x))) !== null && _a !== void 0 ? _a : []);
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "multi-select", options: attribute.options.map((x) => ({
+                    label: x.label,
+                    value: isNumeric ? x.value?.toString() : x.value,
+                })), value: value?.map((x) => (isNumeric ? x.toString() : x)) ?? [], onChange: (value) => {
+                    onChange?.(value?.map((x) => (isNumeric ? +x : x)) ?? []);
                 } }));
         default:
             return null;

package/DataGrid/GridColumnHeader/FilterForm.js

@@ -1,23 +1,26 @@
-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);
+"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?.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);
     }, [operatorStrings]);
-    const selectedOption = useMemo(() => {
+    const selectedOption = (0, react_1.useMemo)(() => {
         return operatorOptions[attribute.type].find((option) => option.value === operator);
     }, [operator, attribute.type, operatorOptions]);
-    const [values, setValues] = useState(getDefaultValues(selectedOption, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value, attribute.type));
+    const [values, setValues] = (0, react_1.useState)((0, utils_1.getDefaultValues)(selectedOption, defaultValue?.value, attribute.type));
     const handleChangeOperator = (operator) => {
         setOperator(operator);
         setValues([]);
@@ -29,25 +32,23 @@ export const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
             return next;
         });
     };
-    const isValid = useMemo(() => {
+    const isValid = (0, react_1.useMemo)(() => {
         return (!!selectedOption &&
             values.filter((value) => {
                 return value !== null && value !== undefined;
             }).length === selectedOption.controls.length);
     }, [selectedOption, values]);
-    return (_jsxs(Fragment, { children: [_jsx(DialogContent, { style: { paddingBlock: 8 }, children: _jsxs("div", { style: {
+    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: {
                         display: 'flex',
                         flexDirection: 'column',
-                        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 (_jsx(ConditionValueControl, { type: x, attribute: attribute, value: (_a = values[i]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
-                                    handleChangeValue(value, i);
-                                } }, x + String(i)));
-                        })] }) }), _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({
+                        gap: react_components_1.tokens.spacingVerticalS,
+                    }, children: [(0, jsx_runtime_1.jsx)(OperatorSelect_1.OperatorSelect, { attribute: attribute, onChange: (value) => handleChangeOperator(value), value: operator }), selectedOption?.controls.map((x, i) => ((0, jsx_runtime_1.jsx)(ConditionValueControl_1.ConditionValueControl, { type: x, attribute: attribute, value: values[i] ?? 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: () => {
+                            onApply?.({
                                 operator,
                                 value: values,
                             });
                         }, children: strings.apply })] })] }));
 };
+exports.FilterForm = FilterForm;

package/DataGrid/GridColumnHeader/OperatorSelect.js

@@ -1,16 +1,22 @@
-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);
+"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);
     }, [operatorStrings]);
-    const options = useMemo(() => {
+    const options = (0, react_1.useMemo)(() => {
         const supportedOperators = dataService.supportedOperators;
         let operators = operatorOptions[attribute.type];
         if (supportedOperators) {
@@ -18,5 +24,5 @@ export function OperatorSelect({ attribute, value, onChange, }) {
         }
         return operators;
     }, [attribute.type, operatorOptions, dataService]);
-    return (_jsx(SelectControl, { options: options, onChange: (value) => onChange === null || onChange === void 0 ? void 0 : onChange(value), value: value }));
+    return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, { options: options, onChange: (value) => onChange?.(value), value: value }));
 }