@ringcentral/spring-ui 1.11.2 → 1.12.0

package/chunks/useHelperTextId.js

@@ -3,17 +3,19 @@ import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { useClasses } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
+import { h as hasContent } from './hasContent.js';
+import '@mui/utils';
 
 const FormField = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'FormField' });
     const { classes, className, children, htmlFor, label, labelProps, helperText, required, disabled, error, variant = 'standard', size = 'xlarge', contentRef, contentProps, focused, FormHelperTextProps, ...rest } = props;
     const cls = useClasses('form-field', classes, className);
-    return (jsxs("div", { ...rest, ref: ref, className: cls('root', variant, { disabled, error, focused }), "aria-disabled": disabled, children: [label && (jsxs("label", { htmlFor: htmlFor, ...labelProps, className: clsx(cls('label', `${variant}-label`, error && 'error-label'), labelProps?.className), children: [label, required ? ' *' : ''] })), jsxs("div", { className: cls('container', error && 'error-container'), children: [jsx("div", { className: cls('content', size, `${size}-content`, `${variant}-${size}`, `${variant}-content`, error && 'error-content', error && `error-${variant}-content`), ref: contentRef, ...contentProps, children: children }), jsx("div", { className: cls('focus-effect', `${variant}-focus-effect`, error && 'error-focus-effect') })] }), helperText && (jsx("div", { ...FormHelperTextProps, className: clsx(cls('helper-text', error && 'error-helper-text'), FormHelperTextProps?.className), children: helperText }))] }));
+    return (jsxs("div", { ...rest, ref: ref, className: cls('root', variant, { disabled, error, focused }), "aria-disabled": disabled, children: [hasContent(label) && (jsxs("label", { htmlFor: htmlFor, ...labelProps, className: clsx(cls('label', `${variant}-label`, error && 'error-label'), labelProps?.className), children: [label, required ? ' *' : ''] })), jsxs("div", { className: cls('container', error && 'error-container'), children: [jsx("div", { className: cls('content', size, `${size}-content`, `${variant}-${size}`, `${variant}-content`, error && 'error-content', error && `error-${variant}-content`), ref: contentRef, ...contentProps, children: children }), jsx("div", { className: cls('focus-effect', `${variant}-focus-effect`, error && 'error-focus-effect') })] }), hasContent(helperText) && (jsx("div", { ...FormHelperTextProps, className: clsx(cls('helper-text', error && 'error-helper-text'), FormHelperTextProps?.className), children: helperText }))] }));
 });
 FormField.displayName = 'SuiFormField';
 
 const useHelperTextId = ({ helperText, id, FormHelperTextProps, }) => {
-    if (!helperText) {
+    if (!hasContent(helperText)) {
         return undefined;
     }
     return FormHelperTextProps?.id || `${id}-helper-text`;

package/chunks/useMenuItemSelect.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, useContext, forwardRef, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
-import { useFocusVisible, useActive, useForkRef, useId, useHover, useEventCallback } from '@ringcentral/spring-base';
+import { useFocusVisible, useActive, useForkRef, combineProps, useId, useHover, useEventCallback } from '@ringcentral/spring-base';
 import { CheckBoldMd } from '@ringcentral/spring-icon';
 import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { I as Icon } from './Icon.js';
@@ -8,6 +8,8 @@ import { u as useAnimationFrame } from './useAnimationFrame.js';
 import './useNestedParentMenu.js';
 import { u as useNestedMenuItem } from './useNestedMenuItem.js';
 import { useVirtualizedItemPropsContext } from '../VirtualizedList.js';
+import { c as composeEventHandlers } from './composeEventHandlers.js';
+import { unstable_setRef } from '@mui/utils';
 import { useItemNavigation } from '../ListNavigation.js';
 import { u as useMenuContext } from './Menu.js';
 
@@ -21,15 +23,6 @@ const SubMenuTriggerNestedIdContext = createContext(null);
 const MenuItemSelectContext = createContext(null);
 const useMenuItemSelectContext = () => useContext(MenuItemSelectContext);
 
-const composeEventHandlers = (externalEventHandler, internalEventHandler, options = {}) => (event, ...args) => {
-    const { checkForDefaultPrevented = true } = options;
-    externalEventHandler?.(event, ...args);
-    if (checkForDefaultPrevented && event.defaultPrevented) {
-        return;
-    }
-    internalEventHandler?.(event, ...args);
-};
-
 const useMenuItem = (props) => {
     const { onBlur, onFocus, onKeyDown, onKeyUp, onClick, ref, disabled, autoClose, } = props;
     const { keyboardNavHandlers, itemRef } = useItemNavigation() ?? {};
@@ -60,15 +53,20 @@ const useMenuItem = (props) => {
         onClick: handleClick,
     });
     const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
-    const getRootProps = (otherProps) => {
+    const getRootProps = (otherProps = {}) => {
+        const { ref: otherRef, ...restOtherProps } = otherProps;
         return {
             role: 'menuitem',
             tabIndex: '-1',
-            disabled,
-            ...otherProps,
-            ...focusVisibleHandlers,
-            ...activeHandlers,
-            ref: handleItemRef,
+            ...(disabled ? { 'aria-disabled': true } : null),
+            ...combineProps(restOtherProps, {
+                ...focusVisibleHandlers,
+                ...activeHandlers,
+            }),
+            ref: (instance) => {
+                unstable_setRef(otherRef, instance);
+                unstable_setRef(handleItemRef, instance);
+            },
         };
     };
     return { getRootProps, focusVisible, active };
@@ -105,15 +103,21 @@ const useVirtualizedMenuItem = (props) => {
         onClick: handleClick,
     });
     const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
-    const getRootProps = (otherProps) => {
+    const getRootProps = (otherProps = {}) => {
+        const { ref: otherRef, ...restOtherProps } = otherProps;
         return {
             role: 'menuitem',
             tabIndex: -1,
-            ...otherProps,
-            ...focusVisibleHandlers,
-            ...activeHandlers,
-            ...vlItemProps,
-            ref: handleItemRef,
+            ...(disabled ? { 'aria-disabled': true } : null),
+            ...combineProps(restOtherProps, {
+                ...focusVisibleHandlers,
+                ...activeHandlers,
+                ...vlItemProps,
+            }),
+            ref: (instance) => {
+                unstable_setRef(otherRef, instance);
+                unstable_setRef(handleItemRef, instance);
+            },
         };
     };
     return { getRootProps, focusVisible, active };
@@ -121,7 +125,7 @@ const useVirtualizedMenuItem = (props) => {
 
 const MenuItem = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuItem' });
-    const { classes, className, children, selected, disabled, onMouseEnter, onMouseLeave, onPointerMove, highlighted = false, focused = false, autoClose = true, autoFocus, ...rest } = props;
+    const { classes, className, children, selected, disabled, onMouseEnter, onMouseLeave, onPointerMove, onBlur, onFocus, onKeyDown, onKeyUp, onClick, highlighted = false, focused = false, autoClose = true, autoFocus, ...rest } = props;
     const cls = useClassesWithMode('menu-item', classes, className);
     const vlItemProps = useVirtualizedItemPropsContext();
     const isInVlRef = useRef(Boolean(vlItemProps));
@@ -137,8 +141,13 @@ const MenuItem = forwardRef((inProps, ref) => {
     const itemRef = useRef(null);
     const handleRef = useForkRef(itemRef, ref);
     const { getRootProps, focusVisible, active } = useMenuItemHook({
-        ...props,
         autoClose,
+        disabled,
+        onBlur,
+        onClick,
+        onFocus,
+        onKeyDown,
+        onKeyUp,
         ref: handleRef,
     });
     const selectable = !(selected === undefined);
@@ -270,4 +279,4 @@ const useMenuItemSelect = (props) => {
     };
 };
 
-export { Action as A, MenuItem as M, SubMenuTriggerNestedIdContext as S, MenuItemSelectContext as a, useMenuItem as b, useMenuItemSelect as c, useVirtualizedMenuItem as d, MenuListContext as e, useMenuListContext as f, composeEventHandlers as g, useMenuItemSelectContext as u };
+export { Action as A, MenuItem as M, SubMenuTriggerNestedIdContext as S, MenuItemSelectContext as a, useMenuItem as b, useMenuItemSelect as c, useVirtualizedMenuItem as d, MenuListContext as e, useMenuListContext as f, useMenuItemSelectContext as u };