@elliemae/ds-shuttle-v2 3.70.0-next.4 → 3.70.0-next.40

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"]
+}

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
@@ -10,6 +10,7 @@ import { useHandleMoveSelection } from "../../../config/itemMovementHelpers.js";
 import { useInternalStore, usePropsStore } from "../../../config/useStore/index.js";
 import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
 import { DSShuttleV2Name, DSShuttleV2Slots, REGIONS_FOCUSES } from "../../../constants/index.js";
+import { StyledA11yNoVisible } from "../../../styles.js";
 const StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
   position: absolute;
   background-color: neutral-000;
@@ -51,6 +52,10 @@ const StyledArrowShortRightIcon = styled(ArrowShortRight, {
     fill: brand-600;
   }
 `;
+const StyledMoveMultipleLiveRegion = styled(StyledA11yNoVisible, {
+  name: DSShuttleV2Name,
+  slot: DSShuttleV2Slots.MOVE_MULTIPLE_LIVE_REGION
+})``;
 const gridFullFraction = ["1fr"];
 const MultipleSelectionAction = React2.memo((panelMeta) => {
   const { isDestinationPanel } = panelMeta;
@@ -65,11 +70,16 @@ const MultipleSelectionAction = React2.memo((panelMeta) => {
     },
     [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
   );
+  const [isMoveAllFocused, setIsMoveAllFocused] = React2.useState(false);
   const handleMoveAllBtnFocus = React2.useCallback(() => {
     trackFocusItemReset();
     trackFocusActionReset();
     trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
+    setIsMoveAllFocused(true);
   }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);
+  const handleMoveAllBtnBlur = React2.useCallback(() => {
+    setIsMoveAllFocused(false);
+  }, []);
   const setZustandRef = useInternalStore((state) => state.setZustandRef);
   const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;
   const innerRefHandlerMoveAll = React2.useCallback(
@@ -89,6 +99,10 @@ const MultipleSelectionAction = React2.memo((panelMeta) => {
     },
     [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel]
   );
+  const selectionLength = usePropsStore(
+    (state) => isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length
+  );
+  const moveAllAriaLabel = `Move ${selectionLength} selected item${selectionLength === 1 ? "" : "s"} to ${isDestinationPanel ? "source" : "destination"}`;
   const getBatchActionableButtonProps = usePropsStore((state) => state.getBatchActionableButtonProps);
   const batchActionableButtonProps = React2.useMemo(
     () => getBatchActionableButtonProps !== void 0 ? getBatchActionableButtonProps(panelMeta) : {},
@@ -98,14 +112,19 @@ const MultipleSelectionAction = React2.memo((panelMeta) => {
     () => ({
       onClick: handleMoveAllAction,
       onFocus: handleMoveAllBtnFocus,
+      onBlur: handleMoveAllBtnBlur,
       onKeyDown: handleMoveAllKeyDown
     }),
-    [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown]
+    [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllBtnBlur, handleMoveAllKeyDown]
   );
   const spreadableButtonProps = useGetGlobalAttributes(batchActionableButtonProps, buttonActions);
   const getOwnerProps = usePropsStore((store) => store.get);
   const getOwnerPropsArguments = React2.useCallback(() => panelMeta, [panelMeta]);
-  return /* @__PURE__ */ jsx(
+  const getOwnerPropsArgumentsIcons = React2.useCallback(
+    () => ({ panelMetaInfo: panelMeta }),
+    [panelMeta]
+  );
+  return /* @__PURE__ */ jsxs(
     StyledMoveMultipleWrapper,
     {
       boxShadow: "xs",
@@ -115,37 +134,50 @@ const MultipleSelectionAction = React2.memo((panelMeta) => {
       rows: gridFullFraction,
       getOwnerProps,
       getOwnerPropsArguments,
-      children: /* @__PURE__ */ jsx(
-        StyledButton,
-        {
-          "aria-label": "massive action button",
-          buttonType: "icon",
-          onClick: handleMoveAllAction,
-          onFocus: handleMoveAllBtnFocus,
-          onKeyDown: handleMoveAllKeyDown,
-          innerRef: innerRefHandlerMoveAll,
-          ...spreadableButtonProps,
-          getOwnerProps,
-          getOwnerPropsArguments,
-          children: isDestinationPanel ? /* @__PURE__ */ jsx(
-            StyledCloseMediumIcon,
-            {
-              width: "1.538rem",
-              height: "1.538rem",
-              getOwnerProps,
-              getOwnerPropsArguments
-            }
-          ) : /* @__PURE__ */ jsx(
-            StyledArrowShortRightIcon,
-            {
-              width: "1.538",
-              height: "1.538rem",
-              getOwnerProps,
-              getOwnerPropsArguments
-            }
-          )
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledButton,
+          {
+            "aria-label": moveAllAriaLabel,
+            buttonType: "icon",
+            onClick: handleMoveAllAction,
+            onFocus: handleMoveAllBtnFocus,
+            onBlur: handleMoveAllBtnBlur,
+            onKeyDown: handleMoveAllKeyDown,
+            innerRef: innerRefHandlerMoveAll,
+            ...spreadableButtonProps,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: isDestinationPanel ? /* @__PURE__ */ jsx(
+              StyledCloseMediumIcon,
+              {
+                width: "1.538rem",
+                height: "1.538rem",
+                getOwnerProps,
+                getOwnerPropsArguments: getOwnerPropsArgumentsIcons
+              }
+            ) : /* @__PURE__ */ jsx(
+              StyledArrowShortRightIcon,
+              {
+                width: "1.538",
+                height: "1.538rem",
+                getOwnerProps,
+                getOwnerPropsArguments: getOwnerPropsArgumentsIcons
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledMoveMultipleLiveRegion,
+          {
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: isMoveAllFocused ? moveAllAriaLabel : ""
+          }
+        )
+      ]
     }
   );
 });

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 { 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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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport 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';\nimport { StyledA11yNoVisible } from '../../../styles.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 StyledMoveMultipleLiveRegion = styled(StyledA11yNoVisible, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.MOVE_MULTIPLE_LIVE_REGION,\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  // PUI-15537 \u2014 drives the focus-time live announcement (see the live-region note below).\n  const [isMoveAllFocused, setIsMoveAllFocused] = React.useState(false);\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n    setIsMoveAllFocused(true);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n  const handleMoveAllBtnBlur: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    setIsMoveAllFocused(false);\n  }, []);\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  // PUI-15537 \u2014 Bulk Action Button (BAB) selection announcement.\n  // Two complementary mechanisms, because an aria-label alone proved unreliable on focus:\n  //   1. aria-label \u2014 gives the button a meaningful accessible name (replacing the old static,\n  //      meaningless \"massive action button\"). Correct for assistive tech that reads the name on\n  //      focus, and what consumers see when they inspect the button.\n  //   2. Focus-time polite live region (StyledMoveMultipleLiveRegion below) \u2014 the BAB is focused via\n  //      the component's roving-tabindex system rather than a native Tab, and an aria-label on an\n  //      icon-only button (its only content is aria-hidden) is not announced reliably across screen\n  //      readers in that scenario. To guarantee the count is spoken when focus lands on the BAB, we\n  //      also push the same text into a polite live region while the button is focused. This is\n  //      announced as live content, independent of whether the AT re-reads the aria-label.\n  // Both derive from the same selection-count selector the visible \"{n} selected\" header and the\n  // panel-center live region already use, so the spoken count stays in sync with the UI. A\n  // consumer-provided aria-label via getBatchActionableButtonProps still wins because\n  // spreadableButtonProps is spread after the aria-label prop.\n  const selectionLength = usePropsStore((state) =>\n    isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length,\n  );\n  const moveAllAriaLabel = `Move ${selectionLength} selected item${selectionLength === 1 ? '' : 's'} to ${\n    isDestinationPanel ? 'source' : 'destination'\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      onBlur: handleMoveAllBtnBlur,\n      onKeyDown: handleMoveAllKeyDown,\n    }),\n    [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllBtnBlur, 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  // The to-source / to-destination icon slots share a unified argument shape with the item-action\n  // row (see ItemActions). In the bulk-action context there is no single item, so extraMetaInfo is omitted.\n  const getOwnerPropsArgumentsIcons = React.useCallback(\n    (): DSShuttleV2T.ItemActionIconArguments => ({ panelMetaInfo: panelMeta }),\n    [panelMeta],\n  );\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={moveAllAriaLabel}\n        buttonType=\"icon\"\n        onClick={handleMoveAllAction}\n        onFocus={handleMoveAllBtnFocus}\n        onBlur={handleMoveAllBtnBlur}\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={getOwnerPropsArgumentsIcons}\n          />\n        ) : (\n          <StyledArrowShortRightIcon\n            width=\"1.538\"\n            height=\"1.538rem\"\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArgumentsIcons}\n          />\n        )}\n      </StyledButton>\n      {/* PUI-15537 \u2014 announced as polite live content when the BAB gains focus, so the count is\n          spoken even when the aria-label is not re-read on this button. Empty while unfocused. */}\n      <StyledMoveMultipleLiveRegion\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {isMoveAllFocused ? moveAllAriaLabel : ''}\n      </StyledMoveMultipleLiveRegion>\n    </StyledMoveMultipleWrapper>\n  );\n});\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -13,7 +13,7 @@ import { MultipleSelectionAction } from "./MultipleSelectionAction.js";
 import { DSShuttleV2Name, REGIONS_FOCUSES, DSShuttleV2Slots } from "../../../constants/index.js";
 import { StyledA11yNoVisible } from "../../../styles.js";
 import { ShuttleLoadingAnnouncement } from "./ShuttleLoadingAnnouncement.js";
-const useInnerRefHandlers = (isDestinationPanel) => {
+const useMiddleSectionInnerRefHandlers = (isDestinationPanel) => {
   const setZustandRef = useInternalStore((state) => state.setZustandRef);
   const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;
   const innerRefHandlerParentItem = React2.useCallback(
@@ -54,7 +54,7 @@ const PanelContentMiddleSection = React2.memo((panelMetaInfo) => {
   const withLoadMore = usePropsStore(
     (state) => isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore
   );
-  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);
+  const { innerRefHandlerParentItem } = useMiddleSectionInnerRefHandlers(isDestinationPanel);
   const {
     trackFocusRegionPanel,
     trackFocusItemFirst,