@headless-adminapp/fluent 0.0.17-alpha.1

package/CommandBar/MenuItem.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const MenuList_1 = require("./MenuList");
+const useStyles = (0, react_components_1.makeStyles)({
+    splitMenuRight: {
+        '& .fui-MenuItem__icon': {
+            display: 'none',
+        },
+    },
+    danger: {
+        '&:hover': {
+            color: react_components_1.tokens.colorPaletteRedForeground1,
+            background: react_components_1.tokens.colorPaletteRedBackground1,
+            '& .fui-MenuItem__icon': {
+                color: react_components_1.tokens.colorPaletteRedForeground1,
+            },
+            '&:active': {
+                color: react_components_1.tokens.colorPaletteRedForeground2,
+                background: react_components_1.tokens.colorPaletteRedBackground2,
+                '& .fui-MenuItem__icon': {
+                    color: react_components_1.tokens.colorPaletteRedForeground2,
+                },
+            },
+        },
+    },
+});
+const MenuItem = ({ Icon, text, disabled, danger, onClick, items, }) => {
+    const styles = useStyles();
+    if (!(items === null || items === void 0 ? void 0 : items.length)) {
+        return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { disabled: disabled, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [onClick ? ((0, jsx_runtime_1.jsxs)(react_components_1.MenuSplitGroup, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }), (0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { className: (0, react_components_1.mergeClasses)(styles.splitMenuRight) }) })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
+};
+exports.MenuItem = MenuItem;

package/CommandBar/MenuItems.d.ts

@@ -0,0 +1,6 @@
+import { ArrayGroupWithAtLeastOne } from '@headless-adminapp/core/types';
+import { MenuItemProps } from './MenuItem';
+export interface MenuItemsProps {
+    items?: ArrayGroupWithAtLeastOne<MenuItemProps>;
+}
+export declare const MenuItems: React.FC<MenuItemsProps>;

package/CommandBar/MenuItems.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItems = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const MenuItem_1 = require("./MenuItem");
+const MenuItems = ({ items }) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: items === null || items === void 0 ? void 0 : items.map((group, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), group.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { Icon: item.Icon, onClick: item.onClick, text: item.text, danger: item.danger, disabled: item.disabled, items: item.items }, index)))] }, index))) }));
+};
+exports.MenuItems = MenuItems;

package/CommandBar/MenuList.d.ts

@@ -0,0 +1,6 @@
+import { ArrayGroupWithAtLeastOne } from '@headless-adminapp/core/types';
+import { MenuItemProps } from './MenuItem';
+export interface MenuItemsProps {
+    items?: ArrayGroupWithAtLeastOne<MenuItemProps>;
+}
+export declare const MenuList: React.FC<MenuItemsProps>;

package/CommandBar/MenuList.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const MenuItems_1 = require("./MenuItems");
+const MenuList = ({ items }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: !(items === null || items === void 0 ? void 0 : items.length) ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { style: {
+                color: react_components_1.tokens.colorNeutralForegroundDisabled,
+                fontStyle: 'italic',
+            }, children: "No items" })) : ((0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { items: items })) }));
+};
+exports.MenuList = MenuList;

package/CommandBar/Wrapper.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefComponent } from '@fluentui/react-components';
+import { PropsWithChildren } from 'react';
+export interface CommandBarWrapperProps {
+    overflow?: 'hidden' | 'auto';
+    className?: string;
+    align?: 'start' | 'end';
+}
+export declare const CommandBarWrapper: ForwardRefComponent<PropsWithChildren<CommandBarWrapperProps>>;

package/CommandBar/Wrapper.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandBarWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        flexWrap: 'nowrap',
+        minWidth: 0,
+        width: '100%',
+    },
+    overflowHidden: {
+        overflow: 'hidden',
+    },
+    overflowAuto: {
+        overflow: 'auto',
+    },
+});
+exports.CommandBarWrapper = (0, react_1.forwardRef)(function CommandBarWrapper({ children, overflow, className, align = 'start' }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Toolbar, { ref: ref, style: { justifyContent: 'flex-' + align }, className: (0, react_components_1.mergeClasses)(styles.root, overflow === 'hidden' ? styles.overflowHidden : styles.overflowAuto, className), children: children }));
+});
+exports.CommandBarWrapper.displayName = 'CommandBarWrapper';

package/CommandBar/index.d.ts

@@ -0,0 +1,9 @@
+declare const CommandBar: {
+    Wrapper: import("@fluentui/react-components").ForwardRefComponent<import("react").PropsWithChildren<import("./Wrapper").CommandBarWrapperProps>>;
+    Button: import("@fluentui/react-components").ForwardRefComponent<import("./Button").CommandButtonProps>;
+    MenuButton: import("@fluentui/react-components").ForwardRefComponent<import("./MenuButton").CommandMenuButtonProps>;
+    Divider: import("@fluentui/react-components").ForwardRefComponent<{}>;
+    IconButton: import("@fluentui/react-components").ForwardRefComponent<import("./IconButton").CommandIconButtonProps>;
+    Label: import("@fluentui/react-components").ForwardRefComponent<import("./Label").CommandLabelProps>;
+};
+export default CommandBar;

package/CommandBar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Button_1 = require("./Button");
+const Divider_1 = require("./Divider");
+const IconButton_1 = require("./IconButton");
+const Label_1 = require("./Label");
+const MenuButton_1 = require("./MenuButton");
+const Wrapper_1 = require("./Wrapper");
+const CommandBar = {
+    Wrapper: Wrapper_1.CommandBarWrapper,
+    Button: Button_1.CommandButton,
+    MenuButton: MenuButton_1.CommandMenuButton,
+    Divider: Divider_1.CommandDivider,
+    IconButton: IconButton_1.CommandIconButton,
+    Label: Label_1.CommandLabel,
+};
+exports.default = CommandBar;

package/CommandBar/types.js

@@ -0,0 +1 @@
+"use strict";

package/DataForm/SectionControl.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+interface SectionControlWrapperProps {
+    label: string;
+    labelPosition?: 'top' | 'left';
+    required?: boolean;
+    isError?: boolean;
+    errorMessage?: string;
+}
+export declare function SectionControlWrapper(props: PropsWithChildren<SectionControlWrapperProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/DataForm/SectionControl.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionControlWrapper = SectionControlWrapper;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+function SectionControlWrapper(props) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Field, { label: props.label, orientation: props.labelPosition === 'top' ? 'vertical' : 'horizontal', required: props.required, validationState: props.isError ? 'error' : undefined, validationMessage: props.errorMessage, validationMessageIcon: null, children: props.children }));
+}

package/DataGrid/ActionCell.d.ts

@@ -0,0 +1,8 @@
+import { MenuItemCommandState } from '@headless-adminapp/app/command';
+import { MutableState } from '@headless-adminapp/app/mutable';
+interface ActionCellProps {
+    onOpen: () => void;
+    mutableState: MutableState<MenuItemCommandState[][]>;
+}
+export declare function ActionCell({ onOpen, mutableState }: ActionCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/DataGrid/ActionCell.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCell = ActionCell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const TableCell_1 = require("../DataGrid/TableCell");
+const OverflowCommandBar_1 = require("../OverflowCommandBar");
+function ActionCell({ onOpen, mutableState }) {
+    const transformedCommands = (0, mutable_1.useMutableStateSelector)(mutableState, (state) => state);
+    return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellAction, { onOpen: onOpen, items: transformedCommands.map((item) => (0, OverflowCommandBar_1.transformMenuItems)(item, 'en')) }));
+}

package/DataGrid/CommandContainer.d.ts

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

package/DataGrid/CommandContainer.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const OverflowCommandBar_1 = require("../OverflowCommandBar");
+const CommandContainer = () => {
+    const gridCommands = (0, hooks_1.useMainGridCommands)();
+    return (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: gridCommands });
+};
+exports.CommandContainer = CommandContainer;

package/DataGrid/CustomizeColumns/AddColumns.d.ts

@@ -0,0 +1,10 @@
+import { TransformedViewColumn } from '@headless-adminapp/app/datagrid';
+interface AddColumnsProps {
+    onColumnAdd: (column: TransformedViewColumn) => void;
+    onColumnRemove: (column: TransformedViewColumn) => void;
+    columns: TransformedViewColumn[];
+    opened: boolean;
+    onClose: () => void;
+}
+export declare function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, }: AddColumnsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/DataGrid/CustomizeColumns/AddColumns.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddColumns = AddColumns;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const builders_1 = require("@headless-adminapp/app/builders");
+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 hooks_2 = require("@headless-adminapp/app/metadata/hooks");
+const icons_1 = require("@headless-adminapp/icons");
+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)();
+    const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
+    const appStrings = (0, AppStringContext_1.useAppStrings)();
+    const lookupAttributes = Object.entries(schema.attributes)
+        .map(([key, attribute]) => ({
+        key,
+        attribute,
+    }))
+        .filter(({ attribute }) => attribute.type === 'lookup');
+    const columnGroups = Object.assign({ root: {
+            label: (0, builders_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, builders_1.localizedLabel)(language, attribute) +
+                ' (' +
+                (0, builders_1.localizedLabel)(language, lookupSchema) +
+                ')',
+            columns,
+        };
+        return acc;
+    }, {}));
+    const tableItems = Object.entries(columnGroups).map(([key, group]) => ({
+        key,
+        label: group.label,
+    }));
+    const [selectedGroup, setSelectedGroup] = (0, react_1.useState)('root');
+    const selectedGroupItem = tableItems.find((x) => x.key === selectedGroup);
+    const availableColumns = columnGroups[selectedGroup].columns;
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const filteredColumns = availableColumns.filter((column) => column.label.toLowerCase().includes(searchText.toLowerCase()));
+    const includedColumnsObj = columns.reduce((acc, column) => {
+        acc[column.id] = true;
+        return acc;
+    }, {});
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Drawer, { separator: true, open: opened, position: "end", children: [(0, jsx_runtime_1.jsx)(react_components_1.DrawerHeader, { children: (0, jsx_runtime_1.jsx)(react_components_1.DrawerHeaderTitle, { action: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, {}), onClick: onClose }), children: strings.addColumns }) }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%', display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column-reverse',
+                            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) => {
+                                    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: {
+                            display: 'flex',
+                            padding: 8,
+                            gap: 8,
+                            justifyContent: 'flex-end',
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: onClose, children: strings.close }) })] })] }));
+}

package/DataGrid/CustomizeColumns/ColumnItem.d.ts

@@ -0,0 +1,16 @@
+import { TransformedViewColumn } from '@headless-adminapp/app/datagrid';
+import { FC } from 'react';
+export declare const ItemTypes: {
+    CARD: string;
+};
+interface CardProps {
+    item: TransformedViewColumn;
+    index: number;
+    moveItem: (dragIndex: number, hoverIndex: number) => void;
+    isFirst: boolean;
+    isLast: boolean;
+    onRemove: () => void;
+    stringSet?: any;
+}
+export declare const ColumnItem: FC<CardProps>;
+export {};

package/DataGrid/CustomizeColumns/ColumnItem.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnItem = exports.ItemTypes = void 0;
+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");
+exports.ItemTypes = {
+    CARD: 'column',
+};
+const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSet = {}, // defaultCustomizeColumnStrings,
+ }) => {
+    const ref = (0, react_1.useRef)(null);
+    const [{ handlerId }, drop] = (0, react_dnd_1.useDrop)({
+        accept: exports.ItemTypes.CARD,
+        collect(monitor) {
+            return {
+                handlerId: monitor.getHandlerId(),
+            };
+        },
+        hover(item, monitor) {
+            var _a;
+            if (!ref.current) {
+                return;
+            }
+            const dragIndex = item.index;
+            const hoverIndex = index;
+            // Don't replace items with themselves
+            if (dragIndex === hoverIndex) {
+                return;
+            }
+            // Determine rectangle on screen
+            const hoverBoundingRect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            // Get vertical middle
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            // Determine mouse position
+            const clientOffset = monitor.getClientOffset();
+            // Get pixels to the top
+            const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+            // Only perform the move when the mouse has crossed half of the items height
+            // When dragging downwards, only move when the cursor is below 50%
+            // When dragging upwards, only move when the cursor is above 50%
+            // Dragging downwards
+            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+                return;
+            }
+            // Dragging upwards
+            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+                return;
+            }
+            // Time to actually perform the action
+            moveItem(dragIndex, hoverIndex);
+            // Note: we're mutating the monitor item here!
+            // Generally it's better to avoid mutations,
+            // but it's good here for the sake of performance
+            // to avoid expensive index searches.
+            item.index = hoverIndex;
+        },
+    });
+    const [{ isDragging }, drag] = (0, react_dnd_1.useDrag)({
+        type: exports.ItemTypes.CARD,
+        item: () => {
+            return { id: item.id, index };
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+    const opacity = isDragging ? 0 : 1;
+    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,
+            cursor: 'move',
+            opacity,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            display: 'flex',
+            flexDirection: 'row',
+        }, "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: () => {
+                                        moveItem(index, index + 1);
+                                    }, children: stringSet.moveDown }))] }) })] })] }));
+};
+exports.ColumnItem = ColumnItem;

package/DataGrid/CustomizeColumns/CustomizeColumns.d.ts

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

package/DataGrid/CustomizeColumns/CustomizeColumns.js

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

package/DataGrid/CustomizeColumns/index.d.ts

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

package/DataGrid/CustomizeColumns/index.js

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

package/DataGrid/FormSubgridCommandContainer.d.ts

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

package/DataGrid/FormSubgridCommandContainer.js

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

package/DataGrid/FormSubgridViewSelector.d.ts

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

package/DataGrid/FormSubgridViewSelector.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSubgridViewSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const icons_1 = require("@headless-adminapp/icons");
+const FormSubgridViewSelector = () => {
+    var _a, _b;
+    const viewLookup = (0, hooks_1.useGridViewLookupData)();
+    const selectedView = (0, hooks_1.useSelectedView)();
+    const changeView = (0, hooks_1.useChangeView)();
+    const { language } = (0, locale_1.useLocale)();
+    const allowViewSelection = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.allowViewSelection);
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            alignItems: 'center',
+            paddingBlock: 4,
+            paddingInline: 4,
+            gap: 16,
+            width: '100%',
+            display: 'flex',
+            height: 40,
+        }, children: (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: allowViewSelection ? (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}) : null, iconPosition: "after", style: {
+                                paddingInline: 8,
+                                paddingBlock: 4,
+                                pointerEvents: allowViewSelection ? 'auto' : 'none',
+                            }, children: (_b = (_a = selectedView.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : selectedView.name }) }), (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));
+                            }) }) })] }) }) }));
+};
+exports.FormSubgridViewSelector = FormSubgridViewSelector;

package/DataGrid/GridColumnHeader/ConditionValueControl.d.ts

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