@ringcentral/spring-ui 1.11.2 → 1.13.0

package/InlineEditable.js

@@ -1,48 +1,52 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useEffect } from 'react';
-import { TextareaAutosize } from '@mui/base';
-import { useControlled, useClasses, usePrevious, useForkRef, useWindowContext } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { T as Tooltip } from './chunks/Tooltip.js';
-import { u as useTooltipForceHide } from './chunks/useTooltipForceHide.js';
-import 'framer-motion';
-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 './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/PopperPaper.js';
-
-var InlineEditable$1 = {"sui-inline-editable-root":"sui-inline-editable-root","sui-inline-editable-full-width":"sui-inline-editable-full-width","sui-inline-editable-input":"sui-inline-editable-input","sui-inline-editable-textarea":"sui-inline-editable-textarea","sui-disabled":"sui-disabled","sui-inline-editable-text":"sui-inline-editable-text","sui-inline-editable-standard":"sui-inline-editable-standard","sui-inline-editable-standard-input":"sui-inline-editable-standard-input","sui-inline-editable-standard-textarea":"sui-inline-editable-standard-textarea","sui-inline-editable-outlined":"sui-inline-editable-outlined","sui-inline-editable-outlined-input":"sui-inline-editable-outlined-input","sui-inline-editable-outlined-textarea":"sui-inline-editable-outlined-textarea"};
-
-const InlineEditable = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'InlineEditable' });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import { TextareaAutosize } from "@mui/base";
+import { useClasses, useControlled, useForkRef, usePrevious, useWindowContext } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { useTooltipForceHide } from "./Tooltip.js";
+import { Tooltip } from "./chunks/4535.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var InlineEditable = ({"sui-inline-editable-root":"sui-inline-editable-root","sui-inline-editable-full-width":"sui-inline-editable-full-width","sui-inline-editable-input":"sui-inline-editable-input","sui-inline-editable-textarea":"sui-inline-editable-textarea","sui-disabled":"sui-disabled","sui-inline-editable-text":"sui-inline-editable-text","sui-inline-editable-standard":"sui-inline-editable-standard","sui-inline-editable-standard-input":"sui-inline-editable-standard-input","sui-inline-editable-standard-textarea":"sui-inline-editable-standard-textarea","sui-inline-editable-outlined":"sui-inline-editable-outlined","sui-inline-editable-outlined-input":"sui-inline-editable-outlined-input","sui-inline-editable-outlined-textarea":"sui-inline-editable-outlined-textarea"});
+
+
+
+
+
+
+
+const InlineEditable_InlineEditable = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'InlineEditable'
+    });
     const { classes, className, children, variant = 'standard', multiline, value, defaultEditing, isEditing: isEditingProp, onEditStart, onEditComplete, onEditConfirm, onEditCancel, disabled, fullWidth, TooltipProps, placeholder, onFocus, onKeyDown, onBlur, rootProps, ...rest } = props;
     const [isEditing, setEditing] = useControlled({
         controlled: isEditingProp,
         default: defaultEditing,
         name: 'SuiInlineEditable',
-        state: 'isEditing',
+        state: 'isEditing'
     });
     const Component = multiline ? TextareaAutosize : 'input';
     const cls = useClasses('inline-editable', classes, className);
     const valueBeforeEditing = useRef(value);
-    const previousIsEditing = usePrevious(() => isEditing);
+    const previousIsEditing = usePrevious(()=>isEditing);
     const inputRef = useRef(null);
     const handleRef = useForkRef(inputRef, ref);
-    const handleFocus = (e) => {
+    const handleFocus = (e)=>{
         onFocus?.(e);
         valueBeforeEditing.current = value;
         setEditing(true);
         onEditStart?.();
     };
-    const handleEditComplete = (e, reason, values) => {
+    const handleEditComplete = (e, reason, values)=>{
         onEditComplete?.(e, reason, values);
-        switch (reason) {
+        switch(reason){
             case 'Enter':
             case 'Blur':
                 onEditConfirm?.(e, reason, values);
@@ -50,45 +54,95 @@ const InlineEditable = forwardRef((inProps, ref) => {
             case 'Escape':
                 onEditCancel?.(e, reason, values);
                 break;
+            default:
+                break;
         }
     };
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (e)=>{
         onKeyDown?.(e);
         const { key, shiftKey } = e;
-        if (!isEditing || (multiline && key === 'Enter' && shiftKey)) {
+        // Enter + Shift in textarea creates a new line
+        if (!isEditing || multiline && key === 'Enter' && shiftKey) {
+            return;
+        }
+        // During IME composition, Enter confirms the composed candidate instead of
+        // submitting the editable. Only end editing once composition has finished.
+        if (key === 'Enter' && (e.nativeEvent.isComposing || e.nativeEvent.which === 229)) {
             return;
         }
-        if (['Enter', 'Escape'].includes(key)) {
+        if ([
+            'Enter',
+            'Escape'
+        ].includes(key)) {
             setEditing(false);
             handleEditComplete(e, key, {
                 currentValue: value,
-                previousValue: valueBeforeEditing.current,
+                previousValue: valueBeforeEditing.current
             });
         }
     };
-    const handleBlur = (e) => {
+    const handleBlur = (e)=>{
         onBlur?.(e);
-        if (!isEditing)
-            return;
+        if (!isEditing) return;
         setEditing(false);
         handleEditComplete(e, 'Blur', {
             currentValue: value,
-            previousValue: valueBeforeEditing.current,
+            previousValue: valueBeforeEditing.current
         });
     };
     const { document } = useWindowContext();
-    useEffect(() => {
+    useEffect(()=>{
         if (previousIsEditing && !isEditing && inputRef.current) {
+            // * enter/esc should blur the input (tab does this automatically)
             document?.activeElement === inputRef.current && inputRef.current.blur();
         }
-    }, [isEditing, previousIsEditing]);
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        isEditing,
+        previousIsEditing
+    ]);
+    // close tooltip temporarily during editing
     const tooltipOpenProps = useTooltipForceHide(isEditing);
     const slot = multiline ? 'textarea' : 'input';
-    const editableContent = (jsx(Component, { className: cls(slot, `${variant}-${slot}`, { disabled }), value: value, autoComplete: "off", placeholder: placeholder, ref: handleRef, onFocus: handleFocus, onKeyDown: handleKeyDown, onBlur: handleBlur, disabled: disabled, "aria-label": TooltipProps?.['title'], ...rest, children: children }));
-    return (jsxs("div", { className: cls('root', variant, {
-            'full-width': fullWidth || multiline,
-        }), ...rootProps, children: [disabled || !TooltipProps?.title ? (editableContent) : (jsx(Tooltip, { ...TooltipProps, ...tooltipOpenProps, children: editableContent })), jsx("span", { className: cls('text'), children: value || placeholder })] }));
+    const editableContent = /*#__PURE__*/ jsx(Component, {
+        className: cls(slot, `${variant}-${slot}`, {
+            disabled
+        }),
+        value: value,
+        autoComplete: "off",
+        placeholder: placeholder,
+        ref: handleRef,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        disabled: disabled,
+        "aria-label": TooltipProps?.['title'],
+        ...rest,
+        children: children
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: cls('root', variant, {
+            'full-width': fullWidth || multiline
+        }),
+        ...rootProps,
+        children: [
+            disabled || !TooltipProps?.title ? editableContent : /*#__PURE__*/ jsx(Tooltip, {
+                ...TooltipProps,
+                ...tooltipOpenProps,
+                children: editableContent
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: cls('text'),
+                children: value || placeholder
+            })
+        ]
+    });
 });
-InlineEditable.displayName = 'SuiInlineEditable';
+InlineEditable_InlineEditable.displayName = 'SuiInlineEditable';
+
+
+
+
+
 
-export { InlineEditable, InlineEditable$1 as inlineEditableStyle };
+export { InlineEditable as inlineEditableStyle, InlineEditable_InlineEditable as InlineEditable };

package/LinearProgressIndicator.js

@@ -1,45 +1,94 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { useClasses, useId } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useClasses, useId } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
 
-var LinearProgressIndicator$1 = {"sui-linear-progress-indicator-root":"sui-linear-progress-indicator-root","sui-linear-progress-indicator-determinate-track":"sui-linear-progress-indicator-determinate-track","sui-linear-progress-indicator-determinate-track-slim":"sui-linear-progress-indicator-determinate-track-slim","sui-linear-progress-indicator-determinate-bar":"sui-linear-progress-indicator-determinate-bar","sui-linear-progress-indicator-determinate-label":"sui-linear-progress-indicator-determinate-label","sui-linear-progress-indicator-determinate-details-container":"sui-linear-progress-indicator-determinate-details-container","sui-linear-progress-indicator-determinate-details-label":"sui-linear-progress-indicator-determinate-details-label"};
 
-const LinearProgressIndicator = forwardRef((inProps, ref) => {
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var LinearProgressIndicator = ({"sui-linear-progress-indicator-root":"sui-linear-progress-indicator-root","sui-linear-progress-indicator-determinate-track":"sui-linear-progress-indicator-determinate-track","sui-linear-progress-indicator-determinate-track-slim":"sui-linear-progress-indicator-determinate-track-slim","sui-linear-progress-indicator-determinate-bar":"sui-linear-progress-indicator-determinate-bar","sui-linear-progress-indicator-determinate-label":"sui-linear-progress-indicator-determinate-label","sui-linear-progress-indicator-determinate-details-container":"sui-linear-progress-indicator-determinate-details-container","sui-linear-progress-indicator-determinate-details-label":"sui-linear-progress-indicator-determinate-details-label"});
+
+
+
+
+
+
+const LinearProgressIndicator_LinearProgressIndicator = /*#__PURE__*/ forwardRef((inProps, ref)=>{
     const props = useThemeProps({
         props: inProps,
-        name: 'LinearProgressIndicator',
+        name: 'LinearProgressIndicator'
     });
     const { classes, className, children, variant, slim = false, min = 0, max, value, label, details, showPercentage = false, progressBarProps: progressBarPropsProp, ...rest } = props;
     const cls = useClasses('linear-progress-indicator', classes, className);
     const labelId = useId();
     const progressBarProps = progressBarPropsProp || {};
     const progressBarLabelledBy = progressBarProps['aria-labelledby'];
-    if (max === undefined || value === undefined)
-        return null;
+    if (max === undefined || value === undefined) return null;
     progressBarProps['aria-valuenow'] = value;
     let labelNode = label;
     if (typeof props.label === 'string') {
-        labelNode = (jsx("span", { id: progressBarLabelledBy || labelId, className: cls('label', `${variant}-label`), children: props.label }));
+        labelNode = /*#__PURE__*/ jsx("span", {
+            id: progressBarLabelledBy || labelId,
+            className: cls('label', `${variant}-label`),
+            children: props.label
+        });
         progressBarProps['aria-labelledby'] = progressBarLabelledBy || labelId;
     }
     let detailsNode = details;
     if (typeof details === 'string') {
-        detailsNode = (jsx("span", { className: cls('details-label', `${variant}-details-label`), children: details }));
+        detailsNode = /*#__PURE__*/ jsx("span", {
+            className: cls('details-label', `${variant}-details-label`),
+            children: details
+        });
     }
-    if (min !== 0)
-        progressBarProps['aria-valuemin'] = min;
-    if (max !== 100)
-        progressBarProps['aria-valuemax'] = max;
-    const percentage = Math.round((100 / max) * value);
+    if (min !== 0) progressBarProps['aria-valuemin'] = min;
+    if (max !== 100) progressBarProps['aria-valuemax'] = max;
+    const percentage = Math.round(100 / max * value);
     const { className: progressBarClassName, ...restProgressBarProps } = progressBarProps;
-    return (jsxs("span", { className: cls('root', variant, {
-            slim,
-        }), ...rest, ref: ref, children: [labelNode, jsx("span", { className: clsx(cls('track', `${variant}-track`, slim && `${variant}-track-slim`), progressBarClassName), role: "progressbar", ...restProgressBarProps, children: jsx("span", { className: cls('bar', `${variant}-bar`), style: {
-                        width: `${percentage}%`,
-                    } }) }), (!!detailsNode || showPercentage) && (jsxs("span", { className: cls('details-container', `${variant}-details-container`), children: [detailsNode, showPercentage && (jsxs("span", { className: cls('details-label', `${variant}-details-label`), children: [percentage, "%"] }))] }))] }));
+    return /*#__PURE__*/ jsxs("span", {
+        className: cls('root', variant, {
+            slim
+        }),
+        ...rest,
+        ref: ref,
+        children: [
+            labelNode,
+            /*#__PURE__*/ jsx("span", {
+                className: clsx(cls('track', `${variant}-track`, slim && `${variant}-track-slim`), progressBarClassName),
+                role: "progressbar",
+                ...restProgressBarProps,
+                children: /*#__PURE__*/ jsx("span", {
+                    className: cls('bar', `${variant}-bar`),
+                    style: {
+                        width: `${percentage}%`
+                    }
+                })
+            }),
+            (!!detailsNode || showPercentage) && /*#__PURE__*/ jsxs("span", {
+                className: cls('details-container', `${variant}-details-container`),
+                children: [
+                    detailsNode,
+                    showPercentage && /*#__PURE__*/ jsxs("span", {
+                        className: cls('details-label', `${variant}-details-label`),
+                        children: [
+                            percentage,
+                            "%"
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 });
-LinearProgressIndicator.displayName = 'SuiLinearProgressIndicator';
+LinearProgressIndicator_LinearProgressIndicator.displayName = 'SuiLinearProgressIndicator';
+
+
+
+
+
 
-export { LinearProgressIndicator, LinearProgressIndicator$1 as linearProgressIndicatorStyle };
+export { LinearProgressIndicator as linearProgressIndicatorStyle, LinearProgressIndicator_LinearProgressIndicator as LinearProgressIndicator };

package/Link.js

@@ -1,18 +1,47 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses, useFocusVisible, useForkRef } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses, useFocusVisible, useForkRef } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
 
-var Link$1 = {"sui-link-root":"sui-link-root","sui-focus-visible":"sui-focus-visible","sui-link-none":"sui-link-none","sui-link-hover":"sui-link-hover","sui-link-always":"sui-link-always","sui-link":"sui-link","sui-link-primary":"sui-link-primary","sui-link-secondary":"sui-link-secondary","sui-link-inverted":"sui-link-inverted"};
 
-const Link = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Link' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Link = ({"sui-link-root":"sui-link-root","sui-focus-visible":"sui-focus-visible","sui-link-none":"sui-link-none","sui-link-hover":"sui-link-hover","sui-link-always":"sui-link-always","sui-link":"sui-link","sui-link-primary":"sui-link-primary","sui-link-secondary":"sui-link-secondary","sui-link-inverted":"sui-link-inverted"});
+
+
+
+
+
+const Link_Link = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Link'
+    });
     const { classes, component: Component = 'a', className, underline = 'hover', children, variant = 'primary', onBlur, onFocus, onFocusVisible, ...rest } = props;
     const cls = useClasses('link', classes, className);
-    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible({ onFocusVisible, onFocus, onBlur });
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible({
+        onFocusVisible,
+        onFocus,
+        onBlur
+    });
     const linkRef = useForkRef(ref, focusVisibleRef);
-    return (jsx(Component, { className: cls('root', variant, underline, { focusVisible }), ...rest, ...focusVisibleHandlers, ref: linkRef, children: children }));
+    return /*#__PURE__*/ jsx(Component, {
+        className: cls('root', variant, underline, {
+            focusVisible
+        }),
+        ...rest,
+        ...focusVisibleHandlers,
+        ref: linkRef,
+        children: children
+    });
 });
-Link.displayName = 'SuiLink';
+Link_Link.displayName = 'SuiLink';
+
+
+
+
+
 
-export { Link, Link$1 as linkStyle };
+export { Link as linkStyle, Link_Link as Link };

package/List.js

@@ -1,11 +1,56 @@
-export { L as List } from './chunks/List.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import './chunks/useListNavigation.js';
-import 'tabbable';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses, useForkRef } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { useListNavigation } from "./ListNavigation.js";
 
-var List = {"sui-list-root":"sui-list-root"};
 
-export { List as listStyle };
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var List = ({"sui-list-root":"sui-list-root"});
+
+
+
+
+
+
+const List_List = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'List'
+    });
+    const { classes, className, children, onKeyDown, onFocus, preventContainerScroll, searchAndFocusItemHandler, actions, ...rest } = props;
+    const cls = useClasses('list', classes, className);
+    const { renderItems, renderTabBoundary, getListProps, listRef } = useListNavigation({
+        preventContainerScroll,
+        searchAndFocusItemHandler,
+        actions
+    });
+    const handleRef = useForkRef(ref, listRef);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                role: "list",
+                className: cls('root'),
+                ...rest,
+                ...getListProps({
+                    onFocus,
+                    onKeyDown
+                }),
+                ref: handleRef,
+                children: renderItems(children)
+            }),
+            renderTabBoundary()
+        ]
+    });
+});
+List_List.displayName = 'SuiList';
+
+
+
+
+
+
+export { List as listStyle, List_List as List };

package/ListItem.js

@@ -1,23 +1,152 @@
-export { H as HoverActions, L as ListItem } from './chunks/ListItem.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import './chunks/Divider.js';
-import './ListNavigation.js';
-import './chunks/useListNavigation.js';
-import 'tabbable';
-import './VirtualizedList.js';
-import 'react-virtuoso';
-import './chunks/useAnimationFrame.js';
-import './chunks/List.js';
-import 'framer-motion';
-import './chunks/Icon.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/SlideIn.js';
-import './chunks/getSlideIn.js';
-
-var ListItem = {"sui-list-item-root":"sui-list-item-root","sui-list-item-content":"sui-list-item-content","sui-list-item-text":"sui-list-item-text","sui-list-item-divider":"sui-list-item-divider","sui-list-item-container":"sui-list-item-container","sui-list-item-hover-actions":"sui-list-item-hover-actions","sui-list-item-small":"sui-list-item-small","sui-list-item-large":"sui-list-item-large","sui-list-item-auto":"sui-list-item-auto","sui-focus-visible":"sui-focus-visible","sui-focused":"sui-focused","sui-list-item-hoverable":"sui-list-item-hoverable","sui-focus-visible-within":"sui-focus-visible-within","sui-list-item-clickable":"sui-list-item-clickable","sui-selected":"sui-selected","sui-list-item-highlighted":"sui-list-item-highlighted","sui-dragged":"sui-dragged","sui-active":"sui-active","sui-compact":"sui-compact"};
-
-export { ListItem as listItemStyle };
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motionTransition, useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import { AnimatePresence } from "framer-motion";
+import { forwardRef, useEffect } from "react";
+import { combineProps, useActive, useFocusVisible, useForkRef, useHover } from "@ringcentral/spring-base";
+import { SlideIn } from "./chunks/4476.js";
+import { Divider as Divider_Divider } from "./Divider.js";
+import { useItemNavigation } from "./ListNavigation.js";
+import { useVirtualizedItemPropsContext } from "./VirtualizedList.js";
+import { useMotionSafeTransition } from "./chunks/1294.js";
+
+
+
+
+
+
+
+
+const HoverActions = (props)=>{
+    const { show, children, className, instantTransition } = props;
+    const toggleOnTransition = useMotionSafeTransition(motionTransition["spring-01-fast"]);
+    const toggleOffTransition = useMotionSafeTransition(motionTransition["neutral-01-fast"]);
+    const slideInProps = {
+        toggle: show,
+        children,
+        className,
+        toggleOffTransition: instantTransition ? motionTransition.instant : toggleOffTransition,
+        toggleOnTransition: instantTransition ? motionTransition.instant : toggleOnTransition,
+        onClick: (e)=>{
+            e.stopPropagation();
+        }
+    };
+    return /*#__PURE__*/ jsx(AnimatePresence, {
+        children: show && /*#__PURE__*/ jsx(SlideIn, {
+            ...slideInProps,
+            children: children
+        })
+    });
+};
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var ListItem = ({"sui-list-item-root":"sui-list-item-root","sui-list-item-content":"sui-list-item-content","sui-list-item-text":"sui-list-item-text","sui-list-item-divider":"sui-list-item-divider","sui-list-item-container":"sui-list-item-container","sui-list-item-hover-actions":"sui-list-item-hover-actions","sui-list-item-small":"sui-list-item-small","sui-list-item-large":"sui-list-item-large","sui-list-item-auto":"sui-list-item-auto","sui-focus-visible":"sui-focus-visible","sui-focused":"sui-focused","sui-list-item-hoverable":"sui-list-item-hoverable","sui-focus-visible-within":"sui-focus-visible-within","sui-list-item-clickable":"sui-list-item-clickable","sui-selected":"sui-selected","sui-list-item-highlighted":"sui-list-item-highlighted","sui-dragged":"sui-dragged","sui-active":"sui-active","sui-compact":"sui-compact"});
+
+
+
+
+
+
+
+
+
+const ListItem_ListItem = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'ListItem'
+    });
+    const { classes, className, children, hoverActions, size = 'small', tabIndex = -1, role = 'listitem', divider = true, onClick, clickable = Boolean(onClick), hoverable = true, focused = false, highlighted = false, autoFocus, selected, dragged, alwaysShowHoverActions = false, instantHoverActions = false, style: styleProp, ...rest } = props;
+    const cls = useClassesWithMode('list-item', classes, className);
+    const { itemRef, keyboardNavHandlers } = useItemNavigation() ?? {};
+    const virtualizedItemProps = useVirtualizedItemPropsContext();
+    const { focusVisible, focusVisibleWithin, focusVisibleRef, focusVisibleHandlers } = useFocusVisible({
+        ...props,
+        within: true
+    });
+    const { active, activeHandlers } = useActive({
+        ...props,
+        disabled: !clickable
+    });
+    const { hover, hoverHandlers } = useHover({
+        ...props,
+        // useHover only used for hover actions,
+        // so disabled when no hover actions or always show
+        disabled: !hoverable || !hoverActions
+    });
+    const enhancedEventHandlers = (()=>{
+        const handlers = {
+            ...focusVisibleHandlers,
+            ...activeHandlers,
+            ...hoverHandlers
+        };
+        if (keyboardNavHandlers) {
+            return combineProps(handlers, keyboardNavHandlers);
+        }
+        return handlers;
+    })();
+    const rootRef = useForkRef(itemRef, ref, focusVisibleRef);
+    useEffect(()=>{
+        if (autoFocus) {
+            itemRef?.current?.focus();
+        }
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const isShowHoverAction = hover || focusVisibleWithin || alwaysShowHoverActions;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cls('root', size, {
+            focusVisibleWithin,
+            focusVisible,
+            active,
+            clickable,
+            hoverable,
+            selected,
+            dragged,
+            focused,
+            highlighted
+        }),
+        tabIndex: tabIndex,
+        ...rest,
+        ...enhancedEventHandlers,
+        ...virtualizedItemProps,
+        style: virtualizedItemProps ? {
+            ...styleProp,
+            ...virtualizedItemProps.style
+        } : styleProp,
+        role: role,
+        ref: rootRef,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: cls('container'),
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: cls('content'),
+                        children: children
+                    }),
+                    hoverActions && /*#__PURE__*/ jsx(HoverActions, {
+                        show: isShowHoverAction,
+                        className: cls('hover-actions'),
+                        instantTransition: instantHoverActions,
+                        children: hoverActions
+                    })
+                ]
+            }),
+            divider && /*#__PURE__*/ jsx(Divider_Divider, {
+                className: cls('divider'),
+                orientation: "horizontal",
+                flexItem: true
+            })
+        ]
+    });
+});
+ListItem_ListItem.displayName = 'SuiListItem';
+
+
+
+
+
+
+
+export { HoverActions, ListItem as listItemStyle, ListItem_ListItem as ListItem };