@ringcentral/spring-ui 1.11.2 → 1.13.0

package/Tooltip.js

@@ -1,23 +1,48 @@
-export { T as Tooltip, a as TooltipTrigger, b as TooltipView } from './chunks/Tooltip.js';
-export { u as useTooltipForceHide } from './chunks/useTooltipForceHide.js';
-export { w as withTooltip } from './chunks/withTooltip.js';
-import 'react/jsx-runtime';
-import '@ringcentral/spring-theme';
-import 'framer-motion';
-import 'react';
-import '@ringcentral/spring-base';
-import 'clsx';
-import './chunks/Icon.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import '@mui/base';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/PopperPaper.js';
-
-var TooltipView = {"sui-tooltip-view-root":"sui-tooltip-view-root","sui-tooltip-view-disable-interactions":"sui-tooltip-view-disable-interactions","sui-tooltip-trigger-wrapper":"sui-tooltip-trigger-wrapper","sui-tooltip-view-paper":"sui-tooltip-view-paper","sui-tooltip-view-paper-content":"sui-tooltip-view-paper-content","sui-tooltip-view-paper-content-medium":"sui-tooltip-view-paper-content-medium","sui-tooltip-view-icon":"sui-tooltip-view-icon","sui-tooltip-view-content":"sui-tooltip-view-content","sui-tooltip-view-neutral":"sui-tooltip-view-neutral","sui-tooltip-view-success":"sui-tooltip-view-success","sui-tooltip-view-danger":"sui-tooltip-view-danger","sui-tooltip-view-inverted":"sui-tooltip-view-inverted","sui-tooltip-view-force-hide":"sui-tooltip-view-force-hide"};
-
-export { TooltipView as tooltipViewStyle };
+import { useCallback, useEffect, useRef, useState } from "react";
+
+
+
+/**
+ * store tooltip open state when forceHide is true and set tooltip open to false
+ * restore open state once forceHide changed to false
+ */ const useTooltipForceHide = (forceHide)=>{
+    const [open, setOpen] = useState(false);
+    const openStateStore = useRef();
+    const onOpenStateChange = useCallback((event, isOpen)=>{
+        if (openStateStore.current !== undefined) {
+            openStateStore.current = isOpen;
+        } else {
+            setOpen(isOpen);
+        }
+    }, []);
+    useEffect(()=>{
+        if (open && forceHide) {
+            setOpen(false);
+            openStateStore.current = open;
+        }
+        if (!forceHide && openStateStore.current !== undefined) {
+            setOpen(openStateStore.current);
+            openStateStore.current = undefined;
+        }
+    }, [
+        open,
+        forceHide
+    ]);
+    return {
+        open,
+        onOpenStateChange
+    };
+};
+
+
+
+
+
+
+
+
+
+
+
+export { useTooltipForceHide };
+export { Tooltip, TooltipTrigger, TooltipView, tooltipViewStyle, withTooltip } from "./chunks/4535.js";

package/Tray.js

@@ -1,13 +1,237 @@
-export { T as Tray, a as TrayContext, b as TrayPanel, c as useTray, u as useTrayContext, d as useTrayNavigate, e as useTrayPanel } from './chunks/useTrayNavigate.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import 'framer-motion';
-import './chunks/Icon.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-
-var Tray = {"sui-tray-root":"sui-tray-root","sui-tray-panel-root":"sui-tray-panel-root","sui-tray-panel-activated":"sui-tray-panel-activated"};
-
-export { Tray as trayStyle };
+import { jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { logInDev, useClasses, useControlled, useEventCallback, useForkRef } from "@ringcentral/spring-base";
+import { motionTransition, useThemeProps } from "@ringcentral/spring-theme";
+import { AnimatePresence, motion } from "framer-motion";
+import "./chunks/4476.js";
+import { useMotionSafeTransition } from "./chunks/1294.js";
+
+
+
+
+
+
+
+
+
+const useTray = (parameters)=>{
+    const { value: valueProp, defaultValue, onChange, containerRef } = parameters;
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: 'useTray',
+        state: 'value'
+    });
+    if (value === undefined) {
+        throw new Error('Should set default TrayPanel using defaultValue (not controlled) or value (controlled)');
+    }
+    const [stack, setStack] = useState([
+        value
+    ]);
+    const [direction, setDirection] = useState('right');
+    const updateValue = (e, newValue)=>{
+        setValue(newValue);
+        onChange?.(e, newValue);
+        if (stack.includes(newValue)) {
+            setStack(stack.slice(0, stack.indexOf(newValue) + 1));
+            setDirection('left');
+        } else {
+            setStack([
+                ...stack,
+                newValue
+            ]);
+            setDirection('right');
+        }
+    };
+    const navigateTo = useEventCallback((newValue, event = null)=>{
+        let handledValue = newValue;
+        if (handledValue === null && stack.length === 1) {
+            if (process.env.NODE_ENV !== 'production') {
+                logInDev({
+                    scope: 'useTray',
+                    message: 'No TrayPanel left to return to'
+                });
+            }
+            return;
+        }
+        if (handledValue === null) {
+            // return to previous TrayPanel when value is false
+            handledValue = stack[stack.length - 2];
+        }
+        containerRef.current?.focus();
+        updateValue(event, handledValue);
+    });
+    const trayContextValue = useMemo(()=>{
+        return {
+            value,
+            navigateTo,
+            direction,
+            containerRef
+        };
+    }, [
+        value,
+        navigateTo,
+        direction,
+        containerRef
+    ]);
+    return {
+        trayContextValue
+    };
+};
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Tray = ({"sui-tray-root":"sui-tray-root","sui-tray-panel-root":"sui-tray-panel-root","sui-tray-panel-activated":"sui-tray-panel-activated"});
+
+
+const TrayContext = createContext(null);
+const useTrayContext = ()=>useContext(TrayContext);
+
+
+
+
+
+
+
+
+const Tray_Tray = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Tray'
+    });
+    const { classes, children, value, defaultValue, onChange, actions, className, ...rest } = props;
+    const cls = useClasses('tray', classes, className);
+    const rootRef = useRef(null);
+    const handleRootRef = useForkRef(ref, rootRef);
+    const { trayContextValue } = useTray({
+        value,
+        defaultValue,
+        onChange,
+        containerRef: rootRef
+    });
+    const { navigateTo } = trayContextValue;
+    useImperativeHandle(actions, ()=>({
+            navigateTo
+        }), [
+        navigateTo
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root'),
+        ref: handleRootRef,
+        ...rest,
+        tabIndex: -1,
+        children: /*#__PURE__*/ jsx(TrayContext.Provider, {
+            value: trayContextValue,
+            children: children
+        })
+    });
+});
+Tray_Tray.displayName = 'SuiTray';
+
+
+
+
+
+
+
+
+const useTrayPanel = (parameters)=>{
+    const { value } = parameters;
+    const context = useTrayContext();
+    if (context === null) {
+        throw new Error('No TrayContext provided, must be used within a Tray');
+    }
+    const activated = value === context.value;
+    return {
+        activated,
+        containerRef: context.containerRef,
+        direction: context.direction
+    };
+};
+
+
+
+
+
+
+
+
+const TrayPanel = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'TrayPanel'
+    });
+    const { children, classes, className } = props;
+    const { activated, containerRef, direction } = useTrayPanel(props);
+    const [display, setDisplay] = useState(activated);
+    useEffect(()=>{
+        if (activated) {
+            setDisplay(true);
+        }
+    }, [
+        activated
+    ]);
+    const cls = useClasses('tray-panel', classes, className);
+    const transition = useMotionSafeTransition(motionTransition["spring-01-fast"]);
+    return /*#__PURE__*/ jsx(AnimatePresence, {
+        initial: false,
+        children: display && /*#__PURE__*/ jsx(motion.div, {
+            ref: ref,
+            className: cls('root', {
+                activated
+            }),
+            "data-activated": activated,
+            transition: transition,
+            initial: 'enter',
+            animate: activated ? 'center' : 'exit',
+            onAnimationComplete: ()=>{
+                !activated && setDisplay(false);
+            },
+            variants: {
+                enter: {
+                    height: containerRef.current?.querySelector('[data-activated="false"]')?.offsetHeight,
+                    transform: direction === 'right' ? 'translateX(100%)' : 'translateX(-100%)'
+                },
+                center: {
+                    height: 'auto',
+                    transform: 'translateX(0%)'
+                },
+                exit: {
+                    transform: direction === 'right' ? 'translateX(-100%)' : 'translateX(100%)'
+                }
+            },
+            children: children
+        })
+    });
+});
+TrayPanel.displayName = 'SuiTrayPanel';
+
+
+
+const useTrayNavigate = ()=>{
+    const context = useTrayContext();
+    if (context === null) {
+        throw new Error('No TrayContext provided, must be used within a Tray');
+    }
+    const { navigateTo } = context;
+    const back = (event = null)=>{
+        context.navigateTo(null, event);
+    };
+    return {
+        navigateTo,
+        back
+    };
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+export { Tray as trayStyle, TrayContext, TrayPanel, Tray_Tray as Tray, useTray, useTrayContext, useTrayNavigate, useTrayPanel };

package/TrayMenu.js

@@ -1,61 +1,82 @@
-import { jsx } from 'react/jsx-runtime';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { forwardRef, useRef } from 'react';
-import { M as Menu } from './chunks/Menu.js';
-import { T as Tray, d as useTrayNavigate } from './chunks/useTrayNavigate.js';
-import '@ringcentral/spring-base';
-import { M as MenuItem } from './chunks/useMenuItemSelect.js';
-import 'tabbable';
-import './chunks/useListNavigation.js';
-import './VirtualizedList.js';
-import './chunks/useNestedParentMenu.js';
-import './chunks/Popover.js';
-import '@floating-ui/react-dom';
-import 'framer-motion';
-import './chunks/Icon.js';
-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/useMotionSafeTransition.js';
-import '@ringcentral/spring-icon';
-import './chunks/useAnimationFrame.js';
-import './chunks/useNestedMenuItem.js';
-import './ListNavigation.js';
-import 'react-virtuoso';
-import './chunks/List.js';
-
-const TrayMenu = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'TrayMenu' });
+import { jsx } from "react/jsx-runtime";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { forwardRef, useRef } from "react";
+import { Menu as Menu_Menu } from "./Menu.js";
+import { Tray as Tray_Tray, useTrayNavigate } from "./Tray.js";
+import { MenuItem as MenuItem_MenuItem } from "./MenuItem.js";
+
+
+
+
+
+
+
+
+
+const TrayMenu = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'TrayMenu'
+    });
     const { defaultValue, value, onChange, children, ...rest } = props;
     const trayActionsRef = useRef(null);
-    return (jsx(Menu, { ...rest, ref: ref, autoFocus: false, children: jsx(Tray, { value: value, defaultValue: defaultValue, onChange: onChange, actions: trayActionsRef, onKeyDown: (e) => {
+    return /*#__PURE__*/ jsx(Menu_Menu, {
+        ...rest,
+        ref: ref,
+        autoFocus: false,
+        children: /*#__PURE__*/ jsx(Tray_Tray, {
+            value: value,
+            defaultValue: defaultValue,
+            onChange: onChange,
+            actions: trayActionsRef,
+            onKeyDown: (e)=>{
                 if (e.key === 'ArrowLeft') {
                     trayActionsRef.current?.navigateTo(null);
                 }
-            }, children: children }) }));
+            },
+            children: children
+        })
+    });
 });
 TrayMenu.displayName = 'SuiTrayMenu';
 
-const TrayMenuItem = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'TrayMenuItem' });
+
+
+
+
+
+
+
+
+
+const TrayMenuItem = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'TrayMenuItem'
+    });
     const { value, onClick, onKeyDown } = props;
     const { navigateTo } = useTrayNavigate();
-    return (jsx(MenuItem, { ...props, onClick: (e) => {
+    return /*#__PURE__*/ jsx(MenuItem_MenuItem, {
+        ...props,
+        onClick: (e)=>{
             navigateTo(value, e);
             onClick?.(e);
-        }, onKeyDown: (e) => {
+        },
+        onKeyDown: (e)=>{
             if (e.key === 'ArrowRight') {
                 navigateTo(value, e);
             }
             onKeyDown?.(e);
-        }, ref: ref, autoClose: false }));
+        },
+        ref: ref,
+        autoClose: false
+    });
 });
 TrayMenuItem.displayName = 'SuiTrayItem';
 
+
+
+
+
+
 export { TrayMenu, TrayMenuItem };