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

package/src/components/SelectableList/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectionEvent = 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 useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
@@ -88,12 +89,12 @@ const SelectableList = (props) => {
         }
         return index;
     };
-    return (React.createElement(SelectableListContext.Provider, { value: {
+    return ((0, jsx_runtime_1.jsx)(SelectableListContext.Provider, { value: {
             clickInfoRef,
             toggleOnSimpleClick: props.toggleOnSimpleClick || false,
             selected,
             setSelected,
             getItemId,
-        } }, props.children));
+        }, children: props.children }));
 };
 exports.default = SelectableList;

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

@@ -6,7 +6,7 @@ import { BoxProps } from '../Flex';
 export declare const baseClassName = "ab-SimpleButton";
 export interface SimpleButtonProps extends Omit<BoxProps, 'ref'>, HTMLProps<HTMLButtonElement> {
     tooltip?: string;
-    variant?: 'text' | 'outlined' | 'raised';
+    variant?: 'text' | 'outlined' | 'raised' | 'ghost';
     tone?: 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
     icon?: string | AdaptableIcon | ReactNode;
     iconSize?: number;

package/src/components/SimpleButton/index.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const icons_1 = require("../icons");
-const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const Icon_1 = require("../Icon");
 const Flex_1 = require("../Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const twUtils_1 = require("../twUtils");
+const NewTooltip_1 = require("../NewTooltip");
 exports.baseClassName = 'ab-SimpleButton';
 const SimpleButton = React.forwardRef((givenProps, theRef) => {
     const props = { ...givenProps };
@@ -31,18 +31,14 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
         if (typeof buttonProps.color === 'string') {
             iconProps.icon = { ...iconProps.icon, style: { color: buttonProps.color } };
         }
-        icon = React.createElement(Icon_1.IconComponent, { ...iconProps });
+        icon = (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { ...iconProps });
     }
     if ((0, Icon_1.isAdaptableCustomIcon)(icon) || (0, Icon_1.isAdaptableElementIcon)(icon)) {
-        icon = React.createElement(Icon_1.IconComponent, { icon: icon });
+        icon = (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: icon });
     }
     if (icon) {
         children =
-            iconPosition === 'start' ? (React.createElement(React.Fragment, null,
-                icon,
-                children)) : (React.createElement(React.Fragment, null,
-                children,
-                icon));
+            iconPosition === 'start' ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [icon, children] })) : ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [children, icon] }));
     }
     if (buttonProps.as == 'div') {
         // we have some cases when we want to nest a SimpleButton inside an html Button
@@ -76,12 +72,12 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
         buttonProps.label ||
         tooltip ||
         buttonProps.title ||
-        `${buttonProps.key}`;
+        (buttonProps.key ? `${buttonProps.key}` : undefined);
     const extraButtonProps = {};
     if (ariaLabel != null && ariaLabel !== '') {
         extraButtonProps['aria-label'] = ariaLabel;
     }
-    const btn = (React.createElement(Flex_1.Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: (0, clsx_1.default)(exports.baseClassName, 'twa:p-1', 'twa:rounded-standard', 'twa:inline-flex twa:flex-row twa:flex-none twa:items-center', 'twa:fill-current', 'twa:overflow-hidden twa:relative twa:align-middle', 
+    const btn = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: (0, clsx_1.default)(exports.baseClassName, 'twa:p-1', 'twa:rounded-button', 'twa:inline-flex twa:flex-row twa:flex-none twa:items-center', 'twa:fill-current', 'twa:overflow-hidden twa:relative twa:align-middle', 
         // direct children should be above the before pseudo element
         'twa:*:z-1', 
         // all svgs inside should be aligned middle
@@ -89,9 +85,7 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
         // 'twa:text-text-on-primary',
         // the text variant has the background applied on the before pseudo element
         // so let's configure the before pseudo element for all buttons here
-        'twa:before:content-[""] twa:before:absolute twa:before:inset-0 twa:before:block', 'twa:before:z-0 twa:before:pointer-events-none twa:before:rounded-[inherit]', 
-        // focus shadow
-        twUtils_1.targetOwn.focusOutline, disabled ? `${exports.baseClassName}--disabled` : '', `${exports.baseClassName}--variant-${variant}`, `${exports.baseClassName}--tone-${tone}`, 'twa:transition-opacity twa:duration-200', {
+        'twa:before:content-[""] twa:before:absolute twa:before:inset-0 twa:before:block', 'twa:before:z-0 twa:before:pointer-events-none twa:before:rounded-[inherit]', 'twa:outline-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50', disabled ? `${exports.baseClassName}--disabled` : '', `${exports.baseClassName}--variant-${variant}`, `${exports.baseClassName}--tone-${tone}`, 'twa:transition-opacity twa:duration-200', {
             'twa:text-text-on-primary': tone == 'neutral',
             'twa:text-inherit': tone === 'none',
             'twa:text-success': tone === 'success',
@@ -99,8 +93,10 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
             'twa:text-error': tone === 'error',
             'twa:text-warn': tone === 'warning',
             'twa:text-info': tone === 'info',
-        }, variant === 'text' ? 'twa:bg-transparent' : '', variant === 'outlined'
-            ? 'twa:bg-defaultbackground twa:border-inputborder twa:border'
+        }, variant === 'text' ? 'twa:bg-transparent' : '', variant === 'ghost'
+            ? 'twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:hover:bg-muted/50'
+            : '', variant === 'outlined'
+            ? 'twa:bg-defaultbackground twa:border-input-border twa:border'
             : '', variant === 'raised'
             ? {
                 'twa:text-text-on-primary twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
@@ -122,7 +118,7 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
             : null, {
             'twa:cursor-pointer': !disabled,
             'twa:opacity-50': disabled,
-        }, className), ref: theRef }, children));
-    return tooltip ? React.createElement(Tooltip_1.default, { label: tooltip }, btn) : btn;
+        }, className), ref: theRef, children: children }));
+    return tooltip ? (0, jsx_runtime_1.jsx)(NewTooltip_1.NewTooltip, { label: tooltip, children: btn }) : btn;
 });
 exports.default = SimpleButton;

package/src/components/SizedContainer/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const NotifyResize_1 = tslib_1.__importDefault(require("../NotifyResize"));
 const Flex_1 = require("../Flex");
@@ -8,18 +9,15 @@ const SizedContainer = (props) => {
     const { onResize: onResizeFromProps, ...domProps } = props;
     const [size, onResize] = React.useState(null);
     const sizeFn = props.children;
-    return (React.createElement(Flex_1.Box, { ...domProps, style: { flex: 1, ...domProps.style, position: 'relative' } },
-        React.createElement(Flex_1.Box, { style: {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...domProps, style: { flex: 1, ...domProps.style, position: 'relative' }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { style: {
                 position: 'absolute',
                 left: 0,
                 top: 0,
                 width: '100%',
                 height: '100%',
-            }, "data-width": size ? size.width : null, "data-height": size ? size.height : null },
-            React.createElement(NotifyResize_1.default, { onResize: (size) => {
-                    onResize(size);
-                    onResizeFromProps?.(size);
-                } }),
-            size ? sizeFn(size) : null)));
+            }, "data-width": size ? size.width : null, "data-height": size ? size.height : null, children: [(0, jsx_runtime_1.jsx)(NotifyResize_1.default, { onResize: (size) => {
+                        onResize(size);
+                        onResizeFromProps?.(size);
+                    } }), size ? sizeFn(size) : null] }) }));
 };
 exports.default = SizedContainer;

package/src/components/StylePreview.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StylePreview = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
 const twMerge_1 = require("../twMerge");
 const Flex_1 = require("./Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const StylePreview = (props) => (React.createElement(Flex_1.Box, { ...props, className: (0, clsx_1.default)((0, twMerge_1.twMerge)('ab-StylePreview twa:p-2 twa:mt-2', props.className), props.styleObject.ClassName), style: { ...(0, StyleHelper_1.toStyle)(props.styleObject), ...props.style } }, props.children ?? 'Preview result'));
+const StylePreview = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, clsx_1.default)((0, twMerge_1.twMerge)('ab-StylePreview twa:p-2 twa:mt-2', props.className), props.styleObject.ClassName), style: { ...(0, StyleHelper_1.toStyle)(props.styleObject), ...props.style }, children: props.children ?? 'Preview result' }));
 exports.StylePreview = StylePreview;

package/src/components/Table/index.js

@@ -1,9 +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 join_1 = tslib_1.__importDefault(require("../utils/join"));
 const Table = (props) => {
-    return React.createElement("table", { ...props, className: (0, join_1.default)(props.className, 'ab-Table') });
+    return (0, jsx_runtime_1.jsx)("table", { ...props, className: (0, join_1.default)(props.className, 'ab-Table') });
 };
 exports.default = Table;

package/src/components/Tabs/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SupportedTabContentComps = exports.Content = exports.SupportedTabMenuComps = exports.Tab = exports.Tabs = 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"));
@@ -65,17 +66,11 @@ const Tabs = (props) => {
     const currentContent = contents[selectedIndex];
     const { value, ...contentProps } = (currentContent?.props || {});
     const fillerClassName = (0, clsx_1.default)('ab-Tabs__Filler', 'twa:bg-(--ab-cmp-tabs-strip__background)');
-    return (React.createElement(TabContext.Provider, { value: {
+    return ((0, jsx_runtime_1.jsx)(TabContext.Provider, { value: {
             selectedIndex,
             tabCount: tabs.length,
             setSelectedIndex,
-        } },
-        React.createElement(Flex_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex },
-            React.createElement(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)') },
-                React.createElement(Flex_1.Box, { className: fillerClassName }),
-                tabs,
-                React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)(fillerClassName, 'twa:flex-1') })),
-            React.createElement(Flex_1.Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} ` }, currentContent))));
+        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: fillerClassName }), tabs, (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)(fillerClassName, 'twa:flex-1') })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} `, children: currentContent })] }) }));
 };
 exports.Tabs = Tabs;
 const Tab = (props) => {
@@ -105,7 +100,7 @@ const Tab = (props) => {
     React.useEffect(() => {
         mountedRef.current = true;
     }, []);
-    return (React.createElement(Flex_1.Box, { ref: ref, tabIndex: active ? 0 : -1, ...boxProps, className: (0, twMerge_1.twMerge)('twa:p-2', className), onClick: (event) => {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ref: ref, tabIndex: active ? 0 : -1, ...boxProps, className: (0, twMerge_1.twMerge)('twa:p-2', className), onClick: (event) => {
             context.setSelectedIndex(props.index);
             props.onClick?.(event);
         }, onKeyDown: (event) => {
@@ -137,7 +132,7 @@ exports.Tab = Tab;
 exports.SupportedTabMenuComps = new Set();
 exports.SupportedTabMenuComps.add(exports.Tab);
 const Content = (props) => {
-    return React.createElement(React.Fragment, null, props.children);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
 };
 exports.Content = Content;
 exports.SupportedTabContentComps = new Set();

package/src/components/Tag/Tag.js

@@ -2,16 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagList = exports.TagBox = exports.Tag = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const twMerge_1 = require("../../twMerge");
 const Flex_1 = require("../Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
-exports.Tag = React.forwardRef((props, ref) => (React.createElement(Flex_1.Flex, { ...props, ref: ref, className: (0, twMerge_1.twMerge)(`ab-Tag twa:bg-primary twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:rounded-standard`, props.className), style: props.style })));
+exports.Tag = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...props, ref: ref, className: (0, twMerge_1.twMerge)(`ab-Tag twa:bg-primary twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:rounded-standard`, props.className), style: props.style })));
 const TagBox = (props) => {
-    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className) }, props.children));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className), children: props.children }));
 };
 exports.TagBox = TagBox;
 const TagList = (props) => {
-    return (React.createElement(exports.TagBox, { className: props.className }, props.tags.map((tag, index) => (React.createElement(exports.Tag, { key: index }, tag)))));
+    return ((0, jsx_runtime_1.jsx)(exports.TagBox, { className: props.className, children: props.tags.map((tag, index) => ((0, jsx_runtime_1.jsx)(exports.Tag, { children: tag }, index))) }));
 };
 exports.TagList = TagList;

package/src/components/Textarea/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Flex_1 = require("../Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
@@ -30,7 +31,7 @@ const Textarea = React.forwardRef((props, ref) => {
             internalRef.current.style.height = `${initialHeight.current}px`;
         }
     };
-    return (React.createElement(Flex_1.Box, { ...textareaProps, onFocus: (e) => {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...textareaProps, onFocus: (e) => {
             expandToFitContent();
             props.onFocus?.(e);
             if (internalRef.current && initialHeight.current === null) {

package/src/components/Toggle/Toggle.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = 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 Icon_1 = require("../Icon");
@@ -39,7 +40,7 @@ const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) => {
             }
         };
     }, [toggleContext]);
-    return (React.createElement("button", { ...rest, ref: ref, tabIndex: -1, className: (0, twMerge_1.twMerge)((0, clsx_1.default)('twa:border-0', 'twa:cursor-pointer twa:fill-current', 'twa:outline-0', 'twa:min-h-input twa:relative twa:py-1 twa:px-2', 'twa:not-first:after:content-[""] twa:not-first:after:border-l-2 twa:not-first:after:border-accent-foreground twa:not-first:after:h-[10px] twa:not-first:after:absolute twa:not-first:after:-left-px twa:not-first:after:top-1/2 twa:not-first:after:-translate-y-1/2', 
+    return ((0, jsx_runtime_1.jsxs)("button", { ...rest, ref: ref, tabIndex: -1, className: (0, twMerge_1.twMerge)((0, clsx_1.default)('twa:border-0', 'twa:cursor-pointer twa:fill-current', 'twa:outline-0', 'twa:min-h-input twa:relative twa:py-1 twa:px-2', 'twa:not-first:after:content-[""] twa:not-first:after:border-l-2 twa:not-first:after:border-accent-foreground twa:not-first:after:h-[10px] twa:not-first:after:absolute twa:not-first:after:-left-px twa:not-first:after:top-1/2 twa:not-first:after:-translate-y-1/2', 
         // backgrounds
         {
             'twa:text-inherit twa:bg-transparent': !pressed,
@@ -52,8 +53,6 @@ const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) => {
             // when the toggle is active
             'twa:before:shadow-(--ab-focus-light__box-shadow)': isActive && pressed,
             'twa:before:shadow-(--ab-focus__box-shadow)': isActive && !pressed,
-        }, baseClassName)), onClick: toggle },
-        icon && React.createElement(Icon_1.IconComponent, { icon: { name: icon } }),
-        children));
+        }, baseClassName)), onClick: toggle, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: { name: icon } }), children] }));
 };
 exports.Toggle = Toggle;

package/src/components/Toggle/ToggleGroup.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleGroup = exports.ToggleGroupContext = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Flex_1 = require("../Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
@@ -23,8 +24,7 @@ const ToggleGroup = (props) => {
             activeIndex: index,
         }));
     }, []);
-    return (React.createElement(exports.ToggleGroupContext.Provider, { value: context },
-        React.createElement(Flex_1.Flex, { ref: ref, tabIndex: 0, className: (0, clsx_1.default)('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-text-on-primary', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
+    return ((0, jsx_runtime_1.jsx)(exports.ToggleGroupContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ref: ref, tabIndex: 0, className: (0, clsx_1.default)('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-text-on-primary', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
             // make the shadow of child Toggle buttons invisible when the group is not focused
             'twa:not-focus-within:[--ab-focus-light__box-shadow:none]', 'twa:not-focus-within:[--ab-focus__box-shadow:none]'), onMouseDown: (event) => {
                 const index = context.toggleButtons.findIndex((btn) => (0, contains_1.default)(btn.node, event.target));
@@ -60,6 +60,6 @@ const ToggleGroup = (props) => {
                     }
                     setActiveIndex(nextIndex);
                 }
-            } }, props.children)));
+            }, children: props.children }) }));
 };
 exports.ToggleGroup = ToggleGroup;

package/src/components/ToggleButton/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleButton = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Flex_1 = require("../Flex");
 const twMerge_1 = require("../../twMerge");
@@ -20,21 +20,18 @@ const ToggleButton = ({ checked, onChange, disabled, className, children, style
         [`${baseClassName}--disabled`]: disabled,
         'twa:hover:cursor-pointer twa:hover:opacity-85': !disabled,
     }, className);
-    return (React.createElement("label", { "data-checked": isChecked, "data-name": dataName, style: style, className: (0, twMerge_1.twMerge)(preparedClassName) },
-        React.createElement("input", { type: "checkbox", disabled: disabled, checked: isChecked, className: (0, clsx_1.default)(`${baseClassName}__input`, 'twa:opacity-0 twa:size-0'), onChange: handleChange }),
-        React.createElement(Flex_1.Flex, { alignItems: "center", "data-checked": isChecked, className: (0, clsx_1.default)(`${baseClassName}__slider`, 'twa:group:focus-within:ring-1 twa:group-focus-within:shadow-(--ab-focus__box-shadow)', 'twa:absolute twa:inset-0 twa:rounded-standard', {
-                'twa:bg-(--ab-cmp-toggle-button__background)': !isChecked,
-                'twa:bg-accent': isChecked,
-                'twa:justify-start': isChecked,
-                'twa:justify-end': !isChecked,
-                'twa:opacity-50': disabled,
-            }, 
-            // the :before pseudo element
-            'twa:before:absolute twa:before:content-[""] twa:before:size-[24px]', 'twa:before:rounded-standard twa:before:bg-white') },
-            React.createElement("div", { className: (0, clsx_1.default)(`${baseClassName}__text`, 'twa:font-semibold', 'twa:pr-2', 'twa:text-1', {
-                    'twa:text-(--ab-cmp-toggle-button__color)': !isChecked,
-                    'twa:text-(--ab-cmp-toggle-button--checked__color)': isChecked,
-                    'twa:pl-2': isChecked,
-                }) }, children))));
+    return ((0, jsx_runtime_1.jsxs)("label", { "data-checked": isChecked, "data-name": dataName, style: style, className: (0, twMerge_1.twMerge)(preparedClassName), children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", disabled: disabled, checked: isChecked, className: (0, clsx_1.default)(`${baseClassName}__input`, 'twa:opacity-0 twa:size-0'), onChange: handleChange }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", "data-checked": isChecked, className: (0, clsx_1.default)(`${baseClassName}__slider`, 'twa:group:focus-within:ring-1 twa:group-focus-within:shadow-(--ab-focus__box-shadow)', 'twa:absolute twa:inset-0 twa:rounded-standard', {
+                    'twa:bg-(--ab-cmp-toggle-button__background)': !isChecked,
+                    'twa:bg-accent': isChecked,
+                    'twa:justify-start': isChecked,
+                    'twa:justify-end': !isChecked,
+                    'twa:opacity-50': disabled,
+                }, 
+                // the :before pseudo element
+                'twa:before:absolute twa:before:content-[""] twa:before:size-[24px]', 'twa:before:rounded-standard twa:before:bg-white'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)(`${baseClassName}__text`, 'twa:font-semibold', 'twa:pr-2', 'twa:text-1', {
+                        'twa:text-(--ab-cmp-toggle-button__color)': !isChecked,
+                        'twa:text-(--ab-cmp-toggle-button--checked__color)': isChecked,
+                        'twa:pl-2': isChecked,
+                    }), children: children }) })] }));
 };
 exports.ToggleButton = ToggleButton;

package/src/components/Tooltip/index.js

@@ -1,9 +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 OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
 const Tooltip = ({ label, children }) => {
-    return (React.createElement(OverlayTrigger_1.default, { className: "ab-Tooltip", render: () => label }, children));
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { className: "ab-Tooltip", render: () => label, children: children }));
 };
 exports.default = Tooltip;

package/src/components/Tree/TreeDropdown/index.d.ts

@@ -1,36 +1,54 @@
 import * as React from 'react';
-import { TreeListItem, TreeListProps } from '../TreeList';
-export type TreeDropdownProps<T extends TreeListItem<any>> = {
+import { toDisplayValueDefault, toDisplayValueFromOptionTree } from '../treeUtils';
+export type TreeListItem<T = any> = {
+    id?: string | number;
+    label: string;
+    children?: TreeListItem<T>[];
+};
+export { toDisplayValueDefault, toDisplayValueFromOptionTree };
+export type NewTreeDropdownProps<T extends TreeListItem<any>> = {
+    isLoading?: boolean;
     placeholder?: string;
     style?: React.CSSProperties;
     fieldStyle?: React.CSSProperties;
-    listSizeConstraints?: {
-        minWidth?: number | string;
-        maxWidth?: number | string;
-        minHeight?: number | string;
-        maxHeight?: number | string;
-    };
-    options: TreeListProps<T>['options'];
+    /**
+     * Additional class name applied to the underlying `MultiCombobox` root.
+     * Exposed so higher-level wrappers (e.g. `GridFilterTreeDropdown`) can
+     * restyle the field without reaching into the component internals.
+     */
+    className?: string;
+    items: TreeListItem<T>[];
     labelField?: string;
-    primaryKey?: keyof T;
+    primaryKey?: keyof T | string;
     value?: any[][] | string[];
     defaultValue?: any[][] | string[];
+    /**
+     * Formats a single selected path into the text shown on its chip. Called
+     * once per chip with a single-path wrapper (`[path]`) so the same
+     * `toDisplayValue` helpers used by the legacy TreeDropdown continue to work.
+     */
     toDisplayValue?: (value: any[][] | string[]) => string;
-    onChange: (value: any[][] | string[]) => void;
-    onMenuOpen?: () => void;
-    onMenuClose?: () => void;
-    onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Replaces the default chip rendering for the field with a custom node.
+     * Called with the current set of selected leaf paths and a helper for
+     * resolving each path's display label. Used e.g. by `GridFilterTreeDropdown`
+     * to show a compact comma-separated summary instead of chips.
+     */
+    renderSelectedValues?: (args: {
+        selectedLeafPaths: any[][];
+        getLabelForPath: (path: any[]) => string;
+    }) => React.ReactNode;
+    onValueChange: (value: any[][] | string[]) => void;
+    onOpenChange?: (open: boolean) => void;
     resizable?: boolean;
-    clearable?: boolean;
+    showClear?: boolean;
 };
-export declare function toDisplayValueDefault(value: any[][] | string[]): string;
-/**
- * Formats the closed TreeDropdown input using each option's `label` for the stored `value` path
- * segments (same shape as {@link toDisplayValueDefault}, but resolves raw values to labels).
- */
-export declare function toDisplayValueFromOptionTree<T extends {
-    value: any;
-    label: string;
-    children?: T[];
-}>(paths: any[][] | string[], options: T[]): string;
-export declare function TreeDropdown<T extends TreeListItem<any>>(props: TreeDropdownProps<T>): React.JSX.Element;
+export declare function TreeDropdown<T extends TreeListItem<any>>(props: NewTreeDropdownProps<T>): React.JSX.Element;
+export type GridFilterTreeDropdownProps<T extends TreeListItem<any>> = Omit<NewTreeDropdownProps<T>, 'renderSelectedValues'> & {
+    /**
+     * When true, prefix the selected-values summary with `(N)` where N is the
+     * number of selected leaves. Mirrors `GridFilterCombobox.showSelectedCount`.
+     */
+    showSelectedCount?: boolean;
+};
+export declare function GridFilterTreeDropdown<T extends TreeListItem<any>>(props: GridFilterTreeDropdownProps<T>): React.JSX.Element;