@adaptabletools/adaptable 23.0.10 → 23.0.12

package/package.json

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

package/src/View/Components/AdaptableInput/AdaptableDateInlineInput.js

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import Input from '../../../components/Input';
 import { useAdaptable } from '../../AdaptableContext';
 import { getDefaultAdaptableOptions } from '../../../AdaptableOptions/DefaultAdaptableOptions';
-export const AdaptableDateInlineInput = React.forwardRef((props, ref) => {
+export const AdaptableDateInlineInput = React.forwardRef(function AdaptableDateInlineInputCmp(props, ref) {
     const [hasFocus, setHasFocus] = useState(false);
     const adaptable = useAdaptable();
     const dateInputOptions = adaptable?.adaptableOptions.userInterfaceOptions.dateInputOptions ??

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

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

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

@@ -5,9 +5,9 @@ import { useAdaptable } from '../../AdaptableContext';
 import AdaptableDateInput from '../AdaptableDateInput';
 const AdaptableInput = React.forwardRef((props, ref) => {
     const useNativeInputDate = useAdaptable().adaptableOptions.userInterfaceOptions?.dateInputOptions?.useNativeInput;
-    const { showClearButton, ...inputProps } = props;
+    const { showClearButton, showTriggerButton, ...inputProps } = props;
     if (props.type === 'date' && !useNativeInputDate) {
-        return (_jsx(AdaptableDateInput, { showClearButton: showClearButton, ...inputProps, ref: ref }));
+        return (_jsx(AdaptableDateInput, { showClearButton: showClearButton, showTriggerButton: showTriggerButton, ...inputProps, ref: ref }));
     }
     else {
         return _jsx(Input, { ...inputProps, ref: ref });

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

@@ -32,7 +32,7 @@ const ColumnFilterPredicateDropdown = (props) => {
             }, items: options, placeholder: "Add Condition", value: isAndOr ? null : props.predicate?.operator }) }));
 };
 const ColumnFilterEditor = (props) => {
-    return (_jsxs(Box, { className: "twa:mb-3 twa:overflow-x-hidden twa:p-0.5", children: [_jsxs(Flex, { className: "twa:mb-2", children: [_jsx(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, predicateDefs: props.predicateDefs, onPredicateChange: props.onPredicateChange }), _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(SimpleButton, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }) })] }), _jsx(ColumnFilterInputList, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, onPredicateChange: props.onPredicateChange, predicateDefs: props.predicateDefs })] }));
+    return (_jsxs(Box, { className: "twa:mb-3 twa:overflow-x-hidden twa:p-0.5 twa:gap-1 twa:flex twa:flex-col", children: [_jsxs(Flex, { className: "twa:mb-1", children: [_jsx(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, predicateDefs: props.predicateDefs, onPredicateChange: props.onPredicateChange }), _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(SimpleButton, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }) })] }), _jsx(ColumnFilterInputList, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, onPredicateChange: props.onPredicateChange, predicateDefs: props.predicateDefs })] }));
 };
 const AndOrInput = (props) => {
     return (_jsxs(Flex, { className: "twa:flex-1", children: [_jsx(Radio, { className: "twa:mr-2", onClick: () => props.onChange('AND'), checked: props.operator === 'AND', children: "AND" }), _jsx(Radio, { className: "twa:mr-2", onClick: () => props.onChange('OR'), checked: props.operator === 'OR', children: "OR" })] }));

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

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

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, 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';
@@ -51,7 +51,7 @@ export const FloatingFilterInputList = (props) => {
             'twa:*:[input]:border-none twa:*:[[role=button]]:border-none': hasMultipleInputs,
         }), children: (matchingInputs ?? []).map((input, index) => {
             const value = props?.predicate?.args?.[index];
-            return (_jsxs(_Fragment, { children: [index > 0 && _jsx("div", { className: "twa:border-l twa:border-input-border" }), _jsx(ColumnFilterInput, { inputProps: {
+            return (_jsxs(React.Fragment, { children: [index > 0 && (_jsx("div", { className: "twa:border-l twa:border-input-border" }, `${props.columnId}-${index}-divider`)), _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];
@@ -68,6 +68,6 @@ export const FloatingFilterInputList = (props) => {
                             };
                             newPredicate.args[index] = value;
                             debouncedPredicateChange(newPredicate);
-                        } }, index)] }));
+                        } }, `${props.columnId}-${index}`)] }, `${props.columnId}-${index}`));
         }) }));
 };

package/src/components/Combobox/VirtualizedList.js

@@ -42,7 +42,13 @@ export function VirtualizedList({ open, virtualizerRef, showItemTooltip, renderC
                         ? `Create "${itemText}"`
                         : itemText
                     : undefined;
-                const label = isUncreatedCreatable ? `Create "${item.label}"` : item.label;
+                let label = isUncreatedCreatable ? `Create "${item.label}"` : item.label;
+                if (label && typeof label === 'object') {
+                    if (Object.prototype.hasOwnProperty.call(label, 'toString') &&
+                        typeof label.toString === 'function') {
+                        label = label.toString();
+                    }
+                }
                 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);
                 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: {

package/src/components/Combobox/comboboxUtils.d.ts

@@ -49,6 +49,14 @@ export type ComboboxCommonProps<T extends ComboboxItemType> = {
     showClear?: boolean;
     clearOnEscape?: boolean;
     searchable?: boolean | 'inline' | 'menulist';
+    /**
+     * Only applies when `searchable === 'menulist'` and the search input is
+     * uncontrolled (no `inputValue` prop): when true, the text typed in the
+     * in-popup search input survives closing the popup, so reopening it shows
+     * the list filtered by the previous query. Defaults to false — the filter
+     * is cleared on close and every open starts from the full list.
+     */
+    persistFilterOnReopen?: boolean;
     /**
      * Custom filter function, or `null` to disable built-in filtering
      * (e.g. when options are already filtered server-side).

package/src/components/Combobox/index.js

@@ -10,9 +10,9 @@ import { VirtualizedList } from './VirtualizedList';
 import { CheckBox } from '../CheckBox';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 const getContentStyle = ({ maxLabelLength }) => {
-    const labelWidth = `${maxLabelLength + 3}ch`;
+    const labelWidth = `${maxLabelLength + 6}ch`;
     return {
-        width: labelWidth,
+        width: `max(${labelWidth}, calc(var(--ab-base-space) * 25), var(--anchor-width))`,
         minWidth: `min(var(--anchor-width), var(--available-width), 80vw)`,
     };
 };
@@ -104,7 +104,9 @@ const AdaptableCombobox_Root = (props) => {
             eventDetails.cancel?.();
             return;
         }
-        if (props.searchable === 'menulist' && eventDetails?.reason === 'input-clear' && props.open) {
+        if (props.searchable === 'menulist' &&
+            eventDetails?.reason === 'input-clear' &&
+            (props.open || props.persistFilterOnReopen)) {
             eventDetails.cancel?.();
             return;
         }
@@ -164,10 +166,10 @@ const useGetAllItems = (props) => {
         onInputValueChange,
         onValueChange,
         allItems,
-        maxLabelLength: allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string'
-            ? item.label.length
-            : typeof item.textLabel === 'string'
-                ? item.textLabel.length
+        maxLabelLength: allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string' || typeof item.label === 'number'
+            ? String(item.label).length
+            : typeof item.textLabel === 'string' || typeof item.textLabel === 'number'
+                ? String(item.textLabel).length
                 : 0), 0),
     };
 };

package/src/components/Datepicker/index.js

@@ -188,6 +188,11 @@ export const Datepicker = React.forwardRef((props, ref) => {
                                 if (isValid(date)) {
                                     updateValue(date);
                                 }
+                            }, onKeyDown: (e) => {
+                                if (e.key === 'Enter' && !open && !disabled) {
+                                    e.preventDefault();
+                                    setPopoverOpen(true);
+                                }
                             }, className: "twa:h-auto twa:min-w-0 twa:outline-none twa:min-h-auto twa:py-0 twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:dark:bg-transparent", style: style, disabled: disabled }), _jsxs(InputGroupAddon, { align: "inline-end", children: [inputValue ? clearButton : null, calendarButton] })] }) }), _jsx(PopoverContent, { className: "twa:w-auto twa:p-0", align: "start", sideOffset: 8, children: _jsx("div", { ref: popupRefCallback, tabIndex: -1, role: "region", "aria-label": "Calendar", className: cn('twa:relative twa:isolate twa:overflow-visible twa:outline-none twa:rounded-standard', targetOwn.focusWithinOutline), onKeyDown: () => {
                     }, children: _jsx(DatepickerSelectPortalContext.Provider, { value: selectPortalRoot, children: _jsx(Calendar, { fixedWeeks: true, autoFocus: !!autoFocus, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: month && !isNaN(month.getTime()) ? month : new Date(), selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, locale: dateProps.locale, components: captionComponents, footer: _jsx(Flex, { justifyContent: "space-between", className: "twa:mt-2", flexWrap: 'wrap', children: footerButtons }) }) }) }) })] }));
 });

package/src/components/NewSelect/index.js

@@ -30,10 +30,10 @@ const NewSelect = (props) => {
         ];
         allItems = props.items;
     }
-    const maxLabelLength = allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string'
-        ? item.label.length
-        : typeof item.tooltip === 'string'
-            ? item.tooltip.length
+    const maxLabelLength = allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string' || typeof item.label === 'number'
+        ? String(item.label).length
+        : typeof item.tooltip === 'string' || typeof item.tooltip === 'number'
+            ? String(item.tooltip).length
             : 0), 0);
     const contentStyle = {
         width: `max(${maxLabelLength + (props.extraWidthChars ?? 3)}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,

package/src/components/Tree/TreeDropdown/index.js

@@ -362,6 +362,7 @@ export function TreeDropdown(props) {
             return defaultLabel;
         },
         filter,
+        inputValue: searchQuery,
         onInputValueChange: handleSearchInputChange,
         onOpenChange: (open) => {
             if (!open) {

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;

package/src/components/WindowModal/WindowModal.js

@@ -5,6 +5,7 @@ import useDraggable from '../utils/useDraggable';
 import { isBrowserDocumentAvailable } from '../../View/UIHelper';
 import { createPortal } from 'react-dom';
 import { useStacking } from './useStacking';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
 let portalElement;
 const ensurePortalElement = () => {
     if (!isBrowserDocumentAvailable()) {
@@ -17,7 +18,55 @@ const ensurePortalElement = () => {
     portalElement.classList.add('ab-cmp-modal-window');
     document.body.appendChild(portalElement);
 };
-const normalizeTopLeft = (position) => (position < 0 ? 0 : position);
+const normalizeTopLeft = (position, edgeOffset) => position < edgeOffset ? edgeOffset : position;
+export const WINDOW_MODAL_VIEWPORT_EDGE_OFFSET = 10;
+const getViewportSize = () => {
+    if (!isBrowserDocumentAvailable()) {
+        return { width: Infinity, height: Infinity };
+    }
+    return { width: window.innerWidth, height: window.innerHeight };
+};
+const parsePxConstraint = (value) => {
+    if (!value) {
+        return undefined;
+    }
+    const match = /^(-?\d+(?:\.\d+)?)px$/.exec(value.trim());
+    if (!match) {
+        return undefined;
+    }
+    const parsed = Number(match[1]);
+    return Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined;
+};
+const readDomSizeConstraints = (element) => {
+    if (!element || !isBrowserDocumentAvailable()) {
+        return {};
+    }
+    const computed = window.getComputedStyle(element);
+    return {
+        minWidth: parsePxConstraint(computed.minWidth),
+        minHeight: parsePxConstraint(computed.minHeight),
+        maxWidth: parsePxConstraint(computed.maxWidth),
+        maxHeight: parsePxConstraint(computed.maxHeight),
+    };
+};
+export const clampWindowModalToViewport = (position, size, minWidth = 0, minHeight = 0, edgeOffset = WINDOW_MODAL_VIEWPORT_EDGE_OFFSET) => {
+    const { width: viewportWidth, height: viewportHeight } = getViewportSize();
+    const width = clamp(size.width, minWidth, Math.max(minWidth, viewportWidth - 2 * edgeOffset));
+    const height = clamp(size.height, minHeight, Math.max(minHeight, viewportHeight - 2 * edgeOffset));
+    const x = clamp(position.x, edgeOffset, Math.max(edgeOffset, viewportWidth - edgeOffset - width));
+    const y = clamp(position.y, edgeOffset, Math.max(edgeOffset, viewportHeight - edgeOffset - height));
+    return {
+        position: { x, y },
+        size: { width, height },
+    };
+};
+export const clampWindowModalPositionToViewport = (position, size, edgeOffset = WINDOW_MODAL_VIEWPORT_EDGE_OFFSET) => {
+    const { width: viewportWidth, height: viewportHeight } = getViewportSize();
+    return {
+        x: clamp(position.x, edgeOffset, Math.max(edgeOffset, viewportWidth - edgeOffset - size.width)),
+        y: clamp(position.y, edgeOffset, Math.max(edgeOffset, viewportHeight - edgeOffset - size.height)),
+    };
+};
 const getResizePositionDelta = (direction, delta) => {
     const positionDelta = { x: 0, y: 0 };
     const left = -delta.width;
@@ -38,16 +87,126 @@ const getResizePositionDelta = (direction, delta) => {
     }
     return null;
 };
+const resizeDirectionAffects = (direction) => ({
+    left: ['left', 'topLeft', 'bottomLeft'].includes(direction),
+    top: ['top', 'topLeft', 'topRight'].includes(direction),
+    right: ['right', 'topRight', 'bottomRight'].includes(direction),
+    bottom: ['bottom', 'bottomLeft', 'bottomRight'].includes(direction),
+});
+const getClampedResizeState = (direction, delta, basePosition, baseSize, minWidth, minHeight, maxWidth, maxHeight, edgeOffset = WINDOW_MODAL_VIEWPORT_EDGE_OFFSET) => {
+    const { width: viewportWidth, height: viewportHeight } = getViewportSize();
+    const affects = resizeDirectionAffects(direction);
+    let deltaWidth = delta.width;
+    let deltaHeight = delta.height;
+    if (affects.left) {
+        deltaWidth = Math.min(deltaWidth, Math.max(0, basePosition.x - edgeOffset));
+    }
+    if (affects.top) {
+        deltaHeight = Math.min(deltaHeight, Math.max(0, basePosition.y - edgeOffset));
+    }
+    if (affects.right) {
+        deltaWidth = Math.min(deltaWidth, viewportWidth - edgeOffset - basePosition.x - baseSize.width);
+    }
+    if (affects.bottom) {
+        deltaHeight = Math.min(deltaHeight, viewportHeight - edgeOffset - basePosition.y - baseSize.height);
+    }
+    if (affects.left || affects.right) {
+        const maxDeltaWidth = maxWidth != null ? maxWidth - baseSize.width : Infinity;
+        const minDeltaWidth = minWidth - baseSize.width;
+        if (minDeltaWidth <= maxDeltaWidth) {
+            deltaWidth = clamp(deltaWidth, minDeltaWidth, maxDeltaWidth);
+        }
+    }
+    if (affects.top || affects.bottom) {
+        const maxDeltaHeight = maxHeight != null ? maxHeight - baseSize.height : Infinity;
+        const minDeltaHeight = minHeight - baseSize.height;
+        if (minDeltaHeight <= maxDeltaHeight) {
+            deltaHeight = clamp(deltaHeight, minDeltaHeight, maxDeltaHeight);
+        }
+    }
+    const adjustedDelta = { width: deltaWidth, height: deltaHeight };
+    const positionDelta = getResizePositionDelta(direction, adjustedDelta);
+    const newPosition = {
+        x: basePosition.x + (positionDelta?.x ?? 0),
+        y: basePosition.y + (positionDelta?.y ?? 0),
+    };
+    const newSize = {
+        width: baseSize.width + deltaWidth,
+        height: baseSize.height + deltaHeight,
+    };
+    const clamped = clampWindowModalToViewport(newPosition, newSize, minWidth, minHeight, edgeOffset);
+    return {
+        ...clamped,
+        positionDelta: positionDelta
+            ? {
+                x: clamped.position.x - basePosition.x,
+                y: clamped.position.y - basePosition.y,
+            }
+            : null,
+    };
+};
+const RESIZE_HANDLE_CLASS_PREFIX = 'ab-WindowModal__resize-handle';
+const RESIZE_EDGE_HANDLES = ['left', 'right', 'top', 'bottom'];
+const RESIZE_HANDLE_CLASSES = {
+    left: `${RESIZE_HANDLE_CLASS_PREFIX}--left`,
+    right: `${RESIZE_HANDLE_CLASS_PREFIX}--right`,
+    top: `${RESIZE_HANDLE_CLASS_PREFIX}--top`,
+    bottom: `${RESIZE_HANDLE_CLASS_PREFIX}--bottom`,
+};
+const AT_CONSTRAINT_EPSILON = 0.5;
+const GROW_CURSOR = {
+    left: 'w-resize',
+    right: 'e-resize',
+    top: 'n-resize',
+    bottom: 's-resize',
+};
+const SHRINK_CURSOR = {
+    left: 'e-resize',
+    right: 'w-resize',
+    top: 's-resize',
+    bottom: 'n-resize',
+};
+const getEdgeResizeCursor = (edge, size, constraints) => {
+    const isHorizontal = edge === 'left' || edge === 'right';
+    const value = isHorizontal ? size.width : size.height;
+    const min = isHorizontal ? constraints.minWidth : constraints.minHeight;
+    const max = isHorizontal ? constraints.maxWidth : constraints.maxHeight;
+    const atMax = max != null && value >= max - AT_CONSTRAINT_EPSILON;
+    const atMin = value <= min + AT_CONSTRAINT_EPSILON;
+    if (atMax && !atMin) {
+        return SHRINK_CURSOR[edge];
+    }
+    if (atMin && !atMax) {
+        return GROW_CURSOR[edge];
+    }
+    return isHorizontal ? 'ew-resize' : 'ns-resize';
+};
+const updateResizeHandleCursors = (container, size, constraints) => {
+    if (!container) {
+        return;
+    }
+    RESIZE_EDGE_HANDLES.forEach((edge) => {
+        const handle = container.querySelector(`.${RESIZE_HANDLE_CLASSES[edge]}`);
+        if (handle) {
+            handle.style.cursor = getEdgeResizeCursor(edge, size, constraints);
+        }
+    });
+};
 export const WindowModal = (props) => {
     ensurePortalElement();
     const positionDeltaRef = React.useRef(null);
+    const lastClampedRef = React.useRef(null);
     const normalizedPosition = {
-        x: normalizeTopLeft(props.position?.x),
-        y: normalizeTopLeft(props.position?.y),
+        x: normalizeTopLeft(props.position?.x ?? 0, WINDOW_MODAL_VIEWPORT_EDGE_OFFSET),
+        y: normalizeTopLeft(props.position?.y ?? 0, WINDOW_MODAL_VIEWPORT_EDGE_OFFSET),
     };
     const positionRef = React.useRef(normalizedPosition);
+    const sizeRef = React.useRef(props.size);
     const stacking = useStacking();
     positionRef.current = normalizedPosition;
+    sizeRef.current = props.size;
+    const minWidth = props.minWidth ?? 0;
+    const minHeight = props.minHeight ?? 0;
     const style = {
         zIndex: stacking.zIndex,
         position: 'absolute',
@@ -59,41 +218,83 @@ export const WindowModal = (props) => {
             x: positionRef.current.x + dx,
             y: positionRef.current.y + dy,
         };
-        props.onChange({
-            position: newPosition,
-            size: props.size,
-        });
+        const size = sizeRef.current;
+        const position = clampWindowModalPositionToViewport(newPosition, size, WINDOW_MODAL_VIEWPORT_EDGE_OFFSET);
+        props.onChange({ position, size });
     };
     const { targetRef, applyTransform } = useDraggable({
         handleSelector: props.handleSelector,
         onDrop: handleDrop,
+        edgeOffset: WINDOW_MODAL_VIEWPORT_EDGE_OFFSET,
     });
-    const handleResizeStop = (event, direction, elementRef, delta) => {
-        let newPosition = normalizedPosition;
-        if (positionDeltaRef.current) {
-            newPosition = {
-                x: normalizedPosition.x + positionDeltaRef.current.x,
-                y: normalizedPosition.y + positionDeltaRef.current.y,
-            };
-            positionDeltaRef.current = null;
-            applyTransform(0, 0);
-        }
-        const newSize = {
-            width: props.size.width + delta.width,
-            height: props.size.height + delta.height,
+    const constraintsRef = React.useRef({ minWidth, minHeight });
+    const getContentElement = () => {
+        const resizableEl = targetRef.current?.firstElementChild;
+        return resizableEl?.firstElementChild ?? null;
+    };
+    const computeEffectiveConstraints = () => {
+        const dom = readDomSizeConstraints(getContentElement());
+        return {
+            minWidth: Math.max(minWidth, dom.minWidth ?? 0),
+            minHeight: Math.max(minHeight, dom.minHeight ?? 0),
+            maxWidth: dom.maxWidth,
+            maxHeight: dom.maxHeight,
         };
-        props.onChange({
-            position: newPosition,
-            size: newSize,
-        });
     };
-    const handleResize = React.useCallback((event, direction, elementRef, delta) => {
-        const positionDelta = getResizePositionDelta(direction, delta);
-        if (positionDelta) {
-            positionDeltaRef.current = positionDelta;
-            applyTransform(positionDelta.x, positionDelta.y);
+    const handleResizeStart = () => {
+        constraintsRef.current = computeEffectiveConstraints();
+        updateResizeHandleCursors(targetRef.current, sizeRef.current, constraintsRef.current);
+    };
+    const handleResize = (_event, direction, elementRef, delta) => {
+        const constraints = constraintsRef.current;
+        const clamped = getClampedResizeState(direction, delta, positionRef.current, sizeRef.current, constraints.minWidth, constraints.minHeight, constraints.maxWidth, constraints.maxHeight);
+        lastClampedRef.current = clamped;
+        if (clamped.positionDelta) {
+            positionDeltaRef.current = clamped.positionDelta;
+            applyTransform(clamped.positionDelta.x, clamped.positionDelta.y);
+        }
+        elementRef.style.width = `${clamped.size.width}px`;
+        elementRef.style.height = `${clamped.size.height}px`;
+        updateResizeHandleCursors(targetRef.current, clamped.size, constraints);
+        if (isBrowserDocumentAvailable() &&
+            RESIZE_EDGE_HANDLES.includes(direction)) {
+            document.body.style.cursor = getEdgeResizeCursor(direction, clamped.size, constraints);
         }
-    }, []);
+    };
+    React.useEffect(() => {
+        updateResizeHandleCursors(targetRef.current, sizeRef.current, computeEffectiveConstraints());
+    }, [props.size.width, props.size.height, minWidth, minHeight]);
+    const handleResizeStop = () => {
+        applyTransform(0, 0);
+        positionDeltaRef.current = null;
+        if (isBrowserDocumentAvailable()) {
+            document.body.style.cursor = '';
+        }
+        const clamped = lastClampedRef.current ??
+            clampWindowModalToViewport(positionRef.current, sizeRef.current, minWidth, minHeight, WINDOW_MODAL_VIEWPORT_EDGE_OFFSET);
+        lastClampedRef.current = null;
+        props.onChange(clamped);
+    };
+    const onChangeRef = React.useRef(props.onChange);
+    onChangeRef.current = props.onChange;
+    React.useEffect(() => {
+        if (!isBrowserDocumentAvailable()) {
+            return;
+        }
+        const handleViewportResize = () => {
+            const current = positionRef.current;
+            const currentSize = sizeRef.current;
+            const clamped = clampWindowModalToViewport(current, currentSize, minWidth, minHeight, WINDOW_MODAL_VIEWPORT_EDGE_OFFSET);
+            if (clamped.position.x !== current.x ||
+                clamped.position.y !== current.y ||
+                clamped.size.width !== currentSize.width ||
+                clamped.size.height !== currentSize.height) {
+                onChangeRef.current(clamped);
+            }
+        };
+        window.addEventListener('resize', handleViewportResize);
+        return () => window.removeEventListener('resize', handleViewportResize);
+    }, [minWidth, minHeight]);
     const ResizableCmp = Resizable;
     const handleMouseDown = (event) => {
         const node = targetRef.current;
@@ -102,7 +303,7 @@ export const WindowModal = (props) => {
         }
         stacking.bringInFront();
     };
-    return createPortal(_jsx("div", { style: style, ref: targetRef, onMouseDown: handleMouseDown, children: _jsx(ResizableCmp, { minWidth: props.minWidth, minHeight: props.minHeight, onResizeStop: handleResizeStop, onResize: handleResize, bounds: "window", defaultSize: {
+    return createPortal(_jsx("div", { style: style, ref: targetRef, onMouseDown: handleMouseDown, children: _jsx(ResizableCmp, { minWidth: minWidth, minHeight: minHeight, onResizeStart: handleResizeStart, onResizeStop: handleResizeStop, onResize: handleResize, handleClasses: RESIZE_HANDLE_CLASSES, size: {
                 width: props.size.width,
                 height: props.size.height,
             }, children: props.children }) }), portalElement);

package/src/components/ui/combobox.js

@@ -26,28 +26,58 @@ const ComboboxInput = React.forwardRef(function ComboboxInput({ className, child
     return (_jsxs(InputGroup, { ref: groupRef, className: cn('twa:w-auto', className), "aria-label": ariaLabel, children: [_jsx(ComboboxPrimitive.Input, { ref: ref, render: _jsx(InputGroupInput, { disabled: disabled }), ...rest }), _jsxs(InputGroupAddon, { align: "inline-end", children: [isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "combobox-toggle", className: "twa:group-has-data-[slot=combobox-clear]/input-group:hidden twa:data-pressed:bg-transparent twa:min-h-auto!", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
 });
 function ComboboxContent({ className, side = 'bottom', sideOffset = 6, align = 'start', alignOffset = 0, anchor, resizable = false, contentRef, style, ...props }) {
-    const sizeRef = React.useRef(null);
-    const popupElRef = React.useRef(null);
+    const [userSize, setUserSize] = React.useState(null);
+    const styleObject = typeof style === 'function' ? undefined : style;
+    const expectedSizeRef = React.useRef({});
+    expectedSizeRef.current = {
+        width: userSize?.width ?? styleObject?.width,
+        height: userSize?.height ?? styleObject?.height,
+    };
+    const styleObserverRef = React.useRef(null);
+    const pendingUserSizeRef = React.useRef(null);
+    const pinTimerRef = React.useRef(null);
+    const flushPendingUserSize = React.useCallback(() => {
+        if (pinTimerRef.current) {
+            clearTimeout(pinTimerRef.current);
+            pinTimerRef.current = null;
+        }
+        if (pendingUserSizeRef.current) {
+            setUserSize(pendingUserSizeRef.current);
+            pendingUserSizeRef.current = null;
+        }
+    }, []);
     const popupRef = React.useCallback((el) => {
-        if (!el && popupElRef.current && resizable) {
-            const prev = popupElRef.current;
-            const w = prev.style.width;
-            const h = prev.style.height;
-            if (w && h) {
-                sizeRef.current = { width: w, height: h };
-            }
+        styleObserverRef.current?.disconnect();
+        styleObserverRef.current = null;
+        if (!el) {
+            flushPendingUserSize();
         }
-        popupElRef.current = el;
         contentRef?.(el);
-        if (el && resizable && sizeRef.current) {
-            el.style.width = sizeRef.current.width;
-            el.style.height = sizeRef.current.height;
+        if (el && resizable) {
+            const observer = new MutationObserver(() => {
+                const { width, height } = el.style;
+                const expected = expectedSizeRef.current;
+                const isUserSize = (actual, expectedValue) => !!actual && actual !== expectedValue && actual.endsWith('px');
+                if (!isUserSize(width, expected.width) && !isUserSize(height, expected.height)) {
+                    return;
+                }
+                pendingUserSizeRef.current = {
+                    width: width || `${el.offsetWidth}px`,
+                    height: height || `${el.offsetHeight}px`,
+                };
+                if (pinTimerRef.current) {
+                    clearTimeout(pinTimerRef.current);
+                }
+                pinTimerRef.current = setTimeout(flushPendingUserSize, 150);
+            });
+            observer.observe(el, { attributes: true, attributeFilter: ['style'] });
+            styleObserverRef.current = observer;
         }
-    }, [resizable, contentRef]);
+    }, [resizable, contentRef, flushPendingUserSize]);
     const resizableStyle = resizable
         ? { resize: 'both' }
         : undefined;
-    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsx(ComboboxPrimitive.Popup, { ref: popupRef, "data-slot": "combobox-content", "data-chips": !!anchor, "data-resizable": resizable || undefined, style: { ...resizableStyle, ...style }, className: cn('twa:group/combobox-content twa:relative twa:origin-(--transform-origin) twa:overflow-hidden twa:rounded-input twa:bg-popover twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:duration-100 twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:*:data-[slot=input-group]:m-1 twa:*:data-[slot=input-group]:mb-0 twa:*:data-[slot=input-group]:h-8 twa:*:data-[slot=input-group]:border-input/30 twa:*:data-[slot=input-group]:bg-input/30 twa:*:data-[slot=input-group]:shadow-none twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', 'twa:max-h-[min(var(--available-height),80vh)]', 'twa:max-w-[min(var(--available-width),80vw)]', 'twa:min-w-[min(calc(var(--anchor-width)+--spacing(7)),var(--available-width),80vw)]', resizable ? 'twa:flex twa:flex-col twa:min-h-24' : 'twa:w-(--anchor-width)', className), ...props }) }) }));
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsx(ComboboxPrimitive.Popup, { ref: popupRef, "data-slot": "combobox-content", "data-chips": !!anchor, "data-resizable": resizable || undefined, style: { ...resizableStyle, ...styleObject, ...userSize }, className: cn('twa:group/combobox-content twa:relative twa:origin-(--transform-origin) twa:overflow-hidden twa:rounded-input twa:bg-popover twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:duration-100 twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:*:data-[slot=input-group]:m-1 twa:*:data-[slot=input-group]:mb-0 twa:*:data-[slot=input-group]:h-8 twa:*:data-[slot=input-group]:border-input/30 twa:*:data-[slot=input-group]:bg-input/30 twa:*:data-[slot=input-group]:shadow-none twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', 'twa:max-h-[min(var(--available-height,80vh),80vh)]', 'twa:max-w-[min(var(--available-width,80vw),80vw)]', 'twa:min-w-[min(calc(var(--anchor-width)+--spacing(7)),var(--available-width),80vw)]', resizable ? 'twa:flex twa:flex-col twa:min-h-24' : 'twa:w-(--anchor-width)', className), ...props }) }) }));
 }
 const ComboboxList = React.forwardRef(function ComboboxList({ className, ...props }, ref) {
     return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn('twa:no-scrollbar twa:max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] twa:scroll-py-1 twa:overflow-y-auto twa:overscroll-contain twa:p-1 twa:data-empty:p-0', RESIZABLE_LIST_CLASS, className), ref: ref, ...props }));

package/src/components/utils/useDraggable.d.ts

@@ -1,8 +1,10 @@
-export default function useDraggable({ onMove, onDrop, getBoundingRect, handleSelector, }: {
+export default function useDraggable({ onMove, onDrop, getBoundingRect, handleSelector, edgeOffset, }: {
     onMove?: (event: MouseEvent) => void;
     onDrop?: (dx: number, dy: number) => void;
     getBoundingRect?: () => DOMRect;
     handleSelector?: string;
+    /** Minimum distance to keep from the constrain region edges while dragging. */
+    edgeOffset?: number;
 }): {
     handleRef: (newNode: HTMLElement) => void;
     targetRef: import("react").RefObject<HTMLElement>;