@elliemae/ds-shuttle-v2 3.70.0-next.7 → 3.70.0-next.71

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

@@ -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", "/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport { Grid } from '@elliemae/ds-grid';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { css, styled } from '@elliemae/ds-system';\nimport React, { useEffect, useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport { REGIONS_FOCUSES, DSShuttleV2Name, DSShuttleV2Slots } from '../../constants/index.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DragHandle } from '../Dnd/DndHandle.js';\nimport { DropIndicator } from '../Dnd/DropIndicator.js';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable.js';\nimport { ItemActions } from './ItemActions/index.js';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { ItemSelection } from './ItemSelection.js';\nimport { useItemArrowNavigation } from './useItemArrowNavigation.js';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection.js';\nimport { useSelectionLogic } from './useSelectionLogic.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\nconst cssDisabled = css`\n  background-color: ${({ theme }) => theme.colors.neutral['100']};\n  color: ${({ theme }) => theme.colors.neutral['300']};\n  .DSShuttleV2-item-action-btn-to-source-icon > svg,\n  .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n  .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n    fill: ${({ theme }) => theme.colors.neutral['300']};\n  }\n`;\n\nconst focusRing = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand['700']};\n  outline-offset: -2px;\n`;\ninterface ItemWrapperT {\n  isDragging: boolean;\n  isDndActive: boolean;\n  hasFocusRing: 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    .DSShuttleV2-item-action-btn-to-source-icon > svg,\n    .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n    .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n      fill: brand-700;\n    }\n    ${({ isDragging }) => isDragging && cssDisabled}\n  }\n\n  ${({ hasFocusRing }) => hasFocusRing && focusRing}\n\n  border-bottom: 1px solid neutral-100;\n\n  ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst ItemSelectionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_CHECKBOX })`\n  height: 100%;\n  &:focus {\n    outline: none;\n  }\n`;\n\nconst useInnerRefHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta, isDestinationPanel } = itemMeta;\n  const { hydratedId } = datumInternalMeta;\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n  const setDeferFocusUntilFirstRender = useInternalStore((state) => state.setDeferFocusUntilFirstRender);\n  const deferedAfterFirstRender = useInternalStore((state) => state.getDeferFocusUntilFirstRender());\n  const isLoadingMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore,\n  );\n\n  const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = hydratedId;\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setZustandRef([currRegion, currItemId, 'parent'], node);\n      if (deferedAfterFirstRender && thisItemIsFocused && node) {\n        setDeferFocusUntilFirstRender(false);\n        if (node.tabIndex === -1) node.tabIndex = 0;\n        node.focus();\n      }\n    },\n    [setZustandRef, currRegion, currItemId, thisItemIsFocused, deferedAfterFirstRender, setDeferFocusUntilFirstRender],\n  );\n\n  useEffect(\n    () => () => {\n      if (isLoadingMore) setDeferFocusUntilFirstRender(true);\n    },\n    [isLoadingMore, setDeferFocusUntilFirstRender],\n  );\n\n  return React.useMemo(\n    () => ({ innerRefHandlerParentItem, thisItemIsFocused }),\n    [innerRefHandlerParentItem, thisItemIsFocused],\n  );\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n  const { isSelected, hydratedId, softDeleted } = 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 getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n  React.useEffect(() => {\n    if (isDraggingThisItem) {\n      setDndDraggingItemMeta((prevItemMeta) => {\n        if (prevItemMeta?.datumInternalMeta.hydratedId === hydratedId) return prevItemMeta;\n        return itemMeta;\n      });\n    }\n  }, [hydratedId, isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);\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 { innerRefHandlerParentItem, thisItemIsFocused } = 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 ?? (() => {});\n\n  // const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n  const config = React.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);\n\n  const tooltipHelpers = useHeadlessTooltip(config);\n\n  const idItem = useMemo(() => `${hydratedId}-wrapper${softDeleted ? '-soft-deleted' : ''}`, [hydratedId, softDeleted]);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n  return (\n    <ItemWrapper\n      isDragging={isDraggingThisItem}\n      isDndActive={getIsDragAndDropHappening()}\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      innerRef={sortableRef}\n      onKeyDown={handleItemKeyDown}\n      onMouseDown={onShiftMouseDownPreventTextSelection}\n      onMouseEnter={tooltipHelpers.onMouseEnter}\n      onMouseLeave={tooltipHelpers.onMouseLeave}\n      onPointerEnter={tooltipHelpers.onMouseEnter}\n      onPointerLeave={tooltipHelpers.onMouseLeave}\n      hasFocusRing={thisItemIsFocused}\n      tabIndex={-1}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <ItemSelectionWrapper\n        role=\"checkbox\"\n        aria-checked={isSelected}\n        onFocus={tooltipHelpers.onFocus}\n        onBlur={tooltipHelpers.onBlur}\n        aria-labelledby={`${hydratedId}-text-section${softDeleted ? '-soft-deleted' : ''}`}\n        id={idItem}\n        innerRef={innerRefHandlerParentItem}\n        aria-disabled={softDeleted}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <ItemSelection {...itemMeta} />\n      </ItemSelectionWrapper>\n      {withDragNDrop && useSortableHelpers ? (\n        <DragHandle\n          id={hydratedId}\n          useSortableHelpers={useSortableHelpers}\n          isDndActive={getIsDragAndDropHappening()}\n          isDragging={isDraggingThisItem}\n          innerRef={innerRefHandlerDnd}\n          disabled={hasMultipleSelection}\n          ariaLabelledby={`${hydratedId}-text-section${softDeleted ? '-soft-deleted' : ''}`}\n        />\n      ) : null}\n      <ItemMiddleSection {...itemMeta} tooltipHelpers={tooltipHelpers} />\n      {!hasMultipleSelection ? <ItemActions {...itemMeta} /> : null}\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-lines */\n/* eslint-disable max-statements */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { css, styled } from '@elliemae/ds-system';\nimport React, { useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../constants/index.js';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DragHandle } from '../Dnd/DndHandle.js';\nimport { DropIndicator } from '../Dnd/DropIndicator.js';\nimport { ItemActions } from './ItemActions/index.js';\nimport { useInnerRefActionHandlers } from './ItemActions/useInnerRefActionHandlers.js';\nimport { ItemMiddleSection } from './ItemMiddleSection.js';\nimport { ItemSelectionUI } from './ItemSelectionUi/ItemSelectionUI.js';\nimport { useItemArrowNavigation } from './useItemArrowNavigation.js';\nimport { useItemInnerRefHandlers } from './useItemInnerRefHandlers.js';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection.js';\nimport { useSelectionLogic } from './useSelectionLogic.js';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\nconst cssDisabled = css`\n  background-color: ${({ theme }) => theme.colors.neutral['100']};\n  color: ${({ theme }) => theme.colors.neutral['300']};\n  .DSShuttleV2-item-action-btn-to-source-icon > svg,\n  .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n  .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n    fill: ${({ theme }) => theme.colors.neutral['300']};\n  }\n`;\n\nconst focusRing = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand['700']};\n  outline-offset: -2px;\n`;\ninterface ItemWrapperT {\n  isDragging: boolean;\n  isDndActive: boolean;\n  hasFocusRing: 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    .DSShuttleV2-item-action-btn-to-source-icon > svg,\n    .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n    .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n      fill: brand-700;\n    }\n    ${({ isDragging }) => isDragging && cssDisabled}\n  }\n\n  ${({ hasFocusRing }) => hasFocusRing && focusRing}\n\n  border-bottom: 1px solid neutral-100;\n\n  ${({ isDragging }) => isDragging && cssDisabled}\n`;\nconst Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n  const { hydratedId, softDeleted } = datumInternalMeta;\n\n  const explicitSelectionUI = usePropsStore((store) => store.explicitSelectionUI);\n  const cols = useMemo(() => {\n    const selectionUIWidth = explicitSelectionUI ? 'auto' : '5px';\n    const finalCols = [selectionUIWidth];\n    if (withDragNDrop) finalCols.push('auto');\n    finalCols.push('1fr', 'auto');\n    return finalCols;\n  }, [withDragNDrop, explicitSelectionUI]);\n\n  const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n  React.useEffect(() => {\n    if (isDraggingThisItem) {\n      setDndDraggingItemMeta((prevItemMeta) => {\n        if (prevItemMeta?.datumInternalMeta.hydratedId === hydratedId) return prevItemMeta;\n        return itemMeta;\n      });\n    }\n  }, [hydratedId, isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);\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 itemInnerRefHandlers = useItemInnerRefHandlers(itemMeta);\n  const { thisItemIsFocused } = itemInnerRefHandlers;\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 ?? (() => {});\n\n  // const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n  const config = React.useMemo(() => ({ hasFocus: thisItemIsFocused }), [thisItemIsFocused]);\n\n  const tooltipHelpers = useHeadlessTooltip(config);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n  return (\n    <ItemWrapper\n      isDragging={isDraggingThisItem}\n      isDndActive={getIsDragAndDropHappening()}\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      innerRef={sortableRef}\n      onKeyDown={handleItemKeyDown}\n      onMouseDown={onShiftMouseDownPreventTextSelection}\n      onMouseEnter={tooltipHelpers.onMouseEnter}\n      onMouseLeave={tooltipHelpers.onMouseLeave}\n      onPointerEnter={tooltipHelpers.onMouseEnter}\n      onPointerLeave={tooltipHelpers.onMouseLeave}\n      hasFocusRing={thisItemIsFocused}\n      tabIndex={-1}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <ItemSelectionUI\n        tooltipHelpers={tooltipHelpers}\n        itemInnerRefHandlers={itemInnerRefHandlers}\n        itemMeta={itemMeta}\n      />\n      {withDragNDrop && useSortableHelpers ? (\n        <DragHandle\n          id={hydratedId}\n          useSortableHelpers={useSortableHelpers}\n          isDndActive={getIsDragAndDropHappening()}\n          isDragging={isDraggingThisItem}\n          innerRef={innerRefHandlerDnd}\n          disabled={hasMultipleSelection}\n          ariaLabelledby={`${hydratedId}-text-section${softDeleted ? '-soft-deleted' : ''}`}\n        />\n      ) : null}\n      <ItemMiddleSection {...itemMeta} tooltipHelpers={tooltipHelpers} />\n      {!hasMultipleSelection ? <ItemActions {...itemMeta} /> : null}\n      <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n    </ItemWrapper>\n  );\n});\n\nconst ItemWithSortable = (props: DSShuttleV2T.ItemMeta) => {\n  const {\n    datumInternalMeta: { hydratedId },\n  } = props;\n  const useSortableConfig = useMemo(() => ({ id: hydratedId }), [hydratedId]);\n  const useSortableHelpers = useSortable(useSortableConfig);\n  return <Item {...props} useSortableHelpers={useSortableHelpers} />;\n};\n\nexport const ItemSortable = (props: DSShuttleV2T.ItemMeta) =>\n  props.withDragNDrop ? <ItemWithSortable {...props} /> : <Item {...props} />;\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -6,10 +6,12 @@ import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV3, BUTTON_SIZES } from "@elliemae/ds-button-v2";
 import { ArrowShortReturn, ArrowShortRight, CloseMedium } from "@elliemae/ds-icons";
 import { useActionsHandlers } from "./useActionsHandlers.js";
-import { useInnerRefHandlers } from "./useInnerRefHandlers.js";
+import { useInnerRefActionHandlers } from "./useInnerRefActionHandlers.js";
 import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
 import { useInternalStore, usePropsStore } from "../../../config/useStore/useStore.js";
-const StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;
+const StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })`
+  height: 100%;
+`;
 const StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;
 const StyledButton = styled(DSButtonV3, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`
   height: 1.692rem !important;
@@ -42,7 +44,7 @@ const ItemActions = React2.memo((itemMeta) => {
   } = itemMeta;
   const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;
   const { preventDrilldown, label } = datumHydratables;
-  const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);
+  const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefActionHandlers(itemMeta);
   const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);
   const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);
   const moveAriaLabel = useMemo(
@@ -53,6 +55,16 @@ const ItemActions = React2.memo((itemMeta) => {
   const moveButtonProps = usePropsStore((state) => state.moveButtonProps);
   const getOwnerProps = usePropsStore((store) => store.get);
   const getOwnerPropsArguments = React2.useCallback(() => itemMeta, [itemMeta]);
+  const getOwnerPropsArgumentsIcons = React2.useCallback(
+    () => ({
+      panelMetaInfo: itemMeta,
+      extraMetaInfo: { itemMeta }
+    }),
+    [itemMeta]
+  );
+  const stopPropagation = React2.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
   return /* @__PURE__ */ jsx(
     StyledItemActions,
     {
@@ -61,6 +73,8 @@ const ItemActions = React2.memo((itemMeta) => {
       pl: "xs",
       pr: "xxs",
       alignItems: "center",
+      onClick: stopPropagation,
+      onMouseDown: stopPropagation,
       getOwnerProps,
       getOwnerPropsArguments,
       children: withActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -104,7 +118,7 @@ const ItemActions = React2.memo((itemMeta) => {
                 width: "1.538rem",
                 height: "1.538rem",
                 getOwnerProps,
-                getOwnerPropsArguments
+                getOwnerPropsArguments: getOwnerPropsArgumentsIcons
               }
             ) : /* @__PURE__ */ jsx(
               StyledArrowShortRightIcon,
@@ -112,7 +126,7 @@ const ItemActions = React2.memo((itemMeta) => {
                 width: "1.538rem",
                 height: "1.538rem",
                 getOwnerProps,
-                getOwnerPropsArguments
+                getOwnerPropsArguments: getOwnerPropsArgumentsIcons
               }
             )
           }

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

@@ -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, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV3, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useActionsHandlers } from './useActionsHandlers.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/useStore.js';\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(DSButtonV3, { 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 {\n    datumHydratables,\n    isDestinationPanel,\n    datumRenderFlags,\n    datumInternalMeta: { hydratedPreventMove, hydratedId },\n  } = itemMeta;\n  // withActions is calculated in /src/config/configureAutoCalculated.ts\n  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n  const { preventDrilldown, label } = datumHydratables;\n  const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);\n  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n  const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n  const moveAriaLabel = useMemo(\n    () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n    [label, isDestinationPanel],\n  );\n\n  const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n  const moveButtonProps = usePropsStore((state) => state.moveButtonProps);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n  return (\n    <StyledItemActions\n      cols={actionsCols}\n      gutter=\"xxs\"\n      pl=\"xs\"\n      pr=\"xxs\"\n      alignItems=\"center\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={drillDownAriaLabel}\n              onClick={handleClickDrilldown}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledDrilldown || preventDrilldown === true || isDraggingThisItem}\n            >\n              <StyledDrilldownIcon\n                width=\"1.538rem\"\n                height=\"1.538rem\"\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={moveAriaLabel}\n              onClick={handleClickSingleMove}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledMove || hydratedPreventMove === true || isDraggingThisItem}\n              {...(moveButtonProps && moveButtonProps({ itemMeta, isDestinationPanel }))}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon\n                  width=\"1.538rem\"\n                  height=\"1.538rem\"\n                  getOwnerProps={getOwnerProps}\n                  getOwnerPropsArguments={getOwnerPropsArguments}\n                />\n              ) : (\n                <StyledArrowShortRightIcon\n                  width=\"1.538rem\"\n                  height=\"1.538rem\"\n                  getOwnerProps={getOwnerProps}\n                  getOwnerPropsArguments={getOwnerPropsArguments}\n                />\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": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV3, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useActionsHandlers } from './useActionsHandlers.js';\nimport { useInnerRefActionHandlers } from './useInnerRefActionHandlers.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/useStore.js';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })`\n  height: 100%;\n`;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV3, { 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 {\n    datumHydratables,\n    isDestinationPanel,\n    datumRenderFlags,\n    datumInternalMeta: { hydratedPreventMove, hydratedId },\n  } = itemMeta;\n  // withActions is calculated in /src/config/configureAutoCalculated.ts\n  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n  const { preventDrilldown, label } = datumHydratables;\n  const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefActionHandlers(itemMeta);\n  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n  const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n  const moveAriaLabel = useMemo(\n    () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n    [label, isDestinationPanel],\n  );\n\n  const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n\n  const moveButtonProps = usePropsStore((state) => state.moveButtonProps);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n  // The to-source / to-destination icon slots share a unified argument shape with the bulk-action\n  // button (see MultipleSelectionAction). Here the per-item itemMeta is available via extraMetaInfo.\n  const getOwnerPropsArgumentsIcons = React.useCallback(\n    (): DSShuttleV2T.ItemActionIconArguments => ({\n      panelMetaInfo: itemMeta,\n      extraMetaInfo: { itemMeta },\n    }),\n    [itemMeta],\n  );\n\n  // Clicking an action button (drilldown / move) must not bubble up to the row's onClick\n  // (selectItem) / onMouseDown handlers \u2014 using an action should not toggle item selection.\n  const stopPropagation = React.useCallback((event: React.SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <StyledItemActions\n      cols={actionsCols}\n      gutter=\"xxs\"\n      pl=\"xs\"\n      pr=\"xxs\"\n      alignItems=\"center\"\n      onClick={stopPropagation}\n      onMouseDown={stopPropagation}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={drillDownAriaLabel}\n              onClick={handleClickDrilldown}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledDrilldown || preventDrilldown === true || isDraggingThisItem}\n            >\n              <StyledDrilldownIcon\n                width=\"1.538rem\"\n                height=\"1.538rem\"\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={moveAriaLabel}\n              onClick={handleClickSingleMove}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledMove || hydratedPreventMove === true || isDraggingThisItem}\n              {...(moveButtonProps && moveButtonProps({ itemMeta, isDestinationPanel }))}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon\n                  width=\"1.538rem\"\n                  height=\"1.538rem\"\n                  getOwnerProps={getOwnerProps}\n                  getOwnerPropsArguments={getOwnerPropsArgumentsIcons}\n                />\n              ) : (\n                <StyledArrowShortRightIcon\n                  width=\"1.538rem\"\n                  height=\"1.538rem\"\n                  getOwnerProps={getOwnerProps}\n                  getOwnerPropsArguments={getOwnerPropsArgumentsIcons}\n                />\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": "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",
   "names": ["React"]
 }

package/dist/esm/parts/Item/ItemActions/{useInnerRefHandlers.js → useInnerRefActionHandlers.js}

@@ -2,7 +2,7 @@ import * as React from "react";
 import React2 from "react";
 import { useInternalStore } from "../../../config/useStore/index.js";
 import { REGIONS_FOCUSES, ACTIONS_FOCUSES } from "../../../constants/index.js";
-const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
+const useInnerRefActionHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
   const setZustandRef = useInternalStore((state) => state.setZustandRef);
   const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
   const currItemId = datumInternalMeta.hydratedId;
@@ -34,6 +34,6 @@ const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
   );
 };
 export {
-  useInnerRefHandlers
+  useInnerRefActionHandlers
 };
-//# sourceMappingURL=useInnerRefHandlers.js.map
+//# sourceMappingURL=useInnerRefActionHandlers.js.map

package/dist/esm/parts/Item/ItemActions/useInnerRefActionHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/useInnerRefActionHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useInternalStore } from '../../../config/useStore/index.js';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES } from '../../../constants/index.js';\n\nexport const useInnerRefActionHandlers = ({ datumInternalMeta, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = datumInternalMeta.hydratedId;\n  const innerRefHandlerDrilldown = React.useCallback(\n    (node: HTMLButtonElement) => {\n      setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.DRILLDOWN_BTN], node);\n    },\n    [currItemId, currRegion, setZustandRef],\n  );\n  const innerRefHandlerMove = React.useCallback(\n    (node: HTMLButtonElement) => {\n      setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.MOVE_BTN], node);\n    },\n    [currItemId, currRegion, setZustandRef],\n  );\n  const innerRefHandlerDnd = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setZustandRef([currRegion, currItemId, ACTIONS_FOCUSES.DRAG_N_DROP], node);\n    },\n    [currItemId, currRegion, setZustandRef],\n  );\n  return React.useMemo(\n    () => ({\n      innerRefHandlerDnd,\n      innerRefHandlerDrilldown,\n      innerRefHandlerMove,\n    }),\n    [innerRefHandlerDrilldown, innerRefHandlerDnd, innerRefHandlerMove],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,wBAAwB;AACjC,SAAS,iBAAiB,uBAAuB;AAE1C,MAAM,4BAA4B,CAAC,EAAE,mBAAmB,mBAAmB,MAA6B;AAC7G,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,MAAM,aAAa;AACrE,QAAM,aAAa,qBAAqB,gBAAgB,yBAAyB,gBAAgB;AACjG,QAAM,aAAa,kBAAkB;AACrC,QAAM,2BAA2BA,OAAM;AAAA,IACrC,CAAC,SAA4B;AAC3B,oBAAc,CAAC,YAAY,YAAY,gBAAgB,aAAa,GAAG,IAAI;AAAA,IAC7E;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAA4B;AAC3B,oBAAc,CAAC,YAAY,YAAY,gBAAgB,QAAQ,GAAG,IAAI;AAAA,IACxE;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,SAAgC;AAC/B,oBAAc,CAAC,YAAY,YAAY,gBAAgB,WAAW,GAAG,IAAI;AAAA,IAC3E;AAAA,IACA,CAAC,YAAY,YAAY,aAAa;AAAA,EACxC;AACA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,0BAA0B,oBAAoB,mBAAmB;AAAA,EACpE;AACF;",
+  "names": ["React"]
+}

package/dist/esm/parts/Item/ItemMiddleSection.js

@@ -14,6 +14,7 @@ const MidSection = styled(Grid, {
   name: DSShuttleV2Name,
   slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER
 })`
+  height: 100%;
   min-height: 1rem;
   ${(props) => {
   if (props.$softDeleted)

package/dist/esm/parts/Item/ItemMiddleSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/ItemMiddleSection.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 { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../constants/index.js';\nimport { TextSection } from './TextSection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n  min-height: 1rem;\n`;\n\nconst MidSection = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER,\n})<{ $softDeleted: boolean }>`\n  min-height: 1rem;\n  ${(props) => {\n    if (props.$softDeleted)\n      return `\n      color: ${props.theme.colors.neutral[500]};\n      svg {\n        fill: ${props.theme.colors.neutral[400]};\n      }\n    `;\n    return '';\n  }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nexport const ItemMiddleSection = React.memo(\n  (props: DSShuttleV2T.ItemMeta & { tooltipHelpers?: DSShuttleV2T.ComponentProps['tooltipHelpers'] }) => {\n    const { tooltipHelpers, ...itemMeta } = props;\n    const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;\n    const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n    const { softDeleted, hydratedId } = datumInternalMeta;\n    const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n    const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n      () => ({\n        datum,\n        tooltipHelpers,\n        thisItemIsFocused,\n        panelMetaInfo: { isDestinationPanel, hasMultipleSelection },\n        datumInternalMeta,\n        datumHydratables: { ...componentlessHydratables, id: hydratedId },\n      }),\n      [\n        componentlessHydratables,\n        datum,\n        datumInternalMeta,\n        hasMultipleSelection,\n        hydratedId,\n        isDestinationPanel,\n        thisItemIsFocused,\n        tooltipHelpers,\n      ],\n    );\n    const cols = React.useMemo(() => {\n      // if CustomRenderer is defined, shortcircuit\n      if (CustomRenderer) return [];\n      const dynamicCols = [];\n      if (Icon) dynamicCols.push('auto');\n      dynamicCols.push('1fr');\n      return dynamicCols;\n    }, [CustomRenderer, Icon]);\n\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n    if (CustomRenderer)\n      return (\n        <MidSection\n          cols={customMidSectionCols}\n          rows={customMidSectionRows}\n          $softDeleted={Boolean(softDeleted)}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <CustomRenderer {...customComponentProps} />\n        </MidSection>\n      );\n\n    // if we ever need to do something for truncation and showing a tooltip in the future,\n    // check out what has been done in exported-related/ShuttleItem.tsx\n    // also, be aware that we have the headless logic alread inside tooltipHelpers\n    // when this comment has been written, the logic was working with keyboard and mouse as per tooltip-v3\n    // integrated with all the shuttle-v2 custom focus navigation\n    return (\n      <MidSection\n        cols={cols}\n        alignItems=\"center\"\n        ml=\"xxs\"\n        $softDeleted={Boolean(softDeleted)}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {Icon ? (\n          <IconWrapper\n            alignItems=\"center\"\n            mr=\"xxs\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <Icon {...customComponentProps} />\n          </IconWrapper>\n        ) : null}\n        <TextSection {...itemMeta} />\n      </MidSection>\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgFb,cAUJ,YAVI;AAhFV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAE9B,MAAM,cAAc,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,kBAAkB,CAAC;AAAA;AAAA;AAIpG,MAAM,aAAa,OAAO,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,gBAE9B,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAG3C,SAAO;AACT,CAAC;AAAA;AAEH,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAE5B,MAAM,oBAAoBA,OAAM;AAAA,EACrC,CAAC,UAAsG;AACrG,UAAM,EAAE,gBAAgB,GAAG,SAAS,IAAI;AACxC,UAAM,EAAE,OAAO,kBAAkB,mBAAmB,oBAAoB,qBAAqB,IAAI;AACjG,UAAM,EAAE,MAAM,gBAAgB,GAAG,yBAAyB,IAAI;AAC9D,UAAM,EAAE,aAAa,WAAW,IAAI;AACpC,UAAM,oBAAoB,qBAAqB,QAAQ;AACvD,UAAM,uBAAuBA,OAAM;AAAA,MACjC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,QAC1D;AAAA,QACA,kBAAkB,EAAE,GAAG,0BAA0B,IAAI,WAAW;AAAA,MAClE;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,UAAM,OAAOA,OAAM,QAAQ,MAAM;AAE/B,UAAI,eAAgB,QAAO,CAAC;AAC5B,YAAM,cAAc,CAAC;AACrB,UAAI,KAAM,aAAY,KAAK,MAAM;AACjC,kBAAY,KAAK,KAAK;AACtB,aAAO;AAAA,IACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,UAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,UAAM,yBAAyBA,OAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAErE,QAAI;AACF,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,MAAM;AAAA,UACN,cAAc,QAAQ,WAAW;AAAA,UACjC;AAAA,UACA;AAAA,UAEA,8BAAC,kBAAgB,GAAG,sBAAsB;AAAA;AAAA,MAC5C;AAQJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,YAAW;AAAA,QACX,IAAG;AAAA,QACH,cAAc,QAAQ,WAAW;AAAA,QACjC;AAAA,QACA;AAAA,QAEC;AAAA,iBACC;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,IAAG;AAAA,cACH;AAAA,cACA;AAAA,cAEA,8BAAC,QAAM,GAAG,sBAAsB;AAAA;AAAA,UAClC,IACE;AAAA,UACJ,oBAAC,eAAa,GAAG,UAAU;AAAA;AAAA;AAAA,IAC7B;AAAA,EAEJ;AACF;",
+  "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 { type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../constants/index.js';\nimport { TextSection } from './TextSection.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\nconst IconWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ICON_WRAPPER })`\n  min-height: 1rem;\n`;\n\nconst MidSection = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_MIDSECTION_WRAPPER,\n})<{ $softDeleted: boolean }>`\n  height: 100%;\n  min-height: 1rem;\n  ${(props) => {\n    if (props.$softDeleted)\n      return `\n      color: ${props.theme.colors.neutral[500]};\n      svg {\n        fill: ${props.theme.colors.neutral[400]};\n      }\n    `;\n    return '';\n  }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nexport const ItemMiddleSection = React.memo(\n  (props: DSShuttleV2T.ItemMeta & { tooltipHelpers?: DSShuttleV2T.ComponentProps['tooltipHelpers'] }) => {\n    const { tooltipHelpers, ...itemMeta } = props;\n    const { datum, datumHydratables, datumInternalMeta, isDestinationPanel, hasMultipleSelection } = itemMeta;\n    const { Icon, CustomRenderer, ...componentlessHydratables } = datumHydratables;\n    const { softDeleted, hydratedId } = datumInternalMeta;\n    const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n    const customComponentProps = React.useMemo<DSShuttleV2T.ComponentProps>(\n      () => ({\n        datum,\n        tooltipHelpers,\n        thisItemIsFocused,\n        panelMetaInfo: { isDestinationPanel, hasMultipleSelection },\n        datumInternalMeta,\n        datumHydratables: { ...componentlessHydratables, id: hydratedId },\n      }),\n      [\n        componentlessHydratables,\n        datum,\n        datumInternalMeta,\n        hasMultipleSelection,\n        hydratedId,\n        isDestinationPanel,\n        thisItemIsFocused,\n        tooltipHelpers,\n      ],\n    );\n    const cols = React.useMemo(() => {\n      // if CustomRenderer is defined, shortcircuit\n      if (CustomRenderer) return [];\n      const dynamicCols = [];\n      if (Icon) dynamicCols.push('auto');\n      dynamicCols.push('1fr');\n      return dynamicCols;\n    }, [CustomRenderer, Icon]);\n\n    const getOwnerProps = usePropsStore((store) => store.get);\n    const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n    if (CustomRenderer)\n      return (\n        <MidSection\n          cols={customMidSectionCols}\n          rows={customMidSectionRows}\n          $softDeleted={Boolean(softDeleted)}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <CustomRenderer {...customComponentProps} />\n        </MidSection>\n      );\n\n    // if we ever need to do something for truncation and showing a tooltip in the future,\n    // check out what has been done in exported-related/ShuttleItem.tsx\n    // also, be aware that we have the headless logic alread inside tooltipHelpers\n    // when this comment has been written, the logic was working with keyboard and mouse as per tooltip-v3\n    // integrated with all the shuttle-v2 custom focus navigation\n    return (\n      <MidSection\n        cols={cols}\n        alignItems=\"center\"\n        ml=\"xxs\"\n        $softDeleted={Boolean(softDeleted)}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {Icon ? (\n          <IconWrapper\n            alignItems=\"center\"\n            mr=\"xxs\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <Icon {...customComponentProps} />\n          </IconWrapper>\n        ) : null}\n        <TextSection {...itemMeta} />\n      </MidSection>\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiFb,cAUJ,YAVI;AAjFV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAE9B,MAAM,cAAc,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,kBAAkB,CAAC;AAAA;AAAA;AAIpG,MAAM,aAAa,OAAO,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,gBAE9B,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAG3C,SAAO;AACT,CAAC;AAAA;AAEH,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAE5B,MAAM,oBAAoBA,OAAM;AAAA,EACrC,CAAC,UAAsG;AACrG,UAAM,EAAE,gBAAgB,GAAG,SAAS,IAAI;AACxC,UAAM,EAAE,OAAO,kBAAkB,mBAAmB,oBAAoB,qBAAqB,IAAI;AACjG,UAAM,EAAE,MAAM,gBAAgB,GAAG,yBAAyB,IAAI;AAC9D,UAAM,EAAE,aAAa,WAAW,IAAI;AACpC,UAAM,oBAAoB,qBAAqB,QAAQ;AACvD,UAAM,uBAAuBA,OAAM;AAAA,MACjC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,QAC1D;AAAA,QACA,kBAAkB,EAAE,GAAG,0BAA0B,IAAI,WAAW;AAAA,MAClE;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,UAAM,OAAOA,OAAM,QAAQ,MAAM;AAE/B,UAAI,eAAgB,QAAO,CAAC;AAC5B,YAAM,cAAc,CAAC;AACrB,UAAI,KAAM,aAAY,KAAK,MAAM;AACjC,kBAAY,KAAK,KAAK;AACtB,aAAO;AAAA,IACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,UAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,UAAM,yBAAyBA,OAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAErE,QAAI;AACF,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,MAAM;AAAA,UACN,cAAc,QAAQ,WAAW;AAAA,UACjC;AAAA,UACA;AAAA,UAEA,8BAAC,kBAAgB,GAAG,sBAAsB;AAAA;AAAA,MAC5C;AAQJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,YAAW;AAAA,QACX,IAAG;AAAA,QACH,cAAc,QAAQ,WAAW;AAAA,QACjC;AAAA,QACA;AAAA,QAEC;AAAA,iBACC;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,IAAG;AAAA,cACH;AAAA,cACA;AAAA,cAEA,8BAAC,QAAM,GAAG,sBAAsB;AAAA;AAAA,UAClC,IACE;AAAA,UACJ,oBAAC,eAAa,GAAG,UAAU;AAAA;AAAA;AAAA,IAC7B;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/Item/ItemSelectionUi/CheckboxSelectionUI.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
+import { styled } from "@elliemae/ds-system";
+import React2 from "react";
+import { usePropsStore } from "../../../config/useStore/useStore.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
+const StyledItemSelection = styled(DSControlledCheckbox, {
+  name: DSShuttleV2Name,
+  slot: DSShuttleV2Slots.ITEM_SELECTION_CHECKBOX_UI
+})`
+  margin-left: xxs2;
+  margin-right: xxs;
+`;
+const noOp = () => {
+};
+const CheckboxSelectionUI = (props) => {
+  const { itemMeta } = props;
+  const {
+    datumInternalMeta,
+    datumRenderFlags: { selectionPrevented }
+  } = itemMeta;
+  const { isSelected } = datumInternalMeta;
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => itemMeta, [itemMeta]);
+  return /* @__PURE__ */ jsx(
+    StyledItemSelection,
+    {
+      applyAriaDisabled: selectionPrevented,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      "aria-hidden": "true",
+      tabIndex: -1,
+      checked: isSelected,
+      onChange: noOp
+    }
+  );
+};
+export {
+  CheckboxSelectionUI
+};
+//# sourceMappingURL=CheckboxSelectionUI.js.map

package/dist/esm/parts/Item/ItemSelectionUi/CheckboxSelectionUI.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemSelectionUi/CheckboxSelectionUI.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../../../config/useStore/useStore.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\nimport type { SelectionUIProps } from './ItemSelectionUI.types.js';\n\nconst StyledItemSelection = styled(DSControlledCheckbox, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_SELECTION_CHECKBOX_UI,\n})`\n  margin-left: xxs2;\n  margin-right: xxs;\n`;\nconst noOp = () => {};\n\nexport const CheckboxSelectionUI = (props: SelectionUIProps) => {\n  const { itemMeta } = props;\n  const {\n    datumInternalMeta,\n    datumRenderFlags: { selectionPrevented },\n  } = itemMeta;\n  const { isSelected } = datumInternalMeta;\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n  return (\n    <StyledItemSelection\n      applyAriaDisabled={selectionPrevented}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      // the semantic is already conveyed by the wrapper's aria-checked and aria-disabled, so we hide this from assistive technologies to avoid redundancy\n      // we are effectively treating this as a presentational element that only provides a visual cue, so it doesn't need to be announced on its own\n      // this is also why we don't tab-index it and we don't onChange it directly, all of that is already handled by the wrapper.\n      aria-hidden=\"true\"\n      tabIndex={-1}\n      checked={isSelected}\n      onChange={noOp}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2BnB;AA3BJ,SAAS,4BAA4B;AACrC,SAAS,cAAc;AACvB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAGlD,MAAM,sBAAsB,OAAO,sBAAsB;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAID,MAAM,OAAO,MAAM;AAAC;AAEb,MAAM,sBAAsB,CAAC,UAA4B;AAC9D,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,mBAAmB;AAAA,EACzC,IAAI;AACJ,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,UAAU,CAAC,QAAQ,CAAC;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MAIA,eAAY;AAAA,MACZ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/Item/ItemSelectionUi/ItemSelectionUI.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Grid } from "@elliemae/ds-grid";
+import { styled } from "@elliemae/ds-system";
+import React2 from "react";
+import { usePropsStore } from "../../../config/useStore/useStore.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
+import { CheckboxSelectionUI } from "./CheckboxSelectionUI.js";
+import { VerticalBarSelectionUI } from "./VerticalBarSelectionUI.js";
+const ItemSelectionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_CHECKBOX })`
+  height: 100%;
+  &:focus {
+    outline: none;
+  }
+`;
+const ItemSelectionUI = (props) => {
+  const { tooltipHelpers, itemInnerRefHandlers, itemMeta } = props;
+  const {
+    datumInternalMeta,
+    datumRenderFlags: { selectionPrevented }
+  } = itemMeta;
+  const { isSelected, hydratedId, softDeleted } = datumInternalMeta;
+  const { innerRefHandlerParentItem } = itemInnerRefHandlers;
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const explicitSelectionUI = usePropsStore((store) => store.explicitSelectionUI);
+  const getOwnerPropsArguments = React2.useCallback(() => itemMeta, [itemMeta]);
+  const idItem = React2.useMemo(
+    () => `${hydratedId}-wrapper${softDeleted ? "-soft-deleted" : ""}`,
+    [hydratedId, softDeleted]
+  );
+  const shouldDisable = softDeleted || selectionPrevented;
+  return /* @__PURE__ */ jsx(
+    ItemSelectionWrapper,
+    {
+      role: "checkbox",
+      "aria-checked": isSelected,
+      onFocus: tooltipHelpers.onFocus,
+      onBlur: tooltipHelpers.onBlur,
+      "aria-labelledby": `${hydratedId}-text-section${softDeleted ? "-soft-deleted" : ""}`,
+      id: idItem,
+      innerRef: innerRefHandlerParentItem,
+      "aria-disabled": shouldDisable,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      alignItems: "center",
+      children: explicitSelectionUI ? /* @__PURE__ */ jsx(CheckboxSelectionUI, { ...props }) : /* @__PURE__ */ jsx(VerticalBarSelectionUI, { ...props })
+    }
+  );
+};
+export {
+  ItemSelectionUI
+};
+//# sourceMappingURL=ItemSelectionUI.js.map

package/dist/esm/parts/Item/ItemSelectionUi/ItemSelectionUI.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemSelectionUi/ItemSelectionUI.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../../../config/useStore/useStore.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\nimport { CheckboxSelectionUI } from './CheckboxSelectionUI.js';\nimport type { SelectionUIProps } from './ItemSelectionUI.types.js';\nimport { VerticalBarSelectionUI } from './VerticalBarSelectionUI.js';\n\nconst ItemSelectionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_CHECKBOX })`\n  height: 100%;\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const ItemSelectionUI = (props: SelectionUIProps) => {\n  const { tooltipHelpers, itemInnerRefHandlers, itemMeta } = props;\n  const {\n    datumInternalMeta,\n    datumRenderFlags: { selectionPrevented },\n  } = itemMeta;\n  const { isSelected, hydratedId, softDeleted } = datumInternalMeta;\n  const { innerRefHandlerParentItem } = itemInnerRefHandlers;\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const explicitSelectionUI = usePropsStore((store) => store.explicitSelectionUI);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n  const idItem = React.useMemo(\n    () => `${hydratedId}-wrapper${softDeleted ? '-soft-deleted' : ''}`,\n    [hydratedId, softDeleted],\n  );\n  const shouldDisable = softDeleted || selectionPrevented;\n  return (\n    <ItemSelectionWrapper\n      role=\"checkbox\"\n      aria-checked={isSelected}\n      onFocus={tooltipHelpers.onFocus}\n      onBlur={tooltipHelpers.onBlur}\n      aria-labelledby={`${hydratedId}-text-section${softDeleted ? '-soft-deleted' : ''}`}\n      id={idItem}\n      innerRef={innerRefHandlerParentItem}\n      aria-disabled={shouldDisable}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      alignItems=\"center\"\n    >\n      {explicitSelectionUI ? <CheckboxSelectionUI {...props} /> : <VerticalBarSelectionUI {...props} />}\n    </ItemSelectionWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8CM;AA9C7B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,2BAA2B;AAEpC,SAAS,8BAA8B;AAEvC,MAAM,uBAAuB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlG,MAAM,kBAAkB,CAAC,UAA4B;AAC1D,QAAM,EAAE,gBAAgB,sBAAsB,SAAS,IAAI;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,mBAAmB;AAAA,EACzC,IAAI;AACJ,QAAM,EAAE,YAAY,YAAY,YAAY,IAAI;AAChD,QAAM,EAAE,0BAA0B,IAAI;AACtC,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,sBAAsB,cAAc,CAAC,UAAU,MAAM,mBAAmB;AAC9E,QAAM,yBAAyBA,OAAM,YAAY,MAAM,UAAU,CAAC,QAAQ,CAAC;AAC3E,QAAM,SAASA,OAAM;AAAA,IACnB,MAAM,GAAG,UAAU,WAAW,cAAc,kBAAkB,EAAE;AAAA,IAChE,CAAC,YAAY,WAAW;AAAA,EAC1B;AACA,QAAM,gBAAgB,eAAe;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,SAAS,eAAe;AAAA,MACxB,QAAQ,eAAe;AAAA,MACvB,mBAAiB,GAAG,UAAU,gBAAgB,cAAc,kBAAkB,EAAE;AAAA,MAChF,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,iBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,YAAW;AAAA,MAEV,gCAAsB,oBAAC,uBAAqB,GAAG,OAAO,IAAK,oBAAC,0BAAwB,GAAG,OAAO;AAAA;AAAA,EACjG;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/Item/ItemSelectionUi/ItemSelectionUI.types.js

@@ -0,0 +1,2 @@
+import * as React from "react";
+//# sourceMappingURL=ItemSelectionUI.types.js.map

package/dist/esm/parts/Item/ItemSelectionUi/ItemSelectionUI.types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA,YAAY,WAAW;",
+  "names": []
+}

package/dist/esm/parts/Item/{ItemSelection.js → ItemSelectionUi/VerticalBarSelectionUI.js}

@@ -1,21 +1,23 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import React2 from "react";
-import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../constants/index.js";
-import { usePropsStore } from "../../config/useStore/useStore.js";
+import { styled } from "@elliemae/ds-system";
+import React2 from "react";
+import { usePropsStore } from "../../../config/useStore/useStore.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
 const StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_SELECTION })`
   width: 5px;
   height: 100%;
   box-sizing: border-box;
+  pointer-events: none;
   background-color: ${(props) => {
-  if (props.$isSelected) return props.theme.colors.brand[600];
+  if (props.$isSelected) return props.theme.colors.brand[800];
   if (props.$selectionPrevented === true) return props.theme.colors.neutral["080"];
   return props.theme.colors.brand[300];
 }};
 `;
-const ItemSelection = React2.memo((itemMeta) => {
+const VerticalBarSelectionUI = (props) => {
+  const { itemMeta } = props;
   const {
     datumInternalMeta: { isSelected },
     datumRenderFlags: { selectionPrevented }
@@ -31,8 +33,8 @@ const ItemSelection = React2.memo((itemMeta) => {
       getOwnerPropsArguments
     }
   );
-});
+};
 export {
-  ItemSelection
+  VerticalBarSelectionUI
 };
-//# sourceMappingURL=ItemSelection.js.map
+//# sourceMappingURL=VerticalBarSelectionUI.js.map

package/dist/esm/parts/Item/ItemSelectionUi/VerticalBarSelectionUI.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemSelectionUi/VerticalBarSelectionUI.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../../../config/useStore/useStore.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\nimport type { SelectionUIProps } from './ItemSelectionUI.types.js';\n\nconst StyledItemSelection = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_SELECTION })<{\n  $isSelected: boolean;\n  $selectionPrevented?: boolean;\n}>`\n  width: 5px;\n  height: 100%;\n  box-sizing: border-box;\n  pointer-events: none;\n  background-color: ${(props) => {\n    // brand[800] (not brand[700]) so selected vs unselected (brand[300]) meets the\n    // WCAG 1.4.1 3:1 contrast exception (3.75:1) \u2014 the lightness delta is the non-color cue. PUI-15539\n    if (props.$isSelected) return props.theme.colors.brand[800];\n    if (props.$selectionPrevented === true) return props.theme.colors.neutral['080'];\n    return props.theme.colors.brand[300];\n  }};\n`;\n\nexport const VerticalBarSelectionUI = (props: SelectionUIProps) => {\n  const { itemMeta } = props;\n  const {\n    datumInternalMeta: { isSelected },\n    datumRenderFlags: { selectionPrevented },\n  } = itemMeta;\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => itemMeta, [itemMeta]);\n\n  return (\n    <StyledItemSelection\n      $isSelected={isSelected}\n      $selectionPrevented={selectionPrevented}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCnB;AAlCJ,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,wBAAwB;AAGlD,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQnF,CAAC,UAAU;AAG7B,MAAI,MAAM,YAAa,QAAO,MAAM,MAAM,OAAO,MAAM,GAAG;AAC1D,MAAI,MAAM,wBAAwB,KAAM,QAAO,MAAM,MAAM,OAAO,QAAQ,KAAK;AAC/E,SAAO,MAAM,MAAM,OAAO,MAAM,GAAG;AACrC,CAAC;AAAA;AAGI,MAAM,yBAAyB,CAAC,UAA4B;AACjE,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM;AAAA,IACJ,mBAAmB,EAAE,WAAW;AAAA,IAChC,kBAAkB,EAAE,mBAAmB;AAAA,EACzC,IAAI;AACJ,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,UAAU,CAAC,QAAQ,CAAC;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/Item/useItemInnerRefHandlers.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import React2, { useEffect } from "react";
+import { useInternalStore, usePropsStore } from "../../config/useStore/index.js";
+import { REGIONS_FOCUSES } from "../../constants/index.js";
+import { useThisItemIsFocused } from "./useThisItemIsFocused.js";
+const useItemInnerRefHandlers = (itemMeta) => {
+  const { datumInternalMeta, isDestinationPanel } = itemMeta;
+  const { hydratedId } = datumInternalMeta;
+  const setZustandRef = useInternalStore((state) => state.setZustandRef);
+  const setDeferFocusUntilFirstRender = useInternalStore((state) => state.setDeferFocusUntilFirstRender);
+  const deferedAfterFirstRender = useInternalStore((state) => state.getDeferFocusUntilFirstRender());
+  const isLoadingMore = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore
+  );
+  const thisItemIsFocused = useThisItemIsFocused(itemMeta);
+  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
+  const currItemId = hydratedId;
+  const innerRefHandlerParentItem = React2.useCallback(
+    (node) => {
+      setZustandRef([currRegion, currItemId, "parent"], node);
+      if (deferedAfterFirstRender && thisItemIsFocused && node) {
+        setDeferFocusUntilFirstRender(false);
+        if (node.tabIndex === -1) node.tabIndex = 0;
+        node.focus();
+      }
+    },
+    [setZustandRef, currRegion, currItemId, thisItemIsFocused, deferedAfterFirstRender, setDeferFocusUntilFirstRender]
+  );
+  useEffect(
+    () => () => {
+      if (isLoadingMore) setDeferFocusUntilFirstRender(true);
+    },
+    [isLoadingMore, setDeferFocusUntilFirstRender]
+  );
+  return React2.useMemo(
+    () => ({ innerRefHandlerParentItem, thisItemIsFocused }),
+    [innerRefHandlerParentItem, thisItemIsFocused]
+  );
+};
+export {
+  useItemInnerRefHandlers
+};
+//# sourceMappingURL=useItemInnerRefHandlers.js.map

package/dist/esm/parts/Item/useItemInnerRefHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/useItemInnerRefHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect } from 'react';\nimport { useInternalStore, usePropsStore } from '../../config/useStore/index.js';\nimport { REGIONS_FOCUSES } from '../../constants/index.js';\nimport type { DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { useThisItemIsFocused } from './useThisItemIsFocused.js';\n\nexport const useItemInnerRefHandlers = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta, isDestinationPanel } = itemMeta;\n  const { hydratedId } = datumInternalMeta;\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n  const setDeferFocusUntilFirstRender = useInternalStore((state) => state.setDeferFocusUntilFirstRender);\n  const deferedAfterFirstRender = useInternalStore((state) => state.getDeferFocusUntilFirstRender());\n  const isLoadingMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore,\n  );\n\n  const thisItemIsFocused = useThisItemIsFocused(itemMeta);\n\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = hydratedId;\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setZustandRef([currRegion, currItemId, 'parent'], node);\n      if (deferedAfterFirstRender && thisItemIsFocused && node) {\n        setDeferFocusUntilFirstRender(false);\n        if (node.tabIndex === -1) node.tabIndex = 0;\n        node.focus();\n      }\n    },\n    [setZustandRef, currRegion, currItemId, thisItemIsFocused, deferedAfterFirstRender, setDeferFocusUntilFirstRender],\n  );\n\n  useEffect(\n    () => () => {\n      if (isLoadingMore) setDeferFocusUntilFirstRender(true);\n    },\n    [isLoadingMore, setDeferFocusUntilFirstRender],\n  );\n\n  return React.useMemo(\n    () => ({ innerRefHandlerParentItem, thisItemIsFocused }),\n    [innerRefHandlerParentItem, thisItemIsFocused],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,iBAAiB;AACjC,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,uBAAuB;AAEhC,SAAS,4BAA4B;AAE9B,MAAM,0BAA0B,CAAC,aAAoC;AAC1E,QAAM,EAAE,mBAAmB,mBAAmB,IAAI;AAClD,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,MAAM,aAAa;AAErE,QAAM,gCAAgC,iBAAiB,CAAC,UAAU,MAAM,6BAA6B;AACrG,QAAM,0BAA0B,iBAAiB,CAAC,UAAU,MAAM,8BAA8B,CAAC;AACjG,QAAM,gBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AAEA,QAAM,oBAAoB,qBAAqB,QAAQ;AAEvD,QAAM,aAAa,qBAAqB,gBAAgB,yBAAyB,gBAAgB;AACjG,QAAM,aAAa;AAEnB,QAAM,4BAA4BA,OAAM;AAAA,IACtC,CAAC,SAAgC;AAC/B,oBAAc,CAAC,YAAY,YAAY,QAAQ,GAAG,IAAI;AACtD,UAAI,2BAA2B,qBAAqB,MAAM;AACxD,sCAA8B,KAAK;AACnC,YAAI,KAAK,aAAa,GAAI,MAAK,WAAW;AAC1C,aAAK,MAAM;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,eAAe,YAAY,YAAY,mBAAmB,yBAAyB,6BAA6B;AAAA,EACnH;AAEA;AAAA,IACE,MAAM,MAAM;AACV,UAAI,cAAe,+BAA8B,IAAI;AAAA,IACvD;AAAA,IACA,CAAC,eAAe,6BAA6B;AAAA,EAC/C;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,2BAA2B,kBAAkB;AAAA,IACtD,CAAC,2BAA2B,iBAAiB;AAAA,EAC/C;AACF;",
+  "names": ["React"]
+}

package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js

@@ -4,7 +4,7 @@ import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button-v2";
 import { usePropsStore } from "../../../config/useStore/index.js";
-import { useInnerRefHandlers } from "./useInnerRefHandlers.js";
+import { useLoadMoreBtnInnerRefHandlers } from "./useLoadMoreBtnInnerRefHandlers.js";
 import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
 import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
 const StyledLoadMoreBtn = styled(DSButtonV2, {
@@ -53,7 +53,7 @@ const LoadMoreBtn = (panelMetaInfo) => {
       trackFocusRegionPanelItem
     ]
   );
-  const { innerRefHandlerLoadMoreBtn } = useInnerRefHandlers(panelMetaInfo);
+  const { innerRefHandlerLoadMoreBtn } = useLoadMoreBtnInnerRefHandlers(panelMetaInfo);
   const getOwnerProps = usePropsStore((store) => store.get);
   const getOwnerPropsArguments = React2.useCallback(() => panelMetaInfo, [panelMetaInfo]);
   return /* @__PURE__ */ jsx(

package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/LoadMoreBtn.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useInnerRefHandlers } from './useInnerRefHandlers.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\n\nconst StyledLoadMoreBtn = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\n\nexport const LoadMoreBtn = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const {\n    getCanFocusLastItem,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusRegionPanel,\n    trackFocusItemReset,\n    trackFocusActionReset,\n  } = useFocusTracker();\n  const onLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore,\n  );\n  const handleOnClick = React.useCallback(\n    (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onLoadMore(e);\n      if (getCanFocusLastItem(panelMetaInfo)) {\n        trackFocusItemLast(panelMetaInfo);\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusActionParent();\n      } else {\n        trackFocusItemReset();\n        trackFocusActionReset();\n        trackFocusRegionPanel(panelMetaInfo.isDestinationPanel);\n      }\n    },\n    [\n      getCanFocusLastItem,\n      onLoadMore,\n      panelMetaInfo,\n      trackFocusActionParent,\n      trackFocusActionReset,\n      trackFocusItemLast,\n      trackFocusItemReset,\n      trackFocusRegionPanel,\n      trackFocusRegionPanelItem,\n    ],\n  );\n  const { innerRefHandlerLoadMoreBtn } = useInnerRefHandlers(panelMetaInfo);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledLoadMoreBtn\n      buttonType=\"text\"\n      onClick={handleOnClick}\n      size={BUTTON_SIZES.S}\n      innerRef={innerRefHandlerLoadMoreBtn}\n      // aria-label set for default, can be overridden via getOwnerProps\n      aria-label={isDestinationPanel ? 'Load more items in destination panel' : 'Load more items in source panel'}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      Load More...\n    </StyledLoadMoreBtn>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6DnB;AA7DJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY,oBAAoC;AACzD,SAAS,qBAAqB;AAE9B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB;AACpB,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAA2D;AAC1D,iBAAW,CAAC;AACZ,UAAI,oBAAoB,aAAa,GAAG;AACtC,2BAAmB,aAAa;AAChC,kCAA0B,cAAc,kBAAkB;AAC1D,+BAAuB;AAAA,MACzB,OAAO;AACL,4BAAoB;AACpB,8BAAsB;AACtB,8BAAsB,cAAc,kBAAkB;AAAA,MACxD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,2BAA2B,IAAI,oBAAoB,aAAa;AACxE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,aAAa;AAAA,MACnB,UAAU;AAAA,MAEV,cAAY,qBAAqB,yCAAyC;AAAA,MAC1E;AAAA,MACA;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2, BUTTON_SIZES, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useLoadMoreBtnInnerRefHandlers } from './useLoadMoreBtnInnerRefHandlers.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\n\nconst StyledLoadMoreBtn = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.LIST_BOTTOM_LOAD_MORE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\n\nexport const LoadMoreBtn = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const {\n    getCanFocusLastItem,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusRegionPanel,\n    trackFocusItemReset,\n    trackFocusActionReset,\n  } = useFocusTracker();\n  const onLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationLoadMore : state.onSourceLoadMore,\n  );\n  const handleOnClick = React.useCallback(\n    (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\n      onLoadMore(e);\n      if (getCanFocusLastItem(panelMetaInfo)) {\n        trackFocusItemLast(panelMetaInfo);\n        trackFocusRegionPanelItem(panelMetaInfo.isDestinationPanel);\n        trackFocusActionParent();\n      } else {\n        trackFocusItemReset();\n        trackFocusActionReset();\n        trackFocusRegionPanel(panelMetaInfo.isDestinationPanel);\n      }\n    },\n    [\n      getCanFocusLastItem,\n      onLoadMore,\n      panelMetaInfo,\n      trackFocusActionParent,\n      trackFocusActionReset,\n      trackFocusItemLast,\n      trackFocusItemReset,\n      trackFocusRegionPanel,\n      trackFocusRegionPanelItem,\n    ],\n  );\n  const { innerRefHandlerLoadMoreBtn } = useLoadMoreBtnInnerRefHandlers(panelMetaInfo);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledLoadMoreBtn\n      buttonType=\"text\"\n      onClick={handleOnClick}\n      size={BUTTON_SIZES.S}\n      innerRef={innerRefHandlerLoadMoreBtn}\n      // aria-label set for default, can be overridden via getOwnerProps\n      aria-label={isDestinationPanel ? 'Load more items in destination panel' : 'Load more items in source panel'}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      Load More...\n    </StyledLoadMoreBtn>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6DnB;AA7DJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY,oBAAoC;AACzD,SAAS,qBAAqB;AAE9B,SAAS,sCAAsC;AAC/C,SAAS,uBAAuB;AAChC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,cAAc,CAAC,kBAA8C;AACxE,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB;AACpB,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAA2D;AAC1D,iBAAW,CAAC;AACZ,UAAI,oBAAoB,aAAa,GAAG;AACtC,2BAAmB,aAAa;AAChC,kCAA0B,cAAc,kBAAkB;AAC1D,+BAAuB;AAAA,MACzB,OAAO;AACL,4BAAoB;AACpB,8BAAsB;AACtB,8BAAsB,cAAc,kBAAkB;AAAA,MACxD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,2BAA2B,IAAI,+BAA+B,aAAa;AACnF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,aAAa;AAAA,MACnB,UAAU;AAAA,MAEV,cAAY,qBAAqB,yCAAyC;AAAA,MAC1E;AAAA,MACA;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/bottom/{useInnerRefHandlers.js → useLoadMoreBtnInnerRefHandlers.js}

@@ -2,7 +2,7 @@ import * as React from "react";
 import React2 from "react";
 import { useInternalStore } from "../../../config/useStore/index.js";
 import { ITEMS_FOCUSES } from "../../../constants/index.js";
-const useInnerRefHandlers = ({ isDestinationPanel }) => {
+const useLoadMoreBtnInnerRefHandlers = ({ isDestinationPanel }) => {
   const setZustandRef = useInternalStore((state) => state.setZustandRef);
   const innerRefHandlerLoadMoreBtn = React2.useCallback(
     (node) => {
@@ -16,6 +16,6 @@ const useInnerRefHandlers = ({ isDestinationPanel }) => {
   return React2.useMemo(() => ({ innerRefHandlerLoadMoreBtn }), [innerRefHandlerLoadMoreBtn]);
 };
 export {
-  useInnerRefHandlers
+  useLoadMoreBtnInnerRefHandlers
 };
-//# sourceMappingURL=useInnerRefHandlers.js.map
+//# sourceMappingURL=useLoadMoreBtnInnerRefHandlers.js.map

package/dist/esm/parts/Panel/bottom/useLoadMoreBtnInnerRefHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/bottom/useLoadMoreBtnInnerRefHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { useInternalStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { ITEMS_FOCUSES } from '../../../constants/index.js';\n\nexport const useLoadMoreBtnInnerRefHandlers = ({ isDestinationPanel }: DSShuttleV2T.PanelMetaInfo) => {\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n  const innerRefHandlerLoadMoreBtn = React.useCallback(\n    (node: HTMLButtonElement) => {\n      setZustandRef(\n        [isDestinationPanel ? ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION : ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE],\n        node,\n      );\n    },\n    [isDestinationPanel, setZustandRef],\n  );\n  return React.useMemo(() => ({ innerRefHandlerLoadMoreBtn }), [innerRefHandlerLoadMoreBtn]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB;AAEjC,SAAS,qBAAqB;AAEvB,MAAM,iCAAiC,CAAC,EAAE,mBAAmB,MAAkC;AACpG,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,MAAM,aAAa;AAErE,QAAM,6BAA6BA,OAAM;AAAA,IACvC,CAAC,SAA4B;AAC3B;AAAA,QACE,CAAC,qBAAqB,cAAc,4BAA4B,cAAc,oBAAoB;AAAA,QAClG;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,oBAAoB,aAAa;AAAA,EACpC;AACA,SAAOA,OAAM,QAAQ,OAAO,EAAE,2BAA2B,IAAI,CAAC,0BAA0B,CAAC;AAC3F;",
+  "names": ["React"]
+}