@adaptabletools/adaptable-cjs 23.0.1 → 23.0.3

package/package.json

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

package/src/AdaptableOptions/SettingsPanelOptions.d.ts

@@ -7,7 +7,7 @@ import { CustomRenderContext } from '../agGrid/AdaptableFrameworkComponent';
  */
 export interface SettingsPanelOptions {
     /**
-     * Title for the Settings Panel
+     * Title for Settings Panel
      *
      * @defaultValue 'Settings Panel'
      */
@@ -45,7 +45,7 @@ export interface SettingsPanelOptions {
      */
     navigation?: SettingsPanelNavigationConfigurer;
     /**
-     * Initial position of Settings Panel window
+     * Initial position of Settings Panel — pixel offset of top-left corner from top-left of viewport (requires `popupType` to be `'window'`)
      *
      * @defaultValue Middle of Screen
      */
@@ -54,7 +54,7 @@ export interface SettingsPanelOptions {
         y: number;
     };
     /**
-     * Initial size of Settings Panel
+     * Initial size (in pixels) of Settings Panel (requires `popupType` to be `'window'`)
      *
      * @defaultValue Computed based on size of screen
      */
@@ -63,7 +63,7 @@ export interface SettingsPanelOptions {
         height: number;
     };
     /**
-     * Whether Settings Panel is 'window' (i.e. movable, resizable, no backdrop) or 'modal' (centre of screen with backdrop)
+     * How the Settings Panel is rendered: `'modal'` (centred and unmovable and resizable) or `'window'` (supports size, position, drag and resize)
      *
      * @defaultValue 'modal'
      */

package/src/Utilities/Services/ThemeService.d.ts

@@ -7,7 +7,7 @@ export declare class ThemeService implements IThemeService {
     constructor(api: AdaptableApi);
     destroy(): void;
     subscribe(): void;
-    onThemeChanged: () => void;
+    onThemeSelected: () => void;
     applyNewThemeVariables(theme: AdaptableTheme): void;
     showMissingThemeFiles(theme: AdaptableTheme): void;
     getDOMPrefferedColorScheme(): 'dark' | 'light';

package/src/Utilities/Services/ThemeService.js

@@ -23,14 +23,14 @@ class ThemeService {
         document.adoptedStyleSheets = [...document.adoptedStyleSheets].filter((sheet) => sheet !== this.styleSheetObject);
     }
     subscribe() {
-        const themeChangedUnsubscribe = this.api.eventApi.on('ThemeSelected', this.onThemeChanged);
+        const themeChangedUnsubscribe = this.api.eventApi.on('ThemeSelected', this.onThemeSelected);
         const prefferedColorSchemeUnsubscribe = this.attachPrefferedColorSchemeListener();
         this.unsubscribe = () => {
             themeChangedUnsubscribe();
             prefferedColorSchemeUnsubscribe();
         };
     }
-    onThemeChanged = () => {
+    onThemeSelected = () => {
         let currentTheme = this.api.themeApi.getCurrentThemeObject();
         currentTheme = this.mapOsTheme(currentTheme);
         this.applyNewThemeVariables(currentTheme);

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

@@ -48,11 +48,12 @@ const FloatingFilter = (props) => {
     const operatorOptions = props.predicateDefs.map((predicateDef) => ({
         label: ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:items-center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2 twa:flex twa:items-center", children: predicateDef.icon }), (0, jsx_runtime_1.jsx)(Flex_1.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 = () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-0", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:items-center", children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1 twa:truncate", title: label, children: label }))] }));
     let filterDropdown = null;
-    const filterDropdownSelect = ((0, jsx_runtime_1.jsx)(NewSelect_1.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 = ((0, jsx_runtime_1.jsx)(NewSelect_1.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/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.js

@@ -11,7 +11,7 @@ const AdaptableContext_1 = require("../../../AdaptableContext");
 const Utilities_1 = require("../Utilities");
 const utils_1 = require("../../../../lib/utils");
 const WindowDialog = (props) => {
-    const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide, ...dialogProps } = props;
+    const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide, dataName, ...dialogProps } = props;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
@@ -38,7 +38,7 @@ const WindowDialog = (props) => {
         position: popupSettings.position,
         onChange: handleWindowSettings,
     };
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: (0, utils_1.cn)('twa:p-0 twa:h-full', className) }));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { "data-name": dataName, windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: (0, utils_1.cn)('twa:p-0 twa:h-full', className) }));
 };
 const PopupDialog = (props) => {
     const { style, className, onHide, children, ...dialogProps } = props;

package/src/agGrid/agGridDataTypeDefinitions.js

@@ -38,6 +38,10 @@ exports.agGridDataTypeDefinitions = {
     // boolean: is kept as is
     // object: is kept as is
     // Adaptable specific types
+    unknown: {
+        baseDataType: 'text',
+        extendsDataType: 'text',
+    },
     [exports.TEXT_ARRAY_DATA_TYPE]: {
         baseDataType: 'text',
         extendsDataType: 'text',

package/src/components/Combobox/index.js

@@ -58,6 +58,10 @@ const AdaptableComboboxList = (props) => {
                                 : false;
                     return ((0, jsx_runtime_1.jsx)(CheckBox_1.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

@@ -69,9 +69,12 @@ const NewSelect = (props) => {
                     : undefined, children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: props.placeholder, className: 'twa:truncate twa:block!', children: renderValueChild }) }), (0, jsx_runtime_1.jsx)(select_1.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 ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(select_1.SelectGroup, { children: [group.label && (0, jsx_runtime_1.jsx)(select_1.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 = ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: item.value, "aria-label": itemTitle || undefined, className: 'ab-Select-Row', disabled: item.disabled, children: itemContent }, item.value));
+                                        const itemElement = ((0, jsx_runtime_1.jsx)(select_1.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 ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { render: itemElement, children: itemContent }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "right", children: tooltipText })] }, item.value));
                                         }

package/src/components/WindowModal/WindowModal.js

@@ -104,9 +104,22 @@ const WindowModal = (props) => {
         }
     }, []);
     const ResizableCmp = re_resizable_1.Resizable;
+    // React propagates events through the component tree, not the DOM tree. A
+    // nested popup (e.g. a modal wizard) rendered as a React child of this window
+    // is portaled elsewhere in the DOM, so a mousedown inside it would bubble here
+    // and incorrectly bring this window to the front (covering the popup). Guard
+    // against this by only reacting to mousedowns that happen inside this window's
+    // own DOM subtree.
+    const handleMouseDown = (event) => {
+        const node = targetRef.current;
+        if (node && event.target instanceof Node && !node.contains(event.target)) {
+            return;
+        }
+        stacking.bringInFront();
+    };
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { style: style, 
         //@ts-ignore
-        ref: targetRef, onMouseDown: stacking.bringInFront, children: (0, jsx_runtime_1.jsx)(ResizableCmp, { minWidth: props.minWidth, minHeight: props.minHeight, onResizeStop: handleResizeStop, onResize: handleResize, bounds: "window", defaultSize: {
+        ref: targetRef, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizableCmp, { minWidth: props.minWidth, minHeight: props.minHeight, onResizeStop: handleResizeStop, onResize: handleResize, bounds: "window", defaultSize: {
                 width: props.size.width,
                 height: props.size.height,
             }, children: props.children }) }), portalElement);

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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: 1782250584329 || Date.now(),
-    VERSION: "23.0.1" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1782392473893 || Date.now(),
+    VERSION: "23.0.3" || '--current-version--',
 };