@adaptabletools/adaptable-cjs 22.1.1 → 23.0.0-canary.1

package/src/components/CheckBox/index.js

@@ -2,14 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckBox = exports.CheckBoxGroup = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const Flex_1 = require("../Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
+const twUtils_1 = require("../twUtils");
 const Square = (props) => {
-    return React.createElement("div", { className: `ab-CheckBox__square ab-CheckBox__square--${props.type}` });
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(`ab-CheckBox__square ab-CheckBox__square--${props.type}`, twUtils_1.targetPeer.focusVisibleOutline, props.className) }));
 };
-const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-base-space)', childrenPosition = 'end', as = 'label', ...props }) => {
+const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-base-space)', childrenPosition = 'end', checkSquareClassName, tabIndex, as = 'label', ...props }) => {
     const [stateChecked, setStateChecked] = (0, react_1.useState)(false);
     const computedChecked = checked !== undefined ? checked : stateChecked;
     const onInputChange = (event) => {
@@ -29,13 +32,13 @@ const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly
         : computedChecked === false
             ? 'unchecked'
             : 'indeterminate';
-    const gap = React.createElement("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
-    children = children ? (React.createElement("div", { style: {
+    const gap = (0, jsx_runtime_1.jsx)("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
+    children = children ? ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'inline-block',
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-        } }, children)) : null;
+        }, children: children })) : null;
     const before = childrenPosition === 'start' ? children : null;
     const beforeGap = childrenPosition === 'start' && children ? gap : null;
     const after = childrenPosition === 'end' ? children : null;
@@ -45,20 +48,14 @@ const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly
     React.useEffect(() => {
         checkboxRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    let input = (React.createElement("input", { className: (0, clsx_1.default)(`ab-CheckBox-input twa:align-middle twa:opacity-0`, {
+    let input = ((0, jsx_runtime_1.jsx)("input", { className: (0, clsx_1.default)(`ab-CheckBox-input twa:peer twa:align-middle twa:opacity-0`, {
             'twa:cursor-pointer': !readOnly && !disabled,
-        }), ref: checkboxRef, disabled: disabled, readOnly: readOnly, checked: !!computedChecked, type: "checkbox", name: name, value: value, onChange: onInputChange }));
-    return (React.createElement(Flex_1.Box, { ...props, className: (0, clsx_1.default)('twa:my-2', 'ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as },
-        before,
-        beforeGap,
-        input,
-        React.createElement(Square, { type: type }),
-        afterGap,
-        after));
+        }), ref: checkboxRef, disabled: disabled, readOnly: readOnly, checked: !!computedChecked, tabIndex: tabIndex, type: "checkbox", name: name, value: value, onChange: onInputChange }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...props, className: (0, clsx_1.default)('twa:my-2', 'ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as, children: [before, beforeGap, input, (0, jsx_runtime_1.jsx)(Square, { type: type, className: checkSquareClassName }), afterGap, after] }));
 };
 exports.CheckBox = CheckBox;
 const CheckBoxGroup = (props) => {
     const { orientation, ...flexProps } = props;
-    return (React.createElement(Flex_1.Flex, { className: `ab-CheckBoxGroup ${orientation === 'horizontal' ? 'twa:items-center' : 'twa:items-start'}`, flexDirection: orientation == 'horizontal' ? 'row' : 'column', ...flexProps }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `ab-CheckBoxGroup ${orientation === 'horizontal' ? 'twa:items-center' : 'twa:items-start'}`, flexDirection: orientation == 'horizontal' ? 'row' : 'column', ...flexProps }));
 };
 exports.CheckBoxGroup = CheckBoxGroup;

package/src/components/CodeBlock/index.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlock = exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("../Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-CodeBlock';
 const CodeBlock = (props) => {
-    return (React.createElement(Flex_1.Box, { as: "code", ...props, className: (0, clsx_1.default)('twa:p-1 twa:rounded-standard twa:bg-primary twa:text-primary-foreground', exports.baseClassName, props.className) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "code", ...props, className: (0, clsx_1.default)('twa:p-1 twa:rounded-standard twa:bg-primary twa:text-primary-foreground', exports.baseClassName, props.className) }));
 };
 exports.CodeBlock = CodeBlock;

package/src/components/ColorPicker/ColorPicker.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPicker = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const debounce_1 = tslib_1.__importDefault(require("../../Utilities/utils/debounce"));
@@ -27,9 +28,9 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
     }, [debouncedOnChange]);
     const optionsMap = ColorPalette.reduce((acc, colorItem) => ({ ...acc, [(0, StyleHelper_1.getVariableColor)(colorItem)]: colorItem }), {});
     const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
-        return (React.createElement("option", { key: x, value: x }, x));
+        return ((0, jsx_runtime_1.jsx)("option", { value: x, children: x }, x));
     });
-    const ABcolorChoices = React.createElement("datalist", { id: 'ABcolorChoices' }, ABcolorChoicesOptions);
+    const ABcolorChoices = (0, jsx_runtime_1.jsx)("datalist", { id: 'ABcolorChoices', children: ABcolorChoicesOptions });
     const preparedValue = React.useMemo(() => {
         const color = (0, StyleHelper_1.getVariableColor)(value);
         return (0, tinycolor2_1.default)(color).toHexString();
@@ -40,22 +41,16 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
     }, [value]);
     const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
     const alpha = (0, tinycolor2_1.default)(value).getAlpha();
-    return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('ColorPicker twa:items-center twa:gap-2', {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, clsx_1.default)('ColorPicker twa:items-center twa:gap-2', {
             'twa:opacity-30': props.disabled,
-        }, props.className) },
-        React.createElement(Input_1.default, { ...restProps, disabled: props.disabled, className: (0, twMerge_1.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_1.Flex, { alignItems: "center", className: "twa:gap-1" },
-            React.createElement(Flex_1.Box, null, "Opacity"),
-            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:min-h-input" },
-                React.createElement(Input_1.default, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
-                        const color = (0, tinycolor2_1.default)(value).setAlpha(event.target.value).toRgbString();
-                        debouncedOnChange(color);
-                    }, min: 0, max: 1, step: 0.01, type: "range" }))))));
+        }, props.className), children: [(0, jsx_runtime_1.jsx)(Input_1.default, { ...restProps, as: undefined, disabled: props.disabled, className: (0, twMerge_1.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 && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Opacity" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:min-h-input", children: (0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
+                                const color = (0, tinycolor2_1.default)(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,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualizedList = VirtualizedList;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+const lucide_react_1 = require("lucide-react");
+const comboboxUtils_1 = require("./comboboxUtils");
+const combobox_1 = require("../ui/combobox");
+const tooltip_1 = require("../ui/tooltip");
+function VirtualizedList({ open, virtualizerRef, showItemTooltip, renderCheckboxIndicator, renderItemLabel, }) {
+    const filteredItems = (0, combobox_1.useFilteredItems)();
+    const scrollElementRef = React.useRef(null);
+    const virtualizer = (0, react_virtual_1.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 ((0, jsx_runtime_1.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 ${combobox_1.RESIZABLE_VIRTUALIZED_SCROLL_CLASS}`, style: { '--total-size': `${totalSize}px` }, children: (0, jsx_runtime_1.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 ? (0, comboboxUtils_1.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)) : ((0, jsx_runtime_1.jsx)("span", { className: "twa:min-w-0 twa:flex-1 twa:truncate", children: label }));
+                const itemContent = isUncreatedCreatable ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, {}), itemLabel] })) : (itemLabel);
+                const itemElement = ((0, jsx_runtime_1.jsx)(combobox_1.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 ((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 })] }, 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,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getItemTextLabel = getItemTextLabel;
+exports.valueToItem = valueToItem;
+exports.valueToItems = valueToItems;
+exports.toStringValue = toStringValue;
+exports.toStringValues = toStringValues;
+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);
+}
+function valueToItem(stringValue, lookup) {
+    if (stringValue == null)
+        return undefined;
+    return lookup.get(stringValue);
+}
+function valueToItems(stringValues, lookup) {
+    if (stringValues == null)
+        return undefined;
+    return stringValues.map((v) => lookup.get(v)).filter(Boolean);
+}
+function toStringValue(item) {
+    return item?.value ?? null;
+}
+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;