@elliemae/ds-shuttle-v2 3.57.0-next.4 → 3.57.0-next.41

package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/MultipleSelectionAction.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 { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/index.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n  position: absolute;\n  background-color: neutral-000;\n  top: 0px;\n  right: 0px;\n  transform: translateX(0);\n  height: 100%;\n  width: 5rem;\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusMoveAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n  const currRegion = isDestinationPanel\n    ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n    : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n  const innerRefHandlerMoveAll = React.useCallback(\n    (node: HTMLButtonElement | null) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n\n  const handleMoveAllKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    (e) => {\n      const { key } = e;\n      if (['ArrowLeft', 'ArrowRight'].includes(key)) {\n        trackFocusItemReset();\n        trackFocusActionReset();\n        trackFocusRegionPanel(isDestinationPanel);\n      }\n    },\n    [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel],\n  );\n\n  const getBatchActionableButtonProps = usePropsStore((state) => state.getBatchActionableButtonProps);\n  const batchActionableButtonProps = React.useMemo(\n    () => (getBatchActionableButtonProps !== undefined ? getBatchActionableButtonProps(panelMeta) : {}),\n    [getBatchActionableButtonProps, panelMeta],\n  );\n  const buttonActions = React.useMemo(\n    () => ({\n      onClick: handleMoveAllAction,\n      onFocus: handleMoveAllBtnFocus,\n      onKeyDown: handleMoveAllKeyDown,\n    }),\n    [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown],\n  );\n\n  // this \"as DSButtonT.Props\" is a workaround for the fact that useGetGlobalAttributes is not able to understand overloaded types\n  // intellisense will mostly lie because of this but we are using this for the spread operator and it will work for aria-* and data-* props\n  const spreadableButtonProps = useGetGlobalAttributes(batchActionableButtonProps, buttonActions) as DSButtonT.Props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMeta, [panelMeta]);\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledButton\n        aria-label=\"massive action button\"\n        buttonType=\"icon\"\n        onClick={handleMoveAllAction}\n        onFocus={handleMoveAllBtnFocus}\n        onKeyDown={handleMoveAllKeyDown}\n        innerRef={innerRefHandlerMoveAll}\n        {...spreadableButtonProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\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.538\"\n            height=\"1.538rem\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n"],
-  "mappings": "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",
+  "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 { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/index.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots, REGIONS_FOCUSES } from '../../../constants/index.js';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n  position: absolute;\n  background-color: neutral-000;\n  top: 0px;\n  right: 0px;\n  transform: translateX(0);\n  height: 100%;\n  width: 5rem;\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusMoveAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n  const currRegion = isDestinationPanel\n    ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n    : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n  const innerRefHandlerMoveAll = React.useCallback(\n    (node: HTMLButtonElement | null) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n\n  const handleMoveAllKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n    (e) => {\n      const { key } = e;\n      if (['ArrowLeft', 'ArrowRight'].includes(key)) {\n        trackFocusItemReset();\n        trackFocusActionReset();\n        trackFocusRegionPanel(isDestinationPanel);\n      }\n    },\n    [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel],\n  );\n\n  const getBatchActionableButtonProps = usePropsStore((state) => state.getBatchActionableButtonProps);\n  const batchActionableButtonProps = React.useMemo(\n    () => (getBatchActionableButtonProps !== undefined ? getBatchActionableButtonProps(panelMeta) : {}),\n    [getBatchActionableButtonProps, panelMeta],\n  );\n  const buttonActions = React.useMemo(\n    () => ({\n      onClick: handleMoveAllAction,\n      onFocus: handleMoveAllBtnFocus,\n      onKeyDown: handleMoveAllKeyDown,\n    }),\n    [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown],\n  );\n\n  // this \"as DSButtonT.Props\" is a workaround for the fact that useGetGlobalAttributes is not able to understand overloaded types\n  // intellisense will mostly lie because of this but we are using this for the spread operator and it will work for aria-* and data-* props\n  const spreadableButtonProps = useGetGlobalAttributes(batchActionableButtonProps, buttonActions) as DSButtonT.Props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => panelMeta, [panelMeta]);\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledButton\n        aria-label=\"massive action button\"\n        buttonType=\"icon\"\n        onClick={handleMoveAllAction}\n        onFocus={handleMoveAllBtnFocus}\n        onKeyDown={handleMoveAllKeyDown}\n        innerRef={innerRefHandlerMoveAll}\n        {...spreadableButtonProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\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.538\"\n            height=\"1.538rem\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { useCallback } from "react";
-import { uid } from "uid";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { useOnSpecificFocus } from "./useOnSpecificFocus.js";
@@ -11,9 +10,9 @@ import { EmptyItems } from "./EmptyItems.js";
 import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
 import { LoadingItems } from "./LoadingItems.js";
 import { MultipleSelectionAction } from "./MultipleSelectionAction.js";
-import { REGIONS_FOCUSES } from "../../../constants/index.js";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, REGIONS_FOCUSES, DSShuttleV2Slots } from "../../../constants/index.js";
 import { StyledA11yNoVisible } from "../../../styles.js";
+import { ShuttleLoadingAnnouncement } from "./ShuttleLoadingAnnouncement.js";
 const useInnerRefHandlers = (isDestinationPanel) => {
   const setZustandRef = useInternalStore((state) => state.setZustandRef);
   const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;
@@ -39,6 +38,9 @@ const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
   const itemsLength = usePropsStore(
     (state) => isDestinationPanel ? state.destinationData.length : state.sourceData.length
   );
+  const headerProps = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationHeaderProps : state.sourceHeaderProps
+  );
   const itemList = usePropsStore(
     (state) => isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData
   );
@@ -122,12 +124,12 @@ const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
   const getOwnerProps = usePropsStore((store) => store.get);
   const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
   const defaultAriaDescribedBy = itemList.length > 0 ? "Press Up and Down arrow to navigate the options list and Press Right and Left arrow to access items actions" : "No items available in the panel";
-  const uidDescribedBy = React2.useMemo(() => uid(), []);
+  const uidDescribedBy = useInternalStore((state) => state.shuttleInternalId);
   const defaultAriaLabel = React2.useMemo(
-    () => `Entering ${isDestinationPanel ? "destination" : "source"} panel. `,
+    () => `Entering ${isDestinationPanel ? "destination" : "source"} panel.`,
     [isDestinationPanel]
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     StyledListWrapperMid,
     {
       onFocus: onPanelFocus,
@@ -137,19 +139,18 @@ const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
       rows,
       "aria-label": defaultAriaLabel,
       "aria-describedby": uidDescribedBy,
-      "aria-roledescription": isDestinationPanel ? "shuttle right panel" : "shuttle left panel",
+      "aria-roledescription": isDestinationPanel ? "shuttle destination panel" : "shuttle source panel",
       getOwnerProps,
       getOwnerPropsArguments,
       innerRef: innerRefHandlerParentItem,
-      children: [
+      children: /* @__PURE__ */ jsxs(Grid, { cols, rows, children: [
         /* @__PURE__ */ jsx(StyledA11yNoVisible, { id: uidDescribedBy, children: defaultAriaDescribedBy }),
-        /* @__PURE__ */ jsxs(Grid, { cols, rows, children: [
-          isLoading ? /* @__PURE__ */ jsx(LoadingItems, { ...panelMetaInfo }) : null,
-          showEmptyMessage ? /* @__PURE__ */ jsx(EmptyItems, { ...panelMetaInfo }) : null,
-          showItems ? /* @__PURE__ */ jsx(ItemListWrapperWithContext, { ...panelMetaInfo }) : null,
-          hasMultipleSelection ? /* @__PURE__ */ jsx(MultipleSelectionAction, { ...panelMetaInfo }) : null
-        ] })
-      ]
+        /* @__PURE__ */ jsx(ShuttleLoadingAnnouncement, { isLoading, headerProps }),
+        isLoading ? /* @__PURE__ */ jsx(LoadingItems, { ...panelMetaInfo }) : null,
+        showEmptyMessage ? /* @__PURE__ */ jsx(EmptyItems, { ...panelMetaInfo }) : null,
+        showItems ? /* @__PURE__ */ jsx(ItemListWrapperWithContext, { ...panelMetaInfo }) : null,
+        hasMultipleSelection ? /* @__PURE__ */ jsx(MultipleSelectionAction, { ...panelMetaInfo }) : null
+      ] })
     }
   );
 });

package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/PanelContentMiddleSection.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { uid } from 'uid';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnSpecificFocus } from './useOnSpecificFocus.js';\nimport { usePropsStore, useInternalStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { ItemListWrapperWithContext } from './ItemListWrapper/Index.js';\nimport { EmptyItems } from './EmptyItems.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { LoadingItems } from './LoadingItems.js';\nimport { MultipleSelectionAction } from './MultipleSelectionAction.js';\nimport { REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\nimport { StyledA11yNoVisible } from '../../../styles.js';\n\nconst useInnerRefHandlers = (isDestinationPanel: boolean) => {\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n  return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nconst rows = [1];\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n  overflow: hidden;\n  position: relative;\n  :focus,\n  :focus-visible {\n    outline: 2px solid brand-700;\n  }\n`;\n\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false, hasMultipleSelection } = panelMetaInfo;\n  const itemsLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n  );\n\n  const itemList = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n  const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n  const showEmptyMessage = !isLoading && itemsLength === 0;\n  const showItems = !isLoading && !showEmptyMessage;\n\n  const actionRef = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n  );\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusLoadMoreBtnDestination,\n    trackFocusLoadMoreBtn,\n  } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onFocus: () => {\n        trackFocusRegionPanel(isDestinationPanel);\n      },\n    }),\n    [trackFocusRegionPanel, isDestinationPanel],\n  );\n  const onPanelFocus = useOnSpecificFocus(config);\n\n  const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n        e.preventDefault();\n        e.stopPropagation();\n        trackFocusRegionPanelItem(isDestinationPanel);\n        trackFocusActionParent();\n        // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n        if ((key === 'ArrowDown' || key === 'Home') && itemList.length > 0) {\n          actionRef.current.scrollTo(0);\n          trackFocusItemFirst(panelMetaInfo);\n        }\n        if ((key === 'ArrowUp' || key === 'End') && itemList.length > 0) {\n          if (withLoadMore) {\n            if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n            else trackFocusLoadMoreBtn();\n          } else {\n            trackFocusItemLast(panelMetaInfo);\n            actionRef.current.scrollTo(itemsLength - 1);\n          }\n        }\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      isDestinationPanel,\n      trackFocusActionParent,\n      itemList.length,\n      actionRef,\n      trackFocusItemFirst,\n      panelMetaInfo,\n      withLoadMore,\n      trackFocusLoadMoreBtnDestination,\n      trackFocusLoadMoreBtn,\n      trackFocusItemLast,\n      itemsLength,\n    ],\n  );\n\n  const cols = React.useMemo(() => {\n    if (hasMultipleSelection) return ['1fr', '5rem'];\n    return ['auto'];\n  }, [hasMultipleSelection]);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  const defaultAriaDescribedBy =\n    itemList.length > 0\n      ? 'Press Up and Down arrow to navigate the options list and Press Right and Left arrow to access items actions'\n      : 'No items available in the panel';\n\n  const uidDescribedBy = React.useMemo(() => uid(), []);\n\n  const defaultAriaLabel = React.useMemo(\n    () => `Entering ${isDestinationPanel ? 'destination' : 'source'} panel. `,\n    [isDestinationPanel],\n  );\n\n  return (\n    <StyledListWrapperMid\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n      role=\"group\"\n      tabIndex={0}\n      rows={rows}\n      aria-label={defaultAriaLabel}\n      aria-describedby={uidDescribedBy}\n      aria-roledescription={isDestinationPanel ? 'shuttle right panel' : 'shuttle left panel'}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      innerRef={innerRefHandlerParentItem}\n    >\n      <StyledA11yNoVisible id={uidDescribedBy}>{defaultAriaDescribedBy}</StyledA11yNoVisible>\n      <Grid cols={cols} rows={rows}>\n        {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n        {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n        {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n        {hasMultipleSelection ? <MultipleSelectionAction {...panelMetaInfo} /> : null}\n      </Grid>\n    </StyledListWrapperMid>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOnSpecificFocus } from './useOnSpecificFocus.js';\nimport { usePropsStore, useInternalStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { ItemListWrapperWithContext } from './ItemListWrapper/Index.js';\nimport { EmptyItems } from './EmptyItems.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { LoadingItems } from './LoadingItems.js';\nimport { MultipleSelectionAction } from './MultipleSelectionAction.js';\nimport { DSShuttleV2Name, REGIONS_FOCUSES, DSShuttleV2Slots } from '../../../constants/index.js';\nimport { StyledA11yNoVisible } from '../../../styles.js';\nimport { ShuttleLoadingAnnouncement } from './ShuttleLoadingAnnouncement.js';\n\nconst useInnerRefHandlers = (isDestinationPanel: boolean) => {\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      setZustandRef([currRegion, '', ''], node);\n    },\n    [currRegion, setZustandRef],\n  );\n  return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nconst rows = [1];\n\nconst StyledListWrapperMid = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_MID })`\n  overflow: hidden;\n  position: relative;\n  :focus,\n  :focus-visible {\n    outline: 2px solid brand-700;\n  }\n`;\n\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false, hasMultipleSelection } = panelMetaInfo;\n  const itemsLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n  );\n\n  const headerProps = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationHeaderProps : state.sourceHeaderProps,\n  );\n\n  const itemList = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n  const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n  const showEmptyMessage = !isLoading && itemsLength === 0;\n  const showItems = !isLoading && !showEmptyMessage;\n\n  const actionRef = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationVirtualRef : state.sourceVirtualRef,\n  );\n\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const withLoadMore = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\n    trackFocusLoadMoreBtnDestination,\n    trackFocusLoadMoreBtn,\n  } = useFocusTracker();\n  const config = React.useMemo(\n    () => ({\n      onFocus: () => {\n        trackFocusRegionPanel(isDestinationPanel);\n      },\n    }),\n    [trackFocusRegionPanel, isDestinationPanel],\n  );\n  const onPanelFocus = useOnSpecificFocus(config);\n\n  const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // we need to invoke \"getIsDragAndDropHappening\" here to ensure we have the latest info at the moment of the event\n      const isDragAndDropHappening = getIsDragAndDropHappening();\n      if (isDragAndDropHappening) {\n        e.preventDefault();\n        return;\n      }\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) {\n        e.preventDefault();\n        e.stopPropagation();\n        trackFocusRegionPanelItem(isDestinationPanel);\n        trackFocusActionParent();\n        // we won't receive ArrowUp/ArrowDown if this happens in a child because children are stopping propagation\n        if ((key === 'ArrowDown' || key === 'Home') && itemList.length > 0) {\n          actionRef.current.scrollTo(0);\n          trackFocusItemFirst(panelMetaInfo);\n        }\n        if ((key === 'ArrowUp' || key === 'End') && itemList.length > 0) {\n          if (withLoadMore) {\n            if (isDestinationPanel) trackFocusLoadMoreBtnDestination();\n            else trackFocusLoadMoreBtn();\n          } else {\n            trackFocusItemLast(panelMetaInfo);\n            actionRef.current.scrollTo(itemsLength - 1);\n          }\n        }\n      }\n    },\n    [\n      getIsDragAndDropHappening,\n      trackFocusRegionPanelItem,\n      isDestinationPanel,\n      trackFocusActionParent,\n      itemList.length,\n      actionRef,\n      trackFocusItemFirst,\n      panelMetaInfo,\n      withLoadMore,\n      trackFocusLoadMoreBtnDestination,\n      trackFocusLoadMoreBtn,\n      trackFocusItemLast,\n      itemsLength,\n    ],\n  );\n\n  const cols = React.useMemo(() => {\n    if (hasMultipleSelection) return ['1fr', '5rem'];\n    return ['auto'];\n  }, [hasMultipleSelection]);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  const defaultAriaDescribedBy =\n    itemList.length > 0\n      ? 'Press Up and Down arrow to navigate the options list and Press Right and Left arrow to access items actions'\n      : 'No items available in the panel';\n\n  const uidDescribedBy = useInternalStore((state) => state.shuttleInternalId);\n\n  const defaultAriaLabel = React.useMemo(\n    () => `Entering ${isDestinationPanel ? 'destination' : 'source'} panel.`,\n    [isDestinationPanel],\n  );\n\n  return (\n    <StyledListWrapperMid\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n      role=\"group\"\n      tabIndex={0}\n      rows={rows}\n      aria-label={defaultAriaLabel}\n      aria-describedby={uidDescribedBy}\n      aria-roledescription={isDestinationPanel ? 'shuttle destination panel' : 'shuttle source panel'}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      innerRef={innerRefHandlerParentItem}\n    >\n      <Grid cols={cols} rows={rows}>\n        <StyledA11yNoVisible id={uidDescribedBy}>{defaultAriaDescribedBy}</StyledA11yNoVisible>\n        <ShuttleLoadingAnnouncement isLoading={isLoading} headerProps={headerProps} />\n        {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n        {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n        {showItems ? <ItemListWrapperWithContext {...panelMetaInfo} /> : null}\n        {hasMultipleSelection ? <MultipleSelectionAction {...panelMetaInfo} /> : null}\n      </Grid>\n    </StyledListWrapperMid>\n  );\n});\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/middle/ShuttleLoadingAnnouncement.js

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+import { StyledA11yNoVisible } from "../../../styles.js";
+const ShuttleLoadingAnnouncement = React2.memo(({ isLoading, headerProps }) => {
+  const myHeaderProp = headerProps;
+  const label = myHeaderProp?.currentNode?.plainItem?.label || "current level";
+  const previousNodeRef = React2.useRef("");
+  React2.useEffect(() => {
+    if (!isLoading) {
+      previousNodeRef.current = label;
+    }
+  }, [isLoading, label]);
+  const messageLabel = React2.useMemo(() => {
+    if (isLoading) {
+      return "Loading items";
+    }
+    if (previousNodeRef.current !== label) {
+      return `Content loaded for ${label}`;
+    }
+    return "";
+  }, [isLoading, label]);
+  return /* @__PURE__ */ jsx(StyledA11yNoVisible, { role: "status", "aria-live": "polite", children: messageLabel });
+});
+export {
+  ShuttleLoadingAnnouncement
+};
+//# sourceMappingURL=ShuttleLoadingAnnouncement.js.map

package/dist/esm/parts/Panel/middle/ShuttleLoadingAnnouncement.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/ShuttleLoadingAnnouncement.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledA11yNoVisible } from '../../../styles.js';\n\ninterface ShuttleLoadingAnnouncementProps {\n  isLoading: boolean;\n  headerProps?: Record<string, unknown>;\n}\n\n// NOTE ABOUT `headerProps` SHAPE\n// -------------------------------------\n// The shuttle panel header is fully **customizable**. Consumers can render\n// *anything* in the header area to represent the \u201Ccurrent level\u201D, therefore we\n// cannot enforce a strict type here. For that reason, `headerProps` is typed as\n// `Record<string, unknown>`.\n//\n// However, **all of our Storybook examples** use the DimSum Bredcrumb and TreeModel\n// component as the header. In that scenario, the structure is predictable:\n//\n//   headerProps.currentNode.plainItem.label\n//\n// This gives us access to the label of the current breadcrumb node, which we\n// use to announce:\n//   - \"Loading items\" while the panel fetches data\n//   - \"Content loaded for {label}\" once loading completes\n//\n// Consumers using a different header implementation will not rely on this\n// internal structure, but our fallback (\u201Ccurrent level\u201D) ensures the region\n// still announces meaningful information.\n\nexport const ShuttleLoadingAnnouncement = React.memo(({ isLoading, headerProps }: ShuttleLoadingAnnouncementProps) => {\n  const myHeaderProp = headerProps as { currentNode?: { plainItem?: { label?: string } } };\n\n  const label = myHeaderProp?.currentNode?.plainItem?.label || 'current level';\n  const previousNodeRef = React.useRef('');\n\n  React.useEffect(() => {\n    if (!isLoading) {\n      previousNodeRef.current = label;\n    }\n  }, [isLoading, label]);\n\n  const messageLabel = React.useMemo(() => {\n    if (isLoading) {\n      return 'Loading items';\n    }\n    if (previousNodeRef.current !== label) {\n      return `Content loaded for ${label}`;\n    }\n    return '';\n  }, [isLoading, label]);\n  return (\n    <StyledA11yNoVisible role=\"status\" aria-live=\"polite\">\n      {messageLabel}\n    </StyledA11yNoVisible>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmDnB;AAnDJ,OAAOA,YAAW;AAClB,SAAS,2BAA2B;AA4B7B,MAAM,6BAA6BA,OAAM,KAAK,CAAC,EAAE,WAAW,YAAY,MAAuC;AACpH,QAAM,eAAe;AAErB,QAAM,QAAQ,cAAc,aAAa,WAAW,SAAS;AAC7D,QAAM,kBAAkBA,OAAM,OAAO,EAAE;AAEvC,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,CAAC,WAAW;AACd,sBAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,QAAM,eAAeA,OAAM,QAAQ,MAAM;AACvC,QAAI,WAAW;AACb,aAAO;AAAA,IACT;AACA,QAAI,gBAAgB,YAAY,OAAO;AACrC,aAAO,sBAAsB,KAAK;AAAA,IACpC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,KAAK,CAAC;AACrB,SACE,oBAAC,uBAAoB,MAAK,UAAS,aAAU,UAC1C,wBACH;AAEJ,CAAC;",
+  "names": ["React"]
+}

package/dist/esm/parts/Panel/top/AriaLivePanelCenter.js

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2, { useMemo, useCallback, useRef } from "react";
+import { styled } from "@elliemae/ds-system";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
+import { usePropsStore } from "../../../config/useStore/index.js";
+import { StyledA11yNoVisible } from "../../../styles.js";
+const StyleAriaLiveRegion = styled(StyledA11yNoVisible, {
+  name: DSShuttleV2Name,
+  slot: DSShuttleV2Slots.ARIA_LIVE_PANEL_CENTER
+})``;
+const AriaLivePanelCenter = (panelMetaInfo) => {
+  const { isDestinationPanel = false } = panelMetaInfo;
+  const isLoading = usePropsStore((state) => isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading);
+  const filterValue = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue
+  );
+  const itemsLength = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationData.length : state.sourceData.length
+  );
+  const showEmptyMessage = !isLoading && itemsLength === 0;
+  const noOptionsMessage = usePropsStore(
+    (state) => panelMetaInfo.isDestinationPanel ? state.destinationNoOptionsMessage : state.sourceNoOptionsMessage
+  );
+  const selectionLength = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length
+  );
+  const lastFilterValueRef = useRef(filterValue);
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  React2.useEffect(() => {
+    lastFilterValueRef.current = filterValue;
+  }, [filterValue]);
+  const messageA11y = useMemo(() => {
+    if (showEmptyMessage && selectionLength === 0) {
+      return noOptionsMessage;
+    }
+    if (selectionLength > 0) {
+      return `${selectionLength} item${selectionLength === 1 ? "" : "s"} selected.`;
+    }
+    if (filterValue || lastFilterValueRef.current !== "" && filterValue === "") {
+      return `${itemsLength} items available.`;
+    }
+    return "";
+  }, [filterValue, itemsLength, noOptionsMessage, selectionLength, showEmptyMessage]);
+  return /* @__PURE__ */ jsx(
+    StyleAriaLiveRegion,
+    {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: messageA11y
+    }
+  );
+};
+export {
+  AriaLivePanelCenter
+};
+//# sourceMappingURL=AriaLivePanelCenter.js.map

package/dist/esm/parts/Panel/top/AriaLivePanelCenter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/AriaLivePanelCenter.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useCallback, useRef } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { StyledA11yNoVisible } from '../../../styles.js';\n\nconst StyleAriaLiveRegion = styled(StyledA11yNoVisible, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ARIA_LIVE_PANEL_CENTER,\n})``;\n\n// This component is kept separate from SelectionHeader to keep concerns isolated.\n// Having multiple aria-live regions in the Shuttle (e.g., when selecting all items\n// and moving them across panels) may cause overlapping announcements.\n// Separating this region prevents conflicts between messages like\n// \u201Cx items selected\u201D and \u201Cno items available\u201D.\n\nexport const AriaLivePanelCenter = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n\n  const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n\n  const filterValue = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n  );\n\n  const itemsLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n  );\n  const showEmptyMessage = !isLoading && itemsLength === 0;\n\n  const noOptionsMessage = usePropsStore((state) =>\n    panelMetaInfo.isDestinationPanel ? state.destinationNoOptionsMessage : state.sourceNoOptionsMessage,\n  );\n\n  const selectionLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length,\n  );\n\n  const lastFilterValueRef = useRef(filterValue);\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  React.useEffect(() => {\n    lastFilterValueRef.current = filterValue;\n  }, [filterValue]);\n\n  const messageA11y = useMemo(() => {\n    if (showEmptyMessage && selectionLength === 0) {\n      return noOptionsMessage;\n    }\n    if (selectionLength > 0) {\n      return `${selectionLength} item${selectionLength === 1 ? '' : 's'} selected.`;\n    }\n    if (filterValue || (lastFilterValueRef.current !== '' && filterValue === '')) {\n      return `${itemsLength} items available.`;\n    }\n    return '';\n  }, [filterValue, itemsLength, noOptionsMessage, selectionLength, showEmptyMessage]);\n\n  return (\n    <StyleAriaLiveRegion\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {messageA11y}\n    </StyleAriaLiveRegion>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+DnB;AA/DJ,OAAOA,UAAS,SAAS,aAAa,cAAc;AACpD,SAAS,cAAc;AACvB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,SAAS,2BAA2B;AAEpC,MAAM,sBAAsB,OAAO,qBAAqB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAQM,MAAM,sBAAsB,CAAC,kBAA8C;AAChF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AAEvC,QAAM,YAAY,cAAc,CAAC,UAAW,qBAAqB,MAAM,uBAAuB,MAAM,eAAgB;AAEpH,QAAM,cAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,cAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,gBAAgB,SAAS,MAAM,WAAW;AAAA,EACvE;AACA,QAAM,mBAAmB,CAAC,aAAa,gBAAgB;AAEvD,QAAM,mBAAmB;AAAA,IAAc,CAAC,UACtC,cAAc,qBAAqB,MAAM,8BAA8B,MAAM;AAAA,EAC/E;AAEA,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,8BAA8B,SAAS,MAAM,yBAAyB;AAAA,EACnG;AAEA,QAAM,qBAAqB,OAAO,WAAW;AAE7C,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,EAAAA,OAAM,UAAU,MAAM;AACpB,uBAAmB,UAAU;AAAA,EAC/B,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,oBAAoB,oBAAoB,GAAG;AAC7C,aAAO;AAAA,IACT;AACA,QAAI,kBAAkB,GAAG;AACvB,aAAO,GAAG,eAAe,QAAQ,oBAAoB,IAAI,KAAK,GAAG;AAAA,IACnE;AACA,QAAI,eAAgB,mBAAmB,YAAY,MAAM,gBAAgB,IAAK;AAC5E,aAAO,GAAG,WAAW;AAAA,IACvB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,aAAa,kBAAkB,iBAAiB,gBAAgB,CAAC;AAElF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/Panel/top/PanelContentTopSection.js

@@ -6,7 +6,7 @@ import { Grid } from "@elliemae/ds-grid";
 import { usePropsStore } from "../../../config/useStore/index.js";
 import { SelectionHeader } from "./SelectionHeader.js";
 import { PanelFilterSection } from "./PanelFilterSection.js";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
 const StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;
 const PanelContentTopSection = (panelMetaInfo) => {
   const getOwnerProps = usePropsStore((store) => store.get);

package/dist/esm/parts/Panel/top/PanelContentTopSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/PanelContentTopSection.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { SelectionHeader } from './SelectionHeader.js';\nimport { PanelFilterSection } from './PanelFilterSection.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;\n\nexport const PanelContentTopSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const isSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const topSectionRows = React.useMemo(() => {\n    const cols = [];\n    if (isSearchBarOpen) cols.push('auto');\n    cols.push('auto');\n    return cols;\n  }, [isSearchBarOpen]);\n  return (\n    <StyledListWrapperTop\n      rows={topSectionRows}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {isSearchBarOpen ? <PanelFilterSection {...panelMetaInfo} /> : null}\n      <SelectionHeader {...panelMetaInfo} />\n    </StyledListWrapperTop>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { SelectionHeader } from './SelectionHeader.js';\nimport { PanelFilterSection } from './PanelFilterSection.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\n\nconst StyledListWrapperTop = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER_TOP })``;\n\nexport const PanelContentTopSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const isSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const topSectionRows = React.useMemo(() => {\n    const cols = [];\n    if (isSearchBarOpen) cols.push('auto');\n    cols.push('auto');\n    return cols;\n  }, [isSearchBarOpen]);\n  return (\n    <StyledListWrapperTop\n      rows={topSectionRows}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {isSearchBarOpen ? <PanelFilterSection {...panelMetaInfo} /> : null}\n      <SelectionHeader {...panelMetaInfo} />\n    </StyledListWrapperTop>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;AC0BnB,SAKqB,KALrB;AA1BJ,OAAOA,UAAS,mBAAmB;AACnC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,uBAAuB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,iBAAiB,CAAC;AAErG,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,iBAAiBA,OAAM,QAAQ,MAAM;AACzC,UAAM,OAAO,CAAC;AACd,QAAI,gBAAiB,MAAK,KAAK,MAAM;AACrC,SAAK,KAAK,MAAM;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MAEC;AAAA,0BAAkB,oBAAC,sBAAoB,GAAG,eAAe,IAAK;AAAA,QAC/D,oBAAC,mBAAiB,GAAG,eAAe;AAAA;AAAA;AAAA,EACtC;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/top/PanelFilterSection.js

@@ -4,8 +4,8 @@ import React2, { useCallback } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { styled } from "@elliemae/ds-system";
 import { DSInputText } from "@elliemae/ds-form-input-text";
-import { usePropsStore } from "../../../config/useStore/index.js";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { usePropsStore, useInternalStore } from "../../../config/useStore/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots, SHUTTLE_IDS } from "../../../constants/index.js";
 const StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`
   border-bottom: 1px solid neutral-400;
   border-radius: 0;
@@ -19,6 +19,7 @@ const StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShu
 const PanelFilterSection = (panelMetaInfo) => {
   const getOwnerProps = usePropsStore((store) => store.get);
   const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  const shuttleId = useInternalStore((state) => state.shuttleInternalId);
   const areaSearchBarProps = usePropsStore((store) => store.areaSearchBarProps);
   const { isDestinationPanel = false } = panelMetaInfo;
   const onFilterCb = usePropsStore(
@@ -33,15 +34,16 @@ const PanelFilterSection = (panelMetaInfo) => {
     },
     [onFilterCb]
   );
+  const inputTextId = isDestinationPanel ? `${SHUTTLE_IDS.DESTINATION_PANEL_SEARCH}-${shuttleId}` : `${SHUTTLE_IDS.SOURCE_PANEL_SEARCH}-${shuttleId}`;
   return /* @__PURE__ */ jsx(StyledSearchWrapper, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(
     StyledInputText,
     {
+      id: inputTextId,
       value: filterValue,
       onValueChange: handleFilterChange,
       "aria-label": isDestinationPanel ? "Destination input search" : "Source input search",
       getOwnerProps,
       getOwnerPropsArguments,
-      autoFocus: true,
       ...areaSearchBarProps && areaSearchBarProps({ isDestinationPanel })
     }
   ) });

package/dist/esm/parts/Panel/top/PanelFilterSection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/PanelFilterSection.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`\n  border-bottom: 1px solid neutral-400;\n  border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_BAR })`\n  border: none;\n  :focus {\n    border-radius: 0;\n  }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n  const areaSearchBarProps = usePropsStore((store) => store.areaSearchBarProps);\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const onFilterCb = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n  );\n  const filterValue = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n  );\n  const handleFilterChange = React.useCallback(\n    (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n      onFilterCb?.(`${value}`, { event });\n    },\n    [onFilterCb],\n  );\n  return (\n    <StyledSearchWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      <StyledInputText\n        value={filterValue}\n        onValueChange={handleFilterChange}\n        aria-label={isDestinationPanel ? 'Destination input search' : 'Source input search'}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        autoFocus\n        {...(areaSearchBarProps && areaSearchBarProps({ isDestinationPanel }))}\n      />\n    </StyledSearchWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsCjB;AAtCN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAI9G,MAAM,kBAAkB,OAAO,aAAa,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtG,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAC/E,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,cAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,KAAK,IAAI,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,oBAAC,uBAAoB,eAA8B,wBACjD;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,cAAY,qBAAqB,6BAA6B;AAAA,MAC9D;AAAA,MACA;AAAA,MACA,WAAS;AAAA,MACR,GAAI,sBAAsB,mBAAmB,EAAE,mBAAmB,CAAC;AAAA;AAAA,EACtE,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore, useInternalStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots, SHUTTLE_IDS } from '../../../constants/index.js';\n\nconst StyledSearchWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_WRAPPER })`\n  border-bottom: 1px solid neutral-400;\n  border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.AREA_SEARCH_BAR })`\n  border: none;\n  :focus {\n    border-radius: 0;\n  }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n  const shuttleId = useInternalStore((state) => state.shuttleInternalId);\n  const areaSearchBarProps = usePropsStore((store) => store.areaSearchBarProps);\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const onFilterCb = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n  );\n  const filterValue = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n  );\n  const handleFilterChange = React.useCallback(\n    (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n      onFilterCb?.(`${value}`, { event });\n    },\n    [onFilterCb],\n  );\n\n  const inputTextId = isDestinationPanel\n    ? `${SHUTTLE_IDS.DESTINATION_PANEL_SEARCH}-${shuttleId}`\n    : `${SHUTTLE_IDS.SOURCE_PANEL_SEARCH}-${shuttleId}`;\n  return (\n    <StyledSearchWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      <StyledInputText\n        id={inputTextId}\n        value={filterValue}\n        onValueChange={handleFilterChange}\n        aria-label={isDestinationPanel ? 'Destination input search' : 'Source input search'}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        {...(areaSearchBarProps && areaSearchBarProps({ isDestinationPanel }))}\n      />\n    </StyledSearchWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2CjB;AA3CN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,eAAe,wBAAwB;AAEhD,SAAS,iBAAiB,kBAAkB,mBAAmB;AAE/D,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAI9G,MAAM,kBAAkB,OAAO,aAAa,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtG,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAC/E,QAAM,YAAY,iBAAiB,CAAC,UAAU,MAAM,iBAAiB;AACrE,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,aAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,cAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,KAAK,IAAI,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,cAAc,qBAChB,GAAG,YAAY,wBAAwB,IAAI,SAAS,KACpD,GAAG,YAAY,mBAAmB,IAAI,SAAS;AACnD,SACE,oBAAC,uBAAoB,eAA8B,wBACjD;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,eAAe;AAAA,MACf,cAAY,qBAAqB,6BAA6B;AAAA,MAC9D;AAAA,MACA;AAAA,MACC,GAAI,sBAAsB,mBAAmB,EAAE,mBAAmB,CAAC;AAAA;AAAA,EACtE,GACF;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Panel/top/SelectionHeader.js

@@ -5,7 +5,8 @@ import { styled } from "@elliemae/ds-system";
 import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
 import { Grid } from "@elliemae/ds-grid";
 import { usePropsStore } from "../../../config/useStore/index.js";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../../constants/index.js";
+import { AriaLivePanelCenter } from "./AriaLivePanelCenter.js";
 const StyledSelectionHeaderWrapper = styled(Grid, {
   name: DSShuttleV2Name,
   slot: DSShuttleV2Slots.AREA_SELECTION_HEADER
@@ -91,6 +92,7 @@ const SelectionHeader = React2.memo((panelMetaInfo) => {
             ...checkboxSelectAllProps && checkboxSelectAllProps({ isDestinationPanel, hasMultipleSelection: selectionLength > 1 })
           }
         ) }),
+        /* @__PURE__ */ jsx(AriaLivePanelCenter, { ...panelMetaInfo }),
         /* @__PURE__ */ jsxs(StyledSelectionHeaderCountLabel, { getOwnerProps, getOwnerPropsArguments, children: [
           selectionLength,
           " selected"

package/dist/esm/parts/Panel/top/SelectionHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/top/SelectionHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSControlledCheckbox, type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions.js';\n\nconst StyledSelectionHeaderWrapper = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER,\n})`\n  line-height: 1;\n  font-size: 1rem;\n  background-color: neutral-000;\n  border-bottom: 1px solid neutral-400;\n`;\nconst StyledSelectionHeaderCountLabel = styled('div', {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER_COUNT_LABEL,\n})`\n  text-align: end;\n  color: neutral-500;\n  font-weight: 600;\n`;\n\nconst StyledCheckbox = styled(DSControlledCheckbox)``;\n\nconst wrapperCols = ['auto', '1fr'];\nexport const SelectionHeader = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const selectionableItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableData : state.sourceSelectionableData,\n  );\n  const ids = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableIds : state.sourceSelectionableIds,\n  );\n\n  const checkboxSelectAllProps = usePropsStore((state) => state.checkboxSelectAllProps);\n\n  const ariaControls = useMemo(\n    () =>\n      ids.length === 0\n        ? ''\n        : ids\n            .split(' ')\n            .map((d) => `${d}-wrapper`)\n            .join(' '),\n    [ids],\n  );\n\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const selectionLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length,\n  );\n  const checkboxValue = React.useMemo(() => {\n    let newVal: boolean | 'mixed' = false;\n    if (selectionLength > 0)\n      if (selectionLength === selectionableItems.length) newVal = true;\n      else newVal = 'mixed';\n    return newVal;\n  }, [selectionableItems.length, selectionLength]);\n\n  const handleSelectAll = React.useCallback<DSControlledCheckboxT.InternalProps['onChange']>(\n    (_, event) => {\n      if (checkboxValue === true) {\n        onSelectionChange({}, { event });\n      } else {\n        const newSelection: DSShuttleV2T.InternalProps<object, object, object, object>['sourceSelectedItems'] = {};\n        selectionableItems.forEach((selectableItem) => {\n          newSelection[selectableItem.hydratedId] = true;\n        });\n        onSelectionChange(newSelection, { event });\n      }\n    },\n    [checkboxValue, onSelectionChange, selectionableItems],\n  );\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledSelectionHeaderWrapper\n      cols={wrapperCols}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      py=\"7px\"\n      px=\"xxs2\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <Grid justifyContent=\"center\" alignItems=\"center\">\n        <StyledCheckbox\n          checked={checkboxValue}\n          aria-label={`${checkboxValue === true ? 'Deselect' : 'Select'} all ${\n            isDestinationPanel ? 'destination' : 'source'\n          } items`}\n          onChange={handleSelectAll}\n          aria-controls={ariaControls}\n          // need to overwrite this becasue the default aria-labelledby is not working for axe-core\n          aria-labelledby=\"\"\n          disabled={selectionableItems.length === 0}\n          aria-disabled={selectionableItems.length === 0}\n          {...(checkboxSelectAllProps &&\n            checkboxSelectAllProps({ isDestinationPanel, hasMultipleSelection: selectionLength > 1 }))}\n        />\n      </Grid>\n      <StyledSelectionHeaderCountLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {selectionLength} selected\n      </StyledSelectionHeaderCountLabel>\n    </StyledSelectionHeaderWrapper>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSControlledCheckbox, type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore } from '../../../config/useStore/index.js';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../constants/index.js';\nimport { AriaLivePanelCenter } from './AriaLivePanelCenter.js';\n\nconst StyledSelectionHeaderWrapper = styled(Grid, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER,\n})`\n  line-height: 1;\n  font-size: 1rem;\n  background-color: neutral-000;\n  border-bottom: 1px solid neutral-400;\n`;\nconst StyledSelectionHeaderCountLabel = styled('div', {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.AREA_SELECTION_HEADER_COUNT_LABEL,\n})`\n  text-align: end;\n  color: neutral-500;\n  font-weight: 600;\n`;\n\nconst StyledCheckbox = styled(DSControlledCheckbox)``;\n\nconst wrapperCols = ['auto', '1fr'];\nexport const SelectionHeader = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  const selectionableItems = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableData : state.sourceSelectionableData,\n  );\n  const ids = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionableIds : state.sourceSelectionableIds,\n  );\n\n  const checkboxSelectAllProps = usePropsStore((state) => state.checkboxSelectAllProps);\n\n  const ariaControls = useMemo(\n    () =>\n      ids.length === 0\n        ? ''\n        : ids\n            .split(' ')\n            .map((d) => `${d}-wrapper`)\n            .join(' '),\n    [ids],\n  );\n\n  const onSelectionChange = usePropsStore((state) =>\n    isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n  );\n  const selectionLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length,\n  );\n  const checkboxValue = React.useMemo(() => {\n    let newVal: boolean | 'mixed' = false;\n    if (selectionLength > 0)\n      if (selectionLength === selectionableItems.length) newVal = true;\n      else newVal = 'mixed';\n    return newVal;\n  }, [selectionableItems.length, selectionLength]);\n\n  const handleSelectAll = React.useCallback<DSControlledCheckboxT.InternalProps['onChange']>(\n    (_, event) => {\n      if (checkboxValue === true) {\n        onSelectionChange({}, { event });\n      } else {\n        const newSelection: DSShuttleV2T.InternalProps<object, object, object, object>['sourceSelectedItems'] = {};\n        selectionableItems.forEach((selectableItem) => {\n          newSelection[selectableItem.hydratedId] = true;\n        });\n        onSelectionChange(newSelection, { event });\n      }\n    },\n    [checkboxValue, onSelectionChange, selectionableItems],\n  );\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <StyledSelectionHeaderWrapper\n      cols={wrapperCols}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      py=\"7px\"\n      px=\"xxs2\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <Grid justifyContent=\"center\" alignItems=\"center\">\n        <StyledCheckbox\n          checked={checkboxValue}\n          aria-label={`${checkboxValue === true ? 'Deselect' : 'Select'} all ${\n            isDestinationPanel ? 'destination' : 'source'\n          } items`}\n          onChange={handleSelectAll}\n          aria-controls={ariaControls}\n          // need to overwrite this becasue the default aria-labelledby is not working for axe-core\n          aria-labelledby=\"\"\n          disabled={selectionableItems.length === 0}\n          aria-disabled={selectionableItems.length === 0}\n          {...(checkboxSelectAllProps &&\n            checkboxSelectAllProps({ isDestinationPanel, hasMultipleSelection: selectionLength > 1 }))}\n        />\n      </Grid>\n      <AriaLivePanelCenter {...panelMetaInfo} />\n      <StyledSelectionHeaderCountLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {selectionLength} selected\n      </StyledSelectionHeaderCountLabel>\n    </StyledSelectionHeaderWrapper>\n  );\n});\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/PanelWrapper.js

@@ -7,7 +7,7 @@ import { Header } from "./Header.js";
 import { PanelContentTopSection } from "./Panel/top/PanelContentTopSection.js";
 import { PanelContentMiddleSection } from "./Panel/middle/PanelContentMiddleSection.js";
 import { PanelContentBottomSection } from "./Panel/bottom/PanelContentBottomSection.js";
-import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../constants/index.js";
 import { usePropsStore } from "../config/useStore/useStore.js";
 const StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`
   min-width: 300px;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PanelWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../react-desc-prop-types.js';\nimport { Header } from './Header.js';\nimport { PanelContentTopSection } from './Panel/top/PanelContentTopSection.js';\nimport { PanelContentMiddleSection } from './Panel/middle/PanelContentMiddleSection.js';\nimport { PanelContentBottomSection } from './Panel/bottom/PanelContentBottomSection.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../config/useStore/useStore.js';\n\nconst StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`\n  min-width: 300px;\n`;\nconst StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`\n  border: 1px solid neutral-400;\n  height: 100%;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\n\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n  return (\n    <StyledPanelWrapper\n      rows={panelWrapperRows}\n      gutter=\"xxxs\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <Header {...panelMetaInfo} />\n      <StyledListWrapper\n        rows={listWrapperRows}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <PanelContentTopSection {...panelMetaInfo} />\n        <PanelContentMiddleSection {...panelMetaInfo} />\n        <PanelContentBottomSection {...panelMetaInfo} />\n      </StyledListWrapper>\n    </StyledPanelWrapper>\n  );\n});\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../react-desc-prop-types.js';\nimport { Header } from './Header.js';\nimport { PanelContentTopSection } from './Panel/top/PanelContentTopSection.js';\nimport { PanelContentMiddleSection } from './Panel/middle/PanelContentMiddleSection.js';\nimport { PanelContentBottomSection } from './Panel/bottom/PanelContentBottomSection.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../constants/index.js';\nimport { usePropsStore } from '../config/useStore/useStore.js';\n\nconst StyledPanelWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.PANEL_WRAPPER })`\n  min-width: 300px;\n`;\nconst StyledListWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.LIST_WRAPPER })`\n  border: 1px solid neutral-400;\n  height: 100%;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\n\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n  return (\n    <StyledPanelWrapper\n      rows={panelWrapperRows}\n      gutter=\"xxxs\"\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <Header {...panelMetaInfo} />\n      <StyledListWrapper\n        rows={listWrapperRows}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <PanelContentTopSection {...panelMetaInfo} />\n        <PanelContentMiddleSection {...panelMetaInfo} />\n        <PanelContentBottomSection {...panelMetaInfo} />\n      </StyledListWrapper>\n    </StyledPanelWrapper>\n  );\n});\n"],
   "mappings": "AAAA,YAAY,WAAW;AC+BjB,cACA,YADA;AA/BN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,cAAc;AACvB,SAAS,8BAA8B;AACvC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,cAAc,CAAC;AAAA;AAAA;AAGvG,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAIrG,MAAM,mBAAmB,CAAC,QAAQ,KAAK;AACvC,MAAM,kBAAkB,CAAC,QAAQ,OAAO,MAAM;AAEvC,MAAM,eAAeA,OAAM,KAAK,CAAC,kBAA8C;AACpF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,UAAQ,GAAG,eAAe;AAAA,QAC3B;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YAEA;AAAA,kCAAC,0BAAwB,GAAG,eAAe;AAAA,cAC3C,oBAAC,6BAA2B,GAAG,eAAe;AAAA,cAC9C,oBAAC,6BAA2B,GAAG,eAAe;AAAA;AAAA;AAAA,QAChD;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/react-desc-prop-types.js

@@ -6,7 +6,7 @@ import {
   globalAttributesPropTypes,
   xstyledPropTypes
 } from "@elliemae/ds-props-helpers";
-import { DSShuttleV2DataTestIds, DSShuttleV2Name, DSShuttleV2Slots } from "./config/DSShuttleV2Definitions.js";
+import { DSShuttleV2DataTestIds, DSShuttleV2Name, DSShuttleV2Slots } from "./constants/index.js";
 const defaultProps = {
   addDragAndDropFromSource: false,
   removeDragAndDropFromDestination: false,