@adaptabletools/adaptable-cjs 23.0.4-canary.0 → 23.0.5-canary.0

package/src/components/OverlayTrigger/Overlay.js

@@ -50,7 +50,6 @@ const Overlay = React.forwardRef((props, ref) => {
         if (prevOpacity && !opacity) {
             timeoutId = setTimeout(() => {
                 if (renderTimeRef.current != renderTime) {
-                    //we had other renders, so dont do anything - bail out
                     return;
                 }
                 if (!visible) {

package/src/components/OverlayTrigger/index.js

@@ -70,7 +70,6 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
     (0, exports.ensurePortalElement)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignPosition = [
-        // overlay - target
         ['TopLeft', 'BottomLeft'],
         ['TopRight', 'BottomRight'],
         ['TopCenter', 'BottomCenter'],
@@ -96,14 +95,7 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
     const overlayRef = (0, react_1.useRef)(null);
     const [visible, doSetVisible] = (0, useProperty_1.default)(props, 'visible', false);
     const hideTimeoutRef = (0, react_1.useRef)(null);
-    const setVisible = React.useCallback(
-    // visible state may quickly change from true -> false -> true
-    // when moving the mouse cursor from the trigger to the overlay
-    // for this case we debounce the visible change for a very small amount of time
-    (0, TimingHelper_1.debounce)((visible) => {
-        // if (!visible) {
-        //   return;
-        // }
+    const setVisible = React.useCallback((0, TimingHelper_1.debounce)((visible) => {
         onVisibleChange?.(visible);
         if (!visible) {
             hideTimeoutRef.current = setTimeout(() => {
@@ -122,9 +114,6 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
     const onShow = React.useCallback((event) => {
         const target = targetRef.current;
         if (event && preventPortalEventPropagation && !(0, contains_1.default)(target, event.target)) {
-            // because of how React portals behave - see https://github.com/facebook/react/issues/11387
-            // after the portal is rendered, even though an item is in a separate dom parent, if it's in the portal,
-            // events from it are propagated to the components in the portal and thus break some stuff
             return;
         }
         (0, batchUpdate_1.default)(() => {
@@ -209,12 +198,11 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
             if (constrainTo) {
                 preparedConstrainTo = (0, exports.getConstrainElement)(targetRef.current, constrainTo);
             }
-            // show only if visible or if it was visible and now it is invisible
             const alignToRect = (0, utils_1.getRect)(target, targetOffset ?? 0);
             const showOverlayOptions = {
-                id: 'overlay-trigger', // add id on props so component is not unmounted
+                id: 'overlay-trigger',
                 alignPosition,
-                constrainTo: preparedConstrainTo?.getBoundingClientRect?.() ?? true, // at least constrain to document
+                constrainTo: preparedConstrainTo?.getBoundingClientRect?.() ?? true,
                 alignTo: alignToRect,
             };
             showOverlay(() => overlayContent, showOverlayOptions);

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -43,8 +43,6 @@ const ProgressIndicator = () => {
         disableAdaptableGrid(adaptable.getAdaptableContainerElement(), active);
         disableAdaptableGrid(adaptable.getAgGridContainerElement(), active);
         updateGridContainerCoordinates(adaptable.getAgGridContainerElement());
-        // #raf_progress_indicator
-        // without rAF the progress indicator would be rendered instantly, without the 'transition-delay' defined via CSS
         requestAnimationFrame(() => {
             setVisible(active);
         });
@@ -53,20 +51,9 @@ const ProgressIndicator = () => {
     if (render || frameworkComponent) {
         customEl = (0, jsx_runtime_1.jsx)(ExternalRenderer_1.ExternalRenderer, { render: render, frameworkComponent: frameworkComponent });
     }
-    // Check if we should replace the default content
     const replaceContent = renderMode === 'dialog' && customEl;
-    return ((0, jsx_runtime_1.jsx)(
-        jsx_runtime_1.Fragment,
-        { children: active && ((0, jsx_runtime_1.jsx)(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}`, modalProps: {
-                    style: progressIndicatorCoordinates,
-                }, children: replaceContent ? (
-                // If renderMode is 'dialog', replace the entire content with custom element
-                customEl) : (
-                // Otherwise use the default Flex layout
-                ((0, jsx_runtime_1.jsxs)(
-                    Flex_1.Flex,
-                    { alignItems: "center", flexDirection: "column", className: "ab-ProgressIndicator-body twa:p-3", children: [(0, jsx_runtime_1.jsx)(Loader_1.LoaderSpinner, {}), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: [text && (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: text }), customEl] })] }
-                ))) })) }
-    ));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: active && ((0, jsx_runtime_1.jsx)(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}`, modalProps: {
+                style: progressIndicatorCoordinates,
+            }, children: replaceContent ? (customEl) : ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", flexDirection: "column", className: "ab-ProgressIndicator-body twa:p-3", children: [(0, jsx_runtime_1.jsx)(Loader_1.LoaderSpinner, {}), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: [text && (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: text }), customEl] })] })) })) }));
 };
 exports.ProgressIndicator = ProgressIndicator;

package/src/components/ResizeObserver/index.js

@@ -17,7 +17,6 @@ const setupResizeObserver = (node, callback) => {
             width = entry.borderBoxSize[0].inlineSize;
         }
         else {
-            // this is needed for Safari and other browsers that don't have borderBoxSize on the entry object
             const rect = node.getBoundingClientRect();
             height = rect.height;
             width = rect.width;
@@ -30,12 +29,6 @@ const setupResizeObserver = (node, callback) => {
     };
 };
 exports.setupResizeObserver = setupResizeObserver;
-/**
- * A hook that notifies you when a certain DOM element has changed it's size
- *
- * @param ref A React ref to a DOM element
- * @param callback The function to be called when the element is resized.
- */
 const useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
     const sizeRef = (0, react_1.useRef)({
         width: 0,

package/src/components/SelectableList/index.js

@@ -25,7 +25,6 @@ const useSelectionEvent = () => {
             metaKey = true;
         }
         if (metaKey) {
-            // as if shift key is not pressed
             shiftKey = false;
         }
         let itemId = `${getItemId(index)}`;
@@ -33,18 +32,13 @@ const useSelectionEvent = () => {
         if (!shiftKey) {
             clickInfoRef.current.lastClickIndexWithoutShift = index;
             if (!metaKey && !toggleOnSimpleClick) {
-                // a simple click, no key modifiers
-                // so reset the selection
-                // and only add one item, the currently clicked item
                 newSelection = { [itemId]: true };
             }
             else {
                 const currentRowSelected = selected[itemId];
                 newSelection = { ...selected };
                 if (currentRowSelected) {
-                    // unselected the current row
                     delete newSelection[itemId];
-                    // also, when unselecting, the click position should not be remembered, so need to revert it back
                     clickInfoRef.current.lastClickIndexWithoutShift = lastClickIndexWithoutShift;
                 }
                 else {
@@ -60,7 +54,6 @@ const useSelectionEvent = () => {
             newSelection = { ...selected };
             if (lastShiftSelectionRange) {
                 let { start, end } = lastShiftSelectionRange;
-                // clear previous shift selection
                 for (; start <= end; start++) {
                     delete newSelection[getItemId(start)];
                 }

package/src/components/SimpleButton/index.js

@@ -41,10 +41,6 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
             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
-        // so the SimpleButton cannot render a <button> tag
-        // so we want it to be a DIV tag
-        // but still keep the same keyboard accessibility
         buttonProps.tabIndex = buttonProps.tabIndex === undefined ? 0 : buttonProps.tabIndex;
         buttonProps.role = buttonProps.role || 'button';
         const onKeyDown = buttonProps.onKeyDown;
@@ -77,15 +73,7 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
     if (ariaLabel != null && ariaLabel !== '') {
         extraButtonProps['aria-label'] = ariaLabel;
     }
-    const btn = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: (0, utils_1.cn)(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
-        'twa:[&_svg]:align-middle', 
-        // 'twa:text-primary-foreground',
-        // 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]', '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', {
+    const btn = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: (0, utils_1.cn)(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', 'twa:*:z-1', 'twa:[&_svg]:align-middle', '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-primary-foreground': tone == 'neutral',
             'twa:text-inherit': tone === 'none',
             'twa:text-success': tone === 'success',
@@ -108,9 +96,7 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
                 'twa:bg-warn twa:text-warn-foreground': tone == 'warning',
                 'twa:bg-info twa:text-info-foreground': tone == 'info',
             }
-            : '', 
-        // opacity transitioning for the background applied on the before pseudo element
-        variant === 'outlined' || variant === 'text'
+            : '', variant === 'outlined' || variant === 'text'
             ? {
                 'twa:before:opacity-0 twa:before:transition-opacity twa:before:duration-200': true,
                 'twa:hover:before:opacity-15 twa:hover:before:bg-current': !disabled,

package/src/components/Tabs/index.js

@@ -30,7 +30,6 @@ const Tabs = (props) => {
     const tabs = allChildren.filter(isTab).map((tab, index) => {
         values.push(tab.props.value);
         return React.cloneElement(tab, {
-            // @ts-ignore ignore
             index,
             keyboardNavigation,
             autoFocus,
@@ -88,8 +87,6 @@ const Tab = (props) => {
     }, [active, autoFocus]);
     const mountedRef = React.useRef(false);
     React.useEffect(() => {
-        // don't focus initially,
-        // so we don't steal focus, if autoFocus is false
         if (!mountedRef.current) {
             return;
         }

package/src/components/Tag/Tag.js

@@ -10,7 +10,6 @@ const twMerge_1 = require("../../twMerge");
 const Flex_1 = require("../Flex");
 const COLUMN_TAG_CLASS = 'ab-Tag--column';
 exports.Tag = React.forwardRef(({ variant = 'default', className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...props, ref: ref, className: (0, twMerge_1.twMerge)(`ab-Tag twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:w-fit twa:rounded-standard`, variant === 'column' ? COLUMN_TAG_CLASS : 'twa:bg-primary', className), style: props.style })));
-/** Tag styled for column names — accent tint and left stripe for quick recognition. */
 exports.ColumnTag = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)(exports.Tag, { ...props, ref: ref, variant: "column" }));
 const TagBox = (props) => {
     return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className), children: props.children }));

package/src/components/Tag/columnScopeTagHelpers.js

@@ -2,10 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getScopeViewItemsTagVariant = exports.reportColumnTagsUseColumnVariant = exports.isBracketedScopeTagLabel = void 0;
 const BRACKETED_SCOPE_LABEL = /^\[[^\]]+\]$/;
-/** True when a tag label is a scope placeholder (e.g. `[All Columns]`), not a column name. */
 const isBracketedScopeTagLabel = (value) => BRACKETED_SCOPE_LABEL.test(value.trim());
 exports.isBracketedScopeTagLabel = isBracketedScopeTagLabel;
-/** True when export column tags are actual column friendly names. */
 const reportColumnTagsUseColumnVariant = (report) => report.ReportColumnScope === 'ScopeColumns' && 'ColumnIds' in (report.Scope ?? {});
 exports.reportColumnTagsUseColumnVariant = reportColumnTagsUseColumnVariant;
 const getScopeViewItemsTagVariant = (scope) => 'ColumnIds' in scope && Array.isArray(scope.ColumnIds) ? 'column' : undefined;

package/src/components/Textarea/index.js

@@ -20,7 +20,7 @@ const Textarea = React.forwardRef((props, ref) => {
     }
     const expandToFitContent = () => {
         if (autoResizeOnFocus && initialHeight.current !== null && internalRef.current) {
-            internalRef.current.style.height = `0px`; // makes sure it shrinks when needed
+            internalRef.current.style.height = `0px`;
             const height = internalRef.current.scrollHeight;
             internalRef.current.style.height = `${height}px`;
         }
@@ -41,16 +41,9 @@ const Textarea = React.forwardRef((props, ref) => {
             shrinkToInitialHeight();
             props.onBlur?.(e);
         }, ref: (elRef) => {
-            // SAVE INITIAL HEIGHT
-            // if (elRef && initialHeight.current === null) {
-            //   const height = elRef.getBoundingClientRect().height;
-            //   initialHeight.current = isNaN(height) ? 'auto' : height;
-            // }
-            // SAVE REF
             if (internalRef) {
                 internalRef.current = elRef;
             }
-            // CALL EXTERNAL REF
             if (ref) {
                 if (typeof ref === 'function') {
                     ref(elRef);

package/src/components/Toggle/Toggle.js

@@ -46,17 +46,13 @@ const Toggle = ({ onPressedChange, pressed, icon, standalone = false, children,
             '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', standalone && [
             'ab-Toggle--standalone',
             'twa:shadow-sm twa:rounded-standard twa:bg-primary twa:text-primary-foreground',
-        ], 
-        // backgrounds
-        {
+        ], {
             'twa:text-inherit twa:bg-transparent': !pressed,
             'twa:hover:bg-primarylight twa:hover:text-primary-foreground': !pressed,
             [`${baseClassName}--pressed`]: pressed,
             'twa:bg-accent twa:hover:bg-accent/90 twa:text-accent-foreground': pressed,
         }, !standalone && {
             'twa:before:rounded-standard twa:before:content-[""] twa:before:absolute twa:before:inset-1 twa:before:z-20 twa:before:pointer-events-none': true,
-            // let's display a shadow on the before pseudo element
-            // when the toggle is active
             'twa:before:shadow-(--ab-focus-light__box-shadow)': isActive && pressed,
             'twa:before:shadow-(--ab-focus__box-shadow)': isActive && !pressed,
         }, standalone &&

package/src/components/Toggle/ToggleGroup.js

@@ -24,9 +24,7 @@ const ToggleGroup = (props) => {
             activeIndex: index,
         }));
     }, []);
-    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, utils_1.cn)('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-primary-foreground', '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) => {
+    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, utils_1.cn)('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-primary-foreground', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', '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));
                 if (index !== -1) {
                     setActiveIndex(index);

package/src/components/ToggleButton/index.js

@@ -25,9 +25,7 @@ const ToggleButton = ({ checked, onChange, disabled, className, children, style
                     '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, utils_1.cn)(`${baseClassName}__text`, 'twa:font-semibold', 'twa:pr-2', 'twa:text-1', {
+                }, '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, utils_1.cn)(`${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,

package/src/components/Tree/TreeDropdown/index.js

@@ -44,8 +44,6 @@ function flattenOptions(options, primaryKey, labelField, parentPath = [], result
 function TreeItemLabel(props) {
     const { node, isExpanded, onToggleExpand, selected, reserveExpandSpace } = props;
     const handleChevronMouseDown = (e) => {
-        // Prevent the combobox from stealing focus or treating the chevron click
-        // as a selection toggle on the row.
         e.preventDefault();
         e.stopPropagation();
     };
@@ -54,12 +52,6 @@ function TreeItemLabel(props) {
         e.stopPropagation();
         onToggleExpand(node.path);
     };
-    // These elements are rendered as `children` of the `ComboboxItem`, which is
-    // a flex container. The built-in indicator is suppressed via
-    // `renderCheckboxIndicator` on the list, so we render our own tri-state checkbox
-    // at `order: 0` (middle). Chevron goes before (`-1`), label after (`1`).
-    // Rendering the indicator here lets it reflect `null`/indeterminate state
-    // that base-ui's boolean indicator can't.
     const indent = node.depth > 0 ? `calc(${node.depth} * var(--ab-tree-indent-size))` : 0;
     const iconProps = {
         className: 'twa:size-4',
@@ -70,8 +62,6 @@ function TreeDropdown(props) {
     const { isLoading = false } = props;
     const labelField = (props.labelField ?? 'label');
     const primaryKey = (props.primaryKey ?? 'id');
-    // Walk the tree once to get every node. This is independent of expand and
-    // selection state, so it only recomputes when the options change.
     const allNodes = (0, react_1.useMemo)(() => {
         return flattenOptions(props.items, primaryKey, labelField);
     }, [props.items, primaryKey, labelField]);
@@ -82,20 +72,12 @@ function TreeDropdown(props) {
         }
         return map;
     }, [allNodes]);
-    // All paths in the tree, used to configure TreeSelectionState so it can
-    // resolve tri-state selection across branches.
     const treePaths = (0, react_1.useMemo)(() => allNodes.map((n) => n.path), [allNodes]);
-    // --- Selection state (backed by TreeSelectionStateObject) ----------------
     const [internalSelection, setInternalSelection] = (0, react_1.useState)(() => ({
         defaultSelection: false,
         selectedPaths: normalizePaths(props.value ?? props.defaultValue),
         deselectedPaths: [],
     }));
-    // When used in controlled mode, sync external value into internal state
-    // whenever the caller swaps the reference. We compare against the last
-    // `value` we observed (captured in a state-paired variable, as recommended
-    // for derived-from-props state) so we don't fight the caller on every
-    // re-render while still ignoring our own onChange-driven updates.
     const [lastPropsValue, setLastPropsValue] = (0, react_1.useState)(props.value);
     if (props.value !== undefined && props.value !== lastPropsValue) {
         setLastPropsValue(props.value);
@@ -111,7 +93,6 @@ function TreeDropdown(props) {
             strictCheckPaths: false,
         });
     }, [internalSelection, treePaths]);
-    // --- Expand state (backed by TreeExpandStateObject) ----------------------
     const [internalExpand, setInternalExpand] = (0, react_1.useState)(() => ({
         defaultExpanded: false,
         expandedPaths: [],
@@ -125,13 +106,7 @@ function TreeDropdown(props) {
         next.setNodeExpanded(path, !next.isNodeExpanded(path));
         setInternalExpand(next.getState());
     }, [internalExpand]);
-    // Precompute branch nodes once so the Expand All / Collapse All toggle
-    // can decide which action to offer without walking the tree on every render.
     const branchNodes = (0, react_1.useMemo)(() => allNodes.filter((n) => n.hasChildren), [allNodes]);
-    // The toggle acts as "Collapse all" whenever *anything* is expanded, so a
-    // single click after a partial expand (e.g. branches opened by a search)
-    // collapses the whole tree. Only when every branch is already collapsed
-    // does the toggle switch to "Expand all".
     const anyBranchExpanded = (0, react_1.useMemo)(() => {
         for (const n of branchNodes) {
             if (expandState.isNodeExpanded(n.path)) {
@@ -150,18 +125,7 @@ function TreeDropdown(props) {
         }
         setInternalExpand(next.getState());
     }, [internalExpand, anyBranchExpanded]);
-    // --- Search state --------------------------------------------------------
-    // We track the search query ourselves so a query change can drive expand
-    // state updates: when the user types, every branch on the path to a match
-    // (and every branch within a matching subtree) is force-expanded so the
-    // matches surface in the items list. The user can then collapse a branch
-    // mid-search to hide that subtree again — and the next keystroke
-    // re-expands everything matching, restoring the full filtered view.
     const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
-    // Set of pathKeys for every node that either matches the query or is an
-    // ancestor of a matching node. Used by the filter callback so an ancestor
-    // whose own label doesn't match still passes when one of its descendants
-    // matches.
     const matchAncestorKeys = (0, react_1.useMemo)(() => {
         if (!searchQuery) {
             return null;
@@ -177,11 +141,6 @@ function TreeDropdown(props) {
         }
         return keys;
     }, [allNodes, searchQuery]);
-    // Expand every branch needed to display the current search's matches.
-    // Called from the search input's onChange (so it's tied to user typing,
-    // not to incidental re-renders) and only mutates expand state when there
-    // is something new to expand — leaving any branches the user collapsed
-    // mid-search untouched until the next keystroke.
     const expandPathsForQuery = (0, react_1.useCallback)((query) => {
         if (!query) {
             return;
@@ -205,10 +164,6 @@ function TreeDropdown(props) {
                 next.setNodeExpanded(node.path, true);
                 mutated = true;
             }
-            // allNodes is in depth-first order, so descendants of `node` are the
-            // contiguous run of nodes with depth > node.depth that immediately
-            // follow it. Walk that run and force every nested branch open so the
-            // entire matching subtree (not just its first level) is visible.
             for (let j = i + 1; j < allNodes.length; j++) {
                 const desc = allNodes[j];
                 if (desc.depth <= node.depth) {
@@ -228,22 +183,6 @@ function TreeDropdown(props) {
         setSearchQuery(value);
         expandPathsForQuery(value);
     }, [expandPathsForQuery]);
-    // --- Combobox items & value ---------------------------------------------
-    // Only nodes whose ancestors are currently expanded are surfaced to the
-    // combobox. base-ui's `filter` prop is skipped when the search query is
-    // empty (it shows every item verbatim), so collapsing a branch has to be
-    // reflected directly in the items array rather than via a filter callback.
-    //
-    // Search doesn't override the items list directly. Instead, typing in the
-    // search input expands every branch on the path to (and inside) any match
-    // via `expandPathsForQuery`, which makes the matches part of `items`
-    // naturally. Collapsing a branch mid-search hides that subtree again, even
-    // if it contains matches — until the next keystroke re-expands everything.
-    //
-    // If no item anywhere in the tree has children (equivalent to "no top-level
-    // item has children", since deeper branches can only exist under a
-    // branching root), the tree is flat and leaf rows don't need to reserve
-    // space for a chevron placeholder.
     const reserveExpandSpace = branchNodes.length > 0;
     const items = (0, react_1.useMemo)(() => {
         const visible = [];
@@ -259,9 +198,6 @@ function TreeDropdown(props) {
                 continue;
             }
             const isExpanded = expandState.isNodeExpanded(node.path);
-            // Read tri-state from TreeSelectionState so branches with partial
-            // selection render the indeterminate state (base-ui's built-in
-            // indicator, suppressed via `renderCheckboxIndicator`, only knows boolean).
             const selected = selectionState.isNodeSelected(node.path);
             visible.push({
                 value: node.pathKey,
@@ -275,17 +211,6 @@ function TreeDropdown(props) {
         }
         return visible;
     }, [allNodes, expandState, toggleExpand, selectionState, reserveExpandSpace]);
-    // Combobox `value` is the set of path keys for currently-visible nodes that
-    // are fully selected (`TreeSelectionState.isNodeSelected(path) === true`).
-    //
-    // IMPORTANT: this must only contain *visible* items. Base-ui's combobox
-    // filters `value` through its `itemByValue` map (built from visible items),
-    // silently dropping any value whose item isn't present. If we then diffed
-    // `onValueChange`'s result against a value that included hidden items, those
-    // hidden items would look "removed" and we'd incorrectly deselect them —
-    // e.g. expanding `fruits` → strawberry is selected, collapsing fruits and
-    // clicking the `fruits` branch would select the subtree but then carve
-    // strawberry back out in the second diff loop.
     const value = (0, react_1.useMemo)(() => {
         const result = [];
         for (const item of items) {
@@ -296,9 +221,6 @@ function TreeDropdown(props) {
         return result;
     }, [items, selectionState]);
     const valueSet = (0, react_1.useMemo)(() => new Set(value), [value]);
-    // Translate combobox value changes into TreeSelectionState mutations:
-    // clicking a branch selects the whole subtree, clicking a leaf toggles
-    // just that leaf, and Select All / Select None take the fast path.
     const { onValueChange: onValueChangeFromProps } = props;
     const onValueChange = (0, react_1.useCallback)((nextValues) => {
         const next = new InfiniteTable_1.TreeSelectionState(internalSelection, {
@@ -324,19 +246,6 @@ function TreeDropdown(props) {
         setInternalSelection(next.getState());
         onValueChangeFromProps?.(next.getSelectedLeafNodePaths());
     }, [internalSelection, treePaths, valueSet, onValueChangeFromProps]);
-    // --- Filtering: search query narrows the flattened items ---------------
-    // Keep a node visible when:
-    //   1. its own label matches the query, or
-    //   2. any ancestor's label matches (so a whole matching subtree shows
-    //      alongside the branch the user typed), or
-    //   3. any descendant's label matches (so parents of a deeply-nested match
-    //      stay in the list to convey the hierarchy, even if they were
-    //      collapsed when the search started).
-    //
-    // Rule (3) relies on `matchAncestorKeys`, which contains every ancestor of
-    // every match. Combined with `items` returning the full flattened tree when
-    // `searchQuery` is non-empty, this lets us surface matches buried inside
-    // collapsed branches without implicitly expanding them.
     const filter = (0, react_1.useCallback)((item, query) => {
         const q = query.toLowerCase();
         if (item.textLabel.toLowerCase().includes(q)) {
@@ -353,7 +262,6 @@ function TreeDropdown(props) {
         }
         return false;
     }, [nodeByKey, matchAncestorKeys]);
-    // --- Chips: one per selected leaf path (mirrors withSelectedLeafNodesOnly)
     const selectedLeafPaths = (0, react_1.useMemo)(() => {
         return selectionState.getSelectedLeafNodePaths();
     }, [selectionState]);
@@ -369,10 +277,6 @@ function TreeDropdown(props) {
         })
             .join('-');
     }, [nodeByKey, toDisplayValue]);
-    // Deselect a single leaf path. Used by chip remove buttons — we can't rely on
-    // base-ui's built-in `ChipRemove` because the combobox's `selectedValue`
-    // contains both branches and leaves, so index-based removal would typically
-    // target a branch and collapse its entire subtree.
     const deselectLeafPath = (0, react_1.useCallback)((path) => {
         const next = new InfiniteTable_1.TreeSelectionState(internalSelection, {
             treePaths,
@@ -385,8 +289,6 @@ function TreeDropdown(props) {
     const showRemoveChip = showClear !== false;
     const { renderSelectedValues } = props;
     const renderInputValues = (0, react_1.useCallback)(() => {
-        // Callers can swap out the default chip rendering (see
-        // `GridFilterTreeDropdown` which renders a comma-separated summary).
         if (renderSelectedValues) {
             return renderSelectedValues({
                 selectedLeafPaths,
@@ -402,12 +304,6 @@ function TreeDropdown(props) {
                 return ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxChip, { showRemove: showRemoveChip, onRemove: () => deselectLeafPath(path), className: 'twa:overflow-hidden', "aria-label": labelText, children: labelText }, key));
             }) }));
     }, [renderSelectedValues, selectedLeafPaths, chipLabelForPath, showRemoveChip, deselectLeafPath]);
-    // --- Tree-aware Select All ----------------------------------------------
-    // The built-in Select All reads `selectedItems.length === allItems.length`.
-    // Since `allItems` here only contains nodes visible under the current
-    // expand state, its tri-state would change as branches are expanded or
-    // collapsed. Compute the state from every leaf in the tree instead so it
-    // stays stable regardless of what's visible.
     const allLeafPaths = (0, react_1.useMemo)(() => allNodes.filter((n) => !n.hasChildren).map((n) => n.path), [allNodes]);
     const selectAllChecked = (0, react_1.useMemo)(() => {
         if (allLeafPaths.length === 0) {
@@ -441,23 +337,18 @@ function TreeDropdown(props) {
         setInternalSelection(next.getState());
         onValueChangeFromProps?.(next.getSelectedLeafNodePaths());
     }, [internalSelection, treePaths, onValueChangeFromProps]);
-    // --- Search-input trailing slot (Expand All / Collapse All toggle) ------
     const renderSearchInputTrailing = (0, react_1.useCallback)(() => {
         if (branchNodes.length === 0) {
             return null;
         }
         const title = anyBranchExpanded ? 'Collapse all' : 'Expand all';
         return ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-name": "tree-expand-all-toggle", title: title, "aria-label": title, onMouseDown: (e) => {
-                // Keep focus on the search input so typing isn't interrupted.
                 e.preventDefault();
             }, onClick: (e) => {
                 e.preventDefault();
                 toggleExpandAll();
-            }, className: (0, utils_1.cn)('ab-NewTreeDropdown-expand-all', 'twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center', 'twa:bg-background', 'twa:size-6 twa:rounded-md twa:text-muted-foreground', 'twa:hover:text-foreground twa:hover:bg-ring/50 twa:cursor-pointer'
-            // 'twa:-mr-1'
-            ), children: anyBranchExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsDownUpIcon, { className: "twa:size-4" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDownIcon, { className: "twa:size-4" })) }));
+            }, className: (0, utils_1.cn)('ab-NewTreeDropdown-expand-all', 'twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center', 'twa:bg-background', 'twa:size-6 twa:rounded-md twa:text-muted-foreground', 'twa:hover:text-foreground twa:hover:bg-ring/50 twa:cursor-pointer'), children: anyBranchExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsDownUpIcon, { className: "twa:size-4" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDownIcon, { className: "twa:size-4" })) }));
     }, [branchNodes.length, anyBranchExpanded, toggleExpandAll]);
-    // --- Open/close callbacks -----------------------------------------------
     const comboboxProps = {
         isLoading,
         items,
@@ -465,30 +356,19 @@ function TreeDropdown(props) {
         onValueChange,
         searchable: 'menulist',
         virtualized: true,
-        // Built-in Select All's default value is `visibleItems.length === totalCount`,
-        // which would swing with expand/collapse. Override it with a tree-aware
-        // value/handler computed from the full leaf set so it stays stable.
         showSelectAllCheckbox: true,
         selectAllCheckboxValue: selectAllChecked,
         onSelectAllCheckboxChange: onSelectAllChange,
-        // Suppress base-ui's boolean checkbox indicator; `TreeItemLabel` renders
-        // its own tri-state checkbox so partially-selected branches display the
-        // indeterminate state.
         renderCheckboxIndicator: () => null,
         resizable: props.resizable,
         placeholder: props.placeholder,
         showClear: showRemoveChip,
-        //@ts-ignore ignore
         'data-name': props['data-name'] ?? 'Select Values',
         renderItemLabel: (defaultLabel) => {
             return defaultLabel;
         },
         filter,
         onInputValueChange: handleSearchInputChange,
-        // Reset the search query on close so the next open starts with no active
-        // filter narrowing. The expand state itself is intentionally preserved
-        // (the user explicitly expanded matches by typing), so re-opening the
-        // dropdown keeps the previously-revealed branches open.
         onOpenChange: (open) => {
             if (!open) {
                 setSearchQuery('');
@@ -499,15 +379,7 @@ function TreeDropdown(props) {
         renderSearchInputTrailing,
         className: (0, utils_1.cn)('ab-NewTreeDropdown', props.className),
     };
-    return (
-        // <div
-        //   className={cn('ab-NewTreeDropdown-wrap', 'twa:w-full')}
-        //   style={{ ...props.fieldStyle, ...props.style }}
-        //   onMouseDown={props.onMouseDown}
-        // >
-        // </div>
-        ((0, jsx_runtime_1.jsx)(Combobox_1.MultiCombobox, { ...comboboxProps }))
-    );
+    return ((0, jsx_runtime_1.jsx)(Combobox_1.MultiCombobox, { ...comboboxProps }));
 }
 function GridFilterTreeDropdown(props) {
     const { showSelectedCount = false, placeholder = 'Select...', className, ...rest } = props;

package/src/components/Tree/treeUtils.js

@@ -8,10 +8,6 @@ function toDisplayValueDefault(value) {
     }
     return value.map((v) => (Array.isArray(v) ? v.join('-') : v)).join(', ');
 }
-/**
- * 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).
- */
 function toDisplayValueFromOptionTree(paths, options) {
     const valueToLabel = new Map();
     const walk = (node) => {