@ringcentral/spring-ui 1.11.2 → 1.13.0

package/SortableListDndContext.js

@@ -1,49 +1,96 @@
-import { useDndContext, KeyboardCode, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
-import { ownerDocument } from '@ringcentral/spring-base';
-import { useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-export { arrayMove } from '@dnd-kit/sortable';
-import { useThemeProps } from '@ringcentral/spring-theme';
-
-const DndKeyboardBlocker = () => {
+import { DndContext, KeyboardCode, KeyboardSensor, PointerSensor, closestCenter, useDndContext, useSensor, useSensors } from "@dnd-kit/core";
+import { ownerDocument } from "@ringcentral/spring-base";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { useThemeProps } from "@ringcentral/spring-theme";
+
+
+
+
+
+
+
+const DndKeyboardBlocker = ()=>{
     const { activeNode } = useDndContext();
-    useEffect(() => {
+    useEffect(()=>{
         if (activeNode) {
             const externalDocument = ownerDocument(activeNode);
-            const listener = (e) => {
+            const listener = (e)=>{
                 if (e.key === 'Tab') {
                     e.preventDefault();
                 }
             };
             externalDocument.addEventListener('keydown', listener);
-            return () => externalDocument.removeEventListener('keydown', listener);
+            return ()=>externalDocument.removeEventListener('keydown', listener);
         }
         return undefined;
-    }, [activeNode]);
+    }, [
+        activeNode
+    ]);
     return null;
 };
 
-const pointerSensorOpts = { activationConstraint: { distance: 10 } };
+
+
+
+
+
+
+
+
+
+const pointerSensorOpts = {
+    activationConstraint: {
+        distance: 10
+    }
+};
 const keyboardSensorOpts = {
     coordinateGetter: sortableKeyboardCoordinates,
     keyboardCodes: {
-        start: [KeyboardCode.Space],
-        cancel: [KeyboardCode.Esc],
-        end: [KeyboardCode.Space, KeyboardCode.Enter],
-    },
+        start: [
+            KeyboardCode.Space
+        ],
+        cancel: [
+            KeyboardCode.Esc
+        ],
+        end: [
+            KeyboardCode.Space,
+            KeyboardCode.Enter
+        ]
+    }
 };
-const SortableListDndContext = (inProps) => {
+const SortableListDndContext = (inProps)=>{
     const props = useThemeProps({
         props: inProps,
-        name: 'SortableListDndContext',
+        name: 'SortableListDndContext'
     });
     const { children, collisionDetection = closestCenter, ...rest } = props;
     const sensors = useSensors(useSensor(PointerSensor, pointerSensorOpts), useSensor(KeyboardSensor, keyboardSensorOpts));
-    return (jsxs(DndContext, { sensors: sensors, collisionDetection: collisionDetection, ...rest, children: [jsx(DndKeyboardBlocker, {}), children] }));
+    return /*#__PURE__*/ jsxs(DndContext, {
+        sensors: sensors,
+        collisionDetection: collisionDetection,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(DndKeyboardBlocker, {}),
+            children
+        ]
+    });
 };
 SortableListDndContext.displayName = 'SortableListDndContext';
 
+
+
+
 const useSortableListDndContext = useDndContext;
 
-export { DndKeyboardBlocker, SortableListDndContext, useSortableListDndContext };
+
+
+
+
+
+
+
+
+
+export { DndKeyboardBlocker, SortableListDndContext, arrayMove, useSortableListDndContext };

package/SortableListItem.js

@@ -1,81 +1,126 @@
-import { jsx } from 'react/jsx-runtime';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { useForkRef, combineProps, useWindowContext } from '@ringcentral/spring-base';
-import { forwardRef } from 'react';
-import { useTheme } from '@ringcentral/spring-theme';
-import 'framer-motion';
-import './chunks/Icon.js';
-import { L as ListItem } from './chunks/ListItem.js';
-import { useDndContext, DragOverlay } from '@dnd-kit/core';
-import { Portal } from '@mui/base';
-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 './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/SlideIn.js';
-import './chunks/getSlideIn.js';
-
-const SortableListItem = forwardRef((props, ref) => {
+import { jsx } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { combineProps, useForkRef, useWindowContext } from "@ringcentral/spring-base";
+import { forwardRef } from "react";
+import { DragOverlay, useDndContext } from "@dnd-kit/core";
+import { useTheme } from "@ringcentral/spring-theme";
+import { ListItem as ListItem_ListItem } from "./ListItem.js";
+import { Portal } from "./Portal.js";
+
+
+
+
+
+
+
+
+
+
+
+
+const SortableListItem = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { style, children, dragId, role = 'listitem', ...rest } = props;
-    const { setNodeRef, setActivatorNodeRef, listeners, attributes, transform, transition, isDragging, isSorting, } = useSortable({
+    const { setNodeRef, setActivatorNodeRef, listeners, attributes, transform, transition, isDragging, isSorting } = useSortable({
         id: dragId,
         attributes: {
             tabIndex: -1,
-            role,
-        },
+            role
+        }
     });
     const handleRef = useForkRef(ref, setNodeRef, setActivatorNodeRef);
-    return (jsx(ListItem, { ...combineProps(combineProps(rest, {
-            onKeyDown: (e) => {
-                if (isSorting &&
-                    ['End', 'Home', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
+    return /*#__PURE__*/ jsx(ListItem_ListItem, {
+        ...combineProps(combineProps(rest, {
+            onKeyDown: (e)=>{
+                // prevent trigger keyboard navigation
+                if (isSorting && [
+                    'End',
+                    'Home',
+                    'ArrowUp',
+                    'ArrowDown'
+                ].includes(e.key)) {
                     e.preventDefault();
                 }
             },
-            onKeyUp: (e) => {
+            onKeyUp: (e)=>{
                 if (e.target === e.currentTarget && e.key === ' ') {
                     e.preventDefault();
                 }
-            },
-        }), listeners), ...attributes, style: {
+            }
+        }), listeners),
+        ...attributes,
+        style: {
             ...style,
             transform: CSS.Transform.toString(transform),
             opacity: isDragging ? 0 : 1,
             touchAction: 'none',
-            transition,
-        }, ref: handleRef, hoverable: !isSorting, children: children }));
+            transition
+        },
+        ref: handleRef,
+        hoverable: !isSorting,
+        children: children
+    });
 });
 SortableListItem.displayName = 'SuiSortableListItem';
 
+
+
+
+
+
+
+
+
+
+
+
+
+
 const overlayVisualOnlyProps = {
     'aria-hidden': true,
-    inert: '',
+    inert: ''
 };
 const SORTABLE_LIST_ITEM_OVERLAY_Z_INDEX = 1500;
-const SortableListItemOverlay = forwardRef((props, ref) => {
+const SortableListItemOverlay = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { children, OverlayProps, ...rest } = props;
     const { style: overlayStyle, zIndex: overlayZIndex, ...overlayProps } = OverlayProps ?? {};
     const { active, activatorEvent } = useDndContext();
     const { document } = useWindowContext();
     const { scopeProps } = useTheme();
-    const isMousePointerActivator = activatorEvent != null &&
-        'pointerType' in activatorEvent &&
-        activatorEvent.pointerType === 'mouse';
-    return (jsx(Portal, { container: document?.body, children: jsx("div", { ...scopeProps, style: { display: 'contents' }, children: jsx(DragOverlay, { ...overlayProps, zIndex: overlayZIndex ?? SORTABLE_LIST_ITEM_OVERLAY_Z_INDEX, style: {
+    const isMousePointerActivator = activatorEvent != null && 'pointerType' in activatorEvent && activatorEvent.pointerType === 'mouse';
+    return /*#__PURE__*/ jsx(Portal, {
+        container: document?.body,
+        children: /*#__PURE__*/ jsx("div", {
+            ...scopeProps,
+            style: {
+                display: 'contents'
+            },
+            children: /*#__PURE__*/ jsx(DragOverlay, {
+                ...overlayProps,
+                zIndex: overlayZIndex ?? SORTABLE_LIST_ITEM_OVERLAY_Z_INDEX,
+                style: {
                     ...overlayStyle,
                     pointerEvents: isMousePointerActivator ? 'none' : 'auto',
-                    touchAction: 'none',
-                }, children: active && (jsx(ListItem, { ...rest, ref: ref, dragged: true, ...overlayVisualOnlyProps, tabIndex: undefined, children: typeof children === 'function'
-                        ? children(active.id)
-                        : children })) }) }) }));
+                    touchAction: 'none'
+                },
+                children: active && /*#__PURE__*/ jsx(ListItem_ListItem, {
+                    ...rest,
+                    ref: ref,
+                    dragged: true,
+                    ...overlayVisualOnlyProps,
+                    tabIndex: undefined,
+                    children: typeof children === 'function' ? children(active.id) : children
+                })
+            })
+        })
+    });
 });
 SortableListItemOverlay.displayName = 'SortableListItemOverlay';
 
+
+
+
+
+
+
 export { SortableListItem, SortableListItemOverlay };

package/SortableVirtualizedList.js

@@ -1,37 +1,61 @@
-import { jsx } from 'react/jsx-runtime';
-import { useDndContext } from '@dnd-kit/core';
-import { SortableContext } from '@dnd-kit/sortable';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { forwardRef, useMemo } from 'react';
-import { VirtualizedList } from './VirtualizedList.js';
-import '@ringcentral/spring-base';
-import 'react-virtuoso';
-import './chunks/useAnimationFrame.js';
-import './chunks/List.js';
-import './chunks/useListNavigation.js';
-import 'tabbable';
-
-const SortableVirtualizedList = forwardRef((inProps, ref) => {
+import { jsx } from "react/jsx-runtime";
+import { useDndContext } from "@dnd-kit/core";
+import { SortableContext } from "@dnd-kit/sortable";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { forwardRef, useMemo } from "react";
+import { VirtualizedList } from "./VirtualizedList.js";
+
+
+
+
+
+
+
+
+
+
+
+
+const SortableVirtualizedList = /*#__PURE__*/ forwardRef((inProps, ref)=>{
     const props = useThemeProps({
         props: inProps,
-        name: 'SortableVirtualizedList',
+        name: 'SortableVirtualizedList'
     });
     const { children, data, ...rest } = props;
     const { active } = useDndContext();
-    const keepInvisibleItems = useMemo(() => {
-        return active
-            ? [
-                data.findIndex((value) => {
-                    if (typeof value === 'object') {
-                        return value.id === active.id;
-                    }
-                    return value === active.id;
-                }),
-            ]
-            : undefined;
-    }, [active, data]);
-    return (jsx(SortableContext, { items: data, children: jsx(VirtualizedList, { ...rest, data: data, keepInvisibleItems: keepInvisibleItems, computeItemKey: (_, item) => typeof item === 'object' ? item.id : item, ref: ref, children: (index, data) => children(data, index) }) }));
+    const keepInvisibleItems = useMemo(()=>{
+        if (!active) {
+            return undefined;
+        }
+        const activeIndex = data.findIndex((value)=>{
+            if (typeof value === 'object') {
+                return value.id === active.id;
+            }
+            return value === active.id;
+        });
+        return activeIndex === -1 ? undefined : [
+            activeIndex
+        ];
+    }, [
+        active,
+        data
+    ]);
+    return /*#__PURE__*/ jsx(SortableContext, {
+        items: data,
+        children: /*#__PURE__*/ jsx(VirtualizedList, {
+            ...rest,
+            data: data,
+            keepInvisibleItems: keepInvisibleItems,
+            computeItemKey: (_, item)=>typeof item === 'object' ? item.id : item,
+            ref: ref,
+            children: (index, data)=>children(data, index)
+        })
+    });
 });
 SortableVirtualizedList.displayName = 'SuiSortableVirtualizedList';
 
+
+
+
+
 export { SortableVirtualizedList };