@orcestr/ui 0.0.1 → 0.1.0

package/dist/components/IconTextButton/IconTextButton.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { type ButtonProps } from '../Button/Button';
+import { type LinkButtonProps } from '../LinkButton/LinkButton';
+type IconTextButtonOwnProps = {
+    icon?: ReactNode;
+    endIcon?: ReactNode;
+    iconSide?: 'start' | 'end';
+    iconClassName?: string;
+    labelClassName?: string;
+};
+type IconTextButtonButtonProps = Omit<ButtonProps, 'leftIcon' | 'rightIcon'> & {
+    href?: never;
+};
+type IconTextButtonLinkProps = Omit<LinkButtonProps, 'leftIcon' | 'rightIcon'> & {
+    href: string;
+};
+export type IconTextButtonProps = IconTextButtonOwnProps & (IconTextButtonButtonProps | IconTextButtonLinkProps);
+export declare const IconTextButton: import("react").ForwardRefExoticComponent<IconTextButtonProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};
+//# sourceMappingURL=IconTextButton.d.ts.map

package/dist/components/IconTextButton/IconTextButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconTextButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconTextButton/IconTextButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAa,KAAK,eAAe,EAAC,MAAM,0BAA0B,CAAC;AAE1E,KAAK,sBAAsB,GAAG;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,KAAK,yBAAyB,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC3E,IAAI,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC7E,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,GACpD,CAAC,yBAAyB,GAAG,uBAAuB,CAAC,CAAC;AAO1D,eAAO,MAAM,cAAc,uIAyDzB,CAAC"}

package/dist/components/IconTextButton/IconTextButton.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Button } from '../Button/Button';
+import { LinkButton } from '../LinkButton/LinkButton';
+function iconNode(icon, className) {
+    if (!icon)
+        return undefined;
+    return _jsx("span", { className: cn('oui-icon-text-button-icon', className), children: icon });
+}
+export const IconTextButton = forwardRef(function IconTextButton({ className, icon, endIcon, iconSide = 'start', iconClassName, labelClassName, children, href, ...props }, ref) {
+    const startIcon = iconSide === 'start' ? iconNode(icon, iconClassName) : undefined;
+    const finishIcon = endIcon !== undefined
+        ? iconNode(endIcon, iconClassName)
+        : iconSide === 'end'
+            ? iconNode(icon, iconClassName)
+            : undefined;
+    const label = (_jsx("span", { className: cn('oui-icon-text-button-label', labelClassName), children: children }));
+    if (href !== undefined) {
+        return (_jsx(LinkButton, { ref: ref, href: href, className: cn('oui-icon-text-button', className), leftIcon: startIcon, rightIcon: finishIcon, ...props, children: label }));
+    }
+    return (_jsx(Button, { ref: ref, className: cn('oui-icon-text-button', className), leftIcon: startIcon, rightIcon: finishIcon, ...props, children: label }));
+});

package/dist/components/InlineEdit/InlineEdit.d.ts

@@ -0,0 +1,63 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type SystemProps } from '../../theme/systemProps';
+export type InlineEditFieldProps = SystemProps & {
+    label: ReactNode;
+    meta?: ReactNode;
+    action?: ReactNode;
+    editable?: boolean;
+    busy?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
+    onOpen?: () => void;
+    clearLabel?: string;
+    flash?: number;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+};
+export declare const InlineEditField: import("react").ForwardRefExoticComponent<SystemProps & {
+    label: ReactNode;
+    meta?: ReactNode;
+    action?: ReactNode;
+    editable?: boolean;
+    busy?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
+    onOpen?: () => void;
+    clearLabel?: string;
+    flash?: number;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type InlineEditMultiFieldProps = SystemProps & {
+    children?: ReactNode;
+    empty?: ReactNode;
+    action?: ReactNode;
+    col?: boolean;
+    editable?: boolean;
+    busy?: boolean;
+    disabled?: boolean;
+    onOpen?: () => void;
+    flash?: number;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+};
+export declare const InlineEditMultiField: import("react").ForwardRefExoticComponent<SystemProps & {
+    children?: ReactNode;
+    empty?: ReactNode;
+    action?: ReactNode;
+    col?: boolean;
+    editable?: boolean;
+    busy?: boolean;
+    disabled?: boolean;
+    onOpen?: () => void;
+    flash?: number;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=InlineEdit.d.ts.map

package/dist/components/InlineEdit/InlineEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/components/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,aAAa,EAClB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAI3E,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAC7C,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,eAAe;WAhBjB,SAAS;WACT,SAAS;aACP,SAAS;eACP,OAAO;WACX,OAAO;eACH,OAAO;gBACN,OAAO;cACT,MAAM,IAAI;aACX,MAAM,IAAI;iBACN,MAAM;YACX,MAAM;gBACF,MAAM;YACV,aAAa;aACZ,MAAM;kDA2IlB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,oBAAoB;eAdlB,SAAS;YACZ,SAAS;aACR,SAAS;UACZ,OAAO;eACF,OAAO;WACX,OAAO;eACH,OAAO;aACT,MAAM,IAAI;YACX,MAAM;gBACF,MAAM;YACV,aAAa;aACZ,MAAM;kDAiFjB,CAAC"}

package/dist/components/InlineEdit/InlineEdit.js

@@ -0,0 +1,98 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { LuX } from 'react-icons/lu';
+import { cn } from '../../utils/cn';
+import { composeRefs } from '../../utils/composeRefs';
+import { splitSystemProps } from '../../theme/systemProps';
+import { IconButton } from '../IconButton/IconButton';
+import { Spinner } from '../Spinner/Spinner';
+export const InlineEditField = forwardRef(function InlineEditField({ label, meta, action, editable = true, busy = false, disabled = false, clearable = false, onClear, onOpen, clearLabel = 'Clear', flash = 0, className, style, testId, ...props }, ref) {
+    const innerRef = useRef(null);
+    const labelRef = useRef(null);
+    const extraRef = useRef(null);
+    const actionsRef = useRef(null);
+    const [compact, setCompact] = useState(false);
+    const { systemStyle, restProps } = splitSystemProps(props);
+    useEffect(() => {
+        if (!flash)
+            return;
+        const element = innerRef.current;
+        if (!element)
+            return;
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        element.animate([
+            { backgroundColor: 'transparent', boxShadow: '0 0 0 0 var(--oui-primary-surface)' },
+            {
+                backgroundColor: 'var(--oui-primary-surface)',
+                boxShadow: '0 0 0 4px var(--oui-primary-surface)',
+            },
+            { backgroundColor: 'transparent', boxShadow: '0 0 0 0 var(--oui-primary-surface)' },
+            {
+                backgroundColor: 'var(--oui-primary-surface)',
+                boxShadow: '0 0 0 4px var(--oui-primary-surface)',
+            },
+            { backgroundColor: 'transparent', boxShadow: '0 0 0 0 var(--oui-primary-surface)' },
+        ], { duration: 1400, easing: 'ease-in-out' });
+    }, [flash]);
+    const showActions = editable && (!disabled || busy);
+    useLayoutEffect(() => {
+        const wrapper = innerRef.current;
+        if (!wrapper)
+            return;
+        const updateLayout = () => {
+            const availableWidth = wrapper.parentElement?.clientWidth || wrapper.clientWidth;
+            const labelWidth = labelRef.current?.scrollWidth ?? 0;
+            const extraWidth = extraRef.current?.offsetWidth ?? 0;
+            const actionsWidth = actionsRef.current?.offsetWidth ?? 0;
+            const visibleGaps = (extraWidth > 0 ? 6 : 0) + (actionsWidth > 0 ? 6 : 0);
+            const wideWidth = labelWidth + extraWidth + actionsWidth + visibleGaps + 8;
+            setCompact(wideWidth > availableWidth);
+        };
+        updateLayout();
+        const observer = new ResizeObserver(updateLayout);
+        observer.observe(wrapper);
+        if (wrapper.parentElement)
+            observer.observe(wrapper.parentElement);
+        if (labelRef.current)
+            observer.observe(labelRef.current);
+        if (extraRef.current)
+            observer.observe(extraRef.current);
+        if (actionsRef.current)
+            observer.observe(actionsRef.current);
+        return () => observer.disconnect();
+    }, [label, meta, action, clearable, editable, disabled, busy]);
+    return (_jsxs("div", { ref: composeRefs(innerRef, ref), className: cn('oui-inline-edit', compact && 'oui-inline-edit-compact', className), "data-busy": busy ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps, children: [_jsx("button", { ref: labelRef, type: 'button', className: 'oui-inline-edit-label', disabled: !onOpen || disabled, onClick: onOpen, children: label }), meta || showActions ? (_jsxs("div", { className: 'oui-inline-edit-meta', children: [meta ? (_jsx("span", { ref: extraRef, className: 'oui-inline-edit-extra', children: meta })) : null, showActions ? (_jsxs("span", { ref: actionsRef, className: 'oui-inline-edit-actions', children: [busy ? _jsx(Spinner, { size: 1 }) : action, clearable && !busy ? (_jsx(IconButton, { type: 'button', v: 'ghost', tone: 'neutral', size: 1, "aria-label": clearLabel, className: 'oui-inline-edit-action', onClick: onClear, children: _jsx(LuX, {}) })) : null] })) : null] })) : null] }));
+});
+export const InlineEditMultiField = forwardRef(function InlineEditMultiField({ children, empty, action, col = false, editable = true, busy = false, disabled = false, onOpen, flash = 0, className, style, testId, ...props }, ref) {
+    const innerRef = useRef(null);
+    const { systemStyle, restProps } = splitSystemProps(props);
+    useEffect(() => {
+        if (!flash)
+            return;
+        const element = innerRef.current;
+        if (!element)
+            return;
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        element.animate([
+            { backgroundColor: 'transparent', boxShadow: '0 0 0 0 var(--oui-primary-surface)' },
+            {
+                backgroundColor: 'var(--oui-primary-surface)',
+                boxShadow: '0 0 0 4px var(--oui-primary-surface)',
+            },
+            { backgroundColor: 'transparent', boxShadow: '0 0 0 0 var(--oui-primary-surface)' },
+        ], { duration: 1000, easing: 'ease-in-out' });
+    }, [flash]);
+    const showActions = editable && (!disabled || busy);
+    return (_jsxs("div", { ref: composeRefs(innerRef, ref), className: cn('oui-inline-edit-multi', className), "data-col": col ? 'true' : undefined, "data-busy": busy ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, "data-clickable": onOpen && !disabled ? 'true' : undefined, "data-testid": testId, role: onOpen && !disabled ? 'button' : undefined, tabIndex: onOpen && !disabled ? 0 : undefined, style: { ...systemStyle, ...style }, onClick: () => {
+            if (!disabled)
+                onOpen?.();
+        }, onKeyDown: (event) => {
+            if (disabled || !onOpen)
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onOpen();
+            }
+        }, ...restProps, children: [_jsx("div", { className: 'oui-inline-edit-multi-items', children: children ?? _jsx("span", { className: 'oui-inline-edit-empty', children: empty }) }), showActions ? (_jsx("div", { className: 'oui-inline-edit-multi-actions', children: busy ? _jsx(Spinner, { size: 1 }) : action })) : null] }));
+});

package/dist/components/LinkButton/LinkButton.d.ts

@@ -0,0 +1,25 @@
+import { type AnchorHTMLAttributes, type ReactNode } from 'react';
+import { type SystemProps, type ToneInput, type UiSize } from '../../theme/systemProps';
+import type { ButtonPressAnimation } from '../../theme/themeTypes';
+import type { ButtonVariant } from '../Button/Button';
+export type LinkButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & SystemProps & {
+    size?: UiSize;
+    v?: ButtonVariant;
+    tone?: ToneInput;
+    fullWidth?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    pressAnimation?: ButtonPressAnimation;
+    testId?: string;
+};
+export declare const LinkButton: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & SystemProps & {
+    size?: UiSize;
+    v?: ButtonVariant;
+    tone?: ToneInput;
+    fullWidth?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    pressAnimation?: ButtonPressAnimation;
+    testId?: string;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=LinkButton.d.ts.map

package/dist/components/LinkButton/LinkButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEH,KAAK,WAAW,EAEhB,KAAK,SAAS,EACd,KAAK,MAAM,EAEd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAGjE,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GACjE,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,aAAa,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,UAAU;WAVR,MAAM;QACT,aAAa;WACV,SAAS;gBACJ,OAAO;eACR,SAAS;gBACR,SAAS;qBACJ,oBAAoB;aAC5B,MAAM;qDA4CtB,CAAC"}

package/dist/components/LinkButton/LinkButton.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, } from 'react';
+import { splitSystemProps, normalizeTone, } from '../../theme/systemProps';
+import { OrcestrThemeContext } from '../../theme/useTheme';
+import { cn } from '../../utils/cn';
+export const LinkButton = forwardRef(function LinkButton({ className, style, size = 3, v = 'solid', tone = 'neutral', fullWidth = false, leftIcon, rightIcon, pressAnimation, testId, children, ...props }, ref) {
+    const themeContext = useContext(OrcestrThemeContext);
+    const actualPressAnimation = pressAnimation ?? themeContext?.theme.motion.pressAnimation ?? 'soft';
+    const { systemStyle, restProps } = splitSystemProps(props);
+    return (_jsxs("a", { ref: ref, className: cn('oui-button', fullWidth && 'oui-button-full', className), "data-size": size, "data-variant": v, "data-tone": normalizeTone(tone), "data-press-animation": actualPressAnimation, "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps, children: [leftIcon, _jsx("span", { className: 'oui-button-label', children: children }), rightIcon] }));
+});

package/dist/components/Modal/Modal.d.ts

@@ -1,12 +1,9 @@
-import { type CSSProperties, type ReactNode } from 'react';
+import { type ButtonHTMLAttributes, type CSSProperties, type KeyboardEventHandler, type ReactNode } from 'react';
 import type { ModalAnimation } from '../../theme/themeTypes';
 export type ModalProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    title?: ReactNode;
-    description?: ReactNode;
     children: ReactNode;
-    footer?: ReactNode;
     maxWidth?: number | string;
     minHeight?: number | string;
     overlayColor?: string;
@@ -21,9 +18,35 @@ export type ModalProps = {
     overlayStyle?: CSSProperties;
     className?: string;
     contentClassName?: string;
-    bodyClassName?: string;
+    contentStyle?: CSSProperties;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    onOpenAutoFocus?: (event: {
+        preventDefault: () => void;
+    }) => void;
     closeOnOverlayClick?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
     testId?: string;
 };
-export declare function Modal({ open, onOpenChange, title, description, children, footer, maxWidth, minHeight, overlayColor, overlayOpacity, overlayBlur, borderColor, radius, shadow, animationDuration, animation, overlayClassName, overlayStyle, className, contentClassName, bodyClassName, closeOnOverlayClick, testId, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ModalRoot({ open, onOpenChange, children, maxWidth, minHeight, overlayColor, overlayOpacity, overlayBlur, borderColor, radius, shadow, animationDuration, animation, overlayClassName, overlayStyle, className, contentClassName, contentStyle, onKeyDown, onOpenAutoFocus, closeOnOverlayClick, ariaLabel, ariaLabelledBy, ariaDescribedBy, testId, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+type ModalPartProps = {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function ModalHeader({ children, className, style }: ModalPartProps): import("react/jsx-runtime").JSX.Element;
+declare function ModalBody({ children, className, style }: ModalPartProps): import("react/jsx-runtime").JSX.Element;
+declare function ModalFooter({ children, className, style }: ModalPartProps): import("react/jsx-runtime").JSX.Element;
+type ModalCloseProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: false;
+};
+declare function ModalClose({ onClick, ...props }: ModalCloseProps): import("react/jsx-runtime").JSX.Element;
+export declare const Modal: typeof ModalRoot & {
+    Header: typeof ModalHeader;
+    Body: typeof ModalBody;
+    Footer: typeof ModalFooter;
+    Close: typeof ModalClose;
+};
+export {};
 //# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,aAAa,EAClB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAU3D,MAAM,MAAM,UAAU,GAAG;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,KAAK,CAAC,EAClB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,mBAA0B,EAC1B,MAAM,GACT,EAAE,UAAU,kDAiKZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAU3D,MAAM,MAAM,UAAU,GAAG;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACjD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,cAAc,EAAE,MAAM,IAAI,CAAA;KAAC,KAAK,IAAI,CAAC;IAChE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAQF,iBAAS,SAAS,CAAC,EACf,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EACN,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,eAAe,EACf,mBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,MAAM,GACT,EAAE,UAAU,kDA8IZ;AA4DD,KAAK,cAAc,GAAG;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAC,EAAE,cAAc,2CAMhE;AAED,iBAAS,SAAS,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAC,EAAE,cAAc,2CAM9D;AAED,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAC,EAAE,cAAc,2CAMhE;AAED,KAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC7D,OAAO,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAAC,OAAO,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,2CAYvD;AAED,eAAO,MAAM,KAAK;;;;;CAKhB,CAAC"}

package/dist/components/Modal/Modal.js

@@ -1,23 +1,18 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useId, useLayoutEffect, useRef, } from 'react';
-import { LuX } from 'react-icons/lu';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, } from 'react';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { usePresence } from '../../hooks/usePresence';
-import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
 import { OrcestrThemeContext } from '../../theme/useTheme';
 import { cn } from '../../utils/cn';
-import { IconButton } from '../IconButton/IconButton';
-import { lockOverlayScroll, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
+import { lockOverlayScroll, overlayLayerZIndex, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
 import { Portal } from '../Portal/Portal';
-export function Modal({ open, onOpenChange, title, description, children, footer, maxWidth, minHeight, overlayColor, overlayOpacity, overlayBlur, borderColor, radius, shadow, animationDuration, animation, overlayClassName, overlayStyle, className, contentClassName, bodyClassName, closeOnOverlayClick = true, testId, }) {
-    const { copy } = useOrcestrUiLocale();
+const ModalContext = createContext(null);
+function ModalRoot({ open, onOpenChange, children, maxWidth, minHeight, overlayColor, overlayOpacity, overlayBlur, borderColor, radius, shadow, animationDuration, animation, overlayClassName, overlayStyle, className, contentClassName, contentStyle, onKeyDown, onOpenAutoFocus, closeOnOverlayClick = true, ariaLabel, ariaLabelledBy, ariaDescribedBy, testId, }) {
     const themeContext = useContext(OrcestrThemeContext);
     const overlayContext = useOverlayContext();
     const layerRef = useRef(null);
     const contentRef = useRef(null);
-    const titleId = useId();
-    const descriptionId = useId();
     const actualAnimationDuration = animationDuration ?? themeContext?.theme.motion.modalDuration ?? '380ms';
     const actualAnimation = animation ?? themeContext?.theme.motion.modalAnimation ?? 'zoom-blur';
     const actualMaxWidth = maxWidth ?? themeContext?.theme.components.modalMaxWidth ?? 680;
@@ -28,7 +23,7 @@ export function Modal({ open, onOpenChange, title, description, children, footer
     const actualAnimationEase = themeContext?.theme.motion.ease ?? 'cubic-bezier(0.22, 1, 0.36, 1)';
     const { present, state } = usePresence(open, actualAnimationMs);
     const layerIndex = useOverlayLayerIndex(present);
-    const zIndex = overlayContext.zIndex.modal + layerIndex * 20;
+    const zIndex = overlayLayerZIndex(overlayContext.zIndex, 'modal', layerIndex);
     const overlayBlurValue = cssLength(actualOverlayBlur) ?? '10px';
     const overlayBackdropFilter = `blur(${overlayBlurValue})`;
     const overlayBackground = modalOverlayBackground(actualOverlayColor, actualOverlayOpacity);
@@ -38,6 +33,11 @@ export function Modal({ open, onOpenChange, title, description, children, footer
             return;
         return lockOverlayScroll();
     }, [open]);
+    useEffect(() => {
+        if (!open || !onOpenAutoFocus)
+            return;
+        onOpenAutoFocus({ preventDefault: () => undefined });
+    }, [onOpenAutoFocus, open]);
     useLayoutEffect(() => {
         const layer = layerRef.current;
         if (!present || !layer || !layer.animate)
@@ -89,7 +89,7 @@ export function Modal({ open, onOpenChange, title, description, children, footer
                     if (closeOnOverlayClick)
                         onOpenChange(false);
                 }
-            }, children: _jsxs("div", { ref: contentRef, role: 'dialog', "aria-modal": 'true', "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, className: cn('oui-modal-content', contentClassName), "data-state": state, "data-animation": actualAnimation, "data-testid": testId ? `${testId}-content` : undefined, style: {
+            }, children: _jsx("div", { ref: contentRef, role: 'dialog', "aria-modal": 'true', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className: cn('oui-modal-content', contentClassName), "data-state": state, "data-animation": actualAnimation, "data-testid": testId ? `${testId}-content` : undefined, style: {
                     width: typeof actualMaxWidth === 'number'
                         ? `min(calc(100vw - 24px), ${actualMaxWidth}px)`
                         : `min(calc(100vw - 24px), ${actualMaxWidth})`,
@@ -99,7 +99,8 @@ export function Modal({ open, onOpenChange, title, description, children, footer
                     '--oui-modal-border-color': borderColor,
                     '--oui-modal-radius': cssLength(radius),
                     '--oui-modal-shadow': shadow,
-                }, children: [_jsxs("div", { className: 'oui-modal-header', children: [_jsxs("div", { className: 'oui-modal-title-wrap', children: [title ? (_jsx("h2", { id: titleId, className: 'oui-modal-title', children: title })) : null, description ? (_jsx("p", { id: descriptionId, className: 'oui-modal-description', children: description })) : null] }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": copy.common.close, onClick: () => onOpenChange(false) })] }), _jsx("div", { className: cn('oui-modal-body', bodyClassName), children: children }), footer ? _jsx("div", { className: 'oui-modal-footer', children: footer }) : null] }) }) }));
+                    ...contentStyle,
+                }, onKeyDown: onKeyDown, children: _jsx(ModalContext.Provider, { value: { onOpenChange }, children: children }) }) }) }));
 }
 function cssLength(value) {
     if (value === undefined)
@@ -153,3 +154,26 @@ function hexToRgb(value) {
     }
     return null;
 }
+function ModalHeader({ children, className, style }) {
+    return (_jsx("div", { className: cn('oui-modal-header', className), style: style, children: children }));
+}
+function ModalBody({ children, className, style }) {
+    return (_jsx("div", { className: cn('oui-modal-body', className), style: style, children: children }));
+}
+function ModalFooter({ children, className, style }) {
+    return (_jsx("div", { className: cn('oui-modal-footer', className), style: style, children: children }));
+}
+function ModalClose({ onClick, ...props }) {
+    const context = useContext(ModalContext);
+    return (_jsx("button", { type: 'button', ...props, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                context?.onOpenChange(false);
+        } }));
+}
+export const Modal = Object.assign(ModalRoot, {
+    Header: ModalHeader,
+    Body: ModalBody,
+    Footer: ModalFooter,
+    Close: ModalClose,
+});

package/dist/components/Overlay/OverlayProvider.d.ts

@@ -14,6 +14,7 @@ export type OverlayProviderProps = {
 export declare function OverlayProvider({ children, container, zIndex, testId, }: OverlayProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useOverlayContext(): OverlayContextValue;
 export declare function useOverlayLayerIndex(active: boolean): number;
+export declare function overlayLayerZIndex(zIndex: OverlayZIndex, kind: OverlayLayerKind, layerIndex: number): number;
 export declare function lockOverlayScroll(): () => void;
 export {};
 //# sourceMappingURL=OverlayProvider.d.ts.map

package/dist/components/Overlay/OverlayProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/OverlayProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACvB,eAAe,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAqBF,wBAAgB,eAAe,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,GACT,EAAE,oBAAoB,2CAiCtB;AAED,wBAAgB,iBAAiB,wBAEhC;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,OAAO,UAsBnD;AAKD,wBAAgB,iBAAiB,eAYhC"}
+{"version":3,"file":"OverlayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/OverlayProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACvB,eAAe,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAwBF,wBAAgB,eAAe,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,GACT,EAAE,oBAAoB,2CAiCtB;AAED,wBAAgB,iBAAiB,wBAEhC;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,OAAO,UA4BnD;AAED,wBAAgB,kBAAkB,CAC9B,MAAM,EAAE,aAAa,EACrB,IAAI,EAAE,gBAAgB,EACtB,UAAU,EAAE,MAAM,UAQrB;AAKD,wBAAgB,iBAAiB,eAYhC"}

package/dist/components/Overlay/OverlayProvider.js

@@ -7,6 +7,8 @@ const defaultZIndex = {
     modal: 1000,
     toast: 2147483000,
 };
+const OVERLAY_LAYER_STEP = 20;
+const DROPDOWN_LAYER_OFFSET = 10;
 const OverlayContext = createContext({
     portalContainer: null,
     zIndex: defaultZIndex,
@@ -36,6 +38,12 @@ export function useOverlayContext() {
 export function useOverlayLayerIndex(active) {
     const [id] = useState(() => Symbol('oui-layer'));
     const [index, setIndex] = useState(0);
+    const currentIndex = layerIds.indexOf(id);
+    const optimisticIndex = active
+        ? currentIndex === -1
+            ? layerIds.length
+            : currentIndex
+        : index;
     useEffect(() => {
         if (!active)
             return;
@@ -54,7 +62,16 @@ export function useOverlayLayerIndex(active) {
             emitLayerChange();
         };
     }, [active, id]);
-    return index;
+    return optimisticIndex;
+}
+export function overlayLayerZIndex(zIndex, kind, layerIndex) {
+    if (kind === 'toast')
+        return zIndex.toast;
+    if (kind === 'dropdown') {
+        const base = Math.max(zIndex.dropdown, zIndex.modal, zIndex.overlay);
+        return base + layerIndex * OVERLAY_LAYER_STEP + DROPDOWN_LAYER_OFFSET;
+    }
+    return zIndex[kind] + layerIndex * OVERLAY_LAYER_STEP;
 }
 let scrollLockCount = 0;
 let previousBodyOverflow = '';

package/dist/components/PaginatedCombobox/PaginatedCombobox.d.ts

@@ -29,6 +29,7 @@ export type PaginatedComboboxProps<T> = {
     disabled?: boolean;
     clearable?: boolean;
     showChevron?: boolean;
+    trigger?: ReactNode;
     size?: UiSize;
     maxHeight?: number;
     closeOnSelect?: boolean;
@@ -44,5 +45,5 @@ export type PaginatedComboboxProps<T> = {
     debounceMs?: number;
     testId?: string;
 };
-export declare function PaginatedCombobox<T>({ loadPage, getItemId, renderOption, renderSelectedLabel, value, onChange, placeholder, emptyText, loadingText, errorText, retryLabel, searchPlaceholder, clearLabel, disabled, clearable, showChevron, size, maxHeight, closeOnSelect, isItemSelected, searchAction, optionAction, resetKey, debounceMs, testId, }: PaginatedComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function PaginatedCombobox<T>({ loadPage, getItemId, renderOption, renderSelectedLabel, value, onChange, placeholder, emptyText, loadingText, errorText, retryLabel, searchPlaceholder, clearLabel, disabled, clearable, showChevron, trigger, size, maxHeight, closeOnSelect, isItemSelected, searchAction, optionAction, resetKey, debounceMs, testId, }: PaginatedComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PaginatedCombobox.d.ts.map

package/dist/components/PaginatedCombobox/PaginatedCombobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatedCombobox.d.ts","sourceRoot":"","sources":["../../../src/components/PaginatedCombobox/PaginatedCombobox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PaginatedCombobox.d.ts","sourceRoot":"","sources":["../../../src/components/PaginatedCombobox/PaginatedCombobox.tsx"],"names":[],"mappings":"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"}

package/dist/components/PaginatedCombobox/PaginatedCombobox.js

@@ -11,7 +11,7 @@ import { Spinner } from '../Spinner/Spinner';
 import { TextField } from '../TextField/TextField';
 import { Tooltip } from '../Tooltip/Tooltip';
 const DEFAULT_DEBOUNCE_MS = 200;
-export function PaginatedCombobox({ loadPage, getItemId, renderOption, renderSelectedLabel, value, onChange, placeholder, emptyText, loadingText, errorText, retryLabel, searchPlaceholder, clearLabel, disabled = false, clearable = false, showChevron = true, size = 3, maxHeight = 280, closeOnSelect = true, isItemSelected, searchAction, optionAction, resetKey, debounceMs = DEFAULT_DEBOUNCE_MS, testId, }) {
+export function PaginatedCombobox({ loadPage, getItemId, renderOption, renderSelectedLabel, value, onChange, placeholder, emptyText, loadingText, errorText, retryLabel, searchPlaceholder, clearLabel, disabled = false, clearable = false, showChevron = true, trigger, size = 3, maxHeight = 280, closeOnSelect = true, isItemSelected, searchAction, optionAction, resetKey, debounceMs = DEFAULT_DEBOUNCE_MS, testId, }) {
     const { copy } = useOrcestrUiLocale();
     const actualPlaceholder = placeholder ?? copy.common.selectValue;
     const actualEmptyText = emptyText ?? copy.common.noOptions;
@@ -191,14 +191,14 @@ export function PaginatedCombobox({ loadPage, getItemId, renderOption, renderSel
             if (!next) {
                 navigation.reset();
             }
-        }, trigger: _jsx(Button, { type: 'button', v: 'surface', size: size, disabled: disabled, fullWidth: true, pressAnimation: 'none', className: 'oui-combobox-trigger', "data-testid": testId, "data-state": open ? 'open' : 'closed', onKeyDown: handleKeyDown, rightIcon: _jsxs("span", { className: 'oui-combobox-trigger-actions', children: [canClear ? (_jsx("span", { "aria-label": clearLabel ?? copy.common.clear, className: 'oui-combobox-clear', onPointerDown: (event) => {
+        }, trigger: trigger ?? (_jsx(Button, { type: 'button', v: 'surface', size: size, disabled: disabled, fullWidth: true, pressAnimation: 'none', className: 'oui-combobox-trigger', "data-testid": testId, "data-state": open ? 'open' : 'closed', onKeyDown: handleKeyDown, rightIcon: _jsxs("span", { className: 'oui-combobox-trigger-actions', children: [canClear ? (_jsx("span", { "aria-label": clearLabel ?? copy.common.clear, className: 'oui-combobox-clear', onPointerDown: (event) => {
                             event.preventDefault();
                             event.stopPropagation();
                         }, onClick: (event) => {
                             event.preventDefault();
                             event.stopPropagation();
                             clear();
-                        }, children: _jsx(LuX, { size: 14 }) })) : null, showChevron ? _jsx(LuChevronsUpDown, { size: 15 }) : null] }), children: _jsx("span", { className: triggerLabel ? 'oui-combobox-trigger-label' : 'oui-combobox-placeholder', children: triggerLabel ?? actualPlaceholder }) }), className: 'oui-combobox-content', align: 'start', sideOffset: 4, matchTriggerWidth: true, disabled: disabled, children: [_jsxs("div", { className: 'oui-combobox-search-wrap', children: [_jsx(TextField, { autoFocus: true, size: 2, placeholder: actualSearchPlaceholder, value: searchInput, onChange: (event) => setSearchInput(event.target.value), onKeyDown: handleKeyDown }), searchAction ? (_jsx(Tooltip, { content: actualSearchActionLabel, children: _jsx(IconButton, { size: 2, v: 'soft', icon: _jsx(LuPlus, { size: 14 }), className: 'oui-combobox-search-action', "aria-label": actualSearchActionLabel, disabled: searchAction.disabled, onClick: () => {
+                        }, children: _jsx(LuX, { size: 14 }) })) : null, showChevron ? _jsx(LuChevronsUpDown, { size: 15 }) : null] }), children: _jsx("span", { className: triggerLabel ? 'oui-combobox-trigger-label' : 'oui-combobox-placeholder', children: triggerLabel ?? actualPlaceholder }) })), className: 'oui-combobox-content', align: 'start', sideOffset: 4, matchTriggerWidth: true, disabled: disabled, children: [_jsxs("div", { className: 'oui-combobox-search-wrap', children: [_jsx(TextField, { autoFocus: true, size: 2, placeholder: actualSearchPlaceholder, value: searchInput, onChange: (event) => setSearchInput(event.target.value), onKeyDown: handleKeyDown }), searchAction ? (_jsx(Tooltip, { content: actualSearchActionLabel, children: _jsx(IconButton, { size: 2, v: 'soft', icon: _jsx(LuPlus, { size: 14 }), className: 'oui-combobox-search-action', "aria-label": actualSearchActionLabel, disabled: searchAction.disabled, onClick: () => {
                                 setOpen(false);
                                 searchAction.onClick(searchInput);
                             } }) })) : null] }), _jsx("div", { ref: scrollRef, className: 'oui-combobox-scroll', style: { maxHeight }, tabIndex: -1, onKeyDown: handleKeyDown, children: isInitialLoading ? (_jsxs("div", { className: 'oui-combobox-state', children: [_jsx(Spinner, {}), _jsx("span", { className: 'oui-visually-hidden', children: actualLoadingText })] })) : error ? (_jsxs("div", { className: 'oui-combobox-state', children: [_jsx("span", { children: actualErrorText }), _jsx(Button, { size: 1, v: 'surface', onClick: () => void fetchPage(1, debouncedSearch), children: actualRetryLabel })] })) : items.length === 0 ? (_jsx("div", { className: 'oui-combobox-empty', children: actualEmptyText })) : (_jsxs("div", { className: 'oui-combobox-options', children: [items.map((item) => {

package/dist/components/Popover/Popover.d.ts

@@ -1,6 +1,7 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { type FloatingAlign, type FloatingSide } from '../../hooks/useFloatingPosition';
-export type PopoverProps = {
+import { type SystemProps } from '../../theme/systemProps';
+export type PopoverProps = SystemProps & Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     trigger: ReactNode;
     children: ReactNode;
     open?: boolean;
@@ -13,7 +14,40 @@ export type PopoverProps = {
     matchTriggerWidth?: boolean;
     disabled?: boolean;
     className?: string;
+    contentStyle?: CSSProperties;
+    contentRef?: Ref<HTMLDivElement>;
+    onOpenAutoFocus?: (event: {
+        preventDefault: () => void;
+    }) => void;
+    onInteractOutside?: (event: Event) => void;
     testId?: string;
 };
-export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, side, align, sideOffset, collisionPadding, matchTriggerWidth, disabled, className, testId, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, side, align, sideOffset, collisionPadding, matchTriggerWidth, disabled, className, contentStyle, contentRef: externalContentRef, style: contentStyleProp, onOpenAutoFocus, onInteractOutside, testId, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+type PopoverRootProps = Pick<PopoverProps, 'open' | 'defaultOpen' | 'onOpenChange'> & {
+    children: ReactNode;
+};
+type PopoverTriggerProps = {
+    children: ReactNode;
+};
+declare function PopoverRoot({ children, ...props }: PopoverRootProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PopoverTrigger(_props: PopoverTriggerProps): null;
+export declare namespace Popover {
+    const Root: typeof PopoverRoot;
+    const Trigger: typeof PopoverTrigger;
+    const Content: import("react").ForwardRefExoticComponent<SystemProps & Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        children: ReactNode;
+        width?: number | string;
+        size?: number | string;
+        align?: FloatingAlign;
+        side?: FloatingSide;
+        sideOffset?: number;
+        matchTriggerWidth?: boolean;
+        className?: string;
+        onOpenAutoFocus?: (event: {
+            preventDefault: () => void;
+        }) => void;
+        onInteractOutside?: (event: Event) => void;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+}
+export {};
 //# sourceMappingURL=Popover.d.ts.map

package/dist/components/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EASH,KAAK,SAAS,EAEjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAkBtF,MAAM,MAAM,YAAY,GAAG;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACpB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,IAAe,EACf,KAAe,EACf,UAAc,EACd,gBAAoB,EACpB,iBAAyB,EACzB,QAAgB,EAChB,SAAS,EACT,MAAM,GACT,EAAE,YAAY,2CAsGd"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAWH,KAAK,aAAa,EAClB,KAAK,cAAc,EAEnB,KAAK,SAAS,EACd,KAAK,GAAG,EACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAGtF,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAqB3E,MAAM,MAAM,YAAY,GAAG,WAAW,GAClC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACnD,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,cAAc,EAAE,MAAM,IAAI,CAAA;KAAC,KAAK,IAAI,CAAC;IAChE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACpB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,IAAe,EACf,KAAe,EACf,UAAc,EACd,gBAAoB,EACpB,iBAAyB,EACzB,QAAgB,EAChB,SAAS,EACT,YAAY,EACZ,UAAU,EAAE,kBAAkB,EAC9B,KAAK,EAAE,gBAAgB,EACvB,eAAe,EACf,iBAAiB,EACjB,MAAM,EACN,GAAG,KAAK,EACX,EAAE,YAAY,2CA2Hd;AAED,KAAK,gBAAgB,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC,GAAG;IAClF,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAgBF,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,kDAuB1D;AAED,iBAAS,cAAc,CAAC,MAAM,EAAE,mBAAmB,QAElD;AA2BD,yBAAiB,OAAO,CAAC;IACd,MAAM,IAAI,oBAAc,CAAC;IACzB,MAAM,OAAO,uBAAiB,CAAC;IAC/B,MAAM,OAAO;kBArEV,SAAS;gBACX,MAAM,GAAG,MAAM;eAChB,MAAM,GAAG,MAAM;gBACd,aAAa;eACd,YAAY;qBACN,MAAM;4BACC,OAAO;oBACf,MAAM;0BACA,CAAC,KAAK,EAAE;YAAC,cAAc,EAAE,MAAM,IAAI,CAAA;SAAC,KAAK,IAAI;4BAC3C,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;sDA4DL,CAAC;CACzC"}