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

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -34,14 +34,6 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
     const setFieldValue = (key, value) => {
         const newData = { ...data, [key]: value };
         onChange(newData);
-        // Per-field `onValueChange` hook. We resolve the field by name from the
-        // form definition so callers (e.g. number-input keyDown handler) can use
-        // the same setter and still get the per-field callback fired.
-        //
-        // We enrich the host-supplied `context` with the freshly-computed
-        // `newData` as `formData` so consumers (e.g. CustomToolbarFormContext)
-        // see the updated values immediately - without having to wait for a
-        // React re-render to flush the new `data` prop into a rebuilt context.
         const changedField = flatFields.find((f) => f.name === key);
         if (changedField?.onValueChange) {
             const enrichedContext = { ...(context ?? {}), formData: newData };
@@ -49,23 +41,13 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         }
     };
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    // Stable form-instance id used to namespace every field's id so that
-    // multiple AdaptableForms on the same page (Alerts + a Custom Toolbar +
-    // a wizard, say) don't generate clashing DOM ids - and so screen readers
-    // can correctly resolve `htmlFor` / `aria-describedby` references.
     const formInstanceId = (0, react_1.useId)();
     const fieldDomId = (field) => `${formInstanceId}-${field.name}`;
     const fieldLabelId = (field) => `${formInstanceId}-${field.name}-label`;
     const fieldHelpId = (field) => `${formInstanceId}-${field.name}-help`;
     const fieldErrorId = (field) => `${formInstanceId}-${field.name}-error`;
-    // Flat list of fields - shared by validation, options resolution, etc.
-    // Flattens both inline-row arrays and field groups.
     const flatFields = (0, react_1.useMemo)(() => (0, AdaptableForm_1.flattenAdaptableFormFields)(formDef), [formDef]);
-    // Cache for async options resolution. Populated by the effect below.
     const [asyncOptionsCache, setAsyncOptionsCache] = (0, react_1.useState)({});
-    // Kick off resolution of any function-form `options` that return a
-    // Promise. Synchronous functions are still resolved during render
-    // (via `resolveOptions`) so there's no first-paint lag for them.
     (0, react_1.useEffect)(() => {
         let cancelled = false;
         flatFields.forEach((field) => {
@@ -80,7 +62,6 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                         }
                     })
                         .catch(() => {
-                        /* swallow - leave the previous cache entry in place */
                     });
                 }
             }
@@ -101,16 +82,8 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         }
         return result;
     };
-    // Run validation once per render so errors can be rendered inline AND
-    // exposed to button-level handlers via context (`formIsValid`,
-    // `formErrors`).
-    const formErrors = (0, react_1.useMemo)(() => (0, AdaptableForm_1.validateAdaptableForm)(formDef, data, context), 
-    // intentionally include formDef so dynamic hidden/disabled functions
-    // re-evaluate when the form definition changes
-    [formDef, data, context]);
+    const formErrors = (0, react_1.useMemo)(() => (0, AdaptableForm_1.validateAdaptableForm)(formDef, data, context), [formDef, data, context]);
     const formIsValid = Object.keys(formErrors).length === 0;
-    // Context enriched with the freshly-computed form data + validity, so
-    // that button hidden/disabled/onClick callbacks see consistent values.
     const buttonContext = (0, react_1.useMemo)(() => ({
         ...(context ?? {}),
         formData: data,
@@ -118,17 +91,11 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         formErrors,
     }), [context, data, formIsValid, formErrors]);
     const disabledButtons = (0, react_1.useMemo)(() => formDef.buttons?.map((button) => {
-        // defensive programming: conventionally context should ALWAYS be present for validating buttons
         const isValid = !!button.disabled && !!buttonContext ? !button.disabled(button, buttonContext) : true;
         return !isValid;
     }) ?? [], [buttonContext, formDef.buttons]);
     const renderLabel = (field) => {
         const required = field.required;
-        // For radio groups we render a `<div>` (the radiogroup container has
-        // no single focusable element to associate the label with), but for
-        // every other field type we wire the label to the field's input with
-        // `htmlFor` so clicking the label focuses the control and so screen
-        // readers announce it correctly.
         const useFor = field.fieldType !== 'radio' && field.fieldType !== 'textOutput';
         const requiredMarker = required ? ((0, jsx_runtime_1.jsx)("span", { className: "ab-Form_required-marker", "aria-hidden": "true", children: ' *' })) : null;
         if (useFor) {
@@ -140,10 +107,6 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         const value = getFieldValue(field.name) ?? '';
         const isDisabled = (0, AdaptableForm_1.isAdaptableFormFieldDisabled)(field, data, context);
         const error = formErrors[field.name];
-        // Accessibility: every editable input gets a stable id (so the label's
-        // `htmlFor` resolves) plus `aria-*` attributes that announce required
-        // state, validity and link the help / error text via
-        // `aria-describedby`.
         const inputId = fieldDomId(field);
         const helpId = field.helpText ? fieldHelpId(field) : undefined;
         const errorId = error ? fieldErrorId(field) : undefined;
@@ -157,7 +120,6 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         const onChange = (event) => {
             if (field.fieldType === 'number') {
                 const rawValue = event.target.value;
-                // Empty string -> null (so `required` validation can detect it)
                 if (rawValue === '') {
                     setFieldValue(field.name, null);
                     return;
@@ -215,10 +177,6 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                     label: item.label,
                 }));
                 const selectPlaceholder = (0, AdaptableForm_1.resolveSelectPlaceholder)(field, optionItems);
-                // The underlying SingleCombobox / MultiCombobox manage their own
-                // popup-based focus; we wrap them in a labelled `role="group"` so
-                // assistive tech announces "<label> group" when focus enters and
-                // can read out the help/error text via `aria-describedby`.
                 const groupProps = {
                     id: inputId,
                     role: 'group',
@@ -228,9 +186,6 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                     'aria-describedby': describedBy,
                 };
                 if (field.multi) {
-                    // For multi-selects the canonical value is an array. Coerce
-                    // anything else (e.g. legacy string defaults) to [] so the
-                    // underlying combobox never receives a non-array value.
                     const selected = Array.isArray(value) ? value : [];
                     control = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...groupProps, children: (0, jsx_runtime_1.jsx)(Combobox_1.MultiCombobox, { items: items, onValueChange: (newValues) => setFieldValue(field.name, newValues), value: selected, disabled: isDisabled, placeholder: selectPlaceholder }) }));
                 }
@@ -261,8 +216,6 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                 control = (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:pl-2 twa:text-left", children: value });
                 break;
             case 'custom':
-                // The consumer renders whatever they like; we keep the wiring
-                // controlled by routing reads/writes through `setFieldValue`.
                 control = field.render ? (field.render({
                     value,
                     setValue: (newValue) => setFieldValue(field.name, newValue),
@@ -276,21 +229,12 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
             default:
                 control = (0, jsx_runtime_1.jsxs)("div", { children: ["Unknown field type: ", field.fieldType] });
         }
-        // No surrounding wrapper if there's nothing extra to show - keeps the
-        // existing simple cases visually identical.
         if (!field.helpText && !error) {
             return control;
         }
         return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [control, field.helpText && !error ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { id: helpId, className: "ab-Form_help twa:text-xs twa:opacity-70 twa:mt-1", children: field.helpText })) : null, error ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { id: errorId, role: "alert", "aria-live": "polite", className: "ab-Form_error twa:text-xs twa:mt-1", style: { color: 'var(--ab-color-destructive, #c00)' }, children: error })) : null] }));
     };
-    // by default we have 2 columns: label & input
     const columns = formDef.config?.columns ?? [1, 2];
-    // Form-level Enter-to-submit. Shift+Enter or Enter inside a textarea
-    // inserts a newline rather than submitting; this matches user
-    // expectations for multi-line inputs. We explicitly don't trigger on
-    // submit when a select dropdown is open (Enter selects an option),
-    // which the SingleCombobox/MultiCombobox handle internally by
-    // stopping propagation.
     const handleFormKeyDown = (event) => {
         handleKeyDownForNumberFields(event);
         if (!formDef.onSubmit) {
@@ -317,9 +261,6 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         const targetName = target.name;
         const field = flatFields.find((f) => f.name === targetName);
         if (field && field.fieldType === 'number') {
-            // for number fields
-            // hook them up to the CellEditorKeyDown event
-            // so Shortcuts work as expected
             const value = event.target.value;
             adaptable._emit('CellEditorKeyDown', {
                 keyDownEvent: event,
@@ -331,14 +272,7 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
             });
         }
     };
-    // `inline` lays fields out on a single horizontal row, with each field
-    // rendered as `<label> <input>` side-by-side. Designed for compact hosts
-    // like Dashboard Custom Toolbars; the standard popup/wizard layout (rows
-    // with label-on-left grid) is preserved for everything else.
     const isInlineLayout = formDef.layout === 'inline';
-    // Inline-layout entries: groups are flattened (their title/description
-    // skipped because there's no vertical room) but inline-row arrays are
-    // also flattened so every visible field becomes its own cell.
     const renderInlineEntries = () => {
         const items = [];
         for (const entry of formDef.fields ?? []) {
@@ -375,15 +309,11 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
             if ((0, AdaptableForm_1.isAdaptableFormFieldGroupHidden)(entry, data, context)) {
                 return null;
             }
-            // Render inner items using the same row/inline-row logic that
-            // top-level entries use, just nested below the group header.
             const innerNodes = entry.fields.map((inner, innerIndex) => {
                 if (Array.isArray(inner)) {
                     const visible = inner.filter((f) => !(0, AdaptableForm_1.isAdaptableFormFieldHidden)(f, data, context));
                     if (visible.length === 0)
                         return null;
-                    // `renderField` returns `React.ReactNode` (custom fields may
-                    // produce strings/fragments) so we widen the row-bag to match.
                     const rowFields = {};
                     visible.map((fieldItem, idx) => {
                         const rowFieldIndex = 2 * idx + 1;
@@ -406,8 +336,6 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                         }, children: [entry.title ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-Form_group-title twa:text-4 twa:font-bold", children: entry.title })) : null, entry.description ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-Form_group-description twa:text-xs twa:opacity-70 twa:mt-1", children: entry.description })) : null] })) : null, innerNodes] }, `group-${index}`));
         }
         if (Array.isArray(entry)) {
-            // `renderField` returns `React.ReactNode` (custom fields may
-            // produce strings/fragments) so we widen the row-bag to match.
             const rowFields = {};
             const visible = entry.filter((f) => !(0, AdaptableForm_1.isAdaptableFormFieldHidden)(f, data, context));
             if (visible.length === 0)

package/src/components/ColorPicker/ColorPicker.js

@@ -15,12 +15,9 @@ const twMerge_1 = require("../../twMerge");
 exports.ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
     let { value, includeAlpha = true, className, ...restProps } = props;
-    // Create a debounced version of onChange
-    // we need this because moving the mouse A LOT in the custom color picker can break the React rendering
     const debouncedOnChange = (0, react_1.useCallback)((0, TimingHelper_1.debounce)((color) => {
         props.onChange(color);
     }, 30), [props.onChange]);
-    // Clean up the debounce on unmount
     (0, react_1.useEffect)(() => {
         return () => {
             debouncedOnChange.cancel();
@@ -44,9 +41,6 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, utils_1.cn)('ColorPicker twa:items-center twa:gap-2', {
             'twa:opacity-30': props.disabled,
         }, className), children: [(0, jsx_runtime_1.jsx)(Input_1.default, { ...restProps, as: undefined, disabled: props.disabled, className: (0, twMerge_1.twMerge)('ab-ColorPicker-swatch'), onChange: (event) => {
-                    /**
-                     * The value is not in the map when the color is not in the palette.
-                     */
                     const color = optionsMap[event.target.value] ?? event.target.value;
                     debouncedOnChange(color);
                 }, value: preparedValue, ref: ref, type: "color", list: "ABcolorChoices", title: props.title }), ABcolorChoices, includeAlpha && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Opacity" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:min-h-input", children: (0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {

package/src/components/Combobox/VirtualizedList.js

@@ -49,11 +49,6 @@ function VirtualizedList({ open, virtualizerRef, showItemTooltip, renderCheckbox
                 const label = isUncreatedCreatable ? `Create "${item.label}"` : item.label;
                 const itemLabel = renderItemLabel ? (renderItemLabel(label, item)) : ((0, jsx_runtime_1.jsx)("span", { className: "twa:min-w-0 twa:flex-1 twa:truncate", children: label }));
                 const itemContent = isUncreatedCreatable ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, {}), itemLabel] })) : (itemLabel);
-                // The Tooltip must wrap the item's inner content rather than the
-                // `ComboboxItem` itself: when the tooltip trigger renders the option
-                // element it overwrites the option's `id`, which breaks base-ui's
-                // `aria-activedescendant` (`${rootId}-${index}`) link and silences
-                // screen readers as you navigate the list.
                 return ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxItem, { index: virtualItem.index, "data-index": virtualItem.index, ref: virtualizer.measureElement, value: item, renderCheckboxIndicator: renderCheckboxIndicator, "aria-setsize": filteredItems.length, "aria-posinset": virtualItem.index + 1, "aria-label": itemText ?? undefined, style: {
                         position: 'absolute',
                         left: `var(--ab-base-space)`,

package/src/components/Combobox/index.js

@@ -40,11 +40,6 @@ const AdaptableComboboxList = (props) => {
                 ? `Create "${itemText}"`
                 : itemText
             : undefined;
-        // The Tooltip must wrap the item's inner content rather than the
-        // `ComboboxItem` itself: when the tooltip trigger renders the option element
-        // it overwrites the option's `id`, which breaks base-ui's
-        // `aria-activedescendant` (`${rootId}-${index}`) link and silences screen
-        // readers as you navigate the list.
         return ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxItem, { value: item, "aria-label": itemText ?? undefined, className: 'ab-Combobox-Row', disabled: item.disabled, renderCheckboxIndicator: props.renderCheckboxIndicator, children: tooltipText != null ? ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { render: (0, jsx_runtime_1.jsx)("span", { className: "twa:flex twa:min-w-0 twa:flex-1 twa:items-center twa:gap-2" }), children: itemContent }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "right", children: tooltipText })] })) : (itemContent) }, item.value));
     };
     const list = props.groups ? ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxList, { className: loadingClassName, children: (group, index) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsxs)(combobox_1.ComboboxGroup, { items: group.items, children: [group.label && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxLabel, { children: group.label }), (0, jsx_runtime_1.jsx)(combobox_1.ComboboxCollection, { children: renderItem })] }), index < (props.groups?.length || 0) - 1 && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxSeparator, {})] }, typeof group.label === 'string' ? group.label : `${index}`)) })) : props.virtualized ? ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxPrimitive.List, { className: (0, utils_1.cn)(loadingClassName, combobox_1.RESIZABLE_VIRTUALIZED_LIST_CLASS), children: (0, jsx_runtime_1.jsx)(VirtualizedList_1.VirtualizedList, { open: props.open, renderItemLabel: props.renderItemLabel, virtualizerRef: virtualizerRef, showItemTooltip: props.showItemTooltip, renderCheckboxIndicator: props.renderCheckboxIndicator }) })) : ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxList, { className: loadingClassName, children: renderItem }));
@@ -63,10 +58,6 @@ const AdaptableComboboxList = (props) => {
                                 props.onCheckAllChange?.(!allChecked);
                             }
                         }, onMouseDown: (e) => {
-                            // Prevent focus from moving to the checkbox input;
-                            // keeps focus on the combobox input so arrow-key navigation still works.
-                            // while still allowing the checkbox to be checked/unchecked as usual
-                            // either by clicking or by using the keyboard
                             e.preventDefault();
                         }, className: (0, utils_1.cn)('twa:m-0 twa:px-3 twa:py-1 twa:text-sm twa:font-normal twa:text-current twa:w-full twa:bg-primary', {
                             'twa:mt-1': props.searchable === 'menulist',
@@ -95,8 +86,6 @@ const AdaptableCombobox_Root = (props) => {
     const resolvedValue = props.multiple
         ? (0, comboboxUtils_1.valueToItems)(props.value, itemByValue)
         : (0, comboboxUtils_1.valueToItem)(props.value, itemByValue);
-    // When props.value is defined, always pass null (not undefined) to keep base-ui in controlled mode,
-    // even if the item isn't in the lookup yet (e.g. async item loading).
     const internalValue = props.value !== undefined ? resolvedValue ?? null : resolvedValue;
     const internalDefaultValue = props.multiple
         ? (0, comboboxUtils_1.valueToItems)(props.defaultValue, itemByValue)
@@ -104,8 +93,6 @@ const AdaptableCombobox_Root = (props) => {
     const handleValueChange = (next, eventDetails) => {
         if (!props.onValueChange)
             return;
-        // base-ui clears the selected value when Escape is pressed
-        // we only want to allow this if the clearOnEscape prop is true
         if (eventDetails?.reason === 'escape-key' && !props.clearOnEscape) {
             eventDetails.cancel?.();
             return;
@@ -118,8 +105,6 @@ const AdaptableCombobox_Root = (props) => {
         }
     };
     const handleInputValueChange = (next, eventDetails) => {
-        // base-ui blanks the input text (and then the selected value) when Escape is pressed
-        // we only want to allow this if the clearOnEscape prop is true
         if (eventDetails?.reason === 'escape-key' && !props.clearOnEscape) {
             eventDetails.cancel?.();
             return;
@@ -128,7 +113,6 @@ const AdaptableCombobox_Root = (props) => {
     };
     let comboboxItems = props.groups ?? props.items;
     if (props.isCreatable && allItems[allItems.length - 1]?.creatable) {
-        // let's detect all "creatable" items and add them to the combobox items
         const creatableItems = [];
         for (let len = allItems.length - 1; len >= 0; len--) {
             const item = allItems[len];
@@ -147,8 +131,7 @@ const useGetAllItems = (props) => {
     const allItems = props.groups
         ? props.groups.flatMap((g) => g.items)
         : props.isCreatable
-            ? // for creatable, let's clone the items
-                // as we'll push to the "allItems" array
+            ?
                 [].concat(props.items)
             : props.items;
     const itemByValue = (0, react_1.useMemo)(() => {
@@ -166,8 +149,6 @@ const useGetAllItems = (props) => {
     };
 };
 function useCreatable(props, allItems, itemByValue) {
-    // thse are items that the user has already hit "Enter" or selected
-    // so they should be reflected as normal items in the combobox
     const [alreadySavedCreatableItems, setAlreadySavedCreatableItems] = React.useState([]);
     const itemByValueRef = React.useRef(itemByValue);
     itemByValueRef.current = itemByValue;
@@ -193,8 +174,6 @@ function useCreatable(props, allItems, itemByValue) {
                 ...item,
                 creatable: true,
                 created: true,
-                // if all other items are numeric, and the value for the created item is a valid number, then convert the value to a number
-                // we'll also have to correctly call onValueChange with the new value
                 value: itemsAllNumeric && !Number.isNaN(Number(item.value)) ? Number(item.value) : item.value,
             }));
             setAlreadySavedCreatableItems((current) => {
@@ -212,8 +191,6 @@ function useCreatable(props, allItems, itemByValue) {
         }
         if (savingCreatableItem) {
             if (props.multiple) {
-                // Replace the "creatable-not-yet-created" items in the full selection
-                // with their newly-created counterparts so existing values are preserved.
                 const createdByOriginalValue = new Map();
                 itemsToCreate.forEach((it, idx) => {
                     createdByOriginalValue.set(it.value, newCreatedItems[idx]);
@@ -242,10 +219,6 @@ function useCreatable(props, allItems, itemByValue) {
                 initialInputValue = (0, comboboxUtils_1.getItemTextLabel)(item);
             }
             else if (props.isCreatable) {
-                // For a creatable combobox, surface a controlled value that doesn't
-                // match any item as the input so the trigger displays it instead of
-                // falling back to the placeholder. The value is also re-added below
-                // as a creatable item, so base-ui can resolve it back to a row.
                 initialInputValue = `${value}`;
             }
         }
@@ -274,10 +247,6 @@ function useCreatable(props, allItems, itemByValue) {
                 return normalizedItemValue === normalized;
             });
             if (newValue !== '' && !exactExists) {
-                // When the creatable input is mirroring the controlled `props.value`
-                // (e.g. an unknown numeric value), use the original value's type for
-                // the synthesized item so `valueToItem(props.value, itemByValue)` can
-                // resolve back to it. Otherwise fall back to the typed string.
                 const creatableValue = !props.multiple && props.value != undefined && `${props.value}` === newValue
                     ? props.value
                     : newValue;
@@ -357,12 +326,7 @@ const SingleCombobox_MenuListSearchable = (props) => {
         }
         : undefined;
     const { allItems, itemByValue, maxLabelLength, inputValue, onInputValueChange, onValueChange, value, } = useGetAllItems(props);
-    return ((0, jsx_runtime_1.jsxs)(AdaptableCombobox_Root, { ...props, value: value, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, children: [(0, jsx_runtime_1.jsx)(combobox_1.ComboboxPrimitive.Trigger, { ref: triggerRef, render: (0, jsx_runtime_1.jsx)("div", {}), nativeButton: false, "data-slot": "combobox-menulist-trigger", tabIndex: 0, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], className: (0, utils_1.cn)(
-                // we intentially replaced :focus-visible with :focus
-                // because when the user clicked an item and the combobox closed
-                // the focus ring would not be displayed properly
-                // in this specific case of SingleCombobox_MenuListSearchable
-                'twa:flex twa:w-full twa:cursor-default twa:items-center twa:justify-between twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:bg-transparent twa:py-2 twa:pr-2 twa:pl-2.5 twa:text-sm twa:whitespace-nowrap twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:select-none twa:focus:border-ring twa:focus:ring-3 twa:focus:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:data-placeholder:text-muted-foreground twa:h-9', triggerClassName), disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { placeholder: (0, jsx_runtime_1.jsx)("span", { children: props.placeholder }), children: (value) => {
+    return ((0, jsx_runtime_1.jsxs)(AdaptableCombobox_Root, { ...props, value: value, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, children: [(0, jsx_runtime_1.jsx)(combobox_1.ComboboxPrimitive.Trigger, { ref: triggerRef, render: (0, jsx_runtime_1.jsx)("div", {}), nativeButton: false, "data-slot": "combobox-menulist-trigger", tabIndex: 0, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], className: (0, utils_1.cn)('twa:flex twa:w-full twa:cursor-default twa:items-center twa:justify-between twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:bg-transparent twa:py-2 twa:pr-2 twa:pl-2.5 twa:text-sm twa:whitespace-nowrap twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:select-none twa:focus:border-ring twa:focus:ring-3 twa:focus:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:data-placeholder:text-muted-foreground twa:h-9', triggerClassName), disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { placeholder: (0, jsx_runtime_1.jsx)("span", { children: props.placeholder }), children: (value) => {
                         return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "twa:flex twa:flex-1 twa:truncate twa:text-left", "data-slot": "combobox-value", children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { placeholder: (0, jsx_runtime_1.jsx)("span", { children: props.placeholder }) }) }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", "data-slot": "combobox-value-input", readOnly: true, value: value ? (0, comboboxUtils_1.getItemTextLabel)(value) : '' }), props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), value && showClear ? ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled, onMouseDown: (e) => {
                                         e.preventBaseUIHandler();
                                     } })) : props.showTrigger !== false ? ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", className: 'twa:min-h-auto!', children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:shrink-0 twa:text-muted-foreground" }) })) : null] }));
@@ -399,10 +363,6 @@ const MultiCombobox_SimpleSearchable = (props) => {
         props.onOpenChange(open);
     };
     return ((0, jsx_runtime_1.jsxs)(AdaptableCombobox_Root, { ...props, value: value, multiple: true, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, onOpenChange: onOpenChange, children: [(0, jsx_runtime_1.jsx)(combobox_1.ComboboxChips, { "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], onClick: (e) => {
-                    // ignore clicks that originate from the right-side controls (chevron / clear),
-                    // since those buttons already toggle the combobox themselves. without this guard,
-                    // clicking the chevron while the popup is open would first close it (via the
-                    // base-ui trigger) and then the bubbled click would re-open it here.
                     if (e.target.closest('[data-slot="input-group"]')) {
                         return;
                     }
@@ -412,7 +372,7 @@ const MultiCombobox_SimpleSearchable = (props) => {
                 }, ref: anchor, className: (0, utils_1.cn)('twa:relative', props.className), children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { children: (selectedItems) => {
                         const shouldKeepTrigger = props.searchable === false && selectedItems.length > 0;
                         return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : ((0, jsx_runtime_1.jsx)(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(combobox_1.ComboboxChipsInput, { placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: props.searchable === false, onFocus: props.onFocus, onBlur: props.onBlur, className: props.searchable === false && selectedItems.length > 0
-                                                ? 'twa:absolute! twa:inset-0 twa:min-h-auto! twa:max-h-auto!' // so we fill the parent container and on click we can open the combobox as usual
+                                                ? 'twa:absolute! twa:inset-0 twa:min-h-auto! twa:max-h-auto!'
                                                 : 'twa:flex-1' }), props.searchable === false && selectedItems.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" })) : null, (0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group twa:z-10", children: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", className: "twa:p-0 px twa:gap-0.5", children: [props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), props.showTrigger !== false ? ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { className: "twa:min-h-auto!" }), "data-slot": "combobox-toggle", className: (0, utils_1.cn)(`twa:data-pressed:bg-transparent`, shouldKeepTrigger
                                                             ? ''
                                                             : 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled })) : null, showClear && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled })] }) })] })) : null] }));
@@ -420,7 +380,6 @@ const MultiCombobox_SimpleSearchable = (props) => {
 };
 const MultiComboboxChips = (props) => {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.selectedItems.map((item) => ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxChip, { showRemove: props.showClear, onMouseDown: (e) => {
-                // this prevents showing the list when the user simply wants to remove a chip
                 e.preventBaseUIHandler?.();
             }, className: 'twa:overflow-hidden', "aria-label": typeof item.label === 'string' ? item.label : undefined, children: item.label }, item.value))) }));
 };
@@ -491,22 +450,15 @@ const MultiCombobox_MenuListSearchable = (props) => {
                 const isInternal = container.contains(newFocusedTarget) ||
                     contentElRef.current?.contains(newFocusedTarget);
                 if (isInternal) {
-                    // if we don't have this logic here,
-                    // the popup wont collapse when focus is lost
                     return;
                 }
-                // if the focused target is not inside the combobox, close the combobox
                 onOpenChange(false);
                 if (hasFocusRef.current) {
                     hasFocusRef.current = false;
                     props.onBlur?.();
                 }
             }, className: (0, utils_1.cn)('twa:relative', props.className, _props?.className), children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { children: (selectedItems) => {
-                    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : ((0, jsx_runtime_1.jsx)(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxChipsInput, { ref: chipsInputRef, placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: true, value: '', className: 'twa:flex-1' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" })), (0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group", children: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", className: "twa:p-0 px", children: [props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), props.showTrigger !== false ? ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { className: "twa:min-h-auto!", ref: chevronRef, "data-slot": "combobox-toggle", 
-                                                // we already have the role="combobox" on the parent
-                                                // so we want to avoid the same role twice in the component,
-                                                // hence we use the role="widget" here.
-                                                role: "widget" }), "data-slot": "combobox-toggle", className: (0, utils_1.cn)(`twa:data-pressed:bg-transparent`, 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled })) : null, showClear && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled })] }) })] }));
+                    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : ((0, jsx_runtime_1.jsx)(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxChipsInput, { ref: chipsInputRef, placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: true, value: '', className: 'twa:flex-1' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" })), (0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group", children: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", className: "twa:p-0 px", children: [props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), props.showTrigger !== false ? ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { className: "twa:min-h-auto!", ref: chevronRef, "data-slot": "combobox-toggle", role: "widget" }), "data-slot": "combobox-toggle", className: (0, utils_1.cn)(`twa:data-pressed:bg-transparent`, 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled })) : null, showClear && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled })] }) })] }));
                 } }) }));
     };
     return ((0, jsx_runtime_1.jsxs)(AdaptableCombobox_Root, { ...props, value: value, multiple: true, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, onOpenChange: onOpenChange, children: [props.renderInput === false ? ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { nativeButton: false, render: renderChips, icon: props.showTrigger !== false ? undefined : null })) : (renderChips(undefined)), (0, jsx_runtime_1.jsxs)(combobox_1.ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, children: [(0, jsx_runtime_1.jsx)(combobox_1.ComboboxInput, { placeholder: 'Filter...', showClear: false, ref: searchInputRef, showTrigger: false, disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, role: "searchbox", className: 'twa:min-h-input', children: typeof props.renderSearchInputTrailing === 'function'
@@ -524,16 +476,7 @@ const MultiCombobox = (props) => {
     return searchable === 'menulist' ? ((0, jsx_runtime_1.jsx)(MultiCombobox_MenuListSearchable, { renderInput: false, ...props, multiple: true, open: open, onOpenChange: onOpenChange, searchable: searchable, showItemTooltip: showItemTooltip })) : ((0, jsx_runtime_1.jsx)(MultiCombobox_SimpleSearchable, { ...props, open: open, multiple: true, onOpenChange: onOpenChange, searchable: searchable, showItemTooltip: showItemTooltip }));
 };
 exports.MultiCombobox = MultiCombobox;
-exports.GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME = (0, utils_1.cn)(
-// remove the border/shadow and position it properly
-// to adjust for outline on the input
-'twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', 
-// more adjustments for very compact ag grid themes
-'twa:[.ab-FloatingFilter_&]:[line-height:1]', 'twa:[.ab-FloatingFilter_[data-slot=combobox-trigger]]:py-0', 
-// also for very compact ag grid themes
-// make the floating-filter combobox a size container so the toggle can
-// shrink purely via CSS when the control is small in height (see ColumnFilter/base.css)
-'twa:[.ab-FloatingFilter_&]:[container-type:size]');
+exports.GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME = (0, utils_1.cn)('twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', 'twa:[.ab-FloatingFilter_&]:[line-height:1]', 'twa:[.ab-FloatingFilter_[data-slot=combobox-trigger]]:py-0', 'twa:[.ab-FloatingFilter_&]:[container-type:size]');
 const GridFilterCombobox = (props) => {
     const { showSelectedCount = false, placeholder = 'Select...', ...comboboxProps } = props;
     const sharedProps = {
@@ -545,7 +488,6 @@ const GridFilterCombobox = (props) => {
         virtualized: true,
         resizable: true,
         showClear: false,
-        // don't show a chevron icon in the grid filter combobox
         showTrigger: false,
         renderInputValues: (items) => {
             let children = items.map((item) => (0, comboboxUtils_1.getItemTextLabel)(item)).join(', ');

package/src/components/Dashboard/Dashboard.js

@@ -41,7 +41,6 @@ function Dashboard(props) {
                 }, children: child.props.title }, index))) }));
     const renderBar = () => ((0, jsx_runtime_1.jsxs)("div", { className: "ab-Dashboard__header", onDoubleClick: (event) => {
             const target = event.target;
-            // ignore double clicks on buttons, inputs and their children
             if (!props.canFloat) {
                 return;
             }
@@ -50,7 +49,5 @@ function Dashboard(props) {
             }
             setFloating(!floating);
         }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ab-Dashboard__header-left", children: [left, !floating && renderTabs()] }), floating ? ((0, jsx_runtime_1.jsx)("div", { className: "ab-Dashboard__title", ref: handleRef, style: { cursor: 'move' }, children: title }, "title-drag")) : ((0, jsx_runtime_1.jsx)("div", { className: "ab-Dashboard__title", children: title }, "title")), (0, jsx_runtime_1.jsx)("div", { className: "ab-Dashboard__header-right", children: right })] }));
-    return ((0, jsx_runtime_1.jsxs)("div", { 
-        // @ts-ignore
-        ref: targetRef, className: (0, join_1.default)(`ab-Dashboard`, collapsed ? 'ab-Dashboard--collapsed' : '', floating ? 'ab-Dashboard--floating' : ''), style: floating ? floatingStyle : undefined, children: [renderBar(), expanded && children && children.length ? ((0, jsx_runtime_1.jsx)("div", { className: "ab-Dashboard__content", children: children[activeTabIndex] ? children[activeTabIndex].props.children : null })) : null, props.footer] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: targetRef, className: (0, join_1.default)(`ab-Dashboard`, collapsed ? 'ab-Dashboard--collapsed' : '', floating ? 'ab-Dashboard--floating' : ''), style: floating ? floatingStyle : undefined, children: [renderBar(), expanded && children && children.length ? ((0, jsx_runtime_1.jsx)("div", { className: "ab-Dashboard__content", children: children[activeTabIndex] ? children[activeTabIndex].props.children : null })) : null, props.footer] }));
 }