@elliemae/ds-shuttle-v2 3.70.0-next.22 → 3.70.0-next.23

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 (11) hide show
  1. package/dist/cjs/constants/index.js +1 -0
  2. package/dist/cjs/constants/index.js.map +2 -2
  3. package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js +61 -33
  4. package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js.map +2 -2
  5. package/dist/esm/constants/index.js +1 -0
  6. package/dist/esm/constants/index.js.map +2 -2
  7. package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js +62 -34
  8. package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js.map +2 -2
  9. package/dist/types/constants/index.d.ts +2 -0
  10. package/dist/types/tests/DSShuttlev2.PUI-15537.test.d.ts +1 -0
  11. package/package.json +23 -23
package/dist/cjs/constants/index.js CHANGED
@@ -67,6 +67,7 @@ const DSShuttleV2Slots = {
67
67
  LOADING_LIST_WRAPPER: "loading-list-wrapper",
68
68
  MOVE_MULTIPLE_WRAPPER: "move-multiple-wrapper",
69
69
  MOVE_MULTIPLE_BTN: "move-multiple-btn",
70
+ MOVE_MULTIPLE_LIVE_REGION: "move-multiple-live-region",
70
71
  LIST_WRAPPER_MID: "list-wrapper-mid",
71
72
  LIST_WRAPPER_MID_SCROLLER: "list-wrapper-mid-scroller",
72
73
  LIST_WRAPPER_TOP: "list-wrapper-top",
package/dist/cjs/constants/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSShuttleV2Name = 'DSShuttlev2';\n\nexport const DSShuttleV2Slots = {\n HEADER_SEARCH_ICON: 'header-search-icon',\n WRAPPER: 'wrapper',\n PANEL_WRAPPER: 'panel-wrapper',\n LIST_WRAPPER: 'list-wrapper',\n ITEM_WRAPPER: 'item-wrapper',\n ITEM_CHECKBOX: 'item-checkbox',\n ITEM_ICON_WRAPPER: 'item-icon-wrapper',\n ITEM_LABEL_WRAPPER: 'item-label-wrapper',\n ITEM_MIDSECTION_WRAPPER: 'item-midsection-wrapper',\n ITEM_SELECTION: 'item-selection',\n ITEM_ACTIONS_WRAPPER: 'item-actions-wrapper',\n ITEM_ACTION_WRAPPER: 'item-action-wrapper',\n ITEM_ACTION_BTN: 'item-action-btn',\n ITEM_ACTION_BTN_DRILLDOWN_ICON: 'item-action-btn-drilldown-icon',\n ITEM_ACTION_BTN_TO_SOURCE_ICON: 'item-action-btn-to-source-icon',\n ITEM_ACTION_BTN_TO_DESTINATION_ICON: 'item-action-btn-to-destination-icon',\n LIST_BOTTOM_LOADING_MORE: 'list-bottom-loading-more',\n LIST_BOTTOM_LOAD_MORE_BTN: 'list-bottom-load-more-btn',\n LIST_WRAPPER_BOTTOM: 'list-wrapper-bottom',\n EMPTY_LIST_WRAPPER: 'empty-list-wrapper',\n ITEMS_WRAPPER: 'items-wrapper',\n LOADING_LIST_WRAPPER: 'loading-list-wrapper',\n MOVE_MULTIPLE_WRAPPER: 'move-multiple-wrapper',\n MOVE_MULTIPLE_BTN: 'move-multiple-btn',\n LIST_WRAPPER_MID: 'list-wrapper-mid',\n LIST_WRAPPER_MID_SCROLLER: 'list-wrapper-mid-scroller',\n LIST_WRAPPER_TOP: 'list-wrapper-top',\n AREA_SEARCH_WRAPPER: 'area-search-wrapper',\n AREA_SEARCH_BAR: 'area-search-bar',\n AREA_SELECTION_HEADER: 'area-selection-header',\n AREA_SELECTION_HEADER_COUNT_LABEL: 'area-selection-header-count-label',\n DRAG_AND_DROP_HANDLE: 'drag-and-drop-handle',\n ARIA_LIVE_PANEL_CENTER: 'aria-live-panel-center',\n} as const;\n\nexport const SHUTTLE_IDS = {\n SOURCE_PANEL_SEARCH: 'ds-shuttle-v2-source-panel-search',\n DESTINATION_PANEL_SEARCH: 'ds-shuttle-v2-destination-panel-search',\n} as const;\n\nexport const DSShuttleV2DataTestIds = slotObjectToDataTestIds(DSShuttleV2Name, DSShuttleV2Slots);\n\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\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,qCAAqC;AAAA,EACrC,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,mCAAmC;AAAA,EACnC,sBAAsB;AAAA,EACtB,wBAAwB;AAC1B;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AAAA,EACrB,0BAA0B;AAC5B;AAEO,MAAM,6BAAyB,0CAAwB,iBAAiB,gBAAgB;AAExF,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;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;",
4
+ "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSShuttleV2Name = 'DSShuttlev2';\n\nexport const DSShuttleV2Slots = {\n HEADER_SEARCH_ICON: 'header-search-icon',\n WRAPPER: 'wrapper',\n PANEL_WRAPPER: 'panel-wrapper',\n LIST_WRAPPER: 'list-wrapper',\n ITEM_WRAPPER: 'item-wrapper',\n ITEM_CHECKBOX: 'item-checkbox',\n ITEM_ICON_WRAPPER: 'item-icon-wrapper',\n ITEM_LABEL_WRAPPER: 'item-label-wrapper',\n ITEM_MIDSECTION_WRAPPER: 'item-midsection-wrapper',\n ITEM_SELECTION: 'item-selection',\n ITEM_ACTIONS_WRAPPER: 'item-actions-wrapper',\n ITEM_ACTION_WRAPPER: 'item-action-wrapper',\n ITEM_ACTION_BTN: 'item-action-btn',\n ITEM_ACTION_BTN_DRILLDOWN_ICON: 'item-action-btn-drilldown-icon',\n ITEM_ACTION_BTN_TO_SOURCE_ICON: 'item-action-btn-to-source-icon',\n ITEM_ACTION_BTN_TO_DESTINATION_ICON: 'item-action-btn-to-destination-icon',\n LIST_BOTTOM_LOADING_MORE: 'list-bottom-loading-more',\n LIST_BOTTOM_LOAD_MORE_BTN: 'list-bottom-load-more-btn',\n LIST_WRAPPER_BOTTOM: 'list-wrapper-bottom',\n EMPTY_LIST_WRAPPER: 'empty-list-wrapper',\n ITEMS_WRAPPER: 'items-wrapper',\n LOADING_LIST_WRAPPER: 'loading-list-wrapper',\n MOVE_MULTIPLE_WRAPPER: 'move-multiple-wrapper',\n MOVE_MULTIPLE_BTN: 'move-multiple-btn',\n MOVE_MULTIPLE_LIVE_REGION: 'move-multiple-live-region',\n LIST_WRAPPER_MID: 'list-wrapper-mid',\n LIST_WRAPPER_MID_SCROLLER: 'list-wrapper-mid-scroller',\n LIST_WRAPPER_TOP: 'list-wrapper-top',\n AREA_SEARCH_WRAPPER: 'area-search-wrapper',\n AREA_SEARCH_BAR: 'area-search-bar',\n AREA_SELECTION_HEADER: 'area-selection-header',\n AREA_SELECTION_HEADER_COUNT_LABEL: 'area-selection-header-count-label',\n DRAG_AND_DROP_HANDLE: 'drag-and-drop-handle',\n ARIA_LIVE_PANEL_CENTER: 'aria-live-panel-center',\n} as const;\n\nexport const SHUTTLE_IDS = {\n SOURCE_PANEL_SEARCH: 'ds-shuttle-v2-source-panel-search',\n DESTINATION_PANEL_SEARCH: 'ds-shuttle-v2-destination-panel-search',\n} as const;\n\nexport const DSShuttleV2DataTestIds = slotObjectToDataTestIds(DSShuttleV2Name, DSShuttleV2Slots);\n\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\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,qCAAqC;AAAA,EACrC,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,mCAAmC;AAAA,EACnC,sBAAsB;AAAA,EACtB,wBAAwB;AAC1B;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AAAA,EACrB,0BAA0B;AAC5B;AAEO,MAAM,6BAAyB,0CAAwB,iBAAiB,gBAAgB;AAExF,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;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js CHANGED
@@ -43,6 +43,7 @@ var import_itemMovementHelpers = require("../../../config/itemMovementHelpers.js
43
43
  var import_useStore = require("../../../config/useStore/index.js");
44
44
  var import_useFocusTracker = require("../../../config/useFocusTracker/index.js");
45
45
  var import_constants = require("../../../constants/index.js");
46
+ var import_styles = require("../../../styles.js");
46
47
  const StyledMoveMultipleWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSShuttleV2Name, slot: import_constants.DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
47
48
  position: absolute;
48
49
  background-color: neutral-000;
@@ -84,6 +85,10 @@ const StyledArrowShortRightIcon = (0, import_ds_system.styled)(import_ds_icons.A
84
85
  fill: brand-600;
85
86
  }
86
87
  `;
88
+ const StyledMoveMultipleLiveRegion = (0, import_ds_system.styled)(import_styles.StyledA11yNoVisible, {
89
+ name: import_constants.DSShuttleV2Name,
90
+ slot: import_constants.DSShuttleV2Slots.MOVE_MULTIPLE_LIVE_REGION
91
+ })``;
87
92
  const gridFullFraction = ["1fr"];
88
93
  const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
89
94
  const { isDestinationPanel } = panelMeta;
@@ -98,11 +103,16 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
98
103
  },
99
104
  [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
100
105
  );
106
+ const [isMoveAllFocused, setIsMoveAllFocused] = import_react.default.useState(false);
101
107
  const handleMoveAllBtnFocus = import_react.default.useCallback(() => {
102
108
  trackFocusItemReset();
103
109
  trackFocusActionReset();
104
110
  trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
111
+ setIsMoveAllFocused(true);
105
112
  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);
113
+ const handleMoveAllBtnBlur = import_react.default.useCallback(() => {
114
+ setIsMoveAllFocused(false);
115
+ }, []);
106
116
  const setZustandRef = (0, import_useStore.useInternalStore)((state) => state.setZustandRef);
107
117
  const currRegion = isDestinationPanel ? import_constants.REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL : import_constants.REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;
108
118
  const innerRefHandlerMoveAll = import_react.default.useCallback(
@@ -122,6 +132,10 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
122
132
  },
123
133
  [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel]
124
134
  );
135
+ const selectionLength = (0, import_useStore.usePropsStore)(
136
+ (state) => isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length
137
+ );
138
+ const moveAllAriaLabel = `Move ${selectionLength} selected item${selectionLength === 1 ? "" : "s"} to ${isDestinationPanel ? "source" : "destination"}`;
125
139
  const getBatchActionableButtonProps = (0, import_useStore.usePropsStore)((state) => state.getBatchActionableButtonProps);
126
140
  const batchActionableButtonProps = import_react.default.useMemo(
127
141
  () => getBatchActionableButtonProps !== void 0 ? getBatchActionableButtonProps(panelMeta) : {},
@@ -131,14 +145,15 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
131
145
  () => ({
132
146
  onClick: handleMoveAllAction,
133
147
  onFocus: handleMoveAllBtnFocus,
148
+ onBlur: handleMoveAllBtnBlur,
134
149
  onKeyDown: handleMoveAllKeyDown
135
150
  }),
136
- [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown]
151
+ [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllBtnBlur, handleMoveAllKeyDown]
137
152
  );
138
153
  const spreadableButtonProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(batchActionableButtonProps, buttonActions);
139
154
  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
140
155
  const getOwnerPropsArguments = import_react.default.useCallback(() => panelMeta, [panelMeta]);
141
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
156
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
142
157
  StyledMoveMultipleWrapper,
143
158
  {
144
159
  boxShadow: "xs",
@@ -148,37 +163,50 @@ const MultipleSelectionAction = import_react.default.memo((panelMeta) => {
148
163
  rows: gridFullFraction,
149
164
  getOwnerProps,
150
165
  getOwnerPropsArguments,
151
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
152
- StyledButton,
153
- {
154
- "aria-label": "massive action button",
155
- buttonType: "icon",
156
- onClick: handleMoveAllAction,
157
- onFocus: handleMoveAllBtnFocus,
158
- onKeyDown: handleMoveAllKeyDown,
159
- innerRef: innerRefHandlerMoveAll,
160
- ...spreadableButtonProps,
161
- getOwnerProps,
162
- getOwnerPropsArguments,
163
- children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
164
- StyledCloseMediumIcon,
165
- {
166
- width: "1.538rem",
167
- height: "1.538rem",
168
- getOwnerProps,
169
- getOwnerPropsArguments
170
- }
171
- ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
172
- StyledArrowShortRightIcon,
173
- {
174
- width: "1.538",
175
- height: "1.538rem",
176
- getOwnerProps,
177
- getOwnerPropsArguments
178
- }
179
- )
180
- }
181
- )
166
+ children: [
167
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
168
+ StyledButton,
169
+ {
170
+ "aria-label": moveAllAriaLabel,
171
+ buttonType: "icon",
172
+ onClick: handleMoveAllAction,
173
+ onFocus: handleMoveAllBtnFocus,
174
+ onBlur: handleMoveAllBtnBlur,
175
+ onKeyDown: handleMoveAllKeyDown,
176
+ innerRef: innerRefHandlerMoveAll,
177
+ ...spreadableButtonProps,
178
+ getOwnerProps,
179
+ getOwnerPropsArguments,
180
+ children: isDestinationPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
181
+ StyledCloseMediumIcon,
182
+ {
183
+ width: "1.538rem",
184
+ height: "1.538rem",
185
+ getOwnerProps,
186
+ getOwnerPropsArguments
187
+ }
188
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
189
+ StyledArrowShortRightIcon,
190
+ {
191
+ width: "1.538",
192
+ height: "1.538rem",
193
+ getOwnerProps,
194
+ getOwnerPropsArguments
195
+ }
196
+ )
197
+ }
198
+ ),
199
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
200
+ StyledMoveMultipleLiveRegion,
201
+ {
202
+ "aria-live": "polite",
203
+ "aria-atomic": "true",
204
+ getOwnerProps,
205
+ getOwnerPropsArguments,
206
+ children: isMoveAllFocused ? moveAllAriaLabel : ""
207
+ }
208
+ )
209
+ ]
182
210
  }
183
211
  );
184
212
  });
package/dist/cjs/parts/Panel/middle/MultipleSelectionAction.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Panel/middle/MultipleSelectionAction.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/index.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots, REGIONS_FOCUSES } from '../../../constants/index.js';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n position: absolute;\n background-color: neutral-000;\n top: 0px;\n right: 0px;\n transform: translateX(0);\n height: 100%;\n width: 5rem;\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: DSShuttleV2Name,\n slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n width: 100%;\n height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n > svg {\n fill: brand-600;\n }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.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, trackFocusRegionPanelFocusMoveAll, 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 trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n const currRegion = isDestinationPanel\n ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n const innerRefHandlerMoveAll = React.useCallback(\n (node: HTMLButtonElement | null) => {\n setZustandRef([currRegion, '', ''], node);\n },\n [currRegion, setZustandRef],\n );\n\n const handleMoveAllKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n (e) => {\n const { key } = e;\n if (['ArrowLeft', 'ArrowRight'].includes(key)) {\n trackFocusItemReset();\n trackFocusActionReset();\n trackFocusRegionPanel(isDestinationPanel);\n }\n },\n [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel],\n );\n\n const getBatchActionableButtonProps = usePropsStore((state) => state.getBatchActionableButtonProps);\n const batchActionableButtonProps = React.useMemo(\n () => (getBatchActionableButtonProps !== undefined ? getBatchActionableButtonProps(panelMeta) : {}),\n [getBatchActionableButtonProps, panelMeta],\n );\n const buttonActions = React.useMemo(\n () => ({\n onClick: handleMoveAllAction,\n onFocus: handleMoveAllBtnFocus,\n onKeyDown: handleMoveAllKeyDown,\n }),\n [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown],\n );\n\n // this \"as DSButtonT.Props\" is a workaround for the fact that useGetGlobalAttributes is not able to understand overloaded types\n // intellisense will mostly lie because of this but we are using this for the spread operator and it will work for aria-* and data-* props\n const spreadableButtonProps = useGetGlobalAttributes(batchActionableButtonProps, buttonActions) as DSButtonT.Props;\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => panelMeta, [panelMeta]);\n\n return (\n <StyledMoveMultipleWrapper\n boxShadow=\"xs\"\n alignItems=\"center\"\n justifyContent=\"center\"\n cols={gridFullFraction}\n rows={gridFullFraction}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledButton\n aria-label=\"massive action button\"\n buttonType=\"icon\"\n onClick={handleMoveAllAction}\n onFocus={handleMoveAllBtnFocus}\n onKeyDown={handleMoveAllKeyDown}\n innerRef={innerRefHandlerMoveAll}\n {...spreadableButtonProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledButton>\n </StyledMoveMultipleWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/index.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots, REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { StyledA11yNoVisible } from '../../../styles.js';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n position: absolute;\n background-color: neutral-000;\n top: 0px;\n right: 0px;\n transform: translateX(0);\n height: 100%;\n width: 5rem;\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: DSShuttleV2Name,\n slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n width: 100%;\n height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n > svg {\n fill: brand-600;\n }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})`\n > svg {\n fill: brand-600;\n }\n`;\nconst StyledMoveMultipleLiveRegion = styled(StyledA11yNoVisible, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.MOVE_MULTIPLE_LIVE_REGION,\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, trackFocusRegionPanelFocusMoveAll, 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 // PUI-15537 \u2014 drives the focus-time live announcement (see the live-region note below).\n const [isMoveAllFocused, setIsMoveAllFocused] = React.useState(false);\n const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n trackFocusItemReset();\n trackFocusActionReset();\n trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n setIsMoveAllFocused(true);\n }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n const handleMoveAllBtnBlur: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n setIsMoveAllFocused(false);\n }, []);\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n const currRegion = isDestinationPanel\n ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n const innerRefHandlerMoveAll = React.useCallback(\n (node: HTMLButtonElement | null) => {\n setZustandRef([currRegion, '', ''], node);\n },\n [currRegion, setZustandRef],\n );\n\n const handleMoveAllKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n (e) => {\n const { key } = e;\n if (['ArrowLeft', 'ArrowRight'].includes(key)) {\n trackFocusItemReset();\n trackFocusActionReset();\n trackFocusRegionPanel(isDestinationPanel);\n }\n },\n [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel],\n );\n\n // PUI-15537 \u2014 Bulk Action Button (BAB) selection announcement.\n // Two complementary mechanisms, because an aria-label alone proved unreliable on focus:\n // 1. aria-label \u2014 gives the button a meaningful accessible name (replacing the old static,\n // meaningless \"massive action button\"). Correct for assistive tech that reads the name on\n // focus, and what consumers see when they inspect the button.\n // 2. Focus-time polite live region (StyledMoveMultipleLiveRegion below) \u2014 the BAB is focused via\n // the component's roving-tabindex system rather than a native Tab, and an aria-label on an\n // icon-only button (its only content is aria-hidden) is not announced reliably across screen\n // readers in that scenario. To guarantee the count is spoken when focus lands on the BAB, we\n // also push the same text into a polite live region while the button is focused. This is\n // announced as live content, independent of whether the AT re-reads the aria-label.\n // Both derive from the same selection-count selector the visible \"{n} selected\" header and the\n // panel-center live region already use, so the spoken count stays in sync with the UI. A\n // consumer-provided aria-label via getBatchActionableButtonProps still wins because\n // spreadableButtonProps is spread after the aria-label prop.\n const selectionLength = usePropsStore((state) =>\n isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length,\n );\n const moveAllAriaLabel = `Move ${selectionLength} selected item${selectionLength === 1 ? '' : 's'} to ${\n isDestinationPanel ? 'source' : 'destination'\n }`;\n\n const getBatchActionableButtonProps = usePropsStore((state) => state.getBatchActionableButtonProps);\n const batchActionableButtonProps = React.useMemo(\n () => (getBatchActionableButtonProps !== undefined ? getBatchActionableButtonProps(panelMeta) : {}),\n [getBatchActionableButtonProps, panelMeta],\n );\n const buttonActions = React.useMemo(\n () => ({\n onClick: handleMoveAllAction,\n onFocus: handleMoveAllBtnFocus,\n onBlur: handleMoveAllBtnBlur,\n onKeyDown: handleMoveAllKeyDown,\n }),\n [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllBtnBlur, handleMoveAllKeyDown],\n );\n\n // this \"as DSButtonT.Props\" is a workaround for the fact that useGetGlobalAttributes is not able to understand overloaded types\n // intellisense will mostly lie because of this but we are using this for the spread operator and it will work for aria-* and data-* props\n const spreadableButtonProps = useGetGlobalAttributes(batchActionableButtonProps, buttonActions) as DSButtonT.Props;\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => panelMeta, [panelMeta]);\n\n return (\n <StyledMoveMultipleWrapper\n boxShadow=\"xs\"\n alignItems=\"center\"\n justifyContent=\"center\"\n cols={gridFullFraction}\n rows={gridFullFraction}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledButton\n aria-label={moveAllAriaLabel}\n buttonType=\"icon\"\n onClick={handleMoveAllAction}\n onFocus={handleMoveAllBtnFocus}\n onBlur={handleMoveAllBtnBlur}\n onKeyDown={handleMoveAllKeyDown}\n innerRef={innerRefHandlerMoveAll}\n {...spreadableButtonProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledButton>\n {/* PUI-15537 \u2014 announced as polite live content when the BAB gains focus, so the count is\n spoken even when the aria-label is not re-read on this button. Empty while unfocused. */}\n <StyledMoveMultipleLiveRegion\n aria-live=\"polite\"\n aria-atomic=\"true\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isMoveAllFocused ? moveAllAriaLabel : ''}\n </StyledMoveMultipleLiveRegion>\n </StyledMoveMultipleWrapper>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/constants/index.js CHANGED
@@ -26,6 +26,7 @@ const DSShuttleV2Slots = {
26
26
  LOADING_LIST_WRAPPER: "loading-list-wrapper",
27
27
  MOVE_MULTIPLE_WRAPPER: "move-multiple-wrapper",
28
28
  MOVE_MULTIPLE_BTN: "move-multiple-btn",
29
+ MOVE_MULTIPLE_LIVE_REGION: "move-multiple-live-region",
29
30
  LIST_WRAPPER_MID: "list-wrapper-mid",
30
31
  LIST_WRAPPER_MID_SCROLLER: "list-wrapper-mid-scroller",
31
32
  LIST_WRAPPER_TOP: "list-wrapper-top",
package/dist/esm/constants/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSShuttleV2Name = 'DSShuttlev2';\n\nexport const DSShuttleV2Slots = {\n HEADER_SEARCH_ICON: 'header-search-icon',\n WRAPPER: 'wrapper',\n PANEL_WRAPPER: 'panel-wrapper',\n LIST_WRAPPER: 'list-wrapper',\n ITEM_WRAPPER: 'item-wrapper',\n ITEM_CHECKBOX: 'item-checkbox',\n ITEM_ICON_WRAPPER: 'item-icon-wrapper',\n ITEM_LABEL_WRAPPER: 'item-label-wrapper',\n ITEM_MIDSECTION_WRAPPER: 'item-midsection-wrapper',\n ITEM_SELECTION: 'item-selection',\n ITEM_ACTIONS_WRAPPER: 'item-actions-wrapper',\n ITEM_ACTION_WRAPPER: 'item-action-wrapper',\n ITEM_ACTION_BTN: 'item-action-btn',\n ITEM_ACTION_BTN_DRILLDOWN_ICON: 'item-action-btn-drilldown-icon',\n ITEM_ACTION_BTN_TO_SOURCE_ICON: 'item-action-btn-to-source-icon',\n ITEM_ACTION_BTN_TO_DESTINATION_ICON: 'item-action-btn-to-destination-icon',\n LIST_BOTTOM_LOADING_MORE: 'list-bottom-loading-more',\n LIST_BOTTOM_LOAD_MORE_BTN: 'list-bottom-load-more-btn',\n LIST_WRAPPER_BOTTOM: 'list-wrapper-bottom',\n EMPTY_LIST_WRAPPER: 'empty-list-wrapper',\n ITEMS_WRAPPER: 'items-wrapper',\n LOADING_LIST_WRAPPER: 'loading-list-wrapper',\n MOVE_MULTIPLE_WRAPPER: 'move-multiple-wrapper',\n MOVE_MULTIPLE_BTN: 'move-multiple-btn',\n LIST_WRAPPER_MID: 'list-wrapper-mid',\n LIST_WRAPPER_MID_SCROLLER: 'list-wrapper-mid-scroller',\n LIST_WRAPPER_TOP: 'list-wrapper-top',\n AREA_SEARCH_WRAPPER: 'area-search-wrapper',\n AREA_SEARCH_BAR: 'area-search-bar',\n AREA_SELECTION_HEADER: 'area-selection-header',\n AREA_SELECTION_HEADER_COUNT_LABEL: 'area-selection-header-count-label',\n DRAG_AND_DROP_HANDLE: 'drag-and-drop-handle',\n ARIA_LIVE_PANEL_CENTER: 'aria-live-panel-center',\n} as const;\n\nexport const SHUTTLE_IDS = {\n SOURCE_PANEL_SEARCH: 'ds-shuttle-v2-source-panel-search',\n DESTINATION_PANEL_SEARCH: 'ds-shuttle-v2-destination-panel-search',\n} as const;\n\nexport const DSShuttleV2DataTestIds = slotObjectToDataTestIds(DSShuttleV2Name, DSShuttleV2Slots);\n\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\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,qCAAqC;AAAA,EACrC,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,mCAAmC;AAAA,EACnC,sBAAsB;AAAA,EACtB,wBAAwB;AAC1B;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AAAA,EACrB,0BAA0B;AAC5B;AAEO,MAAM,yBAAyB,wBAAwB,iBAAiB,gBAAgB;AAExF,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;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSShuttleV2Name = 'DSShuttlev2';\n\nexport const DSShuttleV2Slots = {\n HEADER_SEARCH_ICON: 'header-search-icon',\n WRAPPER: 'wrapper',\n PANEL_WRAPPER: 'panel-wrapper',\n LIST_WRAPPER: 'list-wrapper',\n ITEM_WRAPPER: 'item-wrapper',\n ITEM_CHECKBOX: 'item-checkbox',\n ITEM_ICON_WRAPPER: 'item-icon-wrapper',\n ITEM_LABEL_WRAPPER: 'item-label-wrapper',\n ITEM_MIDSECTION_WRAPPER: 'item-midsection-wrapper',\n ITEM_SELECTION: 'item-selection',\n ITEM_ACTIONS_WRAPPER: 'item-actions-wrapper',\n ITEM_ACTION_WRAPPER: 'item-action-wrapper',\n ITEM_ACTION_BTN: 'item-action-btn',\n ITEM_ACTION_BTN_DRILLDOWN_ICON: 'item-action-btn-drilldown-icon',\n ITEM_ACTION_BTN_TO_SOURCE_ICON: 'item-action-btn-to-source-icon',\n ITEM_ACTION_BTN_TO_DESTINATION_ICON: 'item-action-btn-to-destination-icon',\n LIST_BOTTOM_LOADING_MORE: 'list-bottom-loading-more',\n LIST_BOTTOM_LOAD_MORE_BTN: 'list-bottom-load-more-btn',\n LIST_WRAPPER_BOTTOM: 'list-wrapper-bottom',\n EMPTY_LIST_WRAPPER: 'empty-list-wrapper',\n ITEMS_WRAPPER: 'items-wrapper',\n LOADING_LIST_WRAPPER: 'loading-list-wrapper',\n MOVE_MULTIPLE_WRAPPER: 'move-multiple-wrapper',\n MOVE_MULTIPLE_BTN: 'move-multiple-btn',\n MOVE_MULTIPLE_LIVE_REGION: 'move-multiple-live-region',\n LIST_WRAPPER_MID: 'list-wrapper-mid',\n LIST_WRAPPER_MID_SCROLLER: 'list-wrapper-mid-scroller',\n LIST_WRAPPER_TOP: 'list-wrapper-top',\n AREA_SEARCH_WRAPPER: 'area-search-wrapper',\n AREA_SEARCH_BAR: 'area-search-bar',\n AREA_SELECTION_HEADER: 'area-selection-header',\n AREA_SELECTION_HEADER_COUNT_LABEL: 'area-selection-header-count-label',\n DRAG_AND_DROP_HANDLE: 'drag-and-drop-handle',\n ARIA_LIVE_PANEL_CENTER: 'aria-live-panel-center',\n} as const;\n\nexport const SHUTTLE_IDS = {\n SOURCE_PANEL_SEARCH: 'ds-shuttle-v2-source-panel-search',\n DESTINATION_PANEL_SEARCH: 'ds-shuttle-v2-destination-panel-search',\n} as const;\n\nexport const DSShuttleV2DataTestIds = slotObjectToDataTestIds(DSShuttleV2Name, DSShuttleV2Slots);\n\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\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,gCAAgC;AAAA,EAChC,gCAAgC;AAAA,EAChC,qCAAqC;AAAA,EACrC,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,mCAAmC;AAAA,EACnC,sBAAsB;AAAA,EACtB,wBAAwB;AAC1B;AAEO,MAAM,cAAc;AAAA,EACzB,qBAAqB;AAAA,EACrB,0BAA0B;AAC5B;AAEO,MAAM,yBAAyB,wBAAwB,iBAAiB,gBAAgB;AAExF,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;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { jsx } from "react/jsx-runtime";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import React2 from "react";
4
4
  import { styled } from "@elliemae/ds-system";
5
5
  import { Grid } from "@elliemae/ds-grid";
@@ -10,6 +10,7 @@ import { useHandleMoveSelection } from "../../../config/itemMovementHelpers.js";
10
10
  import { useInternalStore, usePropsStore } from "../../../config/useStore/index.js";
11
11
  import { useFocusTracker } from "../../../config/useFocusTracker/index.js";
12
12
  import { DSShuttleV2Name, DSShuttleV2Slots, REGIONS_FOCUSES } from "../../../constants/index.js";
13
+ import { StyledA11yNoVisible } from "../../../styles.js";
13
14
  const StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`
14
15
  position: absolute;
15
16
  background-color: neutral-000;
@@ -51,6 +52,10 @@ const StyledArrowShortRightIcon = styled(ArrowShortRight, {
51
52
  fill: brand-600;
52
53
  }
53
54
  `;
55
+ const StyledMoveMultipleLiveRegion = styled(StyledA11yNoVisible, {
56
+ name: DSShuttleV2Name,
57
+ slot: DSShuttleV2Slots.MOVE_MULTIPLE_LIVE_REGION
58
+ })``;
54
59
  const gridFullFraction = ["1fr"];
55
60
  const MultipleSelectionAction = React2.memo((panelMeta) => {
56
61
  const { isDestinationPanel } = panelMeta;
@@ -65,11 +70,16 @@ const MultipleSelectionAction = React2.memo((panelMeta) => {
65
70
  },
66
71
  [isDestinationPanel, moveSelection, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanel]
67
72
  );
73
+ const [isMoveAllFocused, setIsMoveAllFocused] = React2.useState(false);
68
74
  const handleMoveAllBtnFocus = React2.useCallback(() => {
69
75
  trackFocusItemReset();
70
76
  trackFocusActionReset();
71
77
  trackFocusRegionPanelFocusMoveAll(isDestinationPanel);
78
+ setIsMoveAllFocused(true);
72
79
  }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);
80
+ const handleMoveAllBtnBlur = React2.useCallback(() => {
81
+ setIsMoveAllFocused(false);
82
+ }, []);
73
83
  const setZustandRef = useInternalStore((state) => state.setZustandRef);
74
84
  const currRegion = isDestinationPanel ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;
75
85
  const innerRefHandlerMoveAll = React2.useCallback(
@@ -89,6 +99,10 @@ const MultipleSelectionAction = React2.memo((panelMeta) => {
89
99
  },
90
100
  [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel]
91
101
  );
102
+ const selectionLength = usePropsStore(
103
+ (state) => isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length
104
+ );
105
+ const moveAllAriaLabel = `Move ${selectionLength} selected item${selectionLength === 1 ? "" : "s"} to ${isDestinationPanel ? "source" : "destination"}`;
92
106
  const getBatchActionableButtonProps = usePropsStore((state) => state.getBatchActionableButtonProps);
93
107
  const batchActionableButtonProps = React2.useMemo(
94
108
  () => getBatchActionableButtonProps !== void 0 ? getBatchActionableButtonProps(panelMeta) : {},
@@ -98,14 +112,15 @@ const MultipleSelectionAction = React2.memo((panelMeta) => {
98
112
  () => ({
99
113
  onClick: handleMoveAllAction,
100
114
  onFocus: handleMoveAllBtnFocus,
115
+ onBlur: handleMoveAllBtnBlur,
101
116
  onKeyDown: handleMoveAllKeyDown
102
117
  }),
103
- [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown]
118
+ [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllBtnBlur, handleMoveAllKeyDown]
104
119
  );
105
120
  const spreadableButtonProps = useGetGlobalAttributes(batchActionableButtonProps, buttonActions);
106
121
  const getOwnerProps = usePropsStore((store) => store.get);
107
122
  const getOwnerPropsArguments = React2.useCallback(() => panelMeta, [panelMeta]);
108
- return /* @__PURE__ */ jsx(
123
+ return /* @__PURE__ */ jsxs(
109
124
  StyledMoveMultipleWrapper,
110
125
  {
111
126
  boxShadow: "xs",
@@ -115,37 +130,50 @@ const MultipleSelectionAction = React2.memo((panelMeta) => {
115
130
  rows: gridFullFraction,
116
131
  getOwnerProps,
117
132
  getOwnerPropsArguments,
118
- children: /* @__PURE__ */ jsx(
119
- StyledButton,
120
- {
121
- "aria-label": "massive action button",
122
- buttonType: "icon",
123
- onClick: handleMoveAllAction,
124
- onFocus: handleMoveAllBtnFocus,
125
- onKeyDown: handleMoveAllKeyDown,
126
- innerRef: innerRefHandlerMoveAll,
127
- ...spreadableButtonProps,
128
- getOwnerProps,
129
- getOwnerPropsArguments,
130
- children: isDestinationPanel ? /* @__PURE__ */ jsx(
131
- StyledCloseMediumIcon,
132
- {
133
- width: "1.538rem",
134
- height: "1.538rem",
135
- getOwnerProps,
136
- getOwnerPropsArguments
137
- }
138
- ) : /* @__PURE__ */ jsx(
139
- StyledArrowShortRightIcon,
140
- {
141
- width: "1.538",
142
- height: "1.538rem",
143
- getOwnerProps,
144
- getOwnerPropsArguments
145
- }
146
- )
147
- }
148
- )
133
+ children: [
134
+ /* @__PURE__ */ jsx(
135
+ StyledButton,
136
+ {
137
+ "aria-label": moveAllAriaLabel,
138
+ buttonType: "icon",
139
+ onClick: handleMoveAllAction,
140
+ onFocus: handleMoveAllBtnFocus,
141
+ onBlur: handleMoveAllBtnBlur,
142
+ onKeyDown: handleMoveAllKeyDown,
143
+ innerRef: innerRefHandlerMoveAll,
144
+ ...spreadableButtonProps,
145
+ getOwnerProps,
146
+ getOwnerPropsArguments,
147
+ children: isDestinationPanel ? /* @__PURE__ */ jsx(
148
+ StyledCloseMediumIcon,
149
+ {
150
+ width: "1.538rem",
151
+ height: "1.538rem",
152
+ getOwnerProps,
153
+ getOwnerPropsArguments
154
+ }
155
+ ) : /* @__PURE__ */ jsx(
156
+ StyledArrowShortRightIcon,
157
+ {
158
+ width: "1.538",
159
+ height: "1.538rem",
160
+ getOwnerProps,
161
+ getOwnerPropsArguments
162
+ }
163
+ )
164
+ }
165
+ ),
166
+ /* @__PURE__ */ jsx(
167
+ StyledMoveMultipleLiveRegion,
168
+ {
169
+ "aria-live": "polite",
170
+ "aria-atomic": "true",
171
+ getOwnerProps,
172
+ getOwnerPropsArguments,
173
+ children: isMoveAllFocused ? moveAllAriaLabel : ""
174
+ }
175
+ )
176
+ ]
149
177
  }
150
178
  );
151
179
  });
package/dist/esm/parts/Panel/middle/MultipleSelectionAction.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Panel/middle/MultipleSelectionAction.tsx"],
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 { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/index.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots, REGIONS_FOCUSES } from '../../../constants/index.js';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n position: absolute;\n background-color: neutral-000;\n top: 0px;\n right: 0px;\n transform: translateX(0);\n height: 100%;\n width: 5rem;\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: DSShuttleV2Name,\n slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n width: 100%;\n height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n > svg {\n fill: brand-600;\n }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.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, trackFocusRegionPanelFocusMoveAll, 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 trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n const currRegion = isDestinationPanel\n ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n const innerRefHandlerMoveAll = React.useCallback(\n (node: HTMLButtonElement | null) => {\n setZustandRef([currRegion, '', ''], node);\n },\n [currRegion, setZustandRef],\n );\n\n const handleMoveAllKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n (e) => {\n const { key } = e;\n if (['ArrowLeft', 'ArrowRight'].includes(key)) {\n trackFocusItemReset();\n trackFocusActionReset();\n trackFocusRegionPanel(isDestinationPanel);\n }\n },\n [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel],\n );\n\n const getBatchActionableButtonProps = usePropsStore((state) => state.getBatchActionableButtonProps);\n const batchActionableButtonProps = React.useMemo(\n () => (getBatchActionableButtonProps !== undefined ? getBatchActionableButtonProps(panelMeta) : {}),\n [getBatchActionableButtonProps, panelMeta],\n );\n const buttonActions = React.useMemo(\n () => ({\n onClick: handleMoveAllAction,\n onFocus: handleMoveAllBtnFocus,\n onKeyDown: handleMoveAllKeyDown,\n }),\n [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllKeyDown],\n );\n\n // this \"as DSButtonT.Props\" is a workaround for the fact that useGetGlobalAttributes is not able to understand overloaded types\n // intellisense will mostly lie because of this but we are using this for the spread operator and it will work for aria-* and data-* props\n const spreadableButtonProps = useGetGlobalAttributes(batchActionableButtonProps, buttonActions) as DSButtonT.Props;\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => panelMeta, [panelMeta]);\n\n return (\n <StyledMoveMultipleWrapper\n boxShadow=\"xs\"\n alignItems=\"center\"\n justifyContent=\"center\"\n cols={gridFullFraction}\n rows={gridFullFraction}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledButton\n aria-label=\"massive action button\"\n buttonType=\"icon\"\n onClick={handleMoveAllAction}\n onFocus={handleMoveAllBtnFocus}\n onKeyDown={handleMoveAllKeyDown}\n innerRef={innerRefHandlerMoveAll}\n {...spreadableButtonProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledButton>\n </StyledMoveMultipleWrapper>\n );\n});\n"],
5
- "mappings": "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",
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 { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonT } from '@elliemae/ds-button-v2';\nimport { ArrowShortRight, CloseMedium } from '@elliemae/ds-icons';\nimport { type DSShuttleV2T } from '../../../react-desc-prop-types.js';\nimport { useHandleMoveSelection } from '../../../config/itemMovementHelpers.js';\nimport { useInternalStore, usePropsStore } from '../../../config/useStore/index.js';\nimport { useFocusTracker } from '../../../config/useFocusTracker/index.js';\nimport { DSShuttleV2Name, DSShuttleV2Slots, REGIONS_FOCUSES } from '../../../constants/index.js';\nimport { StyledA11yNoVisible } from '../../../styles.js';\n\nconst StyledMoveMultipleWrapper = styled(Grid, { name: DSShuttleV2Name, slot: DSShuttleV2Slots.MOVE_MULTIPLE_WRAPPER })`\n position: absolute;\n background-color: neutral-000;\n top: 0px;\n right: 0px;\n transform: translateX(0);\n height: 100%;\n width: 5rem;\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: DSShuttleV2Name,\n slot: DSShuttleV2Slots.MOVE_MULTIPLE_BTN,\n})`\n width: 100%;\n height: 100%;\n`;\nconst StyledCloseMediumIcon = styled(CloseMedium, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_SOURCE_ICON,\n})`\n > svg {\n fill: brand-600;\n }\n`;\nconst StyledArrowShortRightIcon = styled(ArrowShortRight, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.ITEM_ACTION_BTN_TO_DESTINATION_ICON,\n})`\n > svg {\n fill: brand-600;\n }\n`;\nconst StyledMoveMultipleLiveRegion = styled(StyledA11yNoVisible, {\n name: DSShuttleV2Name,\n slot: DSShuttleV2Slots.MOVE_MULTIPLE_LIVE_REGION,\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, trackFocusRegionPanelFocusMoveAll, 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 // PUI-15537 \u2014 drives the focus-time live announcement (see the live-region note below).\n const [isMoveAllFocused, setIsMoveAllFocused] = React.useState(false);\n const handleMoveAllBtnFocus: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n trackFocusItemReset();\n trackFocusActionReset();\n trackFocusRegionPanelFocusMoveAll(isDestinationPanel);\n setIsMoveAllFocused(true);\n }, [isDestinationPanel, trackFocusActionReset, trackFocusItemReset, trackFocusRegionPanelFocusMoveAll]);\n const handleMoveAllBtnBlur: React.FocusEventHandler<HTMLButtonElement> = React.useCallback(() => {\n setIsMoveAllFocused(false);\n }, []);\n const setZustandRef = useInternalStore((state) => state.setZustandRef);\n\n const currRegion = isDestinationPanel\n ? REGIONS_FOCUSES.DESTINATION_PANEL_ITEM_MOVE_ALL\n : REGIONS_FOCUSES.SOURCE_PANEL_ITEM_MOVE_ALL;\n const innerRefHandlerMoveAll = React.useCallback(\n (node: HTMLButtonElement | null) => {\n setZustandRef([currRegion, '', ''], node);\n },\n [currRegion, setZustandRef],\n );\n\n const handleMoveAllKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n (e) => {\n const { key } = e;\n if (['ArrowLeft', 'ArrowRight'].includes(key)) {\n trackFocusItemReset();\n trackFocusActionReset();\n trackFocusRegionPanel(isDestinationPanel);\n }\n },\n [trackFocusItemReset, trackFocusActionReset, trackFocusRegionPanel, isDestinationPanel],\n );\n\n // PUI-15537 \u2014 Bulk Action Button (BAB) selection announcement.\n // Two complementary mechanisms, because an aria-label alone proved unreliable on focus:\n // 1. aria-label \u2014 gives the button a meaningful accessible name (replacing the old static,\n // meaningless \"massive action button\"). Correct for assistive tech that reads the name on\n // focus, and what consumers see when they inspect the button.\n // 2. Focus-time polite live region (StyledMoveMultipleLiveRegion below) \u2014 the BAB is focused via\n // the component's roving-tabindex system rather than a native Tab, and an aria-label on an\n // icon-only button (its only content is aria-hidden) is not announced reliably across screen\n // readers in that scenario. To guarantee the count is spoken when focus lands on the BAB, we\n // also push the same text into a polite live region while the button is focused. This is\n // announced as live content, independent of whether the AT re-reads the aria-label.\n // Both derive from the same selection-count selector the visible \"{n} selected\" header and the\n // panel-center live region already use, so the spoken count stays in sync with the UI. A\n // consumer-provided aria-label via getBatchActionableButtonProps still wins because\n // spreadableButtonProps is spread after the aria-label prop.\n const selectionLength = usePropsStore((state) =>\n isDestinationPanel ? state.destinationSelectionItemArray.length : state.sourceSelectionItemArray.length,\n );\n const moveAllAriaLabel = `Move ${selectionLength} selected item${selectionLength === 1 ? '' : 's'} to ${\n isDestinationPanel ? 'source' : 'destination'\n }`;\n\n const getBatchActionableButtonProps = usePropsStore((state) => state.getBatchActionableButtonProps);\n const batchActionableButtonProps = React.useMemo(\n () => (getBatchActionableButtonProps !== undefined ? getBatchActionableButtonProps(panelMeta) : {}),\n [getBatchActionableButtonProps, panelMeta],\n );\n const buttonActions = React.useMemo(\n () => ({\n onClick: handleMoveAllAction,\n onFocus: handleMoveAllBtnFocus,\n onBlur: handleMoveAllBtnBlur,\n onKeyDown: handleMoveAllKeyDown,\n }),\n [handleMoveAllAction, handleMoveAllBtnFocus, handleMoveAllBtnBlur, handleMoveAllKeyDown],\n );\n\n // this \"as DSButtonT.Props\" is a workaround for the fact that useGetGlobalAttributes is not able to understand overloaded types\n // intellisense will mostly lie because of this but we are using this for the spread operator and it will work for aria-* and data-* props\n const spreadableButtonProps = useGetGlobalAttributes(batchActionableButtonProps, buttonActions) as DSButtonT.Props;\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => panelMeta, [panelMeta]);\n\n return (\n <StyledMoveMultipleWrapper\n boxShadow=\"xs\"\n alignItems=\"center\"\n justifyContent=\"center\"\n cols={gridFullFraction}\n rows={gridFullFraction}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledButton\n aria-label={moveAllAriaLabel}\n buttonType=\"icon\"\n onClick={handleMoveAllAction}\n onFocus={handleMoveAllBtnFocus}\n onBlur={handleMoveAllBtnBlur}\n onKeyDown={handleMoveAllKeyDown}\n innerRef={innerRefHandlerMoveAll}\n {...spreadableButtonProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isDestinationPanel ? (\n <StyledCloseMediumIcon\n width=\"1.538rem\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ) : (\n <StyledArrowShortRightIcon\n width=\"1.538\"\n height=\"1.538rem\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledButton>\n {/* PUI-15537 \u2014 announced as polite live content when the BAB gains focus, so the count is\n spoken even when the aria-label is not re-read on this button. Empty while unfocused. */}\n <StyledMoveMultipleLiveRegion\n aria-live=\"polite\"\n aria-atomic=\"true\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isMoveAllFocused ? moveAllAriaLabel : ''}\n </StyledMoveMultipleLiveRegion>\n </StyledMoveMultipleWrapper>\n );\n});\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/types/constants/index.d.ts CHANGED
@@ -24,6 +24,7 @@ export declare const DSShuttleV2Slots: {
24
24
  readonly LOADING_LIST_WRAPPER: "loading-list-wrapper";
25
25
  readonly MOVE_MULTIPLE_WRAPPER: "move-multiple-wrapper";
26
26
  readonly MOVE_MULTIPLE_BTN: "move-multiple-btn";
27
+ readonly MOVE_MULTIPLE_LIVE_REGION: "move-multiple-live-region";
27
28
  readonly LIST_WRAPPER_MID: "list-wrapper-mid";
28
29
  readonly LIST_WRAPPER_MID_SCROLLER: "list-wrapper-mid-scroller";
29
30
  readonly LIST_WRAPPER_TOP: "list-wrapper-top";
@@ -63,6 +64,7 @@ export declare const DSShuttleV2DataTestIds: {
63
64
  readonly LOADING_LIST_WRAPPER: "ds-shuttlev2-loading-list-wrapper";
64
65
  readonly MOVE_MULTIPLE_WRAPPER: "ds-shuttlev2-move-multiple-wrapper";
65
66
  readonly MOVE_MULTIPLE_BTN: "ds-shuttlev2-move-multiple-btn";
67
+ readonly MOVE_MULTIPLE_LIVE_REGION: "ds-shuttlev2-move-multiple-live-region";
66
68
  readonly LIST_WRAPPER_MID: "ds-shuttlev2-list-wrapper-mid";
67
69
  readonly LIST_WRAPPER_MID_SCROLLER: "ds-shuttlev2-list-wrapper-mid-scroller";
68
70
  readonly LIST_WRAPPER_TOP: "ds-shuttlev2-list-wrapper-top";
package/dist/types/tests/DSShuttlev2.PUI-15537.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-shuttle-v2",
3
- "version": "3.70.0-next.22",
3
+ "version": "3.70.0-next.23",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Shuttle v2",
6
6
  "files": [
@@ -39,33 +39,33 @@
39
39
  "@xstyled/styled-components": "~3.8.1",
40
40
  "fast-deep-equal": "~3.1.3",
41
41
  "uid": "^2.0.2",
42
- "@elliemae/ds-button-v2": "3.70.0-next.22",
43
- "@elliemae/ds-form-checkbox": "3.70.0-next.22",
44
- "@elliemae/ds-drag-and-drop": "3.70.0-next.22",
45
- "@elliemae/ds-fast-list": "3.70.0-next.22",
46
- "@elliemae/ds-floating-context": "3.70.0-next.22",
47
- "@elliemae/ds-hooks-fontsize-detector": "3.70.0-next.22",
48
- "@elliemae/ds-form-input-text": "3.70.0-next.22",
49
- "@elliemae/ds-grid": "3.70.0-next.22",
50
- "@elliemae/ds-hooks-headless-tooltip": "3.70.0-next.22",
51
- "@elliemae/ds-props-helpers": "3.70.0-next.22",
52
- "@elliemae/ds-hooks-on-blur-out": "3.70.0-next.22",
53
- "@elliemae/ds-indeterminate-progress-indicator": "3.70.0-next.22",
54
- "@elliemae/ds-circular-progress-indicator": "3.70.0-next.22",
55
- "@elliemae/ds-icons": "3.70.0-next.22",
56
- "@elliemae/ds-system": "3.70.0-next.22",
57
- "@elliemae/ds-typography": "3.70.0-next.22",
58
- "@elliemae/ds-typescript-helpers": "3.70.0-next.22",
59
- "@elliemae/ds-zustand-helpers": "3.70.0-next.22"
42
+ "@elliemae/ds-button-v2": "3.70.0-next.23",
43
+ "@elliemae/ds-circular-progress-indicator": "3.70.0-next.23",
44
+ "@elliemae/ds-drag-and-drop": "3.70.0-next.23",
45
+ "@elliemae/ds-fast-list": "3.70.0-next.23",
46
+ "@elliemae/ds-floating-context": "3.70.0-next.23",
47
+ "@elliemae/ds-form-checkbox": "3.70.0-next.23",
48
+ "@elliemae/ds-grid": "3.70.0-next.23",
49
+ "@elliemae/ds-hooks-headless-tooltip": "3.70.0-next.23",
50
+ "@elliemae/ds-form-input-text": "3.70.0-next.23",
51
+ "@elliemae/ds-hooks-fontsize-detector": "3.70.0-next.23",
52
+ "@elliemae/ds-hooks-on-blur-out": "3.70.0-next.23",
53
+ "@elliemae/ds-indeterminate-progress-indicator": "3.70.0-next.23",
54
+ "@elliemae/ds-icons": "3.70.0-next.23",
55
+ "@elliemae/ds-props-helpers": "3.70.0-next.23",
56
+ "@elliemae/ds-typography": "3.70.0-next.23",
57
+ "@elliemae/ds-system": "3.70.0-next.23",
58
+ "@elliemae/ds-typescript-helpers": "3.70.0-next.23",
59
+ "@elliemae/ds-zustand-helpers": "3.70.0-next.23"
60
60
  },
61
61
  "devDependencies": {
62
62
  "jest": "^30.0.0",
63
63
  "lodash-es": "^4.17.21",
64
64
  "styled-components": "~5.3.9",
65
- "@elliemae/ds-breadcrumb": "3.70.0-next.22",
66
- "@elliemae/ds-monorepo-devops": "3.70.0-next.22",
67
- "@elliemae/ds-tree-model": "3.70.0-next.22",
68
- "@elliemae/ds-test-utils": "3.70.0-next.22"
65
+ "@elliemae/ds-breadcrumb": "3.70.0-next.23",
66
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.23",
67
+ "@elliemae/ds-test-utils": "3.70.0-next.23",
68
+ "@elliemae/ds-tree-model": "3.70.0-next.23"
69
69
  },
70
70
  "peerDependencies": {
71
71
  "lodash-es": "^4.17.21",