@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.1

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

@@ -1,36 +1,35 @@
 import * as React from 'react';
+import { type DropdownButtonItem, type DropdownButtonProps } from "../../../vendor/components/DropdownButton";
 import { AccessLevel } from '../../AdaptableState/Common/Entitlement';
 import { SimpleButtonProps } from '../SimpleButton';
-export type NewDropdownButtonItem = {
-    label?: React.ReactNode;
-    tooltip?: string;
-    onClick?: (e?: React.SyntheticEvent) => void;
-    disabled?: boolean;
-    dataName?: string;
-    separator?: boolean;
-    icon?: React.ReactNode;
-    /** When `false`, the menu stays open after this item is clicked (default `true`). */
-    closeOnClick?: boolean;
-};
-export type NewDropdownButtonProps = {
-    items: NewDropdownButtonItem[];
-    children?: React.ReactNode;
+export type NewDropdownButtonItem = DropdownButtonItem;
+export type NewDropdownButtonProps = Omit<DropdownButtonProps, 'trigger' | 'showDividerBorder'> & {
     className?: string;
-    disabled?: boolean;
-    tooltip?: string;
     variant?: SimpleButtonProps['variant'];
     size?: SimpleButtonProps['size'];
     accessLevel?: AccessLevel;
-    side?: 'top' | 'bottom' | 'left' | 'right';
-    align?: 'start' | 'center' | 'end';
     'data-name'?: string;
     tone?: SimpleButtonProps['tone'];
-    showDivider?: boolean;
     id?: string;
     'data-id'?: string;
     'data-value'?: string | number;
     'aria-label'?: string;
     onMouseDown?: React.MouseEventHandler;
-    extraWidthChars?: number;
 };
-export declare const NewDropdownButton: React.ForwardRefExoticComponent<NewDropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Adaptable wrapper around the domain-free `DropdownButton` from `@adaptabletools/components`.
+ * Adds SimpleButton trigger + accessLevel handling.
+ */
+export declare const NewDropdownButton: React.ForwardRefExoticComponent<Omit<DropdownButtonProps, "trigger" | "showDividerBorder"> & {
+    className?: string;
+    variant?: SimpleButtonProps["variant"];
+    size?: SimpleButtonProps["size"];
+    accessLevel?: AccessLevel;
+    'data-name'?: string;
+    tone?: SimpleButtonProps["tone"];
+    id?: string;
+    'data-id'?: string;
+    'data-value'?: string | number;
+    'aria-label'?: string;
+    onMouseDown?: React.MouseEventHandler;
+} & React.RefAttributes<HTMLButtonElement>>;

package/src/components/DropdownButton/index.js

@@ -1,27 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu';
-import { NewTooltip } from '../NewTooltip';
+import { DropdownButton, } from "../../../vendor/components/DropdownButton";
 import { cn } from '../../lib/utils';
-import { ChevronDownIcon } from 'lucide-react';
 import SimpleButton from '../SimpleButton';
 export const NewDropdownButton = React.forwardRef((props, ref) => {
-    const { items, children, className, disabled, tooltip, variant = 'text', accessLevel, side = 'bottom', align = 'start', 'data-name': dataName, tone = 'neutral', showDivider = true, id, 'data-id': dataId, 'data-value': dataValue, 'aria-label': ariaLabel, onMouseDown, } = props;
+    const { items, children, className, disabled, tooltip, variant = 'text', accessLevel, side = 'bottom', align = 'start', 'data-name': dataName, tone = 'neutral', showDivider = true, id, 'data-id': dataId, 'data-value': dataValue, 'aria-label': ariaLabel, onMouseDown, extraWidthChars, } = props;
     const isHidden = accessLevel === 'Hidden';
     const isReadOnly = accessLevel === 'ReadOnly';
     const isDisabled = disabled || isHidden || isReadOnly;
-    const trigger = (_jsxs(DropdownMenuTrigger, { render: _jsx(SimpleButton, { ref: ref, tone: tone, variant: variant, disabled: isDisabled, className: cn(className, 'twa:pr-1 twa:active:translate-y-0 twa:flex-row twa:flex-none', variant !== 'text' ? 'twa:gap-1' : 'twa:gap-0.5'), "data-name": dataName, id: id, "data-id": dataId, "data-value": dataValue, "aria-label": ariaLabel, onMouseDown: onMouseDown }), children: [children, showDivider && (_jsx("div", { className: cn('twa:h-full twa:my-1', variant !== 'text' ? 'twa:border-l twa:border-border' : '') })), _jsx(ChevronDownIcon, { className: "twa:size-3.5 twa:opacity-60 twa:transition-transform twa:duration-200 twa:[[data-popup-open]_&]:rotate-180" })] }));
-    const maxLabelLength = items.reduce((max, item) => Math.max(max, typeof item.label === 'string'
-        ? item.label.length
-        : typeof item.tooltip === 'string'
-            ? item.tooltip.length
-            : 0), 0);
-    return (_jsxs(DropdownMenu, { children: [tooltip ? _jsx(NewTooltip, { label: tooltip, children: trigger }) : trigger, _jsx(DropdownMenuContent, { side: side, align: align, style: {
-                    width: `max(${maxLabelLength + (props.extraWidthChars ?? 3)}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
-                }, children: items.map((item, index) => {
-                    if (item.separator) {
-                        return _jsx(DropdownMenuSeparator, {}, index);
-                    }
-                    return (_jsxs(DropdownMenuItem, { disabled: item.disabled, "data-name": item.dataName, closeOnClick: item.closeOnClick, onClick: (e) => item.onClick?.(e), children: [item.icon, item.label] }, item.dataName ?? index));
-                }) })] }));
+    return (_jsx(DropdownButton, { items: items, disabled: isDisabled, tooltip: tooltip, side: side, align: align, showDivider: showDivider, showDividerBorder: variant !== 'text', extraWidthChars: extraWidthChars, trigger: _jsx(SimpleButton, { ref: ref, tone: tone, variant: variant, disabled: isDisabled, className: cn(className, 'twa:pr-1 twa:active:translate-y-0 twa:flex-row twa:flex-none', variant !== 'text' ? 'twa:gap-1' : 'twa:gap-0.5'), "data-name": dataName, id: id, "data-id": dataId, "data-value": dataValue, "aria-label": ariaLabel, onMouseDown: onMouseDown }), children: children }));
 });
+NewDropdownButton.displayName = 'NewDropdownButton';

package/src/components/EmptyContent/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
-import { Box, Flex } from '../Flex';
+import { Flex } from '../Flex';
 const baseClassName = 'ab-EmptyContent';
 const EmptyContent = ({ children, className, style, ...flexProps }) => {
     if (typeof children === 'string') {
         children = _jsx("p", { children: children });
     }
-    return (_jsx(Box, { className: `${baseClassName}__wrapper twa:flex-1 twa:relative twa:size-full`, children: _jsx(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: cn('twa:absolute twa:inset-0 twa:text-3 twa:text-center twa:p-4', 'twa:[&_p]:text-primary-foreground', baseClassName, className), style: style, children: children }) }));
+    return (_jsx(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: cn('twa:flex-1 twa:w-full twa:min-h-40 twa:text-3 twa:text-center twa:p-4', 'twa:[&_p]:text-primary-foreground', baseClassName, className), style: style, children: children }));
 };
 export default EmptyContent;

package/src/components/IconSelector/IconSelector.js

@@ -7,7 +7,7 @@ import { allIcons, Icon } from '../icons';
 import OverlayTrigger from '../OverlayTrigger';
 import SimpleButton from '../SimpleButton';
 import { Box, Flex } from '../Flex';
-import { wizardSelectionButtonClassName } from '../../Utilities/wizardSelection';
+import { wizardSelectionButtonClassName } from '../../View/Wizard/Utilities/wizardSelection';
 const ICON_GRID_BUTTON_CLASS = 'twa:!min-w-[36px] twa:!w-9 twa:!h-9 twa:!p-0 twa:justify-center twa:items-center';
 const IconButton = (props) => {
     return (_jsx(SimpleButton, { onClick: () => props.onClick(), className: wizardSelectionButtonClassName(props.active, ICON_GRID_BUTTON_CLASS), variant: props.active ? 'outlined' : 'text', tone: "none", icon: props.icon, children: props.children }));

package/src/components/Modal/index.js

@@ -5,7 +5,7 @@ import { RemoveScroll } from 'react-remove-scroll';
 import { cn } from '../../lib/utils';
 import { baseClassName, default as Backdrop } from './Backdrop';
 import { createUuid } from '../utils/uuid';
-import { isBrowserDocumentAvailable } from '../../View/UIHelper';
+import { isBrowserDocumentAvailable } from '../../Utilities/Helpers/UIHelper';
 import { useStacking } from '../WindowModal/useStacking';
 import { Flex } from '../Flex';
 let portalElement;

package/src/components/OverlayTrigger/index.js

@@ -11,7 +11,7 @@ import usePrevious from '../utils/usePrevious';
 import { getDocRect, getRect } from './utils';
 import useAgGridClassName from './useAgGridClassName';
 import contains from '../utils/contains';
-import { isBrowserDocumentAvailable } from '../../View/UIHelper';
+import { isBrowserDocumentAvailable } from '../../Utilities/Helpers/UIHelper';
 import { useOverlay } from '../InfiniteTable';
 import { useAdaptable } from '../../View/AdaptableContext';
 import { OVERLAY_BASE_Z_INDEX } from '../overlayBaseZIndex';

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

@@ -1,51 +1,2 @@
-import * as React from 'react';
-import { ReactNode, SyntheticEvent } from 'react';
-import { BoxProps } from '../Flex';
-type Variant = 'default' | 'text-only';
-type TypeProps = {
-    checked?: boolean;
-    as?: any;
-    name?: string;
-    value?: any;
-    onChange?: (checked: boolean, event?: SyntheticEvent | any) => void;
-    children?: ReactNode | React.JSX.Element;
-    gapDistance?: number | string;
-    childrenPosition?: 'start' | 'end';
-    variant?: Variant;
-};
-export interface RadioProps extends TypeProps, Omit<BoxProps, keyof TypeProps> {
-    tabIndex?: number;
-    id?: string;
-    disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    onFocus?: React.FocusEventHandler<HTMLDivElement>;
-}
-export declare const useRadioContext: <T extends any>() => {
-    value: T;
-    onChange: (value: T) => void;
-    name: string;
-    variant: Variant;
-};
-declare const Radio: ({ children, checked, onChange, value, name, gapDistance, childrenPosition, as, id, tabIndex, disabled, ...props }: RadioProps) => React.JSX.Element;
-export declare const RadioGroup: <T extends any>(props: {
-    orientation: "horizontal" | "vertical";
-    value?: T;
-    name?: string;
-    defaultValue?: T;
-    onRadioChange?: (value: T) => void;
-    className?: string;
-    children: React.ReactNode;
-    /**
-     * The variant of the radio group.
-     * @default 'default' - will show the radio button and the text
-     *
-     * 'text-only' - will show the text only and hide the radio button
-     */
-    variant?: Variant;
-}) => React.JSX.Element;
-export declare const radioGroupStyling: {
-    horizontalTextOnly: string;
-};
-export default Radio;
+export { default, RadioGroup, useRadioContext } from "../../../vendor/components/Radio";
+export type { RadioProps } from "../../../vendor/components/Radio";

package/src/components/Radio/index.js

@@ -1,64 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { useState } from 'react';
-import useProperty from '../utils/useProperty';
-import { Box, Flex } from '../Flex';
-import { twMerge } from '../../twMerge';
-import { targetChildren, targetOwn } from '../twUtils';
-import { cn } from '../../lib/utils';
-const RadioContext = React.createContext({
-    value: null,
-    name: '',
-    onChange: (v) => { },
-    variant: 'default',
-});
-export const useRadioContext = () => {
-    return React.useContext(RadioContext);
-};
-const Radio = ({ children, checked, onChange, value, name, gapDistance = 'var(--ab-radio-gap)', childrenPosition = 'end', as = 'label', id, tabIndex, disabled, ...props }) => {
-    const context = useRadioContext();
-    const { value: contextValue, onChange: contextOnChange, name: contextName, variant } = context;
-    const [stateChecked, setStateChecked] = useState(false);
-    const computedChecked = checked !== undefined
-        ? checked
-        : contextValue !== undefined
-            ? contextValue === value
-            : stateChecked;
-    const onInputChange = (event) => {
-        const newChecked = event.target.checked;
-        if (checked === undefined) {
-            setStateChecked(newChecked);
-        }
-        if (onChange) {
-            onChange(newChecked, event);
-        }
-        if (newChecked) {
-            contextOnChange(value);
-        }
-    };
-    const gap = _jsx("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
-    const before = childrenPosition === 'start' ? children : null;
-    const beforeGap = childrenPosition === 'start' ? gap : null;
-    const after = childrenPosition === 'end' ? children : null;
-    const afterGap = childrenPosition === 'end' ? gap : null;
-    return (_jsxs(Box, { ...props, className: twMerge(`ab-Radio twa:my-2 twa:inline-flex twa:flex-row twa:items-center twa:cursor-pointer twa:relative`, props.className), "data-checked": computedChecked, as: as, children: [before, beforeGap, _jsx("input", { disabled: disabled, className: cn('ab-Radio-input', targetOwn.focusOutline, 'twa:align-middle', 'twa:m-0', 'twa:rounded-full', 'twa:cursor-pointer', 'twa:position-relative', 'twa:w-[1rem]', 'twa:h-[1rem]', 'twa:min-w-[1rem]', 'twa:min-h-[1rem]', variant === 'default' && 'ab-Radio-input--default', variant === 'text-only' && 'ab-Radio-input--text-only twa:size-0 twa:opacity-0'), id: id, checked: computedChecked, type: "radio", name: name ?? contextName, value: value, tabIndex: tabIndex, onChange: onInputChange }), afterGap, after] }));
-};
-export const RadioGroup = (props) => {
-    const { orientation, value: _value, name, onRadioChange, children, variant = 'default' } = props;
-    const [value, setValue] = useProperty(props, 'value', undefined, {
-        onChange: (value) => {
-            onRadioChange(value);
-        },
-    });
-    return (_jsx(RadioContext.Provider, { value: { value, onChange: setValue, name, variant }, children: _jsx(Flex, { className: cn('ab-RadioGroup', props.className), flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex-start', children: children }) }));
-};
-export const radioGroupStyling = {
-    horizontalTextOnly: cn('twa:bg-primarylight twa:rounded-standard twa:p-1 twa:gap-5', {
-        'twa:*:flex-1 twa:*:shrink-0 twa:*:min-w-fit twa:*:rounded-standard twa:*:p-1 twa:*:m-0 twa:*:px-4': 'default styles for all the radio buttons',
-        'twa:*:data-[checked=true]:bg-accent twa:*:data-[checked=true]:text-accent-foreground': 'style the checked state',
-        'twa:[--ab-radio-gap:0]': 'remove the gap between the radio input and its label',
-        'twa:[&_input]:size-0 twa:[&_input]:min-w-0 twa:[&_input]:min-h-0 twa:[&_input]:border-0 twa:[&_input]:p-0': 'collapse any nested radio inputs to zero size (overriding their fixed min-w/min-h)',
-        [targetChildren.focusWithinOutline]: 'styles for when a radio is currently focused - show a ring, so people know they can do keyboard nav with left/right arrow keys',
-    }),
-};
-export default Radio;
+export { default, RadioGroup, useRadioContext } from "../../../vendor/components/Radio";

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

@@ -0,0 +1,2 @@
+export { SingleSelect, MultiSelect } from "../../../vendor/components/Select";
+export type { SelectProps, SingleSelectProps, MultiSelectProps, } from "../../../vendor/components/Select";

package/src/components/Select/index.js

@@ -0,0 +1 @@
+export { SingleSelect, MultiSelect } from "../../../vendor/components/Select";

package/src/components/SimpleButton/index.js

@@ -5,7 +5,7 @@ import { allIcons } from '../icons';
 import { ACCESS_LEVEL_HIDDEN, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
 import { IconComponent, isAdaptableElementIcon, isAdaptableCustomIcon, isAdaptableSystemIcon, } from '../Icon';
 import { Box } from '../Flex';
-import { NewTooltip } from '../NewTooltip';
+import { Tooltip } from '../Tooltip';
 export const baseClassName = 'ab-SimpleButton';
 const SimpleButton = React.forwardRef((givenProps, theRef) => {
     const props = { ...givenProps };
@@ -79,9 +79,7 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
             'twa:text-info': tone === 'info',
         }, variant === 'text' ? 'twa:bg-transparent' : '', variant === 'ghost'
             ? 'twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:hover:bg-muted/50'
-            : '', variant === 'outlined'
-            ? 'twa:bg-background twa:border-input-border twa:border'
-            : '', variant === 'raised'
+            : '', variant === 'outlined' ? 'twa:bg-background twa:border-input-border twa:border' : '', variant === 'raised'
             ? {
                 'twa:text-primary-foreground twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
                 'twa:bg-success twa:text-success-foreground': tone == 'success',
@@ -101,6 +99,6 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
             'twa:cursor-pointer': !disabled,
             'twa:opacity-50': disabled,
         }, className), ref: theRef, children: children }));
-    return tooltip ? _jsx(NewTooltip, { label: tooltip, children: btn }) : btn;
+    return tooltip ? _jsx(Tooltip, { label: tooltip, children: btn }) : btn;
 });
 export default SimpleButton;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface SwitchProps {
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+    'data-name'?: string;
+}
+/**
+ * A genuine on/off switch (sliding thumb), styled to match AdapTable's design system.
+ * Wraps the Base UI Switch primitive.
+ */
+export declare const Switch: React.FC<SwitchProps>;
+export default Switch;

package/src/components/Switch/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+import { cn } from '../../lib/utils';
+export const Switch = ({ checked, disabled, onChange, className, ...rest }) => {
+    return (_jsx(SwitchPrimitive.Root, { ...rest, checked: checked, disabled: disabled, onCheckedChange: (next) => onChange?.(next), className: cn('ab-Switch', 'twa:inline-flex twa:h-5 twa:w-8 twa:shrink-0 twa:items-center twa:rounded-full', 'twa:border twa:border-transparent twa:shadow-xs twa:transition-colors twa:outline-none', 'twa:cursor-pointer twa:bg-muted twa:data-[checked]:bg-accent', 'twa:focus-visible:ring-2 twa:focus-visible:ring-ring', 'twa:disabled:cursor-not-allowed twa:disabled:opacity-50', className), children: _jsx(SwitchPrimitive.Thumb, { className: cn('ab-Switch__thumb', 'twa:pointer-events-none twa:block twa:size-4 twa:rounded-full twa:bg-white twa:shadow-sm', 'twa:transition-transform twa:translate-x-0 twa:data-[checked]:translate-x-[calc(100%-2px)]') }) }));
+};
+export default Switch;

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

@@ -10,6 +10,8 @@ export type TabsProps<VALUE_TYPE> = HTMLProps<HTMLElement> & {
     defaultSelectedIndex?: number;
     onSelectedIndexChange?: (index: number) => void;
     keyboardNavigation?: boolean;
+    /** Optional content rendered at the end of the tab strip (e.g. action buttons). */
+    stripEnd?: React.ReactNode;
 } & BoxProps & React.HTMLProps<HTMLDivElement>;
 export declare const Tabs: {
     <VALUE_TYPE extends string | number>(props: TabsProps<VALUE_TYPE>): React.JSX.Element;

package/src/components/Tabs/index.js

@@ -18,7 +18,7 @@ const isTabContent = (c) => {
     return c.type === Content || SupportedTabContentComps.has(c.type);
 };
 export const Tabs = (props) => {
-    const { autoFocus, children, onValueChange: _onValueChange, defaultValue: _defaultValue, value: _value, keyboardNavigation = true, selectedIndex: _selectedIndex, defaultSelectedIndex: _defaultSelectedIndex, onSelectedIndexChange: _onSelectedIndexChange, ...boxProps } = props;
+    const { autoFocus, children, onValueChange: _onValueChange, defaultValue: _defaultValue, value: _value, keyboardNavigation = true, selectedIndex: _selectedIndex, defaultSelectedIndex: _defaultSelectedIndex, onSelectedIndexChange: _onSelectedIndexChange, stripEnd, ...boxProps } = props;
     let [selectedIndex, doSetSelectedIndex] = useProperty(props, 'selectedIndex', 0);
     const [selectedValue, setSelectedValue] = useProperty(props, 'value', 0);
     const allChildren = React.Children.toArray(children);
@@ -65,7 +65,7 @@ export const Tabs = (props) => {
             selectedIndex,
             tabCount: tabs.length,
             setSelectedIndex,
-        }, children: _jsxs(Box, { ...boxProps, className: join(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex, children: [_jsxs(Flex, { flexDirection: "row", className: cn('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)', 'twa:pt-0.5'), children: [_jsx(Box, { className: fillerClassName }), tabs, _jsx(Flex, { className: cn(fillerClassName, 'twa:flex-1') })] }), _jsx(Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} `, children: currentContent })] }) }));
+        }, children: _jsxs(Box, { ...boxProps, className: join(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex, children: [_jsxs(Flex, { flexDirection: "row", className: cn('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)', 'twa:pt-0.5'), children: [_jsx(Box, { className: fillerClassName }), tabs, _jsx(Flex, { className: cn(fillerClassName, 'twa:flex-1') }), stripEnd ? (_jsx(Flex, { alignItems: "center", className: cn(fillerClassName, 'twa:shrink-0 twa:gap-1 twa:pl-2 twa:pr-0 twa:pb-2'), children: stripEnd })) : null] }), _jsx(Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 twa:min-h-0 ${contentProps.className || ''} `, children: currentContent })] }) }));
 };
 export const Tab = (props) => {
     const { index, autoFocus, keyboardNavigation = true, className: propsClassName, ...boxProps } = props;

package/src/components/Tag/Tag.d.ts

@@ -1,17 +1,19 @@
 import * as React from 'react';
 import { FlexProps } from '../Flex';
-export type TagVariant = 'default' | 'column';
-export declare const Tag: React.FunctionComponent<React.PropsWithChildren<FlexProps & {
-    className?: string;
-    style?: React.CSSProperties;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
+export type TagVariant = 'default' | 'accent' | 'expression';
+export declare const Tag: React.FunctionComponent<React.PropsWithChildren<FlexProps & React.HTMLAttributes<HTMLDivElement> & {
     variant?: TagVariant;
 }> & React.RefAttributes<HTMLDivElement>>;
-/** Tag styled for column names — accent tint and left stripe for quick recognition. */
-export declare const ColumnTag: React.ForwardRefExoticComponent<Omit<FlexProps & {
-    className?: string;
-    style?: React.CSSProperties;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
+/** Tag with accent tint for emphasized identity chips (column names, query names, etc.). */
+export declare const AccentTag: React.ForwardRefExoticComponent<Omit<FlexProps & React.HTMLAttributes<HTMLDivElement> & {
+    variant?: TagVariant;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Tag for AdapTable QL Expressions — default Tag colours, monospace type.
+ */
+export declare const ExpressionTag: React.ForwardRefExoticComponent<Omit<FlexProps & React.HTMLAttributes<HTMLDivElement> & {
     variant?: TagVariant;
 } & {
     children?: React.ReactNode | undefined;
@@ -23,9 +25,10 @@ export declare const TagBox: (props: {
 export declare const TagList: (props: {
     tags: (React.ReactNode | string)[];
     className?: string;
+    tagClassName?: string;
     variant?: TagVariant;
 }) => React.JSX.Element;
-export declare function renderColumnTags(columnIds: string[], getFriendlyName: (columnId: string) => string, options?: {
+export declare function renderAccentTags(ids: string[], getLabel: (id: string) => string, options?: {
     className?: string;
     tagClassName?: string;
 }): React.ReactNode;

package/src/components/Tag/Tag.js

@@ -1,21 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { cn } from '../../lib/utils';
-import { twMerge } from '../../twMerge';
 import { Box, Flex } from '../Flex';
-const COLUMN_TAG_CLASS = 'ab-Tag--column';
-export const Tag = React.forwardRef(({ variant = 'default', className, ...props }, ref) => (_jsx(Flex, { ...props, ref: ref, className: twMerge(`ab-Tag twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:w-fit twa:rounded-standard`, variant === 'column' ? COLUMN_TAG_CLASS : 'twa:bg-primary', className), style: props.style })));
-export const ColumnTag = React.forwardRef((props, ref) => _jsx(Tag, { ...props, ref: ref, variant: "column" }));
+export const Tag = React.forwardRef(({ variant = 'default', className, ...props }, ref) => (_jsx(Flex, { ...props, ref: ref, className: cn(`ab-Tag twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:w-fit twa:rounded-standard`, variant === 'accent'
+        ? 'ab-Tag--accent'
+        : variant === 'expression'
+            ? 'ab-Tag--expression'
+            : 'twa:bg-primary', className), style: props.style })));
+export const AccentTag = React.forwardRef((props, ref) => _jsx(Tag, { ...props, ref: ref, variant: "accent" }));
+export const ExpressionTag = React.forwardRef((props, ref) => _jsx(Tag, { ...props, ref: ref, variant: "expression" }));
 export const TagBox = (props) => {
     return (_jsx(Box, { className: cn('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className), children: props.children }));
 };
 export const TagList = (props) => {
-    const TagComponent = props.variant === 'column' ? ColumnTag : Tag;
-    return (_jsx(TagBox, { className: props.className, children: props.tags.map((tag, index) => (_jsx(TagComponent, { children: tag }, index))) }));
+    return (_jsx(TagBox, { className: props.className, children: props.tags.map((tag, index) => (_jsx(Tag, { variant: props.variant, className: props.tagClassName, children: tag }, index))) }));
 };
-export function renderColumnTags(columnIds, getFriendlyName, options) {
-    if (!columnIds.length) {
+export function renderAccentTags(ids, getLabel, options) {
+    if (!ids.length) {
         return null;
     }
-    return (_jsx(Flex, { flexWrap: "wrap", className: cn('twa:gap-1', options?.className), children: columnIds.map((columnId) => (_jsx(ColumnTag, { className: options?.tagClassName, children: getFriendlyName(columnId) }, columnId))) }));
+    return (_jsx(Flex, { flexWrap: "wrap", className: cn('twa:gap-1', options?.className), children: ids.map((id) => (_jsx(AccentTag, { className: options?.tagClassName, children: getLabel(id) }, id))) }));
 }

package/src/components/Tag/columnScopeTagHelpers.d.ts

@@ -1,8 +1,16 @@
 import type { Report } from '../../types';
-import type { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
+import type { ColumnScope, ScopeDataType } from '../../AdaptableState/Common/ColumnScope';
 import type { TagVariant } from './Tag';
 /** True when a tag label is a scope placeholder (e.g. `[All Columns]`), not a column name. */
 export declare const isBracketedScopeTagLabel: (value: string) => boolean;
-/** True when export column tags are actual column friendly names. */
-export declare const reportColumnTagsUseColumnVariant: (report: Report) => boolean;
+/** True when export column tags are actual column friendly names (use accent tags). */
+export declare const reportColumnTagsUseAccentVariant: (report: Report) => boolean;
+/**
+ * Short display label for a Scope DataType — matches the Scope radio / checkbox
+ * labels in `NewScopeComponent` (e.g. `number` → `Number`).
+ */
+export declare const getScopeDataTypeLabel: (dataType: ScopeDataType | string) => string;
+/** Settings Panel label for a Scope DataType (e.g. number → "All Numeric Columns"). */
+export declare const getScopeDataTypeSummaryLabel: (dataType: ScopeDataType | string) => string;
+/** Accent tags for named columns and DataType scopes. */
 export declare const getScopeViewItemsTagVariant: (scope: ColumnScope) => TagVariant | undefined;

package/src/components/Tag/columnScopeTagHelpers.js

@@ -1,4 +1,44 @@
 const BRACKETED_SCOPE_LABEL = /^\[[^\]]+\]$/;
 export const isBracketedScopeTagLabel = (value) => BRACKETED_SCOPE_LABEL.test(value.trim());
-export const reportColumnTagsUseColumnVariant = (report) => report.ReportColumnScope === 'ScopeColumns' && 'ColumnIds' in (report.Scope ?? {});
-export const getScopeViewItemsTagVariant = (scope) => 'ColumnIds' in scope && Array.isArray(scope.ColumnIds) ? 'column' : undefined;
+export const reportColumnTagsUseAccentVariant = (report) => report.ReportColumnScope === 'ScopeColumns' && 'ColumnIds' in (report.Scope ?? {});
+export const getScopeDataTypeLabel = (dataType) => {
+    switch (dataType) {
+        case 'number':
+            return 'Number';
+        case 'text':
+            return 'Text';
+        case 'date':
+            return 'Date';
+        case 'boolean':
+            return 'Boolean';
+        case 'numberArray':
+            return 'Number Array';
+        case 'textArray':
+            return 'Text Array';
+        default:
+            return typeof dataType === 'string' && dataType.length
+                ? dataType.charAt(0).toUpperCase() + dataType.slice(1)
+                : String(dataType);
+    }
+};
+export const getScopeDataTypeSummaryLabel = (dataType) => {
+    switch (dataType) {
+        case 'number':
+            return 'All Numeric Columns';
+        case 'text':
+            return 'All String Columns';
+        case 'date':
+            return 'All Date Columns';
+        case 'boolean':
+            return 'All Boolean Columns';
+        case 'numberArray':
+            return 'All Numeric Array Columns';
+        case 'textArray':
+            return 'All String Array Columns';
+        default:
+            return `All ${dataType} Columns`;
+    }
+};
+export const getScopeViewItemsTagVariant = (scope) => ('ColumnIds' in scope && Array.isArray(scope.ColumnIds)) || 'DataTypes' in scope
+    ? 'accent'
+    : undefined;

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

@@ -1 +1 @@
-export { Tag, TagBox, TagList, ColumnTag, renderColumnTags, type TagVariant } from './Tag';
+export { Tag, TagBox, TagList, AccentTag, ExpressionTag, renderAccentTags, type TagVariant, } from './Tag';

package/src/components/Tag/index.js

@@ -1 +1 @@
-export { Tag, TagBox, TagList, ColumnTag, renderColumnTags } from './Tag';
+export { Tag, TagBox, TagList, AccentTag, ExpressionTag, renderAccentTags, } from './Tag';

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

@@ -1,6 +1,2 @@
-import * as React from 'react';
-declare const Tooltip: ({ label, children }: {
-    label?: React.ReactNode;
-    children: React.ReactNode;
-}) => React.JSX.Element;
-export default Tooltip;
+export { Tooltip } from "../../../vendor/components/Tooltip";
+export type { TooltipProps } from "../../../vendor/components/Tooltip";

package/src/components/Tooltip/index.js

@@ -1,6 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import OverlayTrigger from '../OverlayTrigger';
-const Tooltip = ({ label, children }) => {
-    return (_jsx(OverlayTrigger, { className: "ab-Tooltip", render: () => label, children: children }));
-};
-export default Tooltip;
+export { Tooltip } from "../../../vendor/components/Tooltip";

package/src/components/Tree/TreeDropdown/index.d.ts

@@ -1,65 +1,2 @@
-import * as React from 'react';
-import { toDisplayValueDefault, toDisplayValueFromOptionTree } from '../treeUtils';
-export type TreeListItem<T = any> = {
-    id?: string | number;
-    label: string;
-    children?: TreeListItem<T>[];
-};
-export { toDisplayValueDefault, toDisplayValueFromOptionTree };
-export type NewTreeDropdownProps<T extends TreeListItem<any>> = {
-    isLoading?: boolean;
-    placeholder?: string;
-    style?: React.CSSProperties;
-    fieldStyle?: React.CSSProperties;
-    /**
-     * Additional class name applied to the underlying `MultiCombobox` root.
-     * Exposed so higher-level wrappers (e.g. `GridFilterTreeDropdown`) can
-     * restyle the field without reaching into the component internals.
-     */
-    className?: string;
-    items: TreeListItem<T>[];
-    labelField?: string;
-    primaryKey?: keyof T | string;
-    value?: any[][] | string[];
-    defaultValue?: any[][] | string[];
-    /**
-     * Formats a single selected path into the text shown on its chip. Called
-     * once per chip with a single-path wrapper (`[path]`) so the same
-     * `toDisplayValue` helpers used by the legacy TreeDropdown continue to work.
-     */
-    toDisplayValue?: (value: any[][] | string[]) => string;
-    /**
-     * Replaces the default chip rendering for the field with a custom node.
-     * Called with the current set of selected leaf paths and a helper for
-     * resolving each path's display label. Used e.g. by `GridFilterTreeDropdown`
-     * to show a compact comma-separated summary instead of chips.
-     */
-    renderSelectedValues?: (args: {
-        selectedLeafPaths: any[][];
-        getLabelForPath: (path: any[]) => string;
-    }) => React.ReactNode;
-    onValueChange: (value: any[][] | string[]) => void;
-    onOpenChange?: (open: boolean) => void;
-    resizable?: boolean;
-    showClear?: boolean;
-};
-export declare function TreeDropdown<T extends TreeListItem<any>>(props: NewTreeDropdownProps<T>): React.JSX.Element;
-export type GridFilterTreeDropdownProps<T extends TreeListItem<any>> = Omit<NewTreeDropdownProps<T>, 'renderSelectedValues'> & {
-    /**
-     * When true, prefix the selected-values summary with `(N)` where N is the
-     * number of selected leaves. Mirrors `GridFilterCombobox.showSelectedCount`.
-     * Ignored when `renderInputValues` is provided.
-     */
-    showSelectedCount?: boolean;
-    /**
-     * Custom content for the selected values in the collapsed input (rendered inside the
-     * standard wrapper). Mirrors `GridFilterCombobox.renderInputValues`: called with one
-     * item per selected leaf (`value` is the full leaf path, `label` its display label).
-     * When provided, the built-in selected count is not rendered.
-     */
-    renderInputValues?: (items: {
-        value: any;
-        label: string;
-    }[]) => React.ReactNode;
-};
-export declare function GridFilterTreeDropdown<T extends TreeListItem<any>>(props: GridFilterTreeDropdownProps<T>): React.JSX.Element;
+export { TreeDropdown, GridFilterTreeDropdown, toDisplayValueDefault, toDisplayValueFromOptionTree, } from "../../../../vendor/components/Tree/TreeDropdown";
+export type { TreeListItem, NewTreeDropdownProps, GridFilterTreeDropdownProps, } from "../../../../vendor/components/Tree/TreeDropdown";