@ringcentral/spring-ui 1.7.0 → 1.8.0

package/src/Drawer/Drawer.type.d.ts

@@ -2,106 +2,22 @@ import { ComponentPropsWithRef, ReactNode } from 'react';
 import { GroupedMotionProps, HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
 import { Modal, ModalCloseReason } from '../Modal';
 import { DrawerClassesKey } from './Drawer.classes';
-/**
- * @fileoverview Drawer component types and interfaces
- *
- * **Note**: All types are compatible with both `Drawer` and `SwipeableDrawer` components.
- */
-/**
- * Side from which the drawer will slide in and anchor to.
- */
 export declare type DrawerAnchor = 'bottom' | 'left' | 'right' | 'top';
-/**
- * Drawer behavior variant.
- *
- * - **'temporary'**: Drawer overlays content with backdrop, closes on outside click
- */
 export declare type DrawerVariant = 'temporary';
 export declare type DrawerCloseReason = ModalCloseReason;
 export declare type DrawerProps = StandardProps<{
-    /**
-     * Side from which the drawer will slide in and anchor to.
-  
-     * @default 'left'
-     */
     anchor?: DrawerAnchor;
-    /**
-     * Controls whether the drawer is open or closed.
-     */
     open: boolean;
-    /**
-     * Main content of the drawer. This is the scrollable area between header and footer.
-     */
     children?: ReactNode;
-    /**
-     * Header content displayed at the top of the drawer.
-     *
-     * **Important**: With SwipeableDrawer, the header becomes the drag handle.
-     *
-     * @default undefined
-     */
     header?: ReactNode;
-    /**
-     * Footer content displayed at the bottom of the drawer.
-     *
-     * @default undefined
-     */
     footer?: ReactNode;
-    /**
-     * Props passed to the main drawer body container.
-     */
     bodyProps?: GroupedMotionProps<ComponentPropsWithRef<'div'> & HTMLDataAttribute>;
-    /**
-     * Drawer behavior variant.
-     *
-     * - **'temporary'**: Overlays content, closes on backdrop click, traps focus
-     *
-     * @default 'temporary'
-     */
     variant?: DrawerVariant;
-    /**
-     * Controls whether the drawer blocks interaction with the rest of the page.
-     *
-     * **When true (default)**:
-     * - Focus is trapped inside drawer
-     * - Page scrolling is disabled
-     * - Backdrop clicks close drawer
-     * - ESC key closes drawer
-     * - Screen readers announce modal
-     *
-     * **When false**:
-     * - Users can interact with page content
-     * - No focus trapping
-     * - No scroll locking
-     *
-     * @default true
-     */
     blocking?: boolean;
-    /**
-     * Internal measurement refs used by SwipeableDrawer.
-     *
-     * @internal
-     */
     measurementRefs?: {
-        /**
-         * ref for the header element for measurements.
-         */
         header?: React.RefObject<HTMLDivElement>;
-        /**
-         * ref for the footer element for measurements.
-         */
         footer?: React.RefObject<HTMLDivElement>;
-        /**
-         * ref for the content element for gesture measurements.
-         * Points specifically to the content area for precise content height measurement.
-         * The gesture system needs to measure content height separately.
-         */
         content?: React.RefObject<HTMLDivElement>;
     };
-    /**
-     * Additional props to apply to the header element for gesture binding.
-     *
-     * @internal
-     */
     headerProps?: React.HTMLAttributes<HTMLDivElement>;
 }, DrawerClassesKey, typeof Modal>;

package/src/Dropdown/Dropdown.type.d.ts

@@ -4,90 +4,26 @@ import { VirtualizedMenuProps } from '../VirtualizedMenu';
 import { MenuProps } from '../Menu';
 import { DropdownClassesKey } from './Dropdown.classes';
 export declare type DropdownProps<T = string, D = unknown> = StandardProps<{
-    /**
-     * The default selected value. Use when the component is uncontrolled.
-     */
     defaultValue?: T | null;
-    /**
-     * The selected value.
-     * Set to `null` to deselect all options.
-     */
     value?: T | null;
-    /**
-     * Callback fired when an option is selected.
-     */
     onChange?: (value: T | null) => void;
-    /**
-     * Text to show when there is no selected value.
-     */
     placeholder?: ReactNode;
-    /**
-     * props applied to root
-     */
     rootProps?: Omit<ComponentProps<'div'>, 'className' | 'ref'> & HTMLDataAttribute;
-    /**
-     * props applied to button
-     */
     buttonProps?: Omit<ComponentPropsWithRef<'button'>, 'className'> & HTMLDataAttribute & Pick<UseFocusVisibleOptions, 'onFocusVisible'>;
-    /**
-     * props applied to menu
-     */
     MenuProps?: (Omit<VirtualizedMenuProps, 'open' | 'anchorEl' | 'onClose' | 'initialFocus' | 'data' | 'children'> | Omit<MenuProps, 'open' | 'anchorEl' | 'onClose' | 'children'>) & HTMLDataAttribute;
     ref?: Ref<HTMLDivElement>;
     buttonRef?: Ref<HTMLButtonElement>;
-    /**
-     * When enabled, the menu items will be rendered in a virtualized list.
-     * Set this prop to `true` when you have a large number of options to render.
-     * Please note that this prop will default to `false` in the next major version.
-     * @default true
-     */
     virtualize?: boolean;
-    /**
-     * Render the selected value.
-     *
-     * @param value The `value` provided to the component.
-     * @returns {ReactNode}
-     */
     renderValue?: (value: T) => React.ReactNode;
-    /**
-     * If `true`, the select element is focused during the first mount
-     * @default false
-     */
     autoFocus?: boolean;
-    /**
-     * If `true`, the select is disabled.
-     * @default false
-     */
     disabled?: boolean;
-    /**
-     * If `true`, the select will be initially open.
-     * @default false
-     */
     defaultOpen?: boolean;
-    /**
-     * Controls the open state of the select's menu.
-     * @default undefined
-     */
     open?: boolean;
-    /**
-     * Name of the element. For example used by the server to identify the fields in form submits.
-     * If the name is provided, the component will render a hidden input element that can be submitted to a server.
-     */
     name?: string;
-    /**
-     * Callback fired when the component requests to be opened.
-     */
     onOpenChange?: (isOpen: boolean) => void;
-    /**
-     * label for component
-     */
     label?: string;
     data: D[];
     children: ReactNode | VirtualizedMenuProps['children'];
-    /**
-     * Get selected item index to focus item when open dropdown.
-     * If no provide this handler, will compare value with `data` by default.
-     */
     getSelectedIndex?: (value: T) => number;
 }, DropdownClassesKey>;
 export interface DropdownComponent {

package/src/EmptyState/EmptyState.type.d.ts

@@ -2,20 +2,8 @@
 import { StandardProps } from '@ringcentral/spring-base';
 import { EmptyStateClassesKey } from './EmptyState.classes';
 export declare type EmptyStateProps = StandardProps<{
-    /**
-     * The icon to display at the top of the component.
-     */
     icon?: React.ComponentType;
-    /**
-     * The title to display.
-     */
     title?: React.ReactNode;
-    /**
-     * The description to display.
-     */
     description?: React.ReactNode;
-    /**
-     * The actions to display at the bottom of the component.
-     */
     actions?: React.ReactNode[];
 }, EmptyStateClassesKey, 'div'>;

package/src/FabButton/FabButton.type.d.ts

@@ -6,12 +6,7 @@ import { FabButtonClassesKey } from './FabButton.classes';
 declare type DefaultElementType = 'button';
 declare type ExtendElementType = 'button';
 declare type BaseFabButtonProps = WithClassesProps<{
-    /** Icon */
     symbol?: ComponentType;
-    /**
-     * The size of the component.
-     * @default 'large'
-     */
     size?: 'large' | 'small';
 } & Omit<UseButtonParameters, 'href' | 'to' | 'focusableWhenDisabled' | 'disabled'>, FabButtonClassesKey>;
 export declare type FabButtonProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseFabButtonProps, ComponentType<SquircleProps<T>>>;

package/src/FocusTrap/FocusTrap.d.ts

@@ -1,49 +1,11 @@
 import { FocusTrapProps as MuiFocusTrapProps } from '@mui/base';
 import { FunctionComponent, Ref } from 'react';
 declare type FocusTrapAction = {
-    /**
-     * get the current focus trap is enabled or not
-     */
     isEnabled: () => boolean;
 };
 declare type FocusTrapProps = Omit<MuiFocusTrapProps, 'isEnabled'> & {
-    /**
-     * action ref to get the current focus trap is enabled or not
-     */
     action?: Ref<FocusTrapAction>;
 };
-/**
- * Utility component that locks focus inside the component.
- *
- * @deprecated This component is deprecated. Use `useFocusTrapStack` hook directly with MUI's FocusTrap instead.
- *
- * @example
- * ```tsx
- * import { FocusTrap } from '@mui/base';
- * import { useFocusTrapStack } from '@ringcentral/spring-ui';
- *
- * function MyModal({ open, children }) {
- *   // Call useFocusTrapStack where the `open` prop changes first (typically in Modal/Dialog)
- *   // This prevents race conditions between stack registration and autofocus behavior
- *   const { isEnabled } = useFocusTrapStack({ open });
- *
- *   return open ? (
- *     <Portal>
- *       <div className="modal-backdrop">
- *         <FocusTrap
- *           open={open}
- *           isEnabled={isEnabled}
- *         >
- *           <div className="modal-content" tabIndex={-1}>
- *             {children}
- *           </div>
- *         </FocusTrap>
- *       </div>
- *     </Portal>
- *   ) : null;
- * }
- * ```
- */
 declare const FocusTrap: FunctionComponent<FocusTrapProps>;
 export { FocusTrap };
 export type { FocusTrapProps };

package/src/FocusTrap/useFocusTrapStack.d.ts

@@ -1,16 +1,7 @@
 export interface UseFocusTrapStackOptions {
-    /**
-     * Whether the focus trap is open
-     */
     open: boolean;
 }
 export interface UseFocusTrapStackReturn {
-    /**
-     * Check if the current focus trap is enabled (i.e., is the topmost in the stack)
-     */
     isEnabled: () => boolean;
 }
-/**
- * Hook to manage focus trap stack for proper layering and focus management
- */
 export declare const useFocusTrapStack: ({ open, }: UseFocusTrapStackOptions) => UseFocusTrapStackReturn;

package/src/FormField/FormField.type.d.ts

@@ -4,39 +4,13 @@ import { FormFieldClassesKey } from './FormField.classes';
 export declare type FormFieldVariant = 'standard' | 'outlined' | 'quiet' | 'contained';
 export declare type FormFieldSize = 'xlarge' | 'large' | 'medium';
 export declare type FormFieldProps = StandardProps<{
-    /**
-     * The label on the form element
-     */
     label?: React.ReactNode;
-    /**
-     * Props passed to the <label> element
-     */
     labelProps?: DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
-    /**
-     * The help text under the form element
-     */
     helperText?: React.ReactNode;
-    /**
-     * If true, always show focused style
-     * @default false
-     */
     focused?: boolean;
-    /**
-     * The size of the form element
-     * @default 'xlarge'
-     */
     size?: FormFieldSize;
-    /**
-     * Pass ref to the content node
-     */
     contentRef?: Ref<HTMLDivElement>;
-    /**
-     * Pass props to the content node
-     */
     contentProps?: Omit<ComponentProps<'div'>, 'className'> & HTMLDataAttribute;
-    /**
-     * Pass props to the helperText node
-     */
     FormHelperTextProps?: ComponentProps<'div'> & HTMLDataAttribute;
     variant?: FormFieldVariant;
     htmlFor?: string;

package/src/FormField/useHelperTextId.d.ts

@@ -1,30 +1,5 @@
 import { FormFieldProps } from './FormField.type';
 export interface UseHelperTextIdOptions extends Pick<FormFieldProps, 'helperText' | 'FormHelperTextProps'> {
-    /**
-     * The base ID to generate helper text ID from
-     */
     id: string;
 }
-/**
- * Hook to generate consistent helper text IDs for form field accessibility
- *
- * Follows the pattern: `${id}-helper-text`
- *
- * @param options Configuration options
- * @returns Generated helper text ID or undefined if no helper text
- *
- * @example
- * ```tsx
- * const Select = ({ helperText, FormHelperTextProps, ...props }) => {
- *   const id = useId(idProp);
- *   const helperTextId = useHelperTextId({ helperText, id, FormHelperTextProps });
- *
- *   return (
- *     <FormField FormHelperTextProps={{ id: helperTextId, ...FormHelperTextProps }}>
- *       <button aria-describedby={helperTextId}>
- *     </FormField>
- *   );
- * };
- * ```
- */
 export declare const useHelperTextId: ({ helperText, id, FormHelperTextProps, }: UseHelperTextIdOptions) => string | undefined;

package/src/FormLabel/FormLabel.type.d.ts

@@ -4,23 +4,9 @@ import { FormLabelContextValue } from './FormLabelContext';
 import { FormLabelClassesKey } from './FormLabel.classes';
 export declare type FormLabelPlacement = 'end' | 'start';
 export declare type FormLabelProps = StandardProps<{
-    /**
-     * label text for input element
-     */
     label?: ReactNode;
-    /**
-     * The ref to the label element
-     */
     labelRef?: Ref<HTMLLabelElement>;
-    /**
-     * If `true`, the `Label` will take up the full width of its container.
-     * @default false
-     */
     fullWidth?: boolean;
-    /**
-     * The placement of the label in relation to the input.
-     * @default end
-     */
     placement?: FormLabelPlacement;
     rootProps?: ComponentPropsWithoutRef<'div'> & HTMLDataAttribute;
 } & FormLabelContextValue, FormLabelClassesKey, 'label'>;

package/src/Icon/Icon.type.d.ts

@@ -3,23 +3,8 @@ import { StandardProps } from '@ringcentral/spring-base';
 import { IconClassesKey } from './Icon.classes';
 declare type IconSize = 'xxxlarge' | 'xxlarge' | 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';
 export declare type IconProps = StandardProps<{
-    /** Component for render, higher priority than `children` */
     symbol?: ComponentType<any>;
-    /** Element for render */
     children?: ReactElement;
-    /**
-     * Size of the icon.
-     *
-     * @remarks
-     * The available sizes are:
-     * - `"xsmall": 12px`
-     * - `"small": 16px`
-     * - `"medium": 20px`
-     * - `"large": 24px`
-     * - `"xlarge": 32px`
-     * - `"xxlarge": 36px`
-     * - `"xxxlarge": 40px`
-     */
     size?: IconSize;
 }, IconClassesKey, 'span'>;
 export {};

package/src/IconButton/IconButton.type.d.ts

@@ -11,43 +11,13 @@ export declare type IconButtonVariant = 'outlined' | 'contained' | 'icon' | 'inv
 export declare type IconButtonShape = 'circular' | 'rectangular' | 'squircle';
 export declare type IconButtonColor = 'danger' | 'warning' | 'primary' | 'success' | 'secondary' | 'neutral';
 declare type BaseIconButtonProps = WithClassesProps<WithTooltipProps<{
-    /**
-     * The icon to render. If children are provided the icon will not be rendered.
-     */
     symbol?: ComponentType;
-    /**
-     * The variant of the component.
-     * @default "outlined"
-     */
     variant?: IconButtonVariant;
-    /**
-     * The label text. Only applies to XXXLarge/XXLarge sizes.
-     */
     label?: string;
-    /**
-     * The color of the component.
-     * @default "primary"
-     */
     color?: IconButtonColor;
-    /**
-     * The size of the component.
-     * @default "large"
-     */
     size?: IconButtonSize;
-    /**
-     * The shape of the component.
-     * @default "circular"
-     */
     shape?: IconButtonShape;
-    /**
-     * Controls whether the component should have a background in its resting state.
-     * Does not apply to the "icon" variant.
-     * @default true
-     */
     background?: boolean;
-    /**
-     * Overrides the default icon size.
-     */
     iconSize?: IconProps['size'];
 } & Omit<UseButtonParameters, 'href'>>, IconButtonClassesKey>;
 export declare type IconButtonProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseIconButtonProps, T>;

package/src/IconButton/IconButtonLabel.type.d.ts

@@ -3,9 +3,6 @@ import { UseButtonParameters } from '@mui/base';
 import { StandardProps } from '@ringcentral/spring-base';
 import { IconButtonLabelClassesKey } from './IconButtonLabel.classes';
 declare type IconButtonLabelProps = StandardProps<{
-    /**
-     * The label text of icon button.
-     */
     label?: string;
     children: ReactElement;
 } & UseButtonParameters, IconButtonLabelClassesKey, 'div'>;

package/src/IconButtonGroup/IconButtonGroup.type.d.ts

@@ -3,15 +3,7 @@ import { OverridableComponent, OverridableProps, WithClassesProps } from '@ringc
 import { IconButtonGroupClassesKey } from './IconButtonGroup.classes';
 declare type DefaultElementType = 'div';
 export declare type BaseIconButtonGroupProps = WithClassesProps<{
-    /**
-     * The component orientation (layout flow direction)
-     * @default 'horizontal'
-     */
     orientation?: 'horizontal' | 'vertical';
-    /**
-     * If true the border will be shown
-     * @default false
-     */
     border?: boolean;
 }, IconButtonGroupClassesKey>;
 export declare type IconButtonGroupProps<T extends ElementType = DefaultElementType> = OverridableProps<BaseIconButtonGroupProps, T>;

package/src/InlineEditable/InlineEditable.type.d.ts

@@ -14,103 +14,28 @@ export declare type InputEditHandler<T = EditCompleteReason> = (e: KeyboardEvent
 export declare type EditCompleteReason = 'Enter' | 'Escape' | 'Blur';
 export declare type InlineEditableVariant = 'standard' | 'outlined';
 export declare type InlineEditableProps = StandardProps<(({
-    /**
-     * If `true`, a textarea element will be rendered instead of an input.
-     */
     multiline: true;
-    /**
-     * Callback invoked when done editing due to reasons below:
-     * 1. User presses 'Enter'
-     * 2. User presses 'Escape'
-     * 3. User triggers 'Blur', for example: press Tab or click elsewhere
-     */
     onEditComplete?: TextareaEditHandler;
-    /**
-     * Callback invoked when done editing due to reasons below:
-     * 1. User presses 'Enter'
-     * 2. User triggers 'Blur', for example: press Tab or click elsewhere
-     */
     onEditConfirm?: TextareaEditHandler<'Enter' | 'Blur'>;
-    /**
-     * Callback invoked when done editing due to reasons below:
-     * 1. User presses 'Escape'
-     */
     onEditCancel?: TextareaEditHandler<'Escape'>;
 } & TextareaAutosizeProps) | ({
     multiline: false;
-    /**
-     * Callback invoked when done editing due to reasons below:
-     * 1. User presses 'Enter'
-     * 2. User presses 'Escape'
-     * 3. User triggers 'Blur', for example: press Tab or click elsewhere
-     */
     onEditComplete?: InputEditHandler;
-    /**
-     * Callback invoked when done editing due to reasons below:
-     * 1. User presses 'Enter'
-     * 2. User triggers 'Blur', for example: press Tab or click elsewhere
-     */
     onEditConfirm?: InputEditHandler<'Enter' | 'Blur'>;
-    /**
-     * Callback invoked when done editing due to reasons below:
-     * 1. User presses 'Escape'
-     */
     onEditCancel?: InputEditHandler<'Escape'>;
 } & ComponentPropsWithRef<'input'>) | ({
     multiline?: never;
-    /**
-     * Callback invoked when done editing due to reasons below:
-     * 1. User presses 'Enter'
-     * 2. User presses 'Escape'
-     * 3. User triggers 'Blur', for example: press Tab or click elsewhere
-     */
     onEditComplete?: InputEditHandler;
-    /**
-     * Callback invoked when done editing due to reasons below:
-     * 1. User presses 'Enter'
-     * 2. User triggers 'Blur', for example: press Tab or click elsewhere
-     */
     onEditConfirm?: InputEditHandler<'Enter' | 'Blur'>;
-    /**
-     * Callback invoked when done editing due to reasons below:
-     * 1. User presses 'Escape'
-     */
     onEditCancel?: InputEditHandler<'Escape'>;
 } & ComponentPropsWithRef<'input'>)) & {
-    /**
-     * The variant to use.
-     * @default 'standard'
-     */
     variant?: InlineEditableVariant;
-    /**
-     * The value of the input/textarea.
-     */
     value: string;
-    /**
-     * The default editing state. Use when the component is not controlled.
-     */
     defaultEditing?: boolean;
-    /**
-     * The editing state. Use when the component is controlled.
-     */
     isEditing?: boolean;
-    /**
-     * Callback invoked when input/textarea is focused.
-     */
     onEditStart?: () => void;
-    /**
-     * If `true`, the edit functionality will be disabled.
-     */
     disabled?: boolean;
-    /**
-     * If `true`, the input will take up the full width of its container.
-     * If `multiline` is `true`, fullWidth will be set to `true`.
-     */
     fullWidth?: boolean;
-    /**
-     * Props applied to Tooltip component when not editing.
-     */
     TooltipProps?: Omit<TooltipProps, 'children' | 'open' | 'onOpenStateChange'>;
-    /** Attributes applied to root div*/
     rootProps?: ComponentProps<'div'> & HTMLDataAttribute;
 }, InlineEditableClassesKey>;

package/src/LinearProgressIndicator/LinearProgressIndicator.type.d.ts

@@ -4,43 +4,12 @@ import { LinearProgressIndicatorClassesKey } from './LinearProgressIndicator.cla
 export declare type LinearProgressIndicatorVariant = 'determinate';
 export declare type LinearProgressIndicatorProps = StandardProps<{
     variant: LinearProgressIndicatorVariant;
-    /**
-     * Shows a slim and more compact indicator.
-     * @default false
-     */
     slim?: boolean;
-    /**
-     * The label shown above the progress bar.
-     *
-     */
     label?: ReactNode;
-    /**
-     * The progress details shown below the progress bar (i.e. 0.2mb of 8mb).
-     * @default false
-     */
     details?: ReactNode;
-    /**
-     * Shows the current percentage of the indicator. Only applies when `showDetails` is true
-     * @default false
-     */
     showPercentage?: boolean;
-    /**
-     * Sets the value of the indicator.
-     *
-     */
     value: number;
-    /**
-     * Sets the minimum value of the indicator.. Defaults to `0`
-     * @default 0
-     */
     min?: number;
-    /**
-     * Sets the maximum value of the indicator. Used to calculate the current percentage.
-     *
-     */
     max: number;
-    /**
-     * Sets the props that are applied to the `role="progressbar"` element
-     */
     progressBarProps?: Omit<ComponentProps<'span'>, 'ref' | 'role'>;
 }, LinearProgressIndicatorClassesKey, 'span'>;

package/src/Link/Link.classes.d.ts

@@ -1,6 +1,6 @@
 import type { CamelCase } from 'type-fest';
 export declare type LinkHoverBehavior = 'none' | 'hover' | 'always';
-export declare type BaseLinkClassesKey = 'root' | 'primary' | 'secondary' | LinkHoverBehavior;
+export declare type BaseLinkClassesKey = 'root' | 'primary' | 'secondary' | 'inverted' | LinkHoverBehavior;
 export declare type LinkClassesKey = CamelCase<BaseLinkClassesKey>;
 export declare type LinkClasses = {
     name: 'link';

package/src/Link/Link.type.d.ts

@@ -2,16 +2,7 @@ import { OverridableComponent, OverridableProps, UseFocusVisibleOptions, WithCla
 import { LinkClassesKey } from './Link.classes';
 declare type DefaultElementType = 'a';
 export declare type BaseLinkProps = WithClassesProps<{
-    /**
-     * variant of Link
-     *
-     * @default 'primary'
-     */
-    variant?: 'primary' | 'secondary';
-    /**
-     * underline behavior of Link
-     * @default 'hover'
-     */
+    variant?: 'primary' | 'secondary' | 'inverted';
     underline?: 'none' | 'hover' | 'always';
 } & Pick<UseFocusVisibleOptions, 'onFocusVisible'>, LinkClassesKey>;
 export declare type LinkProps = OverridableProps<BaseLinkProps, DefaultElementType>;