@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

package/src/components/FlexWithFooter.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex } from './Flex';
 const defaultStyle = {
     height: '100%',
@@ -8,9 +8,6 @@ const defaultStyle = {
 };
 const FlexWithFooter = (props) => {
     const { footer, footerProps, children, style, ...domProps } = props;
-    return (React.createElement(Flex, { flexDirection: "column", ...domProps, style: { ...defaultStyle, ...style } },
-        React.createElement(Flex, { flexDirection: "column", className: "twa:p-0 twa:flex-1" },
-            React.createElement(Flex, { flexDirection: "column", className: "twa:flex-1" }, children)),
-        footer ? (React.createElement(Flex, { className: "twa:p-2 twa:bg-primary", ...footerProps }, footer)) : null));
+    return (_jsxs(Flex, { flexDirection: "column", ...domProps, style: { ...defaultStyle, ...style }, children: [_jsx(Flex, { flexDirection: "column", className: "twa:p-0 twa:flex-1", children: _jsx(Flex, { flexDirection: "column", className: "twa:flex-1", children: children }) }), footer ? (_jsx(Flex, { className: "twa:p-2 twa:bg-primary", ...footerProps, children: footer })) : null] }));
 };
 export default FlexWithFooter;

package/src/components/FormLayout/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { createContext, useContext } from 'react';
 import merge from '../../Utilities/utils/merge';
@@ -12,7 +13,7 @@ const defaultColumns = {
         },
     },
 };
-const PLACEHOLDER = React.createElement("div", null);
+const PLACEHOLDER = _jsx("div", {});
 const FormLayout = (props) => {
     let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = Box, sizes = ['auto', '1fr'], gridColumnGap = 'calc(var(--ab-base-space) * 2)', gridRowGap = 'calc(var(--ab-base-space) * 2)', style, childrenToColumns = true, ...boxProps } = props;
     columns = columns.map((c) => {
@@ -44,12 +45,11 @@ const FormLayout = (props) => {
         rowGap: gridRowGap,
         columnGap: gridColumnGap,
     };
-    return (React.createElement(FormLayoutContext.Provider, { value: {
+    return (_jsx(FormLayoutContext.Provider, { value: {
             columns,
             currentRow: 0,
             childrenToColumns,
-        } },
-        React.createElement(Box, { ...boxProps, className: join(boxProps.className, 'ab-FormLayout'), style: { ...style, ...formStyle } })));
+        }, children: _jsx(Box, { ...boxProps, className: join(boxProps.className, 'ab-FormLayout'), style: { ...style, ...formStyle } }) }));
 };
 export const FormRow = (props) => {
     const ctx = useContext(FormLayoutContext);
@@ -69,14 +69,14 @@ export const FormRow = (props) => {
         }
         if (props.as != null || column.component != null) {
             const Cmp = column.component;
-            value = (React.createElement(Cmp, { "data-name": props.dataName, style: {
+            value = (_jsx(Cmp, { "data-name": props.dataName, style: {
                     ...column.style,
                     gridColumn: columnIndex + 1,
                     gridRow: rowIndex + 1,
-                }, className: column.className }, value));
+                }, className: column.className, children: value }));
         }
         return typeof value === 'string' ? value : React.cloneElement(value, { key: columnName });
     });
-    return React.createElement(React.Fragment, null, columnValues);
+    return _jsx(_Fragment, { children: columnValues });
 };
 export default FormLayout;

package/src/components/HelpBlock/index.js

@@ -1,9 +1,9 @@
-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-HelpBlock';
 export const HelpBlockClassName = clsx('twa:text-2/relaxed twa:p-2 twa:rounded-standard', 'twa:bg-primarylight twa:text-primary-foreground', baseClassName);
 const HelpBlock = (props) => {
-    return React.createElement(Box, { ...props, className: clsx(HelpBlockClassName, props.className) });
+    return _jsx(Box, { ...props, className: clsx(HelpBlockClassName, props.className) });
 };
 export default HelpBlock;

package/src/components/Icon/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { allIcons, Icon } from '../icons';
 import join from '../utils/join';
 import { useEffect, useRef } from 'react';
@@ -34,16 +34,16 @@ export const IconComponent = (props) => {
         };
     }, [icon]);
     if (isAdaptableSystemIcon(icon) && icon.name in allIcons) {
-        return (React.createElement(Icon, { "aria-hidden": "true", name: icon.name, size: icon.size, style: icon.style, className: className }));
+        return (_jsx(Icon, { "aria-hidden": "true", name: icon.name, size: icon.size, style: icon.style, className: className }));
     }
     if (isAdaptableCustomIcon(icon)) {
         let width = icon.style?.width ?? 'var(--ab-cmp-icon__width)';
         let height = icon.style?.height ?? 'var(--ab-cmp-icon__height)';
         const iconStyle = icon.style ?? {};
-        return React.createElement("img", { src: icon.src, className: className, style: { height, width, ...iconStyle } });
+        return _jsx("img", { src: icon.src, className: className, style: { height, width, ...iconStyle } });
     }
     if (isAdaptableElementIcon(icon)) {
-        return (React.createElement("span", { ref: divRef, style: { display: 'none' }, "data-name": "adaptable-icon-placeholder" }));
+        return (_jsx("span", { ref: divRef, style: { display: 'none' }, "data-name": "adaptable-icon-placeholder" }));
     }
     return null;
 };

package/src/components/IconSelector/IconSelector.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import AdaptableInput from '../../View/Components/AdaptableInput';
 import { IconComponent } from '../Icon';
@@ -6,7 +7,7 @@ import OverlayTrigger from '../OverlayTrigger';
 import SimpleButton from '../SimpleButton';
 import { Box, Flex } from '../Flex';
 const IconButton = (props) => {
-    return (React.createElement(SimpleButton, { onClick: () => props.onClick(), className: "twa:p-2", variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
+    return (_jsx(SimpleButton, { onClick: () => props.onClick(), className: "twa:p-2", variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon, children: props.children }));
 };
 export const IconSelector = (props) => {
     const [query, setQuery] = React.useState('');
@@ -17,36 +18,24 @@ export const IconSelector = (props) => {
         })
         : allIconsNames;
     const iconsElements = filteredIcons.map((iconName) => {
-        return (React.createElement(Flex, { key: iconName },
-            React.createElement(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName })));
+        return (_jsx(Flex, { children: _jsx(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName }) }, iconName));
     });
     const customIconsElements = props.customIcons?.map((def) => {
-        return (React.createElement(IconButton, { key: def.name, active: false, onClick: () => props.onChange(def.name) },
-            React.createElement(IconComponent, { key: def.name, icon: def.icon })));
+        return (_jsx(IconButton, { active: false, onClick: () => props.onChange(def.name), children: _jsx(IconComponent, { icon: def.icon }, def.name) }, def.name));
     });
-    const popup = (React.createElement(Box, { className: "ab-IconSelector__Popup" },
-        React.createElement(Box, { className: "twa:mb-2" },
-            React.createElement(Box, { className: "twa:mb-2 twa:text-4" }, "Select an Icon"),
-            React.createElement(AdaptableInput, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full" })),
-        React.createElement(Flex, { className: "twa:p-2 twa:w-[300px] twa:max-h-[300px] twa:overflow-auto twa:flex-wrap" },
-            iconsElements,
-            " ",
-            customIconsElements)));
+    const popup = (_jsxs(Box, { className: "ab-IconSelector__Popup", children: [_jsxs(Box, { className: "twa:mb-2", children: [_jsx(Box, { className: "twa:mb-2 twa:text-4", children: "Select an Icon" }), _jsx(AdaptableInput, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full" })] }), _jsxs(Flex, { className: "twa:p-2 twa:w-[300px] twa:max-h-[300px] twa:overflow-auto twa:flex-wrap", children: [iconsElements, " ", customIconsElements] })] }));
     let value = 'No Icon Selected';
     if (props.value in allIcons) {
-        value = (React.createElement(Icon, { style: { display: 'inline-block' }, name: props.value }));
+        value = (_jsx(Icon, { style: { display: 'inline-block' }, name: props.value }));
     }
     else {
         const icon = props.customIcons?.find((def) => def.name === props.value);
         if (icon)
-            value = React.createElement(IconComponent, { icon: icon.icon });
+            value = _jsx(IconComponent, { icon: icon.icon });
     }
-    return (React.createElement(Flex, { className: "ab-IconSelector" },
-        React.createElement(OverlayTrigger, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300 },
-            React.createElement(SimpleButton, { className: "ab-IconSelector__trigger twa:text-center twa:w-[150px] twa:justify-center", onClick: () => null, variant: "raised" }, value)),
-        (props.clearable ?? true) && (React.createElement(SimpleButton, { disabled: !props.value, className: "ab-IconSelector__clear-button twa:ml-2", onClick: (event) => {
-                event.stopPropagation();
-                event.preventDefault();
-                props.onChange('');
-            }, variant: "text", icon: "close" }))));
+    return (_jsxs(Flex, { className: "ab-IconSelector", children: [_jsx(OverlayTrigger, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300, children: _jsx(SimpleButton, { className: "ab-IconSelector__trigger twa:text-center twa:w-[150px] twa:justify-center", onClick: () => null, variant: "raised", children: value }) }), (props.clearable ?? true) && (_jsx(SimpleButton, { disabled: !props.value, className: "ab-IconSelector__clear-button twa:ml-2", onClick: (event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    props.onChange('');
+                }, variant: "text", icon: "close" }))] }));
 };

package/src/components/InfiniteTable/index.js

@@ -1,9 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { InfiniteTable as InfiniteTableComponent, } from '@infinite-table/infinite-react';
 export * from '@infinite-table/infinite-react';
 import { INFINITE_TABLE_LICENSE_KEY } from '../../EnvVars';
-import * as React from 'react';
 function InfiniteTableGrid(props) {
-    return (React.createElement(InfiniteTableComponent, { sortable: false, rowHeight: '--ab-grid-row-height', draggableColumns: false, keyboardNavigation: false, ...props, licenseKey: INFINITE_TABLE_LICENSE_KEY }));
+    return (_jsx(InfiniteTableComponent, { sortable: false, rowHeight: '--ab-grid-row-height', draggableColumns: false, keyboardNavigation: false, ...props, licenseKey: INFINITE_TABLE_LICENSE_KEY }));
 }
 InfiniteTableComponent.licenseKey = INFINITE_TABLE_LICENSE_KEY;
 export { InfiniteTableGrid };

package/src/components/Input/NumberInput.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Input, { baseClassName } from './index';
 import join from '../utils/join';
@@ -37,5 +38,5 @@ export const NumberInput = React.forwardRef((props, ref) => {
         }
     }, [props.value, value]);
     const { noArrows, ...restOfProps } = props;
-    return (React.createElement(Input, { ...restOfProps, ref: ref, className: join(noArrows ? `${baseClassName}--no-arrows` : '', props.className), value: value, onBlur: handleBlur, onChange: handleChange }));
+    return (_jsx(Input, { ...restOfProps, ref: ref, className: join(noArrows ? `${baseClassName}--no-arrows` : '', props.className), value: value, onBlur: handleBlur, onChange: handleChange }));
 });

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

@@ -5,6 +5,7 @@ export type InputProps = HTMLProps<HTMLInputElement> & {
     type?: string;
     disabled?: boolean;
     list?: any;
+    as?: React.ComponentType<any>;
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/src/components/Input/index.js

@@ -1,9 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Box } from '../Flex';
-import clsx from 'clsx';
+import { targetOwn } from '../twUtils';
+import { cn } from '../../lib/utils';
 export const baseClassName = 'ab-Input';
 const Input = React.forwardRef((props, ref) => {
-    const { disabled, className, ...inputProps } = props;
+    const { disabled, className, as, ...inputProps } = props;
     let type = 'text';
     if (inputProps && inputProps.type) {
         type = inputProps.type;
@@ -11,9 +13,9 @@ const Input = React.forwardRef((props, ref) => {
     if (type === 'string') {
         type = 'text';
     }
-    return (React.createElement(Box, { as: "input", ref: ref, ...inputProps, type: type, disabled: disabled, className: clsx(className, baseClassName, 'twa:min-h-input', type ? `${baseClassName}--type-${type}` : '', disabled ? `${baseClassName}--disabled` : '', {
+    return (_jsx(Box, { as: as ?? 'input', ref: ref, ...inputProps, type: type, disabled: disabled, className: cn(baseClassName, 'twa:min-h-input', 'twa:rounded-input', targetOwn.focusOutline, type ? `${baseClassName}--type-${type}` : '', disabled ? `${baseClassName}--disabled` : '', {
             'twa:bg-(--ab-cmp-input__background)': !disabled,
             'twa:bg-(--ab-cmp-input--disabled__background)': disabled,
-        }) }));
+        }, className) }));
 });
 export default Input;

package/src/components/InputGroup/InputGroup.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const InputGroup = ({ Component = 'div', children, ...rest }) => {
     const Comp = Component;
-    return (React.createElement(Comp, { ...rest, className: `ab-cmp-input-group ${rest.className ?? ''}` }, children));
+    return (_jsx(Comp, { ...rest, className: `ab-cmp-input-group ${rest.className ?? ''}`, children: children }));
 };

package/src/components/Loader/Loader.js

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const LoaderSpinner = (props) => {
-    return React.createElement("div", { style: props.style, className: "ab-Loader__Spinner" });
+    return _jsx("div", { style: props.style, className: "ab-Loader__Spinner" });
 };
 export const Loader = (props) => {
-    return (React.createElement("div", { style: props.style, className: "ab-Loader" },
-        React.createElement(LoaderSpinner, null),
-        React.createElement("span", { className: "ab-Loader__text" }, props.children)));
+    return (_jsxs("div", { style: props.style, className: "ab-Loader", children: [_jsx(LoaderSpinner, {}), _jsx("span", { className: "ab-Loader__text", children: props.children })] }));
 };

package/src/components/Logo/index.js

@@ -1,9 +1,2 @@
-import * as React from 'react';
-export const Logo = (props) => (React.createElement("svg", { width: "45", height: "45", viewBox: "0 0 45 45", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-    React.createElement("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H12.6699V12.6H0V8Z", fill: "#004C79" }),
-    React.createElement("path", { d: "M16.165 0H36.9999C41.4182 0 45 3.58172 45 8V12.6H16.165V0Z", fill: "#004C79" }),
-    React.createElement("path", { d: "M0 32.4H28.8349V45H8C3.58173 45 0 41.4183 0 37V32.4Z", fill: "#004C79" }),
-    React.createElement("path", { d: "M32.3301 32.4H45V37C45 41.4183 41.4182 45 37 45H32.3301V32.4Z", fill: "#004C79" }),
-    React.createElement("rect", { x: "32.3301", y: "16.2001", width: "12.6699", height: "12.6", fill: "#004C79" }),
-    React.createElement("rect", { x: "16.165", y: "16.2001", width: "12.6699", height: "12.6", fill: "#00CAF2" }),
-    React.createElement("rect", { y: "16.2001", width: "12.6699", height: "12.6", fill: "#004C79" })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Logo = (props) => (_jsxs("svg", { width: "45", height: "45", viewBox: "0 0 45 45", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H12.6699V12.6H0V8Z", fill: "#004C79" }), _jsx("path", { d: "M16.165 0H36.9999C41.4182 0 45 3.58172 45 8V12.6H16.165V0Z", fill: "#004C79" }), _jsx("path", { d: "M0 32.4H28.8349V45H8C3.58173 45 0 41.4183 0 37V32.4Z", fill: "#004C79" }), _jsx("path", { d: "M32.3301 32.4H45V37C45 41.4183 41.4182 45 37 45H32.3301V32.4Z", fill: "#004C79" }), _jsx("rect", { x: "32.3301", y: "16.2001", width: "12.6699", height: "12.6", fill: "#004C79" }), _jsx("rect", { x: "16.165", y: "16.2001", width: "12.6699", height: "12.6", fill: "#00CAF2" }), _jsx("rect", { y: "16.2001", width: "12.6699", height: "12.6", fill: "#004C79" })] }));

package/src/components/Modal/Backdrop.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
 import { useState, useLayoutEffect } from 'react';
@@ -22,7 +23,7 @@ const Backdrop = (props) => {
         });
         return () => updatePositionInStack(uuid, null);
     }, []);
-    return backdropVisible ? (React.createElement("div", { "data-id": uuid, style: { zIndex }, className: `${baseClassName}-backdrop twa:fixed twa:inset-0 twa:z-900 twa:bg-(--ab-cmp-modal-backdrop__background)` })) : null;
+    return backdropVisible ? (_jsx("div", { "data-id": uuid, style: { zIndex }, className: `${baseClassName}-backdrop twa:fixed twa:inset-0 twa:z-900 twa:bg-(--ab-cmp-modal-backdrop__background)` })) : null;
 };
 const stack = {};
 export const updatePositionInStack = (id, data) => {

package/src/components/Modal/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
 import { useMemo } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
@@ -42,8 +42,5 @@ export const Modal = (props) => {
     const backdropZIndexOffset = 1;
     const stacking = useStacking();
     const zIndex = stacking.zIndex;
-    return createPortal(isOpen ? (React.createElement(React.Fragment, null,
-        React.createElement(Backdrop, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }),
-        React.createElement(RemoveScroll, null,
-            React.createElement(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: clsx('twa:fixed twa:inset-0 twa:z-1000 twa:font-(family-name:--ab__font-family)', baseClassName, className) }, children)))) : null, portalElement);
+    return createPortal(isOpen ? (_jsxs(_Fragment, { children: [_jsx(Backdrop, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }), _jsx(RemoveScroll, { children: _jsx(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: clsx('twa:fixed twa:inset-0 twa:z-1000 twa:font-(family-name:--ab__font-family)', baseClassName, className), children: children }) })] })) : null, portalElement);
 };

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AccessLevel } from '../../AdaptableState/Common/Entitlement';
+import { SimpleButtonProps } from '../SimpleButton';
+export type NewDropdownButtonItem = {
+    label: React.ReactNode;
+    onClick?: (e?: React.SyntheticEvent) => void;
+    disabled?: boolean;
+    dataName?: string;
+    separator?: boolean;
+    icon?: React.ReactNode;
+};
+export type NewDropdownButtonProps = {
+    items: NewDropdownButtonItem[];
+    children?: React.ReactNode;
+    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'];
+};
+export declare const NewDropdownButton: React.ForwardRefExoticComponent<NewDropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/src/components/NewDropdownButton/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu";
+import { NewTooltip } from '../NewTooltip';
+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', } = 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 }), children: [children, _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 : 0), 0);
+    return (_jsxs(DropdownMenu, { children: [tooltip ? _jsx(NewTooltip, { label: tooltip, children: trigger }) : trigger, _jsx(DropdownMenuContent, { side: side, align: align, style: {
+                    // minWidth: `min(max(${maxLabelLength + 5}ch, calc(var(--ab-base-space) * 32)),80vw)`,
+                    width: `max(${maxLabelLength + 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, onClick: (e) => item.onClick?.(e), children: [item.icon, item.label] }, item.dataName ?? index));
+                }) })] }));
+});

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

@@ -0,0 +1,64 @@
+import React from 'react';
+type SelectItemType = {
+    label: React.ReactNode;
+    value: any;
+    disabled?: boolean;
+};
+type SelectGroupType<T extends SelectItemType> = {
+    label: React.ReactNode;
+    items: T[];
+};
+type NewSelectBaseProps<T extends SelectItemType> = {
+    'data-name'?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    showClear?: boolean;
+    multiple?: boolean;
+    disabled?: boolean;
+    value?: T['value'] | T['value'][];
+    defaultValue?: T['value'] | T['value'][];
+    ariaLabel?: string;
+    size?: 'small' | 'normal';
+    onValueChange?: (value: T['value'] | T['value'][]) => void;
+    container?: HTMLElement | null;
+    placeholder?: string;
+    invalid?: boolean | string;
+    className?: string;
+    /**
+     * When `true`, stops the native `mousedown` from bubbling beyond the popup.
+     * Use this when the trigger lives inside an outside-click-detecting overlay
+     * (e.g. ag-grid's column menu) that would otherwise close itself on
+     * mousedowns happening inside the portaled popup.
+     */
+    stopMouseDownPropagation?: boolean;
+    /** Single mode: the matching item. Multi mode: items for each selected value (unknown values omitted). */
+    renderValue?: (selected: T | T[]) => React.ReactNode;
+    /**
+     * When true, each item is wrapped in a `Tooltip` showing its plain-text label
+     * on hover. Useful when labels can be truncated. Defaults to `false`.
+     */
+    showItemTooltip?: boolean;
+};
+type SelectDataProps<T extends SelectItemType> = {
+    items: T[];
+    groups?: never;
+} | {
+    groups: SelectGroupType<T>[];
+    items?: never;
+};
+export type NewSelectProps<T extends SelectItemType> = NewSelectBaseProps<T> & SelectDataProps<T>;
+export type SingleSelectProps<T extends SelectItemType> = Omit<NewSelectBaseProps<T>, 'multiple' | 'value' | 'defaultValue' | 'onValueChange' | 'renderValue'> & {
+    value?: T['value'];
+    defaultValue?: T['value'];
+    onValueChange?: (value: T['value']) => void;
+    renderValue?: (item: T) => React.ReactNode;
+} & SelectDataProps<T>;
+export declare const SingleSelect: <T extends SelectItemType>(props: SingleSelectProps<T>) => React.JSX.Element;
+export type MultiSelectProps<T extends SelectItemType> = Omit<NewSelectBaseProps<T>, 'multiple' | 'value' | 'defaultValue' | 'onValueChange' | 'renderValue'> & {
+    value?: T['value'][];
+    defaultValue?: T['value'][];
+    onValueChange?: (value: T['value'][]) => void;
+    renderValue?: (items: T[]) => React.ReactNode;
+} & SelectDataProps<T>;
+export declare const MultiSelect: <T extends SelectItemType>(props: MultiSelectProps<T>) => React.JSX.Element;
+export {};

package/src/components/NewSelect/index.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from "../ui/select";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { cn } from '../../lib/utils';
+import React from 'react';
+const getItemTitle = (label, value) => {
+    if (typeof label === 'string')
+        return label;
+    if (typeof label === 'number')
+        return String(label);
+    return String(value);
+};
+const isItemEqualToValue = (itemValue, value) => {
+    return itemValue === value;
+};
+const NewSelect = (props) => {
+    const isInvalid = !!props.invalid;
+    let allItems = [];
+    let groups = [];
+    if ('groups' in props) {
+        groups = props.groups;
+        allItems = groups.flatMap((group) => group.items);
+    }
+    else {
+        groups = [
+            {
+                label: null,
+                items: props.items,
+            },
+        ];
+        allItems = props.items;
+    }
+    const maxLabelLength = allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string' ? item.label.length : 0), 0);
+    const contentStyle = {
+        width: `max(${maxLabelLength + 3}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
+    };
+    const renderValueProp = props.renderValue;
+    const renderValueChild = renderValueProp
+        ? (rawValue) => {
+            if (props.multiple) {
+                const values = Array.isArray(rawValue) ? rawValue : rawValue == null ? [] : [rawValue];
+                const selectedItems = values
+                    .map((v) => allItems.find((item) => isItemEqualToValue(item.value, v)))
+                    .filter((item) => item !== undefined);
+                return renderValueProp(selectedItems);
+            }
+            const item = allItems.find((i) => isItemEqualToValue(i.value, rawValue));
+            return item !== undefined ? renderValueProp(item) : undefined;
+        }
+        : undefined;
+    return (_jsxs(Select, { multiple: props.multiple, open: props.open, onOpenChange: props.onOpenChange, isItemEqualToValue: isItemEqualToValue, items: allItems, disabled: props.disabled, value: props.value, onValueChange: props.onValueChange, "aria-label": props.ariaLabel, defaultValue: props.defaultValue, children: [_jsx(SelectTrigger, { size: props.size === 'small' ? 'sm' : 'default', className: cn('twa:max-w-80 ab-Select', props.className), "aria-invalid": isInvalid, "aria-label": props.ariaLabel, "data-name": props['data-name'], children: _jsx(SelectValue, { placeholder: props.placeholder, className: 'twa:truncate twa:block!', children: renderValueChild }) }), _jsx(SelectContent, { alignItemWithTrigger: false, container: props.container, stopMouseDownPropagation: props.stopMouseDownPropagation, style: contentStyle, children: groups.map((group, index) => {
+                    return (_jsxs(React.Fragment, { children: [_jsxs(SelectGroup, { children: [group.label && _jsx(SelectLabel, { children: group.label }), group.items.map((item) => {
+                                        const tooltipText = props.showItemTooltip
+                                            ? getItemTitle(item.label, item.value)
+                                            : undefined;
+                                        const itemContent = item.label;
+                                        const itemElement = (_jsx(SelectItem, { value: item.value, className: 'ab-Select-Row', disabled: item.disabled, children: itemContent }, item.value));
+                                        if (tooltipText != null) {
+                                            return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: itemElement, children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] }, item.value));
+                                        }
+                                        return itemElement;
+                                    })] }), index < groups.length - 1 && _jsx(SelectSeparator, {})] }, typeof group.label === 'string' ? group.label : `${index}`));
+                }) })] }));
+};
+export const SingleSelect = (props) => {
+    return _jsx(NewSelect, { ...props, multiple: false });
+};
+export const MultiSelect = (props) => {
+    return _jsx(NewSelect, { ...props, multiple: true });
+};

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export type NewTooltipProps = {
+    label?: React.ReactNode;
+    children: React.ReactNode;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+};
+export declare function NewTooltip({ label, children, side, align }: NewTooltipProps): React.JSX.Element;

package/src/components/NewTooltip/index.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
+export function NewTooltip({ label, children, side, align }) {
+    if (!label) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("div", { className: "twa:inline-flex twa:flex-none" }), children: children }), _jsx(TooltipContent, { side: side, align: align, children: label })] }));
+}

package/src/components/NotifyResize/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { getResizeObserverObject } from '../ResizeObserver/getResizeObserverObject';
 const RO = getResizeObserverObject();
@@ -22,7 +23,7 @@ const NotifyResize = (props) => {
             }
         };
     }, []);
-    return (React.createElement("div", { ref: domRef, style: {
+    return (_jsx("div", { ref: domRef, style: {
             visibility: 'hidden',
             position: 'absolute',
             width: '100%',

package/src/components/OverlayTrigger/Overlay.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useEffect, useState, useRef } from 'react';
 import batchUpdate from '../utils/batchUpdate';
@@ -62,6 +63,6 @@ const Overlay = React.forwardRef((props, ref) => {
     if (!visible && !transitionInProgress) {
         return null;
     }
-    return (React.createElement("div", { ...domProps, ref: setRef, style: { ...props.style, opacity }, onTransitionEnd: onTransitionEnd }));
+    return (_jsx("div", { ...domProps, ref: setRef, style: { ...props.style, opacity }, onTransitionEnd: onTransitionEnd }));
 });
 export default Overlay;

package/src/components/OverlayTrigger/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import debounce from '../../Utilities/utils/debounce';
@@ -181,7 +182,7 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
         }
         const targetWidth = target.getBoundingClientRect().width;
         if ((prevVisible && !visible) || visible) {
-            const overlayContent = (React.createElement(Overlay, { ...domProps, ref: (node) => {
+            const overlayContent = (_jsx(Overlay, { ...domProps, ref: (node) => {
                     if (overlayRef.current && overlayRef.current != node) {
                         overlayRef.current.removeEventListener(showEvent, onShow);
                         overlayRef.current.removeEventListener(hideEvent, onHide);
@@ -196,7 +197,7 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
                         clearAllOverlays();
                         hideOverlay('overlay-trigger');
                     }
-                } }, props.render({ targetWidth })));
+                }, children: props.render({ targetWidth }) }));
             let preparedConstrainTo;
             if (constrainTo) {
                 preparedConstrainTo = getConstrainElement(targetRef.current, constrainTo);
@@ -216,16 +217,13 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
         }
     }, [visible, props.render]);
     const agGridClassName = useAgGridClassName([visible]);
-    return (React.createElement(React.Fragment, null,
-        React.Children.only(props.children),
-        React.createElement("div", { "data-name": DATA_NAME_OVERLAY_TRIGGER, "data-visible": visible, ref: domRef, style: {
-                visibility: 'hidden',
-                flex: 'none',
-                width: 0,
-                height: 0,
-                pointerEvents: 'none',
-                display: 'inline-flex',
-            } }),
-        portal));
+    return (_jsxs(_Fragment, { children: [React.Children.only(props.children), _jsx("div", { "data-name": DATA_NAME_OVERLAY_TRIGGER, "data-visible": visible, ref: domRef, style: {
+                    visibility: 'hidden',
+                    flex: 'none',
+                    width: 0,
+                    height: 0,
+                    pointerEvents: 'none',
+                    display: 'inline-flex',
+                } }), portal] }));
 });
 export default OverlayTrigger;