npm - @elliemae/ds-shuttle-v2 - Versions diffs - 3.14.0-next.1 → 3.14.0-next.11 - Mend

@elliemae/ds-shuttle-v2 3.14.0-next.1 → 3.14.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (174) hide show

package/dist/esm/parts/HoC/withConditionalDnDRowContext.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2, { useCallback, useEffect } from "react";
 import { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from "@elliemae/ds-drag-and-drop";
 import { createPortal } from "react-dom";
 import { useInternalStore, usePropsStore } from "../../config/useStore";
@@ -13,28 +13,47 @@ const withConditionalDnDRowContext = (Component) => (props) => {
   const withDragNDrop = usePropsStore(
     (state) => isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource
   );
+  const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);
+  const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);
   const setOverId = useInternalStore((state) => state.setOverId);
   const setIsDropValid = useInternalStore((state) => state.setIsDropValid);
+  const setDndDraggingItem = useInternalStore((state) => state.setDndDraggingItem);
   const setLastActiveId = useInternalStore((state) => state.setLastActiveId);
   const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);
   const onItemsReorder = usePropsStore(
     (state) => isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder
   );
   const onReorder = useCallback(
-    (newData, metadata) => {
-      onItemsReorder(newData, { active: metadata.active.original, targetIndex: metadata.targetIndex });
+    (_newData, metadata) => {
+      const { considerExpanding, active: dndActive, over: dndOver, ...dndData } = metadata;
+      const over = dndOver.original.original;
+      const active = dndActive.original.original;
+      const cleanedMetaData = { ...dndData, over, active };
+      onItemsReorder(active, cleanedMetaData);
     },
     [onItemsReorder]
   );
-  const { dndContextProps, sortableContextProps, activeId, overId, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({
-    flattenedItems: itemList,
-    visibleItems: itemList,
-    isHorizontalDnD: false,
-    isExpandable: false,
-    onReorder,
-    maxDragAndDropLevel: 0,
-    getIsDropValid: () => true
-  });
+  const treeConfig = React2.useMemo(() => {
+    const configuredItemList = itemList.map((item, i) => ({
+      uid: item.hydratedId,
+      depth: 0,
+      parentId: null,
+      realIndex: i,
+      visibleIndex: i,
+      childrenCount: 0,
+      original: item
+    }));
+    return {
+      flattenedItems: configuredItemList,
+      visibleItems: configuredItemList,
+      isHorizontalDnD: false,
+      isExpandable: false,
+      onReorder,
+      maxDragAndDropLevel: 0,
+      getIsDropValid: () => true
+    };
+  }, [itemList, onReorder]);
+  const { dndContextProps, sortableContextProps, activeItem, activeId, overId, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig(treeConfig);
   useEffect(() => {
     setLastActiveId(activeId);
   }, [activeId, setLastActiveId]);
@@ -44,18 +63,24 @@ const withConditionalDnDRowContext = (Component) => (props) => {
   useEffect(() => {
     setIsDropValid(isDropValid);
   }, [isDropValid, setIsDropValid]);
+  useEffect(() => {
+    setDndDraggingItem(activeItem?.original ?? null);
+  }, [activeItem, setDndDraggingItem]);
   useEffect(() => {
     setDropIndicatorPosition(dropIndicatorPosition);
   }, [dropIndicatorPosition, setDropIndicatorPosition]);
-  const item = itemList.find((currentItem) => currentItem.original.id === activeId);
+  useEffect(() => {
+    if (!Boolean(activeId) || activeId === "")
+      setDndDraggingItemMeta(null);
+  }, [activeId, setDndDraggingItemMeta]);
   if (withDragNDrop)
-    return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, children: [
-      /* @__PURE__ */ jsx(SortableContext, { ...sortableContextProps, children: /* @__PURE__ */ jsx(Component, { ...props }) }),
+    return /* @__PURE__ */ jsx(DndContext, { ...dndContextProps, children: /* @__PURE__ */ jsxs(SortableContext, { ...sortableContextProps, children: [
+      /* @__PURE__ */ jsx(Component, { ...props }),
       createPortal(
-        /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, children: activeId ? /* @__PURE__ */ jsx(ItemOverlay, { item, ...props }) : null }),
+        /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, children: /* @__PURE__ */ jsx(Fragment, { children: dndDraggingItemMeta ? /* @__PURE__ */ jsx(ItemOverlay, { ...dndDraggingItemMeta }) : null }) }),
         document.body
       )
-    ] });
+    ] }) });
   return /* @__PURE__ */ jsx(Component, { ...props });
 };
 export {

package/dist/esm/parts/HoC/withConditionalDnDRowContext.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDRowContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect } from 'react';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport { ItemOverlay } from '../Item/ItemOverlay';\n\ntype FunctionalHOC = <T = any>(Component: React.ComponentType<T>, ...other: any[]) => (props: T) => JSX.Element;\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const { isDestinationPanel } = props;\n  const itemList = useInternalStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n\n  const withDragNDrop = usePropsStore((state) =>\n    isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n  );\n\n  const setOverId = useInternalStore((state) => state.setOverId);\n  const setIsDropValid = useInternalStore((state) => state.setIsDropValid);\n  const setLastActiveId = useInternalStore((state) => state.setLastActiveId);\n  const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);\n\n  const onItemsReorder = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder,\n  );\n\n  const onReorder = useCallback(\n    (newData: unknown, metadata: { targetIndex: number; active: unknown }) => {\n      onItemsReorder(newData, { active: metadata.active.original, targetIndex: metadata.targetIndex });\n    },\n    [onItemsReorder],\n  );\n\n  const { dndContextProps, sortableContextProps, activeId, overId, dropIndicatorPosition, isDropValid } =\n    useTreeDndkitConfig({\n      flattenedItems: itemList,\n      visibleItems: itemList,\n      isHorizontalDnD: false,\n      isExpandable: false,\n      onReorder,\n      maxDragAndDropLevel: 0,\n      getIsDropValid: () => true,\n    });\n\n  useEffect(() => {\n    setLastActiveId(activeId);\n  }, [activeId, setLastActiveId]);\n\n  useEffect(() => {\n    setOverId(overId);\n  }, [overId, setOverId]);\n\n  useEffect(() => {\n    setIsDropValid(isDropValid);\n  }, [isDropValid, setIsDropValid]);\n\n  useEffect(() => {\n    setDropIndicatorPosition(dropIndicatorPosition);\n  }, [dropIndicatorPosition, setDropIndicatorPosition]);\n\n  const item = itemList.find((currentItem) => currentItem.original.id === activeId);\n  if (withDragNDrop)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <Component {...props} />\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }}>\n            {activeId ? <ItemOverlay item={item} {...props} /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmEjB,SAEI,KAFJ;AAjEN,SAAgB,aAAa,iBAAiB;AAC9C,SAAS,YAAY,aAAa,iBAAiB,2BAA2B;AAC9E,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,mBAAmB;AAKrB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,WAAW;AAAA,IAAiB,CAAC,UACjC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AAEA,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,CAAC,MAAM,mCAAmC,MAAM;AAAA,EACvE;AAEA,QAAM,YAAY,iBAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,iBAAiB,iBAAiB,CAAC,UAAU,MAAM,cAAc;AACvE,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,2BAA2B,iBAAiB,CAAC,UAAU,MAAM,wBAAwB;AAE3F,QAAM,iBAAiB;AAAA,IAAc,CAAC,UACpC,qBAAqB,MAAM,uBAAuB,MAAM;AAAA,EAC1D;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,SAAkB,aAAuD;AACxE,qBAAe,SAAS,EAAE,QAAQ,SAAS,OAAO,UAAU,aAAa,SAAS,YAAY,CAAC;AAAA,IACjG;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,UAAU,QAAQ,uBAAuB,YAAY,IAClG,oBAAoB;AAAA,IAClB,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA,qBAAqB;AAAA,IACrB,gBAAgB,MAAM;AAAA,EACxB,CAAC;AAEH,YAAU,MAAM;AACd,oBAAgB,QAAQ;AAAA,EAC1B,GAAG,CAAC,UAAU,eAAe,CAAC;AAE9B,YAAU,MAAM;AACd,cAAU,MAAM;AAAA,EAClB,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,YAAU,MAAM;AACd,mBAAe,WAAW;AAAA,EAC5B,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,YAAU,MAAM;AACd,6BAAyB,qBAAqB;AAAA,EAChD,GAAG,CAAC,uBAAuB,wBAAwB,CAAC;AAEpD,QAAM,OAAO,SAAS,KAAK,CAAC,gBAAgB,YAAY,SAAS,OAAO,QAAQ;AAChF,MAAI;AACF,WACE,qBAAC,cAAY,GAAG,iBACd;AAAA,0BAAC,mBAAiB,GAAG,sBACnB,8BAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MACC;AAAA,QACC,oBAAC,eAAY,OAAO,EAAE,OAAO,OAAO,GACjC,qBAAW,oBAAC,eAAY,MAAa,GAAG,OAAO,IAAK,MACvD;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect } from 'react';\nimport type { DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\n\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport type { DSShuttleV2T } from '../../react-desc-prop-types';\nimport { ItemOverlay } from '../Item/ItemOverlay';\n\ntype HoCConfig = DSShuttleV2T.PanelMetaInfo;\ntype InternalHoCStates = {\n  activeId?: DSShuttleV2T.HydratedId;\n  overId?: DSShuttleV2T.HydratedId;\n  isDropValid?: boolean;\n};\ntype ResultComponentProps = DSShuttleV2T.PanelMetaInfo & InternalHoCStates;\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: ConfiguredReactFunctionalHOC<HoCConfig, ResultComponentProps> =\n  (Component) => (props) => {\n    const { isDestinationPanel } = props;\n    const itemList = useInternalStore((state) =>\n      isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n    );\n\n    const withDragNDrop = usePropsStore((state) =>\n      isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n    );\n\n    const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n    const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);\n    const setOverId = useInternalStore((state) => state.setOverId);\n    const setIsDropValid = useInternalStore((state) => state.setIsDropValid);\n    const setDndDraggingItem = useInternalStore((state) => state.setDndDraggingItem);\n    const setLastActiveId = useInternalStore((state) => state.setLastActiveId);\n    const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);\n\n    const onItemsReorder = usePropsStore((state) =>\n      isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder,\n    );\n\n    const onReorder: DnDKitTree.OnReorder<DSShuttleV2T.ConfiguredDatum> = useCallback(\n      (_newData, metadata) => {\n        // eslint-disable-next-line no-unused-vars\n        const { considerExpanding, active: dndActive, over: dndOver, ...dndData } = metadata;\n        const over = dndOver.original.original;\n        const active = dndActive.original.original;\n        const cleanedMetaData = { ...dndData, over, active };\n        onItemsReorder(active, cleanedMetaData);\n      },\n      [onItemsReorder],\n    );\n\n    const treeConfig = React.useMemo(() => {\n      const configuredItemList = itemList.map((item, i) => ({\n        // dnd\n        uid: item.hydratedId,\n        depth: 0,\n        parentId: null,\n        realIndex: i,\n        visibleIndex: i,\n        childrenCount: 0,\n        original: item,\n      }));\n      return {\n        flattenedItems: configuredItemList,\n        visibleItems: configuredItemList,\n        isHorizontalDnD: false,\n        isExpandable: false,\n        onReorder,\n        maxDragAndDropLevel: 0,\n        getIsDropValid: () => true,\n      };\n    }, [itemList, onReorder]);\n\n    const { dndContextProps, sortableContextProps, activeItem, activeId, overId, dropIndicatorPosition, isDropValid } =\n      useTreeDndkitConfig(treeConfig);\n\n    useEffect(() => {\n      setLastActiveId(activeId);\n    }, [activeId, setLastActiveId]);\n\n    useEffect(() => {\n      setOverId(overId);\n    }, [overId, setOverId]);\n\n    useEffect(() => {\n      setIsDropValid(isDropValid);\n    }, [isDropValid, setIsDropValid]);\n\n    useEffect(() => {\n      setDndDraggingItem(activeItem?.original ?? null);\n    }, [activeItem, setDndDraggingItem]);\n\n    useEffect(() => {\n      setDropIndicatorPosition(dropIndicatorPosition);\n    }, [dropIndicatorPosition, setDropIndicatorPosition]);\n\n    useEffect(() => {\n      if (!Boolean(activeId) || activeId === '') setDndDraggingItemMeta(null);\n    }, [activeId, setDndDraggingItemMeta]);\n\n    if (withDragNDrop)\n      return (\n        <DndContext {...dndContextProps}>\n          <SortableContext {...sortableContextProps}>\n            <Component {...props} />\n            {createPortal(\n              <DragOverlay style={{ width: 'auto' }}>\n                <>{dndDraggingItemMeta ? <ItemOverlay {...dndDraggingItemMeta} /> : null}</>\n              </DragOverlay>,\n              document.body,\n            )}\n          </SortableContext>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

package/dist/esm/parts/HoC/withConditionalUseSortable.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useSortable } from "@elliemae/ds-drag-and-drop";
-const withConditionalUseSortable = (Component) => (props) => {
-  const { id } = props.item.original;
-  const useSortableHelpers = useSortable({ id });
+const withConditionalUseSortable = (Component) => function(props) {
+  const { datumInternalMeta } = props;
+  const { hydratedId } = datumInternalMeta;
+  const useSortableHelpers = useSortable({ id: hydratedId });
   return /* @__PURE__ */ jsx(Component, { ...props, useSortableHelpers });
 };
 export {

package/dist/esm/parts/HoC/withConditionalUseSortable.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalUseSortable.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\n\nexport const withConditionalUseSortable = (Component) => (props) => {\n  const { id } = props.item.original;\n  const useSortableHelpers = useSortable({ id });\n\n  return <Component {...props} useSortableHelpers={useSortableHelpers} />;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACOd;AANT,SAAS,mBAAmB;AAErB,MAAM,6BAA6B,CAAC,cAAc,CAAC,UAAU;AAClE,QAAM,EAAE,GAAG,IAAI,MAAM,KAAK;AAC1B,QAAM,qBAAqB,YAAY,EAAE,GAAG,CAAC;AAE7C,SAAO,oBAAC,aAAW,GAAG,OAAO,oBAAwC;AACvE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\n\ntype HoCConfig = DSShuttleV2T.ItemMeta;\ntype ResultComponentProps = DSShuttleV2T.ItemMeta & { useSortableHelpers: ReturnType<typeof useSortable> };\nexport const withConditionalUseSortable: ConfiguredReactFunctionalHOC<HoCConfig, ResultComponentProps> = (Component) =>\n  function (props) {\n    const { datumInternalMeta } = props;\n    const { hydratedId } = datumInternalMeta;\n    const useSortableHelpers = useSortable({ id: hydratedId });\n\n    return <Component {...props} useSortableHelpers={useSortableHelpers} />;\n  };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYZ;AAXX,SAAS,mBAAmB;AAKrB,MAAM,6BAA4F,CAAC,cACxG,SAAU,OAAO;AACf,QAAM,EAAE,kBAAkB,IAAI;AAC9B,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,qBAAqB,YAAY,EAAE,IAAI,WAAW,CAAC;AAEzD,SAAO,oBAAC,aAAW,GAAG,OAAO,oBAAwC;AACvE;",
   "names": []
 }

package/dist/esm/parts/Item/Item.js CHANGED Viewed

@@ -17,6 +17,7 @@ import { DragHandle } from "../Dnd/DndHandle";
 import { DropIndicator } from "../Dnd/DropIndicator";
 import { withConditionalUseSortable } from "../HoC/withConditionalUseSortable";
 import { useInnerRefHandlers as useInnerRefActionHandlers } from "./ItemActions/useInnerRefHandlers";
+import { useItemKeyboardSelection } from "./useItemKeyboardSelection";
 const cssDisabled = css`
   background-color: ${({ theme }) => theme.colors.neutral["100"]};
   color: ${({ theme }) => theme.colors.neutral["300"]};
@@ -27,7 +28,7 @@ const cssDisabled = css`
   }
 `;
 const ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })`
-  min-height: 36px;
+  min-height: 2.769rem;
   position: relative;
   background-color: white;
   &:hover {
@@ -48,14 +49,14 @@ const ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots
   ${({ isDragging }) => isDragging && cssDisabled}
 `;
-const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
-  const { isFirst, isLast } = item;
+const useInnerRefHandlers = ({ datum, datumInternalMeta, isDestinationPanel }) => {
+  const { isFirst, isLast, hydratedId } = datumInternalMeta;
   const { trackFocusItem } = useFocusTracker();
   const focusRegion = useInternalStore((state) => state.focusRegion);
   const focusItem = useInternalStore((state) => state.focusItem);
   const focusItemAction = useInternalStore((state) => state.focusItemAction);
   const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
-  const currItemId = item.original.id;
+  const currItemId = hydratedId;
   const shouldFocus = React2.useMemo(
     () => focusRegion === currRegion && focusItemAction === "parent" && (focusItem === currItemId || isFirst && focusItem === "first" || isLast && focusItem === "last"),
     [currItemId, currRegion, focusItem, focusItemAction, focusRegion, isFirst, isLast]
@@ -64,72 +65,80 @@ const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
     (node) => {
       if (shouldFocus) {
         node?.focus();
-        trackFocusItem(item);
+        trackFocusItem({ original: datum, ...datumInternalMeta });
       }
     },
-    [item, shouldFocus, trackFocusItem]
+    [datum, datumInternalMeta, shouldFocus, trackFocusItem]
   );
   return React2.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);
 };
 const Item = React2.memo((itemMeta) => {
-  const { item, withDragNDrop, useSortableHelpers } = itemMeta;
-  const { original, isSelected } = item;
-  const { id } = original;
+  const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;
+  const { isSelected, hydratedId } = datumInternalMeta;
   const cols = useMemo(() => {
     if (withDragNDrop)
       return ["5px", "auto", "1fr", "auto"];
     return ["5px", "1fr", "auto"];
   }, [withDragNDrop]);
-  const dndActiveId = useInternalStore((state) => state.lastActiveId);
-  const isActive = useMemo(() => dndActiveId !== "", [dndActiveId]);
-  const selectItem = useSelectionLogic(itemMeta);
+  const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);
+  const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);
+  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);
+  const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);
+  const isDraggingThisItem = dndDraggingItem?.hydratedId === hydratedId;
+  React2.useEffect(() => {
+    if (isDraggingThisItem && dndDraggingItemMeta?.datumInternalMeta.hydratedId !== hydratedId)
+      setDndDraggingItemMeta(itemMeta);
+  }, [
+    dndDraggingItemMeta?.datumInternalMeta.hydratedId,
+    hydratedId,
+    isDraggingThisItem,
+    itemMeta,
+    setDndDraggingItemMeta
+  ]);
+  const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);
   const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);
+  const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);
   const handleItemKeyDown = React2.useCallback(
     (event) => {
-      const { key } = event;
-      if (["Spacebar", " ", "Enter"].includes(key)) {
-        if (isActive || event.target.id === `${id}-drag-handle`) {
-          event.preventDefault();
-          return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        selectItem(event);
-      }
+      onItemKeyDownSelection(event);
       onItemContainerKeyDown(event);
     },
-    [isActive, id, onItemContainerKeyDown, selectItem]
+    [onItemKeyDownSelection, onItemContainerKeyDown]
   );
   const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);
   const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);
   const overId = useInternalStore((state) => state.overId);
   const isDropValid = useInternalStore((state) => state.isDropValid);
   const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);
-  const showDropIndicatorPosition = id === overId && dropIndicatorPosition;
+  const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;
+  const sortableRef = useSortableHelpers?.setNodeRef ? useSortableHelpers?.setNodeRef : () => {
+  };
   return /* @__PURE__ */ jsxs(
     ItemWrapper,
     {
-      isDragging: dndActiveId === id,
-      isDndActive: isActive,
+      isDragging: isDraggingThisItem,
+      isDndActive: getIsDragAndDropHappening(),
       cols,
       alignItems: "center",
       onClick: selectItem,
-      ref: mergeRefs(innerRefHandlerParentItem, useSortableHelpers?.setNodeRef),
+      ref: mergeRefs(innerRefHandlerParentItem, sortableRef),
       onKeyDown: handleItemKeyDown,
+      onMouseDown: onShiftMouseDownPreventTextSelection,
       tabIndex: shouldFocus ? 0 : -1,
       role: "checkbox",
       "aria-checked": isSelected,
-      id: `${id}-wrapper`,
+      id: `${hydratedId}-wrapper`,
       children: [
         /* @__PURE__ */ jsx(ItemSelection, { ...itemMeta }),
-        withDragNDrop ? /* @__PURE__ */ jsx(
+        withDragNDrop && useSortableHelpers ? /* @__PURE__ */ jsx(
           DragHandle,
           {
-            id,
+            id: hydratedId,
             useSortableHelpers,
-            isDndActive: !!isActive,
-            isDragging: dndActiveId === id,
-            innerRef: innerRefHandlerDnd
+            isDndActive: getIsDragAndDropHappening(),
+            isDragging: dndDraggingItem?.hydratedId === hydratedId,
+            innerRef: innerRefHandlerDnd,
+            disabled: hasMultipleSelection
           }
         ) : null,
         /* @__PURE__ */ jsx(ItemMiddleSection, { ...itemMeta }),

package/dist/esm/parts/Item/Item.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/Item.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\n\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { useInternalStore } from '../../config/useStore';\nimport { useFocusTracker } from '../../config/useFocusTracker';\nimport { ItemSelection } from './ItemSelection';\nimport { ItemActions } from './ItemActions';\nimport { ItemMiddleSection } from './ItemMiddleSection';\nimport { useSelectionLogic } from './useSelectionLogic';\nimport { useItemArrowNavigation } from './useItemArrowNavigation';\nimport { REGIONS_FOCUSES } from '../../constants';\nimport { DragHandle } from '../Dnd/DndHandle';\nimport { DropIndicator } from '../Dnd/DropIndicator';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers';\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst cssDisabled = css`\n  background-color: ${({ theme }) => theme.colors.neutral['100']};\n  color: ${({ theme }) => theme.colors.neutral['300']};\n  .ds-shuttle-v2-item-action-btn-to-source-icon > svg,\n  .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,\n  .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {\n    fill: ${({ theme }) => theme.colors.neutral['300']};\n  }\n`;\n\ninterface ItemWrapperT {\n  isDragging: boolean;\n  isDndActive: boolean;\n}\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })<ItemWrapperT>`\n  min-height: 36px;\n  position: relative;\n  background-color: white;\n  &:hover {\n    background-color: ${({ isDndActive, theme }) => (!isDndActive ? theme.colors.brand['200'] : 'white')};\n    .ds-shuttle-v2-item-action-btn-to-source-icon > svg,\n    .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,\n    .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {\n      fill: brand-700;\n    }\n    ${({ isDragging }) => isDragging && cssDisabled}\n  }\n\n  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n\n  ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst useInnerRefHandlers = ({ item, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { isFirst, isLast } = item;\n  const { trackFocusItem } = useFocusTracker();\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = item.original.id;\n\n  const shouldFocus = React.useMemo(\n    () =>\n      focusRegion === currRegion &&\n      focusItemAction === 'parent' &&\n      (focusItem === currItemId || (isFirst && focusItem === 'first') || (isLast && focusItem === 'last')),\n    [currItemId, currRegion, focusItem, focusItemAction, focusRegion, isFirst, isLast],\n  );\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      if (shouldFocus) {\n        node?.focus();\n        trackFocusItem(item); // this converts 'first'/'last' to actual id -> prevents 'last' to focus \"new last\" if new items are added\n      }\n    },\n    [item, shouldFocus, trackFocusItem],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item, withDragNDrop, useSortableHelpers } = itemMeta;\n  const { original, isSelected } = item;\n  const { id } = original;\n\n  const cols = useMemo(() => {\n    if (withDragNDrop) return ['5px', 'auto', '1fr', 'auto'];\n    return ['5px', '1fr', 'auto'];\n  }, [withDragNDrop]);\n\n  const dndActiveId = useInternalStore((state) => state.lastActiveId);\n  const isActive = useMemo(() => dndActiveId !== '', [dndActiveId]);\n\n  const selectItem = useSelectionLogic(itemMeta);\n  const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n  const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n    (event) => {\n      const { key } = event;\n\n      // Spacebar AND ' ' are cross-browser compatibility thing\n      if (['Spacebar', ' ', 'Enter'].includes(key)) {\n        if (isActive || (event.target as HTMLElement).id === `${id}-drag-handle`) {\n          event.preventDefault();\n          return;\n        }\n        event.preventDefault();\n        event.stopPropagation();\n        selectItem(event);\n      }\n      onItemContainerKeyDown(event);\n    },\n    [isActive, id, onItemContainerKeyDown, selectItem],\n  );\n  const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n  const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);\n  const overId = useInternalStore((state) => state.overId);\n  const isDropValid = useInternalStore((state) => state.isDropValid);\n  const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);\n\n  const showDropIndicatorPosition = id === overId && dropIndicatorPosition;\n\n  return (\n    <ItemWrapper\n      isDragging={dndActiveId === id}\n      isDndActive={isActive}\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      ref={mergeRefs(innerRefHandlerParentItem, useSortableHelpers?.setNodeRef)}\n      onKeyDown={handleItemKeyDown}\n      tabIndex={shouldFocus ? 0 : -1}\n      role=\"checkbox\"\n      aria-checked={isSelected}\n      id={`${id}-wrapper`}\n    >\n      <ItemSelection {...itemMeta} />\n      {withDragNDrop ? (\n        <DragHandle\n          id={id}\n          useSortableHelpers={useSortableHelpers}\n          isDndActive={!!isActive}\n          isDragging={dndActiveId === id}\n          innerRef={innerRefHandlerDnd}\n        />\n      ) : null}\n      <ItemMiddleSection {...itemMeta} />\n      <ItemActions {...itemMeta} />\n      <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n    </ItemWrapper>\n  );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport React, { useMemo } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { useInternalStore } from '../../config/useStore';\nimport { useFocusTracker } from '../../config/useFocusTracker';\nimport { ItemSelection } from './ItemSelection';\nimport { ItemActions } from './ItemActions';\nimport { ItemMiddleSection } from './ItemMiddleSection';\nimport { useSelectionLogic } from './useSelectionLogic';\nimport { useItemArrowNavigation } from './useItemArrowNavigation';\nimport { REGIONS_FOCUSES } from '../../constants';\nimport { DragHandle } from '../Dnd/DndHandle';\nimport { DropIndicator } from '../Dnd/DropIndicator';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection';\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst cssDisabled = css`\n  background-color: ${({ theme }) => theme.colors.neutral['100']};\n  color: ${({ theme }) => theme.colors.neutral['300']};\n  .ds-shuttle-v2-item-action-btn-to-source-icon > svg,\n  .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,\n  .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {\n    fill: ${({ theme }) => theme.colors.neutral['300']};\n  }\n`;\n\ninterface ItemWrapperT {\n  isDragging: boolean;\n  isDndActive: boolean;\n}\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })<ItemWrapperT>`\n  min-height: 2.769rem;\n  position: relative;\n  background-color: white;\n  &:hover {\n    background-color: ${({ isDndActive, theme }) => (!isDndActive ? theme.colors.brand['200'] : 'white')};\n    .ds-shuttle-v2-item-action-btn-to-source-icon > svg,\n    .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,\n    .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {\n      fill: brand-700;\n    }\n    ${({ isDragging }) => isDragging && cssDisabled}\n  }\n\n  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n\n  ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst useInnerRefHandlers = ({ datum, datumInternalMeta, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { isFirst, isLast, hydratedId } = datumInternalMeta;\n  const { trackFocusItem } = useFocusTracker();\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = hydratedId;\n\n  const shouldFocus = React.useMemo(\n    () =>\n      focusRegion === currRegion &&\n      focusItemAction === 'parent' &&\n      (focusItem === currItemId || (isFirst && focusItem === 'first') || (isLast && focusItem === 'last')),\n    [currItemId, currRegion, focusItem, focusItemAction, focusRegion, isFirst, isLast],\n  );\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      if (shouldFocus) {\n        node?.focus();\n        trackFocusItem({ original: datum, ...datumInternalMeta }); // this converts 'first'/'last' to actual id -> prevents 'last' to focus \"new last\" if new items are added\n      }\n    },\n    [datum, datumInternalMeta, shouldFocus, trackFocusItem],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n  const { isSelected, hydratedId } = datumInternalMeta;\n\n  const cols = useMemo(() => {\n    if (withDragNDrop) return ['5px', 'auto', '1fr', 'auto'];\n    return ['5px', '1fr', 'auto'];\n  }, [withDragNDrop]);\n\n  const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n  const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);\n  const isDraggingThisItem = dndDraggingItem?.hydratedId === hydratedId;\n  React.useEffect(() => {\n    if (isDraggingThisItem && dndDraggingItemMeta?.datumInternalMeta.hydratedId !== hydratedId)\n      setDndDraggingItemMeta(itemMeta);\n  }, [\n    dndDraggingItemMeta?.datumInternalMeta.hydratedId,\n    hydratedId,\n    isDraggingThisItem,\n    itemMeta,\n    setDndDraggingItemMeta,\n  ]);\n\n  const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);\n  const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n  const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);\n\n  const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n    (event) => {\n      onItemKeyDownSelection(event);\n      onItemContainerKeyDown(event);\n    },\n    [onItemKeyDownSelection, onItemContainerKeyDown],\n  );\n  const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n  const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);\n  const overId = useInternalStore((state) => state.overId);\n  const isDropValid = useInternalStore((state) => state.isDropValid);\n  const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);\n\n  const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;\n  const sortableRef = useSortableHelpers?.setNodeRef ? useSortableHelpers?.setNodeRef : () => {};\n  return (\n    <ItemWrapper\n      isDragging={isDraggingThisItem}\n      isDndActive={getIsDragAndDropHappening()}\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      ref={mergeRefs(innerRefHandlerParentItem, sortableRef)}\n      onKeyDown={handleItemKeyDown}\n      onMouseDown={onShiftMouseDownPreventTextSelection}\n      tabIndex={shouldFocus ? 0 : -1}\n      role=\"checkbox\"\n      aria-checked={isSelected}\n      id={`${hydratedId}-wrapper`}\n    >\n      <ItemSelection {...itemMeta} />\n      {withDragNDrop && useSortableHelpers ? (\n        <DragHandle\n          id={hydratedId}\n          useSortableHelpers={useSortableHelpers}\n          isDndActive={getIsDragAndDropHappening()}\n          isDragging={dndDraggingItem?.hydratedId === hydratedId}\n          innerRef={innerRefHandlerDnd}\n          disabled={hasMultipleSelection}\n        />\n      ) : null}\n      <ItemMiddleSection {...itemMeta} />\n      <ItemActions {...itemMeta} />\n      <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n    </ItemWrapper>\n  );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/Item/ItemActions/ItemActions.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button";
+import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button-v2";
 import { ArrowShortReturn, ArrowShortRight, CloseMedium } from "@elliemae/ds-icons";
 import { useActionsHandlers } from "./useActionsHandlers";
 import { useInnerRefHandlers } from "./useInnerRefHandlers";
@@ -11,7 +11,7 @@ import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2De
 const StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;
 const StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;
 const StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`
-  height: 22px !important;
+  height: 1.692rem !important;
   svg {
     fill: brand-600;
   }
@@ -31,24 +31,25 @@ const StyledArrowShortRightIcon = styled(ArrowShortRight, {
   name: DSShuttleV2Name,
   slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON
 })``;
-const actionsCols = ["20px", "20px"];
+const actionsCols = ["1.538rem", "1.538rem"];
 const ItemActions = React2.memo((itemMeta) => {
-  const { item, isDestinationPanel } = itemMeta;
-  const { original, withActions } = item;
-  const { preventDrilldown, preventMove } = original;
+  const { datumHydratables, isDestinationPanel, datumRenderFlags } = itemMeta;
+  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;
+  const { preventDrilldown, preventMove } = datumHydratables;
   const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);
-  const { handleClickDrilldown, handleClickSingleMove } = useActionsHandlers(itemMeta);
+  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);
   return /* @__PURE__ */ jsx(StyledItemActions, { cols: actionsCols, gutter: "xxs", pl: "xs", pr: "xxs", alignItems: "center", children: withActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(StyledItemActionWrapper, { children: /* @__PURE__ */ jsx(
       StyledButton,
       {
         buttonType: "icon",
         onClick: handleClickDrilldown,
+        onKeyDown: handleKeyDownSelectionBubbleUp,
         size: BUTTON_SIZES.S,
         innerRef: innerRefHandlerDrilldown,
         tabIndex: shouldFocusDrilldown && !preventDrilldown ? 0 : -1,
-        disabled: preventDrilldown === true,
-        children: /* @__PURE__ */ jsx(StyledDrilldownIcon, { width: "20px", height: "20px" })
+        disabled: internallyDisabledDrilldown || preventDrilldown === true,
+        children: /* @__PURE__ */ jsx(StyledDrilldownIcon, { width: "1.538rem", height: "1.538rem" })
       }
     ) }),
     /* @__PURE__ */ jsx(StyledItemActionWrapper, { children: /* @__PURE__ */ jsx(
@@ -56,11 +57,12 @@ const ItemActions = React2.memo((itemMeta) => {
       {
         buttonType: "icon",
         onClick: handleClickSingleMove,
+        onKeyDown: handleKeyDownSelectionBubbleUp,
         size: BUTTON_SIZES.S,
         innerRef: innerRefHandlerMove,
         tabIndex: shouldFocusMove && !preventMove ? 0 : -1,
-        disabled: preventMove === true,
-        children: isDestinationPanel ? /* @__PURE__ */ jsx(StyledCloseMediumIcon, { width: "20px", height: "20px" }) : /* @__PURE__ */ jsx(StyledArrowShortRightIcon, { width: "20px", height: "20px" })
+        disabled: internallyDisabledMove || preventMove === true,
+        children: isDestinationPanel ? /* @__PURE__ */ jsx(StyledCloseMediumIcon, { width: "1.538rem", height: "1.538rem" }) : /* @__PURE__ */ jsx(StyledArrowShortRightIcon, { width: "1.538rem", height: "1.538rem" })
       }
     ) })
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/esm/parts/Item/ItemActions/ItemActions.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/ItemActions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsHandlers } from './useActionsHandlers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n  height: 22px !important;\n  svg {\n    fill: brand-600;\n  }\n  :disabled svg {\n    fill: neutral-200 !important;\n  }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['20px', '20px'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item, isDestinationPanel } = itemMeta;\n  // withActions is calculated in /src/config/configureAutoCalculated.ts\n  const { original, withActions } = item;\n  const { preventDrilldown, preventMove } = original;\n  const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } =\n    useInnerRefHandlers(itemMeta);\n  const { handleClickDrilldown, handleClickSingleMove } = useActionsHandlers(itemMeta);\n\n  return (\n    <StyledItemActions cols={actionsCols} gutter=\"xxs\" pl=\"xs\" pr=\"xxs\" alignItems=\"center\">\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleClickDrilldown}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={shouldFocusDrilldown && !preventDrilldown ? 0 : -1}\n              disabled={preventDrilldown === true}\n            >\n              <StyledDrilldownIcon width=\"20px\" height=\"20px\" />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleClickSingleMove}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={shouldFocusMove && !preventMove ? 0 : -1}\n              disabled={preventMove === true}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon width=\"20px\" height=\"20px\" />\n              ) : (\n                <StyledArrowShortRightIcon width=\"20px\" height=\"20px\" />\n              )}\n            </StyledButton>\n          </StyledItemActionWrapper>\n        </>\n      ) : (\n        // this is a place-holder used for mantainting the grid spacing\n        <>\n          <div />\n          <div />\n        </>\n      )}\n    </StyledItemActions>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgDf,mBAUM,KAVN;AAhDR,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY,oBAAoB;AACzC,SAAS,kBAAkB,iBAAiB,mBAAmB;AAE/D,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,qBAAqB,CAAC;AAC7G,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAClH,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,sBAAsB,OAAO,kBAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,wBAAwB,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,4BAA4B,OAAO,iBAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,QAAQ,MAAM;AAE5B,MAAM,cAAcA,OAAM,KAAK,CAAC,aAAoC;AACzE,QAAM,EAAE,MAAM,mBAAmB,IAAI;AAErC,QAAM,EAAE,UAAU,YAAY,IAAI;AAClC,QAAM,EAAE,kBAAkB,YAAY,IAAI;AAC1C,QAAM,EAAE,sBAAsB,iBAAiB,0BAA0B,oBAAoB,IAC3F,oBAAoB,QAAQ;AAC9B,QAAM,EAAE,sBAAsB,sBAAsB,IAAI,mBAAmB,QAAQ;AAEnF,SACE,oBAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,iCACE;AAAA,wBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,wBAAwB,CAAC,mBAAmB,IAAI;AAAA,QAC1D,UAAU,qBAAqB;AAAA,QAE/B,8BAAC,uBAAoB,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,IAClD,GACF;AAAA,IACA,oBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,mBAAmB,CAAC,cAAc,IAAI;AAAA,QAChD,UAAU,gBAAgB;AAAA,QAEzB,+BACC,oBAAC,yBAAsB,OAAM,QAAO,QAAO,QAAO,IAElD,oBAAC,6BAA0B,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,IAE1D,GACF;AAAA,KACF,IAGA,iCACE;AAAA,wBAAC,SAAI;AAAA,IACL,oBAAC,SAAI;AAAA,KACP,GAEJ;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsHandlers } from './useActionsHandlers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n  height: 1.692rem !important;\n  svg {\n    fill: brand-600;\n  }\n  :disabled svg {\n    fill: neutral-200 !important;\n  }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['1.538rem', '1.538rem'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumHydratables, isDestinationPanel, datumRenderFlags } = itemMeta;\n  // withActions is calculated in /src/config/configureAutoCalculated.ts\n  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n  const { preventDrilldown, preventMove } = datumHydratables;\n  const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } =\n    useInnerRefHandlers(itemMeta);\n  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n\n  return (\n    <StyledItemActions cols={actionsCols} gutter=\"xxs\" pl=\"xs\" pr=\"xxs\" alignItems=\"center\">\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleClickDrilldown}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={shouldFocusDrilldown && !preventDrilldown ? 0 : -1}\n              disabled={internallyDisabledDrilldown || preventDrilldown === true}\n            >\n              <StyledDrilldownIcon width=\"1.538rem\" height=\"1.538rem\" />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleClickSingleMove}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={shouldFocusMove && !preventMove ? 0 : -1}\n              disabled={internallyDisabledMove || preventMove === true}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n              ) : (\n                <StyledArrowShortRightIcon width=\"1.538rem\" height=\"1.538rem\" />\n              )}\n            </StyledButton>\n          </StyledItemActionWrapper>\n        </>\n      ) : (\n        // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n        <>\n          <div />\n          <div />\n        </>\n      )}\n    </StyledItemActions>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgDf,mBAWM,KAXN;AAhDR,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY,oBAAoB;AACzC,SAAS,kBAAkB,iBAAiB,mBAAmB;AAE/D,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,qBAAqB,CAAC;AAC7G,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAClH,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,sBAAsB,OAAO,kBAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,wBAAwB,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AACD,MAAM,4BAA4B,OAAO,iBAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,YAAY,UAAU;AAEpC,MAAM,cAAcA,OAAM,KAAK,CAAC,aAAoC;AACzE,QAAM,EAAE,kBAAkB,oBAAoB,iBAAiB,IAAI;AAEnE,QAAM,EAAE,aAAa,6BAA6B,uBAAuB,IAAI;AAC7E,QAAM,EAAE,kBAAkB,YAAY,IAAI;AAC1C,QAAM,EAAE,sBAAsB,iBAAiB,0BAA0B,oBAAoB,IAC3F,oBAAoB,QAAQ;AAC9B,QAAM,EAAE,sBAAsB,uBAAuB,+BAA+B,IAAI,mBAAmB,QAAQ;AAEnH,SACE,oBAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,iCACE;AAAA,wBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,wBAAwB,CAAC,mBAAmB,IAAI;AAAA,QAC1D,UAAU,+BAA+B,qBAAqB;AAAA,QAE9D,8BAAC,uBAAoB,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC1D,GACF;AAAA,IACA,oBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,mBAAmB,CAAC,cAAc,IAAI;AAAA,QAChD,UAAU,0BAA0B,gBAAgB;AAAA,QAEnD,+BACC,oBAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,oBAAC,6BAA0B,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAElE,GACF;AAAA,KACF,IAGA,iCACE;AAAA,wBAAC,SAAI;AAAA,IACL,oBAAC,SAAI;AAAA,KACP,GAEJ;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/Item/ItemActions/useActionsHandlers.js CHANGED Viewed

@@ -2,15 +2,20 @@ import * as React from "react";
 import React2 from "react";
 import { useActionsLogicHandlers } from "./useActionsLogicHandlers";
 const useActionsHandlers = (itemMeta) => {
-  const { handleDrilldown, handleSingleMove } = useActionsLogicHandlers(itemMeta);
+  const { handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp } = useActionsLogicHandlers(itemMeta);
   const handleClickDrilldown = React2.useCallback(handleDrilldown, [handleDrilldown]);
   const handleClickSingleMove = React2.useCallback(handleSingleMove, [handleSingleMove]);
+  const handleKeyDownSelectionBubbleUp = React2.useCallback(
+    preventKeyDownSelectionBubbleUp,
+    [preventKeyDownSelectionBubbleUp]
+  );
   return React2.useMemo(
     () => ({
       handleClickDrilldown,
-      handleClickSingleMove
+      handleClickSingleMove,
+      handleKeyDownSelectionBubbleUp
     }),
-    [handleClickDrilldown, handleClickSingleMove]
+    [handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp]
   );
 };
 export {

package/dist/esm/parts/Item/ItemActions/useActionsHandlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/useActionsHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { type DSButtonT } from '@elliemae/ds-button';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsLogicHandlers } from './useActionsLogicHandlers';\n\nexport const useActionsHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { handleDrilldown, handleSingleMove } = useActionsLogicHandlers(itemMeta);\n  const handleClickDrilldown: DSButtonT.Props['onClick'] = React.useCallback(handleDrilldown, [handleDrilldown]);\n  const handleClickSingleMove: DSButtonT.Props['onClick'] = React.useCallback(handleSingleMove, [handleSingleMove]);\n\n  return React.useMemo(\n    () => ({\n      handleClickDrilldown,\n      handleClickSingleMove,\n    }),\n    [handleClickDrilldown, handleClickSingleMove],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB,CAAC,aAAoC;AACrE,QAAM,EAAE,iBAAiB,iBAAiB,IAAI,wBAAwB,QAAQ;AAC9E,QAAM,uBAAmDA,OAAM,YAAY,iBAAiB,CAAC,eAAe,CAAC;AAC7G,QAAM,wBAAoDA,OAAM,YAAY,kBAAkB,CAAC,gBAAgB,CAAC;AAEhH,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,qBAAqB;AAAA,EAC9C;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsLogicHandlers } from './useActionsLogicHandlers';\n\nexport const useActionsHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { handleDrilldown, handleSingleMove, preventKeyDownSelectionBubbleUp } = useActionsLogicHandlers(itemMeta);\n  const handleClickDrilldown: DSButtonT.Props['onClick'] = React.useCallback(handleDrilldown, [handleDrilldown]);\n  const handleClickSingleMove: DSButtonT.Props['onClick'] = React.useCallback(handleSingleMove, [handleSingleMove]);\n  const handleKeyDownSelectionBubbleUp: DSButtonT.Props['onKeyDown'] = React.useCallback(\n    preventKeyDownSelectionBubbleUp,\n    [preventKeyDownSelectionBubbleUp],\n  );\n  return React.useMemo(\n    () => ({\n      handleClickDrilldown,\n      handleClickSingleMove,\n      handleKeyDownSelectionBubbleUp,\n    }),\n    [handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAGlB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB,CAAC,aAAoC;AACrE,QAAM,EAAE,iBAAiB,kBAAkB,gCAAgC,IAAI,wBAAwB,QAAQ;AAC/G,QAAM,uBAAmDA,OAAM,YAAY,iBAAiB,CAAC,eAAe,CAAC;AAC7G,QAAM,wBAAoDA,OAAM,YAAY,kBAAkB,CAAC,gBAAgB,CAAC;AAChH,QAAM,iCAA+DA,OAAM;AAAA,IACzE;AAAA,IACA,CAAC,+BAA+B;AAAA,EAClC;AACA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,uBAAuB,8BAA8B;AAAA,EAC9E;AACF;",
   "names": ["React"]
 }