@headless-adminapp/fluent 0.0.17-alpha.1

package/DataGrid/GridColumnHeader/ConditionValueControl.js

@@ -0,0 +1,89 @@
+"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, }) {
+    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);
+                } }));
+        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);
+                } }));
+        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);
+                } }));
+        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 (
+        //   <FormControl
+        //     type="lookup"
+        //     async
+        //     dataService={dataService}
+        //     schema={schemaStore.getSchema(attribute.entity)}
+        //     experienceStore={experienceStore}
+        //     value={value?.[0] ?? null}
+        //     onChange={(value) => {
+        //       onChange?.(value ? [value] : []);
+        //     }}
+        //   />
+        // );
+        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);
+                } }));
+        case 'boolean':
+            if (attribute.type !== 'boolean') {
+                return null;
+            }
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "multi-select", options: [
+                    {
+                        label: (_a = attribute.trueLabel) !== null && _a !== void 0 ? _a : 'Yes',
+                        value: 'true',
+                    },
+                    {
+                        label: (_b = attribute.falseLabel) !== null && _b !== void 0 ? _b : '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 : []);
+                } }));
+        case 'choice':
+        case 'choices':
+            if (attribute.type !== 'choice' && attribute.type !== 'choices') {
+                return null;
+            }
+            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 : []);
+                } }));
+        default:
+            return null;
+    }
+}

package/DataGrid/GridColumnHeader/FilterForm.d.ts

@@ -0,0 +1,11 @@
+import type { Attribute } from '@headless-adminapp/core/attributes';
+import { ColumnCondition } from '@headless-adminapp/core/experience/view';
+import { FC } from 'react';
+interface FilterFormProps {
+    attribute: Attribute;
+    defaultValue?: ColumnCondition;
+    onApply?: (condition: ColumnCondition) => void;
+    onCancel?: () => void;
+}
+export declare const FilterForm: FC<FilterFormProps>;
+export {};

package/DataGrid/GridColumnHeader/FilterForm.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const column_filter_1 = require("@headless-adminapp/app/datagrid/column-filter");
+const react_1 = require("react");
+const AppStringContext_1 = require("../../App/AppStringContext");
+const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
+const ConditionValueControl_1 = require("./ConditionValueControl");
+const OperatorSelect_1 = require("./OperatorSelect");
+const utils_1 = require("./utils");
+const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
+    const [operator, setOperator] = (0, react_1.useState)((0, utils_1.getDefaultOperator)(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.operator, attribute.type));
+    const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
+    const { operatorStrings } = (0, AppStringContext_1.useAppStrings)();
+    const operatorOptions = (0, react_1.useMemo)(() => {
+        return (0, column_filter_1.getLocalizedOperatorOptions)(operatorStrings);
+    }, [operatorStrings]);
+    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 handleChangeOperator = (operator) => {
+        setOperator(operator);
+        setValues([]);
+    };
+    const handleChangeValue = (value, index) => {
+        setValues((prev) => {
+            const next = [...prev];
+            next[index] = value;
+            return next;
+        });
+    };
+    const isValid = (0, react_1.useMemo)(() => {
+        return (!!selectedOption &&
+            values.filter(Boolean).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({
+                                operator,
+                                value: values,
+                            });
+                        }, children: strings.apply })] })] }));
+};
+exports.FilterForm = FilterForm;

package/DataGrid/GridColumnHeader/OperatorSelect.d.ts

@@ -0,0 +1,9 @@
+import type { Attribute } from '@headless-adminapp/core/attributes';
+import { OperatorKey } from '@headless-adminapp/core/transport';
+interface OperatorSelectProps {
+    attribute: Attribute;
+    value: OperatorKey | null;
+    onChange?: (operator: OperatorKey) => void;
+}
+export declare function OperatorSelect({ attribute, value, onChange, }: OperatorSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/DataGrid/GridColumnHeader/OperatorSelect.js

@@ -0,0 +1,21 @@
+"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 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 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 }));
+}

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.d.ts

@@ -0,0 +1,22 @@
+import { TransformedViewColumn } from '@headless-adminapp/app/datagrid';
+import type { Attribute } from '@headless-adminapp/core/attributes';
+import { ColumnCondition } from '@headless-adminapp/core/experience/view';
+import { FC, PropsWithChildren } from 'react';
+interface TableHeaderFilterCellProps {
+    sortDirection?: 'asc' | 'desc';
+    columnName: string;
+    onChangeSortDirection?: (direction: 'asc' | 'desc') => void;
+    filterCondition?: ColumnCondition;
+    onChangeFilterCondition?: (condition: ColumnCondition | undefined) => void;
+    attribute: Attribute;
+    minWidth?: number;
+    onChangeWidth?: (width: number) => void;
+    column: TransformedViewColumn;
+    onResetSize?: () => void;
+    resizeHandler?: (event: unknown) => void;
+    resizable?: boolean;
+    disableFilter?: boolean;
+    disableSort?: boolean;
+}
+export declare const TableHeaderFilterCell: FC<PropsWithChildren<TableHeaderFilterCellProps>>;
+export {};

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -0,0 +1,152 @@
+"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: react_components_1.tokens.colorSubtleBackgroundPressed,
+        },
+        '&:hover [data-id="resize-handle"]': {
+            opacity: 0.5,
+        },
+    },
+    resizeHandle: {
+        position: 'absolute',
+        right: '-6px',
+        zIndex: 5,
+        top: 0,
+        bottom: 0,
+        width: '12px',
+        cursor: 'col-resize',
+        // background: 'black',
+        userSelect: 'none',
+        touchAction: 'none',
+        paddingBlock: '6px',
+        display: 'flex',
+        justifyContent: 'center',
+        opacity: 0,
+        '&:hover': {
+            opacity: '0.8 !important',
+        },
+    },
+    resizeHandleInner: {
+        width: '2px',
+        background: react_components_1.tokens.colorNeutralForeground1,
+        // borderLeft: `1px solid ${tokens.colorNeutralForeground1}`,
+        // borderRight: `1px solid ${tokens.colorNeutralForeground1}`,
+    },
+    right: {
+        '& .fui-TableHeaderCell__button': {
+            justifyContent: 'flex-end',
+        },
+    },
+});
+const TableHeaderFilterCell = ({ children, sortDirection, 
+// onChangeFilterCondition,
+onChangeSortDirection, 
+// attribute,
+// filterCondition,
+minWidth, 
+// onChangeWidth,
+column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const schema = (0, hooks_1.useDataGridSchema)();
+    const { getSchema } = (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;
+        }
+        if (_attribute.type !== 'lookup') {
+            throw new Error('Invalid attribute type');
+        }
+        const lookupSchema = getSchema(_attribute.entity);
+        return lookupSchema.attributes[column.expandedKey];
+    }, [column.expandedKey, column.name, getSchema, schema.attributes]);
+    const align = (0, react_1.useMemo)(() => {
+        switch (attribute.type) {
+            case 'money':
+                return 'right';
+            default:
+                return 'left';
+        }
+    }, [attribute.type]);
+    const styles = useStyles();
+    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 = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowUp, { size: 16 }), onClick: () => onChangeSortDirection === null || onChangeSortDirection === void 0 ? void 0 : onChangeSortDirection('asc'), children: strings.sortByAscending }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowDown, { size: 16 }), onClick: () => onChangeSortDirection === null || onChangeSortDirection === void 0 ? void 0 : onChangeSortDirection('desc'), children: strings.sortByDescending })] }));
+    const filterMenuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }), onClick: () => setVisible(!visible), children: strings.filter }), !!filterCondition && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.FilterDismiss, { size: 16 }), onClick: () => {
+                    onChangeFilterCondition === null || onChangeFilterCondition === void 0 ? void 0 : onChangeFilterCondition(undefined);
+                }, children: strings.clearFilter }))] }));
+    const menuItems = [];
+    if (!disableSort) {
+        menuItems.push(sortMenuItems);
+    }
+    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: {
+            textAlign: align,
+            width: minWidth,
+            minWidth: minWidth,
+            maxWidth: minWidth,
+            display: 'flex',
+            alignItems: 'center',
+            // pointerEvents: disableFilter && disableSort ? 'none' : 'auto',
+        }, onClick: (event) => {
+            event.preventDefault();
+        }, aside: resizable ? ((0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.resizeHandle), "data-id": "resize-handle", onClick: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+            }, onDoubleClick: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                onResetSize === null || onResetSize === void 0 ? void 0 : onResetSize();
+            }, onMouseDown: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                resizeHandler === null || resizeHandler === void 0 ? void 0 : resizeHandler(event);
+            }, onMouseUp: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+            }, onTouchStart: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                resizeHandler === null || resizeHandler === void 0 ? void 0 : resizeHandler(event);
+            }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.resizeHandleInner) }) })) : null, onMouseUp: (event) => {
+            event.preventDefault();
+            if (isResizingRef.current) {
+                return;
+            }
+            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 }) }))] }));
+    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);
+                                    setVisible(false);
+                                }, onCancel: () => setVisible(false) })] }) }) })] }));
+};
+exports.TableHeaderFilterCell = TableHeaderFilterCell;

package/DataGrid/GridColumnHeader/index.d.ts

@@ -0,0 +1 @@
+export { TableHeaderFilterCell } from './TableHeaderFilterCell';

package/DataGrid/GridColumnHeader/index.js

@@ -0,0 +1,5 @@
+"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.d.ts

@@ -0,0 +1,5 @@
+import { OperatorOption } from '@headless-adminapp/app/datagrid';
+import type { AttributeType } from '@headless-adminapp/core/attributes';
+import { OperatorKey } from '@headless-adminapp/core/transport';
+export declare function getDefaultOperator(operator: OperatorKey | undefined, attributeType: AttributeType): OperatorKey;
+export declare function getDefaultValues(operator: OperatorOption, value: any, _attributeType: AttributeType): any[];

package/DataGrid/GridColumnHeader/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+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';
+}
+function getDefaultValues(operator, value, _attributeType) {
+    if (!value)
+        return [];
+    return Array.isArray(value) ? value : [value];
+}

package/DataGrid/GridHeaderContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const GridHeaderContainer: FC;

package/DataGrid/GridHeaderContainer.js

@@ -0,0 +1,9 @@
+"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.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface GridHeaderDesktopProps {
+    headingRight?: React.ReactNode;
+}
+export declare const GridHeaderDesktop: FC<GridHeaderDesktopProps>;
+export {};

package/DataGrid/GridHeaderDesktop.js

@@ -0,0 +1,40 @@
+"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) => {
+    var _a, _b;
+    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,
+            width: '100%',
+            display: 'flex',
+        }, 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: (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) })] })] }));
+};
+exports.GridHeaderDesktop = GridHeaderDesktop;

package/DataGrid/GridPaginationContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const GridPaginationContainer: FC;

package/DataGrid/GridPaginationContainer.js

@@ -0,0 +1,20 @@
+"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 = () => {
+    var _a, _b, _c;
+    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: [(0, jsx_runtime_1.jsxs)("span", { children: [strings.records, ": ", (_a = data === null || data === void 0 ? void 0 : data.count) !== null && _a !== void 0 ? _a : '-'] }), (0, jsx_runtime_1.jsx)("span", { children: "|" }), (0, jsx_runtime_1.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) && ((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;

package/DataGrid/GridTableContainer.d.ts

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