@elliemae/ds-shuttle-v2 3.6.0-next.7

package/dist/esm/parts/Header.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { Search } from "@elliemae/ds-icons";
+import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button";
+import { useStore } from "../config/useStore";
+import { useFocusTracker } from "../config/useFocusTracker";
+const Header = React2.memo(({ isDestinationPanel }) => {
+  const HeaderRenderer = useStore((state) => isDestinationPanel ? state.DestinationHeader : state.SourceHeader);
+  const onSearchBarOpen = useStore(
+    (state) => isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar
+  );
+  const isSearchBarOpen = useStore(
+    (state) => isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar
+  );
+  const { trackFocusRegionHeader, trackFocusItemReset, trackFocusActionReset } = useFocusTracker();
+  const onHeaderFocus = React2.useCallback(() => {
+    trackFocusRegionHeader(isDestinationPanel);
+    trackFocusItemReset();
+    trackFocusActionReset();
+  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionHeader]);
+  const handleFilterClick = React2.useCallback(
+    (event) => {
+      onSearchBarOpen?.(!isSearchBarOpen, { event });
+    },
+    [isSearchBarOpen, onSearchBarOpen]
+  );
+  const cols = React2.useMemo(() => {
+    const finalCols = ["1fr"];
+    if (onSearchBarOpen)
+      finalCols.push("auto");
+    return finalCols;
+  }, [onSearchBarOpen]);
+  return /* @__PURE__ */ jsxs(Grid, {
+    onFocus: onHeaderFocus,
+    cols,
+    children: [
+      /* @__PURE__ */ jsx(HeaderRenderer, {}),
+      onSearchBarOpen ? /* @__PURE__ */ jsx(DSButtonV2, {
+        buttonType: "icon",
+        size: BUTTON_SIZES.S,
+        onClick: handleFilterClick,
+        children: /* @__PURE__ */ jsx(Search, {})
+      }) : null
+    ]
+  });
+});
+export {
+  Header
+};
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Header.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,YAAY,oBAAoB;AACzC,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAGzB,MAAM,SAASA,OAAM,KAAK,CAAC,EAAE,mBAAmB,MAA2C;AAChG,QAAM,iBAAiB,SAAS,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AAC9G,QAAM,kBAAkB;AAAA,IAAS,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,kBAAkB;AAAA,IAAS,CAAC,UAChC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,EAAE,wBAAwB,qBAAqB,sBAAsB,IAAI,gBAAgB;AAC/F,QAAM,gBAAgBA,OAAM,YAAY,MAAM;AAC5C,2BAAuB,kBAAkB;AACzC,wBAAoB;AACpB,0BAAsB;AAAA,EACxB,GAAG,CAAC,oBAAoB,uBAAuB,qBAAqB,sBAAsB,CAAC;AAE3F,QAAM,oBAAgEA,OAAM;AAAA,IAC1E,CAAC,UAAU;AACT,wBAAkB,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAAA,IAC/C;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,EACnC;AAEA,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,UAAM,YAAY,CAAC,KAAK;AACxB,QAAI;AAAiB,gBAAU,KAAK,MAAM;AAC1C,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AAEpB,SACE,qBAAC;AAAA,IAAK,SAAS;AAAA,IAAe;AAAA,IAC5B;AAAA,0BAAC,kBAAe;AAAA,MACf,kBACC,oBAAC;AAAA,QAAW,YAAW;AAAA,QAAO,MAAM,aAAa;AAAA,QAAG,SAAS;AAAA,QAC3D,8BAAC,UAAO;AAAA,OACV,IACE;AAAA;AAAA,GACN;AAEJ,CAAC;",
+  "names": ["React"]
+}

package/dist/esm/parts/Item/Item.js

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { styled } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { useStore } from "../../config/useStore";
+import { ItemSelection } from "./ItemSelection";
+import { ItemActions } from "./ItemActions";
+import { ItemMiddleSection } from "./ItemMiddleSection";
+import { useSelectionLogic } from "./useSelectionLogic";
+import { useItemArrowNavigation } from "./useItemArrowNavigation";
+import { REGIONS_FOCUSES } from "../../constants";
+const ItemWrapper = styled(Grid, { name: "ds-shuttle-v2", slot: "item-wrapper" })`
+  min-height: 36px;
+  :hover {
+    background-color: brand-200;
+    .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 {
+      fill: brand-700;
+    }
+  }
+  :focus {
+    outline: 2px solid brand-700;
+    outline-offset: -2px;
+  }
+`;
+const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
+  const { isFirst, isLast } = item;
+  const focusRegion = useStore((state) => state.focusRegion);
+  const focusItem = useStore((state) => state.focusItem);
+  const focusItemAction = useStore((state) => state.focusItemAction);
+  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
+  const currItemId = item.original.id;
+  const shouldFocus = React2.useMemo(
+    () => focusRegion === currRegion && focusItemAction === "parent" && (focusItem === currItemId || isFirst && focusItem === "first" || isLast && focusItem === "last"),
+    [currItemId, currRegion, focusItem, focusItemAction, focusRegion, isFirst, isLast]
+  );
+  const innerRefHandlerParentItem = React2.useCallback(
+    (node) => {
+      if (shouldFocus) {
+        node?.focus();
+      }
+    },
+    [shouldFocus]
+  );
+  return React2.useMemo(() => ({ shouldFocus, innerRefHandlerParentItem }), [shouldFocus, innerRefHandlerParentItem]);
+};
+const cols = ["5px", "1fr", "auto"];
+const Item = React2.memo((itemMeta) => {
+  const { item } = itemMeta;
+  const { original, isSelected } = item;
+  const { id } = original;
+  const selectItem = useSelectionLogic(itemMeta);
+  const { onItemContainerKeyDown } = useItemArrowNavigation(itemMeta);
+  const handleItemKeyDown = React2.useCallback(
+    (event) => {
+      const { key } = event;
+      if (["Spacebar", " ", "Enter"].includes(key)) {
+        event.preventDefault();
+        event.stopPropagation();
+        selectItem(event);
+      }
+      onItemContainerKeyDown(event);
+    },
+    [onItemContainerKeyDown, selectItem]
+  );
+  const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);
+  return /* @__PURE__ */ jsxs(ItemWrapper, {
+    cols,
+    alignItems: "center",
+    onClick: selectItem,
+    onKeyDown: handleItemKeyDown,
+    ref: innerRefHandlerParentItem,
+    tabIndex: shouldFocus ? 0 : -1,
+    role: "checkbox",
+    "aria-checked": isSelected,
+    id,
+    children: [
+      /* @__PURE__ */ jsx(ItemSelection, {
+        ...itemMeta
+      }),
+      /* @__PURE__ */ jsx(ItemMiddleSection, {
+        ...itemMeta
+      }),
+      /* @__PURE__ */ jsx(ItemActions, {
+        ...itemMeta
+      })
+    ]
+  });
+});
+export {
+  Item
+};
+//# sourceMappingURL=Item.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/Item.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAGhC,MAAM,cAAc,OAAO,MAAM,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,cAAc,SAAS,CAAC,UAAU,MAAM,WAAW;AACzD,QAAM,YAAY,SAAS,CAAC,UAAU,MAAM,SAAS;AACrD,QAAM,kBAAkB,SAAS,CAAC,UAAU,MAAM,eAAe;AACjE,QAAM,aAAa,qBAAqB,gBAAgB,yBAAyB,gBAAgB;AACjG,QAAM,aAAa,KAAK,SAAS;AAEjC,QAAM,cAAcA,OAAM;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,4BAA4BA,OAAM;AAAA,IACtC,CAAC,SAAyB;AACxB,UAAI,aAAa;AACf,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AACA,SAAOA,OAAM,QAAQ,OAAO,EAAE,aAAa,0BAA0B,IAAI,CAAC,aAAa,yBAAyB,CAAC;AACnH;AAEA,MAAM,OAAO,CAAC,OAAO,OAAO,MAAM;AAC3B,MAAM,OAAOA,OAAM,KAAK,CAAC,aAAoC;AAClE,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,UAAU,WAAW,IAAI;AACjC,QAAM,EAAE,GAAG,IAAI;AAEf,QAAM,aAAa,kBAAkB,QAAQ;AAC7C,QAAM,EAAE,uBAAuB,IAAI,uBAAuB,QAAQ;AAClE,QAAM,oBAAgEA,OAAM;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,qBAAC;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,0BAAC;AAAA,QAAe,GAAG;AAAA,OAAU;AAAA,MAC7B,oBAAC;AAAA,QAAmB,GAAG;AAAA,OAAU;AAAA,MACjC,oBAAC;AAAA,QAAa,GAAG;AAAA,OAAU;AAAA;AAAA,GAC7B;AAEJ,CAAC;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { styled } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSButtonV2, BUTTON_SIZES } from "@elliemae/ds-button";
+import { ArrowShortReturn, ArrowShortRight, CloseMedium } from "@elliemae/ds-icons";
+import { DSSeparatorV2 } from "@elliemae/ds-separator";
+import { useActionsClickHandlers } from "../../../config/itemMovementHelpers";
+import { useInnerRefHandlers } from "./useInnerRefHandlers";
+const StyledItemActions = styled(Grid, { name: "ds-shuttle-v2", slot: "item-actions-wrapper" })``;
+const StyledItemActionWrapper = styled(Grid, { name: "ds-shuttle-v2", slot: "item-action-wrapper" })``;
+const StyledItemActionsSeparatorWrapper = styled(Grid, {
+  name: "ds-shuttle-v2",
+  slot: "item-actions-separator-wrapper"
+})`
+  height: 24px;
+`;
+const StyledButton = styled(DSButtonV2, { name: "ds-shuttle-v2", slot: "item-action-btn" })`
+  height: 22px !important;
+  svg {
+    fill: brand-600;
+  }
+  :disabled svg {
+    fill: neutral-200 !important;
+  }
+`;
+const StyledDrilldownIcon = styled(ArrowShortReturn, {
+  name: "ds-shuttle-v2",
+  slot: "item-action-btn-drilldown-icon"
+})``;
+const StyledCloseMediumIcon = styled(CloseMedium, {
+  name: "ds-shuttle-v2",
+  slot: "item-action-btn-to-source-icon"
+})``;
+const StyledArrowShortRightIcon = styled(ArrowShortRight, {
+  name: "ds-shuttle-v2",
+  slot: "item-action-btn-to-destination-icon"
+})``;
+const actionsCols = ["1px", "20px", "20px"];
+const ItemActions = React2.memo((itemMeta) => {
+  const { item, isDestinationPanel } = itemMeta;
+  const { original, withActions } = item;
+  const { preventDrilldown, preventMove } = original;
+  const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);
+  const { handleDrilldown, handleSingleMove } = useActionsClickHandlers(itemMeta);
+  return /* @__PURE__ */ jsxs(StyledItemActions, {
+    cols: actionsCols,
+    gutter: "xxs",
+    pl: "xs",
+    pr: "xxs",
+    alignItems: "center",
+    children: [
+      /* @__PURE__ */ jsx(StyledItemActionsSeparatorWrapper, {
+        children: /* @__PURE__ */ jsx(DSSeparatorV2, {
+          isVertical: true,
+          color: "#E0E3E8"
+        })
+      }),
+      withActions ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx(StyledItemActionWrapper, {
+            children: /* @__PURE__ */ jsx(StyledButton, {
+              buttonType: "icon",
+              onClick: handleDrilldown,
+              size: BUTTON_SIZES.S,
+              innerRef: innerRefHandlerDrilldown,
+              tabIndex: shouldFocusDrilldown && !preventDrilldown ? 0 : -1,
+              disabled: preventDrilldown === true,
+              children: /* @__PURE__ */ jsx(StyledDrilldownIcon, {
+                width: "20px",
+                height: "20px"
+              })
+            })
+          }),
+          /* @__PURE__ */ jsx(StyledItemActionWrapper, {
+            children: /* @__PURE__ */ jsx(StyledButton, {
+              buttonType: "icon",
+              onClick: handleSingleMove,
+              size: BUTTON_SIZES.S,
+              innerRef: innerRefHandlerMove,
+              tabIndex: shouldFocusMove && !preventMove ? 0 : -1,
+              disabled: preventMove === true,
+              children: isDestinationPanel ? /* @__PURE__ */ jsx(StyledCloseMediumIcon, {
+                width: "20px",
+                height: "20px"
+              }) : /* @__PURE__ */ jsx(StyledArrowShortRightIcon, {
+                width: "20px",
+                height: "20px"
+              })
+            })
+          })
+        ]
+      }) : /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsx("div", {})
+        ]
+      })
+    ]
+  });
+});
+export {
+  ItemActions
+};
+//# sourceMappingURL=ItemActions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/ItemActions.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY,oBAAoB;AACzC,SAAS,kBAAkB,iBAAiB,mBAAmB;AAC/D,SAAS,qBAAqB;AAE9B,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AAEpC,MAAM,oBAAoB,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAC9F,MAAM,0BAA0B,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,sBAAsB,CAAC;AACnG,MAAM,oCAAoC,OAAO,MAAM;AAAA,EACrD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAGD,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1F,MAAM,sBAAsB,OAAO,kBAAkB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AACD,MAAM,wBAAwB,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AACD,MAAM,4BAA4B,OAAO,iBAAiB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAGD,MAAM,cAAc,CAAC,OAAO,QAAQ,MAAM;AAEnC,MAAM,cAAcA,OAAM,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,IAC3F,oBAAoB,QAAQ;AAC9B,QAAM,EAAE,iBAAiB,iBAAiB,IAAI,wBAAwB,QAAQ;AAE9E,SACE,qBAAC;AAAA,IAAkB,MAAM;AAAA,IAAa,QAAO;AAAA,IAAM,IAAG;AAAA,IAAK,IAAG;AAAA,IAAM,YAAW;AAAA,IAC7E;AAAA,0BAAC;AAAA,QACC,8BAAC;AAAA,UAAc,YAAU;AAAA,UAAC,OAAM;AAAA,SAAU;AAAA,OAC5C;AAAA,MACC,cACC;AAAA,QACE;AAAA,8BAAC;AAAA,YACC,8BAAC;AAAA,cACC,YAAW;AAAA,cACX,SAAS;AAAA,cACT,MAAM,aAAa;AAAA,cACnB,UAAU;AAAA,cACV,UAAU,wBAAwB,CAAC,mBAAmB,IAAI;AAAA,cAC1D,UAAU,qBAAqB;AAAA,cAE/B,8BAAC;AAAA,gBAAoB,OAAM;AAAA,gBAAO,QAAO;AAAA,eAAO;AAAA,aAClD;AAAA,WACF;AAAA,UACA,oBAAC;AAAA,YACC,8BAAC;AAAA,cACC,YAAW;AAAA,cACX,SAAS;AAAA,cACT,MAAM,aAAa;AAAA,cACnB,UAAU;AAAA,cACV,UAAU,mBAAmB,CAAC,cAAc,IAAI;AAAA,cAChD,UAAU,gBAAgB;AAAA,cAEzB,+BACC,oBAAC;AAAA,gBAAsB,OAAM;AAAA,gBAAO,QAAO;AAAA,eAAO,IAElD,oBAAC;AAAA,gBAA0B,OAAM;AAAA,gBAAO,QAAO;AAAA,eAAO;AAAA,aAE1D;AAAA,WACF;AAAA;AAAA,OACF,IAGA;AAAA,QACE;AAAA,8BAAC,SAAI;AAAA,UACL,oBAAC,SAAI;AAAA;AAAA,OACP;AAAA;AAAA,GAEJ;AAEJ,CAAC;",
+  "names": ["React"]
+}

package/dist/esm/parts/Item/ItemActions/index.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+export * from "./ItemActions";
+//# sourceMappingURL=index.js.map

package/dist/esm/parts/Item/ItemActions/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ItemActions';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
+  "names": []
+}

package/dist/esm/parts/Item/ItemActions/useInnerRefHandlers.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import React2 from "react";
+import { useStore } from "../../../config/useStore";
+import { REGIONS_FOCUSES, ACTIONS_FOCUSES } from "../../../constants";
+const useInnerRefHandlers = ({ item, isDestinationPanel }) => {
+  const focusRegion = useStore((state) => state.focusRegion);
+  const focusItem = useStore((state) => state.focusItem);
+  const focusItemAction = useStore((state) => state.focusItemAction);
+  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;
+  const currItemId = item.original.id;
+  const { shouldFocusDrilldown, shouldFocusMove } = React2.useMemo(
+    () => ({
+      shouldFocusDrilldown: focusItem === currItemId && focusRegion === currRegion && focusItemAction === ACTIONS_FOCUSES.DRILLDOWN_BTN,
+      shouldFocusMove: focusItem === currItemId && focusRegion === currRegion && focusItemAction === ACTIONS_FOCUSES.MOVE_BTN
+    }),
+    [currItemId, currRegion, focusItem, focusItemAction, focusRegion]
+  );
+  const innerRefHandlerDrilldown = React2.useCallback(
+    (node) => {
+      if (shouldFocusDrilldown)
+        node?.focus();
+    },
+    [shouldFocusDrilldown]
+  );
+  const innerRefHandlerMove = React2.useCallback(
+    (node) => {
+      if (shouldFocusMove)
+        node?.focus();
+    },
+    [shouldFocusMove]
+  );
+  return React2.useMemo(
+    () => ({ shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove }),
+    [innerRefHandlerDrilldown, innerRefHandlerMove, shouldFocusDrilldown, shouldFocusMove]
+  );
+};
+export {
+  useInnerRefHandlers
+};
+//# sourceMappingURL=useInnerRefHandlers.js.map

package/dist/esm/parts/Item/ItemActions/useInnerRefHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Item/ItemActions/useInnerRefHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { useStore } from '../../../config/useStore';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES } from '../../../constants';\n\nexport const useInnerRefHandlers = ({ item, isDestinationPanel }: DSShuttleV2T.ItemMeta) => {\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  const { shouldFocusDrilldown, shouldFocusMove } = React.useMemo(\n    () => ({\n      shouldFocusDrilldown:\n        focusItem === currItemId && focusRegion === currRegion && focusItemAction === ACTIONS_FOCUSES.DRILLDOWN_BTN,\n      shouldFocusMove:\n        focusItem === currItemId && focusRegion === currRegion && focusItemAction === ACTIONS_FOCUSES.MOVE_BTN,\n    }),\n    [currItemId, currRegion, focusItem, focusItemAction, focusRegion],\n  );\n  const innerRefHandlerDrilldown = React.useCallback(\n    (node: HTMLButtonElement) => {\n      if (shouldFocusDrilldown) node?.focus();\n    },\n    [shouldFocusDrilldown],\n  );\n  const innerRefHandlerMove = React.useCallback(\n    (node: HTMLButtonElement) => {\n      if (shouldFocusMove) node?.focus();\n    },\n    [shouldFocusMove],\n  );\n  return React.useMemo(\n    () => ({ shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove }),\n    [innerRefHandlerDrilldown, innerRefHandlerMove, shouldFocusDrilldown, shouldFocusMove],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB,uBAAuB;AAE1C,MAAM,sBAAsB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AAC1F,QAAM,cAAc,SAAS,CAAC,UAAU,MAAM,WAAW;AACzD,QAAM,YAAY,SAAS,CAAC,UAAU,MAAM,SAAS;AACrD,QAAM,kBAAkB,SAAS,CAAC,UAAU,MAAM,eAAe;AACjE,QAAM,aAAa,qBAAqB,gBAAgB,yBAAyB,gBAAgB;AACjG,QAAM,aAAa,KAAK,SAAS;AACjC,QAAM,EAAE,sBAAsB,gBAAgB,IAAIA,OAAM;AAAA,IACtD,OAAO;AAAA,MACL,sBACE,cAAc,cAAc,gBAAgB,cAAc,oBAAoB,gBAAgB;AAAA,MAChG,iBACE,cAAc,cAAc,gBAAgB,cAAc,oBAAoB,gBAAgB;AAAA,IAClG;AAAA,IACA,CAAC,YAAY,YAAY,WAAW,iBAAiB,WAAW;AAAA,EAClE;AACA,QAAM,2BAA2BA,OAAM;AAAA,IACrC,CAAC,SAA4B;AAC3B,UAAI;AAAsB,cAAM,MAAM;AAAA,IACxC;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AACA,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAA4B;AAC3B,UAAI;AAAiB,cAAM,MAAM;AAAA,IACnC;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AACA,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,sBAAsB,iBAAiB,0BAA0B,oBAAoB;AAAA,IAC9F,CAAC,0BAA0B,qBAAqB,sBAAsB,eAAe;AAAA,EACvF;AACF;",
+  "names": ["React"]
+}

package/dist/esm/parts/Item/ItemMiddleSection.js

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { styled } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSTypography } from "@elliemae/ds-typography";
+const IconWrapper = styled(Grid, { name: "ds-shuttle-v2", slot: "item-icon-wrapper" })`
+  min-height: 1rem;
+`;
+const LabelWrapper = styled(Grid, { name: "ds-shuttle-v2", slot: "item-label-wrapper" })`
+  min-height: 1rem;
+`;
+const MidSection = styled(Grid, { name: "ds-shuttle-v2", slot: "item-midsection-wrapper" })`
+  min-height: 1rem;
+  ${(props) => {
+  if (props.$softDeleted)
+    return `
+      color: ${props.theme.colors.neutral[500]};
+      svg {
+        fill: ${props.theme.colors.neutral[400]};
+      }
+    `;
+  return "";
+}};
+`;
+const customMidSectionCols = ["1fr"];
+const customMidSectionRows = ["1fr"];
+const withSubtitleRows = ["auto", "auto"];
+const TextSection = React2.memo((props) => {
+  const { label, subtitle } = props.item.original;
+  if (subtitle === void 0)
+    return /* @__PURE__ */ jsx(LabelWrapper, {
+      alignItems: "center",
+      children: /* @__PURE__ */ jsx(DSTypography, {
+        variant: "b1",
+        children: label
+      })
+    });
+  return /* @__PURE__ */ jsxs(Grid, {
+    alignItems: "center",
+    rows: withSubtitleRows,
+    gutter: "1px",
+    children: [
+      /* @__PURE__ */ jsx(DSTypography, {
+        variant: "b1",
+        children: label
+      }),
+      /* @__PURE__ */ jsx(DSTypography, {
+        variant: "b4",
+        children: subtitle
+      })
+    ]
+  });
+});
+const ItemMiddleSection = React2.memo((itemMeta) => {
+  const { item } = itemMeta;
+  const { original } = item;
+  const { Icon, CustomRenderer, softDeleted } = original;
+  const cols = React2.useMemo(() => {
+    if (CustomRenderer)
+      return [];
+    const dynamicCols = [];
+    if (Icon)
+      dynamicCols.push("auto");
+    dynamicCols.push("1fr");
+    return dynamicCols;
+  }, [CustomRenderer, Icon]);
+  if (CustomRenderer)
+    return /* @__PURE__ */ jsx(MidSection, {
+      cols: customMidSectionCols,
+      rows: customMidSectionRows,
+      $softDeleted: softDeleted,
+      children: /* @__PURE__ */ jsx(CustomRenderer, {
+        ...itemMeta
+      })
+    });
+  return /* @__PURE__ */ jsxs(MidSection, {
+    cols,
+    alignItems: "center",
+    ml: "xxs",
+    $softDeleted: softDeleted,
+    children: [
+      Icon ? /* @__PURE__ */ jsx(IconWrapper, {
+        alignItems: "center",
+        mr: "xxs",
+        children: /* @__PURE__ */ jsx(Icon, {
+          ...itemMeta
+        })
+      }) : null,
+      /* @__PURE__ */ jsx(TextSection, {
+        ...itemMeta
+      })
+    ]
+  });
+});
+export {
+  ItemMiddleSection
+};
+//# sourceMappingURL=ItemMiddleSection.js.map

package/dist/esm/parts/Item/ItemMiddleSection.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/ItemMiddleSection.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\n\nconst IconWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-icon-wrapper' })`\n  min-height: 1rem;\n`;\nconst LabelWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-label-wrapper' })`\n  min-height: 1rem;\n`;\nconst MidSection = styled(Grid, { name: 'ds-shuttle-v2', slot: 'item-midsection-wrapper' })`\n  min-height: 1rem;\n  ${(props) => {\n    if (props.$softDeleted)\n      return `\n      color: ${props.theme.colors.neutral[500]};\n      svg {\n        fill: ${props.theme.colors.neutral[400]};\n      }\n    `;\n    return '';\n  }};\n`;\nconst customMidSectionCols = ['1fr'];\nconst customMidSectionRows = ['1fr'];\n\nconst withSubtitleRows = ['auto', 'auto'];\nconst TextSection = React.memo((props: DSShuttleV2T.ItemMeta) => {\n  const { label, subtitle } = props.item.original;\n  if (subtitle === undefined)\n    return (\n      <LabelWrapper alignItems=\"center\">\n        <DSTypography variant=\"b1\">{label}</DSTypography>\n      </LabelWrapper>\n    );\n  return (\n    <Grid alignItems=\"center\" rows={withSubtitleRows} gutter=\"1px\">\n      <DSTypography variant=\"b1\">{label}</DSTypography>\n      <DSTypography variant=\"b4\">{subtitle}</DSTypography>\n    </Grid>\n  );\n});\n\nexport const ItemMiddleSection = React.memo((itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { item } = itemMeta;\n  const { original } = item;\n  const { Icon, CustomRenderer, softDeleted } = original;\n  const cols = React.useMemo(() => {\n    // if CustomRenderer is defined, shortcircuit\n    if (CustomRenderer) return [];\n    const dynamicCols = [];\n    if (Icon) dynamicCols.push('auto');\n    dynamicCols.push('1fr');\n    return dynamicCols;\n  }, [CustomRenderer, Icon]);\n\n  if (CustomRenderer)\n    return (\n      <MidSection cols={customMidSectionCols} rows={customMidSectionRows} $softDeleted={softDeleted}>\n        <CustomRenderer {...itemMeta} />\n      </MidSection>\n    );\n\n  return (\n    <MidSection cols={cols} alignItems=\"center\" ml=\"xxs\" $softDeleted={softDeleted}>\n      {Icon ? (\n        <IconWrapper alignItems=\"center\" mr=\"xxs\">\n          <Icon {...itemMeta} />\n        </IconWrapper>\n      ) : null}\n      <TextSection {...itemMeta} />\n    </MidSection>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAG7B,MAAM,cAAc,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,oBAAoB,CAAC;AAAA;AAAA;AAGrF,MAAM,eAAe,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,qBAAqB,CAAC;AAAA;AAAA;AAGvF,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,iBAAiB,MAAM,0BAA0B,CAAC;AAAA;AAAA,IAEtF,CAAC,UAAU;AACX,MAAI,MAAM;AACR,WAAO;AAAA,eACE,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAE1B,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGvC,SAAO;AACT;AAAA;AAEF,MAAM,uBAAuB,CAAC,KAAK;AACnC,MAAM,uBAAuB,CAAC,KAAK;AAEnC,MAAM,mBAAmB,CAAC,QAAQ,MAAM;AACxC,MAAM,cAAcA,OAAM,KAAK,CAAC,UAAiC;AAC/D,QAAM,EAAE,OAAO,SAAS,IAAI,MAAM,KAAK;AACvC,MAAI,aAAa;AACf,WACE,oBAAC;AAAA,MAAa,YAAW;AAAA,MACvB,8BAAC;AAAA,QAAa,SAAQ;AAAA,QAAM;AAAA,OAAM;AAAA,KACpC;AAEJ,SACE,qBAAC;AAAA,IAAK,YAAW;AAAA,IAAS,MAAM;AAAA,IAAkB,QAAO;AAAA,IACvD;AAAA,0BAAC;AAAA,QAAa,SAAQ;AAAA,QAAM;AAAA,OAAM;AAAA,MAClC,oBAAC;AAAA,QAAa,SAAQ;AAAA,QAAM;AAAA,OAAS;AAAA;AAAA,GACvC;AAEJ,CAAC;AAEM,MAAM,oBAAoBA,OAAM,KAAK,CAAC,aAAoC;AAC/E,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,MAAM,gBAAgB,YAAY,IAAI;AAC9C,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAE/B,QAAI;AAAgB,aAAO,CAAC;AAC5B,UAAM,cAAc,CAAC;AACrB,QAAI;AAAM,kBAAY,KAAK,MAAM;AACjC,gBAAY,KAAK,KAAK;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,IAAI,CAAC;AAEzB,MAAI;AACF,WACE,oBAAC;AAAA,MAAW,MAAM;AAAA,MAAsB,MAAM;AAAA,MAAsB,cAAc;AAAA,MAChF,8BAAC;AAAA,QAAgB,GAAG;AAAA,OAAU;AAAA,KAChC;AAGJ,SACE,qBAAC;AAAA,IAAW;AAAA,IAAY,YAAW;AAAA,IAAS,IAAG;AAAA,IAAM,cAAc;AAAA,IAChE;AAAA,aACC,oBAAC;AAAA,QAAY,YAAW;AAAA,QAAS,IAAG;AAAA,QAClC,8BAAC;AAAA,UAAM,GAAG;AAAA,SAAU;AAAA,OACtB,IACE;AAAA,MACJ,oBAAC;AAAA,QAAa,GAAG;AAAA,OAAU;AAAA;AAAA,GAC7B;AAEJ,CAAC;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+import { styled } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+const StyledItemSelection = styled(Grid, { name: "ds-shuttle-v2", slot: "item-selection" })`
+  width: 5px;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: ${(props) => {
+  if (props.$isSelected)
+    return props.theme.colors.brand[500];
+  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 "";
+}};
+`;
+const ItemSelection = React2.memo(({ item: { isSelected, selectionPrevented } }) => /* @__PURE__ */ jsx(StyledItemSelection, {
+  $isSelected: isSelected,
+  $selectionPrevented: selectionPrevented
+}));
+export {
+  ItemSelection
+};
+//# sourceMappingURL=ItemSelection.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/ItemSelection.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAGrB,MAAM,sBAAsB,OAAO,MAAM,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,gBAAgBA,OAAM,KAAK,CAAC,EAAE,MAAM,EAAE,YAAY,mBAAmB,EAAE,MAClF,oBAAC;AAAA,EAAoB,aAAa;AAAA,EAAY,qBAAqB;AAAA,CAAoB,CACxF;",
+  "names": ["React"]
+}

package/dist/esm/parts/Item/useItemArrowNavigation.js

@@ -0,0 +1,56 @@
+import * as React from "react";
+import React2 from "react";
+import { useFocusItemTracker, useFocusActionTrackers } from "../../config/useFocusTracker";
+const useItemArrowNavigation = (itemMeta) => {
+  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem } = useFocusItemTracker();
+  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent } = useFocusActionTrackers();
+  const { item } = itemMeta;
+  const { isFirst, isLast } = item;
+  const onItemContainerKeyDown = React2.useCallback(
+    (e) => {
+      const { key } = e;
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key))
+        e.preventDefault();
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(key))
+        e.stopPropagation();
+      if (key === "ArrowLeft") {
+        if (mutableFocusItem.current === "first" && isFirst || mutableFocusItem.current === "last" && isLast) {
+          trackFocusItem(item);
+        }
+        trackFocusPrevAction(itemMeta);
+      }
+      if (key === "ArrowRight") {
+        if (mutableFocusItem.current === "first" && isFirst || mutableFocusItem.current === "last" && isLast) {
+          trackFocusItem(item);
+        }
+        trackFocusNextAction(itemMeta);
+      }
+      if (key === "ArrowUp") {
+        trackFocusPrevItem(itemMeta);
+        trackFocusActionParent();
+      }
+      if (key === "ArrowDown") {
+        trackFocusNextItem(itemMeta);
+        trackFocusActionParent();
+      }
+    },
+    [
+      mutableFocusItem,
+      isFirst,
+      isLast,
+      trackFocusPrevAction,
+      itemMeta,
+      trackFocusItem,
+      item,
+      trackFocusNextAction,
+      trackFocusPrevItem,
+      trackFocusActionParent,
+      trackFocusNextItem
+    ]
+  );
+  return React2.useMemo(() => ({ onItemContainerKeyDown }), [onItemContainerKeyDown]);
+};
+export {
+  useItemArrowNavigation
+};
+//# sourceMappingURL=useItemArrowNavigation.js.map

package/dist/esm/parts/Item/useItemArrowNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/useItemArrowNavigation.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\n// import { useStore } from '../../config/useStore';\nimport { useFocusItemTracker, useFocusActionTrackers } from '../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../react-desc-prop-types';\n\nexport const useItemArrowNavigation = (itemMeta: DSShuttleV2T.ItemMeta) => {\n  const { mutableFocusItem, trackFocusPrevItem, trackFocusNextItem, trackFocusItem } = useFocusItemTracker();\n  const { trackFocusNextAction, trackFocusPrevAction, trackFocusActionParent } = useFocusActionTrackers();\n  const { item } = itemMeta;\n  const { isFirst, isLast } = item;\n\n  const onItemContainerKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { key } = e;\n      // stopping prepagation it's required to avoid \"ArrowUp/ArrowDown\" to trigger parents logic\n      // preventDefault it's just me thinking it's good idea when stopping propagation\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      if (key === 'ArrowLeft') {\n        if ((mutableFocusItem.current === 'first' && isFirst) || (mutableFocusItem.current === 'last' && isLast)) {\n          trackFocusItem(item);\n        }\n        trackFocusPrevAction(itemMeta);\n      }\n      if (key === 'ArrowRight') {\n        if ((mutableFocusItem.current === 'first' && isFirst) || (mutableFocusItem.current === 'last' && isLast)) {\n          trackFocusItem(item);\n        }\n        trackFocusNextAction(itemMeta);\n      }\n      if (key === 'ArrowUp') {\n        trackFocusPrevItem(itemMeta);\n        trackFocusActionParent();\n      }\n      if (key === 'ArrowDown') {\n        trackFocusNextItem(itemMeta);\n        trackFocusActionParent();\n      }\n    },\n    [\n      mutableFocusItem,\n      isFirst,\n      isLast,\n      trackFocusPrevAction,\n      itemMeta,\n      trackFocusItem,\n      item,\n      trackFocusNextAction,\n      trackFocusPrevItem,\n      trackFocusActionParent,\n      trackFocusNextItem,\n    ],\n  );\n\n  return React.useMemo(() => ({ onItemContainerKeyDown }), [onItemContainerKeyDown]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,OAAOA,YAAW;AAElB,SAAS,qBAAqB,8BAA8B;AAGrD,MAAM,yBAAyB,CAAC,aAAoC;AACzE,QAAM,EAAE,kBAAkB,oBAAoB,oBAAoB,eAAe,IAAI,oBAAoB;AACzG,QAAM,EAAE,sBAAsB,sBAAsB,uBAAuB,IAAI,uBAAuB;AACtG,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,OAAO,IAAI;AAE5B,QAAM,yBAAyBA,OAAM;AAAA,IACnC,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAGhB,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,eAAe;AACxF,UAAI,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,GAAG;AAAG,UAAE,gBAAgB;AACzF,UAAI,QAAQ,aAAa;AACvB,YAAK,iBAAiB,YAAY,WAAW,WAAa,iBAAiB,YAAY,UAAU,QAAS;AACxG,yBAAe,IAAI;AAAA,QACrB;AACA,6BAAqB,QAAQ;AAAA,MAC/B;AACA,UAAI,QAAQ,cAAc;AACxB,YAAK,iBAAiB,YAAY,WAAW,WAAa,iBAAiB,YAAY,UAAU,QAAS;AACxG,yBAAe,IAAI;AAAA,QACrB;AACA,6BAAqB,QAAQ;AAAA,MAC/B;AACA,UAAI,QAAQ,WAAW;AACrB,2BAAmB,QAAQ;AAC3B,+BAAuB;AAAA,MACzB;AACA,UAAI,QAAQ,aAAa;AACvB,2BAAmB,QAAQ;AAC3B,+BAAuB;AAAA,MACzB;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAOA,OAAM,QAAQ,OAAO,EAAE,uBAAuB,IAAI,CAAC,sBAAsB,CAAC;AACnF;",
+  "names": ["React"]
+}