@elliemae/ds-shuttle-v2 3.12.0-rc.2 → 3.12.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/dist/cjs/DSShuttleV2.js +1 -9
  2. package/dist/cjs/DSShuttleV2.js.map +1 -1
  3. package/dist/cjs/parts/Header.js +4 -15
  4. package/dist/cjs/parts/Header.js.map +1 -1
  5. package/dist/cjs/parts/Item/Item.js +19 -22
  6. package/dist/cjs/parts/Item/Item.js.map +1 -1
  7. package/dist/cjs/parts/Item/ItemActions/ItemActions.js +29 -47
  8. package/dist/cjs/parts/Item/ItemActions/ItemActions.js.map +1 -1
  9. package/dist/cjs/parts/Item/ItemMiddleSection.js +10 -48
  10. package/dist/cjs/parts/Item/ItemMiddleSection.js.map +1 -1
  11. package/dist/cjs/parts/Item/ItemSelection.js +1 -4
  12. package/dist/cjs/parts/Item/ItemSelection.js.map +1 -1
  13. package/dist/cjs/parts/MainContent.js +4 -14
  14. package/dist/cjs/parts/MainContent.js.map +1 -1
  15. package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js +10 -7
  16. package/dist/cjs/parts/Panel/bottom/LoadMoreBtn.js.map +1 -1
  17. package/dist/cjs/parts/Panel/bottom/LoadingMore.js +1 -7
  18. package/dist/cjs/parts/Panel/bottom/LoadingMore.js.map +1 -1
  19. package/dist/cjs/parts/Panel/bottom/PanelContentBottomSection.js +13 -14
  20. package/dist/cjs/parts/Panel/bottom/PanelContentBottomSection.js.map +1 -1
  21. package/dist/cjs/parts/Panel/middle/EmptyItems.js +1 -5
  22. package/dist/cjs/parts/Panel/middle/EmptyItems.js.map +1 -1
  23. package/dist/cjs/parts/Panel/middle/ItemListWrapper.js +15 -17
  24. package/dist/cjs/parts/Panel/middle/ItemListWrapper.js.map +1 -1
  25. package/dist/cjs/parts/Panel/middle/LoadingItems.js +1 -8
  26. package/dist/cjs/parts/Panel/middle/LoadingItems.js.map +1 -1
  27. package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js +11 -19
  28. package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js.map +1 -1
  29. package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js +5 -15
  30. package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js.map +1 -1
  31. package/dist/cjs/parts/Panel/top/PanelContentTopSection.js +4 -11
  32. package/dist/cjs/parts/Panel/top/PanelContentTopSection.js.map +1 -1
  33. package/dist/cjs/parts/Panel/top/PanelFilterSection.js +1 -6
  34. package/dist/cjs/parts/Panel/top/PanelFilterSection.js.map +1 -1
  35. package/dist/cjs/parts/Panel/top/SelectionHeader.js +16 -26
  36. package/dist/cjs/parts/Panel/top/SelectionHeader.js.map +1 -1
  37. package/dist/cjs/parts/PanelWrapper.js +8 -23
  38. package/dist/cjs/parts/PanelWrapper.js.map +1 -1
  39. package/dist/esm/DSShuttleV2.js +1 -9
  40. package/dist/esm/DSShuttleV2.js.map +1 -1
  41. package/dist/esm/parts/Header.js +4 -15
  42. package/dist/esm/parts/Header.js.map +1 -1
  43. package/dist/esm/parts/Item/Item.js +19 -22
  44. package/dist/esm/parts/Item/Item.js.map +1 -1
  45. package/dist/esm/parts/Item/ItemActions/ItemActions.js +29 -47
  46. package/dist/esm/parts/Item/ItemActions/ItemActions.js.map +1 -1
  47. package/dist/esm/parts/Item/ItemMiddleSection.js +10 -48
  48. package/dist/esm/parts/Item/ItemMiddleSection.js.map +1 -1
  49. package/dist/esm/parts/Item/ItemSelection.js +1 -4
  50. package/dist/esm/parts/Item/ItemSelection.js.map +1 -1
  51. package/dist/esm/parts/MainContent.js +4 -14
  52. package/dist/esm/parts/MainContent.js.map +1 -1
  53. package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js +10 -7
  54. package/dist/esm/parts/Panel/bottom/LoadMoreBtn.js.map +1 -1
  55. package/dist/esm/parts/Panel/bottom/LoadingMore.js +1 -7
  56. package/dist/esm/parts/Panel/bottom/LoadingMore.js.map +1 -1
  57. package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js +13 -14
  58. package/dist/esm/parts/Panel/bottom/PanelContentBottomSection.js.map +1 -1
  59. package/dist/esm/parts/Panel/middle/EmptyItems.js +1 -5
  60. package/dist/esm/parts/Panel/middle/EmptyItems.js.map +1 -1
  61. package/dist/esm/parts/Panel/middle/ItemListWrapper.js +15 -17
  62. package/dist/esm/parts/Panel/middle/ItemListWrapper.js.map +1 -1
  63. package/dist/esm/parts/Panel/middle/LoadingItems.js +1 -8
  64. package/dist/esm/parts/Panel/middle/LoadingItems.js.map +1 -1
  65. package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js +11 -19
  66. package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js.map +1 -1
  67. package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js +5 -15
  68. package/dist/esm/parts/Panel/middle/PanelContentMiddleSection.js.map +1 -1
  69. package/dist/esm/parts/Panel/top/PanelContentTopSection.js +4 -11
  70. package/dist/esm/parts/Panel/top/PanelContentTopSection.js.map +1 -1
  71. package/dist/esm/parts/Panel/top/PanelFilterSection.js +1 -6
  72. package/dist/esm/parts/Panel/top/PanelFilterSection.js.map +1 -1
  73. package/dist/esm/parts/Panel/top/SelectionHeader.js +16 -26
  74. package/dist/esm/parts/Panel/top/SelectionHeader.js.map +1 -1
  75. package/dist/esm/parts/PanelWrapper.js +8 -23
  76. package/dist/esm/parts/PanelWrapper.js.map +1 -1
  77. package/package.json +11 -11
package/dist/cjs/parts/Panel/middle/ItemListWrapper.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Panel/middle/ItemListWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { useOnSpecificFocus } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore';\nimport { useFocusTracker } from '../../../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { REGIONS_FOCUSES } from '../../../constants';\nimport { Item } from '../../Item/Item';\nimport { MultipleSelectionAction } from './MultipleSelectionAction';\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 }: DSShuttleV2T.PanelMetaInfo) => {\n const focusRegion = useInternalStore((state) => state.focusRegion);\n const focusItem = useInternalStore((state) => state.focusItem);\n const focusItemAction = useInternalStore((state) => state.focusItemAction);\n const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL : 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: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel } = panelMetaInfo;\n const itemList = useInternalStore((state) =>\n isDestinationPanel ? state.destinationConfiguredData : state.sourceConfiguredData,\n );\n const withLoadMore = usePropsStore((state) =>\n isDestinationPanel ? state.destinationWithLoadMore : state.sourceWithLoadMore,\n );\n const destinationHasMultipleSelectedItems = useInternalStore((store) => store.destinationHasMultipleSelectedItems);\n const sourceHasMultipleSelectedItems = useInternalStore((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 trackFocusLoadMoreBtn,\n } = useFocusTracker();\n const config = React.useMemo(\n () => ({\n onFocus: () => {\n trackFocusRegionPanel(isDestinationPanel);\n },\n }),\n [trackFocusRegionPanel, isDestinationPanel],\n );\n const onPanelFocus = useOnSpecificFocus(config);\n\n const onPanelKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (e) => {\n const { key } = e;\n 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') {\n if (withLoadMore) trackFocusLoadMoreBtn();\n else trackFocusItemLast();\n }\n }\n },\n [\n isDestinationPanel,\n trackFocusActionParent,\n trackFocusItemFirst,\n trackFocusItemLast,\n trackFocusLoadMoreBtn,\n trackFocusRegionPanelItem,\n withLoadMore,\n ],\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"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/Panel/middle/LoadingItems.js CHANGED
@@ -35,12 +35,5 @@ var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progr
35
35
  const StyledLoadingListWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "ds-shuttle-v2", slot: "loading-list-wrapper" })`
36
36
  color: neutral-500;
37
37
  `;
38
- const LoadingItems = (panelMetaInfo) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledLoadingListWrapper, {
39
- alignItems: "center",
40
- justifyContent: "center",
41
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator, {
42
- size: "xl",
43
- text: "Loading..."
44
- })
45
- });
38
+ const LoadingItems = (panelMetaInfo) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledLoadingListWrapper, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator, { size: "xl", text: "Loading..." }) });
46
39
  //# sourceMappingURL=LoadingItems.js.map
package/dist/cjs/parts/Panel/middle/LoadingItems.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Panel/middle/LoadingItems.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\n\nconst StyledLoadingListWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'loading-list-wrapper' })`\n color: neutral-500;\n`;\nexport const LoadingItems = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => (\n <StyledLoadingListWrapper alignItems=\"center\" justifyContent=\"center\">\n <DSCircularIndeterminateIndicator size=\"xl\" text=\"Loading...\" />\n </StyledLoadingListWrapper>\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAVJ,uBAAuB;AACvB,qBAAqB;AACrB,4CAAiD;AAGjD,MAAM,+BAA2B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAAA;AAAA;AAG9F,MAAM,eAAe,CAAC,kBAC3B,4CAAC;AAAA,EAAyB,YAAW;AAAA,EAAS,gBAAe;AAAA,EAC3D,sDAAC;AAAA,IAAiC,MAAK;AAAA,IAAK,MAAK;AAAA,GAAa;AAAA,CAChE;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAVJ,uBAAuB;AACvB,qBAAqB;AACrB,4CAAiD;AAGjD,MAAM,+BAA2B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,uBAAuB,CAAC;AAAA;AAAA;AAG9F,MAAM,eAAe,CAAC,kBAC3B,4CAAC,4BAAyB,YAAW,UAAS,gBAAe,UAC3D,sDAAC,0EAAiC,MAAK,MAAK,MAAK,cAAa,GAChE;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js CHANGED
@@ -95,24 +95,16 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
95
95
  trackFocusActionReset();
96
96
  trackFocusRegionPanelFocusAll(isDestinationPanel);
97
97
  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusAll]);
98
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledMoveMultipleWrapper, {
99
- boxShadow: "xs",
100
- alignItems: "center",
101
- justifyContent: "center",
102
- cols: gridFullFraction,
103
- rows: gridFullFraction,
104
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledButton, {
105
- buttonType: "icon",
106
- onClick: handleMoveAllAction,
107
- onFocus: handleMoveAllBtnFocus,
108
- children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseMediumIcon, {
109
- width: "20px",
110
- height: "20px"
111
- }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrowShortRightIcon, {
112
- width: "20px",
113
- height: "20px"
114
- })
115
- })
116
- });
98
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
99
+ StyledMoveMultipleWrapper,
100
+ {
101
+ boxShadow: "xs",
102
+ alignItems: "center",
103
+ justifyContent: "center",
104
+ cols: gridFullFraction,
105
+ rows: gridFullFraction,
106
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledButton, { buttonType: "icon", onClick: handleMoveAllAction, onFocus: handleMoveAllBtnFocus, children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseMediumIcon, { width: "20px", height: "20px" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrowShortRightIcon, { width: "20px", height: "20px" }) })
107
+ }
108
+ );
117
109
  });
118
110
  //# sourceMappingURL=MultipleSelectionAction.js.map
package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Panel/middle/MultipleSelectionAction.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\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: 0px;\n right: 0px;\n height: 100%;\n width: 65px;\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: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel } = panelMeta;\n const { moveSelection } = useHandleMoveSelection(panelMeta);\n const { trackFocusRegionPanel, trackFocusRegionPanelFocusAll, trackFocusItemReset, trackFocusActionReset } =\n useFocusTracker();\n const handleMoveAllAction = React.useCallback<Required<DSButtonT.Props>['onClick']>(\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiFb;AAjFV,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,uBAA2C;AAC3C,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;AAiBvG,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,cAA0C;AAC3F,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,EAAE,cAAc,QAAI,mDAAuB,SAAS;AAC1D,QAAM,EAAE,uBAAuB,+BAA+B,qBAAqB,sBAAsB,QACvG,wCAAgB;AAClB,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,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;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiFb;AAjFV,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,uBAA2C;AAC3C,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;AAiBvG,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,cAA0C;AAC3F,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,EAAE,cAAc,QAAI,mDAAuB,SAAS;AAC1D,QAAM,EAAE,uBAAuB,+BAA+B,qBAAqB,sBAAsB,QACvG,wCAAgB;AAClB,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,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;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MAEN,sDAAC,gBAAa,YAAW,QAAO,SAAS,qBAAqB,SAAS,uBACpE,+BACC,4CAAC,yBAAsB,OAAM,QAAO,QAAO,QAAO,IAElD,4CAAC,6BAA0B,OAAM,QAAO,QAAO,QAAO,GAE1D;AAAA;AAAA,EACF;AAEJ,CAAC;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js CHANGED
@@ -50,20 +50,10 @@ const PanelContentMiddleSection = import_react.default.memo((panelMetaInfo) => {
50
50
  const isLoading = (0, import_useStore.usePropsStore)((state) => isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading);
51
51
  const showEmptyMessage = !isLoading && itemsLength === 0;
52
52
  const showItems = !isLoading && !showEmptyMessage;
53
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledListWrapperMid, {
54
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledMidScroller, {
55
- children: [
56
- isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingItems.LoadingItems, {
57
- ...panelMetaInfo
58
- }) : null,
59
- showEmptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EmptyItems.EmptyItems, {
60
- ...panelMetaInfo
61
- }) : null,
62
- showItems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemListWrapper.ItemListWrapper, {
63
- ...panelMetaInfo
64
- }) : null
65
- ]
66
- })
67
- });
53
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledListWrapperMid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledMidScroller, { children: [
54
+ isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingItems.LoadingItems, { ...panelMetaInfo }) : null,
55
+ showEmptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EmptyItems.EmptyItems, { ...panelMetaInfo }) : null,
56
+ showItems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemListWrapper.ItemListWrapper, { ...panelMetaInfo }) : null
57
+ ] }) });
68
58
  });
69
59
  //# sourceMappingURL=PanelContentMiddleSection.js.map
package/dist/cjs/parts/Panel/middle/PanelContentMiddleSection.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Panel/middle/PanelContentMiddleSection.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { ItemListWrapper } from './ItemListWrapper';\nimport { EmptyItems } from './EmptyItems';\nimport { LoadingItems } from './LoadingItems';\n\nconst StyledListWrapperMid = styled(Grid, { name: 'ds-shuttle-v2', slot: 'list-wrapper-mid' })`\n overflow: hidden;\n`;\nconst StyledMidScroller = styled(Grid, { name: 'ds-shuttle-v2', slot: 'list-wrapper-mid' })`\n overflow: auto;\n`;\nexport const PanelContentMiddleSection = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false } = panelMetaInfo;\n const itemsLength = usePropsStore((state) =>\n isDestinationPanel ? state.destinationData.length : state.sourceData.length,\n );\n const isLoading = usePropsStore((state) => (isDestinationPanel ? state.destinationIsLoading : state.sourceIsLoading));\n const showEmptyMessage = !isLoading && itemsLength === 0;\n const showItems = !isLoading && !showEmptyMessage;\n\n return (\n <StyledListWrapperMid>\n <StyledMidScroller>\n {isLoading ? <LoadingItems {...panelMetaInfo} /> : null}\n {showEmptyMessage ? <EmptyItems {...panelMetaInfo} /> : null}\n {showItems ? <ItemListWrapper {...panelMetaInfo} /> : null}\n </StyledMidScroller>\n </StyledListWrapperMid>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BjB;AA1BN,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,sBAA8B;AAE9B,6BAAgC;AAChC,wBAA2B;AAC3B,0BAA6B;AAE7B,MAAM,2BAAuB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,mBAAmB,CAAC;AAAA;AAAA;AAG7F,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,mBAAmB,CAAC;AAAA;AAAA;AAGnF,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,kBAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,gBAAgB,SAAS,MAAM,WAAW;AAAA,EACvE;AACA,QAAM,gBAAY,+BAAc,CAAC,UAAW,qBAAqB,MAAM,uBAAuB,MAAM,eAAgB;AACpH,QAAM,mBAAmB,CAAC,aAAa,gBAAgB;AACvD,QAAM,YAAY,CAAC,aAAa,CAAC;AAEjC,SACE,4CAAC;AAAA,IACC,uDAAC;AAAA,MACE;AAAA,oBAAY,4CAAC;AAAA,UAAc,GAAG;AAAA,SAAe,IAAK;AAAA,QAClD,mBAAmB,4CAAC;AAAA,UAAY,GAAG;AAAA,SAAe,IAAK;AAAA,QACvD,YAAY,4CAAC;AAAA,UAAiB,GAAG;AAAA,SAAe,IAAK;AAAA;AAAA,KACxD;AAAA,GACF;AAEJ,CAAC;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BjB;AA1BN,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,sBAA8B;AAE9B,6BAAgC;AAChC,wBAA2B;AAC3B,0BAA6B;AAE7B,MAAM,2BAAuB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,mBAAmB,CAAC;AAAA;AAAA;AAG7F,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,mBAAmB,CAAC;AAAA;AAAA;AAGnF,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AACjG,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,kBAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,gBAAgB,SAAS,MAAM,WAAW;AAAA,EACvE;AACA,QAAM,gBAAY,+BAAc,CAAC,UAAW,qBAAqB,MAAM,uBAAuB,MAAM,eAAgB;AACpH,QAAM,mBAAmB,CAAC,aAAa,gBAAgB;AACvD,QAAM,YAAY,CAAC,aAAa,CAAC;AAEjC,SACE,4CAAC,wBACC,uDAAC,qBACE;AAAA,gBAAY,4CAAC,oCAAc,GAAG,eAAe,IAAK;AAAA,IAClD,mBAAmB,4CAAC,gCAAY,GAAG,eAAe,IAAK;AAAA,IACvD,YAAY,4CAAC,0CAAiB,GAAG,eAAe,IAAK;AAAA,KACxD,GACF;AAEJ,CAAC;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/Panel/top/PanelContentTopSection.js CHANGED
@@ -48,16 +48,9 @@ const PanelContentTopSection = (panelMetaInfo) => {
48
48
  cols.push("auto");
49
49
  return cols;
50
50
  }, [isSearchBarOpen]);
51
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledListWrapperTop, {
52
- rows: topSectionRows,
53
- children: [
54
- isSearchBarOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelFilterSection.PanelFilterSection, {
55
- ...panelMetaInfo
56
- }) : null,
57
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SelectionHeader.SelectionHeader, {
58
- ...panelMetaInfo
59
- })
60
- ]
61
- });
51
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledListWrapperTop, { rows: topSectionRows, children: [
52
+ isSearchBarOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelFilterSection.PanelFilterSection, { ...panelMetaInfo }) : null,
53
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SelectionHeader.SelectionHeader, { ...panelMetaInfo })
54
+ ] });
62
55
  };
63
56
  //# sourceMappingURL=PanelContentTopSection.js.map
package/dist/cjs/parts/Panel/top/PanelContentTopSection.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Panel/top/PanelContentTopSection.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\nimport { SelectionHeader } from './SelectionHeader';\nimport { PanelFilterSection } from './PanelFilterSection';\n\nconst StyledListWrapperTop = styled(Grid, { name: 'ds-shuttle-v2', slot: 'list-wrapper-top' })``;\n\nexport const PanelContentTopSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false } = panelMetaInfo;\n const isSearchBarOpen = usePropsStore((state) =>\n isDestinationPanel ? state.destinationShowSearchbar : state.sourceShowSearchbar,\n );\n const topSectionRows = React.useMemo(() => {\n const cols = [];\n if (isSearchBarOpen) cols.push('auto');\n cols.push('auto');\n return cols;\n }, [isSearchBarOpen]);\n return (\n <StyledListWrapperTop rows={topSectionRows}>\n {isSearchBarOpen ? <PanelFilterSection {...panelMetaInfo} /> : null}\n <SelectionHeader {...panelMetaInfo} />\n </StyledListWrapperTop>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AAtBJ,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,sBAA8B;AAE9B,6BAAgC;AAChC,gCAAmC;AAEnC,MAAM,2BAAuB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,mBAAmB,CAAC;AAEtF,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,sBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,iBAAiB,aAAAA,QAAM,QAAQ,MAAM;AACzC,UAAM,OAAO,CAAC;AACd,QAAI;AAAiB,WAAK,KAAK,MAAM;AACrC,SAAK,KAAK,MAAM;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AACpB,SACE,6CAAC;AAAA,IAAqB,MAAM;AAAA,IACzB;AAAA,wBAAkB,4CAAC;AAAA,QAAoB,GAAG;AAAA,OAAe,IAAK;AAAA,MAC/D,4CAAC;AAAA,QAAiB,GAAG;AAAA,OAAe;AAAA;AAAA,GACtC;AAEJ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AAtBJ,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AACrB,sBAA8B;AAE9B,6BAAgC;AAChC,gCAAmC;AAEnC,MAAM,2BAAuB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,mBAAmB,CAAC;AAEtF,MAAM,yBAAyB,CAAC,kBAA8C;AACnF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,sBAAkB;AAAA,IAAc,CAAC,UACrC,qBAAqB,MAAM,2BAA2B,MAAM;AAAA,EAC9D;AACA,QAAM,iBAAiB,aAAAA,QAAM,QAAQ,MAAM;AACzC,UAAM,OAAO,CAAC;AACd,QAAI;AAAiB,WAAK,KAAK,MAAM;AACrC,SAAK,KAAK,MAAM;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,CAAC;AACpB,SACE,6CAAC,wBAAqB,MAAM,gBACzB;AAAA,sBAAkB,4CAAC,gDAAoB,GAAG,eAAe,IAAK;AAAA,IAC/D,4CAAC,0CAAiB,GAAG,eAAe;AAAA,KACtC;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/Panel/top/PanelFilterSection.js CHANGED
@@ -58,11 +58,6 @@ const PanelFilterSection = (panelMetaInfo) => {
58
58
  },
59
59
  [onFilterCb]
60
60
  );
61
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSearchWrapper, {
62
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledInputText, {
63
- value: filterValue,
64
- onValueChange: handleFilterChange
65
- })
66
- });
61
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSearchWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledInputText, { value: filterValue, onValueChange: handleFilterChange }) });
67
62
  };
68
63
  //# sourceMappingURL=PanelFilterSection.js.map
package/dist/cjs/parts/Panel/top/PanelFilterSection.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Panel/top/PanelFilterSection.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { usePropsStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\n\nconst StyledSearchWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'area-search-wrapper' })`\n border-bottom: 1px solid neutral-400;\n border-radius: 0;\n`;\nconst StyledInputText = styled(DSInputText, { name: 'ds-shuttle-v2', slot: 'area-search-bar' })`\n border: none;\n :focus {\n border-radius: 0;\n }\n`;\n\nexport const PanelFilterSection = (panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false } = panelMetaInfo;\n const onFilterCb = usePropsStore((state) =>\n isDestinationPanel ? state.onDestinationFilterChange : state.onSourceFilterChange,\n );\n const filterValue = usePropsStore((state) =>\n isDestinationPanel ? state.destinationFilterValue : state.sourceFilterValue,\n );\n const handleFilterChange = React.useCallback(\n (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => {\n onFilterCb?.(`${value}`, { event });\n },\n [onFilterCb],\n );\n return (\n <StyledSearchWrapper>\n <StyledInputText value={filterValue} onValueChange={handleFilterChange} />\n </StyledSearchWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCjB;AAlCN,mBAAkB;AAClB,qBAAqB;AACrB,uBAAuB;AACvB,gCAA4B;AAC5B,sBAA8B;AAG9B,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAI/F,MAAM,sBAAkB,yBAAO,uCAAa,EAAE,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvF,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,kBAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,SAAS,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,4CAAC;AAAA,IACC,sDAAC;AAAA,MAAgB,OAAO;AAAA,MAAa,eAAe;AAAA,KAAoB;AAAA,GAC1E;AAEJ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCjB;AAlCN,mBAAkB;AAClB,qBAAqB;AACrB,uBAAuB;AACvB,gCAA4B;AAC5B,sBAA8B;AAG9B,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAI/F,MAAM,sBAAkB,yBAAO,uCAAa,EAAE,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvF,MAAM,qBAAqB,CAAC,kBAA8C;AAC/E,QAAM,EAAE,qBAAqB,MAAM,IAAI;AACvC,QAAM,iBAAa;AAAA,IAAc,CAAC,UAChC,qBAAqB,MAAM,4BAA4B,MAAM;AAAA,EAC/D;AACA,QAAM,kBAAc;AAAA,IAAc,CAAC,UACjC,qBAAqB,MAAM,yBAAyB,MAAM;AAAA,EAC5D;AACA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,OAAwB,UAA+C;AACtE,mBAAa,GAAG,SAAS,EAAE,MAAM,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,SACE,4CAAC,uBACC,sDAAC,mBAAgB,OAAO,aAAa,eAAe,oBAAoB,GAC1E;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/Panel/top/SelectionHeader.js CHANGED
@@ -84,31 +84,21 @@ const SelectionHeader = import_react.default.memo(({ isDestinationPanel = false
84
84
  },
85
85
  [checkboxValue, onSelectionChange, selectionableItems]
86
86
  );
87
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledSelectionHeaderWrapper, {
88
- cols: wrapperCols,
89
- justifyContent: "center",
90
- alignItems: "center",
91
- py: "7px",
92
- px: "xxs2",
93
- children: [
94
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
95
- justifyContent: "center",
96
- alignItems: "center",
97
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_checkbox.DSControlledCheckbox, {
98
- checked: checkboxValue,
99
- "aria-label": `${checkboxValue === true ? "Deselect" : "Select"} all ${isDestinationPanel ? "destination" : "source"} items`,
100
- onChange: handleSelectAll,
101
- "aria-controls": ariaControls,
102
- disabled: selectionableItems.length === 0
103
- })
104
- }),
105
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledSelectionHeaderCountLabel, {
106
- children: [
107
- selectionLength,
108
- " selected"
109
- ]
110
- })
111
- ]
112
- });
87
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledSelectionHeaderWrapper, { cols: wrapperCols, justifyContent: "center", alignItems: "center", py: "7px", px: "xxs2", children: [
88
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
89
+ import_ds_form_checkbox.DSControlledCheckbox,
90
+ {
91
+ checked: checkboxValue,
92
+ "aria-label": `${checkboxValue === true ? "Deselect" : "Select"} all ${isDestinationPanel ? "destination" : "source"} items`,
93
+ onChange: handleSelectAll,
94
+ "aria-controls": ariaControls,
95
+ disabled: selectionableItems.length === 0
96
+ }
97
+ ) }),
98
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledSelectionHeaderCountLabel, { children: [
99
+ selectionLength,
100
+ " selected"
101
+ ] })
102
+ ] });
113
103
  });
114
104
  //# sourceMappingURL=SelectionHeader.js.map
package/dist/cjs/parts/Panel/top/SelectionHeader.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Panel/top/SelectionHeader.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSControlledCheckbox, type DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport { Grid } from '@elliemae/ds-grid';\nimport { usePropsStore, useInternalStore } from '../../../config/useStore';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types';\n\nconst StyledSelectionHeaderWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'area-selection-header' })`\n line-height: 1;\n font-size: 1rem;\n background-color: neutral-000;\n border-bottom: 1px solid neutral-400;\n`;\nconst StyledSelectionHeaderCountLabel = styled('div', {\n name: 'ds-shuttle-v2',\n slot: 'area-selection-header-count-label',\n})`\n text-align: end;\n color: neutral-500;\n`;\n\nconst wrapperCols = ['auto', '1fr'];\nexport const SelectionHeader = React.memo(({ isDestinationPanel = false }: DSShuttleV2T.PanelMetaInfo) => {\n const selectionableItems = useInternalStore((state) =>\n isDestinationPanel ? state.destinationSelectionableData : state.sourceSelectionableData,\n );\n const ariaControls = useInternalStore((state) =>\n isDestinationPanel ? state.destinationSelectionableIds : state.sourceSelectionableIds,\n );\n const onSelectionChange = usePropsStore((state) =>\n isDestinationPanel ? state.onDestinationSelectionChange : state.onSourceSelectionChange,\n );\n const selectionLength = useInternalStore((state) =>\n isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length,\n );\n const checkboxValue = React.useMemo(() => {\n let newVal: boolean | 'mixed' = false;\n if (selectionLength > 0)\n if (selectionLength === selectionableItems.length) newVal = true;\n else newVal = 'mixed';\n return newVal;\n }, [selectionableItems.length, selectionLength]);\n\n const handleSelectAll = React.useCallback<DSControlledCheckboxT.InternalProps['onChange']>(\n (_, event) => {\n if (checkboxValue === true) {\n onSelectionChange({}, { event });\n } else {\n const newSelection: DSShuttleV2T.InternalProps['sourceSelectedItems'] = {};\n selectionableItems.forEach((selectableItem) => {\n newSelection[selectableItem.original.id] = true;\n });\n onSelectionChange(newSelection, { event });\n }\n },\n [checkboxValue, onSelectionChange, selectionableItems],\n );\n\n return (\n <StyledSelectionHeaderWrapper cols={wrapperCols} justifyContent=\"center\" alignItems=\"center\" py=\"7px\" px=\"xxs2\">\n <Grid justifyContent=\"center\" alignItems=\"center\">\n <DSControlledCheckbox\n checked={checkboxValue}\n aria-label={`${checkboxValue === true ? 'Deselect' : 'Select'} all ${\n isDestinationPanel ? 'destination' : 'source'\n } items`}\n onChange={handleSelectAll}\n aria-controls={ariaControls}\n disabled={selectionableItems.length === 0}\n />\n </Grid>\n <StyledSelectionHeaderCountLabel>{selectionLength} selected</StyledSelectionHeaderCountLabel>\n </StyledSelectionHeaderWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6Df;AA7DR,mBAAkB;AAClB,uBAAuB;AACvB,8BAAiE;AACjE,qBAAqB;AACrB,sBAAgD;AAGhD,MAAM,mCAA+B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,wBAAwB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAM1G,MAAM,sCAAkC,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAKD,MAAM,cAAc,CAAC,QAAQ,KAAK;AAC3B,MAAM,kBAAkB,aAAAA,QAAM,KAAK,CAAC,EAAE,qBAAqB,MAAM,MAAkC;AACxG,QAAM,yBAAqB;AAAA,IAAiB,CAAC,UAC3C,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,mBAAe;AAAA,IAAiB,CAAC,UACrC,qBAAqB,MAAM,8BAA8B,MAAM;AAAA,EACjE;AACA,QAAM,wBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,sBAAkB;AAAA,IAAiB,CAAC,UACxC,qBAAqB,MAAM,8BAA8B,SAAS,MAAM,yBAAyB;AAAA,EACnG;AACA,QAAM,gBAAgB,aAAAA,QAAM,QAAQ,MAAM;AACxC,QAAI,SAA4B;AAChC,QAAI,kBAAkB;AACpB,UAAI,oBAAoB,mBAAmB;AAAQ,iBAAS;AAAA;AACvD,iBAAS;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,QAAQ,eAAe,CAAC;AAE/C,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,GAAG,UAAU;AACZ,UAAI,kBAAkB,MAAM;AAC1B,0BAAkB,CAAC,GAAG,EAAE,MAAM,CAAC;AAAA,MACjC,OAAO;AACL,cAAM,eAAkE,CAAC;AACzE,2BAAmB,QAAQ,CAAC,mBAAmB;AAC7C,uBAAa,eAAe,SAAS,MAAM;AAAA,QAC7C,CAAC;AACD,0BAAkB,cAAc,EAAE,MAAM,CAAC;AAAA,MAC3C;AAAA,IACF;AAAA,IACA,CAAC,eAAe,mBAAmB,kBAAkB;AAAA,EACvD;AAEA,SACE,6CAAC;AAAA,IAA6B,MAAM;AAAA,IAAa,gBAAe;AAAA,IAAS,YAAW;AAAA,IAAS,IAAG;AAAA,IAAM,IAAG;AAAA,IACvG;AAAA,kDAAC;AAAA,QAAK,gBAAe;AAAA,QAAS,YAAW;AAAA,QACvC,sDAAC;AAAA,UACC,SAAS;AAAA,UACT,cAAY,GAAG,kBAAkB,OAAO,aAAa,gBACnD,qBAAqB,gBAAgB;AAAA,UAEvC,UAAU;AAAA,UACV,iBAAe;AAAA,UACf,UAAU,mBAAmB,WAAW;AAAA,SAC1C;AAAA,OACF;AAAA,MACA,6CAAC;AAAA,QAAiC;AAAA;AAAA,UAAgB;AAAA;AAAA,OAAS;AAAA;AAAA,GAC7D;AAEJ,CAAC;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6Df;AA7DR,mBAAkB;AAClB,uBAAuB;AACvB,8BAAiE;AACjE,qBAAqB;AACrB,sBAAgD;AAGhD,MAAM,mCAA+B,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,wBAAwB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAM1G,MAAM,sCAAkC,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAKD,MAAM,cAAc,CAAC,QAAQ,KAAK;AAC3B,MAAM,kBAAkB,aAAAA,QAAM,KAAK,CAAC,EAAE,qBAAqB,MAAM,MAAkC;AACxG,QAAM,yBAAqB;AAAA,IAAiB,CAAC,UAC3C,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,mBAAe;AAAA,IAAiB,CAAC,UACrC,qBAAqB,MAAM,8BAA8B,MAAM;AAAA,EACjE;AACA,QAAM,wBAAoB;AAAA,IAAc,CAAC,UACvC,qBAAqB,MAAM,+BAA+B,MAAM;AAAA,EAClE;AACA,QAAM,sBAAkB;AAAA,IAAiB,CAAC,UACxC,qBAAqB,MAAM,8BAA8B,SAAS,MAAM,yBAAyB;AAAA,EACnG;AACA,QAAM,gBAAgB,aAAAA,QAAM,QAAQ,MAAM;AACxC,QAAI,SAA4B;AAChC,QAAI,kBAAkB;AACpB,UAAI,oBAAoB,mBAAmB;AAAQ,iBAAS;AAAA;AACvD,iBAAS;AAChB,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,QAAQ,eAAe,CAAC;AAE/C,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,CAAC,GAAG,UAAU;AACZ,UAAI,kBAAkB,MAAM;AAC1B,0BAAkB,CAAC,GAAG,EAAE,MAAM,CAAC;AAAA,MACjC,OAAO;AACL,cAAM,eAAkE,CAAC;AACzE,2BAAmB,QAAQ,CAAC,mBAAmB;AAC7C,uBAAa,eAAe,SAAS,MAAM;AAAA,QAC7C,CAAC;AACD,0BAAkB,cAAc,EAAE,MAAM,CAAC;AAAA,MAC3C;AAAA,IACF;AAAA,IACA,CAAC,eAAe,mBAAmB,kBAAkB;AAAA,EACvD;AAEA,SACE,6CAAC,gCAA6B,MAAM,aAAa,gBAAe,UAAS,YAAW,UAAS,IAAG,OAAM,IAAG,QACvG;AAAA,gDAAC,uBAAK,gBAAe,UAAS,YAAW,UACvC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,cAAY,GAAG,kBAAkB,OAAO,aAAa,gBACnD,qBAAqB,gBAAgB;AAAA,QAEvC,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,UAAU,mBAAmB,WAAW;AAAA;AAAA,IAC1C,GACF;AAAA,IACA,6CAAC,mCAAiC;AAAA;AAAA,MAAgB;AAAA,OAAS;AAAA,KAC7D;AAEJ,CAAC;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/PanelWrapper.js CHANGED
@@ -47,28 +47,13 @@ const panelWrapperRows = ["auto", "1fr"];
47
47
  const listWrapperRows = ["auto", "1fr", "auto"];
48
48
  const PanelWrapper = import_react.default.memo((panelMetaInfo) => {
49
49
  const { isDestinationPanel = false } = panelMetaInfo;
50
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledPanelWrapper, {
51
- rows: panelWrapperRows,
52
- gutter: "xxxs",
53
- children: [
54
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Header.Header, {
55
- isDestinationPanel
56
- }),
57
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledListWrapper, {
58
- rows: listWrapperRows,
59
- children: [
60
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentTopSection.PanelContentTopSection, {
61
- ...panelMetaInfo
62
- }),
63
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentMiddleSection.PanelContentMiddleSection, {
64
- ...panelMetaInfo
65
- }),
66
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentBottomSection.PanelContentBottomSection, {
67
- ...panelMetaInfo
68
- })
69
- ]
70
- })
71
- ]
72
- });
50
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledPanelWrapper, { rows: panelWrapperRows, gutter: "xxxs", children: [
51
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Header.Header, { isDestinationPanel }),
52
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledListWrapper, { rows: listWrapperRows, children: [
53
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentTopSection.PanelContentTopSection, { ...panelMetaInfo }),
54
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentMiddleSection.PanelContentMiddleSection, { ...panelMetaInfo }),
55
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanelContentBottomSection.PanelContentBottomSection, { ...panelMetaInfo })
56
+ ] })
57
+ ] });
73
58
  });
74
59
  //# sourceMappingURL=PanelWrapper.js.map
package/dist/cjs/parts/PanelWrapper.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/PanelWrapper.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "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 { Header } from './Header';\nimport { PanelContentTopSection } from './Panel/top/PanelContentTopSection';\nimport { PanelContentMiddleSection } from './Panel/middle/PanelContentMiddleSection';\nimport { PanelContentBottomSection } from './Panel/bottom/PanelContentBottomSection';\n\nconst StyledPanelWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'panel-wrapper' })`\n min-width: 300px;\n min-height: 264px;\n`;\nconst StyledListWrapper = styled(Grid, { name: 'ds-shuttle-v2', slot: 'list-wrapper' })`\n border: 1px solid neutral-400;\n`;\nconst panelWrapperRows = ['auto', '1fr'];\nconst listWrapperRows = ['auto', '1fr', 'auto'];\nexport const PanelWrapper = React.memo((panelMetaInfo: DSShuttleV2T.PanelMetaInfo) => {\n const { isDestinationPanel = false } = panelMetaInfo;\n\n return (\n <StyledPanelWrapper rows={panelWrapperRows} gutter=\"xxxs\">\n <Header isDestinationPanel={isDestinationPanel} />\n <StyledListWrapper rows={listWrapperRows}>\n <PanelContentTopSection {...panelMetaInfo} />\n <PanelContentMiddleSection {...panelMetaInfo} />\n <PanelContentBottomSection {...panelMetaInfo} />\n </StyledListWrapper>\n </StyledPanelWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBjB;AAvBN,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oBAAuB;AACvB,oCAAuC;AACvC,uCAA0C;AAC1C,uCAA0C;AAE1C,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAIxF,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,eAAe,CAAC;AAAA;AAAA;AAGtF,MAAM,mBAAmB,CAAC,QAAQ,KAAK;AACvC,MAAM,kBAAkB,CAAC,QAAQ,OAAO,MAAM;AACvC,MAAM,eAAe,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AACpF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AAEvC,SACE,6CAAC;AAAA,IAAmB,MAAM;AAAA,IAAkB,QAAO;AAAA,IACjD;AAAA,kDAAC;AAAA,QAAO;AAAA,OAAwC;AAAA,MAChD,6CAAC;AAAA,QAAkB,MAAM;AAAA,QACvB;AAAA,sDAAC;AAAA,YAAwB,GAAG;AAAA,WAAe;AAAA,UAC3C,4CAAC;AAAA,YAA2B,GAAG;AAAA,WAAe;AAAA,UAC9C,4CAAC;AAAA,YAA2B,GAAG;AAAA,WAAe;AAAA;AAAA,OAChD;AAAA;AAAA,GACF;AAEJ,CAAC;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBjB;AAvBN,mBAAkB;AAClB,uBAAuB;AACvB,qBAAqB;AAErB,oBAAuB;AACvB,oCAAuC;AACvC,uCAA0C;AAC1C,uCAA0C;AAE1C,MAAM,yBAAqB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAIxF,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,iBAAiB,MAAM,eAAe,CAAC;AAAA;AAAA;AAGtF,MAAM,mBAAmB,CAAC,QAAQ,KAAK;AACvC,MAAM,kBAAkB,CAAC,QAAQ,OAAO,MAAM;AACvC,MAAM,eAAe,aAAAA,QAAM,KAAK,CAAC,kBAA8C;AACpF,QAAM,EAAE,qBAAqB,MAAM,IAAI;AAEvC,SACE,6CAAC,sBAAmB,MAAM,kBAAkB,QAAO,QACjD;AAAA,gDAAC,wBAAO,oBAAwC;AAAA,IAChD,6CAAC,qBAAkB,MAAM,iBACvB;AAAA,kDAAC,wDAAwB,GAAG,eAAe;AAAA,MAC3C,4CAAC,8DAA2B,GAAG,eAAe;AAAA,MAC9C,4CAAC,8DAA2B,GAAG,eAAe;AAAA,OAChD;AAAA,KACF;AAEJ,CAAC;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/DSShuttleV2.js CHANGED
@@ -16,15 +16,7 @@ const ConfiguredComponent = React2.memo((props) => {
16
16
  const DSShuttleV2 = (props) => {
17
17
  const createInternalStore = useShuttleV2InternalStoreConfig(props);
18
18
  const createPropsStore = useShuttleV2PropsStoreConfig(props);
19
- return /* @__PURE__ */ jsx(PropsProvider, {
20
- createStore: createPropsStore,
21
- children: /* @__PURE__ */ jsx(InternalProvider, {
22
- createStore: createInternalStore,
23
- children: /* @__PURE__ */ jsx(ConfiguredComponent, {
24
- userProps: props
25
- })
26
- })
27
- });
19
+ return /* @__PURE__ */ jsx(PropsProvider, { createStore: createPropsStore, children: /* @__PURE__ */ jsx(InternalProvider, { createStore: createInternalStore, children: /* @__PURE__ */ jsx(ConfiguredComponent, { userProps: props }) }) });
28
20
  };
29
21
  export {
30
22
  DSShuttleV2
package/dist/esm/DSShuttleV2.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSShuttleV2.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useShuttleV2 } from './config/useShuttleV2';\nimport {\n InternalProvider,\n PropsProvider,\n useShuttleV2InternalStoreConfig,\n useShuttleV2PropsStoreConfig,\n // useInternalStore,\n} 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 = useInternalStore((state) => state);\n // React.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 createInternalStore = useShuttleV2InternalStoreConfig(props);\n const createPropsStore = useShuttleV2PropsStoreConfig(props);\n\n return (\n <PropsProvider createStore={createPropsStore}>\n <InternalProvider createStore={createInternalStore}>\n <ConfiguredComponent userProps={props} />\n </InternalProvider>\n </PropsProvider>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACuBd;AAvBT,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,mBAAmB;AAE5B,MAAM,sBAAsBA,OAAM,KAAK,CAAC,UAA6C;AACnF,eAAa,MAAM,SAAS;AAU5B,SAAO,oBAAC,eAAY;AACtB,CAAC;AAEM,MAAM,cAAc,CAAC,UAA8B;AACxD,QAAM,sBAAsB,gCAAgC,KAAK;AACjE,QAAM,mBAAmB,6BAA6B,KAAK;AAE3D,SACE,oBAAC;AAAA,IAAc,aAAa;AAAA,IAC1B,8BAAC;AAAA,MAAiB,aAAa;AAAA,MAC7B,8BAAC;AAAA,QAAoB,WAAW;AAAA,OAAO;AAAA,KACzC;AAAA,GACF;AAEJ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACuBd;AAvBT,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,mBAAmB;AAE5B,MAAM,sBAAsBA,OAAM,KAAK,CAAC,UAA6C;AACnF,eAAa,MAAM,SAAS;AAU5B,SAAO,oBAAC,eAAY;AACtB,CAAC;AAEM,MAAM,cAAc,CAAC,UAA8B;AACxD,QAAM,sBAAsB,gCAAgC,KAAK;AACjE,QAAM,mBAAmB,6BAA6B,KAAK;AAE3D,SACE,oBAAC,iBAAc,aAAa,kBAC1B,8BAAC,oBAAiB,aAAa,qBAC7B,8BAAC,uBAAoB,WAAW,OAAO,GACzC,GACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/Header.js CHANGED
@@ -39,21 +39,10 @@ const Header = React2.memo(({ isDestinationPanel }) => {
39
39
  finalCols.push("auto");
40
40
  return finalCols;
41
41
  }, [onSearchBarOpen]);
42
- return /* @__PURE__ */ jsxs(Grid, {
43
- onFocus: onHeaderFocus,
44
- cols,
45
- children: [
46
- /* @__PURE__ */ jsx(HeaderRenderer, {}),
47
- onSearchBarOpen ? /* @__PURE__ */ jsx(StyledIconButton, {
48
- buttonType: "icon",
49
- onClick: handleFilterClick,
50
- children: /* @__PURE__ */ jsx(Search, {
51
- width: "14px",
52
- height: "14px"
53
- })
54
- }) : null
55
- ]
56
- });
42
+ return /* @__PURE__ */ jsxs(Grid, { onFocus: onHeaderFocus, cols, children: [
43
+ /* @__PURE__ */ jsx(HeaderRenderer, {}),
44
+ onSearchBarOpen ? /* @__PURE__ */ jsx(StyledIconButton, { buttonType: "icon", onClick: handleFilterClick, children: /* @__PURE__ */ jsx(Search, { width: "14px", height: "14px" }) }) : null
45
+ ] });
57
46
  });
58
47
  export {
59
48
  Header
package/dist/esm/parts/Header.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Header.tsx"],
4
4
  "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 {\n DSButtonV2,\n type DSButtonT,\n // BUTTON_SIZES\n} from '@elliemae/ds-button';\nimport { styled } from '@elliemae/ds-system';\nimport { usePropsStore } from '../config/useStore';\nimport { useFocusTracker } from '../config/useFocusTracker';\nimport { type DSShuttleV2T } from '../react-desc-prop-types';\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 }: DSShuttleV2T.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 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"],
5
- "mappings": "AAAA,YAAY,WAAW;AC6CnB,SACE,KADF;AA7CJ,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAEhC,MAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,qBAAqB,CAAC;AAAA;AAAA;AAAA;AAI1F,MAAM,SAASA,OAAM,KAAK,CAAC,EAAE,mBAAmB,MAAkC;AACvF,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,SACE,qBAAC;AAAA,IAAK,SAAS;AAAA,IAAe;AAAA,IAC5B;AAAA,0BAAC,kBAAe;AAAA,MACf,kBACC,oBAAC;AAAA,QAAiB,YAAW;AAAA,QAAO,SAAS;AAAA,QAC3C,8BAAC;AAAA,UAAO,OAAM;AAAA,UAAO,QAAO;AAAA,SAAO;AAAA,OACrC,IACE;AAAA;AAAA,GACN;AAEJ,CAAC;",
5
+ "mappings": "AAAA,YAAY,WAAW;AC6CnB,SACE,KADF;AA7CJ,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAEhC,MAAM,mBAAmB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,qBAAqB,CAAC;AAAA;AAAA;AAAA;AAI1F,MAAM,SAASA,OAAM,KAAK,CAAC,EAAE,mBAAmB,MAAkC;AACvF,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,SACE,qBAAC,QAAK,SAAS,eAAe,MAC5B;AAAA,wBAAC,kBAAe;AAAA,IACf,kBACC,oBAAC,oBAAiB,YAAW,QAAO,SAAS,mBAC3C,8BAAC,UAAO,OAAM,QAAO,QAAO,QAAO,GACrC,IACE;AAAA,KACN;AAEJ,CAAC;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/Item/Item.js CHANGED
@@ -70,28 +70,25 @@ const Item = React2.memo((itemMeta) => {
70
70
  [onItemContainerKeyDown, selectItem]
71
71
  );
72
72
  const { shouldFocus, innerRefHandlerParentItem } = useInnerRefHandlers(itemMeta);
73
- return /* @__PURE__ */ jsxs(ItemWrapper, {
74
- cols,
75
- alignItems: "center",
76
- onClick: selectItem,
77
- onKeyDown: handleItemKeyDown,
78
- ref: innerRefHandlerParentItem,
79
- tabIndex: shouldFocus ? 0 : -1,
80
- role: "checkbox",
81
- "aria-checked": isSelected,
82
- id,
83
- children: [
84
- /* @__PURE__ */ jsx(ItemSelection, {
85
- ...itemMeta
86
- }),
87
- /* @__PURE__ */ jsx(ItemMiddleSection, {
88
- ...itemMeta
89
- }),
90
- /* @__PURE__ */ jsx(ItemActions, {
91
- ...itemMeta
92
- })
93
- ]
94
- });
73
+ return /* @__PURE__ */ jsxs(
74
+ ItemWrapper,
75
+ {
76
+ cols,
77
+ alignItems: "center",
78
+ onClick: selectItem,
79
+ onKeyDown: handleItemKeyDown,
80
+ ref: innerRefHandlerParentItem,
81
+ tabIndex: shouldFocus ? 0 : -1,
82
+ role: "checkbox",
83
+ "aria-checked": isSelected,
84
+ id,
85
+ children: [
86
+ /* @__PURE__ */ jsx(ItemSelection, { ...itemMeta }),
87
+ /* @__PURE__ */ jsx(ItemMiddleSection, { ...itemMeta }),
88
+ /* @__PURE__ */ jsx(ItemActions, { ...itemMeta })
89
+ ]
90
+ }
91
+ );
95
92
  });
96
93
  export {
97
94
  Item
package/dist/esm/parts/Item/Item.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Item/Item.tsx"],
4
4
  "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 { useInternalStore } from '../../config/useStore';\nimport { useFocusTracker } from '../../config/useFocusTracker';\nimport { ItemSelection } from './ItemSelection';\nimport { ItemActions } from './ItemActions';\nimport { ItemMiddleSection } from './ItemMiddleSection';\nimport { useSelectionLogic } from './useSelectionLogic';\nimport { useItemArrowNavigation } from './useItemArrowNavigation';\nimport { REGIONS_FOCUSES } from '../../constants';\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 { trackFocusItem } = useFocusTracker();\n const focusRegion = useInternalStore((state) => state.focusRegion);\n const focusItem = useInternalStore((state) => state.focusItem);\n const focusItemAction = useInternalStore((state) => state.focusItemAction);\n const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM : REGIONS_FOCUSES.SOURCE_PANEL_ITEM;\n const currItemId = 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 trackFocusItem(item); // this converts 'first'/'last' to actual id -> prevents 'last' to focus \"new last\" if new items are added\n }\n },\n [item, shouldFocus, trackFocusItem],\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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACmFnB,SAWE,KAXF;AAnFJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,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;AAAA;AAiBhF,MAAM,sBAAsB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AACnF,QAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAC3C,QAAM,cAAc,iBAAiB,CAAC,UAAU,MAAM,WAAW;AACjE,QAAM,YAAY,iBAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,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;AACZ,uBAAe,IAAI;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,MAAM,aAAa,cAAc;AAAA,EACpC;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;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACmFnB,SAWE,KAXF;AAnFJ,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,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;AAAA;AAiBhF,MAAM,sBAAsB,CAAC,EAAE,MAAM,mBAAmB,MAA6B;AACnF,QAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAC3C,QAAM,cAAc,iBAAiB,CAAC,UAAU,MAAM,WAAW;AACjE,QAAM,YAAY,iBAAiB,CAAC,UAAU,MAAM,SAAS;AAC7D,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,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;AACZ,uBAAe,IAAI;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,MAAM,aAAa,cAAc;AAAA,EACpC;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;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,YAAW;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,MACL,UAAU,cAAc,IAAI;AAAA,MAC5B,MAAK;AAAA,MACL,gBAAc;AAAA,MACd;AAAA,MAEA;AAAA,4BAAC,iBAAe,GAAG,UAAU;AAAA,QAC7B,oBAAC,qBAAmB,GAAG,UAAU;AAAA,QACjC,oBAAC,eAAa,GAAG,UAAU;AAAA;AAAA;AAAA,EAC7B;AAEJ,CAAC;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/Item/ItemActions/ItemActions.js CHANGED
@@ -37,53 +37,35 @@ const ItemActions = React2.memo((itemMeta) => {
37
37
  const { preventDrilldown, preventMove } = original;
38
38
  const { shouldFocusDrilldown, shouldFocusMove, innerRefHandlerDrilldown, innerRefHandlerMove } = useInnerRefHandlers(itemMeta);
39
39
  const { handleClickDrilldown, handleClickSingleMove } = useActionsHandlers(itemMeta);
40
- return /* @__PURE__ */ jsx(StyledItemActions, {
41
- cols: actionsCols,
42
- gutter: "xxs",
43
- pl: "xs",
44
- pr: "xxs",
45
- alignItems: "center",
46
- children: withActions ? /* @__PURE__ */ jsxs(Fragment, {
47
- children: [
48
- /* @__PURE__ */ jsx(StyledItemActionWrapper, {
49
- children: /* @__PURE__ */ jsx(StyledButton, {
50
- buttonType: "icon",
51
- onClick: handleClickDrilldown,
52
- size: BUTTON_SIZES.S,
53
- innerRef: innerRefHandlerDrilldown,
54
- tabIndex: shouldFocusDrilldown && !preventDrilldown ? 0 : -1,
55
- disabled: preventDrilldown === true,
56
- children: /* @__PURE__ */ jsx(StyledDrilldownIcon, {
57
- width: "20px",
58
- height: "20px"
59
- })
60
- })
61
- }),
62
- /* @__PURE__ */ jsx(StyledItemActionWrapper, {
63
- children: /* @__PURE__ */ jsx(StyledButton, {
64
- buttonType: "icon",
65
- onClick: handleClickSingleMove,
66
- size: BUTTON_SIZES.S,
67
- innerRef: innerRefHandlerMove,
68
- tabIndex: shouldFocusMove && !preventMove ? 0 : -1,
69
- disabled: preventMove === true,
70
- children: isDestinationPanel ? /* @__PURE__ */ jsx(StyledCloseMediumIcon, {
71
- width: "20px",
72
- height: "20px"
73
- }) : /* @__PURE__ */ jsx(StyledArrowShortRightIcon, {
74
- width: "20px",
75
- height: "20px"
76
- })
77
- })
78
- })
79
- ]
80
- }) : /* @__PURE__ */ jsxs(Fragment, {
81
- children: [
82
- /* @__PURE__ */ jsx("div", {}),
83
- /* @__PURE__ */ jsx("div", {})
84
- ]
85
- })
86
- });
40
+ return /* @__PURE__ */ jsx(StyledItemActions, { cols: actionsCols, gutter: "xxs", pl: "xs", pr: "xxs", alignItems: "center", children: withActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
41
+ /* @__PURE__ */ jsx(StyledItemActionWrapper, { children: /* @__PURE__ */ jsx(
42
+ StyledButton,
43
+ {
44
+ buttonType: "icon",
45
+ onClick: handleClickDrilldown,
46
+ size: BUTTON_SIZES.S,
47
+ innerRef: innerRefHandlerDrilldown,
48
+ tabIndex: shouldFocusDrilldown && !preventDrilldown ? 0 : -1,
49
+ disabled: preventDrilldown === true,
50
+ children: /* @__PURE__ */ jsx(StyledDrilldownIcon, { width: "20px", height: "20px" })
51
+ }
52
+ ) }),
53
+ /* @__PURE__ */ jsx(StyledItemActionWrapper, { children: /* @__PURE__ */ jsx(
54
+ StyledButton,
55
+ {
56
+ buttonType: "icon",
57
+ onClick: handleClickSingleMove,
58
+ size: BUTTON_SIZES.S,
59
+ innerRef: innerRefHandlerMove,
60
+ tabIndex: shouldFocusMove && !preventMove ? 0 : -1,
61
+ disabled: preventMove === true,
62
+ children: isDestinationPanel ? /* @__PURE__ */ jsx(StyledCloseMediumIcon, { width: "20px", height: "20px" }) : /* @__PURE__ */ jsx(StyledArrowShortRightIcon, { width: "20px", height: "20px" })
63
+ }
64
+ ) })
65
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
66
+ /* @__PURE__ */ jsx("div", {}),
67
+ /* @__PURE__ */ jsx("div", {})
68
+ ] }) });
87
69
  });
88
70
  export {
89
71
  ItemActions