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

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -1,17 +1,20 @@
-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({
+"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)({
     root: {
         cursor: 'pointer',
         userSelect: 'none',
         '&:active': {
-            backgroundColor: tokens.colorSubtleBackgroundPressed,
+            backgroundColor: react_components_1.tokens.colorSubtleBackgroundPressed,
         },
         '&:hover [data-id="resize-handle"]': {
             opacity: 0.5,
@@ -38,7 +41,7 @@ const useStyles = makeStyles({
     },
     resizeHandleInner: {
         width: '2px',
-        background: tokens.colorNeutralForeground1,
+        background: react_components_1.tokens.colorNeutralForeground1,
         // borderLeft: `1px solid ${tokens.colorNeutralForeground1}`,
         // borderRight: `1px solid ${tokens.colorNeutralForeground1}`,
     },
@@ -48,7 +51,7 @@ const useStyles = makeStyles({
         },
     },
 });
-export const TableHeaderFilterCell = ({ children, sortDirection, 
+const TableHeaderFilterCell = ({ children, sortDirection, 
 // onChangeFilterCondition,
 onChangeSortDirection, 
 // attribute,
@@ -56,11 +59,11 @@ onChangeSortDirection,
 minWidth, 
 // onChangeWidth,
 column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) => {
-    const [visible, setVisible] = useState(false);
-    const schema = useDataGridSchema();
-    const { schemaStore } = useMetadata();
-    const strings = usePageEntityViewStrings();
-    const attribute = useMemo(() => {
+    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 _attribute = schema.attributes[column.name];
         if (!column.expandedKey) {
             return _attribute;
@@ -71,7 +74,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 = useMemo(() => {
+    const align = (0, react_1.useMemo)(() => {
         switch (attribute.type) {
             case 'money':
             case 'number':
@@ -81,14 +84,14 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
         }
     }, [attribute.type]);
     const styles = useStyles();
-    const isResizingRef = useRef(false);
-    const [columnFilters, setColumnFilters] = useGridColumnFilter();
+    const isResizingRef = (0, react_1.useRef)(false);
+    const [columnFilters, setColumnFilters] = (0, hooks_1.useGridColumnFilter)();
     const filterCondition = columnFilters[column.id];
     const onChangeFilterCondition = (condition) => {
         setColumnFilters(column.id, condition);
     };
-    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: () => {
+    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(undefined);
                 }, children: strings.clearFilter }))] }));
     const menuItems = [];
@@ -98,36 +101,36 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     if (!disableFilter) {
         menuItems.push(filterMenuItems);
     }
-    const headerCell = (_jsxs(TableHeaderCell, { as: "div", className: 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: tokens.fontWeightMedium,
+            fontWeight: react_components_1.tokens.fontWeightMedium,
             // pointerEvents: disableFilter && disableSort ? 'none' : 'auto',
         }, onClick: (event) => {
             event.preventDefault();
-        }, aside: resizable ? (_jsx("div", { className: mergeClasses(styles.resizeHandle), "data-id": "resize-handle", onClick: (event) => {
+        }, aside: resizable ? ((0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.resizeHandle), "data-id": "resize-handle", onClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
             }, 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);
-            }, children: _jsx("div", { className: mergeClasses(styles.resizeHandleInner) }) })) : null, onMouseUp: (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) {
                 return;
@@ -135,15 +138,16 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
             isResizingRef.current = false;
         }, sortable: !disableSort, 
         // sortDirection="ascending"
-        sortDirection: getSortDirection(sortDirection), children: [children, !!filterCondition && (_jsx("div", { style: { marginTop: 2, color: tokens.colorNeutralForeground1 }, children: _jsx(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 (_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) => {
+    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';

package/DataGrid/GridColumnHeader/index.js

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

package/DataGrid/GridColumnHeader/utils.js

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

package/DataGrid/GridHeaderContainer.js

@@ -1,5 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { GridHeaderDesktop } from './GridHeaderDesktop';
-export const GridHeaderContainer = () => {
-    return _jsx(GridHeaderDesktop, {});
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridHeaderContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const GridHeaderDesktop_1 = require("./GridHeaderDesktop");
+const GridHeaderContainer = () => {
+    return (0, jsx_runtime_1.jsx)(GridHeaderDesktop_1.GridHeaderDesktop, {});
 };
+exports.GridHeaderContainer = GridHeaderContainer;

package/DataGrid/GridHeaderDesktop.js

@@ -1,38 +1,38 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Input, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, tokens, } from '@fluentui/react-components';
-import { useChangeView, useGridViewLookupData, useSearchText, useSelectedView, } from '@headless-adminapp/app/datagrid/hooks';
-import { useLocale } from '@headless-adminapp/app/locale';
-import { Icons } from '@headless-adminapp/icons';
-import { useState } from 'react';
-import { useAppStrings } from '../App/AppStringContext';
-import { usePageEntityViewStrings } from '../PageEntityView/PageEntityViewStringContext';
-import { CustomizeColumns } from './CustomizeColumns';
-export const GridHeaderDesktop = (props) => {
-    var _a, _b;
-    const viewLookup = useGridViewLookupData();
-    const selectedView = useSelectedView();
-    const changeView = useChangeView();
-    const [searchText, setSearchText] = useSearchText();
-    const [isColumnCustomizationOpen, setIsColumnCustomizationOpen] = useState(false);
-    const { language } = useLocale();
-    const strings = usePageEntityViewStrings();
-    const appStrings = useAppStrings();
-    return (_jsxs("div", { style: {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridHeaderDesktop = 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 react_1 = require("react");
+const AppStringContext_1 = require("../App/AppStringContext");
+const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
+const CustomizeColumns_1 = require("./CustomizeColumns");
+const GridHeaderDesktop = (props) => {
+    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 [isColumnCustomizationOpen, setIsColumnCustomizationOpen] = (0, react_1.useState)(false);
+    const { language } = (0, locale_1.useLocale)();
+    const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
+    const appStrings = (0, AppStringContext_1.useAppStrings)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             alignItems: 'center',
             paddingInline: 8,
             gap: 16,
             display: 'flex',
-        }, children: [_jsx(CustomizeColumns, { opened: isColumnCustomizationOpen, onClose: () => setIsColumnCustomizationOpen(false) }), _jsx("div", { style: {
+        }, children: [(0, jsx_runtime_1.jsx)(CustomizeColumns_1.CustomizeColumns, { opened: isColumnCustomizationOpen, onClose: () => setIsColumnCustomizationOpen(false) }), (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: _jsx(Icons.ChevronDown, {}), iconPosition: "after", style: {
-                                    fontSize: tokens.fontSizeBase400,
-                                    fontWeight: tokens.fontWeightMedium,
-                                }, 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));
-                                }) }) })] }) }), _jsxs("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: [props.headingRight, _jsx(Button, { appearance: "subtle", icon: _jsx(Icons.EditColumns, { size: 24 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), _jsx(Input, { contentBefore: _jsx(Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value), appearance: "filled-darker" })] })] }));
+                }, 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.js

@@ -1,28 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Input, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, } from '@fluentui/react-components';
-import { useChangeView, useGridViewLookupData, useSearchText, useSelectedView, } from '@headless-adminapp/app/datagrid/hooks';
-import { useLocale } from '@headless-adminapp/app/locale';
-import { Icons } from '@headless-adminapp/icons';
-import { useAppStrings } from '../App/AppStringContext';
-export const GridHeaderMobile = () => {
-    const viewLookup = useGridViewLookupData();
-    const selectedView = useSelectedView();
-    const changeView = useChangeView();
-    const [searchText, setSearchText] = useSearchText();
-    const { language } = useLocale();
-    const appStrings = useAppStrings();
-    return (_jsxs("div", { style: {
+"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: [_jsx("div", { style: { alignItems: 'center', display: 'flex', gap: 16, flex: 1 }, children: _jsx(Input, { contentBefore: _jsx(Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value), style: { flex: 1 } }) }), _jsx("div", { style: {
+        }, 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: _jsxs(Menu, { hasIcons: true, children: [_jsx(MenuTrigger, { children: _jsx(Button, { appearance: "subtle", icon: _jsx(Icons.Filter, {}), iconPosition: "after" }) }), _jsx(MenuPopover, { children: _jsx(MenuList, { children: viewLookup.map((view) => {
-                                    var _a, _b;
-                                    return (_jsx(MenuItem, { onClick: () => changeView(view.id), icon: selectedView.id === view.id ? (_jsx(Icons.Checkmark, {})) : undefined, children: (_b = (_a = view.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : view.name }, view.id));
-                                }) }) })] }) })] }));
+                }, 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.js

@@ -1,87 +1,93 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
-import { ScrollbarWithMoreDataRequest } from '@headless-adminapp/app/components/ScrollbarWithMoreDataRequest';
-import { GridContext } from '@headless-adminapp/app/datagrid';
-import { useDataGridSchema, useGridData, useGridDataState, useSelectedView, } from '@headless-adminapp/app/datagrid/hooks';
-import { useLocale } from '@headless-adminapp/app/locale';
-import { useContextSelector } from '@headless-adminapp/app/mutable';
-import { useOpenForm } from '@headless-adminapp/app/navigation';
-import { useRecordSetSetter } from '@headless-adminapp/app/recordset/hooks';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useCallback, useMemo, useRef } from 'react';
-import { v4 as uuid } from 'uuid';
-import { RecordCard } from '../PageEntityForm/RecordCard';
-import { RecordCardLoading } from '../PageEntityForm/RecordCardLoading';
-const useStyles = makeStyles({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridListContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
+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 navigation_1 = require("@headless-adminapp/app/navigation");
+const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const react_1 = require("react");
+const uuid_1 = require("uuid");
+const RecordCard_1 = require("../PageEntityForm/RecordCard");
+const RecordCardLoading_1 = require("../PageEntityForm/RecordCardLoading");
+const useStyles = (0, react_components_1.makeStyles)({
     root: {
         '&:hover': {
-            background: tokens.colorNeutralBackground1Hover,
+            background: react_components_1.tokens.colorNeutralBackground1Hover,
         },
     },
 });
 const fallbackData = [];
-export const GridListContainer = () => {
+const GridListContainer = () => {
     const styles = useStyles();
-    const data = useGridData();
-    const dataState = useGridDataState();
-    const fetchNextPage = useContextSelector(GridContext, (state) => state.fetchNextPage);
-    const schema = useDataGridSchema();
-    const view = useSelectedView();
-    const tableWrapperRef = useRef(null);
-    const { direction } = useLocale();
-    const dataRef = useRef(data);
+    const data = (0, hooks_1.useGridData)();
+    const dataState = (0, hooks_1.useGridDataState)();
+    const fetchNextPage = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.fetchNextPage);
+    const schema = (0, hooks_1.useDataGridSchema)();
+    const view = (0, hooks_1.useSelectedView)();
+    const tableWrapperRef = (0, react_1.useRef)(null);
+    const { direction } = (0, locale_1.useLocale)();
+    const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
-    const uniqueRecords = useMemo(() => {
-        var _a;
-        return ((_a = data === null || data === void 0 ? void 0 : data.records.map((record) => (Object.assign(Object.assign({}, record), { __uuid: uuid() })))) !== null && _a !== void 0 ? _a : fallbackData);
-    }, [data === null || data === void 0 ? void 0 : data.records]);
+    const uniqueRecords = (0, react_1.useMemo)(() => {
+        return (data?.records.map((record) => ({
+            ...record,
+            __uuid: (0, uuid_1.v4)(),
+        })) ?? fallbackData);
+    }, [data?.records]);
     const rows = uniqueRecords;
-    const virtualizer = useVirtualizer({
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
         count: rows.length,
-        getScrollElement: () => { var _a, _b; return (_b = (_a = tableWrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement; },
+        getScrollElement: () => tableWrapperRef.current?.parentElement?.parentElement,
         estimateSize: () => 40,
         overscan: 5,
         enabled: true,
     });
     const virtualItems = virtualizer.getVirtualItems();
     const virtualSize = virtualizer.getTotalSize();
-    const recordSetSetter = useRecordSetSetter();
-    const openFormInternal = useOpenForm();
-    const openRecord = useCallback((id) => {
-        var _a, _b;
-        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
+    const recordSetSetter = (0, hooks_2.useRecordSetSetter)();
+    const openFormInternal = (0, navigation_1.useOpenForm)();
+    const openRecord = (0, react_1.useCallback)((id) => {
+        recordSetSetter(schema.logicalName, dataRef.current?.records.map((x) => x[schema.idAttribute]) ??
+            []);
         openFormInternal({
             logicalName: schema.logicalName,
             id,
         });
     }, [openFormInternal, recordSetSetter, schema.idAttribute, schema.logicalName]);
-    return (_jsx("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: _jsx(ScrollbarWithMoreDataRequest, { data: data === null || data === void 0 ? void 0 : data.records, hasMore: dataState === null || dataState === void 0 ? void 0 : dataState.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data?.records, hasMore: dataState?.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
                 fetchNextPage();
-            }, children: _jsx("div", { style: {
+            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'relative',
-                }, ref: tableWrapperRef, children: _jsxs("div", { style: {
+                }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         width: '100%',
                         height: virtualizer.getTotalSize(),
-                    }, children: [_jsx("div", { style: {
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                             }, children: virtualItems.map((virtualRow) => {
                                 const row = rows[virtualRow.index];
-                                return (_jsx("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, className: mergeClasses(styles.root), style: {
+                                return ((0, jsx_runtime_1.jsx)("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, className: (0, react_components_1.mergeClasses)(styles.root), style: {
                                         width: '100%',
                                         position: 'absolute',
                                         transform: `translateY(${virtualRow.start}px)`,
                                     }, onClick: () => {
                                         const id = row[schema.idAttribute];
                                         openRecord(id);
-                                    }, children: _jsx(RecordCard, { cardView: view.experience.card, record: row, schema: schema, selected: false }) }, virtualRow.key));
-                            }) }), dataState.isFetching && (_jsx("div", { style: {
+                                    }, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: row, schema: schema, selected: false }) }, virtualRow.key));
+                            }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 width: '100%',
                                 position: 'absolute',
                                 transform: `translateY(${virtualSize}px)`,
-                            }, children: Array.from({ length: 10 }).map((_, index) => (_jsx(RecordCardLoading, { cardView: view.experience.card, schema: schema }, index))) }))] }) }) }) }));
+                            }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RecordCardLoading_1.RecordCardLoading, { cardView: view.experience.card, schema: schema }, index))) }))] }) }) }) }));
 };
+exports.GridListContainer = GridListContainer;

package/DataGrid/GridPaginationContainer.js

@@ -1,16 +1,19 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Body1, tokens } from '@fluentui/react-components';
-import { useGridData, useGridSelection, } from '@headless-adminapp/app/datagrid/hooks';
-import { Fragment } from 'react';
-import { usePageEntityViewStrings } from '../PageEntityView/PageEntityViewStringContext';
-export const GridPaginationContainer = () => {
-    var _a, _b, _c;
-    const data = useGridData();
-    const [selectedIds] = useGridSelection();
-    const strings = usePageEntityViewStrings();
-    return (_jsx("div", { children: _jsxs(Body1, { style: {
-                color: tokens.colorNeutralForeground3,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridPaginationContainer = 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 react_1 = require("react");
+const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
+const GridPaginationContainer = () => {
+    const data = (0, hooks_1.useGridData)();
+    const [selectedIds] = (0, hooks_1.useGridSelection)();
+    const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_components_1.Body1, { style: {
+                color: react_components_1.tokens.colorNeutralForeground3,
                 display: 'flex',
                 gap: 8,
-            }, children: [_jsxs("span", { children: [strings.records, ": ", (_a = data === null || data === void 0 ? void 0 : data.count) !== null && _a !== void 0 ? _a : '-'] }), _jsx("span", { children: "|" }), _jsxs("span", { children: [strings.loaded, ": ", (_b = data === null || data === void 0 ? void 0 : data.records.length) !== null && _b !== void 0 ? _b : '-'] }), (selectedIds.length > 0 || ((_c = data === null || data === void 0 ? void 0 : data.count) !== null && _c !== void 0 ? _c : 0) > 0) && (_jsxs(Fragment, { children: [_jsx("span", { children: "|" }), _jsxs("span", { children: [strings.selected, ": ", selectedIds.length] })] }))] }) }));
+            }, children: [(0, jsx_runtime_1.jsxs)("span", { children: [strings.records, ": ", data?.count ?? '-'] }), (0, jsx_runtime_1.jsx)("span", { children: "|" }), (0, jsx_runtime_1.jsxs)("span", { children: [strings.loaded, ": ", data?.records.length ?? '-'] }), (selectedIds.length > 0 || (data?.count ?? 0) > 0) && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "|" }), (0, jsx_runtime_1.jsxs)("span", { children: [strings.selected, ": ", selectedIds.length] })] }))] }) }));
 };
+exports.GridPaginationContainer = GridPaginationContainer;