@ringcentral/spring-ui 1.11.2 → 1.13.0

package/Option.js

@@ -1,35 +1,22 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { u as useMenuItemSelectContext, M as MenuItem, g as composeEventHandlers } from './chunks/useMenuItemSelect.js';
-import '@ringcentral/spring-base';
-import 'tabbable';
-import './chunks/useListNavigation.js';
-import './chunks/Menu.js';
-import './VirtualizedList.js';
-import '@ringcentral/spring-icon';
-import './chunks/Icon.js';
-import './chunks/useAnimationFrame.js';
-import './chunks/useNestedParentMenu.js';
-import './chunks/useNestedMenuItem.js';
-import './ListNavigation.js';
-import './chunks/Popover.js';
-import '@floating-ui/react-dom';
-import 'framer-motion';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getGrow.js';
-import './chunks/Modal.js';
-import '@mui/base';
-import './chunks/getFade.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './Popper.js';
-import './chunks/PopperPaper.js';
-import 'react-virtuoso';
-import './chunks/List.js';
-
-const Option = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Option' });
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { MenuItem as MenuItem_MenuItem, useMenuItemSelectContext } from "./MenuItem.js";
+import { composeEventHandlers } from "./chunks/4491.js";
+
+
+
+
+
+
+
+
+
+const Option = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Option'
+    });
     const { children, value, onClick: onClickProp, autoClose: autoCloseProp, ...rest } = props;
     const selectContextValue = useMenuItemSelectContext();
     if (selectContextValue === null) {
@@ -37,11 +24,22 @@ const Option = forwardRef((inProps, ref) => {
     }
     const { handleSelect, getMenuItemProps } = selectContextValue;
     const autoClose = autoCloseProp ?? selectContextValue.selectMode === 'single';
-    const onClick = composeEventHandlers(onClickProp, () => {
+    const onClick = composeEventHandlers(onClickProp, ()=>{
         handleSelect(value);
     });
-    return (jsx(MenuItem, { ...getMenuItemProps(value), ...rest, onClick: onClick, ref: ref, autoClose: autoClose, children: children }));
+    return /*#__PURE__*/ jsx(MenuItem_MenuItem, {
+        ...getMenuItemProps(value),
+        ...rest,
+        onClick: onClick,
+        ref: ref,
+        autoClose: autoClose,
+        children: children
+    });
 });
 Option.displayName = 'SuiOption';
 
+
+
+
+
 export { Option };

package/Overlap.js

@@ -1,9 +1,56 @@
-export { O as Overlap } from './chunks/Overlap.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
 
-var Overlap = {"sui-overlap-root":"sui-overlap-root","sui-overlap-floater":"sui-overlap-floater","sui-overlap-top-left":"sui-overlap-top-left","sui-overlap-top-right":"sui-overlap-top-right","sui-overlap-bottom-left":"sui-overlap-bottom-left","sui-overlap-bottom-right":"sui-overlap-bottom-right","sui-overlap-show-floater-on-hover-only":"sui-overlap-show-floater-on-hover-only"};
 
-export { Overlap as overlapStyle };
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Overlap = ({"sui-overlap-root":"sui-overlap-root","sui-overlap-floater":"sui-overlap-floater","sui-overlap-top-left":"sui-overlap-top-left","sui-overlap-top-right":"sui-overlap-top-right","sui-overlap-bottom-left":"sui-overlap-bottom-left","sui-overlap-bottom-right":"sui-overlap-bottom-right","sui-overlap-show-floater-on-hover-only":"sui-overlap-show-floater-on-hover-only"});
+
+
+
+
+
+function isKeyPosition(position) {
+    return typeof position === 'string';
+}
+const Overlap_Overlap = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Overlap'
+    });
+    const { classes, floater, position, children, className, showFloaterOnHoverOnly = false, component: OverlapRoot = 'div', ...rest } = props;
+    const cls = useClasses('overlap', classes, className);
+    let widget = null;
+    if (floater) {
+        const style = !isKeyPosition(position) ? position : undefined;
+        const classes = cls('floater', isKeyPosition(position) && position);
+        widget = /*#__PURE__*/ jsx("div", {
+            style: style,
+            className: classes,
+            children: floater
+        });
+    }
+    return /*#__PURE__*/ jsxs(OverlapRoot, {
+        ...rest,
+        ref: ref,
+        className: cls('root', {
+            'show-floater-on-hover-only': showFloaterOnHoverOnly
+        }),
+        children: [
+            children,
+            widget
+        ]
+    });
+});
+Overlap_Overlap.displayName = 'SuiOverlap';
+
+
+
+
+
+
+export { Overlap as overlapStyle, Overlap_Overlap as Overlap };

package/PageHeader.js

@@ -1,58 +1,96 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
 
-var PageHeader$1 = {"sui-page-header-root":"sui-page-header-root","sui-page-header-left-root":"sui-page-header-left-root","sui-page-header-right-root":"sui-page-header-right-root","sui-page-header-center-root":"sui-page-header-center-root","sui-page-header-title-root":"sui-page-header-title-root","sui-page-header-integrated":"sui-page-header-integrated","sui-page-header-detached":"sui-page-header-detached","sui-compact":"sui-compact"};
 
-const PageHeader = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'PageHeader' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var PageHeader = ({"sui-page-header-root":"sui-page-header-root","sui-page-header-left-root":"sui-page-header-left-root","sui-page-header-right-root":"sui-page-header-right-root","sui-page-header-center-root":"sui-page-header-center-root","sui-page-header-title-root":"sui-page-header-title-root","sui-page-header-integrated":"sui-page-header-integrated","sui-page-header-detached":"sui-page-header-detached","sui-compact":"sui-compact"});
+
+
+
+
+
+const PageHeader_PageHeader = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'PageHeader'
+    });
     const { classes, className, children, variant = 'integrated', ...rest } = props;
     const cls = useClassesWithMode('page-header', classes, className);
-    return (jsx("header", { className: cls('root', {
-            [variant]: true,
-        }), ...rest, ref: ref, children: children }));
+    return /*#__PURE__*/ jsx("header", {
+        className: cls('root', {
+            [variant]: true
+        }),
+        ...rest,
+        ref: ref,
+        children: children
+    });
 });
-PageHeader.displayName = 'SuiPageHeader';
-const PageHeaderLeft = forwardRef((inProps, ref) => {
+PageHeader_PageHeader.displayName = 'SuiPageHeader';
+const PageHeaderLeft = /*#__PURE__*/ forwardRef((inProps, ref)=>{
     const props = useThemeProps({
         props: inProps,
-        name: 'PageHeaderLeft',
+        name: 'PageHeaderLeft'
     });
     const { className, ...rest } = props;
     const cls = useClasses('page-header-left', undefined, className);
-    return jsx("div", { className: cls('root'), ...rest, ref: ref });
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root'),
+        ...rest,
+        ref: ref
+    });
 });
 PageHeaderLeft.displayName = 'SuiPageHeaderLeft';
-const PageHeaderCenter = forwardRef((inProps, ref) => {
+const PageHeaderCenter = /*#__PURE__*/ forwardRef((inProps, ref)=>{
     const props = useThemeProps({
         props: inProps,
-        name: 'PageHeaderCenter',
+        name: 'PageHeaderCenter'
     });
     const { className, ...rest } = props;
     const cls = useClasses('page-header-center', undefined, className);
-    return jsx("div", { className: cls('root'), ...rest, ref: ref });
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root'),
+        ...rest,
+        ref: ref
+    });
 });
 PageHeaderCenter.displayName = 'SuiPageHeaderCenter';
-const PageHeaderTitle = forwardRef((inProps, ref) => {
+const PageHeaderTitle = /*#__PURE__*/ forwardRef((inProps, ref)=>{
     const props = useThemeProps({
         props: inProps,
-        name: 'PageHeaderTitle',
+        name: 'PageHeaderTitle'
     });
     const { className, ...rest } = props;
     const cls = useClasses('page-header-title', undefined, className);
-    return jsx("div", { className: cls('root'), ...rest, ref: ref });
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root'),
+        ...rest,
+        ref: ref
+    });
 });
 PageHeaderTitle.displayName = 'SuiPageHeaderTitle';
-const PageHeaderRight = forwardRef((inProps, ref) => {
+const PageHeaderRight = /*#__PURE__*/ forwardRef((inProps, ref)=>{
     const props = useThemeProps({
         props: inProps,
-        name: 'PageHeaderRight',
+        name: 'PageHeaderRight'
     });
     const { className, ...rest } = props;
     const cls = useClasses('page-header-right', undefined, className);
-    return jsx("div", { className: cls('root'), ...rest, ref: ref });
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root'),
+        ...rest,
+        ref: ref
+    });
 });
 PageHeaderRight.displayName = 'SuiPageHeaderRight';
 
-export { PageHeader, PageHeaderCenter, PageHeaderLeft, PageHeaderRight, PageHeaderTitle, PageHeader$1 as pageHeaderStyle };
+
+
+
+
+
+export { PageHeader as pageHeaderStyle, PageHeaderCenter, PageHeaderLeft, PageHeaderRight, PageHeaderTitle, PageHeader_PageHeader as PageHeader };

package/PickerTextField.js

@@ -1,33 +1,156 @@
-export { P as PickerTextField } from './chunks/PickerTextField.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import './chunks/Icon.js';
-import '@ringcentral/spring-theme';
-import './chunks/Popover.js';
-import '@floating-ui/react-dom';
-import 'framer-motion';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getGrow.js';
-import './chunks/Modal.js';
-import '@mui/base';
-import './chunks/getFade.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './Popper.js';
-import './chunks/PopperPaper.js';
-import './chunks/useHelperTextId.js';
-import 'clsx';
-import './chunks/TextField.js';
-import '@ringcentral/spring-icon';
-import './chunks/ShowHideEye.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/IconButtonLabel.js';
-import './chunks/Squircle.js';
-import './chunks/withTooltip.js';
-import './chunks/Tooltip.js';
-import './chunks/VisuallyHidden.js';
-
-var PickerTextField = {"sui-picker-text-field-form-field-content":"sui-picker-text-field-form-field-content","sui-picker-text-field-input":"sui-picker-text-field-input","sui-picker-text-field-has-value":"sui-picker-text-field-has-value","sui-picker-text-field-end-icon":"sui-picker-text-field-end-icon","sui-focused":"sui-focused"};
-
-export { PickerTextField as pickerTextFieldStyle };
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { combineClasses, useA11yKeyEvent, useClasses, useEventCallback, useForkRef, useId } from "@ringcentral/spring-base";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import { Popover as Popover_Popover } from "./Popover.js";
+import { useHelperTextId } from "./FormField.js";
+import { TextField as TextField_TextField } from "./TextField.js";
+import { VisuallyHidden as VisuallyHidden_VisuallyHidden } from "./VisuallyHidden.js";
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var PickerTextField = ({"sui-picker-text-field-root":"sui-picker-text-field-root","sui-disabled":"sui-disabled","sui-picker-text-field-form-field-content":"sui-picker-text-field-form-field-content","sui-picker-text-field-input":"sui-picker-text-field-input","sui-picker-text-field-has-value":"sui-picker-text-field-has-value","sui-text-field-clear":"sui-text-field-clear","sui-picker-text-field-end-icon":"sui-picker-text-field-end-icon","sui-focused":"sui-focused"});
+
+
+
+
+
+
+
+
+
+const PICKER_DISPLAY_NAME = 'SuiPickerTextField';
+const PickerTextField_PickerTextField = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { disabled, value, defaultValue, onClear, action, inputProps = {}, announcementText, PopoverProps, children, endIconSymbol, clearText, clearBtn, ClearButtonProps, onKeyDown, onClick, onClose, classes, textInputClasses, className, id: idProp, RootProps, ...rest } = props;
+    const generatedId = useId(PICKER_DISPLAY_NAME, true);
+    const idForInput = idProp ?? inputProps.id ?? generatedId;
+    const [open, setOpen] = useState(false);
+    const [isPopoverExited, setIsPopoverExited] = useState(!open);
+    const cls = useClasses('picker-text-field', classes, className);
+    // Anchor on the field content instead of the FormField root so the popover
+    // aligns with the input rather than below the helperText, matching
+    // Select and Autocomplete.
+    const anchorRef = useRef(null);
+    const handleContentRef = useForkRef(RootProps?.contentRef, anchorRef);
+    const idForHelperText = useHelperTextId({
+        helperText: rest.helperText,
+        id: idForInput,
+        FormHelperTextProps: rest.FormHelperTextProps
+    });
+    const idForInstruction = announcementText ? `${idForInput}-instruction` : undefined;
+    const ariaDescribedBy = Array.from(new Set([
+        inputProps['aria-describedby'],
+        idForHelperText,
+        idForInstruction
+    ].filter(Boolean).flatMap((value)=>`${value}`.split(/\s+/).filter(Boolean)))).join(' ');
+    const handleA11yKeydown = useA11yKeyEvent(()=>{
+        handleOpen(true);
+    });
+    const handleOpen = useEventCallback((open)=>{
+        if (disabled && open) {
+            return;
+        }
+        if (open) {
+            setIsPopoverExited(false);
+        }
+        setOpen(open);
+    });
+    useImperativeHandle(action, ()=>({
+            close: ()=>{
+                handleOpen(false);
+            }
+        }), [
+        handleOpen
+    ]);
+    const toClasses = useMemo(()=>combineClasses(textInputClasses, {
+            formFieldContent: cls('form-field-content', {
+                'has-value': Boolean(value)
+            }),
+            root: cls('root', {
+                'has-value': Boolean(value)
+            }),
+            input: cls('input')
+        }), [
+        cls,
+        textInputClasses,
+        value
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(TextField_TextField, {
+                classes: toClasses,
+                value: value,
+                defaultValue: defaultValue,
+                endAdornment: endIconSymbol && /*#__PURE__*/ jsx(Icon_Icon, {
+                    className: cls('end-icon'),
+                    symbol: endIconSymbol
+                }),
+                id: idForInput,
+                ref: ref,
+                RootProps: {
+                    ...RootProps,
+                    contentRef: handleContentRef
+                },
+                focused: open || !open && !isPopoverExited,
+                disabled: disabled,
+                clearBtn: clearBtn,
+                clearText: clearText,
+                ClearButtonProps: ClearButtonProps,
+                onClick: (e)=>{
+                    handleOpen(true);
+                    onClick?.(e);
+                },
+                onKeyDown: (e)=>{
+                    if (disabled) return;
+                    handleA11yKeydown(e);
+                    onKeyDown?.(e);
+                },
+                inputProps: {
+                    'aria-haspopup': true,
+                    ...inputProps,
+                    'aria-describedby': ariaDescribedBy || undefined
+                },
+                ...rest,
+                readOnly: true,
+                onClear: (e)=>{
+                    onClear?.(e);
+                    // prevent open popover
+                    e.stopPropagation();
+                }
+            }),
+            /*#__PURE__*/ jsx(Popover_Popover, {
+                bordered: true,
+                open: open,
+                anchorEl: anchorRef.current,
+                onClose: (...args)=>{
+                    handleOpen(false);
+                    onClose?.(...args);
+                },
+                placement: "bottom-start",
+                ...PopoverProps,
+                onExitComplete: ()=>{
+                    PopoverProps?.onExitComplete?.();
+                    setIsPopoverExited(true);
+                },
+                children: children
+            }),
+            idForInstruction && /*#__PURE__*/ jsx(VisuallyHidden_VisuallyHidden, {
+                id: idForInstruction,
+                children: announcementText
+            })
+        ]
+    });
+});
+PickerTextField_PickerTextField.displayName = PICKER_DISPLAY_NAME;
+
+
+
+
+
+
+
+
+
+export { PickerTextField as pickerTextFieldStyle, PickerTextField_PickerTextField as PickerTextField };