@adaptabletools/adaptable 23.0.0 → 23.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "23.0.0",
+  "version": "23.0.2",
   "description": "Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/View/Components/ColumnFilter/FloatingFilter.js

@@ -44,11 +44,12 @@ export const FloatingFilter = (props) => {
     const operatorOptions = props.predicateDefs.map((predicateDef) => ({
         label: (_jsxs(Box, { className: "twa:flex twa:items-center", children: [_jsx(Box, { className: "twa:mr-2 twa:flex twa:items-center", children: predicateDef.icon }), _jsx(Box, { className: "twa:truncate", "data-name": "filter-predicate-label", "data-label": predicateDef.label, children: predicateDef.label })] })),
         tooltip: predicateDef.label,
+        ariaLabel: predicateDef.label,
         value: predicateDef.operator,
     }));
     const renderTriggerValue = () => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:flex twa:items-center", children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (_jsx(AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && (_jsx(Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1 twa:truncate", title: label, children: label }))] }));
     let filterDropdown = null;
-    const filterDropdownSelect = (_jsx(SingleSelect, { chevronIcon: null, "data-name": "floating-filter-button", ariaLabel: "Column Filter Operator Dropdown", size: "small", stopMouseDownPropagation: true, disabled: props.disabled, open: selectOpen, extraWidthChars: 5, onOpenChange: (nextOpen) => {
+    const filterDropdownSelect = (_jsx(SingleSelect, { chevronIcon: null, "data-name": "floating-filter-button", ariaLabel: `Column Filter Operator Dropdown: current operator is ${label}`, size: "small", stopMouseDownPropagation: true, disabled: props.disabled, open: selectOpen, extraWidthChars: 5, onOpenChange: (nextOpen) => {
             // In non-inline mode the select doesn't pick an operator inline; opening it
             // instead opens the full column filter popup, so keep the dropdown closed.
             if (nextOpen && !isInlineEditable) {

package/src/components/Combobox/VirtualizedList.js

@@ -45,7 +45,12 @@ export function VirtualizedList({ open, virtualizerRef, showItemTooltip, renderC
                 const label = isUncreatedCreatable ? `Create "${item.label}"` : item.label;
                 const itemLabel = renderItemLabel ? (renderItemLabel(label, item)) : (_jsx("span", { className: "twa:min-w-0 twa:flex-1 twa:truncate", children: label }));
                 const itemContent = isUncreatedCreatable ? (_jsxs(_Fragment, { children: [_jsx(PlusIcon, {}), itemLabel] })) : (itemLabel);
-                const itemElement = (_jsx(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: {
+                // 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 (_jsx(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)`,
                         right: `var(--ab-base-space)`,
@@ -53,10 +58,6 @@ export function VirtualizedList({ open, virtualizerRef, showItemTooltip, renderC
                         width: 'auto',
                         height: virtualItem.size,
                         transform: `translateY(${virtualItem.start}px)`,
-                    } }, virtualItem.key));
-                if (tooltipText != null) {
-                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: itemElement, children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] }, virtualItem.key));
-                }
-                return itemElement;
+                    }, children: tooltipText != null ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { className: "twa:flex twa:min-w-0 twa:flex-1 twa:items-center twa:gap-2" }), children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] })) : (itemContent) }, virtualItem.key));
             }) }) }));
 }

package/src/components/Combobox/index.js

@@ -36,11 +36,12 @@ const AdaptableComboboxList = (props) => {
                 ? `Create "${itemText}"`
                 : itemText
             : undefined;
-        const itemElement = (_jsx(ComboboxItem, { value: item, "aria-label": itemText ?? undefined, className: 'ab-Combobox-Row', disabled: item.disabled, renderCheckboxIndicator: props.renderCheckboxIndicator, children: itemContent }, item.value));
-        if (tooltipText != null) {
-            return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: itemElement, children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] }, item.value));
-        }
-        return itemElement;
+        // 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 (_jsx(ComboboxItem, { value: item, "aria-label": itemText ?? undefined, className: 'ab-Combobox-Row', disabled: item.disabled, renderCheckboxIndicator: props.renderCheckboxIndicator, children: tooltipText != null ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { className: "twa:flex twa:min-w-0 twa:flex-1 twa:items-center twa:gap-2" }), children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] })) : (itemContent) }, item.value));
     };
     const list = props.groups ? (_jsx(ComboboxList, { className: loadingClassName, children: (group, index) => (_jsxs(React.Fragment, { children: [_jsxs(ComboboxGroup, { items: group.items, children: [group.label && _jsx(ComboboxLabel, { children: group.label }), _jsx(ComboboxCollection, { children: renderItem })] }), index < (props.groups?.length || 0) - 1 && _jsx(ComboboxSeparator, {})] }, typeof group.label === 'string' ? group.label : `${index}`)) })) : props.virtualized ? (_jsx(ComboboxPrimitive.List, { className: cn(loadingClassName, RESIZABLE_VIRTUALIZED_LIST_CLASS), children: _jsx(VirtualizedList, { open: props.open, renderItemLabel: props.renderItemLabel, virtualizerRef: virtualizerRef, showItemTooltip: props.showItemTooltip, renderCheckboxIndicator: props.renderCheckboxIndicator }) })) : (_jsx(ComboboxList, { className: loadingClassName, children: renderItem }));
     return (_jsxs(_Fragment, { children: [props.showSelectAllCheckbox && (_jsx(ComboboxValue, { children: (selectedItems) => {
@@ -53,6 +54,10 @@ const AdaptableComboboxList = (props) => {
                                 : false;
                     return (_jsx(CheckBox, { checked: allChecked, onChange: (checked) => {
                             props.onCheckAllChange?.(checked);
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                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.

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

@@ -3,6 +3,17 @@ type SelectItemType = {
     label: React.ReactNode;
     value: any;
     disabled?: boolean;
+    /**
+     * Explicit accessible name for the item. Use when `label` is a React node
+     * (so a readable string can't be derived) and the `value` is not meaningful
+     * to assistive technologies.
+     */
+    ariaLabel?: string;
+    /**
+     * Tooltip content shown on hover when `showItemTooltip` is enabled. Takes
+     * precedence over the label-derived text.
+     */
+    tooltip?: React.ReactNode;
 };
 type SelectGroupType<T extends SelectItemType> = {
     label: React.ReactNode;

package/src/components/NewSelect/index.js

@@ -65,9 +65,12 @@ const NewSelect = (props) => {
                     : undefined, children: _jsx(SelectValue, { placeholder: props.placeholder, className: 'twa:truncate twa:block!', children: renderValueChild }) }), _jsx(SelectContent, { "aria-label": props.ariaLabel ? `${props.ariaLabel} content` : undefined, alignItemWithTrigger: false, container: props.container, stopMouseDownPropagation: props.stopMouseDownPropagation, style: contentStyle, children: groups.map((group, index) => {
                     return (_jsxs(React.Fragment, { children: [_jsxs(SelectGroup, { children: [group.label && _jsx(SelectLabel, { children: group.label }), group.items.map((item) => {
                                         const itemTitle = getItemTitle(item.label, item.value);
-                                        const tooltipText = props.showItemTooltip ? itemTitle : undefined;
+                                        const tooltipText = props.showItemTooltip ? item.tooltip ?? itemTitle : undefined;
                                         const itemContent = item.label;
-                                        const itemElement = (_jsx(SelectItem, { value: item.value, "aria-label": itemTitle || undefined, className: 'ab-Select-Row', disabled: item.disabled, children: itemContent }, item.value));
+                                        const itemElement = (_jsx(SelectItem, { value: item.value, "aria-label": item.ariaLabel ||
+                                                itemTitle ||
+                                                (typeof item.tooltip === 'string' ? item.tooltip : undefined) ||
+                                                undefined, className: 'ab-Select-Row', disabled: item.disabled, children: itemContent }, item.value));
                                         if (tooltipText != null) {
                                             return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: itemElement, children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] }, item.value));
                                         }

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1782227625016 || Date.now(),
-    VERSION: "23.0.0" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1782298993334 || Date.now(),
+    VERSION: "23.0.2" || '--current-version--',
 };