@adaptabletools/adaptable-cjs 22.1.1-canary.1 → 23.0.0-canary.0

package/src/components/DragAndDropContext/TabList.js

@@ -5,6 +5,7 @@ exports.TabItem = TabItem;
 exports.ToolbarList = ToolbarList;
 exports.ToolbarItem = ToolbarItem;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const dnd_1 = require("../dnd");
 const icons_1 = require("../icons");
@@ -24,40 +25,29 @@ function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTab
         tabIdsRef.current.set(tab, newId);
         return newId;
     }, []);
-    return (React.createElement(dnd_1.DragList, { dragListId: "TABS", orientation: "horizontal", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: dnd_1.defaultDragProxyMove, onDrop: (sortedIndexes) => {
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: "TABS", orientation: "horizontal", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: dnd_1.defaultDragProxyMove, onDrop: (sortedIndexes) => {
             const newTabs = sortedIndexes.map((i) => tabs[i]);
             onTabsChange(newTabs);
-        } }, (listDomProps) => (React.createElement("div", { ...listDomProps, className: (0, clsx_1.default)('ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs" },
-        tabs.map((tab, tabIndex) => {
-            const tabId = getTabStableId(tab);
-            return (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabId: tabId, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }));
-        }),
-        !disabled && onNewTab ? (React.createElement(Flex_1.Flex, { alignItems: "center", justifyContent: "center", className: "ab-ModuleSelector__TabItem twa:min-w-32 twa:border-dashed twa:cursor-pointer twa:bg-primarylight twa:text-primary-foreground twa:hover:bg-primary", onClick: onNewTab },
-            React.createElement("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic" },
-                React.createElement(icons_1.Icon, { name: "plus", size: 32 }),
-                "Click to add tab"))) : null))));
+        }, children: (listDomProps) => ((0, jsx_runtime_1.jsxs)("div", { ...listDomProps, className: (0, clsx_1.default)('ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs", children: [tabs.map((tab, tabIndex) => {
+                    const tabId = getTabStableId(tab);
+                    return ((0, jsx_runtime_1.jsx)(TabItem, { disabled: disabled, tabId: tabId, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }, tabIndex));
+                }), !disabled && onNewTab ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", justifyContent: "center", className: "ab-ModuleSelector__TabItem twa:min-w-32 twa:border-dashed twa:cursor-pointer twa:bg-primarylight twa:text-primary-foreground twa:hover:bg-primary", onClick: onNewTab, children: (0, jsx_runtime_1.jsxs)("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus", size: 32 }), "Click to add tab"] }) })) : null] })) }));
 }
 function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
     const context = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return (React.createElement(dnd_1.DragList.DraggableItem, { dragListId: "TABS", id: tabId }, (itemDomProps) => {
-        const { onPointerDown, ...restDomProps } = itemDomProps;
-        let showHeader = true;
-        if (tab.Name === '' &&
-            !context.permittedActions.editTabName &&
-            !context.permittedActions.deleteTab) {
-            showHeader = false;
-        }
-        return (React.createElement("div", { ...restDomProps, className: (0, clsx_1.default)('twa:bg-defaultbackground', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab" },
-            showHeader ? (React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
-                React.createElement("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' } },
-                    React.createElement(icons_1.Icon, { name: "drag" })),
-                context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
-                        onChangeTabName(event.target.value);
-                    } })) : (tab.Name),
-                context.permittedActions.deleteTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove })))) : null,
-            React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })));
-    }));
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { dragListId: "TABS", id: tabId, children: (itemDomProps) => {
+            const { onPointerDown, ...restDomProps } = itemDomProps;
+            let showHeader = true;
+            if (tab.Name === '' &&
+                !context.permittedActions.editTabName &&
+                !context.permittedActions.deleteTab) {
+                showHeader = false;
+            }
+            return ((0, jsx_runtime_1.jsxs)("div", { ...restDomProps, className: (0, clsx_1.default)('twa:bg-defaultbackground', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? ((0, jsx_runtime_1.jsxs)("div", { className: "ab-ModuleSelector__TabItem__header", children: [(0, jsx_runtime_1.jsx)("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag" }) }), context.permittedActions.editTabName ? ((0, jsx_runtime_1.jsx)("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
+                                    onChangeTabName(event.target.value);
+                                } })) : (tab.Name), context.permittedActions.deleteTab && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, (0, jsx_runtime_1.jsx)(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })] }));
+        } }));
 }
 function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, }) {
     const acceptDropsFrom = React.useMemo(() => {
@@ -68,7 +58,7 @@ function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disable
         });
         return sources;
     }, [tabIndex, tabs]);
-    return (React.createElement(dnd_1.DragList, { dragListId: String(tabIndex), orientation: "vertical", acceptDropsFrom: [...acceptDropsFrom, String(tabIndex)], onDragProxyMove: dnd_1.defaultDragProxyMove, 
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: String(tabIndex), orientation: "vertical", acceptDropsFrom: [...acceptDropsFrom, String(tabIndex)], onDragProxyMove: dnd_1.defaultDragProxyMove, 
         // this is called when reordering inside the same list
         onDrop: (sortedIndexes) => {
             const newItems = sortedIndexes.map((i) => toolbars[i]);
@@ -94,21 +84,17 @@ function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disable
                 return { ...tab, Items: items };
             });
             onTabsChange(newTabs);
-        } }, (listDomProps, context) => (React.createElement(Flex_1.Box, { ...listDomProps, className: (0, clsx_1.default)('ab-ModuleSelector__ToolbarList', listDomProps.className, {
-            'twa:bg-(--ab-dashboard-tab-drop-target__background) ab-ModuleSelector__ToolbarList--accent-drop': context.dropTargetListId === String(tabIndex) && context.status === 'accepted',
-            'twa:bg-error/30 ab-ModuleSelector__ToolbarList--reject-drop': context.dropTargetListId === String(tabIndex) && context.status === 'rejected',
-        }), "data-name": "dashboard-toolbar-drop-target" },
-        toolbars?.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }))),
-        toolbars.length === 0 ? (React.createElement("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center" }, "Drag and drop toolbar here")) : null))));
+        }, children: (listDomProps, context) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...listDomProps, className: (0, clsx_1.default)('ab-ModuleSelector__ToolbarList', listDomProps.className, {
+                'twa:bg-(--ab-dashboard-tab-drop-target__background) ab-ModuleSelector__ToolbarList--accent-drop': context.dropTargetListId === String(tabIndex) && context.status === 'accepted',
+                'twa:bg-error/30 ab-ModuleSelector__ToolbarList--reject-drop': context.dropTargetListId === String(tabIndex) && context.status === 'rejected',
+            }), "data-name": "dashboard-toolbar-drop-target", children: [toolbars?.map((toolbar, toolbarIndex) => ((0, jsx_runtime_1.jsx)(ToolbarItem, { disabled: disabled, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }, toolbar))), toolbars.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center", children: "Drag and drop toolbar here" })) : null] })) }));
 }
 function ToolbarItem({ toolbar, onRemove, disabled, }) {
     const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return (React.createElement(dnd_1.DragList.DraggableItem, { id: toolbar }, (itemDomProps) => {
-        const { onPointerDown, ...restDomProps } = itemDomProps;
-        return (React.createElement(Flex_1.Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, clsx_1.default)('ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1 twa:text-3', 'twa:bg-primarylight', restDomProps.className), alignItems: "center" },
-            React.createElement("div", { className: "twa:flex-1" }, title),
-            React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })));
-    }));
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: toolbar, children: (itemDomProps) => {
+            const { onPointerDown, ...restDomProps } = itemDomProps;
+            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, clsx_1.default)('ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1 twa:text-3', 'twa:bg-primarylight', restDomProps.className), alignItems: "center", children: [(0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1", children: title }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })] }));
+        } }));
 }

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -2,32 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnusedPanel = UnusedPanel;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const dnd_1 = require("../dnd");
 const DragAndDropContext_1 = require("./DragAndDropContext");
 const Flex_1 = require("../Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return (React.createElement(Flex_1.Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items" },
-        React.createElement(Flex_1.Box, { className: "twa:p-2" },
-            React.createElement("b", null, title),
-            " (",
-            dragItemText,
-            ")"),
-        React.createElement(UnusedItemList, { disabled: disabled, items: items })));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)("b", { children: title }), " (", dragItemText, ")"] }), (0, jsx_runtime_1.jsx)(UnusedItemList, { disabled: disabled, items: items })] }));
 }
 const EMPTY_ARRAY = [];
 function UnusedItemList({ items, disabled }) {
-    return (React.createElement(dnd_1.DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: "UNUSED", orientation: "horizontal", onDragProxyMove: dnd_1.defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: "UNUSED", orientation: "horizontal", onDragProxyMove: dnd_1.defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
             proxyElement.classList.add('twa:shadow-md');
-        }, onDrop: () => { } }, (listDomProps) => (React.createElement("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: (0, clsx_1.default)('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className) }, items.map((unusedItem) => (React.createElement(UnusedItem, { disabled: disabled, key: unusedItem, unusedItem: unusedItem })))))));
+        }, onDrop: () => { }, children: (listDomProps) => ((0, jsx_runtime_1.jsx)("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: (0, clsx_1.default)('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className), children: items.map((unusedItem) => ((0, jsx_runtime_1.jsx)(UnusedItem, { disabled: disabled, unusedItem: unusedItem }, unusedItem))) })) }));
 }
 function UnusedItem({ unusedItem, disabled }) {
     const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === unusedItem);
     const title = currentItem ? currentItem.Title : unusedItem;
-    return (React.createElement(dnd_1.DragList.DraggableItem, { id: unusedItem }, (itemDomProps) => {
-        const { onPointerDown, ...restDomProps } = itemDomProps;
-        return (React.createElement("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, clsx_1.default)('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2 twa:select-none', 'twa:bg-primary', restDomProps.className) }, title));
-    }));
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: unusedItem, children: (itemDomProps) => {
+            const { onPointerDown, ...restDomProps } = itemDomProps;
+            return ((0, jsx_runtime_1.jsx)("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, clsx_1.default)('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2 twa:select-none', 'twa:bg-primary', restDomProps.className), children: title }));
+        } }));
 }

package/src/components/Drawer/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Drawer = (props) => {
     const [isOpen, setIsOpen] = React.useState(() => {
@@ -54,6 +55,6 @@ const Drawer = (props) => {
         style.transform = 'translateY(-120%)';
         style.opacity = 0;
     }
-    return (React.createElement("div", { onKeyDown: handleOnKeyDown, style: style, onTransitionEnd: handletransitionEnd }, props.children));
+    return ((0, jsx_runtime_1.jsx)("div", { onKeyDown: handleOnKeyDown, style: style, onTransitionEnd: handletransitionEnd, children: props.children }));
 };
 exports.Drawer = Drawer;

package/src/components/Dropdown/Arrows.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("../icons");
 const Arrows = () => {
-    return (React.createElement("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flexFlow: 'column',
             position: 'absolute',
@@ -14,8 +13,6 @@ const Arrows = () => {
             right: 'var(--ab-base-space)',
             transform: 'translate3d(0px, -50%, 0px)',
             cursor: 'pointer',
-        } },
-        React.createElement(icons_1.Icon, { name: "triangle-up", size: 20, style: { position: 'relative', top: 7 } }),
-        React.createElement(icons_1.Icon, { name: "triangle-down", size: 20, style: { position: 'relative', top: -7 } })));
+        }, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "triangle-up", size: 20, style: { position: 'relative', top: 7 } }), (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "triangle-down", size: 20, style: { position: 'relative', top: -7 } })] }));
 };
 exports.default = Arrows;

package/src/components/Dropdown/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
@@ -80,29 +80,24 @@ const Dropdown = (props) => {
         selectedText = placeholder;
     }
     //20  ... 20 16
-    const renderClearButton = () => (React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, ...clearButtonProps, className: (0, twMerge_1.twMerge)('twa:p-0 twa:mr-1 twa:z-10 twa:color-inherit', clearButtonProps?.className), style: {
+    const renderClearButton = () => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, ...clearButtonProps, className: (0, twMerge_1.twMerge)('twa:p-0 twa:mr-1 twa:z-10 twa:color-inherit', clearButtonProps?.className), style: {
             ...(clearButtonProps ? clearButtonProps.style : null),
         }, onClick: (e) => {
             e.preventDefault();
             onChange(null, e);
         } }));
-    return (React.createElement(Flex_1.Flex, { ref: domRef, flexDirection: 'row', alignItems: "center", ...boxProps, className: (0, join_1.default)(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur },
-        React.createElement("div", { className: `${baseClassName}__text twa:inline-block` },
-            selectedText,
-            React.createElement(Arrows_1.default, null)),
-        React.createElement("select", { ref: selectRef, tabIndex: -1, disabled: disabled, value: value == null ? '' : value, onChange: (e) => {
-                const selected = finalOptions.filter((o) => o.value == e.target.value)[0];
-                onChange(selected, e);
-            }, style: {
-                opacity: 0,
-                width: '100%',
-                height: '100%',
-                top: 0,
-                left: 0,
-                zIndex: 1,
-            }, onMouseDown: onMouseDown, name: name, multiple: multiple, autoFocus: autoFocus }, finalOptions.map((o) => {
-            return (React.createElement("option", { key: o.value, value: o.value }, o.label));
-        })),
-        showClearButton && selectedOption ? renderClearButton() : null));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ref: domRef, flexDirection: 'row', alignItems: "center", ...boxProps, className: (0, join_1.default)(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur, children: [(0, jsx_runtime_1.jsxs)("div", { className: `${baseClassName}__text twa:inline-block`, children: [selectedText, (0, jsx_runtime_1.jsx)(Arrows_1.default, {})] }), (0, jsx_runtime_1.jsx)("select", { ref: selectRef, tabIndex: -1, disabled: disabled, value: value == null ? '' : value, onChange: (e) => {
+                    const selected = finalOptions.filter((o) => o.value == e.target.value)[0];
+                    onChange(selected, e);
+                }, style: {
+                    opacity: 0,
+                    width: '100%',
+                    height: '100%',
+                    top: 0,
+                    left: 0,
+                    zIndex: 1,
+                }, onMouseDown: onMouseDown, name: name, multiple: multiple, autoFocus: autoFocus, children: finalOptions.map((o) => {
+                    return ((0, jsx_runtime_1.jsx)("option", { value: o.value, children: o.label }, o.value));
+                }) }), showClearButton && selectedOption ? renderClearButton() : null] }));
 };
 exports.default = Dropdown;

package/src/components/DropdownButton/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DROPDOWN_ICON = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
@@ -10,9 +11,8 @@ const useExpanded_1 = tslib_1.__importDefault(require("./useExpanded"));
 const renderItem_1 = tslib_1.__importDefault(require("./renderItem"));
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
-exports.DROPDOWN_ICON = (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24" },
-    React.createElement("path", { d: "M7 10l5 5 5-5H7z" })));
-const spacer = React.createElement("div", { className: "twa:flex-1" });
+exports.DROPDOWN_ICON = ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 10l5 5 5-5H7z" }) }));
+const spacer = (0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" });
 const baseClassName = 'ab-DropdownButton';
 const defaultListItemStyle = {
     padding: 'var(--ab-cmp-dropdownbutton-list-item__padding)',
@@ -27,8 +27,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
     if (Array.isArray(items)) {
         content = items.map((item, index) => {
             if (item.separator) {
-                return (React.createElement("tr", { className: `${baseClassName}__separator`, key: index },
-                    React.createElement("td", { colSpan: 2 })));
+                return ((0, jsx_runtime_1.jsx)("tr", { className: `${baseClassName}__separator`, children: (0, jsx_runtime_1.jsx)("td", { colSpan: 2 }) }, index));
             }
             if (typeof listItemStyle === 'function') {
                 listItemStyle = listItemStyle(item, index);
@@ -75,8 +74,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                 columns: columns,
             });
         });
-        content = (React.createElement("table", { className: `${baseClassName}__content` },
-            React.createElement("tbody", null, content)));
+        content = ((0, jsx_runtime_1.jsx)("table", { className: `${baseClassName}__content`, children: (0, jsx_runtime_1.jsx)("tbody", { children: content }) }));
     }
     const dropdownButtonClassName = props.className;
     const className = (0, join_1.default)(props.className, baseClassName);
@@ -98,7 +96,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
         })
         : exports.DROPDOWN_ICON;
     const hasClearButton = onClear || showClearButton;
-    const clearButton = hasClearButton ? (React.createElement(SimpleButton_1.default, { disabled: domProps.disabled, as: "div", onClick: (event) => {
+    const clearButton = hasClearButton ? ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: domProps.disabled, as: "div", onClick: (event) => {
             event.stopPropagation();
             if (onClear) {
                 onClear();
@@ -108,13 +106,10 @@ const DropdownButton = React.forwardRef((props, theRef) => {
             ...clearButtonProps?.style,
             visibility: showClearButton ? 'visible' : 'hidden',
         } })) : null;
-    icon = (React.createElement(React.Fragment, null,
-        spacer,
-        hasClearButton ? clearButton : null,
-        icon));
+    icon = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [spacer, hasClearButton ? clearButton : null, icon] }));
     const buttonRef = (0, react_1.useRef)(null);
-    return (React.createElement(OverlayTrigger_1.default, { visible: expanded, targetOffset: listOffset, render: () => {
-            return (React.createElement("div", { "data-name": `${dropdownButtonClassName}`, style: listStyle, className: `${baseClassName}__list`, onMouseDownCapture: (e) => {
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { visible: expanded, targetOffset: listOffset, render: () => {
+            return ((0, jsx_runtime_1.jsx)("div", { "data-name": `${dropdownButtonClassName || 'dropdown-button-list'}`, style: listStyle, className: `${baseClassName}__list`, onMouseDownCapture: (e) => {
                     /**
                      * This stops popups register clicks inside the dropdown
                      * This is needed for column filter dropdows when redenred
@@ -123,9 +118,8 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                     if (props.stopPropagationOnOverlay) {
                         e.stopPropagation();
                     }
-                } }, content));
-        }, ...overlayProps },
-        React.createElement(SimpleButton_1.default, { iconPosition: "end", ...(showToggleIcon && { icon }), ...domProps, ref: (btn) => {
+                }, children: content }));
+        }, ...overlayProps, children: (0, jsx_runtime_1.jsxs)(SimpleButton_1.default, { iconPosition: "end", ...(showToggleIcon && { icon }), ...domProps, ref: (btn) => {
                 buttonRef.current = btn;
                 if (!theRef) {
                     return;
@@ -158,17 +152,15 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                     domProps.onBlur(e);
                 }
                 setExpanded(false);
-            } },
-            React.createElement("div", { ref: positionerRef, tabIndex: -1, style: {
-                    position: 'absolute',
-                    height: '100%',
-                    width: '100%',
-                    zIndex: -1,
-                    pointerEvents: 'none',
-                    opacity: 0,
-                    top: 0,
-                    left: 0,
-                } }),
-            children)));
+            }, children: [(0, jsx_runtime_1.jsx)("div", { ref: positionerRef, tabIndex: -1, style: {
+                        position: 'absolute',
+                        height: '100%',
+                        width: '100%',
+                        zIndex: -1,
+                        pointerEvents: 'none',
+                        opacity: 0,
+                        top: 0,
+                        left: 0,
+                    } }), children] }) }));
 });
 exports.default = DropdownButton;

package/src/components/DropdownButton/renderItem.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const isPlainObject_1 = tslib_1.__importDefault(require("../../Utilities/utils/isPlainObject"));
 exports.default = ({ domProps, item, onItemClick, index, columns, className, idProperty, style, }) => {
     const key = item[idProperty] || index;
     if (!(0, isPlainObject_1.default)(item)) {
-        return (React.createElement("tr", { onClick: onItemClick, key: key, className: className, ...domProps },
-            React.createElement("td", { colSpan: columns.length, style: style }, item)));
+        return ((0, jsx_runtime_1.jsx)("tr", { onClick: onItemClick, className: className, ...domProps, children: (0, jsx_runtime_1.jsx)("td", { colSpan: columns.length, style: style, children: item }) }, key));
     }
-    return (React.createElement("tr", { onClick: onItemClick, key: key, className: className, ...domProps }, columns.map((col) => {
-        return (React.createElement("td", { key: col, style: style }, item[col]));
-    })));
+    return ((0, jsx_runtime_1.jsx)("tr", { onClick: onItemClick, className: className, ...domProps, children: columns.map((col) => {
+            return ((0, jsx_runtime_1.jsx)("td", { style: style, children: item[col] }, col));
+        }) }, key));
 };

package/src/components/EmptyContent/index.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("../Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const baseClassName = 'ab-EmptyContent';
 const EmptyContent = ({ children, className, style, ...flexProps }) => {
     if (typeof children === 'string') {
-        children = React.createElement("p", null, children);
+        children = (0, jsx_runtime_1.jsx)("p", { children: children });
     }
-    return (React.createElement(Flex_1.Box, { className: `${baseClassName}__wrapper twa:flex-1 twa:relative twa:size-full` },
-        React.createElement(Flex_1.Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: (0, clsx_1.default)('twa:absolute twa:inset-0 twa:text-3 twa:text-center twa:p-4', 'twa:[&_p]:text-primary-foreground', baseClassName, className), style: style }, children)));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__wrapper twa:flex-1 twa:relative twa:size-full`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: (0, clsx_1.default)('twa:absolute twa:inset-0 twa:text-3 twa:text-center twa:p-4', 'twa:[&_p]:text-primary-foreground', baseClassName, className), style: style, children: children }) }));
 };
 exports.default = EmptyContent;

package/src/components/ErrorBox/index.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("../Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-ErrorBox';
 const ErrorBox = (props) => {
-    return (React.createElement(Flex_1.Box, { ...props, className: (0, clsx_1.default)('twa:p-3 twa:rounded-standard twa:bg-error twa:text-text-on-error', props.className, exports.baseClassName) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, clsx_1.default)('twa:p-3 twa:rounded-standard twa:bg-error twa:text-text-on-error', props.className, exports.baseClassName) }));
 };
 exports.default = ErrorBox;