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

package/DataGrid/CustomizeColumns/AddColumns.js

@@ -13,7 +13,6 @@ const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
 const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
 function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, }) {
-    var _a;
     const schema = (0, hooks_1.useDataGridSchema)();
     const { schemaStore } = (0, hooks_2.useMetadata)();
     const { language } = (0, locale_1.useLocale)();
@@ -25,26 +24,29 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
         attribute,
     }))
         .filter(({ attribute }) => attribute.type === 'lookup');
-    const columnGroups = Object.assign({ root: {
+    const columnGroups = {
+        root: {
             label: (0, utils_1.localizedLabel)(language, schema),
             columns: (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(schema.attributes).map((key) => ({
                 name: key,
             })), schemaStore, language),
-        } }, lookupAttributes.reduce((acc, { key, attribute }) => {
-        const lookupSchema = schemaStore.getSchema(attribute.entity);
-        const columns = (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(lookupSchema.attributes).map((nestedKey) => ({
-            name: key,
-            expandedKey: nestedKey,
-        })), schemaStore, language);
-        acc[key] = {
-            label: (0, utils_1.localizedLabel)(language, attribute) +
-                ' (' +
-                (0, utils_1.localizedLabel)(language, lookupSchema) +
-                ')',
-            columns,
-        };
-        return acc;
-    }, {}));
+        },
+        ...lookupAttributes.reduce((acc, { key, attribute }) => {
+            const lookupSchema = schemaStore.getSchema(attribute.entity);
+            const columns = (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(lookupSchema.attributes).map((nestedKey) => ({
+                name: key,
+                expandedKey: nestedKey,
+            })), schemaStore, language);
+            acc[key] = {
+                label: (0, utils_1.localizedLabel)(language, attribute) +
+                    ' (' +
+                    (0, utils_1.localizedLabel)(language, lookupSchema) +
+                    ')',
+                columns,
+            };
+            return acc;
+        }, {}),
+    };
     const tableItems = Object.entries(columnGroups).map(([key, group]) => ({
         key,
         label: group.label,
@@ -64,28 +66,24 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
                             gap: 8,
                             marginBottom: react_components_1.tokens.spacingVerticalXS,
                             paddingInline: react_components_1.tokens.spacingHorizontalS,
-                            width: '100%',
-                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { value: (_a = selectedGroupItem === null || selectedGroupItem === void 0 ? void 0 : selectedGroupItem.label) !== null && _a !== void 0 ? _a : '', selectedOptions: selectedGroupItem ? [String(selectedGroupItem.key)] : [], onOptionSelect: (event, data) => {
+                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { value: selectedGroupItem?.label ?? '', selectedOptions: selectedGroupItem ? [String(selectedGroupItem.key)] : [], onOptionSelect: (event, data) => {
                                     setSelectedGroup(data.optionValue);
                                 }, style: { flex: 1, minWidth: 'unset' }, positioning: {
                                     align: 'bottom',
                                     position: 'below',
-                                }, children: tableItems.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.key, children: x.label }, x.key))) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, {})] }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { paddingInline: 0 }, children: filteredColumns.map((column) => {
-                    var _a;
-                    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { checked: (_a = includedColumnsObj[column.id]) !== null && _a !== void 0 ? _a : false }), style: {
-                            fontWeight: react_components_1.tokens.fontSizeBase400,
-                            width: '100%',
-                            justifyContent: 'flex-start',
-                            paddingInline: react_components_1.tokens.spacingHorizontalS,
-                        }, onClick: () => {
-                            if (includedColumnsObj[column.id]) {
-                                onColumnRemove(column);
-                            }
-                            else {
-                                onColumnAdd(column);
-                            }
-                        }, children: column.label }, column.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.jsx)("div", { style: {
+                                }, children: tableItems.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.key, children: x.label }, x.key))) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, {})] }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { paddingInline: 0 }, children: filteredColumns.map((column) => ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { checked: includedColumnsObj[column.id] ?? false }), style: {
+                        fontWeight: react_components_1.tokens.fontSizeBase400,
+                        width: '100%',
+                        justifyContent: 'flex-start',
+                        paddingInline: react_components_1.tokens.spacingHorizontalS,
+                    }, onClick: () => {
+                        if (includedColumnsObj[column.id]) {
+                            onColumnRemove(column);
+                        }
+                        else {
+                            onColumnAdd(column);
+                        }
+                    }, children: column.label }, column.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.jsx)("div", { style: {
                             display: 'flex',
                             padding: 8,
                             gap: 8,

package/DataGrid/CustomizeColumns/ColumnItem.js

@@ -5,14 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
-const react_dnd_1 = require("react-dnd");
+const DndProvider_1 = require("../../components/DndProvider");
 exports.ItemTypes = {
     CARD: 'column',
 };
 const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSet = {}, // defaultCustomizeColumnStrings,
  }) => {
+    const { useDrag, useDrop } = (0, DndProvider_1.useDndContext)();
     const ref = (0, react_1.useRef)(null);
-    const [{ handlerId }, drop] = (0, react_dnd_1.useDrop)({
+    const [{ handlerId }, drop] = useDrop({
         accept: exports.ItemTypes.CARD,
         collect(monitor) {
             return {
@@ -20,7 +21,6 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
             };
         },
         hover(item, monitor) {
-            var _a;
             if (!ref.current) {
                 return;
             }
@@ -31,7 +31,7 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
                 return;
             }
             // Determine rectangle on screen
-            const hoverBoundingRect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const hoverBoundingRect = ref.current?.getBoundingClientRect();
             // Get vertical middle
             const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
             // Determine mouse position
@@ -58,7 +58,7 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
             item.index = hoverIndex;
         },
     });
-    const [{ isDragging }, drag] = (0, react_dnd_1.useDrag)({
+    const [{ isDragging }, drag] = useDrag({
         type: exports.ItemTypes.CARD,
         item: () => {
             return { id: item.id, index };
@@ -71,12 +71,14 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
     drag(drop(ref));
     return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
             background: react_components_1.tokens.colorNeutralBackground4,
-            padding: react_components_1.tokens.spacingHorizontalXS,
+            paddingBlock: react_components_1.tokens.spacingVerticalXS,
+            paddingLeft: react_components_1.tokens.spacingHorizontalS,
             cursor: 'move',
             opacity,
             borderRadius: react_components_1.tokens.borderRadiusMedium,
             display: 'flex',
             flexDirection: 'row',
+            alignItems: 'center',
         }, "data-handler-id": handlerId, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { flex: 1 }, children: item.label }), (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}), appearance: "transparent", size: "small" }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: onRemove, children: stringSet.remove }), !isFirst && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
                                         moveItem(index, index - 1);
                                     }, children: stringSet.moveUp })), !isLast && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {

package/DataGrid/CustomizeColumns/CustomizeColumns.d.ts

@@ -1,6 +1,6 @@
 interface CustomizeColumnsProps {
-    opened: boolean;
-    onClose: () => void;
+    readonly opened: boolean;
+    readonly onClose: () => void;
 }
 export declare function CustomizeColumns({ onClose, opened }: CustomizeColumnsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/DataGrid/CustomizeColumns/CustomizeColumns.js

@@ -12,8 +12,7 @@ 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 DndProvider_1 = require("../../components/DndProvider");
 const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
 const AddColumns_1 = require("./AddColumns");
 const ColumnItem_1 = require("./ColumnItem");
@@ -55,16 +54,14 @@ function CustomizeColumns({ onClose, opened }) {
                                     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: () => {
                                     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 })] }), (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: react_components_1.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: () => {
-                                setItems((prev) => prev.filter((_, i) => i !== index));
-                            }, 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: {
+                        }, 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,

package/DataGrid/FormSubgridViewSelector.js

@@ -9,7 +9,6 @@ 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 = () => {
-    var _a, _b;
     const viewLookup = (0, hooks_1.useGridViewLookupData)();
     const selectedView = (0, hooks_1.useSelectedView)();
     const changeView = (0, hooks_1.useChangeView)();
@@ -33,9 +32,6 @@ const FormSubgridViewSelector = () => {
                                 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) => {
-                                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));
-                            }) }) })] }) }) }));
+                            }, 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

@@ -9,28 +9,27 @@ 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, }) {
-    var _a, _b, _c, _d;
     const dataService = (0, transport_1.useDataService)();
     const { schemaStore, experienceStore } = (0, hooks_1.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) => {
-                    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 ((0, jsx_runtime_1.jsx)(FormControl_1.default, { 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 ((0, jsx_runtime_1.jsx)(FormControl_1.default, { 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 ((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) => {
-                    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
@@ -46,8 +45,8 @@ 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) => {
-                    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') {
@@ -55,16 +54,15 @@ function ConditionValueControl({ attribute, type, value, onChange, }) {
             }
             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':
@@ -73,15 +71,11 @@ 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) => {
-                    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

@@ -11,7 +11,7 @@ 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 [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)(() => {
@@ -20,7 +20,7 @@ const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
     const selectedOption = (0, react_1.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] = (0, react_1.useState)((0, utils_1.getDefaultValues)(selectedOption, defaultValue?.value, attribute.type));
     const handleChangeOperator = (operator) => {
         setOperator(operator);
         setValues([]);
@@ -34,19 +34,18 @@ const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
     };
     const isValid = (0, react_1.useMemo)(() => {
         return (!!selectedOption &&
-            values.filter(Boolean).length === selectedOption.controls.length);
+            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: {
                         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) => {
-                            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) => {
-                                    handleChangeValue(value, i);
-                                } }, 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 === null || onApply === void 0 ? void 0 : onApply({
+                    }, 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,
                             });

package/DataGrid/GridColumnHeader/OperatorSelect.js

@@ -6,16 +6,23 @@ 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 = (0, react_1.useMemo)(() => {
-        return operatorOptions[attribute.type];
-    }, [attribute.type, operatorOptions]);
-    return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, { options: options, onChange: (value) => onChange === null || onChange === void 0 ? void 0 : onChange(value), value: value }));
+        const supportedOperators = dataService.supportedOperators;
+        let operators = operatorOptions[attribute.type];
+        if (supportedOperators) {
+            operators = operators.filter((option) => supportedOperators[attribute.type].includes(option.value));
+        }
+        return operators;
+    }, [attribute.type, operatorOptions, dataService]);
+    return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, { options: options, onChange: (value) => onChange?.(value), value: value }));
 }

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -77,6 +77,7 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     const align = (0, react_1.useMemo)(() => {
         switch (attribute.type) {
             case 'money':
+            case 'number':
                 return 'right';
             default:
                 return 'left';
@@ -89,9 +90,9 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     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 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?.('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?.('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: () => {
-                    onChangeFilterCondition === null || onChangeFilterCondition === void 0 ? void 0 : onChangeFilterCondition(undefined);
+                    onChangeFilterCondition(undefined);
                 }, children: strings.clearFilter }))] }));
     const menuItems = [];
     if (!disableSort) {
@@ -100,13 +101,14 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     if (!disableFilter) {
         menuItems.push(filterMenuItems);
     }
-    const headerCell = ((0, jsx_runtime_1.jsxs)(react_components_1.TableHeaderCell, { className: (0, react_components_1.mergeClasses)(styles.root, align === 'right' && styles.right), style: {
+    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: {
             textAlign: align,
             width: minWidth,
             minWidth: minWidth,
             maxWidth: minWidth,
             display: 'flex',
             alignItems: 'center',
+            fontWeight: react_components_1.tokens.fontWeightMedium,
             // pointerEvents: disableFilter && disableSort ? 'none' : 'auto',
         }, onClick: (event) => {
             event.preventDefault();
@@ -116,18 +118,18 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
             }, onDoubleClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
-                onResetSize === null || onResetSize === void 0 ? void 0 : onResetSize();
+                onResetSize?.();
             }, onMouseDown: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
-                resizeHandler === null || resizeHandler === void 0 ? void 0 : resizeHandler(event);
+                resizeHandler?.(event);
             }, onMouseUp: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
             }, onTouchStart: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
-                resizeHandler === null || resizeHandler === void 0 ? void 0 : resizeHandler(event);
+                resizeHandler?.(event);
             }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.resizeHandleInner) }) })) : null, onMouseUp: (event) => {
             event.preventDefault();
             if (isResizingRef.current) {
@@ -136,17 +138,24 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
             isResizingRef.current = false;
         }, sortable: !disableSort, 
         // sortDirection="ascending"
-        sortDirection: sortDirection === 'asc'
-            ? 'ascending'
-            : sortDirection === 'desc'
-                ? 'descending'
-                : undefined, 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 && ((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 }) }))] }));
     if (disableFilter && disableSort) {
         return headerCell;
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { 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) => {
-                                    onChangeFilterCondition === null || onChangeFilterCondition === void 0 ? void 0 : onChangeFilterCondition(condition);
+    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) => {
+                                    onChangeFilterCondition(condition);
                                     setVisible(false);
                                 }, onCancel: () => setVisible(false) })] }) }) })] }));
 };
 exports.TableHeaderFilterCell = TableHeaderFilterCell;
+const getSortDirection = (direction) => {
+    if (direction === 'asc') {
+        return 'ascending';
+    }
+    else if (direction === 'desc') {
+        return 'descending';
+    }
+    else {
+        return undefined;
+    }
+};

package/DataGrid/GridColumnHeader/utils.js

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaultOperator = getDefaultOperator;
 exports.getDefaultValues = getDefaultValues;
 function getDefaultOperator(operator, attributeType) {
-    return operator
-        ? operator
-        : attributeType === 'date'
-            ? 'on'
-            : attributeType === 'choice' || attributeType === 'lookup'
-                ? 'in'
-                : 'eq';
+    if (operator) {
+        return operator;
+    }
+    if (attributeType === 'date') {
+        return 'on';
+    }
+    if (attributeType === 'choice' || attributeType === 'lookup') {
+        return 'in';
+    }
+    return 'eq';
 }
 function getDefaultValues(operator, value, _attributeType) {
     if (!value)

package/DataGrid/GridHeaderDesktop.js

@@ -11,7 +11,6 @@ const AppStringContext_1 = require("../App/AppStringContext");
 const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
 const CustomizeColumns_1 = require("./CustomizeColumns");
 const GridHeaderDesktop = (props) => {
-    var _a, _b;
     const viewLookup = (0, hooks_1.useGridViewLookupData)();
     const selectedView = (0, hooks_1.useSelectedView)();
     const changeView = (0, hooks_1.useChangeView)();
@@ -31,9 +30,9 @@ const GridHeaderDesktop = (props) => {
                     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: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}), iconPosition: "after", 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) => {
-                                    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));
-                                }) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: [props.headingRight, (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 24 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value) })] })] }));
+                }, 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: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}), iconPosition: "after", style: {
+                                    fontSize: react_components_1.tokens.fontSizeBase400,
+                                    fontWeight: react_components_1.tokens.fontWeightMedium,
+                                }, 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))) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: [props.headingRight, (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 24 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value), appearance: "filled-darker" })] })] }));
 };
 exports.GridHeaderDesktop = GridHeaderDesktop;

package/DataGrid/GridHeaderMobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface GridHeaderMobileProps {
+}
+export declare const GridHeaderMobile: FC<GridHeaderMobileProps>;
+export {};

package/DataGrid/GridHeaderMobile.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridHeaderMobile = 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 locale_1 = require("@headless-adminapp/app/locale");
+const icons_1 = require("@headless-adminapp/icons");
+const AppStringContext_1 = require("../App/AppStringContext");
+const GridHeaderMobile = () => {
+    const viewLookup = (0, hooks_1.useGridViewLookupData)();
+    const selectedView = (0, hooks_1.useSelectedView)();
+    const changeView = (0, hooks_1.useChangeView)();
+    const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
+    const { language } = (0, locale_1.useLocale)();
+    const appStrings = (0, AppStringContext_1.useAppStrings)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            alignItems: 'center',
+            paddingInline: 8,
+            gap: 8,
+            display: 'flex',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { alignItems: 'center', display: 'flex', gap: 16, flex: 1 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value), style: { flex: 1 } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    alignItems: 'center',
+                    gap: 16,
+                    justifyContent: 'space-between',
+                    display: 'flex',
+                }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, {}), iconPosition: "after" }) }), (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), icon: selectedView.id === view.id ? ((0, jsx_runtime_1.jsx)(icons_1.Icons.Checkmark, {})) : undefined, children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) })] }));
+};
+exports.GridHeaderMobile = GridHeaderMobile;

package/DataGrid/GridListContainer.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+interface GridListContainerProps {
+    disableSelection?: boolean;
+    disableContextMenu?: boolean;
+    disableColumnResize?: boolean;
+    disableColumnSort?: boolean;
+    disableColumnReorder?: boolean;
+    disableColumnFilter?: boolean;
+    noPadding?: boolean;
+}
+export declare const GridListContainer: FC<GridListContainerProps>;
+export {};