@adaptabletools/adaptable 20.1.3 → 20.1.4

package/src/components/Datepicker/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import OverlayTrigger from '../OverlayTrigger';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import useProperty from '../utils/useProperty';
 import FieldWrap from '../FieldWrap';
 import SimpleButton from '../SimpleButton';
@@ -10,9 +10,45 @@ import { useDatepickerContext } from './DatepickerContext';
 import { DayPicker } from 'react-day-picker';
 import { AdaptableDateInlineInput } from '../../View/Components/AdaptableInput/AdaptableDateInlineInput';
 import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays, } from 'date-fns';
-const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
+import { Select } from '../Select';
+const onDatePickerDropdownKeyDown = (e) => {
+    if (e.key === 'Escape' || e.key === 'Enter') {
+        e.stopPropagation();
+    }
+};
+const DatePickerComponents = {
+    YearsDropdown: (props) => {
+        const onChange = useCallback((value) => {
+            props.onChange?.({
+                target: {
+                    value,
+                },
+            });
+        }, [props.onChange]);
+        return (React.createElement(Select, { onKeyDown: onDatePickerDropdownKeyDown, value: props.value, onChange: onChange, options: props.options }));
+    },
+    MonthsDropdown: (props) => {
+        const onChange = useCallback((value) => {
+            props.onChange?.({
+                target: {
+                    value,
+                },
+            });
+        }, [props.onChange]);
+        return (React.createElement(Select, { onKeyDown: onDatePickerDropdownKeyDown, value: `${props.value}`, onChange: onChange, options: props.options.map((option) => {
+                return {
+                    label: option.label,
+                    value: `${option.value}`,
+                };
+            }) }));
+    },
+};
+const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, overlayDOMRef, }) => {
     const domRef = React.useRef(null);
-    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
+    return (React.createElement("div", { className: "ab-Datepicker-Overlay", tabIndex: -1, ref: (el) => {
+            domRef.current = el;
+            overlayDOMRef.current = el;
+        }, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
             const { relatedTarget } = e;
             const node = domRef.current;
             // relatedTarget is the newly focused element as a result of this blur event
@@ -74,13 +110,14 @@ export const Datepicker = React.forwardRef((props, ref) => {
             clearValue();
         }, accessLevel: 'Full' })) : null;
     const calendarButton = (React.createElement(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
+    const overlayDOMRef = useRef(null);
     return (React.createElement(Flex, null,
-        React.createElement(OverlayTrigger, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
+        React.createElement(OverlayTrigger, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { overlayDOMRef: overlayDOMRef, onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         setVisible(false, e.key);
                     }
                 } },
-                React.createElement(DayPicker, { fixedWeeks: true, autoFocus: autoFocus ?? true, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: isNaN(+month) ? new Date() : month, selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, footer: React.createElement(Flex, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) }))) },
+                React.createElement(DayPicker, { fixedWeeks: true, autoFocus: autoFocus ?? true, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: isNaN(+month) ? new Date() : month, selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, components: DatePickerComponents, footer: React.createElement(Flex, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) }))) },
             React.createElement(FieldWrap, { ...boxProps, style: {
                     borderRadius: style?.borderRadius,
                     width: style?.width,
@@ -90,6 +127,14 @@ export const Datepicker = React.forwardRef((props, ref) => {
                     if (!visible) {
                         setVisible(true);
                     }
+                }, onBlur: (e) => {
+                    const { relatedTarget } = e;
+                    const overlayDOMNode = overlayDOMRef.current;
+                    if ((overlayDOMNode && relatedTarget == overlayDOMNode) ||
+                        overlayDOMNode?.contains(relatedTarget)) {
+                        return;
+                    }
+                    setVisible(false);
                 } },
                 React.createElement(AdaptableDateInlineInput, { ref: ref, value: inputValue, 
                     // We do not want to show the format when the date-picker is visible

package/src/components/Select/Select.d.ts

@@ -47,5 +47,6 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     size?: 'small' | 'normal';
     isCreatable?: boolean;
     menuPortalTarget?: HTMLElement;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
 };
 export declare const Select: <SelectValue extends unknown, IsMulti extends boolean = false>(props: SelectProps<SelectValue, IsMulti>) => React.JSX.Element;

package/src/components/Select/Select.js

@@ -365,7 +365,7 @@ export const Select = function (props) {
         setInputValue(value);
         props.onInputChange?.(value);
     }, [props.onInputChange, isMulti]);
-    return (React.createElement(SelectComponent, { ref: ref, "aria-label": props['aria-label'], inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: join(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', isSearchable: props.searchable, hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
+    return (React.createElement(SelectComponent, { ref: ref, "aria-label": props['aria-label'], onKeyDown: props.onKeyDown, inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: join(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', isSearchable: props.searchable, hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
         // This needed so the menu is not clipped by overflow: hidden
         menuPortalTarget: props.menuPortalTarget === undefined ? document.body : null, isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
             if (isMulti) {

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: 1747298992714 || Date.now(),
-    VERSION: "20.1.3" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1747747693470 || Date.now(),
+    VERSION: "20.1.4" || '--current-version--',
 };

package/src/metamodel/adaptable.metamodel.d.ts

@@ -443,6 +443,16 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
+    AdaptableFilterState: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     AdaptableFlashingCell: {
         name: string;
         kind: string;
@@ -879,16 +889,6 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
-    AdaptableSearchState: {
-        name: string;
-        kind: string;
-        desc: string;
-        props: {
-            name: string;
-            kind: string;
-            desc: string;
-        }[];
-    };
     AdaptableSettingsPanel: {
         name: string;
         kind: string;