@adaptabletools/adaptable-cjs 23.0.0-canary.0 → 23.0.0-canary.10

package/src/components/DropdownButton/index.js

@@ -1,166 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DROPDOWN_ICON = void 0;
+exports.NewDropdownButton = 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"));
+const dropdown_menu_1 = require("../ui/dropdown-menu");
+const NewTooltip_1 = require("../NewTooltip");
+const utils_1 = require("../../lib/utils");
+const lucide_react_1 = require("lucide-react");
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
-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 = ((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)',
-};
-const DropdownButton = React.forwardRef((props, theRef) => {
-    let { columns, overlayProps, listOffset = 10, collapseOnItemClick = true, focusOnClear = true, idProperty = 'id', isItemDisabled, items, children, listMinWidth = 100, listStyle, listItemStyle, listItemClassName, constrainTo, showClearButton = false, onClear, clearButtonProps, onExpand, onCollapse, showToggleIcon = true, ...domProps } = props;
-    isItemDisabled = isItemDisabled || ((item) => item.disabled);
-    if (!columns) {
-        columns = ['icon', 'label'];
-    }
-    let content;
-    if (Array.isArray(items)) {
-        content = items.map((item, index) => {
-            if (item.separator) {
-                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);
-            }
-            const disabled = isItemDisabled(item);
-            const itemStyle = { ...defaultListItemStyle, ...listItemStyle };
-            const itemClassName = (0, join_1.default)(`${baseClassName}__list-item`, item.clickable === false || disabled
-                ? `${baseClassName}__list-item--not-clickable`
-                : `${baseClassName}__list-item--clickable`, disabled ? `${baseClassName}__list-item--disabled` : '', listItemClassName);
-            const getItemHandler = (eventName) => {
-                return (e) => {
-                    if (!disabled) {
-                        if (item[eventName]) {
-                            item[eventName](e, item);
-                        }
+exports.NewDropdownButton = React.forwardRef((props, ref) => {
+    const { items, children, className, disabled, tooltip, variant = 'text', accessLevel, side = 'bottom', align = 'start', 'data-name': dataName, tone = 'neutral', showDivider = true, id, 'data-id': dataId, 'data-value': dataValue, 'aria-label': ariaLabel, onMouseDown, } = props;
+    const isHidden = accessLevel === 'Hidden';
+    const isReadOnly = accessLevel === 'ReadOnly';
+    const isDisabled = disabled || isHidden || isReadOnly;
+    const trigger = ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuTrigger, { render: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { ref: ref, tone: tone, variant: variant, disabled: isDisabled, className: (0, utils_1.cn)(className, 'twa:pr-1 twa:active:translate-y-0 twa:flex-row twa:flex-none', variant !== 'text' ? 'twa:gap-1' : 'twa:gap-0.5'), "data-name": dataName, id: id, "data-id": dataId, "data-value": dataValue, "aria-label": ariaLabel, onMouseDown: onMouseDown }), children: [children, showDivider && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('twa:h-full twa:my-1', variant !== 'text' ? 'twa:border-l twa:border-border' : '') })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: "twa:size-3.5 twa:opacity-60 twa:transition-transform twa:duration-200 twa:[[data-popup-open]_&]:rotate-180" })] }));
+    const maxLabelLength = items.reduce((max, item) => Math.max(max, typeof item.label === 'string'
+        ? item.label.length
+        : typeof item.tooltip === 'string'
+            ? item.tooltip.length
+            : 0), 0);
+    return ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { children: [tooltip ? (0, jsx_runtime_1.jsx)(NewTooltip_1.NewTooltip, { label: tooltip, children: trigger }) : trigger, (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuContent, { side: side, align: align, style: {
+                    // minWidth: `min(max(${maxLabelLength + 5}ch, calc(var(--ab-base-space) * 32)),80vw)`,
+                    width: `max(${maxLabelLength + (props.extraWidthChars ?? 3)}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
+                }, children: items.map((item, index) => {
+                    if (item.separator) {
+                        return (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuSeparator, {}, index);
                     }
-                    if (collapseOnItemClick) {
-                        if (!disabled) {
-                            setExpanded(false);
-                        }
-                        buttonRef.current?.focus();
-                    }
-                    else {
-                        e.nativeEvent.preventCollapse = true;
-                    }
-                };
-            };
-            const domProps = {};
-            if (item.onChange) {
-                domProps.onChange = getItemHandler('onChange');
-            }
-            const itemDataName = item['dataName'] || (typeof item['label'] === 'string' ? item['label'] : undefined);
-            if (itemDataName) {
-                domProps['data-name'] = itemDataName;
-            }
-            return (0, renderItem_1.default)({
-                index,
-                idProperty,
-                onItemClick: getItemHandler('onClick'),
-                domProps,
-                className: itemClassName,
-                style: itemStyle,
-                item,
-                columns: columns,
-            });
-        });
-        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);
-    const positionerRef = (0, react_1.useRef)(null);
-    const { expanded, toggle, setExpanded, positionInfo } = (0, useExpanded_1.default)(props, positionerRef);
-    const { maxHeight: maxListHeight, maxWidth: maxListWidth } = positionInfo;
-    listStyle = {
-        minWidth: typeof maxListWidth === 'number' ? Math.min(listMinWidth, maxListWidth) : listMinWidth,
-        maxHeight: maxListHeight,
-        maxWidth: maxListWidth,
-        ...listStyle,
-    };
-    let icon = expanded
-        ? (0, react_1.cloneElement)(exports.DROPDOWN_ICON, {
-            style: {
-                ...exports.DROPDOWN_ICON.props.style,
-                transform: 'rotate(180deg) translate3d(0px, -2px, 0px)',
-            },
-        })
-        : exports.DROPDOWN_ICON;
-    const hasClearButton = onClear || showClearButton;
-    const clearButton = hasClearButton ? ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: domProps.disabled, as: "div", onClick: (event) => {
-            event.stopPropagation();
-            if (onClear) {
-                onClear();
-            }
-            buttonRef.current?.focus();
-        }, className: "twa:ml-2 twa:p-0", variant: 'text', icon: "close", ...clearButtonProps, style: {
-            ...clearButtonProps?.style,
-            visibility: showClearButton ? 'visible' : 'hidden',
-        } })) : null;
-    icon = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [spacer, hasClearButton ? clearButton : null, icon] }));
-    const buttonRef = (0, react_1.useRef)(null);
-    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
-                     * inside ag-grid column filter
-                     */
-                    if (props.stopPropagationOnOverlay) {
-                        e.stopPropagation();
-                    }
-                }, 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;
-                }
-                if (typeof theRef === 'function') {
-                    theRef(btn);
-                }
-                else {
-                    theRef.current = btn;
-                }
-            }, style: domProps.style, className: (0, clsx_1.default)(className, {
-                'twa:pr-0': showToggleIcon,
-            }), onClick: (e) => {
-                if (domProps.onClick) {
-                    domProps.onClick(e);
-                }
-                if (e.nativeEvent.preventCollapse && expanded) {
-                    return;
-                }
-                toggle();
-            }, onKeyDown: (e) => {
-                if (domProps.onKeyDown) {
-                    domProps.onKeyDown(e);
-                }
-                if (expanded && e.key === 'Escape') {
-                    toggle();
-                }
-            }, onBlur: (e) => {
-                if (domProps.onBlur) {
-                    domProps.onBlur(e);
-                }
-                setExpanded(false);
-            }, 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] }) }));
+                    return ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuItem, { disabled: item.disabled, "data-name": item.dataName, closeOnClick: item.closeOnClick, onClick: (e) => item.onClick?.(e), children: [item.icon, item.label] }, item.dataName ?? index));
+                }) })] }));
 });
-exports.default = DropdownButton;

package/src/components/EmptyContent/index.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
 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 = (0, jsx_runtime_1.jsx)("p", { children: 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 }) }));
+    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, utils_1.cn)('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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-ErrorBox';
 const ErrorBox = (props) => {
-    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) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, utils_1.cn)('twa:p-3 twa:rounded-standard twa:bg-destructive twa:text-destructive-foreground', props.className, exports.baseClassName) }));
 };
 exports.default = ErrorBox;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -4,6 +4,7 @@ exports.BaseEditorInput = BaseEditorInput;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const parser = tslib_1.__importStar(require("../../parser/src"));
+const utils_1 = require("../../lib/utils");
 const React = tslib_1.__importStar(require("react"));
 const ErrorBox_1 = tslib_1.__importDefault(require("../ErrorBox"));
 const useSelectionRange_1 = require("../utils/useSelectionRange");
@@ -25,7 +26,6 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Exte
 const Radio_1 = tslib_1.__importDefault(require("../Radio"));
 const Flex_1 = require("../Flex");
 const AdaptableFormControlTextClear_1 = require("../../View/Components/Forms/AdaptableFormControlTextClear");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const filterableCategories = [
     'dates',
     'logical',
@@ -120,7 +120,7 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
      * - mouse leaves
      * - a function is inserted
      */
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-defaultbackground twa:text-foreground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup(), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:md:gap-3 twa:gap-2 twa:pb-2 twa:md:justify-between twa:justify-start twa:flex-wrap twa:border-b twa:border-primarydark/30 twa:mb-2", children: categoryOptions.map((option, index) => {
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-background twa:text-foreground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup(), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:md:gap-3 twa:gap-2 twa:pb-2 twa:md:justify-between twa:justify-start twa:flex-wrap twa:border-b twa:border-primarydark/30 twa:mb-2", children: categoryOptions.map((option, index) => {
                         return ((0, jsx_runtime_1.jsx)(Radio_1.default, { onFocus: (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
@@ -155,8 +155,8 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
                                             return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup(), children: functionName === 'VAR' ? ((0, jsx_runtime_1.jsx)(VarEditorButton, { className: buttonClassName }, functionName)) : ((0, jsx_runtime_1.jsx)(EditorButton_1.default, { data: getEditorButtonData(functionName), className: buttonClassName, children: functionName }, functionName)) }, functionName));
                                         })
                                             .filter(Boolean);
-                                        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-text-on-primary twa:w-full", children: StringExtensions_1.default.Humanize(groupName) }), fns] }, groupName));
-                                    }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)(`${baseClassName}__dropdown-functions-description `, `twa:flex-1 twa:p-2 twa:w-[600px] twa:max-w-[60vw]`, `twa:rounded-standard twa:shadow-sm twa:overflow-auto twa:h-auto`, 'twa:bg-primarylight twa:text-primary-foreground'), children: overFunction ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:bg-accent twa:text-accent-foreground", children: overFunction }), (0, jsx_runtime_1.jsx)(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] })] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic", children: (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Hover over a Function to learn more", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)("li", { children: "Click a Function to add it to the Expression in the Editor" })] }) })) })] })] })), children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mr-1 twa:text-2", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "equation" }) }) }) }));
+                                        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-primary-foreground twa:w-full", children: StringExtensions_1.default.Humanize(groupName) }), fns] }, groupName));
+                                    }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)(`${baseClassName}__dropdown-functions-description `, `twa:flex-1 twa:p-2 twa:w-[600px] twa:max-w-[60vw]`, `twa:rounded-standard twa:shadow-sm twa:overflow-auto twa:h-auto`, 'twa:bg-primarylight twa:text-primary-foreground'), children: overFunction ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:bg-accent twa:text-accent-foreground", children: overFunction }), (0, jsx_runtime_1.jsx)(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] })] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic", children: (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Hover over a Function to learn more", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)("li", { children: "Click a Function to add it to the Expression in the Editor" })] }) })) })] })] })), children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mr-1 twa:text-2", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "equation" }) }) }) }));
 };
 function BaseEditorInput(props) {
     const { expressionFunctions, testData, style, type } = props;

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -4,7 +4,7 @@ exports.ExpressionFunctionDocumentation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Tag_1 = require("../Tag");
 const Flex_1 = require("../Flex");
-const signatureClassName = 'twa:m-0 twa:whitespace-pre-wrap twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-1 twa:inline-block';
+const signatureClassName = 'twa:m-0 twa:whitespace-pre-wrap twa:bg-primary twa:text-primary-foreground twa:rounded-standard twa:p-1 twa:inline-block';
 const ExpressionFunctionDocumentation = (props) => {
     return props.expressionFunction ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": "expression-editor-documentation", className: "twa:my-2 twa:p-2 twa:rounded-standard twa:leading-normal", children: [props.expressionFunction.description && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-3 twa:font-bold twa:whitespace-pre-wrap", "data-name": "expression-editor-documentation-description", children: props.expressionFunction.description })), props.expressionFunction.signatures && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": "expression-editor-documentation-signatures", children: [(0, jsx_runtime_1.jsx)("b", { children: "Signatures" }), (0, jsx_runtime_1.jsx)("ul", { className: "twa:flex twa:flex-col twa:gap-1", children: props.expressionFunction.signatures.map((signature, index) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("pre", { className: signatureClassName, children: signature }) }, index))) })] })), props.expressionFunction.examples && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": "expression-editor-documentation-examples", children: [(0, jsx_runtime_1.jsx)("b", { children: "Examples" }), (0, jsx_runtime_1.jsx)("ul", { className: "twa:flex twa:flex-col twa:gap-1", children: props.expressionFunction.examples.map((example, index) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("pre", { className: signatureClassName, children: example }) }, index))) })] })), props.expressionFunction.returnType && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": "expression-editor-documentation-examples", children: [(0, jsx_runtime_1.jsx)("b", { children: "Return Type" }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full twa:py-1", children: props.expressionFunction.returnType })] }))] })) : null;
 };

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.js

@@ -12,7 +12,7 @@ const ColumnSelector_1 = require("../../../View/Components/Selectors/ColumnSelec
 const FieldSelector_1 = require("../../../View/Components/Selectors/FieldSelector");
 const PermittedValuesSelector_1 = require("../../../View/Components/Selectors/PermittedValuesSelector");
 const CheckBox_1 = require("../../CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../DropdownButton"));
+const DropdownButton_1 = require("../../DropdownButton");
 const icons_1 = require("../../icons");
 const InputGroup_1 = require("../../InputGroup");
 const QueryBuilder_1 = require("./QueryBuilder");
@@ -185,7 +185,7 @@ const SymbolToIcon = (props) => {
 const ExpressionSelector = (props) => {
     const { getExpressions } = (0, QueryBuilder_1.useQueryBuilderContext)();
     const expressions = props.dataType ? getExpressions(props.dataType) : [];
-    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { "data-id": "expression-selector", "data-value": props.value, variant: "raised", tone: 'accent', columns: ['label'], items: expressions.map((expression) => ({
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "data-id": "expression-selector", className: "twa:min-h-input", "data-value": props.value, variant: "raised", tone: 'accent', items: expressions.map((expression) => ({
             label: (0, jsx_runtime_1.jsx)(SymbolToIcon, { symbol: (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(expression) }),
             onClick: () => {
                 if (expression !== props.value) {
@@ -196,7 +196,7 @@ const ExpressionSelector = (props) => {
 };
 exports.ExpressionSelector = ExpressionSelector;
 const CombinatorSelector = (props) => {
-    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { "data-id": "combinator-selector", "data-value": props.value, columns: ['label'], variant: "raised", tone: "accent", items: [
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { className: "twa:min-h-input", "data-id": "combinator-selector", "data-value": props.value, variant: "raised", tone: "accent", items: [
             { label: 'AND', onClick: () => props.onChange('AND') },
             { label: 'OR', onClick: () => props.onChange('OR') },
         ], children: props.value }));

package/src/components/ExpressionEditor/QueryBuilder/QueryPredicateBuilder.js

@@ -5,23 +5,23 @@ const tslib_1 = require("tslib");
 const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const dnd_1 = require("../../dnd");
+const utils_1 = require("../../../lib/utils");
 const predicate_1 = require("../../../parser/src/predicate");
 const adaptableQlUtils_1 = require("../../../Utilities/adaptableQlUtils");
 const booleanExpressionFunctions_1 = require("../../../Utilities/ExpressionFunctions/booleanExpressionFunctions");
 const AdaptableContext_1 = require("../../../View/AdaptableContext");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../DropdownButton"));
+const DropdownButton_1 = require("../../DropdownButton");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../ErrorBox"));
 const icons_1 = require("../../icons");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../SimpleButton"));
 const QueryBuilderInputs_1 = require("./QueryBuilderInputs");
-const utils_1 = require("./utils");
+const utils_2 = require("./utils");
 const Flex_1 = require("../../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const ITEM_HEIGHT = 36;
 const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
 const Handle = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${BASE_CLASS_NAME}__handle twa:mr-1`, style: { height: ITEM_HEIGHT }, alignItems: "center", ...props, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag" }) }));
 const QueryPredicateButtons = (props) => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!props.hideAdd && ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { listMinWidth: 150, columns: ['label'], items: [
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!props.hideAdd && ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { items: [
                     { label: 'Condition', onClick: () => props.onNewPredicate('filter') },
                     { label: 'AND / OR Group', onClick: () => props.onNewPredicate('group') },
                 ], variant: "text", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus" }) })), !props.hideDelete && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", variant: "text", onClick: () => {
@@ -42,7 +42,7 @@ const LogicalFunctionEditor = (props) => {
         props.onChange({ ...props.predicate, args: newArgs });
     };
     const getCombinatorEl = (handleProps) => ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: props.id, orientation: "vertical", onDrop: handleDrop, onDragProxyMove: dnd_1.defaultDragProxyMove, children: (listDomProps) => {
-            return ((0, jsx_runtime_1.jsxs)("div", { ...listDomProps, className: (0, clsx_1.default)(listDomProps.className), children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [props.isRoot ? null : (0, jsx_runtime_1.jsx)(Handle, { ...handleProps }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:mb-2", alignItems: "center", height: ITEM_HEIGHT, children: [(0, jsx_runtime_1.jsx)(QueryBuilderInputs_1.CombinatorSelector, { value: props.predicate.operator, onChange: (combinator) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { ...listDomProps, className: (0, utils_1.cn)(listDomProps.className), children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [props.isRoot ? null : (0, jsx_runtime_1.jsx)(Handle, { ...handleProps }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:mb-2", alignItems: "center", height: ITEM_HEIGHT, children: [(0, jsx_runtime_1.jsx)(QueryBuilderInputs_1.CombinatorSelector, { value: props.predicate.operator, onChange: (combinator) => {
                                             props.onChange({
                                                 ...props.predicate,
                                                 operator: combinator,
@@ -98,7 +98,7 @@ const LogicalFunctionEditor = (props) => {
     }
     return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: props.id, children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return ((0, jsx_runtime_1.jsx)("div", { ...restDomProps, className: (0, clsx_1.default)(className, restDomProps.className), children: getCombinatorEl({ onPointerDown }) }));
+            return ((0, jsx_runtime_1.jsx)("div", { ...restDomProps, className: (0, utils_1.cn)(className, restDomProps.className), children: getCombinatorEl({ onPointerDown }) }));
         } }));
 };
 const PrimitiveFunctionEditor = (props) => {
@@ -116,7 +116,7 @@ const PrimitiveFunctionEditor = (props) => {
         }
         if (columnOrField.includes('FIELD')) {
             columnOrFieldId = columnOrField;
-            const fieldValue = (0, utils_1.mapExpressionToFieldValue)(columnOrField);
+            const fieldValue = (0, utils_2.mapExpressionToFieldValue)(columnOrField);
             columnOrFieldDataType = adaptable.api.expressionApi.internalApi.getFieldType(fieldValue);
         }
         else if (columnOrField.includes('[')) {
@@ -127,13 +127,13 @@ const PrimitiveFunctionEditor = (props) => {
         columnInputDataType = (0, adaptableQlUtils_1.mapColumnDataTypeToExpressionFunctionType)(columnOrFieldDataType);
         functionInputInputDataTypes = booleanExpressionFunctions_1.booleanExpressionFunctions[props.predicate.operator]?.inputs;
         restOfFunctionInputDataTypes = functionInputInputDataTypes
-            ? (0, utils_1.getOperatorMatchingInputs)(columnInputDataType, functionInputInputDataTypes)
+            ? (0, utils_2.getOperatorMatchingInputs)(columnInputDataType, functionInputInputDataTypes)
             : [];
     }
     const level = props.id.split('/').length - 1;
     return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: props.id, children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...restDomProps, className: (0, clsx_1.default)(`twa:pb-2 ${BASE_CLASS_NAME} ${BASE_CLASS_NAME}-level-${level} ${BASE_CLASS_NAME}-primitive ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}`, restDomProps.className), style: { minHeight: ITEM_HEIGHT }, children: [(0, jsx_runtime_1.jsx)(Handle, { onPointerDown: onPointerDown }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", style: { height: ITEM_HEIGHT }, className: "twa:gap-0.5 twa:w-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(QueryBuilderInputs_1.PrimitiveColumnOrFieldSelector, { onChange: (colOrField) => {
+            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...restDomProps, className: (0, utils_1.cn)(`twa:pb-2 ${BASE_CLASS_NAME} ${BASE_CLASS_NAME}-level-${level} ${BASE_CLASS_NAME}-primitive ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}`, restDomProps.className), style: { minHeight: ITEM_HEIGHT }, children: [(0, jsx_runtime_1.jsx)(Handle, { onPointerDown: onPointerDown }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", style: { height: ITEM_HEIGHT }, className: "twa:gap-0.5 twa:w-full", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(QueryBuilderInputs_1.PrimitiveColumnOrFieldSelector, { onChange: (colOrField) => {
                                         props.onChange({
                                             ...props.predicate,
                                             args: [colOrField],

package/src/components/ExpressionEditor/index.js

@@ -81,7 +81,7 @@ function ExpressionEditor(props) {
                 }
             }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column", children: [editorInput, StringExtensions_1.default.IsNotNullOrEmpty(expressionText?.trim()) && ((0, jsx_runtime_1.jsx)(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })), 
                             /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
-                            StringExtensions_1.default.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${exports.baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-defaultbackground twa:text-foreground", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "column", children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "field", children: "Fields" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "named-query", children: "Named Queries" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { className: "twa:flex-1 twa:h-full", children: (0, jsx_runtime_1.jsx)(DataTableEditor_1.DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
+                            StringExtensions_1.default.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${exports.baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-background twa:text-foreground", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "column", children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "field", children: "Fields" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "named-query", children: "Named Queries" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { className: "twa:flex-1 twa:h-full", children: (0, jsx_runtime_1.jsx)(DataTableEditor_1.DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
                                                 label: column.friendlyName,
                                                 value: column.columnId,
                                                 dataType: column.dataType,

package/src/components/FieldWrap/index.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const twUtils_1 = require("../twUtils");
 const FieldWrap = (props) => {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", ...props, className: (0, clsx_1.default)('ab-FieldWrap', twUtils_1.targetOwn.focusWithinOutline, props.className) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", ...props, className: (0, utils_1.cn)('ab-FieldWrap', twUtils_1.targetOwn.focusWithinOutline, props.className) }));
 };
 exports.default = FieldWrap;

package/src/components/Flex.js

@@ -4,8 +4,8 @@ exports.Box = exports.Flex = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const twMerge_1 = require("../twMerge");
+const utils_1 = require("../lib/utils");
 const ALIGN_ITEMS_MAP = {
     center: 'twa:items-center',
     'flex-start': 'twa:items-start',
@@ -34,7 +34,7 @@ const FLEX_WRAP_MAP = {
 };
 exports.Flex = React.forwardRef((props, ref) => {
     const { className: _, flexDirection, alignItems, justifyContent, flexWrap, as, ...domProps } = props;
-    const className = (0, clsx_1.default)('twa:flex', 'twa:box-border', FLEX_DIRECTION_MAP[flexDirection], ALIGN_ITEMS_MAP[alignItems], JUSTIFY_CONTENT_MAP[justifyContent], FLEX_WRAP_MAP[flexWrap]);
+    const className = (0, utils_1.cn)('twa:flex', 'twa:box-border', FLEX_DIRECTION_MAP[flexDirection], ALIGN_ITEMS_MAP[alignItems], JUSTIFY_CONTENT_MAP[justifyContent], FLEX_WRAP_MAP[flexWrap]);
     const Cmp = (as || 'div');
     return ((0, jsx_runtime_1.jsx)(Cmp, { ref: ref, ...domProps, className: (0, twMerge_1.twMerge)(className, props.className) }));
 });

package/src/components/FormLayout/index.d.ts

@@ -13,7 +13,7 @@ type TypeFormLayout = {
     defaultComponent?: React.ComponentType<any>;
     columns?: (string | number | FormColumn)[];
     placeholder?: ReactNode;
-    sizes?: (string | number)[];
+    sizes?: readonly (string | number)[];
     style?: React.CSSProperties;
     gridRowGap?: string | number;
     gridColumnGap?: string | number;

package/src/components/FormLayout/index.js

@@ -5,7 +5,7 @@ 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 merge_1 = tslib_1.__importDefault(require("../../Utilities/utils/merge"));
+const ObjectExtensions_1 = require("../../Utilities/Extensions/ObjectExtensions");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const Flex_1 = require("../Flex");
 const FormLayoutContext = (0, react_1.createContext)(null);
@@ -27,7 +27,7 @@ const FormLayout = (props) => {
             };
         }
         if (defaultColumns[c.name]) {
-            c = (0, merge_1.default)({}, defaultColumns[c.name], c);
+            c = (0, ObjectExtensions_1.merge)({}, defaultColumns[c.name], c);
         }
         c.component = c.component === undefined ? defaultComponent : c.component;
         return c;

package/src/components/HelpBlock/index.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HelpBlockClassName = exports.baseClassName = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-HelpBlock';
-exports.HelpBlockClassName = (0, clsx_1.default)('twa:text-2/relaxed twa:p-2 twa:rounded-standard', 'twa:bg-primarylight twa:text-primary-foreground', exports.baseClassName);
+exports.HelpBlockClassName = (0, utils_1.cn)('twa:text-2/relaxed twa:p-2 twa:rounded-standard', 'twa:bg-primarylight twa:text-primary-foreground', exports.baseClassName);
 const HelpBlock = (props) => {
-    return (0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, clsx_1.default)(exports.HelpBlockClassName, props.className) });
+    return (0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, utils_1.cn)(exports.HelpBlockClassName, props.className) });
 };
 exports.default = HelpBlock;

package/src/components/IconSelector/IconSelector.d.ts

@@ -1,5 +1,13 @@
 import { FunctionComponent } from 'react';
 import { CustomIcon } from '../../types';
+export interface IconSelectorPanelProps {
+    customIcons?: CustomIcon[];
+    value?: string;
+    onChange: (iconName: string) => void;
+    className?: string;
+    showTitle?: boolean;
+}
+export declare const IconSelectorPanel: FunctionComponent<IconSelectorPanelProps>;
 export interface IconSelectorProps {
     customIcons?: CustomIcon[];
     value?: string;

package/src/components/IconSelector/IconSelector.js

@@ -1,19 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconSelector = void 0;
+exports.IconSelector = exports.IconSelectorPanel = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../lib/utils");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
 const Icon_1 = require("../Icon");
 const icons_1 = require("../icons");
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const Flex_1 = require("../Flex");
+const wizardSelection_1 = require("../../Utilities/wizardSelection");
+const ICON_GRID_BUTTON_CLASS = 'twa:!min-w-[36px] twa:!w-9 twa:!h-9 twa:!p-0 twa:justify-center twa:items-center';
 const IconButton = (props) => {
-    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: () => props.onClick(), className: "twa:p-2", variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon, children: props.children }));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: () => props.onClick(), className: (0, wizardSelection_1.wizardSelectionButtonClassName)(props.active, ICON_GRID_BUTTON_CLASS), variant: props.active ? 'outlined' : 'text', tone: "none", icon: props.icon, children: props.children }));
 };
-const IconSelector = (props) => {
+const IconSelectorPanel = (props) => {
     const [query, setQuery] = react_1.default.useState('');
     const allIconsNames = Object.keys(icons_1.allIcons);
     const filteredIcons = query
@@ -21,13 +24,15 @@ const IconSelector = (props) => {
             return iconName.toLowerCase().includes(query.toLowerCase());
         })
         : allIconsNames;
-    const iconsElements = filteredIcons.map((iconName) => {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: (0, jsx_runtime_1.jsx)(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName }) }, iconName));
-    });
+    const iconsElements = filteredIcons.map((iconName) => ((0, jsx_runtime_1.jsx)(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName }, iconName)));
     const customIconsElements = props.customIcons?.map((def) => {
-        return ((0, jsx_runtime_1.jsx)(IconButton, { active: false, onClick: () => props.onChange(def.name), children: (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: def.icon }, def.name) }, def.name));
+        return ((0, jsx_runtime_1.jsx)(IconButton, { active: def.name === props.value, onClick: () => props.onChange(def.name), children: (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: def.icon }, def.name) }, def.name));
     });
-    const popup = ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-IconSelector__Popup", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2 twa:text-4", children: "Select an Icon" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:p-2 twa:w-[300px] twa:max-h-[300px] twa:overflow-auto twa:flex-wrap", children: [iconsElements, " ", customIconsElements] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)('ab-IconSelector__Popup', props.className), children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mb-2", children: [props.showTitle ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2 twa:text-4", children: "Select an Icon" })) : null, (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full", placeholder: "Search Icons" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", flexWrap: "wrap", className: "twa:p-2 twa:w-[300px] twa:max-w-full twa:max-h-[300px] twa:overflow-auto twa:gap-0.5", children: [iconsElements, customIconsElements] })] }));
+};
+exports.IconSelectorPanel = IconSelectorPanel;
+const IconSelector = (props) => {
+    const popup = ((0, jsx_runtime_1.jsx)(exports.IconSelectorPanel, { customIcons: props.customIcons, value: props.value, onChange: props.onChange, showTitle: true }));
     let value = 'No Icon Selected';
     if (props.value in icons_1.allIcons) {
         value = ((0, jsx_runtime_1.jsx)(icons_1.Icon, { style: { display: 'inline-block' }, name: props.value }));

package/src/components/IconSelector/index.d.ts

@@ -1 +1,2 @@
 export * from './IconSelector';
+export { IconSelectorPanel } from './IconSelector';

package/src/components/IconSelector/index.js

@@ -1,4 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconSelectorPanel = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./IconSelector"), exports);
+var IconSelector_1 = require("./IconSelector");
+Object.defineProperty(exports, "IconSelectorPanel", { enumerable: true, get: function () { return IconSelector_1.IconSelectorPanel; } });

package/src/components/Input/NumberInput.js

@@ -30,7 +30,7 @@ exports.NumberInput = React.forwardRef((props, ref) => {
             // only set when a valid numer
             props.onChange(newVal);
         }
-    }, []);
+    }, [props.onChange]);
     React.useEffect(() => {
         setValue(props.value);
     }, [props.value]);

package/src/components/Input/index.js

@@ -18,7 +18,7 @@ const Input = React.forwardRef((props, ref) => {
         type = 'text';
     }
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { as: as ?? 'input', ref: ref, ...inputProps, type: type, disabled: disabled, className: (0, utils_1.cn)(exports.baseClassName, 'twa:min-h-input', 'twa:rounded-input', twUtils_1.targetOwn.focusOutline, type ? `${exports.baseClassName}--type-${type}` : '', disabled ? `${exports.baseClassName}--disabled` : '', {
-            'twa:bg-(--ab-cmp-input__background)': !disabled,
+            'twa:bg-input-background': !disabled,
             'twa:bg-(--ab-cmp-input--disabled__background)': disabled,
         }, className) }));
 });