@elliemae/ds-shuttle-v2 3.8.0-next.3 → 3.8.0-next.6

package/dist/cjs/DSShuttleV2.js

@@ -35,14 +35,6 @@ var import_useStore = require("./config/useStore");
 var import_MainContent = require("./parts/MainContent");
 const ConfiguredComponent = import_react.default.memo((props) => {
   (0, import_useShuttleV2.useShuttleV2)(props.userProps);
-  const store = (0, import_useStore.useStore)((state) => state);
-  (0, import_react.useEffect)(() => {
-    console.group("-----------------------------------------");
-    console.groupCollapsed("Full Store");
-    console.log(store);
-    console.groupEnd();
-    console.groupEnd();
-  }, [store]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MainContent.MainContent, {});
 });
 const DSShuttleV2 = (props) => {

package/dist/cjs/DSShuttleV2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSShuttleV2.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useEffect } from 'react';\nimport { useShuttleV2 } from './config/useShuttleV2';\nimport { Provider, useShuttleV2StoreConfig, useStore } from './config/useStore';\nimport { type DSShuttleV2T } from './react-desc-prop-types';\nimport { MainContent } from './parts/MainContent';\n\nconst ConfiguredComponent = React.memo((props: { userProps: DSShuttleV2T.Props }) => {\n  useShuttleV2(props.userProps);\n  const store = useStore((state) => state);\n  useEffect(() => {\n    console.group('-----------------------------------------');\n    console.groupCollapsed('Full Store');\n    console.log(store);\n    console.groupEnd();\n    console.groupEnd();\n  }, [store]);\n\n  return <MainContent />;\n});\n\nexport const DSShuttleV2 = (props: DSShuttleV2T.Props) => {\n  const createStore = useShuttleV2StoreConfig(props);\n\n  return (\n    <Provider createStore={createStore}>\n      <ConfiguredComponent userProps={props} />\n    </Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAiC;AACjC,0BAA6B;AAC7B,sBAA4D;AAE5D,yBAA4B;AAE5B,MAAM,sBAAsB,aAAAA,QAAM,KAAK,CAAC,UAA6C;AACnF,wCAAa,MAAM,SAAS;AAC5B,QAAM,YAAQ,0BAAS,CAAC,UAAU,KAAK;AACvC,8BAAU,MAAM;AACd,YAAQ,MAAM,2CAA2C;AACzD,YAAQ,eAAe,YAAY;AACnC,YAAQ,IAAI,KAAK;AACjB,YAAQ,SAAS;AACjB,YAAQ,SAAS;AAAA,EACnB,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO,4CAAC,kCAAY;AACtB,CAAC;AAEM,MAAM,cAAc,CAAC,UAA8B;AACxD,QAAM,kBAAc,yCAAwB,KAAK;AAEjD,SACE,4CAAC;AAAA,IAAS;AAAA,IACR,sDAAC;AAAA,MAAoB,WAAW;AAAA,KAAO;AAAA,GACzC;AAEJ;",
+  "sourcesContent": ["import React, { useEffect } from 'react';\nimport { useShuttleV2 } from './config/useShuttleV2';\nimport { Provider, useShuttleV2StoreConfig, useStore } from './config/useStore';\nimport { type DSShuttleV2T } from './react-desc-prop-types';\nimport { MainContent } from './parts/MainContent';\n\nconst ConfiguredComponent = React.memo((props: { userProps: DSShuttleV2T.Props }) => {\n  useShuttleV2(props.userProps);\n  // const store = useStore((state) => state);\n  // useEffect(() => {\n  //   console.group('-----------------------------------------');\n  //   console.groupCollapsed('Full Store');\n  //   console.log(store);\n  //   console.groupEnd();\n  //   console.groupEnd();\n  // }, [store]);\n\n  return <MainContent />;\n});\n\nexport const DSShuttleV2 = (props: DSShuttleV2T.Props) => {\n  const createStore = useShuttleV2StoreConfig(props);\n\n  return (\n    <Provider createStore={createStore}>\n      <ConfiguredComponent userProps={props} />\n    </Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAiC;AACjC,0BAA6B;AAC7B,sBAA4D;AAE5D,yBAA4B;AAE5B,MAAM,sBAAsB,aAAAA,QAAM,KAAK,CAAC,UAA6C;AACnF,wCAAa,MAAM,SAAS;AAU5B,SAAO,4CAAC,kCAAY;AACtB,CAAC;AAEM,MAAM,cAAc,CAAC,UAA8B;AACxD,QAAM,kBAAc,yCAAwB,KAAK;AAEjD,SACE,4CAAC;AAAA,IAAS;AAAA,IACR,sDAAC;AAAA,MAAoB,WAAW;AAAA,KAAO;AAAA,GACzC;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/EmptyItems.js

@@ -0,0 +1,45 @@
+"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(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var EmptyItems_exports = {};
+__export(EmptyItems_exports, {
+  EmptyItems: () => EmptyItems
+});
+module.exports = __toCommonJS(EmptyItems_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+const StyledEmptyListWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "empty-list-wrapper" })`
+  color: neutral-500;
+`;
+const EmptyItems = (panelMetaInfo) => {
+  const { isDestinationPanel = false } = panelMetaInfo;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledEmptyListWrapper, {
+    alignItems: "center",
+    justifyContent: "center",
+    children: isDestinationPanel ? "Destination is empty" : "Source is empty"
+  });
+};
+//# sourceMappingURL=EmptyItems.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/EmptyItems.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2InternalsT } from '../sharedTypes';\n\nconst StyledEmptyListWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'empty-list-wrapper' })`\n  color: neutral-500;\n`;\nexport const EmptyItems = (panelMetaInfo: DSShuttleV2InternalsT.PanelMetaInfo) => {\n  const { isDestinationPanel = false } = panelMetaInfo;\n  return (\n    <StyledEmptyListWrapper alignItems=\"center\" justifyContent=\"center\">\n      {isDestinationPanel ? 'Destination is empty' : 'Source is empty'}\n    </StyledEmptyListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,uBAAuB;AACvB,qBAAqB;AAGrB,MAAM,6BAAyB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,qBAAqB,CAAC;AAAA;AAAA;AAG1F,MAAM,aAAa,CAAC,kBAAuD;AAChF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,SACE,4CAAC;AAAA,IAAuB,YAAW;AAAA,IAAS,gBAAe;AAAA,IACxD,+BAAqB,yBAAyB;AAAA,GACjD;AAEJ;",
+  "names": []
+}

package/dist/cjs/parts/Header.js

@@ -33,8 +33,13 @@ var import_react = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_button = require("@elliemae/ds-button");
+var import_ds_system = require("@elliemae/ds-system");
 var import_useStore = require("../config/useStore");
 var import_useFocusTracker = require("../config/useFocusTracker");
+const StyledIconButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: "ds-shuttle-v2", slot: "header-search-icon" })`
+  width: 16px;
+  height: 16px;
+`;
 const Header = import_react.default.memo(({ isDestinationPanel }) => {
   const HeaderRenderer = (0, import_useStore.useStore)((state) => isDestinationPanel ? state.DestinationHeader : state.SourceHeader);
   const onSearchBarOpen = (0, import_useStore.useStore)(
@@ -66,11 +71,13 @@ const Header = import_react.default.memo(({ isDestinationPanel }) => {
     cols,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderRenderer, {}),
-      onSearchBarOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.DSButtonV2, {
+      onSearchBarOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledIconButton, {
         buttonType: "icon",
-        size: import_ds_button.BUTTON_SIZES.S,
         onClick: handleFilterClick,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, {
+          width: "14px",
+          height: "14px"
+        })
       }) : null
     ]
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Header.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button';\nimport { useStore } from '../config/useStore';\nimport { useFocusTracker } from '../config/useFocusTracker';\nimport { type DSShuttleV2InternalsT } from '../sharedTypes';\n\nexport const Header = React.memo(({ isDestinationPanel }: DSShuttleV2InternalsT.PanelMetaInfo) => {\n  const HeaderRenderer = useStore((state) => (isDestinationPanel ? state.DestinationHeader : state.SourceHeader));\n  const onSearchBarOpen = useStore((state) =>\n    isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar,\n  );\n  const isSearchBarOpen = useStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const { trackFocusRegionHeader, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const onHeaderFocus = React.useCallback(() => {\n    trackFocusRegionHeader(isDestinationPanel);\n    trackFocusItemReset();\n    trackFocusActionReset();\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionHeader]);\n\n  const handleFilterClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n    (event) => {\n      onSearchBarOpen?.(!isSearchBarOpen, { event });\n    },\n    [isSearchBarOpen, onSearchBarOpen],\n  );\n\n  const cols = React.useMemo(() => {\n    const finalCols = ['1fr'];\n    if (onSearchBarOpen) finalCols.push('auto');\n    return finalCols;\n  }, [onSearchBarOpen]);\n\n  return (\n    <Grid onFocus={onHeaderFocus} cols={cols}>\n      <HeaderRenderer />\n      {onSearchBarOpen ? (\n        <DSButtonV2 buttonType=\"icon\" size={BUTTON_SIZES.S} onClick={handleFilterClick}>\n          <Search />\n        </DSButtonV2>\n      ) : null}\n    </Grid>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,qBAAqB;AACrB,sBAAuB;AACvB,uBAAyC;AACzC,sBAAyB;AACzB,6BAAgC;AAGzB,MAAM,SAAS,aAAAA,QAAM,KAAK,CAAC,EAAE,mBAAmB,MAA2C;AAChG,QAAM,qBAAiB,0BAAS,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AAC9G,QAAM,sBAAkB;AAAA,IAAS,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,sBAAkB;AAAA,IAAS,CAAC,UAChC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,qBAAqB,sBAAsB,QAAI,wCAAgB;AAC/F,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM;AAC5C,2BAAuB,kBAAkB;AACzC,wBAAoB;AACpB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,sBAAsB,CAAC;AAE3F,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,UAAU;AACT,wBAAkB,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAAA,IAC/C;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,EACnC;AAEA,QAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAC/B,UAAM,YAAY,CAAC,KAAK;AACxB,QAAI;AAAiB,gBAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,SACE,6CAAC;AAAA,IAAK,SAAS;AAAA,IAAe;AAAA,IAC5B;AAAA,kDAAC,kBAAe;AAAA,MACf,kBACC,4CAAC;AAAA,QAAW,YAAW;AAAA,QAAO,MAAM,8BAAa;AAAA,QAAG,SAAS;AAAA,QAC3D,sDAAC,0BAAO;AAAA,OACV,IACE;AAAA;AAAA,GACN;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n  DSButtonV2,\n  // BUTTON_SIZES\n} from '@elliemae/ds-button';\nimport { styled } from '@elliemae/ds-system';\nimport { useStore } from '../config/useStore';\nimport { useFocusTracker } from '../config/useFocusTracker';\nimport { type DSShuttleV2InternalsT } from '../sharedTypes';\nconst StyledIconButton = styled(DSButtonV2, { name: 'ds-shuttle-v2', slot: 'header-search-icon' })`\n  width: 16px;\n  height: 16px;\n`;\nexport const Header = React.memo(({ isDestinationPanel }: DSShuttleV2InternalsT.PanelMetaInfo) => {\n  const HeaderRenderer = useStore((state) => (isDestinationPanel ? state.DestinationHeader : state.SourceHeader));\n  const onSearchBarOpen = useStore((state) =>\n    isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar,\n  );\n  const isSearchBarOpen = useStore((state) =>\n    isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n  );\n  const { trackFocusRegionHeader, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();\n  const onHeaderFocus = React.useCallback(() => {\n    trackFocusRegionHeader(isDestinationPanel);\n    trackFocusItemReset();\n    trackFocusActionReset();\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionHeader]);\n\n  const handleFilterClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n    (event) => {\n      onSearchBarOpen?.(!isSearchBarOpen, { event });\n    },\n    [isSearchBarOpen, onSearchBarOpen],\n  );\n\n  const cols = React.useMemo(() => {\n    const finalCols = ['1fr'];\n    if (onSearchBarOpen) finalCols.push('auto');\n    return finalCols;\n  }, [onSearchBarOpen]);\n\n  return (\n    <Grid onFocus={onHeaderFocus} cols={cols}>\n      <HeaderRenderer />\n      {onSearchBarOpen ? (\n        <StyledIconButton buttonType=\"icon\" onClick={handleFilterClick}>\n          <Search width=\"14px\" height=\"14px\" />\n        </StyledIconButton>\n      ) : null}\n    </Grid>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,qBAAqB;AACrB,sBAAuB;AACvB,uBAGO;AACP,uBAAuB;AACvB,sBAAyB;AACzB,6BAAgC;AAEhC,MAAM,uBAAmB,yBAAO,6BAAY,EAAE,MAAM,iBAAiB,MAAM,qBAAqB,CAAC;AAAA;AAAA;AAAA;AAI1F,MAAM,SAAS,aAAAA,QAAM,KAAK,CAAC,EAAE,mBAAmB,MAA2C;AAChG,QAAM,qBAAiB,0BAAS,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AAC9G,QAAM,sBAAkB;AAAA,IAAS,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,sBAAkB;AAAA,IAAS,CAAC,UAChC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,qBAAqB,sBAAsB,QAAI,wCAAgB;AAC/F,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM;AAC5C,2BAAuB,kBAAkB;AACzC,wBAAoB;AACpB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,sBAAsB,CAAC;AAE3F,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,UAAU;AACT,wBAAkB,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAAA,IAC/C;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,EACnC;AAEA,QAAM,OAAO,aAAAA,QAAM,QAAQ,MAAM;AAC/B,UAAM,YAAY,CAAC,KAAK;AACxB,QAAI;AAAiB,gBAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,SACE,6CAAC;AAAA,IAAK,SAAS;AAAA,IAAe;AAAA,IAC5B;AAAA,kDAAC,kBAAe;AAAA,MACf,kBACC,4CAAC;AAAA,QAAiB,YAAW;AAAA,QAAO,SAAS;AAAA,QAC3C,sDAAC;AAAA,UAAO,OAAM;AAAA,UAAO,QAAO;AAAA,SAAO;AAAA,OACrC,IACE;AAAA;AAAA,GACN;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -53,6 +53,7 @@ const ItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "d
     outline: 2px solid brand-700;
     outline-offset: -2px;
   }
+  border-bottom: 1px solid neutral-100;
 `;
 const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
   const { isFirst, isLast } = item;

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": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useStore } 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';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\nconst ItemWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-wrapper' })`\n  min-height: 36px;\n  :hover {\n    background-color: brand-200;\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  }\n  :focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n`;\n\nconst useInnerRefHandlers = ({ item, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { isFirst, isLast } = item;\n  const focusRegion = useStore((state) => state.focusRegion);\n  const focusItem = useStore((state) => state.focusItem);\n  const focusItemAction = useStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = item.original.id;\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) => {\n      if (shouldFocus) {\n        node?.focus();\n      }\n    },\n    [shouldFocus],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nconst cols = ['5px', '1fr', 'auto'];\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item } = itemMeta;\n  const { original, isSelected } = item;\n  const { id } = original;\n\n  const selectItem = useSelectionLogic(itemMeta);\n  const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n  const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n    (event) => {\n      const { key } = event;\n      // Spacebar AND ' ' are cross-browser compatibility thing\n      if (['Spacebar', ' ', 'Enter'].includes(key)) {\n        event.preventDefault();\n        event.stopPropagation();\n        selectItem(event);\n      }\n      onItemContainerKeyDown(event);\n    },\n    [onItemContainerKeyDown, selectItem],\n  );\n  const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n\n  return (\n    <ItemWrapper\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      onKeyDown={handleItemKeyDown}\n      ref={innerRefHandlerParentItem}\n      tabIndex={shouldFocus ? 0 : -1}\n      role=\"checkbox\"\n      aria-checked={isSelected}\n      id={id}\n    >\n      <ItemSelection {...itemMeta} />\n      <ItemMiddleSection {...itemMeta} />\n      <ItemActions {...itemMeta} />\n    </ItemWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,sBAAyB;AACzB,2BAA8B;AAC9B,yBAA4B;AAC5B,+BAAkC;AAClC,+BAAkC;AAClC,oCAAuC;AACvC,uBAAgC;AAGhC,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBhF,MAAM,sBAAsB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AACnF,QAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAM,kBAAc,0BAAS,CAAC,UAAU,MAAM,WAAW;AACzD,QAAM,gBAAY,0BAAS,CAAC,UAAU,MAAM,SAAS;AACrD,QAAM,sBAAkB,0BAAS,CAAC,UAAU,MAAM,eAAe;AACjE,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa,KAAK,SAAS;AAEjC,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,MACE,gBAAgB,cAChB,oBAAoB,aACnB,cAAc,cAAe,WAAW,cAAc,WAAa,UAAU,cAAc;AAAA,IAC9F,CAAC,YAAY,YAAY,WAAW,iBAAiB,aAAa,SAAS,MAAM;AAAA,EACnF;AACA,QAAM,4BAA4B,aAAAA,QAAM;AAAA,IACtC,CAAC,SAAyB;AACxB,UAAI,aAAa;AACf,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,aAAa,0BAA0B,IAAI,CAAC,aAAa,yBAAyB,CAAC;AACnH;AAEA,MAAM,OAAO,CAAC,OAAO,OAAO,MAAM;AAC3B,MAAM,OAAO,aAAAA,QAAM,KAAK,CAAC,aAAoC;AAClE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,UAAU,WAAW,IAAI;AACjC,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,iBAAa,4CAAkB,QAAQ;AAC7C,QAAM,EAAE,uBAAuB,QAAI,sDAAuB,QAAQ;AAClE,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,UAAU;AACT,YAAM,EAAE,IAAI,IAAI;AAEhB,UAAI,CAAC,YAAY,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC5C,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,mBAAW,KAAK;AAAA,MAClB;AACA,6BAAuB,KAAK;AAAA,IAC9B;AAAA,IACA,CAAC,wBAAwB,UAAU;AAAA,EACrC;AACA,QAAM,EAAE,aAAa,0BAA0B,IAAI,oBAAoB,QAAQ;AAE/E,SACE,6CAAC;AAAA,IACC;AAAA,IACA,YAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,cAAc,IAAI;AAAA,IAC5B,MAAK;AAAA,IACL,gBAAc;AAAA,IACd;AAAA,IAEA;AAAA,kDAAC;AAAA,QAAe,GAAG;AAAA,OAAU;AAAA,MAC7B,4CAAC;AAAA,QAAmB,GAAG;AAAA,OAAU;AAAA,MACjC,4CAAC;AAAA,QAAa,GAAG;AAAA,OAAU;AAAA;AAAA,GAC7B;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\nimport { useStore } 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';\n\n// we are using the class-name added via slot for the children `:hover` styling of icon colors\nconst ItemWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-wrapper' })`\n  min-height: 36px;\n  :hover {\n    background-color: brand-200;\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  }\n  :focus {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n  }\n  border-bottom: 1px solid neutral-100;\n`;\n\nconst useInnerRefHandlers = ({ item, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\n  const { isFirst, isLast } = item;\n  const focusRegion = useStore((state) => state.focusRegion);\n  const focusItem = useStore((state) => state.focusItem);\n  const focusItemAction = useStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n  const currItemId = item.original.id;\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) => {\n      if (shouldFocus) {\n        node?.focus();\n      }\n    },\n    [shouldFocus],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nconst cols = ['5px', '1fr', 'auto'];\nexport const Item = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item } = itemMeta;\n  const { original, isSelected } = item;\n  const { id } = original;\n\n  const selectItem = useSelectionLogic(itemMeta);\n  const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);\n  const handleItemKeyDown: React.KeyboardEventHandler<HTMLDivElement> = React.useCallback(\n    (event) => {\n      const { key } = event;\n      // Spacebar AND ' ' are cross-browser compatibility thing\n      if (['Spacebar', ' ', 'Enter'].includes(key)) {\n        event.preventDefault();\n        event.stopPropagation();\n        selectItem(event);\n      }\n      onItemContainerKeyDown(event);\n    },\n    [onItemContainerKeyDown, selectItem],\n  );\n  const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);\n\n  return (\n    <ItemWrapper\n      cols={cols}\n      alignItems=\"center\"\n      onClick={selectItem}\n      onKeyDown={handleItemKeyDown}\n      ref={innerRefHandlerParentItem}\n      tabIndex={shouldFocus ? 0 : -1}\n      role=\"checkbox\"\n      aria-checked={isSelected}\n      id={id}\n    >\n      <ItemSelection {...itemMeta} />\n      <ItemMiddleSection {...itemMeta} />\n      <ItemActions {...itemMeta} />\n    </ItemWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,sBAAyB;AACzB,2BAA8B;AAC9B,yBAA4B;AAC5B,+BAAkC;AAClC,+BAAkC;AAClC,oCAAuC;AACvC,uBAAgC;AAGhC,MAAM,kBAAc,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBhF,MAAM,sBAAsB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AACnF,QAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAM,kBAAc,0BAAS,CAAC,UAAU,MAAM,WAAW;AACzD,QAAM,gBAAY,0BAAS,CAAC,UAAU,MAAM,SAAS;AACrD,QAAM,sBAAkB,0BAAS,CAAC,UAAU,MAAM,eAAe;AACjE,QAAM,aAAa,qBAAqB,iCAAgB,yBAAyB,iCAAgB;AACjG,QAAM,aAAa,KAAK,SAAS;AAEjC,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,MACE,gBAAgB,cAChB,oBAAoB,aACnB,cAAc,cAAe,WAAW,cAAc,WAAa,UAAU,cAAc;AAAA,IAC9F,CAAC,YAAY,YAAY,WAAW,iBAAiB,aAAa,SAAS,MAAM;AAAA,EACnF;AACA,QAAM,4BAA4B,aAAAA,QAAM;AAAA,IACtC,CAAC,SAAyB;AACxB,UAAI,aAAa;AACf,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,aAAa,0BAA0B,IAAI,CAAC,aAAa,yBAAyB,CAAC;AACnH;AAEA,MAAM,OAAO,CAAC,OAAO,OAAO,MAAM;AAC3B,MAAM,OAAO,aAAAA,QAAM,KAAK,CAAC,aAAoC;AAClE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,UAAU,WAAW,IAAI;AACjC,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,iBAAa,4CAAkB,QAAQ;AAC7C,QAAM,EAAE,uBAAuB,QAAI,sDAAuB,QAAQ;AAClE,QAAM,oBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,UAAU;AACT,YAAM,EAAE,IAAI,IAAI;AAEhB,UAAI,CAAC,YAAY,KAAK,OAAO,EAAE,SAAS,GAAG,GAAG;AAC5C,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,mBAAW,KAAK;AAAA,MAClB;AACA,6BAAuB,KAAK;AAAA,IAC9B;AAAA,IACA,CAAC,wBAAwB,UAAU;AAAA,EACrC;AACA,QAAM,EAAE,aAAa,0BAA0B,IAAI,oBAAoB,QAAQ;AAE/E,SACE,6CAAC;AAAA,IACC;AAAA,IACA,YAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,cAAc,IAAI;AAAA,IAC5B,MAAK;AAAA,IACL,gBAAc;AAAA,IACd;AAAA,IAEA;AAAA,kDAAC;AAAA,QAAe,GAAG;AAAA,OAAU;AAAA,MAC7B,4CAAC;AAAA,QAAmB,GAAG;AAAA,OAAU;AAAA,MACjC,4CAAC;AAAA,QAAa,GAAG;AAAA,OAAU;AAAA;AAAA,GAC7B;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -34,17 +34,10 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_button = require("@elliemae/ds-button");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_separator = require("@elliemae/ds-separator");
 var import_itemMovementHelpers = require("../../../config/itemMovementHelpers");
 var import_useInnerRefHandlers = require("./useInnerRefHandlers");
 const StyledItemActions = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "item-actions-wrapper" })``;
 const StyledItemActionWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "item-action-wrapper" })``;
-const StyledItemActionsSeparatorWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: "ds-shuttle-v2",
-  slot: "item-actions-separator-wrapper"
-})`
-  height: 24px;
-`;
 const StyledButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: "ds-shuttle-v2", slot: "item-action-btn" })`
   height: 22px !important;
   svg {
@@ -66,67 +59,62 @@ const StyledArrowShortRightIcon = (0, import_ds_system.styled)(import_ds_icons.A
   name: "ds-shuttle-v2",
   slot: "item-action-btn-to-destination-icon"
 })``;
-const actionsCols = ["1px", "20px", "20px"];
+const actionsCols = [
+  "20px",
+  "20px"
+];
 const ItemActions = import_react.default.memo((itemMeta) => {
   const { item, isDestinationPanel } = itemMeta;
   const { original, withActions } = item;
   const { preventDrilldown, preventMove } = original;
   const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } = (0, import_useInnerRefHandlers.useInnerRefHandlers)(itemMeta);
   const { handleDrilldown, handleSingleMove } = (0, import_itemMovementHelpers.useActionsClickHandlers)(itemMeta);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledItemActions, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemActions, {
     cols: actionsCols,
     gutter: "xxs",
     pl: "xs",
     pr: "xxs",
     alignItems: "center",
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemActionsSeparatorWrapper, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_separator.DSSeparatorV2, {
-          isVertical: true,
-          color: "#E0E3E8"
-        })
-      }),
-      withActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemActionWrapper, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledButton, {
-              buttonType: "icon",
-              onClick: handleDrilldown,
-              size: import_ds_button.BUTTON_SIZES.S,
-              innerRef: innerRefHandlerDrilldown,
-              tabIndex: shouldFocusDrilldown && !preventDrilldown ? 0 : -1,
-              disabled: preventDrilldown === true,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDrilldownIcon, {
-                width: "20px",
-                height: "20px"
-              })
+    children: withActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemActionWrapper, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledButton, {
+            buttonType: "icon",
+            onClick: handleDrilldown,
+            size: import_ds_button.BUTTON_SIZES.S,
+            innerRef: innerRefHandlerDrilldown,
+            tabIndex: shouldFocusDrilldown && !preventDrilldown ? 0 : -1,
+            disabled: preventDrilldown === true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDrilldownIcon, {
+              width: "20px",
+              height: "20px"
             })
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemActionWrapper, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledButton, {
-              buttonType: "icon",
-              onClick: handleSingleMove,
-              size: import_ds_button.BUTTON_SIZES.S,
-              innerRef: innerRefHandlerMove,
-              tabIndex: shouldFocusMove && !preventMove ? 0 : -1,
-              disabled: preventMove === true,
-              children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseMediumIcon, {
-                width: "20px",
-                height: "20px"
-              }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrowShortRightIcon, {
-                width: "20px",
-                height: "20px"
-              })
+          })
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemActionWrapper, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledButton, {
+            buttonType: "icon",
+            onClick: handleSingleMove,
+            size: import_ds_button.BUTTON_SIZES.S,
+            innerRef: innerRefHandlerMove,
+            tabIndex: shouldFocusMove && !preventMove ? 0 : -1,
+            disabled: preventMove === true,
+            children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseMediumIcon, {
+              width: "20px",
+              height: "20px"
+            }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrowShortRightIcon, {
+              width: "20px",
+              height: "20px"
             })
           })
-        ]
-      }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
-        ]
-      })
-    ]
+        })
+      ]
+    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
+      ]
+    })
   });
 });
 //# sourceMappingURL=ItemActions.js.map

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 from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { DSSeparatorV2 } from '@elliemae/ds-separator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsClickHandlers } from '../../../config/itemMovementHelpers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\n\nconst StyledItemActions = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-actions-wrapper' })``;\nconst StyledItemActionWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-action-wrapper' })``;\nconst StyledItemActionsSeparatorWrapper = styled(Grid, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-actions-separator-wrapper',\n})`\n  height: 24px;\n`;\nconst StyledButton = styled(DSButtonV2, { name: 'ds-shuttle-v2', slot: 'item-action-btn' })`\n  height: 22px !important;\n  svg {\n    fill: brand-600;\n  }\n  :disabled svg {\n    fill: neutral-200 !important;\n  }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-drilldown-icon',\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-source-icon',\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-destination-icon',\n})``;\n\n// 1px separator, 20px icon button/placeholder, 20px icon button/placeholder\nconst actionsCols = ['1px', '20px', '20px'];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item, isDestinationPanel } = itemMeta;\n  const { original, withActions } = item;\n  const { preventDrilldown, preventMove } = original;\n  const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } =\n    useInnerRefHandlers(itemMeta);\n  const { handleDrilldown, handleSingleMove } = useActionsClickHandlers(itemMeta);\n\n  return (\n    <StyledItemActions cols={actionsCols} gutter=\"xxs\" pl=\"xs\" pr=\"xxs\" alignItems=\"center\">\n      <StyledItemActionsSeparatorWrapper>\n        <DSSeparatorV2 isVertical color=\"#E0E3E8\" />\n      </StyledItemActionsSeparatorWrapper>\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleDrilldown}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={shouldFocusDrilldown && !preventDrilldown ? 0 : -1}\n              disabled={preventDrilldown === true}\n            >\n              <StyledDrilldownIcon width=\"20px\" height=\"20px\" />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleSingleMove}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={shouldFocusMove && !preventMove ? 0 : -1}\n              disabled={preventMove === true}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon width=\"20px\" height=\"20px\" />\n              ) : (\n                <StyledArrowShortRightIcon width=\"20px\" height=\"20px\" />\n              )}\n            </StyledButton>\n          </StyledItemActionWrapper>\n        </>\n      ) : (\n        // this is a place-holder user for mantainting the grid spacing\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;ADAvB;AAAA,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,uBAAyC;AACzC,sBAA+D;AAC/D,0BAA8B;AAE9B,iCAAwC;AACxC,iCAAoC;AAEpC,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAC9F,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,sBAAsB,CAAC;AACnG,MAAM,wCAAoC,yBAAO,qBAAM;AAAA,EACrD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAGD,MAAM,mBAAe,yBAAO,6BAAY,EAAE,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1F,MAAM,0BAAsB,yBAAO,kCAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AACD,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AACD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAGD,MAAM,cAAc,CAAC,OAAO,QAAQ,MAAM;AAEnC,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM,EAAE,MAAM,mBAAmB,IAAI;AACrC,QAAM,EAAE,UAAU,YAAY,IAAI;AAClC,QAAM,EAAE,kBAAkB,YAAY,IAAI;AAC1C,QAAM,EAAE,sBAAsB,iBAAiB,0BAA0B,oBAAoB,QAC3F,gDAAoB,QAAQ;AAC9B,QAAM,EAAE,iBAAiB,iBAAiB,QAAI,oDAAwB,QAAQ;AAE9E,SACE,6CAAC;AAAA,IAAkB,MAAM;AAAA,IAAa,QAAO;AAAA,IAAM,IAAG;AAAA,IAAK,IAAG;AAAA,IAAM,YAAW;AAAA,IAC7E;AAAA,kDAAC;AAAA,QACC,sDAAC;AAAA,UAAc,YAAU;AAAA,UAAC,OAAM;AAAA,SAAU;AAAA,OAC5C;AAAA,MACC,cACC;AAAA,QACE;AAAA,sDAAC;AAAA,YACC,sDAAC;AAAA,cACC,YAAW;AAAA,cACX,SAAS;AAAA,cACT,MAAM,8BAAa;AAAA,cACnB,UAAU;AAAA,cACV,UAAU,wBAAwB,CAAC,mBAAmB,IAAI;AAAA,cAC1D,UAAU,qBAAqB;AAAA,cAE/B,sDAAC;AAAA,gBAAoB,OAAM;AAAA,gBAAO,QAAO;AAAA,eAAO;AAAA,aAClD;AAAA,WACF;AAAA,UACA,4CAAC;AAAA,YACC,sDAAC;AAAA,cACC,YAAW;AAAA,cACX,SAAS;AAAA,cACT,MAAM,8BAAa;AAAA,cACnB,UAAU;AAAA,cACV,UAAU,mBAAmB,CAAC,cAAc,IAAI;AAAA,cAChD,UAAU,gBAAgB;AAAA,cAEzB,+BACC,4CAAC;AAAA,gBAAsB,OAAM;AAAA,gBAAO,QAAO;AAAA,eAAO,IAElD,4CAAC;AAAA,gBAA0B,OAAM;AAAA,gBAAO,QAAO;AAAA,eAAO;AAAA,aAE1D;AAAA,WACF;AAAA;AAAA,OACF,IAGA;AAAA,QACE;AAAA,sDAAC,SAAI;AAAA,UACL,4CAAC,SAAI;AAAA;AAAA,OACP;AAAA;AAAA,GAEJ;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ArrowShortReturn, ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\n// import { DSSeparatorV2 } from '@elliemae/ds-separator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useActionsClickHandlers } from '../../../config/itemMovementHelpers';\nimport { useInnerRefHandlers } from './useInnerRefHandlers';\n\nconst StyledItemActions = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-actions-wrapper' })``;\nconst StyledItemActionWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-action-wrapper' })``;\n// const StyledItemActionsSeparatorWrapper = styled(Grid, {\n//   name: 'ds-shuttle-v2',\n//   slot: 'item-actions-separator-wrapper',\n// })`\n//   height: 24px;\n// `;\nconst StyledButton = styled(DSButtonV2, { name: 'ds-shuttle-v2', slot: 'item-action-btn' })`\n  height: 22px !important;\n  svg {\n    fill: brand-600;\n  }\n  :disabled svg {\n    fill: neutral-200 !important;\n  }\n`;\nconst StyledDrilldownIcon = styled(ArrowShortReturn, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-drilldown-icon',\n})``;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-source-icon',\n})``;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-destination-icon',\n})``;\n\n// 1px separator, 20px icon button/placeholder, 20px icon button/placeholder\nconst actionsCols = [\n  // '1px',\n  '20px',\n  '20px',\n];\n\nexport const ItemActions = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item, isDestinationPanel } = itemMeta;\n  const { original, withActions } = item;\n  const { preventDrilldown, preventMove } = original;\n  const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } =\n    useInnerRefHandlers(itemMeta);\n  const { handleDrilldown, handleSingleMove } = useActionsClickHandlers(itemMeta);\n\n  return (\n    <StyledItemActions cols={actionsCols} gutter=\"xxs\" pl=\"xs\" pr=\"xxs\" alignItems=\"center\">\n      {/* <StyledItemActionsSeparatorWrapper>\n        <DSSeparatorV2 isVertical color=\"#E0E3E8\" />\n      </StyledItemActionsSeparatorWrapper> */}\n      {withActions ? (\n        <>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleDrilldown}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerDrilldown}\n              tabIndex={shouldFocusDrilldown && !preventDrilldown ? 0 : -1}\n              disabled={preventDrilldown === true}\n            >\n              <StyledDrilldownIcon width=\"20px\" height=\"20px\" />\n            </StyledButton>\n          </StyledItemActionWrapper>\n          <StyledItemActionWrapper>\n            <StyledButton\n              buttonType=\"icon\"\n              onClick={handleSingleMove}\n              size={BUTTON_SIZES.S}\n              innerRef={innerRefHandlerMove}\n              tabIndex={shouldFocusMove && !preventMove ? 0 : -1}\n              disabled={preventMove === true}\n            >\n              {isDestinationPanel ? (\n                <StyledCloseMediumIcon width=\"20px\" height=\"20px\" />\n              ) : (\n                <StyledArrowShortRightIcon width=\"20px\" height=\"20px\" />\n              )}\n            </StyledButton>\n          </StyledItemActionWrapper>\n        </>\n      ) : (\n        // this is a place-holder user for mantainting the grid spacing\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;ADAvB;AAAA,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,uBAAyC;AACzC,sBAA+D;AAG/D,iCAAwC;AACxC,iCAAoC;AAEpC,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAC9F,MAAM,8BAA0B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,sBAAsB,CAAC;AAOnG,MAAM,mBAAe,yBAAO,6BAAY,EAAE,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1F,MAAM,0BAAsB,yBAAO,kCAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AACD,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AACD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAGD,MAAM,cAAc;AAAA,EAElB;AAAA,EACA;AACF;AAEO,MAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,aAAoC;AACzE,QAAM,EAAE,MAAM,mBAAmB,IAAI;AACrC,QAAM,EAAE,UAAU,YAAY,IAAI;AAClC,QAAM,EAAE,kBAAkB,YAAY,IAAI;AAC1C,QAAM,EAAE,sBAAsB,iBAAiB,0BAA0B,oBAAoB,QAC3F,gDAAoB,QAAQ;AAC9B,QAAM,EAAE,iBAAiB,iBAAiB,QAAI,oDAAwB,QAAQ;AAE9E,SACE,4CAAC;AAAA,IAAkB,MAAM;AAAA,IAAa,QAAO;AAAA,IAAM,IAAG;AAAA,IAAK,IAAG;AAAA,IAAM,YAAW;AAAA,IAI5E,wBACC;AAAA,MACE;AAAA,oDAAC;AAAA,UACC,sDAAC;AAAA,YACC,YAAW;AAAA,YACX,SAAS;AAAA,YACT,MAAM,8BAAa;AAAA,YACnB,UAAU;AAAA,YACV,UAAU,wBAAwB,CAAC,mBAAmB,IAAI;AAAA,YAC1D,UAAU,qBAAqB;AAAA,YAE/B,sDAAC;AAAA,cAAoB,OAAM;AAAA,cAAO,QAAO;AAAA,aAAO;AAAA,WAClD;AAAA,SACF;AAAA,QACA,4CAAC;AAAA,UACC,sDAAC;AAAA,YACC,YAAW;AAAA,YACX,SAAS;AAAA,YACT,MAAM,8BAAa;AAAA,YACnB,UAAU;AAAA,YACV,UAAU,mBAAmB,CAAC,cAAc,IAAI;AAAA,YAChD,UAAU,gBAAgB;AAAA,YAEzB,+BACC,4CAAC;AAAA,cAAsB,OAAM;AAAA,cAAO,QAAO;AAAA,aAAO,IAElD,4CAAC;AAAA,cAA0B,OAAM;AAAA,cAAO,QAAO;AAAA,aAAO;AAAA,WAE1D;AAAA,SACF;AAAA;AAAA,KACF,IAGA;AAAA,MACE;AAAA,oDAAC,SAAI;AAAA,QACL,4CAAC,SAAI;AAAA;AAAA,KACP;AAAA,GAEJ;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -38,20 +38,10 @@ const StyledItemSelection = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   box-sizing: border-box;
   background-color: ${(props) => {
   if (props.$isSelected)
-    return props.theme.colors.brand[500];
+    return props.theme.colors.brand[600];
   if (props.$selectionPrevented === true)
-    return props.theme.colors.neutral["000"];
-  return props.theme.colors.neutral[200];
-}};
-  border-right: ${(props) => {
-  if (props.$selectionPrevented === true)
-    return `1px solid ${props.theme.colors.neutral["200"]}`;
-  return "";
-}};
-  border-bottom: ${(props) => {
-  if (props.$selectionPrevented === true)
-    return `1px solid ${props.theme.colors.neutral["200"]}`;
-  return "";
+    return props.theme.colors.neutral["080"];
+  return props.theme.colors.brand[300];
 }};
 `;
 const ItemSelection = import_react.default.memo(({ item: { isSelected, selectionPrevented } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemSelection, {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Item/ItemSelection.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\n\nconst StyledItemSelection = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-selection' })<{\n  $isSelected: boolean;\n  $selectionPrevented?: boolean;\n}>`\n  width: 5px;\n  height: 100%;\n  box-sizing: border-box;\n  background-color: ${(props) => {\n    if (props.$isSelected) return props.theme.colors.brand[500];\n    if (props.$selectionPrevented === true) return props.theme.colors.neutral['000'];\n    return props.theme.colors.neutral[200];\n  }};\n  border-right: ${(props) => {\n    if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n    return '';\n  }};\n  border-bottom: ${(props) => {\n    if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n    return '';\n  }};\n`;\n\nexport const ItemSelection = React.memo(({ item: { isSelected, selectionPrevented } }: DSShuttleV2T.ItemMeta) => (\n  <StyledItemSelection $isSelected={isSelected} $selectionPrevented={selectionPrevented} />\n));\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAGrB,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA,sBAOpE,CAAC,UAAU;AAC7B,MAAI,MAAM;AAAa,WAAO,MAAM,MAAM,OAAO,MAAM;AACvD,MAAI,MAAM,wBAAwB;AAAM,WAAO,MAAM,MAAM,OAAO,QAAQ;AAC1E,SAAO,MAAM,MAAM,OAAO,QAAQ;AACpC;AAAA,kBACgB,CAAC,UAAU;AACzB,MAAI,MAAM,wBAAwB;AAAM,WAAO,aAAa,MAAM,MAAM,OAAO,QAAQ;AACvF,SAAO;AACT;AAAA,mBACiB,CAAC,UAAU;AAC1B,MAAI,MAAM,wBAAwB;AAAM,WAAO,aAAa,MAAM,MAAM,OAAO,QAAQ;AACvF,SAAO;AACT;AAAA;AAGK,MAAM,gBAAgB,aAAAA,QAAM,KAAK,CAAC,EAAE,MAAM,EAAE,YAAY,mBAAmB,EAAE,MAClF,4CAAC;AAAA,EAAoB,aAAa;AAAA,EAAY,qBAAqB;AAAA,CAAoB,CACxF;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\n\n// border-right: ${(props) => {\n//   if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n//   return '';\n// }};\n// border-bottom: ${(props) => {\n//   if (props.$selectionPrevented === true) return `1px solid ${props.theme.colors.neutral['200']}`;\n//   return '';\n// }};\n\nconst StyledItemSelection = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-selection' })<{\n  $isSelected: boolean;\n  $selectionPrevented?: boolean;\n}>`\n  width: 5px;\n  height: 100%;\n  box-sizing: border-box;\n  background-color: ${(props) => {\n    if (props.$isSelected) return props.theme.colors.brand[600];\n    if (props.$selectionPrevented === true) return props.theme.colors.neutral['080'];\n    return props.theme.colors.brand[300];\n  }};\n`;\n\nexport const ItemSelection = React.memo(({ item: { isSelected, selectionPrevented } }: DSShuttleV2T.ItemMeta) => (\n  <StyledItemSelection $isSelected={isSelected} $selectionPrevented={selectionPrevented} />\n));\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAYrB,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA,sBAOpE,CAAC,UAAU;AAC7B,MAAI,MAAM;AAAa,WAAO,MAAM,MAAM,OAAO,MAAM;AACvD,MAAI,MAAM,wBAAwB;AAAM,WAAO,MAAM,MAAM,OAAO,QAAQ;AAC1E,SAAO,MAAM,MAAM,OAAO,MAAM;AAClC;AAAA;AAGK,MAAM,gBAAgB,aAAAA,QAAM,KAAK,CAAC,EAAE,MAAM,EAAE,YAAY,mBAAmB,EAAE,MAClF,4CAAC;AAAA,EAAoB,aAAa;AAAA,EAAY,qBAAqB;AAAA,CAAoB,CACxF;",
   "names": ["React"]
 }

package/dist/cjs/parts/ItemListWrapper.js

@@ -37,6 +37,7 @@ var import_useStore = require("../config/useStore");
 var import_useFocusTracker = require("../config/useFocusTracker");
 var import_Item = require("./Item/Item");
 var import_MultipleSelectionAction = require("./MultipleSelectionAction");
+var import_constants = require("../constants");
 const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "items-wrapper" })`
   position: relative;
   :focus,
@@ -51,7 +52,27 @@ const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { n
     // }
   }
 `;
-const ItemListWrapper = import_react.default.memo(({ isDestinationPanel }) => {
+const useInnerRefHandlers = ({ isDestinationPanel }) => {
+  const focusRegion = (0, import_useStore.useStore)((state) => state.focusRegion);
+  const focusItem = (0, import_useStore.useStore)((state) => state.focusItem);
+  const focusItemAction = (0, import_useStore.useStore)((state) => state.focusItemAction);
+  const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL : import_constants.REGIONS_FOCUSES.SOURCE_PANEL;
+  const shouldFocus = import_react.default.useMemo(
+    () => focusRegion === currRegion && focusItem === "" && focusItemAction === "",
+    [currRegion, focusItem, focusItemAction, focusRegion]
+  );
+  const innerRefHandlerParentItem = import_react.default.useCallback(
+    (node) => {
+      if (shouldFocus) {
+        node?.focus();
+      }
+    },
+    [shouldFocus]
+  );
+  return import_react.default.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);
+};
+const ItemListWrapper = import_react.default.memo((panelMetaInfo) => {
+  const { isDestinationPanel } = panelMetaInfo;
   const itemList = (0, import_useStore.useStore)(
     (state) => isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData
   );
@@ -94,10 +115,12 @@ const ItemListWrapper = import_react.default.memo(({ isDestinationPanel }) => {
     },
     [isDestinationPanel, trackFocusActionParent, trackFocusItemFirst, trackFocusItemLast, trackFocusRegionPanelItem]
   );
+  const { innerRefHandlerParentItem } = useInnerRefHandlers(panelMetaInfo);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledItemsWrapper, {
     alignItems: "flex-start",
     rows,
     tabIndex: 0,
+    ref: innerRefHandlerParentItem,
     onFocus: onPanelFocus,
     onKeyDown: onPanelKeyDown,
     children: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/ItemListWrapper.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useOnSpecificFocus } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { useStore } from '../config/useStore';\nimport { useFocusTracker } from '../config/useFocusTracker';\nimport { Item } from './Item/Item';\nimport { MultipleSelectionAction } from './MultipleSelectionAction';\nimport { type DSShuttleV2InternalsT } from '../sharedTypes';\n\nconst StyledItemsWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'items-wrapper' })`\n  position: relative;\n  :focus,\n  :focus-visible {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n    // .ds-shuttle-v2-move-multiple-wrapper {\n    //   top: 2px;\n    //   right: 2px;\n    //   height: calc(100% - 4px);\n    //   width: calc(65px - 2px);\n    // }\n  }\n`;\nexport const ItemListWrapper = React.memo(({ isDestinationPanel }: DSShuttleV2InternalsT.PanelMetaInfo) => {\n  const itemList = useStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n  const destinationHasMultipleSelectedItems = useStore((store) => store.destinationHasMultipleSelectedItems);\n  const sourceHasMultipleSelectedItems = useStore((store) => store.sourceHasMultipleSelectedItems);\n  const hasMultipleSelection = isDestinationPanel\n    ? destinationHasMultipleSelectedItems\n    : sourceHasMultipleSelectedItems;\n\n  const rows = React.useMemo(\n    () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n    [itemList.length],\n  );\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\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      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') trackFocusItemFirst();\n        if (key === 'ArrowUp' || key === 'End') trackFocusItemLast();\n      }\n    },\n    [isDestinationPanel, trackFocusActionParent, trackFocusItemFirst, trackFocusItemLast, trackFocusRegionPanelItem],\n  );\n  return (\n    <StyledItemsWrapper\n      alignItems=\"flex-start\"\n      rows={rows}\n      tabIndex={0}\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n    >\n      {itemList.map((item) => (\n        <Item key={item.original.id} item={item} isDestinationPanel={isDestinationPanel} />\n      ))}\n      {hasMultipleSelection ? <MultipleSelectionAction isDestinationPanel={isDestinationPanel} /> : null}\n    </StyledItemsWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,0BAAmC;AACnC,qBAAqB;AACrB,uBAAuB;AACvB,sBAAyB;AACzB,6BAAgC;AAChC,kBAAqB;AACrB,qCAAwC;AAGxC,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjF,MAAM,kBAAkB,aAAAA,QAAM,KAAK,CAAC,EAAE,mBAAmB,MAA2C;AACzG,QAAM,eAAW;AAAA,IAAS,CAAC,UACzB,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,0CAAsC,0BAAS,CAAC,UAAU,MAAM,mCAAmC;AACzG,QAAM,qCAAiC,0BAAS,CAAC,UAAU,MAAM,8BAA8B;AAC/F,QAAM,uBAAuB,qBACzB,sCACA;AAEJ,QAAM,OAAO,aAAAA,QAAM;AAAA,IACjB,MAAM,CAAC,UAAU,UAAU,SAAS,UAAU,SAAS,kBAAkB;AAAA,IACzE,CAAC,SAAS,MAAM;AAAA,EAClB;AACA,QAAM;AAAA,IACJ;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,wCAAmB,MAAM;AAE9C,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,QAAQ,OAAO,WAAW,WAAW,EAAE,SAAS,GAAG,GAAG;AACzD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,kCAA0B,kBAAkB;AAC5C,+BAAuB;AAEvB,YAAI,QAAQ,eAAe,QAAQ;AAAQ,8BAAoB;AAC/D,YAAI,QAAQ,aAAa,QAAQ;AAAO,6BAAmB;AAAA,MAC7D;AAAA,IACF;AAAA,IACA,CAAC,oBAAoB,wBAAwB,qBAAqB,oBAAoB,yBAAyB;AAAA,EACjH;AACA,SACE,6CAAC;AAAA,IACC,YAAW;AAAA,IACX;AAAA,IACA,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IAEV;AAAA,eAAS,IAAI,CAAC,SACb,4CAAC;AAAA,QAA4B;AAAA,QAAY;AAAA,SAA9B,KAAK,SAAS,EAAwD,CAClF;AAAA,MACA,uBAAuB,4CAAC;AAAA,QAAwB;AAAA,OAAwC,IAAK;AAAA;AAAA,GAChG;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { useOnSpecificFocus } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { useStore } from '../config/useStore';\nimport { useFocusTracker } from '../config/useFocusTracker';\nimport { Item } from './Item/Item';\nimport { MultipleSelectionAction } from './MultipleSelectionAction';\nimport { type DSShuttleV2InternalsT } from '../sharedTypes';\nimport { REGIONS_FOCUSES } from '../constants';\n\nconst StyledItemsWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'items-wrapper' })`\n  position: relative;\n  :focus,\n  :focus-visible {\n    outline: 2px solid brand-700;\n    outline-offset: -2px;\n    // .ds-shuttle-v2-move-multiple-wrapper {\n    //   top: 2px;\n    //   right: 2px;\n    //   height: calc(100% - 4px);\n    //   width: calc(65px - 2px);\n    // }\n  }\n`;\n\nconst useInnerRefHandlers = ({ isDestinationPanel }: DSShuttleV2InternalsT.PanelMetaInfo) => {\n  const focusRegion = useStore((state) => state.focusRegion);\n  const focusItem = useStore((state) => state.focusItem);\n  const focusItemAction = useStore((state) => state.focusItemAction);\n  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : REGIONS_FOCUSES.SOURCE_PANEL;\n\n  const shouldFocus = React.useMemo(\n    () => focusRegion === currRegion && focusItem === '' && focusItemAction === '',\n    [currRegion, focusItem, focusItemAction, focusRegion],\n  );\n  const innerRefHandlerParentItem = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (shouldFocus) {\n        node?.focus();\n      }\n    },\n    [shouldFocus],\n  );\n  return React.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);\n};\n\nexport const ItemListWrapper = React.memo((panelMetaInfo: DSShuttleV2InternalsT.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const itemList = useStore((state) =>\n    isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n  );\n  const destinationHasMultipleSelectedItems = useStore((store) => store.destinationHasMultipleSelectedItems);\n  const sourceHasMultipleSelectedItems = useStore((store) => store.sourceHasMultipleSelectedItems);\n  const hasMultipleSelection = isDestinationPanel\n    ? destinationHasMultipleSelectedItems\n    : sourceHasMultipleSelectedItems;\n\n  const rows = React.useMemo(\n    () => [`repeat(${itemList?.length ? itemList?.length : '0'},min-content)`],\n    [itemList.length],\n  );\n  const {\n    trackFocusRegionPanel,\n    trackFocusItemFirst,\n    trackFocusItemLast,\n    trackFocusActionParent,\n    trackFocusRegionPanelItem,\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      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') trackFocusItemFirst();\n        if (key === 'ArrowUp' || key === 'End') trackFocusItemLast();\n      }\n    },\n    [isDestinationPanel, trackFocusActionParent, trackFocusItemFirst, trackFocusItemLast, trackFocusRegionPanelItem],\n  );\n  const { innerRefHandlerParentItem } = useInnerRefHandlers(panelMetaInfo);\n  return (\n    <StyledItemsWrapper\n      alignItems=\"flex-start\"\n      rows={rows}\n      tabIndex={0}\n      ref={innerRefHandlerParentItem}\n      onFocus={onPanelFocus}\n      onKeyDown={onPanelKeyDown}\n    >\n      {itemList.map((item) => (\n        <Item key={item.original.id} item={item} isDestinationPanel={isDestinationPanel} />\n      ))}\n      {hasMultipleSelection ? <MultipleSelectionAction isDestinationPanel={isDestinationPanel} /> : null}\n    </StyledItemsWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,0BAAmC;AACnC,qBAAqB;AACrB,uBAAuB;AACvB,sBAAyB;AACzB,6BAAgC;AAChC,kBAAqB;AACrB,qCAAwC;AAExC,uBAAgC;AAEhC,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAexF,MAAM,sBAAsB,CAAC,EAAE,mBAAmB,MAA2C;AAC3F,QAAM,kBAAc,0BAAS,CAAC,UAAU,MAAM,WAAW;AACzD,QAAM,gBAAY,0BAAS,CAAC,UAAU,MAAM,SAAS;AACrD,QAAM,sBAAkB,0BAAS,CAAC,UAAU,MAAM,eAAe;AACjE,QAAM,aAAa,qBAAqB,iCAAgB,oBAAoB,iCAAgB;AAE5F,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,MAAM,gBAAgB,cAAc,cAAc,MAAM,oBAAoB;AAAA,IAC5E,CAAC,YAAY,WAAW,iBAAiB,WAAW;AAAA,EACtD;AACA,QAAM,4BAA4B,aAAAA,QAAM;AAAA,IACtC,CAAC,SAAyB;AACxB,UAAI,aAAa;AACf,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AACA,SAAO,aAAAA,QAAM,QAAQ,OAAO,EAAE,aAAa,0BAA0B,IAAI,CAAC,aAAa,yBAAyB,CAAC;AACnH;AAEO,MAAM,kBAAkB,aAAAA,QAAM,KAAK,CAAC,kBAAuD;AAChG,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,eAAW;AAAA,IAAS,CAAC,UACzB,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,0CAAsC,0BAAS,CAAC,UAAU,MAAM,mCAAmC;AACzG,QAAM,qCAAiC,0BAAS,CAAC,UAAU,MAAM,8BAA8B;AAC/F,QAAM,uBAAuB,qBACzB,sCACA;AAEJ,QAAM,OAAO,aAAAA,QAAM;AAAA,IACjB,MAAM,CAAC,UAAU,UAAU,SAAS,UAAU,SAAS,kBAAkB;AAAA,IACzE,CAAC,SAAS,MAAM;AAAA,EAClB;AACA,QAAM;AAAA,IACJ;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,wCAAmB,MAAM;AAE9C,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,CAAC,QAAQ,OAAO,WAAW,WAAW,EAAE,SAAS,GAAG,GAAG;AACzD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,kCAA0B,kBAAkB;AAC5C,+BAAuB;AAEvB,YAAI,QAAQ,eAAe,QAAQ;AAAQ,8BAAoB;AAC/D,YAAI,QAAQ,aAAa,QAAQ;AAAO,6BAAmB;AAAA,MAC7D;AAAA,IACF;AAAA,IACA,CAAC,oBAAoB,wBAAwB,qBAAqB,oBAAoB,yBAAyB;AAAA,EACjH;AACA,QAAM,EAAE,0BAA0B,IAAI,oBAAoB,aAAa;AACvE,SACE,6CAAC;AAAA,IACC,YAAW;AAAA,IACX;AAAA,IACA,UAAU;AAAA,IACV,KAAK;AAAA,IACL,SAAS;AAAA,IACT,WAAW;AAAA,IAEV;AAAA,eAAS,IAAI,CAAC,SACb,4CAAC;AAAA,QAA4B;AAAA,QAAY;AAAA,SAA9B,KAAK,SAAS,EAAwD,CAClF;AAAA,MACA,uBAAuB,4CAAC;AAAA,QAAwB;AAAA,OAAwC,IAAK;AAAA;AAAA,GAChG;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/MultipleSelectionAction.js

@@ -88,14 +88,16 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
   const handleMoveAllAction = import_react.default.useCallback(
     (event) => {
       moveSelection(event);
+      trackFocusItemReset();
+      trackFocusActionReset();
       trackFocusRegionPanel(isDestinationPanel);
     },
-    [isDestinationPanel, moveSelection, trackFocusRegionPanel]
+    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
   );
   const handleMoveAllBtnFocus = import_react.default.useCallback(() => {
-    trackFocusRegionPanelFocusAll(isDestinationPanel);
     trackFocusItemReset();
     trackFocusActionReset();
+    trackFocusRegionPanelFocusAll(isDestinationPanel);
   }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusAll]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledMoveMultipleWrapper, {
     boxShadow: "xs",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/MultipleSelectionAction.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2InternalsT } from '../sharedTypes';\nimport { useHandleMoveSelection } from '../config/itemMovementHelpers';\nimport { useFocusTracker } from '../config/useFocusTracker';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'move-multiple-wrapper' })`\n  position: absolute;\n  background-color: neutral-000;\n  // top: 0;\n  // right: 0;\n  // height: 100%;\n  // width: 65px;\n  top: 2px;\n  right: 2px;\n  height: calc(100% - 4px);\n  width: calc(65px - 2px);\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: 'ds-shuttle-v2',\n  slot: 'move-multiple-btn',\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-source-icon',\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-destination-icon',\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2InternalsT.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n    (event) => {\n      moveSelection(event);\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusRegionPanelFocusAll(isDestinationPanel);\n    trackFocusItemReset();\n    trackFocusActionReset();\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusAll]);\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton buttonType=\"icon\" onClick={handleMoveAllAction} onFocus={handleMoveAllBtnFocus}>\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"20px\" height=\"20px\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"20px\" height=\"20px\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,uBAA2B;AAC3B,sBAA6C;AAE7C,iCAAuC;AACvC,6BAAgC;AAEhC,MAAM,gCAA4B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,wBAAwB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBvG,MAAM,mBAAe,yBAAO,6BAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAID,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,mBAAmB,CAAC,KAAK;AAExB,MAAM,0BAA0B,aAAAA,QAAM,KAAK,CAAC,cAAmD;AACpG,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,EAAE,cAAc,QAAI,mDAAuB,SAAS;AAC1D,QAAM,EAAE,uBAAuB,+BAA+B,qBAAqB,sBAAsB,QACvG,wCAAgB;AAClB,QAAM,sBAAkE,aAAAA,QAAM;AAAA,IAC5E,CAAC,UAAU;AACT,oBAAc,KAAK;AACnB,4BAAsB,kBAAkB;AAAA,IAC1C;AAAA,IACA,CAAC,oBAAoB,eAAe,qBAAqB;AAAA,EAC3D;AACA,QAAM,wBAAoE,aAAAA,QAAM,YAAY,MAAM;AAChG,kCAA8B,kBAAkB;AAChD,wBAAoB;AACpB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,6BAA6B,CAAC;AAElG,SACE,4CAAC;AAAA,IACC,WAAU;AAAA,IACV,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,MAAM;AAAA,IACN,MAAM;AAAA,IAEN,sDAAC;AAAA,MAAa,YAAW;AAAA,MAAO,SAAS;AAAA,MAAqB,SAAS;AAAA,MACpE,+BACC,4CAAC;AAAA,QAAsB,OAAM;AAAA,QAAO,QAAO;AAAA,OAAO,IAElD,4CAAC;AAAA,QAA0B,OAAM;AAAA,QAAO,QAAO;AAAA,OAAO;AAAA,KAE1D;AAAA,GACF;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2InternalsT } from '../sharedTypes';\nimport { useHandleMoveSelection } from '../config/itemMovementHelpers';\nimport { useFocusTracker } from '../config/useFocusTracker';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'move-multiple-wrapper' })`\n  position: absolute;\n  background-color: neutral-000;\n  // top: 0;\n  // right: 0;\n  // height: 100%;\n  // width: 65px;\n  top: 2px;\n  right: 2px;\n  height: calc(100% - 4px);\n  width: calc(65px - 2px);\n  :hover {\n    background-color: brand-200;\n    > svg {\n      fill: brand-700;\n    }\n  }\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledButton = styled(DSButtonV2, {\n  name: 'ds-shuttle-v2',\n  slot: 'move-multiple-btn',\n})`\n  width: 100%;\n  height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-source-icon',\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n  name: 'ds-shuttle-v2',\n  slot: 'item-action-btn-to-destination-icon',\n})`\n  > svg {\n    fill: brand-600;\n  }\n`;\nconst gridFullFraction = ['1fr'];\n\nexport const MultipleSelectionAction = React.memo((panelMeta: DSShuttleV2InternalsT.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMeta;\n  const { moveSelection } = useHandleMoveSelection(panelMeta);\n  const { trackFocusRegionPanel, trackFocusRegionPanelFocusAll, trackFocusItemReset, trackFocusActionReset } =\n    useFocusTracker();\n  const handleMoveAllAction: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(\n    (event) => {\n      moveSelection(event);\n      trackFocusItemReset();\n      trackFocusActionReset();\n      trackFocusRegionPanel(isDestinationPanel);\n    },\n    [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel],\n  );\n  const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n    trackFocusItemReset();\n    trackFocusActionReset();\n    trackFocusRegionPanelFocusAll(isDestinationPanel);\n  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusAll]);\n\n  return (\n    <StyledMoveMultipleWrapper\n      boxShadow=\"xs\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      cols={gridFullFraction}\n      rows={gridFullFraction}\n    >\n      <StyledButton buttonType=\"icon\" onClick={handleMoveAllAction} onFocus={handleMoveAllBtnFocus}>\n        {isDestinationPanel ? (\n          <StyledCloseMediumIcon width=\"20px\" height=\"20px\" />\n        ) : (\n          <StyledArrowShortRightIcon width=\"20px\" height=\"20px\" />\n        )}\n      </StyledButton>\n    </StyledMoveMultipleWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,uBAA2B;AAC3B,sBAA6C;AAE7C,iCAAuC;AACvC,6BAAgC;AAEhC,MAAM,gCAA4B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,wBAAwB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBvG,MAAM,mBAAe,yBAAO,6BAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAID,MAAM,4BAAwB,yBAAO,6BAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,gCAA4B,yBAAO,iCAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,mBAAmB,CAAC,KAAK;AAExB,MAAM,0BAA0B,aAAAA,QAAM,KAAK,CAAC,cAAmD;AACpG,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,EAAE,cAAc,QAAI,mDAAuB,SAAS;AAC1D,QAAM,EAAE,uBAAuB,+BAA+B,qBAAqB,sBAAsB,QACvG,wCAAgB;AAClB,QAAM,sBAAkE,aAAAA,QAAM;AAAA,IAC5E,CAAC,UAAU;AACT,oBAAc,KAAK;AACnB,0BAAoB;AACpB,4BAAsB;AACtB,4BAAsB,kBAAkB;AAAA,IAC1C;AAAA,IACA,CAAC,oBAAoB,eAAe,uBAAuB,qBAAqB,qBAAqB;AAAA,EACvG;AACA,QAAM,wBAAoE,aAAAA,QAAM,YAAY,MAAM;AAChG,wBAAoB;AACpB,0BAAsB;AACtB,kCAA8B,kBAAkB;AAAA,EAClD,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,6BAA6B,CAAC;AAElG,SACE,4CAAC;AAAA,IACC,WAAU;AAAA,IACV,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,MAAM;AAAA,IACN,MAAM;AAAA,IAEN,sDAAC;AAAA,MAAa,YAAW;AAAA,MAAO,SAAS;AAAA,MAAqB,SAAS;AAAA,MACpE,+BACC,4CAAC;AAAA,QAAsB,OAAM;AAAA,QAAO,QAAO;AAAA,OAAO,IAElD,4CAAC;AAAA,QAA0B,OAAM;AAAA,QAAO,QAAO;AAAA,OAAO;AAAA,KAE1D;AAAA,GACF;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/PanelFilterSection.js

@@ -0,0 +1,68 @@
+"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(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PanelFilterSection_exports = {};
+__export(PanelFilterSection_exports, {
+  PanelFilterSection: () => PanelFilterSection
+});
+module.exports = __toCommonJS(PanelFilterSection_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
+var import_useStore = require("../config/useStore");
+const StyledSearchWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "area-search-wrapper" })`
+  border-bottom: 1px solid neutral-400;
+  border-radius: 0;
+`;
+const StyledInputText = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, { name: "ds-shuttle-v2", slot: "area-search-bar" })`
+  border: none;
+  :focus {
+    border-radius: 0;
+  }
+`;
+const PanelFilterSection = (panelMetaInfo) => {
+  const { isDestinationPanel = false } = panelMetaInfo;
+  const onFilterCb = (0, import_useStore.useStore)(
+    (state) => isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange
+  );
+  const filterValue = (0, import_useStore.useStore)(
+    (state) => isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue
+  );
+  const handleFilterChange = import_react.default.useCallback(
+    (value, event) => {
+      onFilterCb?.(`${value}`, { event });
+    },
+    [onFilterCb]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSearchWrapper, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledInputText, {
+      value: filterValue,
+      onValueChange: handleFilterChange
+    })
+  });
+};
+//# sourceMappingURL=PanelFilterSection.js.map