@elliemae/ds-legacy-shuttle-v2 1.0.0-rc.1

package/dist/esm/config/useStore/focusAndTabIndexManager.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { ITEMS_FOCUSES, REGIONS_FOCUSES } from "../../constants/index.js";
+const getElementFromState = (state) => {
+  const [focusRegion, focusItem, focusItemAction, get] = state;
+  const { getZustandRef } = get();
+  if (focusItem === ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE && (focusRegion === REGIONS_FOCUSES.SOURCE_BOTTOM || focusRegion === REGIONS_FOCUSES.SOURCE_PANEL_ITEM)) {
+    return getZustandRef([focusItem]);
+  }
+  if (focusItem === ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION && (focusRegion === REGIONS_FOCUSES.DESTINATION_BOTTOM || focusRegion === REGIONS_FOCUSES.DESTINATION_PANEL_ITEM)) {
+    return getZustandRef([focusItem]);
+  }
+  return getZustandRef([focusRegion, focusItem, focusItemAction]);
+};
+const isItem = (state) => state[2] === "parent" && state[1] !== ITEMS_FOCUSES.LOAD_MORE_BTN_SOURCE && state[1] !== ITEMS_FOCUSES.LOAD_MORE_BTN_DESTINATION;
+const isMove = (state) => state[2] === "move-btn";
+const isDrilldown = (state) => state[2] === "drilldown-btn";
+const shouldApplyRovingTabIndex = (state) => isItem(state) || isMove(state) || isDrilldown(state);
+const tabIndexManager = ({
+  selectedState,
+  previousSelectedState,
+  currentFocusedItem,
+  nextFocusedItem
+}) => {
+  if (currentFocusedItem && shouldApplyRovingTabIndex(previousSelectedState)) {
+    currentFocusedItem.tabIndex = -1;
+  }
+  if (nextFocusedItem && shouldApplyRovingTabIndex(selectedState)) {
+    nextFocusedItem.tabIndex = 0;
+  }
+};
+const focusAndTabIndexManager = (selectedState, previousSelectedState) => {
+  const currentFocusedItem = getElementFromState(previousSelectedState);
+  const nextFocusedItem = getElementFromState(selectedState);
+  const get = selectedState[3];
+  const { setDeferFocusUntilFirstRender } = get();
+  tabIndexManager({ selectedState, previousSelectedState, currentFocusedItem, nextFocusedItem });
+  if (isItem(selectedState)) {
+    setDeferFocusUntilFirstRender(true);
+  } else {
+    setDeferFocusUntilFirstRender(false);
+  }
+  nextFocusedItem?.focus();
+};
+export {
+  focusAndTabIndexManager
+};
+//# sourceMappingURL=focusAndTabIndexManager.js.map

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

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

package/dist/esm/config/useStore/index.js

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

package/dist/esm/config/useStore/index.js.map

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

package/dist/esm/config/useStore/useStore.js

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { createInternalAndPropsContext } from "@elliemae/ds-legacy-zustand-helpers";
+import deepequal from "fast-deep-equal/react.js";
+import { defaultProps } from "../../react-desc-prop-types.js";
+import { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from "../../constants/index.js";
+import { useAutoCalculated } from "../useAutoCalculated/index.js";
+import { focusAndTabIndexManager } from "./focusAndTabIndexManager.js";
+const internalAtomDefaultValues = {
+  focusRegion: REGIONS_FOCUSES.RESET,
+  focusItem: ITEMS_FOCUSES.RESET,
+  focusItemAction: ACTIONS_FOCUSES.RESET,
+  deferFocusUntilFirstRender: false,
+  dropIndicatorPosition: 0,
+  overId: "",
+  lastActiveId: "",
+  dndDraggingItem: null,
+  dndDraggingItemMeta: null,
+  isDropValid: false,
+  sourcePanelLastSelectedItem: null,
+  destinationPanelLastSelectedItem: null
+};
+const selectors = (get) => ({
+  getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== "",
+  getPanelLastSelectedItem: (isDestinationPanel) => isDestinationPanel ? get()?.destinationPanelLastSelectedItem : get()?.sourcePanelLastSelectedItem
+});
+const reducers = () => ({});
+const subscribers = (api) => {
+  api.subscribe(
+    (state) => [state.focusRegion, state.focusItem, state.focusItemAction, state.get],
+    focusAndTabIndexManager,
+    {
+      equalityFn: deepequal
+    }
+  );
+};
+const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext();
+const config = {
+  defaultProps,
+  internalAtomDefaultValues,
+  useAutoCalculated,
+  selectors,
+  reducers,
+  subscribers,
+  PropsProvider,
+  usePropsStore,
+  InternalProvider,
+  useInternalStore
+};
+export {
+  InternalProvider,
+  PropsProvider,
+  config,
+  useInternalStore,
+  usePropsStore
+};
+//# sourceMappingURL=useStore.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/config/useStore/useStore.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createInternalAndPropsContext, type ZustandT } from '@elliemae/ds-legacy-zustand-helpers';\nimport deepequal from 'fast-deep-equal/react.js';\nimport { defaultProps, type DSShuttleV2T } from '../../react-desc-prop-types.js';\nimport { REGIONS_FOCUSES, ACTIONS_FOCUSES, ITEMS_FOCUSES } from '../../constants/index.js';\nimport { useAutoCalculated } from '../useAutoCalculated/index.js';\nimport { focusAndTabIndexManager } from './focusAndTabIndexManager.js';\n\nconst internalAtomDefaultValues: DSShuttleV2T.InternalAtoms = {\n  focusRegion: REGIONS_FOCUSES.RESET,\n  focusItem: ITEMS_FOCUSES.RESET,\n  focusItemAction: ACTIONS_FOCUSES.RESET,\n  deferFocusUntilFirstRender: false,\n  dropIndicatorPosition: 0,\n  overId: '',\n  lastActiveId: '',\n  dndDraggingItem: null,\n  dndDraggingItemMeta: null,\n  isDropValid: false,\n  sourcePanelLastSelectedItem: null,\n  destinationPanelLastSelectedItem: null,\n};\n\nconst selectors: ZustandT.SelectorObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Selectors> = (get) => ({\n  getIsDragAndDropHappening: () => Boolean(get()?.lastActiveId) && get()?.lastActiveId !== '',\n  getPanelLastSelectedItem: (isDestinationPanel: boolean) =>\n    isDestinationPanel ? get()?.destinationPanelLastSelectedItem : get()?.sourcePanelLastSelectedItem,\n});\n\nconst reducers: ZustandT.ReducerObject<DSShuttleV2T.ShuttleInternalStore, DSShuttleV2T.Reducers> = () => ({});\n\nconst subscribers: ZustandT.Subscribers<DSShuttleV2T.ShuttleInternalStore> = (api) => {\n  api.subscribe(\n    (state) => [state.focusRegion, state.focusItem, state.focusItemAction, state.get] as const,\n    focusAndTabIndexManager,\n    {\n      equalityFn: deepequal,\n    },\n  );\n};\n\nexport const { PropsProvider, usePropsStore, InternalProvider, useInternalStore } = createInternalAndPropsContext<\n  DSShuttleV2T.InternalProps,\n  DSShuttleV2T.InternalAtoms,\n  DSShuttleV2T.UseAutoCalculatedT,\n  DSShuttleV2T.Selectors,\n  DSShuttleV2T.Reducers\n>();\n\nexport const config = {\n  defaultProps: defaultProps as DSShuttleV2T.InternalProps,\n  internalAtomDefaultValues: internalAtomDefaultValues,\n  useAutoCalculated,\n  selectors,\n  reducers,\n  subscribers,\n  PropsProvider,\n  usePropsStore,\n  InternalProvider,\n  useInternalStore,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qCAAoD;AAC7D,OAAO,eAAe;AACtB,SAAS,oBAAuC;AAChD,SAAS,iBAAiB,iBAAiB,qBAAqB;AAChE,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AAExC,MAAM,4BAAwD;AAAA,EAC5D,aAAa,gBAAgB;AAAA,EAC7B,WAAW,cAAc;AAAA,EACzB,iBAAiB,gBAAgB;AAAA,EACjC,4BAA4B;AAAA,EAC5B,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,6BAA6B;AAAA,EAC7B,kCAAkC;AACpC;AAEA,MAAM,YAAgG,CAAC,SAAS;AAAA,EAC9G,2BAA2B,MAAM,QAAQ,IAAI,GAAG,YAAY,KAAK,IAAI,GAAG,iBAAiB;AAAA,EACzF,0BAA0B,CAAC,uBACzB,qBAAqB,IAAI,GAAG,mCAAmC,IAAI,GAAG;AAC1E;AAEA,MAAM,WAA6F,OAAO,CAAC;AAE3G,MAAM,cAAuE,CAAC,QAAQ;AACpF,MAAI;AAAA,IACF,CAAC,UAAU,CAAC,MAAM,aAAa,MAAM,WAAW,MAAM,iBAAiB,MAAM,GAAG;AAAA,IAChF;AAAA,IACA;AAAA,MACE,YAAY;AAAA,IACd;AAAA,EACF;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,kBAAkB,iBAAiB,IAAI,8BAMlF;AAEK,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
+  "names": []
+}

package/dist/esm/config/useValidateProps.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-legacy-props-helpers";
+import { DSShuttleV2Name } from "../constants/index.js";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSShuttleV2Name);
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/esm/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-legacy-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { DSShuttleV2Name } from '../constants/index.js';\nimport type { DSShuttleV2T } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSShuttleV2T.Props, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSShuttleV2Name);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAE/C,SAAS,uBAAuB;AAGzB,MAAM,mBAAmB,CAAC,OAA2B,cAAgD;AAE1G,iCAA+B,OAAO,WAAW,eAAe;AAClE;",
+  "names": []
+}

package/dist/esm/constants/index.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+const DSShuttleV2Name = "DSShuttleV2";
+const REGIONS_FOCUSES = {
+  SOURCE_HEADER: "source-header",
+  SOURCE_PANEL: "source-panel",
+  SOURCE_PANEL_ITEM: "source-panel-item",
+  SOURCE_PANEL_ITEM_MOVE_ALL: "source-panel-move-all",
+  SOURCE_BOTTOM: "source-bottom",
+  DESTINATION_HEADER: "destination-header",
+  DESTINATION_PANEL: "destination-panel",
+  DESTINATION_PANEL_ITEM: "destination-panel-item",
+  DESTINATION_PANEL_ITEM_MOVE_ALL: "destination-panel-move-all",
+  DESTINATION_BOTTOM: "destination-bottom",
+  RESET: ""
+};
+const ACTIONS_FOCUSES = {
+  MOVE_BTN: "move-btn",
+  DRILLDOWN_BTN: "drilldown-btn",
+  DRAG_N_DROP: "drag-n-drop",
+  PARENT: "parent",
+  RESET: ""
+};
+const ITEMS_FOCUSES = {
+  LOAD_MORE_BTN_SOURCE: "load-more-btn-source",
+  LOAD_MORE_BTN_DESTINATION: "load-more-btn-destination",
+  GET_SPECIFIC_ITEM: ({ hydratedId }) => hydratedId,
+  RESET: ""
+};
+const DATA_TESTID = {
+  SHUTTLE_DRAG_HANDLE: "shuttle-drag-handle"
+};
+export {
+  ACTIONS_FOCUSES,
+  DATA_TESTID,
+  DSShuttleV2Name,
+  ITEMS_FOCUSES,
+  REGIONS_FOCUSES
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/exported-related/ShuttleItem.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { DSPopperJS } from "@elliemae/ds-legacy-popperjs";
+import { styled } from "@elliemae/ds-legacy-system";
+const StyledTooltipContentWrapper = styled(Grid)`
+  background: white;
+`;
+const ShuttleItem = (props) => {
+  const { componentProps, shouldShowTooltip = true, TooltipContent = null, children } = props;
+  const { tooltipHelpers } = componentProps;
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      cols: ["minmax(2.308rem, 1fr)", "1px", "auto"],
+      alignItems: "center",
+      justifyContent: "center",
+      gutter: "xxxs",
+      ref: tooltipHelpers?.setReferenceElement,
+      children: [
+        children,
+        shouldShowTooltip && TooltipContent && tooltipHelpers?.shouldShowPopover ? /* @__PURE__ */ jsx(DSPopperJS, { referenceElement: tooltipHelpers?.referenceElement, showPopover: true, children: /* @__PURE__ */ jsx(StyledTooltipContentWrapper, { children: /* @__PURE__ */ jsx(TooltipContent, { ...componentProps }) }) }) : null
+      ]
+    }
+  );
+};
+export {
+  ShuttleItem
+};
+//# sourceMappingURL=ShuttleItem.js.map

package/dist/esm/exported-related/ShuttleItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/ShuttleItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { DSPopperJS } from '@elliemae/ds-legacy-popperjs';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport type { DSShuttleV2T } from '../react-desc-prop-types.js';\n\nconst StyledTooltipContentWrapper = styled(Grid)`\n  background: white;\n`;\n\nexport type ShuttleItemProps = React.PropsWithChildren<{\n  componentProps: DSShuttleV2T.ComponentProps;\n  shouldShowTooltip?: boolean;\n  TooltipContent?: React.ComponentType<DSShuttleV2T.ComponentProps>;\n}>;\n\n// for now we create a stud state and return a paragraph with the state while logging the props\nexport const ShuttleItem: React.ComponentType<ShuttleItemProps> = (props) => {\n  const { componentProps, shouldShowTooltip = true, TooltipContent = null, children } = props;\n  const { tooltipHelpers } = componentProps;\n\n  return (\n    <Grid\n      cols={['minmax(2.308rem, 1fr)', '1px', 'auto']}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gutter=\"xxxs\"\n      ref={tooltipHelpers?.setReferenceElement}\n    >\n      {children}\n      {shouldShowTooltip && TooltipContent && tooltipHelpers?.shouldShowPopover ? (\n        <DSPopperJS referenceElement={tooltipHelpers?.referenceElement} showPopover>\n          <StyledTooltipContentWrapper>\n            <TooltipContent {...componentProps} />\n          </StyledTooltipContentWrapper>\n        </DSPopperJS>\n      ) : null}\n    </Grid>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBnB,SAWQ,KAXR;AArBJ,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAGvB,MAAM,8BAA8B,OAAO,IAAI;AAAA;AAAA;AAWxC,MAAM,cAAqD,CAAC,UAAU;AAC3E,QAAM,EAAE,gBAAgB,oBAAoB,MAAM,iBAAiB,MAAM,SAAS,IAAI;AACtF,QAAM,EAAE,eAAe,IAAI;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,yBAAyB,OAAO,MAAM;AAAA,MAC7C,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,KAAK,gBAAgB;AAAA,MAEpB;AAAA;AAAA,QACA,qBAAqB,kBAAkB,gBAAgB,oBACtD,oBAAC,cAAW,kBAAkB,gBAAgB,kBAAkB,aAAW,MACzE,8BAAC,+BACC,8BAAC,kBAAgB,GAAG,gBAAgB,GACtC,GACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "names": []
+}

package/dist/esm/exported-related/index.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { ShuttleItem } from "./ShuttleItem.js";
+export {
+  ShuttleItem
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/exported-related/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { type ShuttleItemProps, ShuttleItem } from './ShuttleItem.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgC,mBAAmB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { DSShuttleV2Name, DSShuttleV2Slots, DSShuttleV2DataTestIds } from "./config/DSShuttleV2Definitions.js";
+import { DSShuttleV2, DSShuttleV2WithSchema } from "./DSShuttleV2.js";
+import { ShuttleItem } from "./exported-related/index.js";
+export {
+  DSShuttleV2,
+  DSShuttleV2DataTestIds,
+  DSShuttleV2Name,
+  DSShuttleV2Slots,
+  DSShuttleV2WithSchema,
+  ShuttleItem
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSShuttleV2Name, DSShuttleV2Slots, DSShuttleV2DataTestIds } from './config/DSShuttleV2Definitions.js';\nexport { DSShuttleV2, DSShuttleV2WithSchema } from './DSShuttleV2.js';\nexport { ShuttleItem, type ShuttleItemProps } from './exported-related/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB,kBAAkB,8BAA8B;AAC1E,SAAS,aAAa,6BAA6B;AACnD,SAAS,mBAA0C;",
+  "names": []
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

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

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import React2 from "react";
+import { GripperVertical } from "@elliemae/ds-legacy-icons";
+import { styled } from "@elliemae/ds-legacy-system";
+import { mergeRefs } from "@elliemae/ds-legacy-utilities";
+import { DATA_TESTID } from "../../constants/index.js";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../../config/DSShuttleV2Definitions.js";
+import { usePropsStore } from "../../config/useStore/useStore.js";
+const StyledGripperButtonOrOverlay = styled("div", {
+  name: DSShuttleV2Name,
+  slot: DSShuttleV2Slots.DRAG_AND_DROP_HANDLE
+})`
+  cursor: ${({ isActive, isDragOverlay, disabled }) => {
+  if (isActive || isDragOverlay)
+    return "grabbing";
+  if (disabled)
+    return "not-allowed";
+  return "grab";
+}};
+  outline: none;
+  display: flex;
+  align-items: center;
+  touch-action: none;
+  &:focus {
+    outline: 1px solid brand-700;
+  }
+`;
+const DragHandle = (props) => {
+  const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers } = props;
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = React2.useCallback(() => props, [props]);
+  return /* @__PURE__ */ createElement(
+    StyledGripperButtonOrOverlay,
+    {
+      ...!disabled && useSortableHelpers ? {
+        ...useSortableHelpers.listeners,
+        ...useSortableHelpers.attributes
+      } : {},
+      "aria-label": "drag and drop handle",
+      isActive: isDndActive,
+      ref: mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef),
+      tabIndex: -1,
+      "data-testid": DATA_TESTID.SHUTTLE_DRAG_HANDLE,
+      id: `${id}-drag-handle`,
+      key: `${id}-drag-handle`,
+      disabled,
+      getOwnerProps,
+      getOwnerPropsArguments
+    },
+    /* @__PURE__ */ jsx(GripperVertical, { size: "s", color: isDragging || disabled ? ["neutral", "500"] : ["brand-primary", "800"] })
+  );
+};
+export {
+  DragHandle,
+  StyledGripperButtonOrOverlay
+};
+//# sourceMappingURL=DndHandle.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Dnd/DndHandle.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React from 'react';\nimport { GripperVertical } from '@elliemae/ds-legacy-icons';\nimport type { useSortable } from '@elliemae/ds-legacy-drag-and-drop';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { mergeRefs } from '@elliemae/ds-legacy-utilities';\nimport { DATA_TESTID } from '../../constants/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../../config/useStore/useStore.js';\n\nexport const StyledGripperButtonOrOverlay = styled('div', {\n  name: DSShuttleV2Name,\n  slot: DSShuttleV2Slots.DRAG_AND_DROP_HANDLE,\n})<{\n  isActive: boolean;\n  isDragOverlay?: boolean;\n  disabled?: boolean;\n}>`\n  cursor: ${({ isActive, isDragOverlay, disabled }) => {\n    if (isActive || isDragOverlay) return 'grabbing';\n    if (disabled) return 'not-allowed';\n    return 'grab';\n  }};\n  outline: none;\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  &:focus {\n    outline: 1px solid brand-700;\n  }\n`;\n\nexport const DragHandle: React.ComponentType<{\n  id: string;\n  innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n  useSortableHelpers: ReturnType<typeof useSortable>;\n  isDndActive: boolean;\n  isDragging: boolean;\n  disabled?: boolean;\n}> = (props) => {\n  const { id, isDndActive, isDragging, disabled = false, innerRef, useSortableHelpers } = props;\n\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = React.useCallback(() => props, [props]);\n\n  return (\n    <StyledGripperButtonOrOverlay\n      {...(!disabled && useSortableHelpers\n        ? {\n            ...useSortableHelpers.listeners,\n            ...useSortableHelpers.attributes,\n          }\n        : {})}\n      aria-label=\"drag and drop handle\"\n      isActive={isDndActive}\n      ref={mergeRefs(innerRef, useSortableHelpers?.setActivatorNodeRef)}\n      tabIndex={-1}\n      data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n      id={`${id}-drag-handle`}\n      key={`${id}-drag-handle`}\n      disabled={disabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <GripperVertical size=\"s\" color={isDragging || disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n    </StyledGripperButtonOrOverlay>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgEjB;AAlBF;AA7CJ,OAAOA,YAAW;AAClB,SAAS,uBAAuB;AAEhC,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAEvB,MAAM,+BAA+B,OAAO,OAAO;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,YAKW,CAAC,EAAE,UAAU,eAAe,SAAS,MAAM;AACnD,MAAI,YAAY;AAAe,WAAO;AACtC,MAAI;AAAU,WAAO;AACrB,SAAO;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUK,MAAM,aAOR,CAAC,UAAU;AACd,QAAM,EAAE,IAAI,aAAa,YAAY,WAAW,OAAO,UAAU,mBAAmB,IAAI;AAExF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyBA,OAAM,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,CAAC,YAAY,qBACd;AAAA,QACE,GAAG,mBAAmB;AAAA,QACtB,GAAG,mBAAmB;AAAA,MACxB,IACA,CAAC;AAAA,MACL,cAAW;AAAA,MACX,UAAU;AAAA,MACV,KAAK,UAAU,UAAU,oBAAoB,mBAAmB;AAAA,MAChE,UAAU;AAAA,MACV,eAAa,YAAY;AAAA,MACzB,IAAI,GAAG;AAAA,MACP,KAAK,GAAG;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,oBAAC,mBAAgB,MAAK,KAAI,OAAO,cAAc,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA,EAC3G;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/Dnd/DragOverlay.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { GripperVertical } from "@elliemae/ds-legacy-icons";
+import { DATA_TESTID } from "../../constants/index.js";
+import { StyledGripperButtonOrOverlay } from "./DndHandle.js";
+const DragOverlay = ({ id, isDragging, isDndActive }) => /* @__PURE__ */ jsx(
+  StyledGripperButtonOrOverlay,
+  {
+    isDragOverlay: true,
+    isActive: isDndActive,
+    tabIndex: -1,
+    "data-testid": DATA_TESTID.SHUTTLE_DRAG_HANDLE,
+    id: `${id}-drag-overlay`,
+    children: /* @__PURE__ */ jsx(GripperVertical, { size: "s", color: isDragging ? ["neutral", "500"] : ["brand-primary", "800"] })
+  },
+  `${id}-drag-overlay`
+);
+export {
+  DragOverlay
+};
+//# sourceMappingURL=DragOverlay.js.map

package/dist/esm/parts/Dnd/DragOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Dnd/DragOverlay.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { GripperVertical } from '@elliemae/ds-legacy-icons';\nimport { DATA_TESTID } from '../../constants/index.js';\nimport { StyledGripperButtonOrOverlay } from './DndHandle.js';\n\nexport const DragOverlay: React.ComponentType<{\n  id: string;\n  isDndActive: boolean;\n  isDragging: boolean;\n}> = ({ id, isDragging, isDndActive }) => (\n  <StyledGripperButtonOrOverlay\n    isDragOverlay\n    isActive={isDndActive}\n    tabIndex={-1}\n    data-testid={DATA_TESTID.SHUTTLE_DRAG_HANDLE}\n    id={`${id}-drag-overlay`}\n    key={`${id}-drag-overlay`}\n  >\n    <GripperVertical size=\"s\" color={isDragging ? ['neutral', '500'] : ['brand-primary', '800']} />\n  </StyledGripperButtonOrOverlay>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkBnB;AAjBJ,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oCAAoC;AAEtC,MAAM,cAIR,CAAC,EAAE,IAAI,YAAY,YAAY,MAClC;AAAA,EAAC;AAAA;AAAA,IACC,eAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,IAAI,GAAG;AAAA,IAGP,8BAAC,mBAAgB,MAAK,KAAI,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,EAFxF,GAAG;AAGV;",
+  "names": []
+}

package/dist/esm/parts/Dnd/DropIndicator.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "@elliemae/ds-legacy-system";
+var DropIndicatorPosition = /* @__PURE__ */ ((DropIndicatorPosition2) => {
+  DropIndicatorPosition2["None"] = "none";
+  DropIndicatorPosition2["Before"] = "before";
+  DropIndicatorPosition2["After"] = "after";
+  return DropIndicatorPosition2;
+})(DropIndicatorPosition || {});
+const getPositionStyles = ({ dropIndicatorPosition, vertical }) => {
+  if (vertical) {
+    return `
+      left: ${dropIndicatorPosition === "before" /* Before */ ? "0" : "unset"};
+      right: ${dropIndicatorPosition === "after" /* After */ ? "0" : "unset"};
+    `;
+  }
+  return `
+      top: ${dropIndicatorPosition === "before" /* Before */ ? "0" : "unset"};
+      bottom: ${dropIndicatorPosition === "after" /* After */ ? "0" : "unset"};
+    `;
+};
+const getCircleStyles = ({ dropIndicatorPosition, vertical }) => ({
+  position: "absolute",
+  top: vertical || dropIndicatorPosition === "after" /* After */ ? "unset" : "-2px",
+  bottom: vertical || dropIndicatorPosition === "before" /* Before */ ? "unset" : "-2px",
+  left: !vertical || dropIndicatorPosition === "after" /* After */ ? "unset" : "-2px",
+  right: !vertical || dropIndicatorPosition === "before" /* Before */ ? "unset" : "-2px",
+  opacity: 1
+});
+const StyledIndicator = styled.div`
+  position: absolute;
+  ${getPositionStyles}
+  box-sizing: border-box;
+  width: ${(props) => props.vertical ? "2px" : "100%"};
+  height: ${(props) => props.vertical ? "100%" : "2px"};
+  background-color: ${({ isDropValid, theme }) => isDropValid ? theme.colors.brand[600] : theme.colors.danger[900]};
+`;
+const CircleIndicator = (style, isDropValid) => /* @__PURE__ */ jsx("svg", { height: "6", width: "6", style, children: /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "3", strokeWidth: "0", fill: isDropValid ? "#1E79C2" : "#C64252" }) });
+const DropIndicator = (props) => {
+  const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;
+  if (dropIndicatorPosition === false || !["after" /* After */, "before" /* Before */].includes(dropIndicatorPosition)) {
+    return null;
+  }
+  const safeDropIndicatorPosition = isLast ? "before" /* Before */ : dropIndicatorPosition;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid),
+    /* @__PURE__ */ jsx(
+      StyledIndicator,
+      {
+        vertical,
+        dropIndicatorPosition: safeDropIndicatorPosition,
+        isDropValid
+      }
+    )
+  ] });
+};
+var DropIndicator_default = DropIndicator;
+export {
+  DropIndicator,
+  DropIndicator_default as default
+};
+//# sourceMappingURL=DropIndicator.js.map

package/dist/esm/parts/Dnd/DropIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Dnd/DropIndicator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\n\nenum DropIndicatorPosition {\n  None = 'none',\n  Before = 'before',\n  After = 'after',\n}\n\ninterface DropIndicatorProps {\n  vertical: boolean;\n  dropIndicatorPosition: false | DropIndicatorPosition;\n  isDropValid: boolean;\n  isLast?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => {\n  if (vertical) {\n    return `\n      left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n  }\n  return `\n      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n    `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => ({\n  position: 'absolute',\n  top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n  right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n  opacity: 1,\n});\n\nconst StyledIndicator = styled.div<DropIndicatorProps>`\n  position: absolute;\n  ${getPositionStyles}\n  box-sizing: border-box;\n  width: ${(props) => (props.vertical ? '2px' : '100%')};\n  height: ${(props) => (props.vertical ? '100%' : '2px')};\n  background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean) => (\n  <svg height=\"6\" width=\"6\" style={style}>\n    <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n  </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = (props) => {\n  const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;\n  if (\n    dropIndicatorPosition === false ||\n    ![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition)\n  ) {\n    return null;\n  }\n\n  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n  return (\n    <>\n      {CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n      <StyledIndicator\n        vertical={vertical}\n        dropIndicatorPosition={safeDropIndicatorPosition}\n        isDropValid={isDropValid}\n      />\n    </>\n  );\n};\n\nexport { DropIndicator };\nexport default DropIndicator;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiDnB,SAeA,UAfA,KAeA,YAfA;AAhDJ,SAAS,cAAc;AAEvB,IAAK,wBAAL,kBAAKA,2BAAL;AACE,EAAAA,uBAAA,UAAO;AACP,EAAAA,uBAAA,YAAS;AACT,EAAAA,uBAAA,WAAQ;AAHL,SAAAA;AAAA,GAAA;AAaL,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAA0B;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,wBAA+B,MAAM;AAAA,eAC9D,0BAA0B,sBAA8B,MAAM;AAAA;AAAA,EAE3E;AACA,SAAO;AAAA,aACI,0BAA0B,wBAA+B,MAAM;AAAA,gBAC5D,0BAA0B,sBAA8B,MAAM;AAAA;AAE9E;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAA2B;AAAA,EACpF,UAAU;AAAA,EACV,KAAK,YAAY,0BAA0B,sBAA8B,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,wBAA+B,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,sBAA8B,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,wBAA+B,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG;AAAA;AAGlH,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,oBAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,8BAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,uBAAuB,QAAQ,YAAY,IAAI;AACjE,MACE,0BAA0B,SAC1B,CAAC,CAAC,qBAA6B,qBAA4B,EAAE,SAAS,qBAAqB,GAC3F;AACA,WAAO;AAAA,EACT;AAEA,QAAM,4BAA4B,SAAS,wBAA+B;AAC1E,SACE,iCACG;AAAA,oBAAgB,gBAAgB,EAAE,GAAG,OAAO,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IAC7G;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,uBAAuB;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,wBAAQ;",
+  "names": ["DropIndicatorPosition"]
+}

package/dist/esm/parts/Header.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useCallback } from "react";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { Search } from "@elliemae/ds-legacy-icons";
+import {
+  DSButtonV2
+} from "@elliemae/ds-legacy-button-v2";
+import { styled } from "@elliemae/ds-legacy-system";
+import { DSShuttleV2Name, DSShuttleV2Slots } from "../config/DSShuttleV2Definitions.js";
+import { usePropsStore } from "../config/useStore/index.js";
+import { useFocusTracker } from "../config/useFocusTracker/index.js";
+const StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.HEADER_SEARCH_ICON })``;
+const Header = React2.memo((panelMetaInfo) => {
+  const { isDestinationPanel } = panelMetaInfo;
+  const HeaderRenderer = usePropsStore((state) => isDestinationPanel ? state.DestinationHeader : state.SourceHeader);
+  const onSearchBarOpen = usePropsStore(
+    (state) => isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar
+  );
+  const isSearchBarOpen = usePropsStore(
+    (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]);
+  const getOwnerProps = usePropsStore((store) => store.get);
+  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);
+  return /* @__PURE__ */ jsxs(Grid, { onFocus: onHeaderFocus, cols, children: [
+    /* @__PURE__ */ jsx(HeaderRenderer, {}),
+    onSearchBarOpen ? /* @__PURE__ */ jsx(Grid, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(
+      StyledIconButton,
+      {
+        "aria-label": `Toggle ${isDestinationPanel ? "destination" : "source"} panel filter bar`,
+        buttonType: "icon",
+        onClick: handleFilterClick,
+        w: 24,
+        h: 24,
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: /* @__PURE__ */ jsx(Search, { width: "1.077rem", height: "1.077rem" })
+      }
+    ) }) : 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, { useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { Search } from '@elliemae/ds-legacy-icons';\nimport {\n  DSButtonV2,\n  type DSButtonT,\n  // BUTTON_SIZES\n} from '@elliemae/ds-legacy-button-v2';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { DSShuttleV2Name, DSShuttleV2Slots } from '../config/DSShuttleV2Definitions.js';\nimport { usePropsStore } from '../config/useStore/index.js';\nimport { useFocusTracker } from '../config/useFocusTracker/index.js';\nimport { type DSShuttleV2T } from '../react-desc-prop-types.js';\n\nconst StyledIconButton = styled(DSButtonV2, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.HEADER_SEARCH_ICON })``;\nexport const Header = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n  const { isDestinationPanel } = panelMetaInfo;\n  const HeaderRenderer = usePropsStore((state) => (isDestinationPanel ? state.DestinationHeader : state.SourceHeader));\n  const onSearchBarOpen = usePropsStore((state) =>\n    isDestinationPanel ? state.onDesinationOpenSearchbar : state.onSourceOpenSearchbar,\n  );\n  const isSearchBarOpen = usePropsStore((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.useCallback(\n    (event: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => {\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  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => panelMetaInfo, [panelMetaInfo]);\n\n  return (\n    <Grid onFocus={onHeaderFocus} cols={cols}>\n      <HeaderRenderer />\n      {onSearchBarOpen ? (\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          <StyledIconButton\n            aria-label={`Toggle ${isDestinationPanel ? 'destination' : 'source'} panel filter bar`}\n            buttonType=\"icon\"\n            onClick={handleFilterClick}\n            w={24}\n            h={24}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <Search width=\"1.077rem\" height=\"1.077rem\" />\n          </StyledIconButton>\n        </Grid>\n      ) : null}\n    </Grid>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgDnB,SACE,KADF;AAhDJ,OAAOA,UAAS,mBAAmB;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,cAAc;AACvB,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAGhC,MAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,mBAAmB,CAAC;AACzG,MAAM,SAASA,OAAM,KAAK,CAAC,kBAA8C;AAC9E,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,iBAAiB,cAAc,CAAC,UAAW,qBAAqB,MAAM,oBAAoB,MAAM,YAAa;AACnH,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,kBAAkB;AAAA,IAAc,CAAC,UACrC,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,oBAAoBA,OAAM;AAAA,IAC9B,CAAC,UAA+D;AAC9D,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,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,eAAe,CAAC,aAAa,CAAC;AAE/E,SACE,qBAAC,QAAK,SAAS,eAAe,MAC5B;AAAA,wBAAC,kBAAe;AAAA,IACf,kBACC,oBAAC,QAAK,YAAW,UAAS,gBAAe,UACvC;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,UAAU,qBAAqB,gBAAgB;AAAA,QAC3D,YAAW;AAAA,QACX,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QAEA,8BAAC,UAAO,OAAM,YAAW,QAAO,YAAW;AAAA;AAAA,IAC7C,GACF,IACE;AAAA,KACN;AAEJ,CAAC;",
+  "names": ["React"]
+}