@elliemae/ds-shuttle-v2 3.70.0-next.35 → 3.70.0-next.37

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

@@ -0,0 +1,72 @@
+"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 CheckboxSelectionUI_exports = {};
+__export(CheckboxSelectionUI_exports, {
+  CheckboxSelectionUI: () => CheckboxSelectionUI
+});
+module.exports = __toCommonJS(CheckboxSelectionUI_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = __toESM(require("react"));
+var import_useStore = require("../../../config/useStore/useStore.js");
+var import_constants = require("../../../constants/index.js");
+const StyledItemSelection = (0, import_ds_system.styled)(import_ds_form_checkbox.DSControlledCheckbox, {
+  name: import_constants.DSShuttleV2Name,
+  slot: import_constants.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 = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => itemMeta, [itemMeta]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledItemSelection,
+    {
+      applyAriaDisabled: selectionPrevented,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      "aria-hidden": "true",
+      tabIndex: -1,
+      checked: isSelected,
+      onChange: noOp
+    }
+  );
+};
+//# sourceMappingURL=CheckboxSelectionUI.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/Item/ItemSelectionUi/CheckboxSelectionUI.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BnB;AA3BJ,8BAAqC;AACrC,uBAAuB;AACvB,mBAAkB;AAClB,sBAA8B;AAC9B,uBAAkD;AAGlD,MAAM,0BAAsB,yBAAO,8CAAsB;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,kCAAiB;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,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,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/cjs/parts/Item/ItemSelectionUi/ItemSelectionUI.js

@@ -0,0 +1,83 @@
+"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 ItemSelectionUI_exports = {};
+__export(ItemSelectionUI_exports, {
+  ItemSelectionUI: () => ItemSelectionUI
+});
+module.exports = __toCommonJS(ItemSelectionUI_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = __toESM(require("react"));
+var import_useStore = require("../../../config/useStore/useStore.js");
+var import_constants = require("../../../constants/index.js");
+var import_CheckboxSelectionUI = require("./CheckboxSelectionUI.js");
+var import_VerticalBarSelectionUI = require("./VerticalBarSelectionUI.js");
+const ItemSelectionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.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 = (0, import_useStore.usePropsStore)((store) => store.get);
+  const explicitSelectionUI = (0, import_useStore.usePropsStore)((store) => store.explicitSelectionUI);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => itemMeta, [itemMeta]);
+  const idItem = import_react.default.useMemo(
+    () => `${hydratedId}-wrapper${softDeleted ? "-soft-deleted" : ""}`,
+    [hydratedId, softDeleted]
+  );
+  const shouldDisable = softDeleted || selectionPrevented;
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_CheckboxSelectionUI.CheckboxSelectionUI, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalBarSelectionUI.VerticalBarSelectionUI, { ...props })
+    }
+  );
+};
+//# sourceMappingURL=ItemSelectionUI.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/Item/ItemSelectionUi/ItemSelectionUI.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CM;AA9C7B,qBAAqB;AACrB,uBAAuB;AACvB,mBAAkB;AAClB,sBAA8B;AAC9B,uBAAkD;AAClD,iCAAoC;AAEpC,oCAAuC;AAEvC,MAAM,2BAAuB,yBAAO,qBAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,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,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,0BAAsB,+BAAc,CAAC,UAAU,MAAM,mBAAmB;AAC9E,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,UAAU,CAAC,QAAQ,CAAC;AAC3E,QAAM,SAAS,aAAAA,QAAM;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,4CAAC,kDAAqB,GAAG,OAAO,IAAK,4CAAC,wDAAwB,GAAG,OAAO;AAAA;AAAA,EACjG;AAEJ;",
+  "names": ["React"]
+}

package/dist/cjs/parts/{HoC/withConditionalUseSortable.js → Item/ItemSelectionUi/ItemSelectionUI.types.js}

@@ -5,10 +5,6 @@ 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))
@@ -26,18 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var withConditionalUseSortable_exports = {};
-__export(withConditionalUseSortable_exports, {
-  withConditionalUseSortable: () => withConditionalUseSortable
-});
-module.exports = __toCommonJS(withConditionalUseSortable_exports);
+var ItemSelectionUI_types_exports = {};
+module.exports = __toCommonJS(ItemSelectionUI_types_exports);
 var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
-const withConditionalUseSortable = (Component) => function WithConditionalUseSortable(props) {
-  const { datumInternalMeta } = props;
-  const { hydratedId } = datumInternalMeta;
-  const useSortableHelpers = (0, import_ds_drag_and_drop.useSortable)({ id: hydratedId });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, useSortableHelpers });
-};
-//# sourceMappingURL=withConditionalUseSortable.js.map
+//# sourceMappingURL=ItemSelectionUI.types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/Item/ItemSelectionUi/ItemSelectionUI.types.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport type { DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport type { useItemInnerRefHandlers } from '../useItemInnerRefHandlers.js';\n\ntype TooltipHelpers = ReturnType<typeof useHeadlessTooltip>;\ntype ItemInnerRefHandlers = ReturnType<typeof useItemInnerRefHandlers>;\n\nexport interface SelectionUIProps {\n  tooltipHelpers: TooltipHelpers;\n  itemInnerRefHandlers: ItemInnerRefHandlers;\n  itemMeta: DSShuttleV2T.ItemMeta;\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
+  "names": []
+}

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

@@ -26,30 +26,31 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var ItemSelection_exports = {};
-__export(ItemSelection_exports, {
-  ItemSelection: () => ItemSelection
+var VerticalBarSelectionUI_exports = {};
+__export(VerticalBarSelectionUI_exports, {
+  VerticalBarSelectionUI: () => VerticalBarSelectionUI
 });
-module.exports = __toCommonJS(ItemSelection_exports);
+module.exports = __toCommonJS(VerticalBarSelectionUI_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = __toESM(require("react"));
-var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_constants = require("../../constants/index.js");
-var import_useStore = require("../../config/useStore/useStore.js");
+var import_ds_system = require("@elliemae/ds-system");
+var import_react = __toESM(require("react"));
+var import_useStore = require("../../../config/useStore/useStore.js");
+var import_constants = require("../../../constants/index.js");
 const StyledItemSelection = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.ITEM_SELECTION })`
-  width: ${import_constants.ITEM_SELECTION_WIDTH}px;
+  width: 5px;
   height: 100%;
   box-sizing: border-box;
   pointer-events: none;
   background-color: ${(props) => {
-  if (props.$isSelected) return props.theme.colors.brand[700];
+  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 = import_react.default.memo((itemMeta) => {
+const VerticalBarSelectionUI = (props) => {
+  const { itemMeta } = props;
   const {
     datumInternalMeta: { isSelected },
     datumRenderFlags: { selectionPrevented }
@@ -65,5 +66,5 @@ const ItemSelection = import_react.default.memo((itemMeta) => {
       getOwnerPropsArguments
     }
   );
-});
-//# sourceMappingURL=ItemSelection.js.map
+};
+//# sourceMappingURL=VerticalBarSelectionUI.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/Item/ItemSelectionUi/VerticalBarSelectionUI.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCnB;AAlCJ,qBAAqB;AACrB,uBAAuB;AACvB,mBAAkB;AAClB,sBAA8B;AAC9B,uBAAkD;AAGlD,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,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,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,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/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/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuKjB;AArKN,mBAAmC;AACnC,uBAAuB;AACvB,qBAAqB;AACrB,gCAAmC;AACnC,sBAAgD;AAEhD,mBAA2C;AAC3C,wBAA2B;AAC3B,6BAAgC;AAChC,0BAA6B;AAC7B,qCAAwC;AACxC,uBAAmE;AACnE,oBAAoC;AACpC,wCAA2C;AAE3C,MAAM,sBAAsB,CAAC,uBAAgC;AAC3D,QAAM,oBAAgB,kCAAiB,CAAC,UAAU,MAAM,aAAa;AACrE,QAAM,aAAa,qBAAqB,iCAAgB,oBAAoB,iCAAgB;AAE5F,QAAM,4BAA4B,aAAAA,QAAM;AAAA,IACtC,CAAC,SAAgC;AAC/B,oBAAc,CAAC,YAAY,IAAI,EAAE,GAAG,IAAI;AAAA,IAC1C;AAAA,IACA,CAAC,YAAY,aAAa;AAAA,EAC5B;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,0BAA0B,IAAI,CAAC,yBAAyB,CAAC;AACzF;AAEA,MAAM,OAAO,CAAC,CAAC;AAEf,MAAM,2BAAuB,yBAAO,qBAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASrG,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,OAAO,qBAAqB,IAAI;AAC7D,QAAM,kBAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,gBAAgB,SAAS,MAAM,WAAW;AAAA,EACvE;AAEA,QAAM,kBAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AAEA,QAAM,eAAW;AAAA,IAAc,CAAC,UAC9B,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,gBAAY,+BAAc,CAAC,UAAW,qBAAqB,MAAM,uBAAuB,MAAM,eAAgB;AACpH,QAAM,mBAAmB,CAAC,aAAa,gBAAgB;AACvD,QAAM,YAAY,CAAC,aAAa,CAAC;AAEjC,QAAM,gBAAY;AAAA,IAAc,CAAC,UAC/B,qBAAqB,MAAM,wBAAwB,MAAM;AAAA,EAC3D;AAEA,QAAM,gCAA4B,kCAAiB,CAAC,UAAU,MAAM,yBAAyB;AAC7F,QAAM,mBAAe;AAAA,IAAc,CAAC,UAClC,qBAAqB,MAAM,0BAA0B,MAAM;AAAA,EAC7D;AACA,QAAM,EAAE,0BAA0B,IAAI,oBAAoB,kBAAkB;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,wCAAgB;AACpB,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,OAAO;AAAA,MACL,SAAS,MAAM;AACb,8BAAsB,kBAAkB;AAAA,MAC1C;AAAA,IACF;AAAA,IACA,CAAC,uBAAuB,kBAAkB;AAAA,EAC5C;AACA,QAAM,mBAAe,8CAAmB,MAAM;AAE9C,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAEhB,YAAM,yBAAyB,0BAA0B;AACzD,UAAI,wBAAwB;AAC1B,UAAE,eAAe;AACjB;AAAA,MACF;AACA,UAAI,CAAC,QAAQ,OAAO,WAAW,WAAW,EAAE,SAAS,GAAG,GAAG;AACzD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,kCAA0B,kBAAkB;AAC5C,+BAAuB;AAEvB,aAAK,QAAQ,eAAe,QAAQ,WAAW,SAAS,SAAS,GAAG;AAClE,oBAAU,QAAQ,SAAS,CAAC;AAC5B,8BAAoB,aAAa;AAAA,QACnC;AACA,aAAK,QAAQ,aAAa,QAAQ,UAAU,SAAS,SAAS,GAAG;AAC/D,cAAI,cAAc;AAChB,gBAAI,mBAAoB,kCAAiC;AAAA,gBACpD,uBAAsB;AAAA,UAC7B,OAAO;AACL,+BAAmB,aAAa;AAChC,sBAAU,QAAQ,SAAS,cAAc,CAAC;AAAA,UAC5C;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAC/B,QAAI,qBAAsB,QAAO,CAAC,OAAO,MAAM;AAC/C,WAAO,CAAC,MAAM;AAAA,EAChB,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,QAAM,yBACJ,SAAS,SAAS,IACd,gHACA;AAEN,QAAM,qBAAiB,kCAAiB,CAAC,UAAU,MAAM,iBAAiB;AAE1E,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,MAAM,YAAY,qBAAqB,gBAAgB,QAAQ;AAAA,IAC/D,CAAC,kBAAkB;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV;AAAA,MACA,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB,wBAAsB,qBAAqB,8BAA8B;AAAA,MACzE;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MAEV,uDAAC,uBAAK,MAAY,MAChB;AAAA,oDAAC,qCAAoB,IAAI,gBAAiB,kCAAuB;AAAA,QACjE,4CAAC,gEAA2B,WAAsB,aAA0B;AAAA,QAC3E,YAAY,4CAAC,oCAAc,GAAG,eAAe,IAAK;AAAA,QAClD,mBAAmB,4CAAC,gCAAY,GAAG,eAAe,IAAK;AAAA,QACvD,YAAY,4CAAC,2CAA4B,GAAG,eAAe,IAAK;AAAA,QAChE,uBAAuB,4CAAC,0DAAyB,GAAG,eAAe,IAAK;AAAA,SAC3E;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "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/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"