@adaptabletools/adaptable 23.0.9 → 23.0.11

package/index.css

@@ -405,9 +405,6 @@
   .twa\:-mx-1 {
     margin-inline: calc(var(--ab-base-space) * -1);
   }
-  .twa\:mx-0\.5 {
-    margin-inline: calc(var(--ab-base-space) * 0.5);
-  }
   .twa\:mx-1 {
     margin-inline: var(--ab-base-space);
   }
@@ -711,8 +708,8 @@
   .twa\:max-h-\[min\(calc\(--spacing\(72\)---spacing\(9\)\)\,calc\(var\(--available-height\)---spacing\(9\)\)\)\] {
     max-height: min(calc(calc(var(--ab-base-space) * 72) - calc(var(--ab-base-space) * 9)), calc(var(--available-height) - calc(var(--ab-base-space) * 9)));
   }
-  .twa\:max-h-\[min\(var\(--available-height\)\,80vh\)\] {
-    max-height: min(var(--available-height), 80vh);
+  .twa\:max-h-\[min\(var\(--available-height\,80vh\)\,80vh\)\] {
+    max-height: min(var(--available-height,80vh), 80vh);
   }
   .twa\:max-h-full {
     max-height: 100%;
@@ -1023,6 +1020,9 @@
   .twa\:max-w-\[min\(var\(--available-width\)\,80vw\)\] {
     max-width: min(var(--available-width), 80vw);
   }
+  .twa\:max-w-\[min\(var\(--available-width\,80vw\)\,80vw\)\] {
+    max-width: min(var(--available-width,80vw), 80vw);
+  }
   .twa\:max-w-full {
     max-width: 100%;
   }
@@ -1379,9 +1379,6 @@
   .twa\:gap-y-3 {
     row-gap: calc(var(--ab-base-space) * 3);
   }
-  .twa\:self-center {
-    align-self: center;
-  }
   .twa\:self-end {
     align-self: flex-end;
   }
@@ -1825,6 +1822,9 @@
   .twa\:px-0 {
     padding-inline: 0;
   }
+  .twa\:px-0\.5 {
+    padding-inline: calc(var(--ab-base-space) * 0.5);
+  }
   .twa\:px-1 {
     padding-inline: var(--ab-base-space);
   }
@@ -2756,6 +2756,16 @@
       }
     }
   }
+  @media (hover: hover) {
+    .twa\:hover\:bg-current\/15:hover {
+      background-color: currentcolor;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .twa\:hover\:bg-current\/15:hover {
+        background-color: color-mix(in oklab, currentcolor 15%, transparent);
+      }
+    }
+  }
   @media (hover: hover) {
     .twa\:hover\:bg-destructive\/20:hover {
       background-color: var(--ab-color-destructive);
@@ -3630,6 +3640,9 @@
   :is(.twa\:\*\:\[\[role\=button\]\]\:absolute > *):is([role=button]) {
     position: absolute;
   }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:relative > *):is([role=button]) {
+    position: relative;
+  }
   :is(.twa\:\*\:\[\[role\=button\]\]\:inset-x-0\.5 > *):is([role=button]) {
     inset-inline: calc(var(--ab-base-space) * 0.5);
   }
@@ -3639,12 +3652,31 @@
   :is(.twa\:\*\:\[\[role\=button\]\]\:h-auto > *):is([role=button]) {
     height: auto;
   }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:h-full > *):is([role=button]) {
+    height: 100%;
+  }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:min-w-0 > *):is([role=button]) {
+    min-width: 0;
+  }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:flex-1 > *):is([role=button]) {
+    flex: 1;
+  }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:basis-0 > *):is([role=button]) {
+    flex-basis: 0;
+  }
   :is(.twa\:\*\:\[\[role\=button\]\]\:rounded-input > *):is([role=button]) {
     border-radius: var(--ab-border-radius-input);
   }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:border-none > *):is([role=button]) {
+    --tw-border-style: none;
+    border-style: none;
+  }
   :is(.twa\:\*\:\[input\]\:absolute > *):is(input) {
     position: absolute;
   }
+  :is(.twa\:\*\:\[input\]\:relative > *):is(input) {
+    position: relative;
+  }
   :is(.twa\:\*\:\[input\]\:inset-x-0\.5 > *):is(input) {
     inset-inline: calc(var(--ab-base-space) * 0.5);
   }
@@ -3654,9 +3686,25 @@
   :is(.twa\:\*\:\[input\]\:h-auto > *):is(input) {
     height: auto;
   }
+  :is(.twa\:\*\:\[input\]\:h-full > *):is(input) {
+    height: 100%;
+  }
+  :is(.twa\:\*\:\[input\]\:min-w-0 > *):is(input) {
+    min-width: 0;
+  }
+  :is(.twa\:\*\:\[input\]\:flex-1 > *):is(input) {
+    flex: 1;
+  }
+  :is(.twa\:\*\:\[input\]\:basis-0 > *):is(input) {
+    flex-basis: 0;
+  }
   :is(.twa\:\*\:\[input\]\:rounded-input > *):is(input) {
     border-radius: var(--ab-border-radius-input);
   }
+  :is(.twa\:\*\:\[input\]\:border-none > *):is(input) {
+    --tw-border-style: none;
+    border-style: none;
+  }
   :is(.twa\:\*\*\:\[input\]\:min-h-auto\! *):is(input) {
     min-height: auto !important;
   }

package/package.json

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

package/src/View/Components/AdaptableDateInput/index.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { AdaptableInputProps } from '../AdaptableInput';
 export type AdaptableDateInputProps = AdaptableInputProps & {
     showClearButton?: boolean;
+    showTriggerButton?: boolean;
 };
 declare const AdaptableDateInput: React.ForwardRefExoticComponent<Omit<AdaptableDateInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default AdaptableDateInput;

package/src/View/Components/AdaptableDateInput/index.js

@@ -6,7 +6,7 @@ import useProperty from '../../../components/utils/useProperty';
 import { dateToISO, parseDateValue } from '../../../Utilities/Helpers/DateHelper';
 const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props, ref) {
     const dateInputOptions = useAdaptable().adaptableOptions.userInterfaceOptions.dateInputOptions;
-    const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, ...inputProps } = props;
+    const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, showTriggerButton, ...inputProps } = props;
     const [value, setValue] = useProperty(props, 'value', undefined, {
         onChange: (dateString) => props.onChange?.({
             target: {
@@ -28,6 +28,7 @@ const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props
         showOutsideDays: dateInputOptions.showOutsideDays,
         datepickerButtons: dateInputOptions.datepickerButtons,
         showClearButton,
+        showTriggerButton: showTriggerButton ?? true,
         ...inputProps,
     };
     return _jsx(Datepicker, { ref: ref, ...datepickerProps });

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

@@ -44,18 +44,18 @@ export const FloatingFilter = (props) => {
     }));
     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: current operator is ${label}`, size: "small", stopMouseDownPropagation: true, disabled: props.disabled, open: selectOpen, extraWidthChars: 5, onOpenChange: (nextOpen) => {
-            if (nextOpen && !isInlineEditable) {
-                adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
-                return;
-            }
-            setSelectOpen(nextOpen);
-        }, value: currentOperator, placeholder: label, items: operatorOptions, showItemTooltip: true, renderValue: renderTriggerValue, onValueChange: (operator) => {
-            props.onPredicateChange({
-                operator: props.predicate.operator,
-                args: [{ operator: operator, args: [] }],
-            });
-        }, className: cn('twa:self-center twa:mx-0.5 twa:my-0.5 twa:text-left twa:p-0.5 twa:border-none', 'twa:shadow-none', !isInlineEditable && 'twa:min-w-0 twa:flex-1') }));
+    const filterDropdownSelect = (_jsx("div", { className: cn('twa:flex twa:box-border twa:self-stretch twa:min-h-0 twa:h-full twa:py-0.5 twa:px-0.5', !isInlineEditable && 'twa:min-w-0 twa:flex-1'), children: _jsx(SingleSelect, { chevronIcon: null, "data-name": "floating-filter-button", ariaLabel: `Column Filter Operator Dropdown: current operator is ${label}`, stopMouseDownPropagation: true, disabled: props.disabled, open: selectOpen, extraWidthChars: 5, onOpenChange: (nextOpen) => {
+                if (nextOpen && !isInlineEditable) {
+                    adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
+                    return;
+                }
+                setSelectOpen(nextOpen);
+            }, value: currentOperator, placeholder: label, items: operatorOptions, showItemTooltip: true, renderValue: renderTriggerValue, onValueChange: (operator) => {
+                props.onPredicateChange({
+                    operator: props.predicate.operator,
+                    args: [{ operator: operator, args: [] }],
+                });
+            }, className: cn('twa:h-full twa:w-full twa:min-h-0 twa:text-left twa:px-0.5 twa:py-0.5 twa:border-none', 'twa:shadow-none twa:cursor-pointer', 'twa:text-primary-foreground twa:hover:bg-current/15') }) }));
     if (isInlineEditable) {
         filterDropdown = showQuickFilterDropdown && filterDropdownSelect;
     }
@@ -91,7 +91,7 @@ export const FloatingFilter = (props) => {
                     refreshed[Math.min(nextIndex, refreshed.length - 1)]?.focus();
                 }
             });
-        }, children: [filterDropdown, isInlineEditable && (_jsx(Flex, { className: "twa:flex-1 twa:min-w-0", children: _jsx(FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
+        }, children: [filterDropdown, isInlineEditable && (_jsx(Flex, { className: "twa:flex-1 twa:min-w-0 twa:min-h-0 twa:h-full", children: _jsx(FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
                         props.onPredicateChange({
                             operator: props.predicate.operator,
                             args: [predicate],

package/src/View/Components/ColumnFilter/components/ColumnFilterInput.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { AdaptableInputProps } from '../../AdaptableInput';
+import { AdaptableDateInputProps } from '../../AdaptableDateInput';
 type ColumnFilterEditorChangeProps = {
     type: 'text';
     value: string;
@@ -23,5 +25,6 @@ export declare const ColumnFilterInput: (props: {
     filterType?: "floating" | "default";
     usePrimitiveInputs?: boolean;
     columnId: string;
+    inputProps?: AdaptableInputProps | AdaptableDateInputProps;
 } & ColumnFilterEditorChangeProps) => React.JSX.Element;
 export {};

package/src/View/Components/ColumnFilter/components/ColumnFilterInput.js

@@ -7,11 +7,12 @@ import { PermittedValuesSelector } from '../../Selectors/PermittedValuesSelector
 import { useAdaptable } from '../../../AdaptableContext';
 import { debounce } from '../../../../Utilities/Helpers/TimingHelper';
 import { useCallback } from 'react';
+import { cn } from '../../../../lib/utils';
 function debounceOrImmediate(fn, time) {
     return time && time > 0 ? debounce(fn, time) : fn;
 }
 export const ColumnFilterInput = (props) => {
-    const { type, value, onChange: onChangeProp, onClear: onClearProp, disabled, onKeyDown, filterType, usePrimitiveInputs = true, columnId, } = props;
+    const { type, value, onChange: onChangeProp, onClear: onClearProp, disabled, onKeyDown, filterType, usePrimitiveInputs = true, columnId, inputProps, } = props;
     const [liveValue, setLiveValue] = React.useState(value);
     const [hasFocus, setHasFocus] = React.useState(false);
     const onFocus = useCallback(() => {
@@ -63,7 +64,7 @@ export const ColumnFilterInput = (props) => {
         }
     };
     if (type === 'date' && !showDatePicker) {
-        return (_jsx(AdaptableDateInlineInput, { "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: "twa:border-none twa:pr-0", onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
+        return (_jsx(AdaptableDateInlineInput, { ...inputProps, "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: "twa:border-none twa:pr-0", onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
                 onChange(value);
                 setLiveValue(value);
             } }));
@@ -80,13 +81,13 @@ export const ColumnFilterInput = (props) => {
                 }
             } }));
     }
-    return (_jsx(AdaptableInput, { style: filterType === 'floating'
+    return (_jsx(AdaptableInput, { ...inputProps, style: filterType === 'floating'
             ? {
-                width: 'auto',
+                width: '100%',
                 padding: 'var(--ab-base-space)',
                 border: 'none',
             }
-            : {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: 'twa:flex-1', onChange: (e) => {
+            : {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: cn(filterType === 'floating' ? 'twa:w-full twa:min-w-0 twa:h-full' : 'twa:flex-1', inputProps?.className), onChange: (e) => {
             const prevValue = `${liveValue}`;
             const value = e.target.value;
             if (value) {

package/src/View/Components/ColumnFilter/components/FloatingFilterInputList.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { debounce } from '../../../../Utilities/Helpers/TimingHelper';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
@@ -31,31 +31,43 @@ export const FloatingFilterInputList = (props) => {
                 });
             }, value: props.predicate.args, type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }));
     }
+    const hasMultipleInputs = matchingInputs.length > 1;
     return (_jsx("div", { className: cn('twa:relative twa:w-full twa:flex twa:flex-row twa:[&>*:not(:first-child)]:border-l! twa:[&>*:not(:first-child)]:border-input-border!', {
             'twa:**:[input]:min-h-auto!': 'make all inputs inside not have a height fixed',
             'twa:*:[[role=button]]:rounded-input': true,
-            'twa:*:[[role=button]]:absolute': 'make date picker absolute filter',
-            'twa:*:[[role=button]]:inset-y-0.5 twa:*:[[role=button]]:inset-x-0.5 twa:*:[[role=button]]:h-auto': 'make date picker - and give it some padding, so the focus is not cut off absolute outline filter',
+            'twa:*:[[role=button]]:absolute': !hasMultipleInputs && 'make date picker absolute filter',
+            'twa:*:[[role=button]]:inset-y-0.5 twa:*:[[role=button]]:inset-x-0.5 twa:*:[[role=button]]:h-auto': !hasMultipleInputs &&
+                'make date picker - and give it some padding, so the focus is not cut off absolute outline filter',
             'twa:*:[input]:rounded-input': true,
-            'twa:*:[input]:absolute': 'make inputs absolute filter',
-            'twa:*:[input]:inset-y-0.5 twa:*:[input]:inset-x-0.5 twa:*:[input]:h-auto': 'make inputs - and give it some padding, so the focus is not cut off absolute outline filter',
+            'twa:*:[input]:absolute': !hasMultipleInputs && 'make inputs absolute filter',
+            'twa:*:[input]:inset-y-0.5 twa:*:[input]:inset-x-0.5 twa:*:[input]:h-auto': !hasMultipleInputs &&
+                'make inputs - and give it some padding, so the focus is not cut off absolute outline filter',
+            'twa:min-h-0 twa:h-full twa:p-0.5': hasMultipleInputs,
+            'twa:*:[input]:relative twa:*:[[role=button]]:relative': hasMultipleInputs,
+            'twa:*:[input]:min-w-0 twa:*:[[role=button]]:min-w-0': hasMultipleInputs,
+            'twa:*:[input]:flex-1 twa:*:[[role=button]]:flex-1': hasMultipleInputs,
+            'twa:*:[input]:basis-0 twa:*:[[role=button]]:basis-0': hasMultipleInputs,
+            'twa:*:[input]:h-full twa:*:[[role=button]]:h-full': hasMultipleInputs,
+            'twa:*:[input]:border-none twa:*:[[role=button]]:border-none': hasMultipleInputs,
         }), children: (matchingInputs ?? []).map((input, index) => {
             const value = props?.predicate?.args?.[index];
-            return (_jsx(ColumnFilterInput, { filterType: "floating", columnId: props.columnId, usePrimitiveInputs: true, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
-                    const args = [...props.predicate.args];
-                    args.splice(index, 1);
-                    const newPredicate = {
-                        operator: props.predicate.operator,
-                        args: args,
-                    };
-                    debouncedPredicateChange(newPredicate);
-                }, onChange: (value) => {
-                    const newPredicate = {
-                        operator: props.predicate.operator,
-                        args: [...props.predicate.args],
-                    };
-                    newPredicate.args[index] = value;
-                    debouncedPredicateChange(newPredicate);
-                } }, index));
+            return (_jsxs(_Fragment, { children: [index > 0 && _jsx("div", { className: "twa:border-l twa:border-input-border" }), _jsx(ColumnFilterInput, { inputProps: {
+                            showTriggerButton: hasMultipleInputs ? false : undefined,
+                        }, filterType: "floating", columnId: props.columnId, usePrimitiveInputs: true, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
+                            const args = [...props.predicate.args];
+                            args.splice(index, 1);
+                            const newPredicate = {
+                                operator: props.predicate.operator,
+                                args: args,
+                            };
+                            debouncedPredicateChange(newPredicate);
+                        }, onChange: (value) => {
+                            const newPredicate = {
+                                operator: props.predicate.operator,
+                                args: [...props.predicate.args],
+                            };
+                            newPredicate.args[index] = value;
+                            debouncedPredicateChange(newPredicate);
+                        } }, index)] }));
         }) }));
 };

package/src/components/Combobox/index.js

@@ -164,7 +164,11 @@ const useGetAllItems = (props) => {
         onInputValueChange,
         onValueChange,
         allItems,
-        maxLabelLength: allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string' ? item.label.length : 0), 0),
+        maxLabelLength: allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string'
+            ? item.label.length
+            : typeof item.textLabel === 'string'
+                ? item.textLabel.length
+                : 0), 0),
     };
 };
 function useCreatable(props, allItems, itemByValue) {

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

@@ -9,6 +9,7 @@ export type DatepickerProps = Omit<InputProps, 'value' | 'onChange' | 'defaultVa
     onChange: (value: Date | undefined) => void;
     onHide?: VoidFunction;
     showClearButton?: boolean;
+    showTriggerButton?: boolean;
     datepickerButtons?: DatepickerButton[];
     dateProps: {
         format: string;

package/src/components/Datepicker/index.js

@@ -38,7 +38,7 @@ const captionComponents = {
 const END_MONTH = endOfYear(addYears(new Date(), 10));
 const START_MONTH = startOfYear(addYears(new Date(), -50));
 export const Datepicker = React.forwardRef((props, ref) => {
-    const { dateProps, disabled, style, className, placeholder, showWeekNumber, showOutsideDays, datepickerButtons, showClearButton, autoFocus, onHide, value: _value, defaultValue: _defaultValue, onChange: _onChange, } = props;
+    const { dateProps, disabled, style, className, placeholder, showWeekNumber, showOutsideDays, datepickerButtons, showClearButton, autoFocus, showTriggerButton = true, onHide, value: _value, defaultValue: _defaultValue, onChange: _onChange, } = props;
     void _value;
     void _defaultValue;
     void _onChange;
@@ -172,7 +172,7 @@ export const Datepicker = React.forwardRef((props, ref) => {
             clearValue();
             triggerRef.current?.firstChild?.focus();
         }, accessLevel: ACCESS_LEVEL_FULL })) : null;
-    const calendarButton = (_jsx(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", type: "button" }));
+    const calendarButton = showTriggerButton !== false ? (_jsx(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", type: "button" })) : null;
     const [selectPortalRoot, setSelectPortalRoot] = React.useState(null);
     const popupRefCallback = React.useCallback((el) => {
         popupRef.current = el;

package/src/components/WindowModal/WindowModal.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+export declare const WINDOW_MODAL_VIEWPORT_EDGE_OFFSET = 10;
 export type WindowModalSize = {
     width: number;
     height: number;
@@ -7,6 +8,11 @@ export type WindowModalPosition = {
     x: number;
     y: number;
 };
+export declare const clampWindowModalToViewport: (position: WindowModalPosition, size: WindowModalSize, minWidth?: number, minHeight?: number, edgeOffset?: number) => {
+    position: WindowModalPosition;
+    size: WindowModalSize;
+};
+export declare const clampWindowModalPositionToViewport: (position: WindowModalPosition, size: WindowModalSize, edgeOffset?: number) => WindowModalPosition;
 export interface WindowModalProps {
     handleSelector: string;
     size: WindowModalSize;