@ringcentral/spring-ui 1.12.0 → 1.13.0

package/Dialog.js

@@ -1,73 +1,123 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { motion } from 'framer-motion';
-import clsx from 'clsx';
-import kebabCase from 'lodash/kebabCase';
-import { useEventCallback, useForkRef, combineProps, useClasses } from '@ringcentral/spring-base';
-import { Xsm } from '@ringcentral/spring-icon';
-import { useThemeProps, useClassesWithMode, motionTransition } from '@ringcentral/spring-theme';
-import './chunks/Icon.js';
-import { u as usePrefersReducedMotion } from './chunks/usePrefersReducedMotion.js';
-import { g as getSlideIn } from './chunks/getSlideIn.js';
-import { I as IconButton } from './chunks/IconButtonLabel.js';
-import { M as Modal } from './chunks/Modal.js';
-import '@mui/base';
-import './chunks/Squircle.js';
-import './chunks/withTooltip.js';
-import './chunks/Tooltip.js';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/PopperPaper.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-
-var Dialog$1 = {"sui-dialog-body":"sui-dialog-body","sui-dialog-root":"sui-dialog-root","sui-dialog-non-blocking":"sui-dialog-non-blocking","sui-dialog-small":"sui-dialog-small","sui-dialog-close-button":"sui-dialog-close-button","sui-dialog-medium":"sui-dialog-medium","sui-dialog-large":"sui-dialog-large","sui-dialog-title-root":"sui-dialog-title-root","sui-dialog-content-root":"sui-dialog-content-root","sui-dialog-actions-root":"sui-dialog-actions-root","sui-dialog-right":"sui-dialog-right","sui-dialog-right-close-button":"sui-dialog-right-close-button","sui-dialog-left":"sui-dialog-left","sui-dialog-left-close-button":"sui-dialog-left-close-button","sui-dialog-full-height":"sui-dialog-full-height","sui-dialog-full-screen":"sui-dialog-full-screen","sui-compact":"sui-compact"};
-
-const Dialog = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Dialog' });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { motion } from "framer-motion";
+import clsx from "clsx";
+import kebabCase from "lodash/kebabCase";
+import { combineProps, useClasses, useEventCallback, useForkRef } from "@ringcentral/spring-base";
+import { Xsm } from "@ringcentral/spring-icon";
+import { motionTransition, useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import { getSlideIn } from "./chunks/4476.js";
+import { IconButton as IconButton_IconButton } from "./IconButton.js";
+import { Modal as Modal_Modal } from "./Modal.js";
+import { usePrefersReducedMotion } from "./chunks/1294.js";
+
+
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Dialog = ({"sui-dialog-body":"sui-dialog-body","sui-dialog-root":"sui-dialog-root","sui-dialog-non-blocking":"sui-dialog-non-blocking","sui-dialog-small":"sui-dialog-small","sui-dialog-close-button":"sui-dialog-close-button","sui-dialog-medium":"sui-dialog-medium","sui-dialog-large":"sui-dialog-large","sui-dialog-title-root":"sui-dialog-title-root","sui-dialog-content-root":"sui-dialog-content-root","sui-dialog-actions-root":"sui-dialog-actions-root","sui-dialog-right":"sui-dialog-right","sui-dialog-right-close-button":"sui-dialog-right-close-button","sui-dialog-left":"sui-dialog-left","sui-dialog-left-close-button":"sui-dialog-left-close-button","sui-dialog-full-height":"sui-dialog-full-height","sui-dialog-full-screen":"sui-dialog-full-screen","sui-compact":"sui-compact"});
+
+
+
+
+
+
+
+
+
+
+
+
+const Dialog_Dialog = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Dialog'
+    });
     const { bodyProps, classes, className, children, size = 'medium', placement = 'right', open, onClose, blocking = true, closeButton, CloseButtonProps, ...rest } = props;
     const cls = useClassesWithMode('dialog', classes, className);
     const toSize = kebabCase(size);
     const isFullHeight = size === 'fullHeight';
     const prefersReducedMotion = usePrefersReducedMotion();
     const showCloseButton = shouldShowDialogCloseButton(closeButton, size);
-    const closeButtonClassName = showCloseButton
-        ? cls('close-button', size === 'fullHeight' && `${placement}-close-button`)
-        : undefined;
+    const closeButtonClassName = showCloseButton ? cls('close-button', size === 'fullHeight' && `${placement}-close-button`) : undefined;
     const slideInProps = getSlideIn({
         toggle: open,
         from: placement,
         prefersReducedMotion,
-        toggleOnTransition: motionTransition['haste-01-fast'],
-        toggleOffTransition: motionTransition['neutral-01-fast'],
+        toggleOnTransition: motionTransition["haste-01-fast"],
+        toggleOffTransition: motionTransition["neutral-01-fast"]
     });
-    const handleCloseButtonClick = useEventCallback((e) => {
+    const handleCloseButtonClick = useEventCallback((e)=>{
         onClose?.(e, 'closeButtonClick');
     });
     const handleBodyRef = useForkRef(ref, bodyProps?.ref);
-    return (jsx(Modal, { open: open, onClose: onClose, blocking: blocking, className: cls('root', { 'non-blocking': !blocking }), ...rest, children: jsxs(motion.div, { role: "dialog", "aria-modal": blocking, ...(isFullHeight && slideInProps), ...bodyProps, ref: handleBodyRef, tabIndex: bodyProps?.tabIndex ?? (blocking ? -1 : undefined), className: clsx(cls('body', toSize, isFullHeight && placement), bodyProps?.className), children: [children, closeButtonClassName && (jsx(IconButton, { size: 'large', color: 'secondary', symbol: Xsm, variant: "contained", ...combineProps({
+    return /*#__PURE__*/ jsx(Modal_Modal, {
+        open: open,
+        onClose: onClose,
+        blocking: blocking,
+        className: cls('root', {
+            'non-blocking': !blocking
+        }),
+        ...rest,
+        children: /*#__PURE__*/ jsxs(motion.div, {
+            role: "dialog",
+            "aria-modal": blocking,
+            ...isFullHeight && slideInProps,
+            ...bodyProps,
+            ref: handleBodyRef,
+            tabIndex: bodyProps?.tabIndex ?? (blocking ? -1 : undefined),
+            className: clsx(cls('body', toSize, isFullHeight && placement), bodyProps?.className),
+            children: [
+                children,
+                closeButtonClassName && /*#__PURE__*/ jsx(IconButton_IconButton, {
+                    size: 'large',
+                    color: 'secondary',
+                    symbol: Xsm,
+                    variant: "contained",
+                    ...combineProps({
                         className: closeButtonClassName,
                         onClick: handleCloseButtonClick,
-                        'aria-label': 'Close',
-                    }, CloseButtonProps) }))] }) }));
+                        'aria-label': 'Close'
+                    }, CloseButtonProps)
+                })
+            ]
+        })
+    });
 });
-Dialog.displayName = 'SuiDialog';
-const DialogTitle = forwardRef(({ className, ...rest }, ref) => {
+Dialog_Dialog.displayName = 'SuiDialog';
+const DialogTitle = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref)=>{
     const cls = useClasses('dialog-title', undefined, className);
-    return jsx("div", { ref: ref, className: cls('root'), ...rest });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: cls('root'),
+        ...rest
+    });
 });
 DialogTitle.displayName = 'SuiDialogTitle';
-const DialogContent = forwardRef(({ className, ...rest }, ref) => {
+const DialogContent = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref)=>{
     const cls = useClasses('dialog-content', undefined, className);
-    return jsx("div", { ref: ref, className: cls('root'), ...rest });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: cls('root'),
+        ...rest
+    });
 });
 DialogContent.displayName = 'SuiDialogContent';
-const DialogActions = forwardRef(({ className, ...rest }, ref) => {
+const DialogActions = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref)=>{
     const cls = useClasses('dialog-actions', undefined, className);
-    return jsx("div", { ref: ref, className: cls('root'), ...rest });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: cls('root'),
+        ...rest
+    });
 });
 DialogActions.displayName = 'SuiDialogActions';
+
 function shouldShowDialogCloseButton(closeButton, size) {
     if (size === 'fullScreen') {
         return false;
@@ -81,4 +131,8 @@ function shouldShowDialogCloseButton(closeButton, size) {
     return size === 'fullHeight';
 }
 
-export { Dialog, DialogActions, DialogContent, DialogTitle, Dialog$1 as dialogStyle };
+
+
+
+
+export { Dialog as dialogStyle, DialogActions, DialogContent, DialogTitle, Dialog_Dialog as Dialog };

package/Divider.js

@@ -1,9 +1,45 @@
-export { D as Divider } from './chunks/Divider.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
 
-var Divider = {"sui-divider-root":"sui-divider-root","sui-divider-horizontal":"sui-divider-horizontal","sui-divider-horizontal-has-title":"sui-divider-horizontal-has-title","sui-divider-vertical":"sui-divider-vertical","sui-divider-flex-item":"sui-divider-flex-item","sui-divider-full":"sui-divider-full","sui-divider-middle-horizontal":"sui-divider-middle-horizontal","sui-divider-middle-vertical":"sui-divider-middle-vertical"};
 
-export { Divider as dividerStyle };
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Divider = ({"sui-divider-root":"sui-divider-root","sui-divider-horizontal":"sui-divider-horizontal","sui-divider-horizontal-has-title":"sui-divider-horizontal-has-title","sui-divider-vertical":"sui-divider-vertical","sui-divider-flex-item":"sui-divider-flex-item","sui-divider-full":"sui-divider-full","sui-divider-middle-horizontal":"sui-divider-middle-horizontal","sui-divider-middle-vertical":"sui-divider-middle-vertical"});
+
+
+
+
+
+const Divider_Divider = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Divider'
+    });
+    const { component: DividerRoot = 'hr', variant = 'full', orientation = 'horizontal', classes, className, children, flexItem = false, title, ...rest } = props;
+    const cls = useClasses('divider', classes, className);
+    const role = DividerRoot !== 'hr' ? 'separator' : undefined;
+    const hasTitle = title !== undefined;
+    return /*#__PURE__*/ jsx(DividerRoot, {
+        role: role,
+        className: cls('root', variant, orientation, {
+            'flex-item': flexItem,
+            'has-title': hasTitle
+        }, `${variant}-${orientation}`, hasTitle && `${orientation}-has-title`),
+        "data-title": title,
+        ref: ref,
+        ...rest,
+        children: children
+    });
+});
+Divider_Divider.displayName = 'SuiDivider';
+
+
+
+
+
+
+export { Divider as dividerStyle, Divider_Divider as Divider };

package/DragHandle.js

@@ -1,8 +1,34 @@
-export { D as DragHandle } from './chunks/DragHandle.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
 
-var DragHandle = {"sui-drag-handle-root":"sui-drag-handle-root","sui-drag-handle-top":"sui-drag-handle-top","sui-drag-handle-bottom":"sui-drag-handle-bottom","sui-drag-handle-bar":"sui-drag-handle-bar"};
 
-export { DragHandle as dragHandleStyle };
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var DragHandle = ({"sui-drag-handle-root":"sui-drag-handle-root","sui-drag-handle-top":"sui-drag-handle-top","sui-drag-handle-bottom":"sui-drag-handle-bottom","sui-drag-handle-bar":"sui-drag-handle-bar"});
+
+
+
+
+const DragHandle_DragHandle = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { component: DragHandleRoot = 'div', anchor = 'top', classes, className, ...rest } = props;
+    const cls = useClasses('drag-handle', classes, className);
+    return /*#__PURE__*/ jsx(DragHandleRoot, {
+        ref: ref,
+        className: cls('root', anchor),
+        role: "presentation",
+        "aria-hidden": "true",
+        ...rest,
+        children: /*#__PURE__*/ jsx("div", {
+            className: cls('bar')
+        })
+    });
+});
+
+
+
+
+
+
+export { DragHandle as dragHandleStyle, DragHandle_DragHandle as DragHandle };

package/Drawer.js

@@ -1,19 +1,117 @@
-export { D as Drawer } from './chunks/Drawer.js';
-import 'react/jsx-runtime';
-import 'react';
-import 'framer-motion';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import 'clsx';
-import './chunks/Icon.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getSlideIn.js';
-import './chunks/Modal.js';
-import '@mui/base';
-import './chunks/getFade.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-
-var Drawer = {"sui-drawer-root":"sui-drawer-root","sui-drawer-anchor-left":"sui-drawer-anchor-left","sui-drawer-anchor-right":"sui-drawer-anchor-right","sui-drawer-anchor-top":"sui-drawer-anchor-top","sui-drawer-anchor-bottom":"sui-drawer-anchor-bottom","sui-drawer-persistent-left":"sui-drawer-persistent-left","sui-drawer-persistent-right":"sui-drawer-persistent-right","sui-drawer-persistent-top":"sui-drawer-persistent-top","sui-drawer-persistent-bottom":"sui-drawer-persistent-bottom","sui-drawer-body":"sui-drawer-body","sui-drawer-body-left":"sui-drawer-body-left","sui-drawer-body-right":"sui-drawer-body-right","sui-drawer-body-top":"sui-drawer-body-top","sui-drawer-body-bottom":"sui-drawer-body-bottom","sui-drawer-content":"sui-drawer-content","sui-drawer-non-blocking":"sui-drawer-non-blocking","sui-drawer-header":"sui-drawer-header"};
-
-export { Drawer as drawerStyles };
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { motion } from "framer-motion";
+import { useClasses, useForkRef } from "@ringcentral/spring-base";
+import { motionTransition, useThemeProps } from "@ringcentral/spring-theme";
+import clsx from "clsx";
+import { getSlideIn } from "./chunks/4476.js";
+import { Modal as Modal_Modal } from "./Modal.js";
+import { usePrefersReducedMotion } from "./chunks/1294.js";
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Drawer = ({"sui-drawer-root":"sui-drawer-root","sui-drawer-anchor-left":"sui-drawer-anchor-left","sui-drawer-anchor-right":"sui-drawer-anchor-right","sui-drawer-anchor-top":"sui-drawer-anchor-top","sui-drawer-anchor-bottom":"sui-drawer-anchor-bottom","sui-drawer-persistent-left":"sui-drawer-persistent-left","sui-drawer-persistent-right":"sui-drawer-persistent-right","sui-drawer-persistent-top":"sui-drawer-persistent-top","sui-drawer-persistent-bottom":"sui-drawer-persistent-bottom","sui-drawer-body":"sui-drawer-body","sui-drawer-body-left":"sui-drawer-body-left","sui-drawer-body-right":"sui-drawer-body-right","sui-drawer-body-top":"sui-drawer-body-top","sui-drawer-body-bottom":"sui-drawer-body-bottom","sui-drawer-content":"sui-drawer-content","sui-drawer-non-blocking":"sui-drawer-non-blocking","sui-drawer-header":"sui-drawer-header"});
+
+
+
+
+
+
+
+
+
+/**
+ * Drawer Component - Base drawer without gesture support
+ *
+ * A clean, lightweight drawer component that provides basic modal/slide functionality.
+ * For gesture support, use SwipeableDrawer which builds on top of this component.
+ *
+ * @example
+ * ```tsx
+ * // Simple navigation drawer
+ * <Drawer
+ *   open={open}
+ *   onClose={onClose}
+ *   anchor="left"
+ *   variant="temporary"
+ * >
+ *   <Navigation />
+ * </Drawer>
+ *
+ * // Bottom sheet without gestures
+ * <Drawer
+ *   open={open}
+ *   onClose={onClose}
+ *   anchor="bottom"
+ * >
+ *   <Content />
+ * </Drawer>
+ * ```
+ */ const Drawer_Drawer = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Drawer'
+    });
+    const { anchor = 'left', bodyProps, classes, className, children, header, footer, open, onClose, variant = 'temporary', blocking = true, measurementRefs, headerProps, ...rest } = props;
+    const headerRef = measurementRefs?.header;
+    const footerRef = measurementRefs?.footer;
+    const contentRef = measurementRefs?.content;
+    const cls = useClasses('drawer', classes, className);
+    const slideInProps = getSlideIn({
+        toggle: open,
+        from: anchor,
+        prefersReducedMotion: usePrefersReducedMotion(),
+        toggleOnTransition: motionTransition["neutral-01-fast"],
+        toggleOffTransition: motionTransition["neutral-01-fast"]
+    });
+    const handleBodyRef = useForkRef(ref, bodyProps?.ref);
+    return /*#__PURE__*/ jsx(Modal_Modal, {
+        open: open,
+        onClose: onClose,
+        blocking: blocking,
+        className: clsx(cls('root', `anchor-${anchor}`, {
+            'non-blocking': !blocking
+        })),
+        ...rest,
+        children: /*#__PURE__*/ jsxs(motion.div, {
+            role: "dialog",
+            "aria-modal": blocking,
+            ...slideInProps,
+            ...bodyProps,
+            ref: handleBodyRef,
+            className: clsx(cls('body', `body-${anchor}`), bodyProps?.className),
+            tabIndex: bodyProps?.tabIndex ?? (blocking ? -1 : undefined),
+            children: [
+                header && /*#__PURE__*/ jsx("div", {
+                    ref: headerRef,
+                    ...headerProps,
+                    className: clsx(cls('header'), headerProps?.className),
+                    children: header
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    ref: contentRef,
+                    className: cls('content'),
+                    children: children
+                }),
+                footer && /*#__PURE__*/ jsx("div", {
+                    ref: footerRef,
+                    className: cls('footer'),
+                    children: footer
+                })
+            ]
+        })
+    });
+});
+Drawer_Drawer.displayName = 'SuiDrawer';
+
+
+
+
+
+
+export { Drawer as drawerStyles, Drawer_Drawer as Drawer };