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

package/CommandBar/Label.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { makeStyles, mergeClasses, tokens, ToolbarButton, } from '@fluentui/react-components';
-import { forwardRef, memo } from 'react';
-const useStyles = makeStyles({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandLabel = 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: {
         fontWeight: 'normal',
         minWidth: 'unset',
@@ -9,12 +12,12 @@ const useStyles = makeStyles({
         flexShrink: 0,
         cursor: 'default !important',
         '&:hover:active': {
-            backgroundColor: tokens.colorNeutralBackground2Hover,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground2Hover,
         },
     },
 });
-export const CommandLabel = memo(forwardRef(function CommandLabel({ Icon, text }, ref) {
+exports.CommandLabel = (0, react_1.memo)((0, react_1.forwardRef)(function CommandLabel({ Icon, text }, ref) {
     const styles = useStyles();
-    return (_jsx(ToolbarButton, { ref: ref, type: "button", icon: !!Icon ? _jsx(Icon, { size: 20 }) : undefined, className: mergeClasses(styles.root), children: text }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, type: "button", icon: !!Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : undefined, className: (0, react_components_1.mergeClasses)(styles.root), children: text }));
 }));
-CommandLabel.displayName = 'CommandLabel';
+exports.CommandLabel.displayName = 'CommandLabel';

package/CommandBar/MenuButton.js

@@ -1,40 +1,43 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { makeStyles, Menu, MenuButton, MenuPopover, MenuTrigger, mergeClasses, SplitButton, tokens, } from '@fluentui/react-components';
-import { forwardRef, memo } from 'react';
-import { MenuList } from './MenuList';
-const useStyles = makeStyles({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandMenuButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const MenuList_1 = require("./MenuList");
+const useStyles = (0, react_components_1.makeStyles)({
     splitButton: {
         '& > button:first-child': {
-            fontWeight: tokens.fontWeightRegular,
-            borderRightColor: tokens.colorNeutralStroke3,
+            fontWeight: react_components_1.tokens.fontWeightRegular,
+            borderRightColor: react_components_1.tokens.colorNeutralStroke3,
         },
     },
     menuButton: {
-        fontWeight: tokens.fontWeightRegular,
+        fontWeight: react_components_1.tokens.fontWeightRegular,
     },
     splitButtonDanger: {
         '& > button:first-child:hover': {
-            color: tokens.colorPaletteRedForeground1,
-            background: tokens.colorPaletteRedBackground1,
+            color: react_components_1.tokens.colorPaletteRedForeground1,
+            background: react_components_1.tokens.colorPaletteRedBackground1,
             '& .fui-Button__icon': {
-                color: tokens.colorPaletteRedForeground1,
+                color: react_components_1.tokens.colorPaletteRedForeground1,
             },
             '&:active': {
-                color: tokens.colorPaletteRedForeground2,
-                background: tokens.colorPaletteRedBackground2,
+                color: react_components_1.tokens.colorPaletteRedForeground2,
+                background: react_components_1.tokens.colorPaletteRedBackground2,
                 '& .fui-Button__icon': {
-                    color: tokens.colorPaletteRedForeground2,
+                    color: react_components_1.tokens.colorPaletteRedForeground2,
                 },
             },
         },
     },
 });
-export const CommandMenuButton = memo(forwardRef(function CommandMenuButton({ Icon, items, text, danger, disabled, onClick }, ref) {
+exports.CommandMenuButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandMenuButton({ Icon, items, text, danger, disabled, onClick }, ref) {
     const styles = useStyles();
     return (
     // <div ref={ref}>
-    _jsxs(Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? (_jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (_jsx(SplitButton, { ref: ref, icon: _jsx(Icon, { size: 20 }), appearance: "subtle", className: mergeClasses(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, disabled: disabled, children: text })) })) : (_jsx(MenuTrigger, { disableButtonEnhancement: true, children: _jsx(MenuButton, { ref: ref, appearance: "subtle", icon: _jsx(Icon, { size: 20 }), className: mergeClasses(styles.menuButton), children: text }) })), _jsx(MenuPopover, { children: _jsx(MenuList, { items: items }) })] })
+    (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => ((0, jsx_runtime_1.jsx)(react_components_1.SplitButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, disabled: disabled, children: text })) })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuButton, { ref: ref, appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(styles.menuButton), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] })
     // </div>
     );
 }));
-CommandMenuButton.displayName = 'CommandMenuButton';
+exports.CommandMenuButton.displayName = 'CommandMenuButton';

package/CommandBar/MenuItem.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { makeStyles, Menu, MenuItem as InternalMenuItem, MenuPopover, MenuSplitGroup, MenuTrigger, mergeClasses, tokens, } from '@fluentui/react-components';
-import { memo } from 'react';
-import { MenuList } from './MenuList';
-const useStyles = makeStyles({
+"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 react_1 = require("react");
+const MenuList_1 = require("./MenuList");
+const useStyles = (0, react_components_1.makeStyles)({
     splitMenuRight: {
         '& .fui-MenuItem__icon': {
             display: 'none',
@@ -10,26 +13,26 @@ const useStyles = makeStyles({
     },
     danger: {
         '&:hover': {
-            color: tokens.colorPaletteRedForeground1,
-            background: tokens.colorPaletteRedBackground1,
+            color: react_components_1.tokens.colorPaletteRedForeground1,
+            background: react_components_1.tokens.colorPaletteRedBackground1,
             '& .fui-MenuItem__icon': {
-                color: tokens.colorPaletteRedForeground1,
+                color: react_components_1.tokens.colorPaletteRedForeground1,
             },
             '&:active': {
-                color: tokens.colorPaletteRedForeground2,
-                background: tokens.colorPaletteRedBackground2,
+                color: react_components_1.tokens.colorPaletteRedForeground2,
+                background: react_components_1.tokens.colorPaletteRedBackground2,
                 '& .fui-MenuItem__icon': {
-                    color: tokens.colorPaletteRedForeground2,
+                    color: react_components_1.tokens.colorPaletteRedForeground2,
                 },
             },
         },
     },
 });
-export const MenuItem = memo(({ Icon, text, disabled, danger, onClick, items }) => {
+exports.MenuItem = (0, react_1.memo)(({ Icon, text, disabled, danger, onClick, items }) => {
     const styles = useStyles();
-    if (!(items === null || items === void 0 ? void 0 : items.length)) {
-        return (_jsx(InternalMenuItem, { disabled: disabled, onClick: onClick, icon: _jsx(Icon, { size: 20 }), className: mergeClasses(danger && styles.danger), children: text }));
+    if (!items?.length) {
+        return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { disabled: disabled, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
     }
-    return (_jsxs(Menu, { hasIcons: true, children: [onClick ? (_jsxs(MenuSplitGroup, { children: [_jsx(InternalMenuItem, { icon: _jsx(Icon, { size: 20 }), className: mergeClasses(danger && styles.danger), children: text }), _jsx(MenuTrigger, { disableButtonEnhancement: true, children: _jsx(InternalMenuItem, { className: mergeClasses(styles.splitMenuRight) }) })] })) : (_jsx(MenuTrigger, { disableButtonEnhancement: true, children: _jsx(InternalMenuItem, { icon: _jsx(Icon, { size: 20 }), children: text }) })), _jsx(MenuPopover, { children: _jsx(MenuList, { items: items }) })] }));
+    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, { size: 20 }), 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, { size: 20 }), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
 });
-MenuItem.displayName = 'MenuItem';
+exports.MenuItem.displayName = 'MenuItem';

package/CommandBar/MenuItems.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MenuDivider } from '@fluentui/react-components';
-import { Fragment, memo } from 'react';
-import { MenuItem } from './MenuItem';
-export const MenuItems = memo(({ items }) => {
-    return (_jsx(Fragment, { children: items === null || items === void 0 ? void 0 : items.map((group, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx(MenuDivider, {}), group.map((item, index) => {
-                    var _a;
-                    return (_jsx(MenuItem, { Icon: item.Icon, onClick: item.onClick, text: item.text, danger: item.danger, disabled: item.disabled, items: item.items }, ((_a = item.text) !== null && _a !== void 0 ? _a : '') + index));
-                })] }, index))) }));
+"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");
+exports.MenuItems = (0, react_1.memo)(({ items }) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: 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 }, (item.text ?? '') + index)))] }, index))) }));
 });
-MenuItems.displayName = 'MenuItems';
+exports.MenuItems.displayName = 'MenuItems';

package/CommandBar/MenuList.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MenuItem, MenuList as InternalMenuList, tokens, } from '@fluentui/react-components';
-import { memo } from 'react';
-import { MenuItems } from './MenuItems';
-export const MenuList = memo(({ items }) => {
-    return (_jsx(InternalMenuList, { children: !(items === null || items === void 0 ? void 0 : items.length) ? (_jsx(MenuItem, { style: {
-                color: tokens.colorNeutralForegroundDisabled,
+"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 react_1 = require("react");
+const MenuItems_1 = require("./MenuItems");
+exports.MenuList = (0, react_1.memo)(({ items }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: !items?.length ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { style: {
+                color: react_components_1.tokens.colorNeutralForegroundDisabled,
                 fontStyle: 'italic',
-            }, children: "No items" })) : (_jsx(MenuItems, { items: items })) }));
+            }, children: "No items" })) : ((0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { items: items })) }));
 });
-MenuList.displayName = 'MenuList';
+exports.MenuList.displayName = 'MenuList';

package/CommandBar/Wrapper.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { makeStyles, mergeClasses, Toolbar, } from '@fluentui/react-components';
-import { forwardRef, memo, } from 'react';
-const useStyles = makeStyles({
+"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,
@@ -14,8 +17,8 @@ const useStyles = makeStyles({
         overflow: 'auto',
     },
 });
-export const CommandBarWrapper = memo(forwardRef(function CommandBarWrapper({ children, overflow, className, align = 'start' }, ref) {
+exports.CommandBarWrapper = (0, react_1.memo)((0, react_1.forwardRef)(function CommandBarWrapper({ children, overflow, className, align = 'start' }, ref) {
     const styles = useStyles();
-    return (_jsx(Toolbar, { ref: ref, style: { justifyContent: 'flex-' + align }, className: mergeClasses(styles.root, overflow === 'hidden' ? styles.overflowHidden : styles.overflowAuto, className), children: children }));
+    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 }));
 }));
-CommandBarWrapper.displayName = 'CommandBarWrapper';
+exports.CommandBarWrapper.displayName = 'CommandBarWrapper';

package/CommandBar/index.js

@@ -1,15 +1,17 @@
-import { CommandButton } from './Button';
-import { CommandDivider } from './Divider';
-import { CommandIconButton } from './IconButton';
-import { CommandLabel } from './Label';
-import { CommandMenuButton } from './MenuButton';
-import { CommandBarWrapper } from './Wrapper';
+"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: CommandBarWrapper,
-    Button: CommandButton,
-    MenuButton: CommandMenuButton,
-    Divider: CommandDivider,
-    IconButton: CommandIconButton,
-    Label: CommandLabel,
+    Wrapper: Wrapper_1.CommandBarWrapper,
+    Button: Button_1.CommandButton,
+    MenuButton: MenuButton_1.CommandMenuButton,
+    Divider: Divider_1.CommandDivider,
+    IconButton: IconButton_1.CommandIconButton,
+    Label: Label_1.CommandLabel,
 };
-export default CommandBar;
+exports.default = CommandBar;

package/DataForm/SectionControl.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Field } from '@fluentui/react-components';
-export function SectionControlWrapper(props) {
-    return (_jsx(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 }));
+"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.js

@@ -1,12 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useLocale } from '@headless-adminapp/app/locale';
-import { useMutableStateSelector, } from '@headless-adminapp/app/mutable';
-import { memo } from 'react';
-import { TableCellAction } from '../DataGrid/TableCell';
-import { transformMenuItems } from '../OverflowCommandBar';
-export const ActionCell = memo(function ActionCell({ onOpen, mutableState, }) {
-    const transformedCommands = useMutableStateSelector(mutableState, (state) => state);
-    const { language } = useLocale();
-    return (_jsx(TableCellAction, { onOpen: onOpen, items: transformedCommands.map((item) => transformMenuItems(item, language)) }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const locale_1 = require("@headless-adminapp/app/locale");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const react_1 = require("react");
+const TableCell_1 = require("../DataGrid/TableCell");
+const OverflowCommandBar_1 = require("../OverflowCommandBar");
+exports.ActionCell = (0, react_1.memo)(function ActionCell({ onOpen, mutableState, }) {
+    const transformedCommands = (0, mutable_1.useMutableStateSelector)(mutableState, (state) => state);
+    const { language } = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellAction, { onOpen: onOpen, items: transformedCommands.map((item) => (0, OverflowCommandBar_1.transformMenuItems)(item, language)) }));
 });
-ActionCell.displayName = 'ActionCell';
+exports.ActionCell.displayName = 'ActionCell';

package/DataGrid/CommandContainer.js

@@ -1,7 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMainGridCommands } from '@headless-adminapp/app/datagrid/hooks';
-import { OverflowCommandBar } from '../OverflowCommandBar';
-export const CommandContainer = () => {
-    const gridCommands = useMainGridCommands();
-    return _jsx(OverflowCommandBar, { commands: gridCommands });
+"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.js

@@ -1,90 +1,92 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Checkbox, Divider, Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, Dropdown, Input, Option, tokens, } from '@fluentui/react-components';
-import { transformViewColumns, } from '@headless-adminapp/app/datagrid';
-import { useDataGridSchema } from '@headless-adminapp/app/datagrid/hooks';
-import { useLocale } from '@headless-adminapp/app/locale';
-import { localizedLabel } from '@headless-adminapp/app/locale/utils';
-import { useMetadata } from '@headless-adminapp/app/metadata/hooks';
-import { Icons } from '@headless-adminapp/icons';
-import { useState } from 'react';
-import { useAppStrings } from '../../App/AppStringContext';
-import { usePageEntityViewStrings } from '../../PageEntityView/PageEntityViewStringContext';
-export function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, }) {
-    var _a;
-    const schema = useDataGridSchema();
-    const { schemaStore } = useMetadata();
-    const { language } = useLocale();
-    const strings = usePageEntityViewStrings();
-    const appStrings = useAppStrings();
+"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 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 utils_1 = require("@headless-adminapp/app/locale/utils");
+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, }) {
+    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: localizedLabel(language, schema),
-            columns: transformViewColumns(schema.logicalName, Object.keys(schema.attributes).map((key) => ({
+    const columnGroups = {
+        root: {
+            label: (0, utils_1.localizedLabel)(language, schema),
+            columns: (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(schema.attributes).map((key) => ({
                 name: key,
             })), schemaStore, language),
-        } }, lookupAttributes.reduce((acc, { key, attribute }) => {
-        const lookupSchema = schemaStore.getSchema(attribute.entity);
-        const columns = transformViewColumns(schema.logicalName, Object.keys(lookupSchema.attributes).map((nestedKey) => ({
-            name: key,
-            expandedKey: nestedKey,
-        })), schemaStore, language);
-        acc[key] = {
-            label: localizedLabel(language, attribute) +
-                ' (' +
-                localizedLabel(language, lookupSchema) +
-                ')',
-            columns,
-        };
-        return acc;
-    }, {}));
+        },
+        ...lookupAttributes.reduce((acc, { key, attribute }) => {
+            const lookupSchema = schemaStore.getSchema(attribute.entity);
+            const columns = (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(lookupSchema.attributes).map((nestedKey) => ({
+                name: key,
+                expandedKey: nestedKey,
+            })), schemaStore, language);
+            acc[key] = {
+                label: (0, utils_1.localizedLabel)(language, attribute) +
+                    ' (' +
+                    (0, utils_1.localizedLabel)(language, lookupSchema) +
+                    ')',
+                columns,
+            };
+            return acc;
+        }, {}),
+    };
     const tableItems = Object.entries(columnGroups).map(([key, group]) => ({
         key,
         label: group.label,
     }));
-    const [selectedGroup, setSelectedGroup] = useState('root');
+    const [selectedGroup, setSelectedGroup] = (0, react_1.useState)('root');
     const selectedGroupItem = tableItems.find((x) => x.key === selectedGroup);
     const availableColumns = columnGroups[selectedGroup].columns;
-    const [searchText, setSearchText] = useState('');
+    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 (_jsxs(Drawer, { separator: true, open: opened, position: "end", children: [_jsx(DrawerHeader, { children: _jsx(DrawerHeaderTitle, { action: _jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: _jsx(Icons.Close, {}), onClick: onClose }), children: strings.addColumns }) }), _jsxs("div", { style: { width: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Drawer, { separator: true, open: opened, position: "end", 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: tokens.spacingVerticalXS,
-                            paddingInline: tokens.spacingHorizontalS,
-                        }, children: [_jsx(Input, { contentBefore: _jsx(Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value) }), _jsx(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) => {
+                            marginBottom: react_components_1.tokens.spacingVerticalXS,
+                            paddingInline: react_components_1.tokens.spacingHorizontalS,
+                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { value: selectedGroupItem?.label ?? '', selectedOptions: selectedGroupItem ? [String(selectedGroupItem.key)] : [], onOptionSelect: (event, data) => {
                                     setSelectedGroup(data.optionValue);
                                 }, style: { flex: 1, minWidth: 'unset' }, positioning: {
                                     align: 'bottom',
                                     position: 'below',
-                                }, children: tableItems.map((x) => (_jsx(Option, { value: x.key, children: x.label }, x.key))) })] }), _jsx(Divider, {})] }), _jsx(DrawerBody, { style: { paddingInline: 0 }, children: filteredColumns.map((column) => {
-                    var _a;
-                    return (_jsx(Button, { appearance: "transparent", icon: _jsx(Checkbox, { checked: (_a = includedColumnsObj[column.id]) !== null && _a !== void 0 ? _a : false }), style: {
-                            fontWeight: tokens.fontSizeBase400,
-                            width: '100%',
-                            justifyContent: 'flex-start',
-                            paddingInline: tokens.spacingHorizontalS,
-                        }, onClick: () => {
-                            if (includedColumnsObj[column.id]) {
-                                onColumnRemove(column);
-                            }
-                            else {
-                                onColumnAdd(column);
-                            }
-                        }, children: column.label }, column.id));
-                }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [_jsx(Divider, {}), _jsx("div", { style: {
+                                }, children: tableItems.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.key, children: x.label }, x.key))) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, {})] }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { paddingInline: 0 }, children: filteredColumns.map((column) => ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { checked: includedColumnsObj[column.id] ?? false }), style: {
+                        fontWeight: react_components_1.tokens.fontSizeBase400,
+                        width: '100%',
+                        justifyContent: 'flex-start',
+                        paddingInline: react_components_1.tokens.spacingHorizontalS,
+                    }, onClick: () => {
+                        if (includedColumnsObj[column.id]) {
+                            onColumnRemove(column);
+                        }
+                        else {
+                            onColumnAdd(column);
+                        }
+                    }, children: column.label }, column.id))) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             padding: 8,
                             gap: 8,
                             justifyContent: 'flex-end',
-                        }, children: _jsx(Button, { onClick: onClose, children: strings.close }) })] })] }));
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: onClose, children: strings.close }) })] })] }));
 }

package/DataGrid/CustomizeColumns/ColumnItem.js

@@ -1,23 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Body1, Button, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, tokens, } from '@fluentui/react-components';
-import { Icons } from '@headless-adminapp/icons';
-import { useRef } from 'react';
-import { useDrag, useDrop } from 'react-dnd';
-export const ItemTypes = {
+"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 DndProvider_1 = require("../../components/DndProvider");
+exports.ItemTypes = {
     CARD: 'column',
 };
-export const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSet = {}, // defaultCustomizeColumnStrings,
+const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSet = {}, // defaultCustomizeColumnStrings,
  }) => {
-    const ref = useRef(null);
+    const { useDrag, useDrop } = (0, DndProvider_1.useDndContext)();
+    const ref = (0, react_1.useRef)(null);
     const [{ handlerId }, drop] = useDrop({
-        accept: ItemTypes.CARD,
+        accept: exports.ItemTypes.CARD,
         collect(monitor) {
             return {
                 handlerId: monitor.getHandlerId(),
             };
         },
         hover(item, monitor) {
-            var _a;
             if (!ref.current) {
                 return;
             }
@@ -28,7 +31,7 @@ export const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, s
                 return;
             }
             // Determine rectangle on screen
-            const hoverBoundingRect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const hoverBoundingRect = ref.current?.getBoundingClientRect();
             // Get vertical middle
             const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
             // Determine mouse position
@@ -56,7 +59,7 @@ export const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, s
         },
     });
     const [{ isDragging }, drag] = useDrag({
-        type: ItemTypes.CARD,
+        type: exports.ItemTypes.CARD,
         item: () => {
             return { id: item.id, index };
         },
@@ -66,19 +69,20 @@ export const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, s
     });
     const opacity = isDragging ? 0 : 1;
     drag(drop(ref));
-    return (_jsxs("div", { ref: ref, style: {
-            background: tokens.colorNeutralBackground4,
-            paddingBlock: tokens.spacingVerticalXS,
-            paddingLeft: tokens.spacingHorizontalS,
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
+            background: react_components_1.tokens.colorNeutralBackground4,
+            paddingBlock: react_components_1.tokens.spacingVerticalXS,
+            paddingLeft: react_components_1.tokens.spacingHorizontalS,
             cursor: 'move',
             opacity,
-            borderRadius: tokens.borderRadiusMedium,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
-        }, "data-handler-id": handlerId, children: [_jsx(Body1, { style: { flex: 1 }, children: item.label }), _jsxs(Menu, { positioning: "below-start", children: [_jsx(MenuTrigger, { children: _jsx(Button, { icon: _jsx(Icons.MoreVertical, {}), appearance: "transparent", size: "small" }) }), _jsx(MenuPopover, { children: _jsxs(MenuList, { children: [_jsx(MenuItem, { icon: _jsx(Icons.Delete, {}), onClick: onRemove, children: stringSet.remove }), !isFirst && (_jsx(MenuItem, { icon: _jsx(Icons.Add, {}), onClick: () => {
+        }, "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 && (_jsx(MenuItem, { icon: _jsx(Icons.Add, {}), onClick: () => {
+                                    }, 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;