@elliemae/ds-shuttle-v2 3.14.1 → 3.14.2

package/dist/cjs/config/useStore/focusAndTabIndexManager.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/config/useStore/focusAndTabIndexManager.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { ITEMS_FOCUSES, REGIONS_FOCUSES } from '../../constants';\nimport type { FocusItem, FocusItemAction, FocusRegion, InternalAtoms, Reducers, Selectors } from './types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\n\ntype State = readonly [\n  FocusRegion,\n  FocusItem,\n  FocusItemAction,\n  () => ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>,\n];\n\nconst getElementFromState = (state: State) => {\n  const [focusRegion, focusItem, focusItemAction, get] = state;\n\n  const { getZustandRef } = get();\n\n  if (\n    focusItem === ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE &&\n    (focusRegion === REGIONS_FOCUSES.SOURCE_BOTTOM || focusRegion === REGIONS_FOCUSES.SOURCE_PANEL_ITEM)\n  ) {\n    return getZustandRef([focusItem]);\n  }\n  if (\n    focusItem === ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION &&\n    (focusRegion === REGIONS_FOCUSES.DESTINATION_BOTTOM || focusRegion === REGIONS_FOCUSES.DESTINATION_PANEL_ITEM)\n  ) {\n    return getZustandRef([focusItem]);\n  }\n\n  return getZustandRef([focusRegion, focusItem, focusItemAction]);\n};\n\nconst isItem = (state: State) =>\n  state[2] === 'parent' &&\n  state[1] !== ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE &&\n  state[1] !== ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION;\n\nconst isMove = (state: State) => state[2] === 'move-btn';\n\nconst isDrilldown = (state: State) => state[2] === 'drilldown-btn';\n\nconst shouldApplyRovingTabIndex = (state: State) => isItem(state) || isMove(state) || isDrilldown(state);\n\nconst tabIndexManager = ({\n  selectedState,\n  previousSelectedState,\n  currentFocusedItem,\n  nextFocusedItem,\n}: {\n  selectedState: State;\n  previousSelectedState: State;\n  currentFocusedItem: HTMLElement | null;\n  nextFocusedItem: HTMLElement | null;\n}) => {\n  if (currentFocusedItem && shouldApplyRovingTabIndex(previousSelectedState)) {\n    currentFocusedItem.tabIndex = -1;\n  }\n\n  if (nextFocusedItem && shouldApplyRovingTabIndex(selectedState)) {\n    nextFocusedItem.tabIndex = 0;\n  }\n};\n\nexport const focusAndTabIndexManager = (selectedState: State, previousSelectedState: State) => {\n  const currentFocusedItem = getElementFromState(previousSelectedState);\n  const nextFocusedItem = getElementFromState(selectedState);\n\n  const get = selectedState[3];\n  const { setShouldFocusItemOnRender } = get();\n\n  tabIndexManager({ selectedState, previousSelectedState, currentFocusedItem, nextFocusedItem });\n\n  if (isItem(selectedState)) {\n    // The item on `nextFocusItem` could be an old virtualized item.\n    // If this is the case, we should focus it on render too just in case\n    setShouldFocusItemOnRender(true); // we will reset this flag inside the ref callback of the item\n  } else {\n    setShouldFocusItemOnRender(false);\n  }\n\n  nextFocusedItem?.focus();\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA+C;AAW/C,MAAM,sBAAsB,CAAC,UAAiB;AAC5C,QAAM,CAAC,aAAa,WAAW,iBAAiB,GAAG,IAAI;AAEvD,QAAM,EAAE,cAAc,IAAI,IAAI;AAE9B,MACE,cAAc,+BAAc,yBAC3B,gBAAgB,iCAAgB,iBAAiB,gBAAgB,iCAAgB,oBAClF;AACA,WAAO,cAAc,CAAC,SAAS,CAAC;AAAA,EAClC;AACA,MACE,cAAc,+BAAc,8BAC3B,gBAAgB,iCAAgB,sBAAsB,gBAAgB,iCAAgB,yBACvF;AACA,WAAO,cAAc,CAAC,SAAS,CAAC;AAAA,EAClC;AAEA,SAAO,cAAc,CAAC,aAAa,WAAW,eAAe,CAAC;AAChE;AAEA,MAAM,SAAS,CAAC,UACd,MAAM,OAAO,YACb,MAAM,OAAO,+BAAc,wBAC3B,MAAM,OAAO,+BAAc;AAE7B,MAAM,SAAS,CAAC,UAAiB,MAAM,OAAO;AAE9C,MAAM,cAAc,CAAC,UAAiB,MAAM,OAAO;AAEnD,MAAM,4BAA4B,CAAC,UAAiB,OAAO,KAAK,KAAK,OAAO,KAAK,KAAK,YAAY,KAAK;AAEvG,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,MAAI,sBAAsB,0BAA0B,qBAAqB,GAAG;AAC1E,uBAAmB,WAAW;AAAA,EAChC;AAEA,MAAI,mBAAmB,0BAA0B,aAAa,GAAG;AAC/D,oBAAgB,WAAW;AAAA,EAC7B;AACF;AAEO,MAAM,0BAA0B,CAAC,eAAsB,0BAAiC;AAC7F,QAAM,qBAAqB,oBAAoB,qBAAqB;AACpE,QAAM,kBAAkB,oBAAoB,aAAa;AAEzD,QAAM,MAAM,cAAc;AAC1B,QAAM,EAAE,2BAA2B,IAAI,IAAI;AAE3C,kBAAgB,EAAE,eAAe,uBAAuB,oBAAoB,gBAAgB,CAAC;AAE7F,MAAI,OAAO,aAAa,GAAG;AAGzB,+BAA2B,IAAI;AAAA,EACjC,OAAO;AACL,+BAA2B,KAAK;AAAA,EAClC;AAEA,mBAAiB,MAAM;AACzB;",
+  "names": []
+}

package/dist/cjs/config/useStore/types.js

@@ -0,0 +1,24 @@
+"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 __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(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+var React = __toESM(require("react"));
+//# sourceMappingURL=types.js.map

package/dist/cjs/config/useStore/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/config/useStore/types.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport type { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants';\nimport type { useAutoCalculated } from '../useAutoCalculated';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\n\nexport type FocusRegion = (typeof REGIONS_FOCUSES)[keyof typeof REGIONS_FOCUSES];\n\nexport type FocusItem = Omit<(typeof ITEMS_FOCUSES)[keyof typeof ITEMS_FOCUSES], 'GET_SPECIFIC_ITEM'> & string;\n\nexport type FocusItemAction = (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n\nexport type InternalAtoms = {\n  focusRegion: FocusRegion;\n  focusItem: FocusItem;\n  focusItemAction: FocusItemAction;\n  shouldFocusItemOnRender: boolean;\n  dropIndicatorPosition: number;\n  overId: string;\n  dndDraggingItem: DSShuttleV2T.ConfiguredDatum | null;\n  dndDraggingItemMeta: DSShuttleV2T.ItemMeta | null;\n  lastActiveId: string;\n  isDropValid: boolean;\n  sourcePanelLastSelectedItem: string | null | undefined;\n  destinationPanelLastSelectedItem: string | null | undefined;\n};\n\nexport type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n\nexport type Selectors = {\n  getIsDragAndDropHappening: () => boolean;\n  getPanelLastSelectedItem: (isDestinationPanel: boolean) => string | null | undefined;\n};\n\nexport type Reducers = Record<string, never>;\n\nexport type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
+  "names": []
+}

package/dist/cjs/config/useStore/useStore.js

@@ -33,13 +33,16 @@ __export(useStore_exports, {
 module.exports = __toCommonJS(useStore_exports);
 var React = __toESM(require("react"));
 var import_ds_zustand_helpers = require("@elliemae/ds-zustand-helpers");
+var import_react = __toESM(require("fast-deep-equal/react"));
 var import_react_desc_prop_types = require("../../react-desc-prop-types");
 var import_constants = require("../../constants");
 var import_useAutoCalculated = require("../useAutoCalculated");
+var import_focusAndTabIndexManager = require("./focusAndTabIndexManager");
 const internalAtomDefaultValues = {
   focusRegion: import_constants.REGIONS_FOCUSES.RESET,
   focusItem: import_constants.ITEMS_FOCUSES.RESET,
   focusItemAction: import_constants.ACTIONS_FOCUSES.RESET,
+  shouldFocusItemOnRender: false,
   dropIndicatorPosition: 0,
   overId: "",
   lastActiveId: "",
@@ -54,6 +57,15 @@ const selectors = (get) => ({
   getPanelLastSelectedItem: (isDestinationPanel) => isDestinationPanel ? get()?.destinationPanelLastSelectedItem : get()?.sourcePanelLastSelectedItem
 });
 const reducers = () => ({});
+const subscribers = (api) => {
+  api.subscribe(
+    (state) => [state.focusRegion, state.focusItem, state.focusItemAction, state.get],
+    import_focusAndTabIndexManager.focusAndTabIndexManager,
+    {
+      equalityFn: import_react.default
+    }
+  );
+};
 const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = (0, import_ds_zustand_helpers.createInternalAndPropsContext)();
 const config = {
   defaultProps: import_react_desc_prop_types.defaultProps,
@@ -61,6 +73,7 @@ const config = {
   useAutoCalculated: import_useAutoCalculated.useAutoCalculated,
   selectors,
   reducers,
+  subscribers,
   PropsProvider,
   usePropsStore,
   InternalProvider,

package/dist/cjs/config/useStore/useStore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/config/useStore/useStore.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createInternalAndPropsContext, type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants';\nimport { useAutoCalculated } from '../useAutoCalculated';\n\n// =============================================================================\n// TYPES\n// =============================================================================\ntype FocusRegion = (typeof REGIONS_FOCUSES)[keyof typeof REGIONS_FOCUSES];\n\ntype FocusItem = Omit<(typeof ITEMS_FOCUSES)[keyof typeof ITEMS_FOCUSES], 'GET_SPECIFIC_ITEM'> & string;\n\ntype FocusItemAction = (typeof ACTIONS_FOCUSES)[keyof typeof ACTIONS_FOCUSES];\n\ntype InternalAtoms = {\n  focusRegion: FocusRegion;\n  focusItem: FocusItem;\n  focusItemAction: FocusItemAction;\n  dropIndicatorPosition: number;\n  overId: string;\n  dndDraggingItem: DSShuttleV2T.ConfiguredDatum | null;\n  dndDraggingItemMeta: DSShuttleV2T.ItemMeta | null;\n  lastActiveId: string;\n  isDropValid: boolean;\n  sourcePanelLastSelectedItem: string | null | undefined;\n  destinationPanelLastSelectedItem: string | null | undefined;\n};\n\ntype UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n\ntype Selectors = {\n  getIsDragAndDropHappening: () => boolean;\n  getPanelLastSelectedItem: (isDestinationPanel: boolean) => string | null | undefined;\n};\n\ntype Reducers = Record<string, never>;\n\ntype ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, UseAutoCalculatedT, Selectors, Reducers>;\n\n// =============================================================================\n// IMPLEMENTATIONS\n// =============================================================================\nconst internalAtomDefaultValues: InternalAtoms = {\n  focusRegion: REGIONS_FOCUSES.RESET,\n  focusItem: ITEMS_FOCUSES.RESET,\n  focusItemAction: ACTIONS_FOCUSES.RESET,\n  dropIndicatorPosition: 0,\n  overId: '',\n  lastActiveId: '',\n  dndDraggingItem: null,\n  dndDraggingItemMeta: null,\n  isDropValid: false,\n  sourcePanelLastSelectedItem: null,\n  destinationPanelLastSelectedItem: null,\n};\n\nconst selectors: ZustandT.SelectorObject<ShuttleInternalStore, Selectors> = (get) => ({\n  getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== '',\n  getPanelLastSelectedItem: (isDestinationPanel: boolean) =>\n    isDestinationPanel ? get()?.destinationPanelLastSelectedItem : get()?.sourcePanelLastSelectedItem,\n});\n\nconst reducers: ZustandT.ReducerObject<ShuttleInternalStore, Reducers> = () => ({});\n\nexport const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext<\n  DSShuttleV2T.InternalProps,\n  InternalAtoms,\n  UseAutoCalculatedT,\n  Selectors,\n  Reducers\n>();\n\nexport const config = {\n  defaultProps: defaultProps as DSShuttleV2T.InternalProps,\n  internalAtomDefaultValues: internalAtomDefaultValues,\n  useAutoCalculated,\n  selectors,\n  reducers,\n  PropsProvider,\n  usePropsStore,\n  InternalProvider,\n  useInternalStore,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAA6D;AAC7D,mCAAgD;AAChD,uBAAgE;AAChE,+BAAkC;AAuClC,MAAM,4BAA2C;AAAA,EAC/C,aAAa,iCAAgB;AAAA,EAC7B,WAAW,+BAAc;AAAA,EACzB,iBAAiB,iCAAgB;AAAA,EACjC,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,6BAA6B;AAAA,EAC7B,kCAAkC;AACpC;AAEA,MAAM,YAAsE,CAAC,SAAS;AAAA,EACpF,2BAA2B,MAAM,QAAQ,IAAI,GAAG,YAAY,KAAK,IAAI,GAAG,iBAAiB;AAAA,EACzF,0BAA0B,CAAC,uBACzB,qBAAqB,IAAI,GAAG,mCAAmC,IAAI,GAAG;AAC1E;AAEA,MAAM,WAAmE,OAAO,CAAC;AAE1E,MAAM,EAAE,eAAe,eAAe,kBAAkB,iBAAiB,QAAI,yDAMlF;AAEK,MAAM,SAAS;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
-  "names": []
+  "sourcesContent": ["import { createInternalAndPropsContext, type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport deepequal from 'fast-deep-equal/react';\nimport { defaultProps, type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants';\nimport { useAutoCalculated } from '../useAutoCalculated';\nimport type { InternalAtoms, ShuttleInternalStore, Selectors, Reducers, UseAutoCalculatedT } from './types';\nimport { focusAndTabIndexManager } from './focusAndTabIndexManager';\n\nconst internalAtomDefaultValues: InternalAtoms = {\n  focusRegion: REGIONS_FOCUSES.RESET,\n  focusItem: ITEMS_FOCUSES.RESET,\n  focusItemAction: ACTIONS_FOCUSES.RESET,\n  shouldFocusItemOnRender: false,\n  dropIndicatorPosition: 0,\n  overId: '',\n  lastActiveId: '',\n  dndDraggingItem: null,\n  dndDraggingItemMeta: null,\n  isDropValid: false,\n  sourcePanelLastSelectedItem: null,\n  destinationPanelLastSelectedItem: null,\n};\n\nconst selectors: ZustandT.SelectorObject<ShuttleInternalStore, Selectors> = (get) => ({\n  getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== '',\n  getPanelLastSelectedItem: (isDestinationPanel: boolean) =>\n    isDestinationPanel ? get()?.destinationPanelLastSelectedItem : get()?.sourcePanelLastSelectedItem,\n});\n\nconst reducers: ZustandT.ReducerObject<ShuttleInternalStore, Reducers> = () => ({});\n\nconst subscribers: ZustandT.Subscribers<ShuttleInternalStore> = (api) => {\n  api.subscribe(\n    (state) => [state.focusRegion, state.focusItem, state.focusItemAction, state.get] as const,\n    focusAndTabIndexManager,\n    {\n      equalityFn: deepequal,\n    },\n  );\n};\n\nexport const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext<\n  DSShuttleV2T.InternalProps,\n  InternalAtoms,\n  UseAutoCalculatedT,\n  Selectors,\n  Reducers\n>();\n\nexport const config = {\n  defaultProps: defaultProps as DSShuttleV2T.InternalProps,\n  internalAtomDefaultValues: internalAtomDefaultValues,\n  useAutoCalculated,\n  selectors,\n  reducers,\n  subscribers,\n  PropsProvider,\n  usePropsStore,\n  InternalProvider,\n  useInternalStore,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAA6D;AAC7D,mBAAsB;AACtB,mCAAgD;AAChD,uBAAgE;AAChE,+BAAkC;AAElC,qCAAwC;AAExC,MAAM,4BAA2C;AAAA,EAC/C,aAAa,iCAAgB;AAAA,EAC7B,WAAW,+BAAc;AAAA,EACzB,iBAAiB,iCAAgB;AAAA,EACjC,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,6BAA6B;AAAA,EAC7B,kCAAkC;AACpC;AAEA,MAAM,YAAsE,CAAC,SAAS;AAAA,EACpF,2BAA2B,MAAM,QAAQ,IAAI,GAAG,YAAY,KAAK,IAAI,GAAG,iBAAiB;AAAA,EACzF,0BAA0B,CAAC,uBACzB,qBAAqB,IAAI,GAAG,mCAAmC,IAAI,GAAG;AAC1E;AAEA,MAAM,WAAmE,OAAO,CAAC;AAEjF,MAAM,cAA0D,CAAC,QAAQ;AACvE,MAAI;AAAA,IACF,CAAC,UAAU,CAAC,MAAM,aAAa,MAAM,WAAW,MAAM,iBAAiB,MAAM,GAAG;AAAA,IAChF;AAAA,IACA;AAAA,MACE,YAAY,aAAAA;AAAA,IACd;AAAA,EACF;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,kBAAkB,iBAAiB,QAAI,yDAMlF;AAEK,MAAM,SAAS;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
+  "names": ["deepequal"]
 }

package/dist/cjs/constants/index.js

@@ -32,7 +32,7 @@ __export(constants_exports, {
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
-const DSShuttleV2Name = "ds-shuttle-v2";
+const DSShuttleV2Name = "DSShuttleV2";
 const REGIONS_FOCUSES = {
   SOURCE_HEADER: "source-header",
   SOURCE_PANEL: "source-panel",
@@ -54,8 +54,6 @@ const ACTIONS_FOCUSES = {
   RESET: ""
 };
 const ITEMS_FOCUSES = {
-  FIRST: "first",
-  LAST: "last",
   LOAD_MORE_BTN_SOURCE: "load-more-btn-source",
   LOAD_MORE_BTN_DESTINATION: "load-more-btn-destination",
   GET_SPECIFIC_ITEM: ({ hydratedId }) => hydratedId,

package/dist/cjs/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSShuttleV2Name = 'ds-shuttle-v2' as const;\nexport const REGIONS_FOCUSES = {\n  SOURCE_HEADER: 'source-header',\n  SOURCE_PANEL: 'source-panel',\n  SOURCE_PANEL_ITEM: 'source-panel-item',\n  SOURCE_PANEL_ITEM_MOVE_ALL: 'source-panel-move-all',\n  SOURCE_BOTTOM: 'source-bottom',\n  DESTINATION_HEADER: 'destination-header',\n  DESTINATION_PANEL: 'destination-panel',\n  DESTINATION_PANEL_ITEM: 'destination-panel-item',\n  DESTINATION_PANEL_ITEM_MOVE_ALL: 'destination-panel-move-all',\n  DESTINATION_BOTTOM: 'destination-bottom',\n  RESET: '',\n} as const;\n\nexport const ACTIONS_FOCUSES = {\n  MOVE_BTN: 'move-btn',\n  DRILLDOWN_BTN: 'drilldown-btn',\n  DRAG_N_DROP: 'drag-n-drop',\n  PARENT: 'parent',\n  RESET: '',\n} as const;\n\nexport const ITEMS_FOCUSES = {\n  FIRST: 'first',\n  LAST: 'last',\n  LOAD_MORE_BTN_SOURCE: 'load-more-btn-source',\n  LOAD_MORE_BTN_DESTINATION: 'load-more-btn-destination',\n  GET_SPECIFIC_ITEM: ({ hydratedId }: { hydratedId: string }) => hydratedId,\n  RESET: '',\n} as const;\n\nexport const DATA_TESTID = {\n  SHUTTLE_DRAG_HANDLE: 'shuttle-drag-handle',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AAAA,EACf,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,iCAAiC;AAAA,EACjC,oBAAoB;AAAA,EACpB,OAAO;AACT;AAEO,MAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,eAAe;AAAA,EACf,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,gBAAgB;AAAA,EAC3B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,mBAAmB,CAAC,EAAE,WAAW,MAA8B;AAAA,EAC/D,OAAO;AACT;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AACvB;",
+  "sourcesContent": ["export const DSShuttleV2Name = 'DSShuttleV2' as const;\nexport const REGIONS_FOCUSES = {\n  SOURCE_HEADER: 'source-header',\n  SOURCE_PANEL: 'source-panel',\n  SOURCE_PANEL_ITEM: 'source-panel-item',\n  SOURCE_PANEL_ITEM_MOVE_ALL: 'source-panel-move-all',\n  SOURCE_BOTTOM: 'source-bottom',\n  DESTINATION_HEADER: 'destination-header',\n  DESTINATION_PANEL: 'destination-panel',\n  DESTINATION_PANEL_ITEM: 'destination-panel-item',\n  DESTINATION_PANEL_ITEM_MOVE_ALL: 'destination-panel-move-all',\n  DESTINATION_BOTTOM: 'destination-bottom',\n  RESET: '',\n} as const;\n\nexport const ACTIONS_FOCUSES = {\n  MOVE_BTN: 'move-btn',\n  DRILLDOWN_BTN: 'drilldown-btn',\n  DRAG_N_DROP: 'drag-n-drop',\n  PARENT: 'parent',\n  RESET: '',\n} as const;\n\nexport const ITEMS_FOCUSES = {\n  LOAD_MORE_BTN_SOURCE: 'load-more-btn-source',\n  LOAD_MORE_BTN_DESTINATION: 'load-more-btn-destination',\n  GET_SPECIFIC_ITEM: ({ hydratedId }: { hydratedId: string }) => hydratedId,\n  RESET: '',\n} as const;\n\nexport const DATA_TESTID = {\n  SHUTTLE_DRAG_HANDLE: 'shuttle-drag-handle',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAAA,EAC7B,eAAe;AAAA,EACf,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,iCAAiC;AAAA,EACjC,oBAAoB;AAAA,EACpB,OAAO;AACT;AAEO,MAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,eAAe;AAAA,EACf,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,gBAAgB;AAAA,EAC3B,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,mBAAmB,CAAC,EAAE,WAAW,MAA8B;AAAA,EAC/D,OAAO;AACT;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AACvB;",
   "names": []
 }

package/dist/cjs/parts/Dnd/DndHandle.js

@@ -35,7 +35,11 @@ var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_constants = require("../../constants");
-const StyledGripperButtonOrOverlay = import_ds_system.styled.div`
+var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions");
+const StyledGripperButtonOrOverlay = (0, import_ds_system.styled)("div", {
+  name: import_DSShuttleV2Definitions.DSShuttleV2Name,
+  slot: import_DSShuttleV2Definitions.DSShuttleV2Slots.DRAG_AND_DROP_HANDLE
+})`
   cursor: ${({ isActive, isDragOverlay, disabled }) => {
   if (isActive || isDragOverlay)
     return "grabbing";

package/dist/cjs/parts/Dnd/DndHandle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Dnd/DndHandle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\nimport React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport type { useSortable } from '@elliemae/ds-drag-and-drop';\n\nimport { styled } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../constants';\n\nexport const StyledGripperButtonOrOverlay = styled.div<{\n  isActive: boolean;\n  isDragOverlay: boolean;\n  disabled: boolean;\n}>`\n  cursor: ${({ isActive, isDragOverlay, disabled }) => {\n    if (isActive || isDragOverlay) return 'grabbing';\n    if (disabled) return 'not-allowed';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  &:focus {\n    outline: 1px solid brand-700;\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n  useSortableHelpers: ReturnType<typeof useSortable>;\n  isDndActive: boolean;\n  isDragging: boolean;\n  disabled?: boolean;\n}> = ({ id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers }) => (\n  <StyledGripperButtonOrOverlay\n    {...(!disabled && useSortableHelpers\n      ? {\n          ...useSortableHelpers.listeners,\n          ...useSortableHelpers.attributes,\n        }\n      : {})}\n    isActive={isDndActive}\n    ref={mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef)}\n    tabIndex={-1}\n    data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n    id={`${id}-drag-handle`}\n    key={`${id}-drag-handle`}\n    disabled={disabled}\n  >\n    <GripperVertical size=\"s\" color={isDragging || disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n  </StyledGripperButtonOrOverlay>\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDnB;AAfF;AAlCF,sBAAgC;AAGhC,uBAAuB;AACvB,0BAA0B;AAC1B,uBAA4B;AAErB,MAAM,+BAA+B,wBAAO;AAAA,YAKvC,CAAC,EAAE,UAAU,eAAe,SAAS,MAAM;AACnD,MAAI,YAAY;AAAe,WAAO;AACtC,MAAI;AAAU,WAAO;AACrB,SAAO;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUK,MAAM,aAOR,CAAC,EAAE,IAAI,aAAa,YAAY,WAAW,OAAO,UAAU,mBAAmB,MAClF;AAAA,EAAC;AAAA;AAAA,IACE,GAAI,CAAC,YAAY,qBACd;AAAA,MACE,GAAG,mBAAmB;AAAA,MACtB,GAAG,mBAAmB;AAAA,IACxB,IACA,CAAC;AAAA,IACL,UAAU;AAAA,IACV,SAAK,+BAAU,UAAU,oBAAoB,mBAAmB;AAAA,IAChE,UAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,IACR;AAAA;AAAA,EAEA,4CAAC,mCAAgB,MAAK,KAAI,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAC3G;",
+  "sourcesContent": ["/* eslint-disable indent */\nimport React from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport type { useSortable } from '@elliemae/ds-drag-and-drop';\n\nimport { styled } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../constants';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\n\nexport const StyledGripperButtonOrOverlay = styled('div', {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.DRAG_AND_DROP_HANDLE,\n})<{\n  isActive: boolean;\n  isDragOverlay?: boolean;\n  disabled?: boolean;\n}>`\n  cursor: ${({ isActive, isDragOverlay, disabled }) => {\n    if (isActive || isDragOverlay) return 'grabbing';\n    if (disabled) return 'not-allowed';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  &:focus {\n    outline: 1px solid brand-700;\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n  useSortableHelpers: ReturnType<typeof useSortable>;\n  isDndActive: boolean;\n  isDragging: boolean;\n  disabled?: boolean;\n}> = ({ id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers }) => (\n  <StyledGripperButtonOrOverlay\n    {...(!disabled && useSortableHelpers\n      ? {\n          ...useSortableHelpers.listeners,\n          ...useSortableHelpers.attributes,\n        }\n      : {})}\n    isActive={isDndActive}\n    ref={mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef)}\n    tabIndex={-1}\n    data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n    id={`${id}-drag-handle`}\n    key={`${id}-drag-handle`}\n    disabled={disabled}\n  >\n    <GripperVertical size=\"s\" color={isDragging || disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n  </StyledGripperButtonOrOverlay>\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuDnB;AAfF;AAtCF,sBAAgC;AAGhC,uBAAuB;AACvB,0BAA0B;AAC1B,uBAA4B;AAC5B,oCAAkD;AAE3C,MAAM,mCAA+B,yBAAO,OAAO;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA,YAKW,CAAC,EAAE,UAAU,eAAe,SAAS,MAAM;AACnD,MAAI,YAAY;AAAe,WAAO;AACtC,MAAI;AAAU,WAAO;AACrB,SAAO;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUK,MAAM,aAOR,CAAC,EAAE,IAAI,aAAa,YAAY,WAAW,OAAO,UAAU,mBAAmB,MAClF;AAAA,EAAC;AAAA;AAAA,IACE,GAAI,CAAC,YAAY,qBACd;AAAA,MACE,GAAG,mBAAmB;AAAA,MACtB,GAAG,mBAAmB;AAAA,IACxB,IACA,CAAC;AAAA,IACL,UAAU;AAAA,IACV,SAAK,+BAAU,UAAU,oBAAoB,mBAAmB;AAAA,IAChE,UAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,IACR;AAAA;AAAA,EAEA,4CAAC,mCAAgB,MAAK,KAAI,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAC3G;",
   "names": []
 }

package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js

@@ -36,7 +36,7 @@ var import_useStore = require("../../config/useStore");
 var import_ItemOverlay = require("../Item/ItemOverlay");
 const withConditionalDnDRowContext = (Component) => (props) => {
   const { isDestinationPanel } = props;
-  const itemList = (0, import_useStore.useInternalStore)(
+  const itemList = (0, import_useStore.usePropsStore)(
     (state) => isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData
   );
   const withDragNDrop = (0, import_useStore.usePropsStore)(
@@ -83,23 +83,25 @@ const withConditionalDnDRowContext = (Component) => (props) => {
   const { dndContextProps, sortableContextProps, activeItem, active, over, dropIndicatorPosition, isDropValid } = (0, import_ds_drag_and_drop.useTreeDndkitConfig)(treeConfig);
   (0, import_react.useEffect)(() => {
     setLastActiveId(active?.id?.toString() ?? "");
-  }, [active, setLastActiveId]);
-  (0, import_react.useEffect)(() => {
     setOverId(over?.id?.toString() ?? "");
-  }, [over, setOverId]);
-  (0, import_react.useEffect)(() => {
     setIsDropValid(isDropValid);
-  }, [isDropValid, setIsDropValid]);
-  (0, import_react.useEffect)(() => {
     setDndDraggingItem(activeItem?.original ?? null);
-  }, [activeItem, setDndDraggingItem]);
-  (0, import_react.useEffect)(() => {
     setDropIndicatorPosition(dropIndicatorPosition);
-  }, [dropIndicatorPosition, setDropIndicatorPosition]);
-  (0, import_react.useEffect)(() => {
     if (!active)
       setDndDraggingItemMeta(null);
-  }, [active, setDndDraggingItemMeta]);
+  }, [
+    active,
+    activeItem,
+    dropIndicatorPosition,
+    isDropValid,
+    over,
+    setDndDraggingItem,
+    setDndDraggingItemMeta,
+    setDropIndicatorPosition,
+    setIsDropValid,
+    setLastActiveId,
+    setOverId
+  ]);
   if (withDragNDrop)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.SortableContext, { ...sortableContextProps, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }),

package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect } from 'react';\nimport type { DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\n\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport type { DSShuttleV2T } from '../../react-desc-prop-types';\nimport { ItemOverlay } from '../Item/ItemOverlay';\n\ntype HoCConfig = DSShuttleV2T.PanelMetaInfo;\ntype InternalHoCStates = {\n  activeId?: DSShuttleV2T.HydratedId;\n  overId?: DSShuttleV2T.HydratedId;\n  isDropValid?: boolean;\n};\ntype ResultComponentProps = DSShuttleV2T.PanelMetaInfo & InternalHoCStates;\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: ConfiguredReactFunctionalHOC<HoCConfig, ResultComponentProps> =\n  (Component) => (props) => {\n    const { isDestinationPanel } = props;\n    const itemList = useInternalStore((state) =>\n      isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n    );\n\n    const withDragNDrop = usePropsStore((state) =>\n      isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n    );\n\n    const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n    const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);\n    const setOverId = useInternalStore((state) => state.setOverId);\n    const setIsDropValid = useInternalStore((state) => state.setIsDropValid);\n    const setDndDraggingItem = useInternalStore((state) => state.setDndDraggingItem);\n    const setLastActiveId = useInternalStore((state) => state.setLastActiveId);\n    const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);\n\n    const onItemsReorder = usePropsStore((state) =>\n      isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder,\n    );\n\n    const onReorder: DnDKitTree.OnReorder<DSShuttleV2T.ConfiguredDatum> = useCallback(\n      (dndActive, targetIndex, metadata) => {\n        // eslint-disable-next-line no-unused-vars\n        const { considerExpanding, over: dndOver, ...dndData } = metadata;\n        const over = dndOver.original.original;\n        const active = dndActive.original.original;\n        const cleanedMetaData = { ...dndData, over, active, targetIndex };\n        onItemsReorder(active, cleanedMetaData);\n      },\n      [onItemsReorder],\n    );\n\n    const treeConfig = React.useMemo(() => {\n      const configuredItemList = itemList.map((item, i) => ({\n        // dnd\n        uid: item.hydratedId,\n        depth: 0,\n        parentId: null,\n        realIndex: i,\n        childrenCount: 0,\n        original: item,\n      }));\n      return {\n        flattenedItems: configuredItemList,\n        isHorizontalDnD: false,\n        isExpandable: false,\n        onReorder,\n        maxDragAndDropLevel: 0,\n        getIsDropValid: () => true,\n      };\n    }, [itemList, onReorder]);\n\n    const { dndContextProps, sortableContextProps, activeItem, active, over, dropIndicatorPosition, isDropValid } =\n      useTreeDndkitConfig(treeConfig);\n\n    useEffect(() => {\n      setLastActiveId(active?.id?.toString() ?? '');\n    }, [active, setLastActiveId]);\n\n    useEffect(() => {\n      setOverId(over?.id?.toString() ?? '');\n    }, [over, setOverId]);\n\n    useEffect(() => {\n      setIsDropValid(isDropValid);\n    }, [isDropValid, setIsDropValid]);\n\n    useEffect(() => {\n      setDndDraggingItem(activeItem?.original ?? null);\n    }, [activeItem, setDndDraggingItem]);\n\n    useEffect(() => {\n      setDropIndicatorPosition(dropIndicatorPosition);\n    }, [dropIndicatorPosition, setDropIndicatorPosition]);\n\n    useEffect(() => {\n      if (!active) setDndDraggingItemMeta(null);\n    }, [active, setDndDraggingItemMeta]);\n\n    if (withDragNDrop)\n      return (\n        <DndContext {...dndContextProps}>\n          <SortableContext {...sortableContextProps}>\n            <Component {...props} />\n            {createPortal(\n              <DragOverlay style={{ width: 'auto' }}>\n                <>{dndDraggingItemMeta ? <ItemOverlay {...dndDraggingItemMeta} /> : null}</>\n              </DragOverlay>,\n              document.body,\n            )}\n          </SortableContext>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect } from 'react';\nimport type { DnDKitTree } from '@elliemae/ds-drag-and-drop';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\n\nimport { useInternalStore, usePropsStore } from '../../config/useStore';\nimport type { DSShuttleV2T } from '../../react-desc-prop-types';\nimport { ItemOverlay } from '../Item/ItemOverlay';\n\ntype HoCConfig = DSShuttleV2T.PanelMetaInfo;\ntype InternalHoCStates = {\n  activeId?: DSShuttleV2T.HydratedId;\n  overId?: DSShuttleV2T.HydratedId;\n  isDropValid?: boolean;\n};\ntype ResultComponentProps = DSShuttleV2T.PanelMetaInfo & InternalHoCStates;\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: ConfiguredReactFunctionalHOC<HoCConfig, ResultComponentProps> =\n  (Component) => (props) => {\n    const { isDestinationPanel } = props;\n    const itemList = usePropsStore((state) =>\n      isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n    );\n\n    const withDragNDrop = usePropsStore((state) =>\n      isDestinationPanel ? !state.removeDragAndDropFromDestination : state.addDragAndDropFromSource,\n    );\n\n    const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n    const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);\n    const setOverId = useInternalStore((state) => state.setOverId);\n    const setIsDropValid = useInternalStore((state) => state.setIsDropValid);\n    const setDndDraggingItem = useInternalStore((state) => state.setDndDraggingItem);\n    const setLastActiveId = useInternalStore((state) => state.setLastActiveId);\n    const setDropIndicatorPosition = useInternalStore((state) => state.setDropIndicatorPosition);\n\n    const onItemsReorder = usePropsStore((state) =>\n      isDestinationPanel ? state.onDestinationReorder : state.onSourceReorder,\n    );\n\n    const onReorder: DnDKitTree.OnReorder<DSShuttleV2T.ConfiguredDatum> = useCallback(\n      (dndActive, targetIndex, metadata) => {\n        // eslint-disable-next-line no-unused-vars\n        const { considerExpanding, over: dndOver, ...dndData } = metadata;\n        const over = dndOver.original.original;\n        const active = dndActive.original.original;\n        const cleanedMetaData = { ...dndData, over, active, targetIndex };\n        onItemsReorder(active, cleanedMetaData);\n      },\n      [onItemsReorder],\n    );\n\n    const treeConfig = React.useMemo(() => {\n      const configuredItemList = itemList.map((item, i) => ({\n        // dnd\n        uid: item.hydratedId,\n        depth: 0,\n        parentId: null,\n        realIndex: i,\n        childrenCount: 0,\n        original: item,\n      }));\n      return {\n        flattenedItems: configuredItemList,\n        isHorizontalDnD: false,\n        isExpandable: false,\n        onReorder,\n        maxDragAndDropLevel: 0,\n        getIsDropValid: () => true,\n      };\n    }, [itemList, onReorder]);\n\n    const { dndContextProps, sortableContextProps, activeItem, active, over, dropIndicatorPosition, isDropValid } =\n      useTreeDndkitConfig(treeConfig);\n\n    useEffect(() => {\n      setLastActiveId(active?.id?.toString() ?? '');\n      setOverId(over?.id?.toString() ?? '');\n      setIsDropValid(isDropValid);\n      setDndDraggingItem(activeItem?.original ?? null);\n      setDropIndicatorPosition(dropIndicatorPosition);\n      if (!active) setDndDraggingItemMeta(null);\n    }, [\n      active,\n      activeItem,\n      dropIndicatorPosition,\n      isDropValid,\n      over,\n      setDndDraggingItem,\n      setDndDraggingItemMeta,\n      setDropIndicatorPosition,\n      setIsDropValid,\n      setLastActiveId,\n      setOverId,\n    ]);\n\n    if (withDragNDrop)\n      return (\n        <DndContext {...dndContextProps}>\n          <SortableContext {...sortableContextProps}>\n            <Component {...props} />\n            {createPortal(\n              <DragOverlay style={{ width: 'auto' }}>\n                <>{dndDraggingItemMeta ? <ItemOverlay {...dndDraggingItemMeta} /> : null}</>\n              </DragOverlay>,\n              document.body,\n            )}\n          </SortableContext>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["over", "active", "React"]
 }

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

@@ -37,7 +37,6 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_DSShuttleV2Definitions = require("../../config/DSShuttleV2Definitions");
 var import_useStore = require("../../config/useStore");
-var import_useFocusTracker = require("../../config/useFocusTracker");
 var import_ItemSelection = require("./ItemSelection");
 var import_ItemActions = require("./ItemActions");
 var import_ItemMiddleSection = require("./ItemMiddleSection");
@@ -52,9 +51,9 @@ var import_useItemKeyboardSelection = require("./useItemKeyboardSelection");
 const cssDisabled = import_ds_system.css`
   background-color: ${({ theme }) => theme.colors.neutral["100"]};
   color: ${({ theme }) => theme.colors.neutral["300"]};
-  .ds-shuttle-v2-item-action-btn-to-source-icon > svg,
-  .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,
-  .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {
+  .DSShuttleV2-item-action-btn-to-source-icon > svg,
+  .DSShuttleV2-item-action-btn-to-destination-icon > svg,
+  .DSShuttleV2-item-action-btn-drilldown-icon > svg {
     fill: ${({ theme }) => theme.colors.neutral["300"]};
   }
 `;
@@ -64,9 +63,9 @@ const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: im
   background-color: white;
   &:hover {
     background-color: ${({ isDndActive, theme }) => !isDndActive ? theme.colors.brand["200"] : "white"};
-    .ds-shuttle-v2-item-action-btn-to-source-icon > svg,
-    .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,
-    .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {
+    .DSShuttleV2-item-action-btn-to-source-icon > svg,
+    .DSShuttleV2-item-action-btn-to-destination-icon > svg,
+    .DSShuttleV2-item-action-btn-drilldown-icon > svg {
       fill: brand-700;
     }
     ${({ isDragging }) => isDragging && cssDisabled}
@@ -80,28 +79,37 @@ const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: im
 
   ${({ isDragging }) => isDragging && cssDisabled}
 `;
-const useInnerRefHandlers = ({ datum, datumInternalMeta, isDestinationPanel }) => {
-  const { isFirst, isLast, hydratedId } = datumInternalMeta;
-  const { trackFocusItem } = (0, import_useFocusTracker.useFocusTracker)();
-  const focusRegion = (0, import_useStore.useInternalStore)((state) => state.focusRegion);
-  const focusItem = (0, import_useStore.useInternalStore)((state) => state.focusItem);
-  const focusItemAction = (0, import_useStore.useInternalStore)((state) => state.focusItemAction);
+const useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }) => {
+  const { hydratedId } = datumInternalMeta;
+  const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
+  const getShouldFocusItemOnRender = (0, import_useStore.useInternalStore)((state) => state.getShouldFocusItemOnRender);
+  const setShouldFocusItemOnRender = (0, import_useStore.useInternalStore)((state) => state.setShouldFocusItemOnRender);
+  const getFocusRegion = (0, import_useStore.useInternalStore)((state) => state.getFocusRegion);
+  const getFocusItem = (0, import_useStore.useInternalStore)((state) => state.getFocusItem);
+  const getFocusItemAction = (0, import_useStore.useInternalStore)((state) => state.getFocusItemAction);
   const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
   const currItemId = hydratedId;
-  const shouldFocus = import_react.default.useMemo(
-    () => focusRegion === currRegion && focusItemAction === "parent" && (focusItem === currItemId || isFirst && focusItem === "first" || isLast && focusItem === "last"),
-    [currItemId, currRegion, focusItem, focusItemAction, focusRegion, isFirst, isLast]
-  );
   const innerRefHandlerParentItem = import_react.default.useCallback(
     (node) => {
-      if (shouldFocus) {
+      setZustandRef([currRegion, currItemId, "parent"], node);
+      const shouldThisItemHaveFocus = currRegion === getFocusRegion() && currItemId === getFocusItem() && "parent" === getFocusItemAction();
+      if (getShouldFocusItemOnRender() && shouldThisItemHaveFocus && node) {
         node?.focus();
-        trackFocusItem({ original: datum, ...datumInternalMeta });
+        setShouldFocusItemOnRender(false);
       }
     },
-    [datum, datumInternalMeta, shouldFocus, trackFocusItem]
+    [
+      currItemId,
+      currRegion,
+      getFocusItem,
+      getFocusItemAction,
+      getFocusRegion,
+      getShouldFocusItemOnRender,
+      setShouldFocusItemOnRender,
+      setZustandRef
+    ]
   );
-  return import_react.default.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);
+  return import_react.default.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);
 };
 const Item = import_react.default.memo((itemMeta) => {
   const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;
@@ -112,20 +120,13 @@ const Item = import_react.default.memo((itemMeta) => {
     return ["5px", "1fr", "auto"];
   }, [withDragNDrop]);
   const setDndDraggingItemMeta = (0, import_useStore.useInternalStore)((state) => state.setDndDraggingItemMeta);
-  const dndDraggingItemMeta = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItemMeta);
   const getIsDragAndDropHappening = (0, import_useStore.useInternalStore)((state) => state.getIsDragAndDropHappening);
-  const dndDraggingItem = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItem);
-  const isDraggingThisItem = dndDraggingItem?.hydratedId === hydratedId;
+  const isDraggingThisItem = (0, import_useStore.useInternalStore)((state) => state.dndDraggingItem?.hydratedId === hydratedId);
   import_react.default.useEffect(() => {
-    if (isDraggingThisItem && dndDraggingItemMeta?.datumInternalMeta.hydratedId !== hydratedId)
+    if (isDraggingThisItem) {
       setDndDraggingItemMeta(itemMeta);
-  }, [
-    dndDraggingItemMeta?.datumInternalMeta.hydratedId,
-    hydratedId,
-    isDraggingThisItem,
-    itemMeta,
-    setDndDraggingItemMeta
-  ]);
+    }
+  }, [isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);
   const { selectItem, onShiftMouseDownPreventTextSelection } = (0, import_useSelectionLogic.useSelectionLogic)(itemMeta);
   const { onItemContainerKeyDown } = (0, import_useItemArrowNavigation.useItemArrowNavigation)(itemMeta);
   const { onItemKeyDownSelection } = (0, import_useItemKeyboardSelection.useItemKeyboardSelection)(itemMeta);
@@ -136,14 +137,14 @@ const Item = import_react.default.memo((itemMeta) => {
     },
     [onItemKeyDownSelection, onItemContainerKeyDown]
   );
-  const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);
+  const { innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);
   const { innerRefHandlerDnd } = (0, import_useInnerRefHandlers.useInnerRefHandlers)(itemMeta);
   const overId = (0, import_useStore.useInternalStore)((state) => state.overId);
   const isDropValid = (0, import_useStore.useInternalStore)((state) => state.isDropValid);
   const dropIndicatorPosition = (0, import_useStore.useInternalStore)((state) => state.dropIndicatorPosition);
   const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;
-  const sortableRef = useSortableHelpers?.setNodeRef ? useSortableHelpers?.setNodeRef : () => {
-  };
+  const sortableRef = useSortableHelpers?.setNodeRef ?? (() => {
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     ItemWrapper,
     {
@@ -155,9 +156,9 @@ const Item = import_react.default.memo((itemMeta) => {
       ref: (0, import_ds_utilities.mergeRefs)(innerRefHandlerParentItem, sortableRef),
       onKeyDown: handleItemKeyDown,
       onMouseDown: onShiftMouseDownPreventTextSelection,
-      tabIndex: shouldFocus ? 0 : -1,
+      tabIndex: -1,
       role: "option",
-      "aria-selected": isSelected,
+      "aria-checked": isSelected,
       id: `${hydratedId}-wrapper`,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemSelection.ItemSelection, { ...itemMeta }),
@@ -167,7 +168,7 @@ const Item = import_react.default.memo((itemMeta) => {
             id: hydratedId,
             useSortableHelpers,
             isDndActive: getIsDragAndDropHappening(),
-            isDragging: dndDraggingItem?.hydratedId === hydratedId,
+            isDragging: isDraggingThisItem,
             innerRef: innerRefHandlerDnd,
             disabled: hasMultipleSelection
           }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/Item.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\nimport React, { useMemo } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { useInternalStore } from '../../config/useStore';\nimport { useFocusTracker } from '../../config/useFocusTracker';\nimport { ItemSelection } from './ItemSelection';\nimport { ItemActions } from './ItemActions';\nimport { ItemMiddleSection } from './ItemMiddleSection';\nimport { useSelectionLogic } from './useSelectionLogic';\nimport { useItemArrowNavigation } from './useItemArrowNavigation';\nimport { REGIONS_FOCUSES } from '../../constants';\nimport { DragHandle } from '../Dnd/DndHandle';\nimport { DropIndicator } from '../Dnd/DropIndicator';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection';\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst cssDisabled = css`\n  background-color: ${({ theme }) => theme.colors.neutral['100']};\n  color: ${({ theme }) => theme.colors.neutral['300']};\n  .ds-shuttle-v2-item-action-btn-to-source-icon > svg,\n  .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,\n  .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {\n    fill: ${({ theme }) => theme.colors.neutral['300']};\n  }\n`;\n\ninterface ItemWrapperT {\n  isDragging: boolean;\n  isDndActive: boolean;\n}\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })<ItemWrapperT>`\n  min-height: 2.769rem;\n  position: relative;\n  background-color: white;\n  &:hover {\n    background-color: ${({ isDndActive, theme }) => (!isDndActive ? theme.colors.brand['200'] : 'white')};\n    .ds-shuttle-v2-item-action-btn-to-source-icon > svg,\n    .ds-shuttle-v2-item-action-btn-to-destination-icon > svg,\n    .ds-shuttle-v2-item-action-btn-drilldown-icon > svg {\n      fill: brand-700;\n    }\n    ${({ isDragging }) => isDragging && cssDisabled}\n  }\n\n  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n\n  ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst useInnerRefHandlers = ({ datum, datumInternalMeta, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { isFirst, isLast, hydratedId } = datumInternalMeta;\n  const { trackFocusItem } = useFocusTracker();\n  const focusRegion = useInternalStore((state) => state.focusRegion);\n  const focusItem = useInternalStore((state) => state.focusItem);\n  const focusItemAction = useInternalStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = hydratedId;\n\n  const shouldFocus = React.useMemo(\n    () =>\n      focusRegion === currRegion &&\n      focusItemAction === 'parent' &&\n      (focusItem === currItemId || (isFirst && focusItem === 'first') || (isLast && focusItem === 'last')),\n    [currItemId, currRegion, focusItem, focusItemAction, focusRegion, isFirst, isLast],\n  );\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      if (shouldFocus) {\n        node?.focus();\n        trackFocusItem({ original: datum, ...datumInternalMeta }); // this converts 'first'/'last' to actual id -> prevents 'last' to focus \"new last\" if new items are added\n      }\n    },\n    [datum, datumInternalMeta, shouldFocus, trackFocusItem],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n  const { isSelected, hydratedId } = datumInternalMeta;\n\n  const cols = useMemo(() => {\n    if (withDragNDrop) return ['5px', 'auto', '1fr', 'auto'];\n    return ['5px', '1fr', 'auto'];\n  }, [withDragNDrop]);\n\n  const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n  const dndDraggingItemMeta = useInternalStore((state) => state.dndDraggingItemMeta);\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const dndDraggingItem = useInternalStore((state) => state.dndDraggingItem);\n  const isDraggingThisItem = dndDraggingItem?.hydratedId === hydratedId;\n  React.useEffect(() => {\n    if (isDraggingThisItem && dndDraggingItemMeta?.datumInternalMeta.hydratedId !== hydratedId)\n      setDndDraggingItemMeta(itemMeta);\n  }, [\n    dndDraggingItemMeta?.datumInternalMeta.hydratedId,\n    hydratedId,\n    isDraggingThisItem,\n    itemMeta,\n    setDndDraggingItemMeta,\n  ]);\n\n  const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);\n  const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n  const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);\n\n  const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n    (event) => {\n      onItemKeyDownSelection(event);\n      onItemContainerKeyDown(event);\n    },\n    [onItemKeyDownSelection, onItemContainerKeyDown],\n  );\n  const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n  const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);\n  const overId = useInternalStore((state) => state.overId);\n  const isDropValid = useInternalStore((state) => state.isDropValid);\n  const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);\n\n  const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;\n  const sortableRef = useSortableHelpers?.setNodeRef ? useSortableHelpers?.setNodeRef : () => {};\n  return (\n    <ItemWrapper\n      isDragging={isDraggingThisItem}\n      isDndActive={getIsDragAndDropHappening()}\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      ref={mergeRefs(innerRefHandlerParentItem, sortableRef)}\n      onKeyDown={handleItemKeyDown}\n      onMouseDown={onShiftMouseDownPreventTextSelection}\n      tabIndex={shouldFocus ? 0 : -1}\n      role=\"option\"\n      aria-selected={isSelected}\n      id={`${hydratedId}-wrapper`}\n    >\n      <ItemSelection {...itemMeta} />\n      {withDragNDrop && useSortableHelpers ? (\n        <DragHandle\n          id={hydratedId}\n          useSortableHelpers={useSortableHelpers}\n          isDndActive={getIsDragAndDropHappening()}\n          isDragging={dndDraggingItem?.hydratedId === hydratedId}\n          innerRef={innerRefHandlerDnd}\n          disabled={hasMultipleSelection}\n        />\n      ) : null}\n      <ItemMiddleSection {...itemMeta} />\n      <ItemActions {...itemMeta} />\n      <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n    </ItemWrapper>\n  );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport React, { useMemo } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions';\nimport { useInternalStore } from '../../config/useStore';\nimport { ItemSelection } from './ItemSelection';\nimport { ItemActions } from './ItemActions';\nimport { ItemMiddleSection } from './ItemMiddleSection';\nimport { useSelectionLogic } from './useSelectionLogic';\nimport { useItemArrowNavigation } from './useItemArrowNavigation';\nimport { REGIONS_FOCUSES } from '../../constants';\nimport { DragHandle } from '../Dnd/DndHandle';\nimport { DropIndicator } from '../Dnd/DropIndicator';\nimport { withConditionalUseSortable } from '../HoC/withConditionalUseSortable';\nimport { useInnerRefHandlers as useInnerRefActionHandlers } from './ItemActions/useInnerRefHandlers';\nimport { useItemKeyboardSelection } from './useItemKeyboardSelection';\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\n\nconst cssDisabled = css`\n  background-color: ${({ theme }) => theme.colors.neutral['100']};\n  color: ${({ theme }) => theme.colors.neutral['300']};\n  .DSShuttleV2-item-action-btn-to-source-icon > svg,\n  .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n  .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n    fill: ${({ theme }) => theme.colors.neutral['300']};\n  }\n`;\n\ninterface ItemWrapperT {\n  isDragging: boolean;\n  isDndActive: boolean;\n}\n\nconst ItemWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_WRAPPER })<ItemWrapperT>`\n  min-height: 2.769rem;\n  position: relative;\n  background-color: white;\n  &:hover {\n    background-color: ${({ isDndActive, theme }) => (!isDndActive ? theme.colors.brand['200'] : 'white')};\n    .DSShuttleV2-item-action-btn-to-source-icon > svg,\n    .DSShuttleV2-item-action-btn-to-destination-icon > svg,\n    .DSShuttleV2-item-action-btn-drilldown-icon > svg {\n      fill: brand-700;\n    }\n    ${({ isDragging }) => isDragging && cssDisabled}\n  }\n\n  &:focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n\n  ${({ isDragging }) => isDragging && cssDisabled}\n`;\n\nconst useInnerRefHandlers = ({ datumInternalMeta, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { hydratedId } = datumInternalMeta;\n  const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n  const getShouldFocusItemOnRender = useInternalStore((state) => state.getShouldFocusItemOnRender);\n  const setShouldFocusItemOnRender = useInternalStore((state) => state.setShouldFocusItemOnRender);\n  const getFocusRegion = useInternalStore((state) => state.getFocusRegion);\n  const getFocusItem = useInternalStore((state) => state.getFocusItem);\n  const getFocusItemAction = useInternalStore((state) => state.getFocusItemAction);\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\n      // This is the only place we should do this check + focus\n      // See focusAndTabIndexManager for more info -- TLDR: virtualization + focus is a pain\n      const shouldThisItemHaveFocus =\n        currRegion === getFocusRegion() && currItemId === getFocusItem() && 'parent' === getFocusItemAction();\n\n      if (getShouldFocusItemOnRender() && shouldThisItemHaveFocus && node) {\n        node?.focus();\n        setShouldFocusItemOnRender(false);\n      }\n    },\n    [\n      currItemId,\n      currRegion,\n      getFocusItem,\n      getFocusItemAction,\n      getFocusRegion,\n      getShouldFocusItemOnRender,\n      setShouldFocusItemOnRender,\n      setZustandRef,\n    ],\n  );\n  return React.useMemo(() => ({ innerRefHandlerParentItem }), [innerRefHandlerParentItem]);\n};\n\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { datumInternalMeta, withDragNDrop, useSortableHelpers, hasMultipleSelection } = itemMeta;\n  const { isSelected, hydratedId } = datumInternalMeta;\n\n  const cols = useMemo(() => {\n    if (withDragNDrop) return ['5px', 'auto', '1fr', 'auto'];\n    return ['5px', '1fr', 'auto'];\n  }, [withDragNDrop]);\n\n  const setDndDraggingItemMeta = useInternalStore((state) => state.setDndDraggingItemMeta);\n  const getIsDragAndDropHappening = useInternalStore((state) => state.getIsDragAndDropHappening);\n  const isDraggingThisItem = useInternalStore((state) => state.dndDraggingItem?.hydratedId === hydratedId);\n  React.useEffect(() => {\n    if (isDraggingThisItem) {\n      setDndDraggingItemMeta(itemMeta);\n    }\n  }, [isDraggingThisItem, itemMeta, setDndDraggingItemMeta]);\n\n  const { selectItem, onShiftMouseDownPreventTextSelection } = useSelectionLogic(itemMeta);\n  const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n  const { onItemKeyDownSelection } = useItemKeyboardSelection(itemMeta);\n\n  const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n    (event) => {\n      onItemKeyDownSelection(event);\n      onItemContainerKeyDown(event);\n    },\n    [onItemKeyDownSelection, onItemContainerKeyDown],\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n  const { innerRefHandlerDnd } = useInnerRefActionHandlers(itemMeta);\n  const overId = useInternalStore((state) => state.overId);\n  const isDropValid = useInternalStore((state) => state.isDropValid);\n  const dropIndicatorPosition = useInternalStore((state) => state.dropIndicatorPosition);\n\n  const showDropIndicatorPosition = hydratedId === overId && dropIndicatorPosition;\n  const sortableRef = useSortableHelpers?.setNodeRef ?? (() => {});\n  return (\n    <ItemWrapper\n      isDragging={isDraggingThisItem}\n      isDndActive={getIsDragAndDropHappening()}\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      ref={mergeRefs(innerRefHandlerParentItem, sortableRef)}\n      onKeyDown={handleItemKeyDown}\n      onMouseDown={onShiftMouseDownPreventTextSelection}\n      tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n      role=\"option\"\n      aria-checked={isSelected}\n      id={`${hydratedId}-wrapper`}\n    >\n      <ItemSelection {...itemMeta} />\n      {withDragNDrop && useSortableHelpers ? (\n        <DragHandle\n          id={hydratedId}\n          useSortableHelpers={useSortableHelpers}\n          isDndActive={getIsDragAndDropHappening()}\n          isDragging={isDraggingThisItem}\n          innerRef={innerRefHandlerDnd}\n          disabled={hasMultipleSelection}\n        />\n      ) : null}\n      <ItemMiddleSection {...itemMeta} />\n      <ItemActions {...itemMeta} />\n      <DropIndicator vertical={false} dropIndicatorPosition={showDropIndicatorPosition} isDropValid={isDropValid} />\n    </ItemWrapper>\n  );\n});\n\nconst ItemSortable = withConditionalUseSortable(Item);\nexport { ItemSortable };\nexport default ItemSortable;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React", "useInnerRefActionHandlers"]
 }

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

@@ -70,7 +70,7 @@ const ItemActions = import_react.default.memo((itemMeta) => {
   } = itemMeta;
   const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;
   const { preventDrilldown, preventMove } = datumHydratables;
-  const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } = (0, import_useInnerRefHandlers.useInnerRefHandlers)(itemMeta);
+  const { innerRefHandlerDrilldown, innerRefHandlerMove } = (0, import_useInnerRefHandlers.useInnerRefHandlers)(itemMeta);
   const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = (0, import_useActionsHandlers.useActionsHandlers)(itemMeta);
   const drillDownAriaLabel = (0, import_react.useMemo)(() => `Drilldown into ${label} option`, [label]);
   const moveAriaLabel = (0, import_react.useMemo)(
@@ -87,7 +87,7 @@ const ItemActions = import_react.default.memo((itemMeta) => {
         onKeyDown: handleKeyDownSelectionBubbleUp,
         size: import_ds_button_v2.BUTTON_SIZES.S,
         innerRef: innerRefHandlerDrilldown,
-        tabIndex: shouldFocusDrilldown && !preventDrilldown ? 0 : -1,
+        tabIndex: -1,
         disabled: internallyDisabledDrilldown || preventDrilldown === true,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDrilldownIcon, { width: "1.538rem", height: "1.538rem" })
       }
@@ -101,7 +101,7 @@ const ItemActions = import_react.default.memo((itemMeta) => {
         onKeyDown: handleKeyDownSelectionBubbleUp,
         size: import_ds_button_v2.BUTTON_SIZES.S,
         innerRef: innerRefHandlerMove,
-        tabIndex: shouldFocusMove && !preventMove ? 0 : -1,
+        tabIndex: -1,
         disabled: internallyDisabledMove || preventMove === true,
         children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseMediumIcon, { width: "1.538rem", height: "1.538rem" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrowShortRightIcon, { width: "1.538rem", height: "1.538rem" })
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Item/ItemActions/ItemActions.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsHandlers } from './useActionsHandlers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n  height: 1.692rem !important;\n  svg {\n    fill: brand-600;\n  }\n  :disabled svg {\n    fill: neutral-200 !important;\n  }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['1.538rem', '1.538rem'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const {\n    datumHydratables,\n    isDestinationPanel,\n    datumRenderFlags,\n    datum: { label },\n  } = itemMeta;\n  // withActions is calculated in /src/config/configureAutoCalculated.ts\n  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n  const { preventDrilldown, preventMove } = datumHydratables;\n  const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } =\n    useInnerRefHandlers(itemMeta);\n  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n  const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n  const moveAriaLabel = useMemo(\n    () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n    [label, isDestinationPanel],\n  );\n\n  return (\n    <StyledItemActions cols={actionsCols} gutter=\"xxs\" pl=\"xs\" pr=\"xxs\" alignItems=\"center\">\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={drillDownAriaLabel}\n              onClick={handleClickDrilldown}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={shouldFocusDrilldown && !preventDrilldown ? 0 : -1}\n              disabled={internallyDisabledDrilldown || preventDrilldown === true}\n            >\n              <StyledDrilldownIcon width=\"1.538rem\" height=\"1.538rem\" />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={moveAriaLabel}\n              onClick={handleClickSingleMove}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={shouldFocusMove && !preventMove ? 0 : -1}\n              disabled={internallyDisabledMove || preventMove === true}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n              ) : (\n                <StyledArrowShortRightIcon width=\"1.538rem\" height=\"1.538rem\" />\n              )}\n            </StyledButton>\n          </StyledItemActionWrapper>\n        </>\n      ) : (\n        // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n        <>\n          <div />\n          <div />\n        </>\n      )}\n    </StyledItemActions>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Df;AA1DR,mBAA+B;AAC/B,uBAAuB;AACvB,qBAAqB;AACrB,0BAAyC;AACzC,sBAA+D;AAE/D,gCAAmC;AACnC,iCAAoC;AACpC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,qBAAqB,CAAC;AAC7G,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAClH,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,0BAAsB,yBAAO,kCAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,YAAY,UAAU;AAEpC,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI;AAEJ,QAAM,EAAE,aAAa,6BAA6B,uBAAuB,IAAI;AAC7E,QAAM,EAAE,kBAAkB,YAAY,IAAI;AAC1C,QAAM,EAAE,sBAAsB,iBAAiB,0BAA0B,oBAAoB,QAC3F,gDAAoB,QAAQ;AAC9B,QAAM,EAAE,sBAAsB,uBAAuB,+BAA+B,QAAI,8CAAmB,QAAQ;AACnH,QAAM,yBAAqB,sBAAQ,MAAM,kBAAkB,gBAAgB,CAAC,KAAK,CAAC;AAClF,QAAM,oBAAgB;AAAA,IACpB,MAAM,eAAe,cAAc,qBAAqB,WAAW;AAAA,IACnE,CAAC,OAAO,kBAAkB;AAAA,EAC5B;AAEA,SACE,4CAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,4EACE;AAAA,gDAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,wBAAwB,CAAC,mBAAmB,IAAI;AAAA,QAC1D,UAAU,+BAA+B,qBAAqB;AAAA,QAE9D,sDAAC,uBAAoB,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC1D,GACF;AAAA,IACA,4CAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU,mBAAmB,CAAC,cAAc,IAAI;AAAA,QAChD,UAAU,0BAA0B,gBAAgB;AAAA,QAEnD,+BACC,4CAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,4CAAC,6BAA0B,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAElE,GACF;AAAA,KACF,IAGA,4EACE;AAAA,gDAAC,SAAI;AAAA,IACL,4CAAC,SAAI;AAAA,KACP,GAEJ;AAEJ,CAAC;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsHandlers } from './useActionsHandlers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../../config/DSShuttleV2Definitions';\n\nconst StyledItemActions = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTIONS_WRAPPER })``;\nconst StyledItemActionWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_WRAPPER })``;\nconst StyledButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.ITEM_ACTION_BTN })`\n  height: 1.692rem !important;\n  svg {\n    fill: brand-600;\n  }\n  :disabled svg {\n    fill: neutral-200 !important;\n  }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_DRILLDOWN_ICON,\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})``;\n\nconst actionsCols = ['1.538rem', '1.538rem'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const {\n    datumHydratables,\n    isDestinationPanel,\n    datumRenderFlags,\n    datum: { label },\n  } = itemMeta;\n  // withActions is calculated in /src/config/configureAutoCalculated.ts\n  const { withActions, internallyDisabledDrilldown, internallyDisabledMove } = datumRenderFlags;\n  const { preventDrilldown, preventMove } = datumHydratables;\n  const { innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);\n  const { handleClickDrilldown, handleClickSingleMove, handleKeyDownSelectionBubbleUp } = useActionsHandlers(itemMeta);\n  const drillDownAriaLabel = useMemo(() => `Drilldown into ${label} option`, [label]);\n  const moveAriaLabel = useMemo(\n    () => `Move option ${label} into ${isDestinationPanel ? 'source' : 'destination'} panel`,\n    [label, isDestinationPanel],\n  );\n\n  return (\n    <StyledItemActions cols={actionsCols} gutter=\"xxs\" pl=\"xs\" pr=\"xxs\" alignItems=\"center\">\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={drillDownAriaLabel}\n              onClick={handleClickDrilldown}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledDrilldown || preventDrilldown === true}\n            >\n              <StyledDrilldownIcon width=\"1.538rem\" height=\"1.538rem\" />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              aria-label={moveAriaLabel}\n              onClick={handleClickSingleMove}\n              onKeyDown={handleKeyDownSelectionBubbleUp}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={-1} // We overwrite it via vanilla js on the focus manager\n              disabled={internallyDisabledMove || preventMove === true}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon width=\"1.538rem\" height=\"1.538rem\" />\n              ) : (\n                <StyledArrowShortRightIcon width=\"1.538rem\" height=\"1.538rem\" />\n              )}\n            </StyledButton>\n          </StyledItemActionWrapper>\n        </>\n      ) : (\n        // this is a place-holder used for mantainting the grid spacing when item has no actions (so when item is soft-deleted)\n        <>\n          <div />\n          <div />\n        </>\n      )}\n    </StyledItemActions>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDf;AAzDR,mBAA+B;AAC/B,uBAAuB;AACvB,qBAAqB;AACrB,0BAAyC;AACzC,sBAA+D;AAE/D,gCAAmC;AACnC,iCAAoC;AACpC,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,qBAAqB,CAAC;AAC7G,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAClH,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,0BAAsB,yBAAO,kCAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AACD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAED,MAAM,cAAc,CAAC,YAAY,UAAU;AAEpC,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI;AAEJ,QAAM,EAAE,aAAa,6BAA6B,uBAAuB,IAAI;AAC7E,QAAM,EAAE,kBAAkB,YAAY,IAAI;AAC1C,QAAM,EAAE,0BAA0B,oBAAoB,QAAI,gDAAoB,QAAQ;AACtF,QAAM,EAAE,sBAAsB,uBAAuB,+BAA+B,QAAI,8CAAmB,QAAQ;AACnH,QAAM,yBAAqB,sBAAQ,MAAM,kBAAkB,gBAAgB,CAAC,KAAK,CAAC;AAClF,QAAM,oBAAgB;AAAA,IACpB,MAAM,eAAe,cAAc,qBAAqB,WAAW;AAAA,IACnE,CAAC,OAAO,kBAAkB;AAAA,EAC5B;AAEA,SACE,4CAAC,qBAAkB,MAAM,aAAa,QAAO,OAAM,IAAG,MAAK,IAAG,OAAM,YAAW,UAC5E,wBACC,4EACE;AAAA,gDAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,+BAA+B,qBAAqB;AAAA,QAE9D,sDAAC,uBAAoB,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC1D,GACF;AAAA,IACA,4CAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,cAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU,0BAA0B,gBAAgB;AAAA,QAEnD,+BACC,4CAAC,yBAAsB,OAAM,YAAW,QAAO,YAAW,IAE1D,4CAAC,6BAA0B,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAElE,GACF;AAAA,KACF,IAGA,4EACE;AAAA,gDAAC,SAAI;AAAA,IACL,4CAAC,SAAI;AAAA,KACP,GAEJ;AAEJ,CAAC;",
   "names": ["React"]
 }