@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

package/src/components/CodeBlock/index.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '../Flex';
 import clsx from 'clsx';
 export const baseClassName = 'ab-CodeBlock';
 export const CodeBlock = (props) => {
-    return (React.createElement(Box, { as: "code", ...props, className: clsx('twa:p-1 twa:rounded-standard twa:bg-primary twa:text-primary-foreground', baseClassName, props.className) }));
+    return (_jsx(Box, { as: "code", ...props, className: clsx('twa:p-1 twa:rounded-standard twa:bg-primary twa:text-primary-foreground', baseClassName, props.className) }));
 };

package/src/components/ColorPicker/ColorPicker.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useCallback, useEffect } from 'react';
 import debounce from '../../Utilities/utils/debounce';
@@ -23,9 +24,9 @@ export const ColorPicker = React.forwardRef((props, ref) => {
     }, [debouncedOnChange]);
     const optionsMap = ColorPalette.reduce((acc, colorItem) => ({ ...acc, [getVariableColor(colorItem)]: colorItem }), {});
     const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
-        return (React.createElement("option", { key: x, value: x }, x));
+        return (_jsx("option", { value: x, children: x }, x));
     });
-    const ABcolorChoices = React.createElement("datalist", { id: 'ABcolorChoices' }, ABcolorChoicesOptions);
+    const ABcolorChoices = _jsx("datalist", { id: 'ABcolorChoices', children: ABcolorChoicesOptions });
     const preparedValue = React.useMemo(() => {
         const color = getVariableColor(value);
         return tinycolor(color).toHexString();
@@ -36,22 +37,16 @@ export const ColorPicker = React.forwardRef((props, ref) => {
     }, [value]);
     const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
     const alpha = tinycolor(value).getAlpha();
-    return (React.createElement(Flex, { className: clsx('ColorPicker twa:items-center twa:gap-2', {
+    return (_jsxs(Flex, { className: clsx('ColorPicker twa:items-center twa:gap-2', {
             'twa:opacity-30': props.disabled,
-        }, props.className) },
-        React.createElement(Input, { ...restProps, disabled: props.disabled, className: twMerge('twa:w-[70px] twa:p-0', restProps.className), onChange: (event) => {
-                /**
-                 * The value is not in the map when the color is not in the palette.
-                 */
-                const color = optionsMap[event.target.value] ?? event.target.value;
-                debouncedOnChange(color);
-            }, value: preparedValue, ref: ref, type: "color", list: "ABcolorChoices", title: props.title }),
-        ABcolorChoices,
-        includeAlpha && (React.createElement(Flex, { alignItems: "center", className: "twa:gap-1" },
-            React.createElement(Box, null, "Opacity"),
-            React.createElement(Flex, { alignItems: "center", className: "twa:min-h-input" },
-                React.createElement(Input, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
-                        const color = tinycolor(value).setAlpha(event.target.value).toRgbString();
-                        debouncedOnChange(color);
-                    }, min: 0, max: 1, step: 0.01, type: "range" }))))));
+        }, props.className), children: [_jsx(Input, { ...restProps, as: undefined, disabled: props.disabled, className: twMerge('twa:w-[70px] twa:p-0', restProps.className), onChange: (event) => {
+                    /**
+                     * The value is not in the map when the color is not in the palette.
+                     */
+                    const color = optionsMap[event.target.value] ?? event.target.value;
+                    debouncedOnChange(color);
+                }, value: preparedValue, ref: ref, type: "color", list: "ABcolorChoices", title: props.title }), ABcolorChoices, includeAlpha && (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1", children: [_jsx(Box, { children: "Opacity" }), _jsx(Flex, { alignItems: "center", className: "twa:min-h-input", children: _jsx(Input, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
+                                const color = tinycolor(value).setAlpha(event.target.value).toRgbString();
+                                debouncedOnChange(color);
+                            }, min: 0, max: 1, step: 0.01, type: "range" }) })] }))] }));
 });

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { ComboboxItemType } from './comboboxUtils';
+import { ComboboxPrimitive } from '../ui/combobox';
+export type Virtualizer = ReturnType<typeof useVirtualizer<HTMLDivElement, Element>>;
+export declare function VirtualizedList<T extends ComboboxItemType>({ open, virtualizerRef, showItemTooltip, renderCheckboxIndicator, renderItemLabel, }: {
+    open: boolean;
+    virtualizerRef: React.RefObject<Virtualizer | null>;
+    showItemTooltip?: boolean;
+    renderCheckboxIndicator?: boolean | null | ComboboxPrimitive.ItemIndicator.Props['render'];
+    renderItemLabel?: (defaultLabel: React.ReactNode, item: T) => React.ReactNode;
+}): React.JSX.Element;

package/src/components/Combobox/VirtualizedList.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { PlusIcon } from 'lucide-react';
+import { getItemTextLabel } from './comboboxUtils';
+import { useFilteredItems, ComboboxItem, RESIZABLE_VIRTUALIZED_SCROLL_CLASS, } from '../ui/combobox';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+export function VirtualizedList({ open, virtualizerRef, showItemTooltip, renderCheckboxIndicator, renderItemLabel, }) {
+    const filteredItems = useFilteredItems();
+    const scrollElementRef = React.useRef(null);
+    const virtualizer = useVirtualizer({
+        enabled: open,
+        count: filteredItems.length,
+        getScrollElement: () => scrollElementRef.current,
+        estimateSize: () => 32,
+        overscan: 20,
+        paddingStart: 4,
+        paddingEnd: 4,
+        scrollPaddingEnd: 0,
+        scrollPaddingStart: 0,
+    });
+    React.useImperativeHandle(virtualizerRef, () => virtualizer);
+    const handleScrollElementRef = React.useCallback((element) => {
+        scrollElementRef.current = element;
+        if (element) {
+            virtualizer.measure();
+        }
+    }, [virtualizer]);
+    const totalSize = virtualizer.getTotalSize();
+    if (!filteredItems.length) {
+        return null;
+    }
+    return (_jsx("div", { role: "presentation", ref: handleScrollElementRef, tabIndex: -1, className: `twa:h-[min(22rem,var(--total-size))] twa:max-h-(--available-height) twa:scroll-p-2 twa:overflow-y-auto twa:overflow-x-hidden twa:overscroll-contain twa:outline-none ${RESIZABLE_VIRTUALIZED_SCROLL_CLASS}`, style: { '--total-size': `${totalSize}px` }, children: _jsx("div", { role: "presentation", className: "twa:relative twa:w-full twa:p-1", style: { height: totalSize }, children: virtualizer.getVirtualItems().map((virtualItem) => {
+                const item = filteredItems[virtualItem.index];
+                if (!item) {
+                    return null;
+                }
+                const isUncreatedCreatable = item.creatable && !item.created;
+                const textLabel = showItemTooltip ? getItemTextLabel(item) : undefined;
+                const tooltipText = textLabel != null
+                    ? isUncreatedCreatable
+                        ? `Create "${textLabel}"`
+                        : textLabel
+                    : undefined;
+                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, style: {
+                        position: 'absolute',
+                        left: `var(--ab-base-space)`,
+                        right: `var(--ab-base-space)`,
+                        top: 0,
+                        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;
+            }) }) }));
+}

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

@@ -0,0 +1,82 @@
+import { ComboboxPrimitive } from '../ui/combobox';
+export type ComboboxItemType = {
+    label: React.ReactNode;
+    /**
+     * Plain-text fallback used for the input display and filtering.
+     * Required when `label` is a ReactNode (not a string).
+     */
+    textLabel?: string;
+    value: any;
+    disabled?: boolean;
+};
+export declare function getItemTextLabel<T extends ComboboxItemType>(item: T): string;
+export type ComboboxGroupType<T extends ComboboxItemType> = {
+    label: React.ReactNode;
+    items: T[];
+};
+export type ComboboxDataProps<T extends ComboboxItemType> = {
+    items: T[];
+    groups?: never;
+} | {
+    groups: ComboboxGroupType<T>[];
+    items?: never;
+};
+export type ComboboxCommonProps<T extends ComboboxItemType> = {
+    'data-name'?: string;
+    'aria-label'?: string;
+    ariaLabel?: string;
+    isLoading?: boolean;
+    isCreatable?: boolean;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    virtualized?: boolean;
+    /**
+     * When true, each item is wrapped in a `Tooltip` showing its plain-text label
+     * on hover. Useful when labels can be truncated. Defaults to the value of `virtualized`.
+     */
+    showItemTooltip?: boolean;
+    showSelectAllCheckbox?: boolean;
+    renderItemLabel?: (defaultLabel: React.ReactNode, item: T) => React.ReactNode;
+    multiple?: boolean;
+    showClear?: boolean;
+    searchable?: boolean | 'inline' | 'menulist';
+    /**
+     * Custom filter function, or `null` to disable built-in filtering
+     * (e.g. when options are already filtered server-side).
+     */
+    filter?: ((value: T, inputValue: string) => boolean) | null;
+    /**
+     * When true, the dropdown list can be resized by dragging its edges.
+     * Resized dimensions persist for the lifetime of the component instance.
+     */
+    resizable?: boolean;
+    disabled?: boolean;
+    value?: T['value'] | T['value'][];
+    defaultValue?: T['value'] | T['value'][];
+    onValueChange?: (value: T['value'] | T['value'][], item: T | T[] | undefined) => void;
+    className?: string;
+    /** Popup panel (portaled). */
+    contentClassName?: string;
+    /** Menulist search field; defaults to `className` when omitted. */
+    searchInputClassName?: string;
+    emptyText?: React.ReactNode;
+    placeholder?: string;
+    /**
+     * Optional content rendered to the right of the in-popup search input
+     * (applies when `searchable === 'menulist'`). Useful for adding per-list
+     * controls such as an Expand All / Collapse All toggle for a tree.
+     */
+    renderSearchInputTrailing?: React.ReactNode | (() => React.ReactNode);
+    renderCheckboxIndicator?: boolean | null | ComboboxPrimitive.ItemIndicator.Props['render'];
+};
+export type AdaptableComboboxProps<T extends ComboboxItemType> = ComboboxCommonProps<T> & ComboboxDataProps<T>;
+export declare function valueToItem<T extends ComboboxItemType>(stringValue: T['value'] | undefined | null, lookup: Map<any, T>): T | undefined;
+export declare function valueToItems<T extends ComboboxItemType>(stringValues: T['value'][] | undefined | null, lookup: Map<any, T>): T[] | undefined;
+export declare function toStringValue<T extends ComboboxItemType>(item: T | null): any;
+export declare function toStringValues<T extends ComboboxItemType>(items: T[]): any[];

package/src/components/Combobox/comboboxUtils.js

@@ -0,0 +1,25 @@
+export function getItemTextLabel(item) {
+    if (item.textLabel != null)
+        return item.textLabel;
+    if (typeof item.label === 'string')
+        return item.label;
+    if (typeof item.label === 'number')
+        return String(item.label);
+    return String(item.value);
+}
+export function valueToItem(stringValue, lookup) {
+    if (stringValue == null)
+        return undefined;
+    return lookup.get(stringValue);
+}
+export function valueToItems(stringValues, lookup) {
+    if (stringValues == null)
+        return undefined;
+    return stringValues.map((v) => lookup.get(v)).filter(Boolean);
+}
+export function toStringValue(item) {
+    return item?.value ?? null;
+}
+export function toStringValues(items) {
+    return items.map((item) => item.value);
+}

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { AdaptableComboboxProps, ComboboxDataProps, ComboboxItemType } from './comboboxUtils';
+export type { AdaptableComboboxProps };
+export type SingleComboboxProps<T extends ComboboxItemType> = Omit<AdaptableComboboxProps<T>, 'multiple' | 'value' | 'defaultValue' | 'onValueChange'> & {
+    value?: T['value'] | null;
+    defaultValue?: T['value'];
+    onValueChange?: (value: T['value'] | null, item: T | undefined) => void;
+};
+export declare const SingleCombobox: <T extends ComboboxItemType>(props: Omit<AdaptableComboboxProps<T>, "multiple" | "value" | "defaultValue" | "onValueChange"> & {
+    value?: T["value"] | null;
+    defaultValue?: T["value"];
+    onValueChange?: (value: T["value"] | null, item: T | undefined) => void;
+}) => React.JSX.Element;
+export type MultiComboboxProps<T extends ComboboxItemType> = Omit<AdaptableComboboxProps<T>, 'multiple' | 'value' | 'defaultValue' | 'onValueChange'> & {
+    value?: T['value'][];
+    defaultValue?: T['value'][];
+    onValueChange?: (value: T['value'][], item: T[] | undefined) => void;
+    showSelectAllCheckbox?: boolean;
+    /**
+     * Optional override for the Select All checkbox's tri-state value.
+     * When provided, replaces the default `selected.length === total` computation.
+     * Useful when the caller tracks selection externally (e.g. tree selections).
+     */
+    selectAllCheckboxValue?: boolean | null;
+    /**
+     * Optional override for the Select All checkbox change handler.
+     * When provided, replaces the default behaviour of selecting / deselecting
+     * every item.
+     */
+    onSelectAllCheckboxChange?: (checked: boolean) => void;
+    renderInputValues?: (items: T[]) => React.ReactNode;
+    renderInput?: boolean;
+} & ComboboxDataProps<T>;
+export declare const MultiCombobox: <T extends ComboboxItemType>(props: MultiComboboxProps<T>) => React.JSX.Element;
+export type GridFilterComboboxProps<T extends ComboboxItemType> = Omit<MultiComboboxProps<T>, 'showSelectAllCheckbox' | 'searchable' | 'renderInput' | 'renderInputValues'> & {
+    showSelectedCount?: boolean;
+};
+export declare const GridFilterCombobox: <T extends ComboboxItemType>(props: GridFilterComboboxProps<T>) => React.JSX.Element;