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

package/CommandBar/MenuButton.js

@@ -1,43 +1,40 @@
-"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)({
+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({
     splitButton: {
         '& > button:first-child': {
-            fontWeight: react_components_1.tokens.fontWeightRegular,
-            borderRightColor: react_components_1.tokens.colorNeutralStroke3,
+            fontWeight: tokens.fontWeightRegular,
+            borderRightColor: tokens.colorNeutralStroke3,
         },
     },
     menuButton: {
-        fontWeight: react_components_1.tokens.fontWeightRegular,
+        fontWeight: tokens.fontWeightRegular,
     },
     splitButtonDanger: {
         '& > button:first-child:hover': {
-            color: react_components_1.tokens.colorPaletteRedForeground1,
-            background: react_components_1.tokens.colorPaletteRedBackground1,
+            color: tokens.colorPaletteRedForeground1,
+            background: tokens.colorPaletteRedBackground1,
             '& .fui-Button__icon': {
-                color: react_components_1.tokens.colorPaletteRedForeground1,
+                color: tokens.colorPaletteRedForeground1,
             },
             '&:active': {
-                color: react_components_1.tokens.colorPaletteRedForeground2,
-                background: react_components_1.tokens.colorPaletteRedBackground2,
+                color: tokens.colorPaletteRedForeground2,
+                background: tokens.colorPaletteRedBackground2,
                 '& .fui-Button__icon': {
-                    color: react_components_1.tokens.colorPaletteRedForeground2,
+                    color: tokens.colorPaletteRedForeground2,
                 },
             },
         },
     },
 });
-exports.CommandMenuButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandMenuButton({ Icon, items, text, danger, disabled, onClick }, ref) {
+export const CommandMenuButton = memo(forwardRef(function CommandMenuButton({ Icon, items, text, danger, disabled, onClick }, ref) {
     const styles = useStyles();
     return (
     // <div ref={ref}>
-    (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 }) })] })
+    _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 }) })] })
     // </div>
     );
 }));
-exports.CommandMenuButton.displayName = 'CommandMenuButton';
+CommandMenuButton.displayName = 'CommandMenuButton';

package/CommandBar/MenuItem.js

@@ -1,11 +1,8 @@
-"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)({
+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({
     splitMenuRight: {
         '& .fui-MenuItem__icon': {
             display: 'none',
@@ -13,26 +10,26 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
     danger: {
         '&:hover': {
-            color: react_components_1.tokens.colorPaletteRedForeground1,
-            background: react_components_1.tokens.colorPaletteRedBackground1,
+            color: tokens.colorPaletteRedForeground1,
+            background: tokens.colorPaletteRedBackground1,
             '& .fui-MenuItem__icon': {
-                color: react_components_1.tokens.colorPaletteRedForeground1,
+                color: tokens.colorPaletteRedForeground1,
             },
             '&:active': {
-                color: react_components_1.tokens.colorPaletteRedForeground2,
-                background: react_components_1.tokens.colorPaletteRedBackground2,
+                color: tokens.colorPaletteRedForeground2,
+                background: tokens.colorPaletteRedBackground2,
                 '& .fui-MenuItem__icon': {
-                    color: react_components_1.tokens.colorPaletteRedForeground2,
+                    color: tokens.colorPaletteRedForeground2,
                 },
             },
         },
     },
 });
-exports.MenuItem = (0, react_1.memo)(({ Icon, text, disabled, danger, onClick, items }) => {
+export const MenuItem = memo(({ 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, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
+        return (_jsx(InternalMenuItem, { disabled: disabled, onClick: onClick, icon: _jsx(Icon, { size: 20 }), className: 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, { 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 }) })] }));
+    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 }) })] }));
 });
-exports.MenuItem.displayName = 'MenuItem';
+MenuItem.displayName = 'MenuItem';

package/CommandBar/MenuItems.js

@@ -1,14 +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");
-exports.MenuItems = (0, react_1.memo)(({ 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) => {
+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 ((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 }, ((_a = item.text) !== null && _a !== void 0 ? _a : '') + index));
+                    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))) }));
 });
-exports.MenuItems.displayName = 'MenuItems';
+MenuItems.displayName = 'MenuItems';

package/CommandBar/MenuList.js

@@ -1,14 +1,11 @@
-"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 === null || items === void 0 ? void 0 : items.length) ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { style: {
-                color: react_components_1.tokens.colorNeutralForegroundDisabled,
+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,
                 fontStyle: 'italic',
-            }, children: "No items" })) : ((0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { items: items })) }));
+            }, children: "No items" })) : (_jsx(MenuItems, { items: items })) }));
 });
-exports.MenuList.displayName = 'MenuList';
+MenuList.displayName = 'MenuList';

package/CommandBar/Wrapper.js

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

package/CommandBar/index.js

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

package/DataForm/SectionControl.js

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

package/DataGrid/ActionCell.js

@@ -1,15 +1,12 @@
-"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)) }));
+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)) }));
 });
-exports.ActionCell.displayName = 'ActionCell';
+ActionCell.displayName = 'ActionCell';

package/DataGrid/CommandContainer.js

@@ -1,11 +1,7 @@
-"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 });
+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 });
 };
-exports.CommandContainer = CommandContainer;

package/DataGrid/CustomizeColumns/AddColumns.js

@@ -1,24 +1,21 @@
-"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, }) {
+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 = (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 schema = useDataGridSchema();
+    const { schemaStore } = useMetadata();
+    const { language } = useLocale();
+    const strings = usePageEntityViewStrings();
+    const appStrings = useAppStrings();
     const lookupAttributes = Object.entries(schema.attributes)
         .map(([key, attribute]) => ({
         key,
@@ -26,20 +23,20 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
     }))
         .filter(({ attribute }) => attribute.type === 'lookup');
     const columnGroups = Object.assign({ root: {
-            label: (0, utils_1.localizedLabel)(language, schema),
-            columns: (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(schema.attributes).map((key) => ({
+            label: localizedLabel(language, schema),
+            columns: 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) => ({
+        const columns = transformViewColumns(schema.logicalName, Object.keys(lookupSchema.attributes).map((nestedKey) => ({
             name: key,
             expandedKey: nestedKey,
         })), schemaStore, language);
         acc[key] = {
-            label: (0, utils_1.localizedLabel)(language, attribute) +
+            label: localizedLabel(language, attribute) +
                 ' (' +
-                (0, utils_1.localizedLabel)(language, lookupSchema) +
+                localizedLabel(language, lookupSchema) +
                 ')',
             columns,
         };
@@ -49,33 +46,33 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
         key,
         label: group.label,
     }));
-    const [selectedGroup, setSelectedGroup] = (0, react_1.useState)('root');
+    const [selectedGroup, setSelectedGroup] = useState('root');
     const selectedGroupItem = tableItems.find((x) => x.key === selectedGroup);
     const availableColumns = columnGroups[selectedGroup].columns;
-    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [searchText, setSearchText] = 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: {
+    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: {
                             display: 'flex',
                             flexDirection: 'column-reverse',
                             gap: 8,
-                            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: (_a = selectedGroupItem === null || selectedGroupItem === void 0 ? void 0 : selectedGroupItem.label) !== null && _a !== void 0 ? _a : '', selectedOptions: selectedGroupItem ? [String(selectedGroupItem.key)] : [], onOptionSelect: (event, data) => {
+                            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) => {
                                     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) => {
+                                }, 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 ((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,
+                    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: react_components_1.tokens.spacingHorizontalS,
+                            paddingInline: tokens.spacingHorizontalS,
                         }, onClick: () => {
                             if (includedColumnsObj[column.id]) {
                                 onColumnRemove(column);
@@ -84,10 +81,10 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
                                 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: {
+                }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [_jsx(Divider, {}), _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 }) })] })] }));
+                        }, children: _jsx(Button, { onClick: onClose, children: strings.close }) })] })] }));
 }

package/DataGrid/CustomizeColumns/ColumnItem.js

@@ -1,19 +1,16 @@
-"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 = {
+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 = {
     CARD: 'column',
 };
-const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSet = {}, // defaultCustomizeColumnStrings,
+export 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,
+    const ref = useRef(null);
+    const [{ handlerId }, drop] = useDrop({
+        accept: ItemTypes.CARD,
         collect(monitor) {
             return {
                 handlerId: monitor.getHandlerId(),
@@ -58,8 +55,8 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
             item.index = hoverIndex;
         },
     });
-    const [{ isDragging }, drag] = (0, react_dnd_1.useDrag)({
-        type: exports.ItemTypes.CARD,
+    const [{ isDragging }, drag] = useDrag({
+        type: ItemTypes.CARD,
         item: () => {
             return { id: item.id, index };
         },
@@ -69,20 +66,19 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
     });
     const opacity = isDragging ? 0 : 1;
     drag(drop(ref));
-    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,
+    return (_jsxs("div", { ref: ref, style: {
+            background: tokens.colorNeutralBackground4,
+            paddingBlock: tokens.spacingVerticalXS,
+            paddingLeft: tokens.spacingHorizontalS,
             cursor: 'move',
             opacity,
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            borderRadius: tokens.borderRadiusMedium,
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
-        }, "data-handler-id": handlerId, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { flex: 1 }, children: item.label }), (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}), appearance: "transparent", size: "small" }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: onRemove, children: stringSet.remove }), !isFirst && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
+        }, "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: () => {
                                         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: () => {
+                                    }, children: stringSet.moveUp })), !isLast && (_jsx(MenuItem, { icon: _jsx(Icons.Add, {}), onClick: () => {
                                         moveItem(index, index + 1);
                                     }, children: stringSet.moveDown }))] }) })] })] }));
 };
-exports.ColumnItem = ColumnItem;