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

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

@@ -0,0 +1,73 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useItemInnerRefHandlers_exports = {};
+__export(useItemInnerRefHandlers_exports, {
+  useItemInnerRefHandlers: () => useItemInnerRefHandlers
+});
+module.exports = __toCommonJS(useItemInnerRefHandlers_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_useStore = require("../../config/useStore/index.js");
+var import_constants = require("../../constants/index.js");
+var import_useThisItemIsFocused = require("./useThisItemIsFocused.js");
+const useItemInnerRefHandlers = (itemMeta) => {
+  const { datumInternalMeta, isDestinationPanel } = itemMeta;
+  const { hydratedId } = datumInternalMeta;
+  const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
+  const setDeferFocusUntilFirstRender = (0, import_useStore.useInternalStore)((state) => state.setDeferFocusUntilFirstRender);
+  const deferedAfterFirstRender = (0, import_useStore.useInternalStore)((state) => state.getDeferFocusUntilFirstRender());
+  const isLoadingMore = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.destinationIsLoadingMore : state.sourceIsLoadingMore
+  );
+  const thisItemIsFocused = (0, import_useThisItemIsFocused.useThisItemIsFocused)(itemMeta);
+  const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
+  const currItemId = hydratedId;
+  const innerRefHandlerParentItem = import_react.default.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]
+  );
+  (0, import_react.useEffect)(
+    () => () => {
+      if (isLoadingMore) setDeferFocusUntilFirstRender(true);
+    },
+    [isLoadingMore, setDeferFocusUntilFirstRender]
+  );
+  return import_react.default.useMemo(
+    () => ({ innerRefHandlerParentItem, thisItemIsFocused }),
+    [innerRefHandlerParentItem, thisItemIsFocused]
+  );
+};
+//# sourceMappingURL=useItemInnerRefHandlers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Item/useItemInnerRefHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiC;AACjC,sBAAgD;AAChD,uBAAgC;AAEhC,kCAAqC;AAE9B,MAAM,0BAA0B,CAAC,aAAoC;AAC1E,QAAM,EAAE,mBAAmB,mBAAmB,IAAI;AAClD,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,oBAAgB,kCAAiB,CAAC,UAAU,MAAM,aAAa;AAErE,QAAM,oCAAgC,kCAAiB,CAAC,UAAU,MAAM,6BAA6B;AACrG,QAAM,8BAA0B,kCAAiB,CAAC,UAAU,MAAM,8BAA8B,CAAC;AACjG,QAAM,oBAAgB;AAAA,IAAc,CAAC,UACnC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AAEA,QAAM,wBAAoB,kDAAqB,QAAQ;AAEvD,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa;AAEnB,QAAM,4BAA4B,aAAAA,QAAM;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,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,2BAA2B,kBAAkB;AAAA,IACtD,CAAC,2BAA2B,iBAAiB;AAAA,EAC/C;AACF;",
+  "names": ["React"]
+}

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

@@ -37,7 +37,7 @@ var import_react = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_useStore = require("../../../config/useStore/index.js");
-var import_useInnerRefHandlers = require("./useInnerRefHandlers.js");
+var import_useLoadMoreBtnInnerRefHandlers = require("./useLoadMoreBtnInnerRefHandlers.js");
 var import_useFocusTracker = require("../../../config/useFocusTracker/index.js");
 var import_constants = require("../../../constants/index.js");
 const StyledLoadMoreBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
@@ -86,7 +86,7 @@ const LoadMoreBtn = (panelMetaInfo) => {
       trackFocusRegionPanelItem
     ]
   );
-  const { innerRefHandlerLoadMoreBtn } = (0, import_useInnerRefHandlers.useInnerRefHandlers)(panelMetaInfo);
+  const { innerRefHandlerLoadMoreBtn } = (0, import_useLoadMoreBtnInnerRefHandlers.useLoadMoreBtnInnerRefHandlers)(panelMetaInfo);
   const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
   const getOwnerPropsArguments = import_react.default.useCallback(() => panelMetaInfo, [panelMetaInfo]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/bottom/LoadMoreBtn.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DnB;AA7DJ,mBAAkB;AAClB,uBAAuB;AACvB,0BAAyD;AACzD,sBAA8B;AAE9B,iCAAoC;AACpC,6BAAgC;AAChC,uBAAkD;AAElD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,kCAAiB;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,QAAI,wCAAgB;AACpB,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgB,aAAAA,QAAM;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,QAAI,gDAAoB,aAAa;AACxE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,iCAAa;AAAA,MACnB,UAAU;AAAA,MAEV,cAAY,qBAAqB,yCAAyC;AAAA,MAC1E;AAAA,MACA;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DnB;AA7DJ,mBAAkB;AAClB,uBAAuB;AACvB,0BAAyD;AACzD,sBAA8B;AAE9B,4CAA+C;AAC/C,6BAAgC;AAChC,uBAAkD;AAElD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,kCAAiB;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,QAAI,wCAAgB;AACpB,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AACA,QAAM,gBAAgB,aAAAA,QAAM;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,QAAI,sEAA+B,aAAa;AACnF,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,iCAAa;AAAA,MACnB,UAAU;AAAA,MAEV,cAAY,qBAAqB,yCAAyC;AAAA,MAC1E;AAAA,MACA;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;",
   "names": ["React"]
 }

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

@@ -26,16 +26,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useInnerRefHandlers_exports = {};
-__export(useInnerRefHandlers_exports, {
-  useInnerRefHandlers: () => useInnerRefHandlers
+var useLoadMoreBtnInnerRefHandlers_exports = {};
+__export(useLoadMoreBtnInnerRefHandlers_exports, {
+  useLoadMoreBtnInnerRefHandlers: () => useLoadMoreBtnInnerRefHandlers
 });
-module.exports = __toCommonJS(useInnerRefHandlers_exports);
+module.exports = __toCommonJS(useLoadMoreBtnInnerRefHandlers_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_useStore = require("../../../config/useStore/index.js");
 var import_constants = require("../../../constants/index.js");
-const useInnerRefHandlers = ({ isDestinationPanel }) => {
+const useLoadMoreBtnInnerRefHandlers = ({ isDestinationPanel }) => {
   const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
   const innerRefHandlerLoadMoreBtn = import_react.default.useCallback(
     (node) => {
@@ -48,4 +48,4 @@ const useInnerRefHandlers = ({ isDestinationPanel }) => {
   );
   return import_react.default.useMemo(() => ({ innerRefHandlerLoadMoreBtn }), [innerRefHandlerLoadMoreBtn]);
 };
-//# sourceMappingURL=useInnerRefHandlers.js.map
+//# sourceMappingURL=useLoadMoreBtnInnerRefHandlers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/Panel/bottom/useLoadMoreBtnInnerRefHandlers.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,sBAAiC;AAEjC,uBAA8B;AAEvB,MAAM,iCAAiC,CAAC,EAAE,mBAAmB,MAAkC;AACpG,QAAM,oBAAgB,kCAAiB,CAAC,UAAU,MAAM,aAAa;AAErE,QAAM,6BAA6B,aAAAA,QAAM;AAAA,IACvC,CAAC,SAA4B;AAC3B;AAAA,QACE,CAAC,qBAAqB,+BAAc,4BAA4B,+BAAc,oBAAoB;AAAA,QAClG;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,oBAAoB,aAAa;AAAA,EACpC;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,2BAA2B,IAAI,CAAC,0BAA0B,CAAC;AAC3F;",
+  "names": ["React"]
+}

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

@@ -43,6 +43,7 @@ var import_itemMovementHelpers = require("../../../config/itemMovementHelpers.js
 var import_useStore = require("../../../config/useStore/index.js");
 var import_useFocusTracker = require("../../../config/useFocusTracker/index.js");
 var import_constants = require("../../../constants/index.js");
+var import_styles = require("../../../styles.js");
 const StyledMoveMultipleWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
   position: absolute;
   background-color: neutral-000;
@@ -84,6 +85,10 @@ const StyledArrowShortRightIcon = (0, import_ds_system.styled)(import_ds_icons.A
     fill: brand-600;
   }
 `;
+const StyledMoveMultipleLiveRegion = (0, import_ds_system.styled)(import_styles.StyledA11yNoVisible, {
+  name: import_constants.DSShuttleV2Name,
+  slot: import_constants.DSShuttleV2Slots.MOVE_MULTIPLE_LIVE_REGION
+})``;
 const gridFullFraction = ["1fr"];
 const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
   const { isDestinationPanel } = panelMeta;
@@ -98,11 +103,16 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
     },
     [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
   );
+  const [isMoveAllFocused, setIsMoveAllFocused] = import_react.default.useState(false);
   const handleMoveAllBtnFocus = import_react.default.useCallback(() => {
     trackFocusItemReset();
     trackFocusActionReset();
     trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
+    setIsMoveAllFocused(true);
   }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);
+  const handleMoveAllBtnBlur = import_react.default.useCallback(() => {
+    setIsMoveAllFocused(false);
+  }, []);
   const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
   const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;
   const innerRefHandlerMoveAll = import_react.default.useCallback(
@@ -122,6 +132,10 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
     },
     [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel]
   );
+  const selectionLength = (0, import_useStore.usePropsStore)(
+    (state) => isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length
+  );
+  const moveAllAriaLabel = `Move ${selectionLength} selected item${selectionLength === 1 ? "" : "s"} to ${isDestinationPanel ? "source" : "destination"}`;
   const getBatchActionableButtonProps = (0, import_useStore.usePropsStore)((state) => state.getBatchActionableButtonProps);
   const batchActionableButtonProps = import_react.default.useMemo(
     () => getBatchActionableButtonProps !== void 0 ? getBatchActionableButtonProps(panelMeta) : {},
@@ -131,14 +145,19 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
     () => ({
       onClick: handleMoveAllAction,
       onFocus: handleMoveAllBtnFocus,
+      onBlur: handleMoveAllBtnBlur,
       onKeyDown: handleMoveAllKeyDown
     }),
-    [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown]
+    [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllBtnBlur, handleMoveAllKeyDown]
   );
   const spreadableButtonProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(batchActionableButtonProps, buttonActions);
   const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
   const getOwnerPropsArguments = import_react.default.useCallback(() => panelMeta, [panelMeta]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const getOwnerPropsArgumentsIcons = import_react.default.useCallback(
+    () => ({ panelMetaInfo: panelMeta }),
+    [panelMeta]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     StyledMoveMultipleWrapper,
     {
       boxShadow: "xs",
@@ -148,37 +167,50 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
       rows: gridFullFraction,
       getOwnerProps,
       getOwnerPropsArguments,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        StyledButton,
-        {
-          "aria-label": "massive action button",
-          buttonType: "icon",
-          onClick: handleMoveAllAction,
-          onFocus: handleMoveAllBtnFocus,
-          onKeyDown: handleMoveAllKeyDown,
-          innerRef: innerRefHandlerMoveAll,
-          ...spreadableButtonProps,
-          getOwnerProps,
-          getOwnerPropsArguments,
-          children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            StyledCloseMediumIcon,
-            {
-              width: "1.538rem",
-              height: "1.538rem",
-              getOwnerProps,
-              getOwnerPropsArguments
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            StyledArrowShortRightIcon,
-            {
-              width: "1.538",
-              height: "1.538rem",
-              getOwnerProps,
-              getOwnerPropsArguments
-            }
-          )
-        }
-      )
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          StyledButton,
+          {
+            "aria-label": moveAllAriaLabel,
+            buttonType: "icon",
+            onClick: handleMoveAllAction,
+            onFocus: handleMoveAllBtnFocus,
+            onBlur: handleMoveAllBtnBlur,
+            onKeyDown: handleMoveAllKeyDown,
+            innerRef: innerRefHandlerMoveAll,
+            ...spreadableButtonProps,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              StyledCloseMediumIcon,
+              {
+                width: "1.538rem",
+                height: "1.538rem",
+                getOwnerProps,
+                getOwnerPropsArguments: getOwnerPropsArgumentsIcons
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              StyledArrowShortRightIcon,
+              {
+                width: "1.538",
+                height: "1.538rem",
+                getOwnerProps,
+                getOwnerPropsArguments: getOwnerPropsArgumentsIcons
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          StyledMoveMultipleLiveRegion,
+          {
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: isMoveAllFocused ? moveAllAriaLabel : ""
+          }
+        )
+      ]
     }
   );
 });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/middle/MultipleSelectionAction.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -46,7 +46,7 @@ var import_MultipleSelectionAction = require("./MultipleSelectionAction.js");
 var import_constants = require("../../../constants/index.js");
 var import_styles = require("../../../styles.js");
 var import_ShuttleLoadingAnnouncement = require("./ShuttleLoadingAnnouncement.js");
-const useInnerRefHandlers = (isDestinationPanel) => {
+const useMiddleSectionInnerRefHandlers = (isDestinationPanel) => {
   const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
   const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL : import_constants.REGIONS_FOCUSES.SOURCE_PANEL;
   const innerRefHandlerParentItem = import_react.default.useCallback(
@@ -87,7 +87,7 @@ const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
   const withLoadMore = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore
   );
-  const { innerRefHandlerParentItem } = useInnerRefHandlers(isDestinationPanel);
+  const { innerRefHandlerParentItem } = useMiddleSectionInnerRefHandlers(isDestinationPanel);
   const {
     trackFocusRegionPanel,
     trackFocusItemFirst,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/middle/PanelContentMiddleSection.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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 useMiddleSectionInnerRefHandlers = (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 } = useMiddleSectionInnerRefHandlers(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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Panel/top/SelectionHeader.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["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['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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -36,6 +36,8 @@ var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_constants = require("./constants/index.js");
 const defaultProps = {
+  // we start as false to avoid breaking changes, eventually converge to true for better accessibility
+  explicitSelectionUI: false,
   addDragAndDropFromSource: false,
   removeDragAndDropFromDestination: false,
   destinationNoOptionsMessage: "There are no items to display",
@@ -74,12 +76,15 @@ const DSShuttleV2PropTypes = {
   ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSShuttleV2Name, import_constants.DSShuttleV2Slots),
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
+  explicitSelectionUI: import_ds_props_helpers.PropTypes.bool.description(
+    "A boolean indicating whether to use WCAG-compliant selection indicators (checkboxes) instead of color-only indicators for selected items, must be true for the component to meet WCAG 1.4.1 Use of Color guidelines"
+  ).defaultValue(false),
   sourceData: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description(
     "An array of objects representing the items in the source list"
   ).isRequired,
   sourceSelectedItems: import_ds_props_helpers.PropTypes.object.description("An object representing the selected items in the source list").isRequired,
   onSourceSelectionChange: import_ds_props_helpers.PropTypes.func.description("A function called when the selection in the source list changes").isRequired,
-  SourceHeader: import_ds_props_helpers.PropTypes.func.description("The header component for the source list").isRequired,
+  SourceHeader: import_ds_props_helpers.PropTypes.elementType.description("The header component for the source list").isRequired,
   sourceHeaderProps: import_ds_props_helpers.PropTypes.object.description("Props to be passed to the source header").defaultValue({}),
   onSourceDrilldown: import_ds_props_helpers.PropTypes.func.description("A function called when an item in the source list is clicked").isRequired,
   destinationData: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).description(
@@ -91,7 +96,7 @@ const DSShuttleV2PropTypes = {
   onDestinationSelectionChange: import_ds_props_helpers.PropTypes.func.description(
     "A function called when the selection in the destination list changes"
   ).isRequired,
-  DestinationHeader: import_ds_props_helpers.PropTypes.func.description("The header component for the destination list").isRequired,
+  DestinationHeader: import_ds_props_helpers.PropTypes.elementType.description("The header component for the destination list").isRequired,
   destinationHeaderProps: import_ds_props_helpers.PropTypes.object.description("Props to be passed to the destination header").defaultValue({}),
   onDestinationDrilldown: import_ds_props_helpers.PropTypes.func.description(
     "A function called when an item in the destination list is clicked"
@@ -162,8 +167,7 @@ const DSShuttleV2PropTypes = {
   checkboxSelectAllProps: import_ds_props_helpers.PropTypes.func.description("Function that returns props for the select all checkbox in the source panel.").defaultValue({}),
   moveButtonProps: import_ds_props_helpers.PropTypes.func.description("Function that returns props for the move button.").defaultValue(() => ({})).signature(`(({ isDestionationPanel: boolean }) => ({ "aria-label": string }))`),
   drillDownButtonProps: import_ds_props_helpers.PropTypes.func.description("Function that returns props for the drilldown button.").defaultValue(() => ({})).signature(`(({ isDestionationPanel: boolean }) => ({ "aria-label": string }))`),
-  areaSearchBarProps: import_ds_props_helpers.PropTypes.func.description("Function that returns props for the area search bar.").defaultValue(() => ({})),
-  dsShuttleV2ListWrapperMid: import_ds_props_helpers.PropTypes.func.description("Function that returns props for the list wrapper.").defaultValue(() => ({}))
+  areaSearchBarProps: import_ds_props_helpers.PropTypes.func.description("Function that returns props for the area search bar.").defaultValue(() => ({}))
 };
 const DSShuttleV2PropTypesSchema = DSShuttleV2PropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map