@splunk/react-ui 4.21.0 → 4.22.0

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 (92) hide show
  1. package/Accordion.js +425 -325
  2. package/Anchor.js +147 -117
  3. package/Animation.js +142 -94
  4. package/AnimationToggle.js +197 -193
  5. package/Box.js +145 -118
  6. package/Breadcrumbs.js +288 -206
  7. package/Button.js +488 -465
  8. package/ButtonGroup.js +160 -128
  9. package/ButtonSimple.js +543 -462
  10. package/CHANGELOG.md +24 -3
  11. package/Calendar.js +1111 -1001
  12. package/Card.js +771 -598
  13. package/CardLayout.js +205 -147
  14. package/Chip.js +509 -488
  15. package/Clickable.js +414 -352
  16. package/CloseButton.js +165 -142
  17. package/Code.js +1807 -2084
  18. package/CollapsiblePanel.js +586 -519
  19. package/Color.js +1068 -1068
  20. package/ColumnLayout.js +402 -363
  21. package/ComboBox.js +903 -794
  22. package/Concertina.js +997 -802
  23. package/ControlGroup.js +687 -594
  24. package/Date.js +567 -547
  25. package/DefinitionList.js +308 -234
  26. package/Divider.js +149 -118
  27. package/Dropdown.js +459 -416
  28. package/DualListbox.js +1479 -1541
  29. package/EventListener.js +94 -97
  30. package/File.js +1051 -969
  31. package/FormRows.js +883 -696
  32. package/Heading.js +216 -193
  33. package/Image.js +446 -402
  34. package/JSONTree.js +690 -551
  35. package/Layer.js +437 -410
  36. package/Link.js +336 -255
  37. package/List.js +213 -161
  38. package/Markdown.js +509 -487
  39. package/Menu.js +1104 -1056
  40. package/Message.js +475 -441
  41. package/MessageBar.js +387 -373
  42. package/Modal.js +810 -634
  43. package/ModalLayer.js +326 -243
  44. package/Monogram.js +308 -276
  45. package/Multiselect.js +3564 -3364
  46. package/Number.js +729 -687
  47. package/Paginator.js +510 -449
  48. package/Paragraph.js +145 -112
  49. package/Popover.js +1459 -1432
  50. package/Progress.js +301 -246
  51. package/RadioBar.js +634 -527
  52. package/RadioList.js +483 -444
  53. package/Resize.js +530 -489
  54. package/ResultsMenu.js +479 -455
  55. package/ScreenReaderContent.js +142 -111
  56. package/Scroll.js +595 -456
  57. package/ScrollContainerContext.js +197 -206
  58. package/Search.js +756 -650
  59. package/Select.js +2446 -2345
  60. package/SidePanel.js +390 -284
  61. package/Slider.js +680 -676
  62. package/SlidingPanels.js +639 -503
  63. package/SplitButton.js +464 -367
  64. package/StaticContent.js +161 -133
  65. package/StepBar.js +386 -358
  66. package/Switch.js +710 -640
  67. package/TabBar.js +741 -680
  68. package/TabLayout.js +406 -322
  69. package/Table.js +4974 -4616
  70. package/Text.js +1170 -1138
  71. package/TextArea.js +1102 -1090
  72. package/Tooltip.js +624 -581
  73. package/TransitionOpen.js +489 -422
  74. package/Typography.js +176 -153
  75. package/WaitSpinner.js +230 -206
  76. package/package.json +7 -7
  77. package/types/src/Color/Color.d.ts +0 -1
  78. package/types/src/JSONTree/JSONTreeContext.d.ts +7 -0
  79. package/types/src/JSONTree/TreeNode.d.ts +5 -0
  80. package/types/src/RadioBar/RadioBar.d.ts +1 -0
  81. package/types/src/ResultsMenu/ResultsMenu.d.ts +0 -2
  82. package/types/src/Select/docs/examples/Icons.d.ts +1 -9
  83. package/types/src/Slider/Slider.d.ts +1 -0
  84. package/types/src/TabBar/Tab.d.ts +10 -1
  85. package/types/src/TabBar/TabBar.d.ts +4 -2
  86. package/types/src/Table/Head.d.ts +7 -3
  87. package/types/src/Table/Table.d.ts +3 -2
  88. package/types/src/Table/TableContext.d.ts +2 -0
  89. package/useForceUpdate.js +112 -82
  90. package/useKeyPress.js +74 -71
  91. package/usePrevious.js +65 -65
  92. package/useRovingFocus.js +122 -138
package/DualListbox.js CHANGED
@@ -1,1590 +1,1528 @@
1
- /******/ (() => { // webpackBootstrap
2
- /******/ "use strict";
3
- /******/ // The require scope
4
- /******/ var __webpack_require__ = {};
5
- /******/
6
- /************************************************************************/
7
- /******/ /* webpack/runtime/compat get default export */
8
- /******/ (() => {
9
- /******/ // getDefaultExport function for compatibility with non-harmony modules
10
- /******/ __webpack_require__.n = (module) => {
11
- /******/ var getter = module && module.__esModule ?
12
- /******/ () => (module['default']) :
13
- /******/ () => (module);
14
- /******/ __webpack_require__.d(getter, { a: getter });
15
- /******/ return getter;
16
- /******/ };
17
- /******/ })();
18
- /******/
19
- /******/ /* webpack/runtime/define property getters */
20
- /******/ (() => {
21
- /******/ // define getter functions for harmony exports
22
- /******/ __webpack_require__.d = (exports, definition) => {
23
- /******/ for(var key in definition) {
24
- /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
25
- /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
26
- /******/ }
27
- /******/ }
28
- /******/ };
29
- /******/ })();
30
- /******/
31
- /******/ /* webpack/runtime/hasOwnProperty shorthand */
32
- /******/ (() => {
33
- /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
34
- /******/ })();
35
- /******/
36
- /******/ /* webpack/runtime/make namespace object */
37
- /******/ (() => {
38
- /******/ // define __esModule on exports
39
- /******/ __webpack_require__.r = (exports) => {
40
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
41
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
42
- /******/ }
43
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
44
- /******/ };
45
- /******/ })();
46
- /******/
47
- /************************************************************************/
48
- var __webpack_exports__ = {};
49
- // ESM COMPAT FLAG
50
- __webpack_require__.r(__webpack_exports__);
51
-
52
- // EXPORTS
53
- __webpack_require__.d(__webpack_exports__, {
54
- Option: () => (/* reexport */ DualListbox_Option),
55
- "default": () => (/* reexport */ DualListbox_DualListbox)
56
- });
57
-
58
- ;// CONCATENATED MODULE: external "react"
59
- const external_react_namespaceObject = require("react");
60
- var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
61
- ;// CONCATENATED MODULE: external "prop-types"
62
- const external_prop_types_namespaceObject = require("prop-types");
63
- var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_namespaceObject);
64
- ;// CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
65
- const i18n_namespaceObject = require("@splunk/ui-utils/i18n");
66
- ;// CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
67
- const keyboard_namespaceObject = require("@splunk/ui-utils/keyboard");
68
- ;// CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronLeft"
69
- const ChevronLeft_namespaceObject = require("@splunk/react-icons/enterprise/ChevronLeft");
70
- var ChevronLeft_default = /*#__PURE__*/__webpack_require__.n(ChevronLeft_namespaceObject);
71
- ;// CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
72
- const ChevronRight_namespaceObject = require("@splunk/react-icons/enterprise/ChevronRight");
73
- var ChevronRight_default = /*#__PURE__*/__webpack_require__.n(ChevronRight_namespaceObject);
74
- ;// CONCATENATED MODULE: external "@splunk/ui-utils/format"
75
- const format_namespaceObject = require("@splunk/ui-utils/format");
76
- ;// CONCATENATED MODULE: external "@splunk/react-ui/useForceUpdate"
77
- const useForceUpdate_namespaceObject = require("@splunk/react-ui/useForceUpdate");
78
- var useForceUpdate_default = /*#__PURE__*/__webpack_require__.n(useForceUpdate_namespaceObject);
79
- ;// CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
80
- const ScreenReaderContent_namespaceObject = require("@splunk/react-ui/ScreenReaderContent");
81
- var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_namespaceObject);
82
- ;// CONCATENATED MODULE: ./src/DualListbox/DualListboxContext.tsx
83
-
84
-
85
- /**
1
+ /******/ (() => {
2
+ // webpackBootstrap
3
+ /******/ "use strict";
4
+ /******/ // The require scope
5
+ /******/ var e = {};
6
+ /******/
7
+ /************************************************************************/
8
+ /******/ /* webpack/runtime/compat get default export */
9
+ /******/ (() => {
10
+ /******/ // getDefaultExport function for compatibility with non-harmony modules
11
+ /******/ e.n = r => {
12
+ /******/ var t = r && r.__esModule ?
13
+ /******/ () => r["default"]
14
+ /******/ : () => r
15
+ /******/;
16
+ e.d(t, {
17
+ a: t
18
+ });
19
+ /******/ return t;
20
+ /******/ };
21
+ /******/ })();
22
+ /******/
23
+ /******/ /* webpack/runtime/define property getters */
24
+ /******/ (() => {
25
+ /******/ // define getter functions for harmony exports
26
+ /******/ e.d = (r, t) => {
27
+ /******/ for (var n in t) {
28
+ /******/ if (e.o(t, n) && !e.o(r, n)) {
29
+ /******/ Object.defineProperty(r, n, {
30
+ enumerable: true,
31
+ get: t[n]
32
+ });
33
+ /******/ }
34
+ /******/ }
35
+ /******/ };
36
+ /******/ })();
37
+ /******/
38
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
39
+ /******/ (() => {
40
+ /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
41
+ /******/;
42
+ })();
43
+ /******/
44
+ /******/ /* webpack/runtime/make namespace object */
45
+ /******/ (() => {
46
+ /******/ // define __esModule on exports
47
+ /******/ e.r = e => {
48
+ /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
49
+ /******/ Object.defineProperty(e, Symbol.toStringTag, {
50
+ value: "Module"
51
+ });
52
+ /******/ }
53
+ /******/ Object.defineProperty(e, "__esModule", {
54
+ value: true
55
+ });
56
+ /******/ };
57
+ /******/ })();
58
+ /******/
59
+ /************************************************************************/ var r = {};
60
+ // ESM COMPAT FLAG
61
+ e.r(r);
62
+ // EXPORTS
63
+ e.d(r, {
64
+ Option: () => /* reexport */ ne,
65
+ default: () => /* reexport */ De
66
+ });
67
+ // CONCATENATED MODULE: external "react"
68
+ const t = require("react");
69
+ var n = e.n(t);
70
+ // CONCATENATED MODULE: external "prop-types"
71
+ const a = require("prop-types");
72
+ var i = e.n(a);
73
+ // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
74
+ const l = require("@splunk/ui-utils/i18n");
75
+ // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
76
+ const o = require("@splunk/ui-utils/keyboard");
77
+ // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronLeft"
78
+ const u = require("@splunk/react-icons/enterprise/ChevronLeft");
79
+ var c = e.n(u);
80
+ // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
81
+ const s = require("@splunk/react-icons/enterprise/ChevronRight");
82
+ var v = e.n(s);
83
+ // CONCATENATED MODULE: external "@splunk/ui-utils/format"
84
+ const d = require("@splunk/ui-utils/format");
85
+ // CONCATENATED MODULE: external "@splunk/react-ui/useForceUpdate"
86
+ const f = require("@splunk/react-ui/useForceUpdate");
87
+ var p = e.n(f);
88
+ // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
89
+ const b = require("@splunk/react-ui/ScreenReaderContent");
90
+ var m = e.n(b);
91
+ // CONCATENATED MODULE: ./src/DualListbox/DualListboxContext.tsx
92
+ /**
86
93
  * A React context used to inform subcomponets of DualListbox of parent component values.
87
94
  * The context interface is `DualListboxContextValue`.
88
95
  * Defaults to `'{}'`.
89
96
  * @public
90
97
  */
91
- var DualListboxContext = /*#__PURE__*/external_react_default().createContext({});
92
- /* harmony default export */ const DualListbox_DualListboxContext = (DualListboxContext);
93
- ;// CONCATENATED MODULE: ./src/DualListbox/ScreenReaderWrapper.tsx
94
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
95
-
96
-
97
-
98
-
99
-
100
-
101
- function ScreenReaderWrapper(_ref) {
102
- var otherProps = _extends({}, _ref);
103
-
104
- var forceUpdate = useForceUpdate_default()();
105
- var contextValue = (0,external_react_namespaceObject.useContext)(DualListbox_DualListboxContext);
106
- var getScreenReaderMessage = contextValue.getScreenReaderMessage,
107
- updateScreenReaderRefreshHook = contextValue.updateScreenReaderRefreshHook;
108
- (0,external_react_namespaceObject.useEffect)(function () {
109
- updateScreenReaderRefreshHook === null || updateScreenReaderRefreshHook === void 0 ? void 0 : updateScreenReaderRefreshHook(forceUpdate);
110
- return function () {
111
- return updateScreenReaderRefreshHook === null || updateScreenReaderRefreshHook === void 0 ? void 0 : updateScreenReaderRefreshHook();
112
- };
113
- }, [updateScreenReaderRefreshHook, forceUpdate]);
114
-
115
- if (!getScreenReaderMessage) {
116
- return null;
117
- }
118
-
119
- return /*#__PURE__*/external_react_default().createElement((ScreenReaderContent_default()), _extends({
120
- "aria-live": "assertive"
121
- }, otherProps), getScreenReaderMessage() || '');
122
- }
123
-
124
- /* harmony default export */ const DualListbox_ScreenReaderWrapper = (ScreenReaderWrapper);
125
- ;// CONCATENATED MODULE: ./src/DualListbox/listboxUtils.ts
126
- var arrayWithToggledValue = function arrayWithToggledValue(valueArr, toggleValue) {
127
- var newArray = valueArr.filter(function (value) {
128
- return value !== toggleValue;
129
- });
130
-
131
- if (valueArr.length === newArray.length) {
132
- newArray.push(toggleValue);
133
- }
134
-
135
- return newArray;
136
- };
137
-
138
- var arrayWithRemovedValues = function arrayWithRemovedValues(valueArr, removedValues) {
139
- var removedSet = new Set(removedValues);
140
- return valueArr.filter(function (value) {
141
- return !removedSet.has(value);
142
- });
143
- };
144
-
145
- var findNextValue = function findNextValue(index, originalValues, removedValues) {
146
- if (index < 0) {
147
- return undefined;
148
- }
149
-
150
- var currentValue = originalValues[index];
151
- var removedSet = new Set(removedValues);
152
-
153
- if (!removedSet.has(currentValue)) {
154
- return currentValue;
155
- }
156
-
157
- for (var i = index + 1; i < originalValues.length; i += 1) {
158
- var tempValue = originalValues[i];
159
-
160
- if (!removedSet.has(tempValue)) {
161
- return tempValue;
162
- }
163
- }
164
-
165
- for (var _i = index - 1; _i > 0; _i -= 1) {
166
- var _tempValue = originalValues[_i];
167
-
168
- if (!removedSet.has(_tempValue)) {
169
- return _tempValue;
98
+ var h = n().createContext({});
99
+ /* harmony default export */ const g = h;
100
+ // CONCATENATED MODULE: ./src/DualListbox/ScreenReaderWrapper.tsx
101
+ function y() {
102
+ y = Object.assign || function(e) {
103
+ for (var r = 1; r < arguments.length; r++) {
104
+ var t = arguments[r];
105
+ for (var n in t) {
106
+ if (Object.prototype.hasOwnProperty.call(t, n)) {
107
+ e[n] = t[n];
108
+ }
109
+ }
110
+ }
111
+ return e;
112
+ };
113
+ return y.apply(this, arguments);
170
114
  }
171
- }
172
-
173
- return undefined;
174
- };
175
-
176
-
177
- ;// CONCATENATED MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
178
- // A utility that attempts to move an element into view by scrolling it's derived parent.
179
- var scrollIntoViewIfNeeded = function scrollIntoViewIfNeeded(el) {
180
- if (!el) {
181
- return;
182
- }
183
-
184
- var parentEl = el.offsetParent;
185
-
186
- if (!parentEl) {
187
- return;
188
- } // Below the bottom of the container.
189
-
190
-
191
- if (parentEl.scrollTop + parentEl.clientHeight < el.offsetTop + el.clientHeight) {
192
- parentEl.scrollTop = el.offsetTop + el.clientHeight - parentEl.clientHeight; // Above the top of the container.
193
- } else if (parentEl.scrollTop > el.offsetTop) {
194
- parentEl.scrollTop = el.offsetTop;
195
- }
196
- };
197
-
198
-
199
- ;// CONCATENATED MODULE: ./src/utils/fuzzyMatch.ts
200
- // A utility for matching keyboard characters to list values
201
- var charFromMatchOption = function charFromMatchOption(option, charIndex) {
202
- return option ? option.label.charAt(charIndex).toLowerCase() : '';
203
- };
204
-
205
- var fuzzyMatch = function fuzzyMatch(options, matchChar) {
206
- if (!options.length) {
207
- return options;
208
- }
209
-
210
- var defaultMatch = null;
211
- var hasMatch = false;
212
- var matches = options.filter(function (option) {
213
- var characterValue = charFromMatchOption(option, matchChar.index);
214
-
215
- if (characterValue === matchChar.value) {
216
- hasMatch = true;
217
- return true;
218
- } // If we haven't found a match yet, keep track of the next closest match.
219
- // Secondary matching looks for the closest character of a higher value, and failing that, closest of a lower value.
220
-
221
-
222
- if (!hasMatch) {
223
- var defaultValue = charFromMatchOption(defaultMatch, matchChar.index);
224
-
225
- if (!defaultValue) {
226
- defaultMatch = option;
227
- } else if (characterValue > matchChar.value) {
228
- if (defaultValue < matchChar.value) {
229
- defaultMatch = option;
230
- } else if (defaultValue > characterValue) {
231
- defaultMatch = option;
115
+ function k(e) {
116
+ var r = y({}, e);
117
+ var a = p()();
118
+ var i = (0, t.useContext)(g);
119
+ var l = i.getScreenReaderMessage, o = i.updateScreenReaderRefreshHook;
120
+ (0, t.useEffect)((function() {
121
+ o === null || o === void 0 ? void 0 : o(a);
122
+ return function() {
123
+ return o === null || o === void 0 ? void 0 : o();
124
+ };
125
+ }), [ o, a ]);
126
+ if (!l) {
127
+ return null;
232
128
  }
233
- } else if (characterValue > defaultValue) {
234
- defaultMatch = option;
235
- }
129
+
130
+ return n().createElement(m(), y({
131
+ "aria-live": "assertive"
132
+ }, r), l() || "");
236
133
  }
237
-
238
- return false;
239
- });
240
- return matches.length === 0 && defaultMatch ? [defaultMatch] : matches;
241
- };
242
-
243
-
244
- ;// CONCATENATED MODULE: ./src/DualListbox/ToolbarContext.tsx
245
-
246
-
247
- /**
134
+ /* harmony default export */ const C = k;
135
+ // CONCATENATED MODULE: ./src/DualListbox/listboxUtils.ts
136
+ var x = function e(r, t) {
137
+ var n = r.filter((function(e) {
138
+ return e !== t;
139
+ }));
140
+ if (r.length === n.length) {
141
+ n.push(t);
142
+ }
143
+ return n;
144
+ };
145
+ var S = function e(r, t) {
146
+ var n = new Set(t);
147
+ return r.filter((function(e) {
148
+ return !n.has(e);
149
+ }));
150
+ };
151
+ var w = function e(r, t, n) {
152
+ if (r < 0) {
153
+ return undefined;
154
+ }
155
+ var a = t[r];
156
+ var i = new Set(n);
157
+ if (!i.has(a)) {
158
+ return a;
159
+ }
160
+ for (var l = r + 1; l < t.length; l += 1) {
161
+ var o = t[l];
162
+ if (!i.has(o)) {
163
+ return o;
164
+ }
165
+ }
166
+ for (var u = r - 1; u > 0; u -= 1) {
167
+ var c = t[u];
168
+ if (!i.has(c)) {
169
+ return c;
170
+ }
171
+ }
172
+ return undefined;
173
+ };
174
+ // CONCATENATED MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
175
+ // A utility that attempts to move an element into view by scrolling it's derived parent.
176
+ var O = function e(r) {
177
+ if (!r) {
178
+ return;
179
+ }
180
+ var t = r.offsetParent;
181
+ if (!t) {
182
+ return;
183
+ }
184
+ // Below the bottom of the container.
185
+ if (t.scrollTop + t.clientHeight < r.offsetTop + r.clientHeight) {
186
+ t.scrollTop = r.offsetTop + r.clientHeight - t.clientHeight;
187
+ // Above the top of the container.
188
+ } else if (t.scrollTop > r.offsetTop) {
189
+ t.scrollTop = r.offsetTop;
190
+ }
191
+ };
192
+ // CONCATENATED MODULE: ./src/utils/fuzzyMatch.ts
193
+ // A utility for matching keyboard characters to list values
194
+ var R = function e(r, t) {
195
+ return r ? r.label.charAt(t).toLowerCase() : "";
196
+ };
197
+ var E = function e(r, t) {
198
+ if (!r.length) {
199
+ return r;
200
+ }
201
+ var n = null;
202
+ var a = false;
203
+ var i = r.filter((function(e) {
204
+ var r = R(e, t.index);
205
+ if (r === t.value) {
206
+ a = true;
207
+ return true;
208
+ }
209
+ // If we haven't found a match yet, keep track of the next closest match.
210
+ // Secondary matching looks for the closest character of a higher value, and failing that, closest of a lower value.
211
+ if (!a) {
212
+ var i = R(n, t.index);
213
+ if (!i) {
214
+ n = e;
215
+ } else if (r > t.value) {
216
+ if (i < t.value) {
217
+ n = e;
218
+ } else if (i > r) {
219
+ n = e;
220
+ }
221
+ } else if (r > i) {
222
+ n = e;
223
+ }
224
+ }
225
+ return false;
226
+ }));
227
+ return i.length === 0 && n ? [ n ] : i;
228
+ };
229
+ // CONCATENATED MODULE: ./src/DualListbox/ToolbarContext.tsx
230
+ /**
248
231
  * A React context used to inform subcomponets of Toolbar of parent component values.
249
232
  * The context interface is `ToolbarContextValue`.
250
233
  * Defaults to `'{}'`.
251
234
  * @public
252
235
  */
253
- var ToolbarContext = /*#__PURE__*/external_react_default().createContext({});
254
- /* harmony default export */ const DualListbox_ToolbarContext = (ToolbarContext);
255
- ;// CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
256
- const Tooltip_namespaceObject = require("@splunk/react-ui/Tooltip");
257
- var Tooltip_default = /*#__PURE__*/__webpack_require__.n(Tooltip_namespaceObject);
258
- ;// CONCATENATED MODULE: external "styled-components"
259
- const external_styled_components_namespaceObject = require("styled-components");
260
- var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_namespaceObject);
261
- ;// CONCATENATED MODULE: external "@splunk/themes"
262
- const themes_namespaceObject = require("@splunk/themes");
263
- ;// CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
264
- const Clickable_namespaceObject = require("@splunk/react-ui/Clickable");
265
- var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_namespaceObject);
266
- ;// CONCATENATED MODULE: ./src/DualListbox/ToolbarButtonStyles.ts
267
-
268
-
269
-
270
- var StyledClickable = external_styled_components_default()((Clickable_default())).withConfig({
271
- displayName: "ToolbarButtonStyles__StyledClickable",
272
- componentId: "k7zksz-0"
273
- })(["", " border:", ";border-radius:", ";box-sizing:border-box;cursor:pointer;flex-grow:1;font-weight:", ";line-height:", ";min-height:", ";min-width:", ";max-width:100%;padding:", ";position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;width:", ";&:active{transition:none;}&:focus{box-shadow:", ";}&:focus,&:hover{z-index:3;}", ";"], themes_namespaceObject.mixins.reset('block'), (0,themes_namespaceObject.pick)({
274
- enterprise: '1px solid transparent'
275
- }), themes_namespaceObject.variables.borderRadius, (0,themes_namespaceObject.pick)({
276
- enterprise: themes_namespaceObject.variables.fontWeightSemiBold,
277
- prisma: themes_namespaceObject.variables.fontWeightSemiBold
278
- }), themes_namespaceObject.variables.lineHeight, themes_namespaceObject.variables.inputHeight, themes_namespaceObject.variables.inputHeight, (0,themes_namespaceObject.pick)({
279
- enterprise: {
280
- comfortable: '0 5px',
281
- compact: '0 2px'
282
- },
283
- prisma: {
284
- comfortable: (0,external_styled_components_namespaceObject.css)(["0px calc(", " / 2 - 1px)"], themes_namespaceObject.variables.inputHeight),
285
- compact: (0,external_styled_components_namespaceObject.css)(["0px calc(", " / 2 - 1px)"], themes_namespaceObject.variables.inputHeight)
286
- }
287
- }), themes_namespaceObject.variables.inputHeight, themes_namespaceObject.variables.focusShadow, (0,themes_namespaceObject.pickVariant)('$disabled', {
288
- "false": (0,themes_namespaceObject.pick)({
289
- enterprise: (0,external_styled_components_namespaceObject.css)(["color:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";transition:none;}&:focus{color:", ";}"], (0,themes_namespaceObject.pick)({
290
- light: themes_namespaceObject.variables.gray45,
291
- dark: themes_namespaceObject.variables.white
292
- }), themes_namespaceObject.variables.backgroundColorHover, (0,themes_namespaceObject.pick)({
293
- light: themes_namespaceObject.variables.gray60,
294
- dark: themes_namespaceObject.variables.borderColor
295
- }), (0,themes_namespaceObject.pick)({
296
- light: themes_namespaceObject.variables.linkColor,
297
- dark: themes_namespaceObject.variables.white
298
- }), (0,themes_namespaceObject.pick)({
299
- light: themes_namespaceObject.variables.gray92,
300
- dark: themes_namespaceObject.variables.gray22
301
- }), (0,themes_namespaceObject.pick)({
302
- light: themes_namespaceObject.variables.linkColor,
303
- dark: themes_namespaceObject.variables.white
304
- })),
305
- prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";box-shadow:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";}}"], themes_namespaceObject.variables.contentColorActive, themes_namespaceObject.variables.interactiveColorOverlayHover, themes_namespaceObject.variables.interactiveColorBorderHover, themes_namespaceObject.variables.hoverShadow, themes_namespaceObject.variables.interactiveColorOverlayActive, themes_namespaceObject.variables.interactiveColorOverlayActive)
306
- }),
307
- "true": (0,external_styled_components_namespaceObject.css)(["border-color:", ";color:", ";cursor:not-allowed;"], (0,themes_namespaceObject.pick)({
308
- prisma: themes_namespaceObject.variables.interactiveColorBorderDisabled
309
- }), (0,themes_namespaceObject.pick)({
310
- enterprise: themes_namespaceObject.variables.textDisabledColor,
311
- prisma: themes_namespaceObject.variables.contentColorDisabled
312
- }))
313
- }));
314
- var StyledIcon = external_styled_components_default().span.withConfig({
315
- displayName: "ToolbarButtonStyles__StyledIcon",
316
- componentId: "k7zksz-1"
317
- })(["align-items:center;display:flex;flex-direction:row;flex-shrink:0;font-size:", ";justify-content:center;max-width:100%;"], (0,themes_namespaceObject.pick)({
318
- enterprise: 'inherit',
319
- prisma: {
320
- comfortable: '21px',
321
- compact: '16px'
322
- }
323
- }));
324
-
325
- ;// CONCATENATED MODULE: ./src/DualListbox/ToolbarButton.tsx
326
- function ToolbarButton_extends() { ToolbarButton_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return ToolbarButton_extends.apply(this, arguments); }
327
-
328
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
329
-
330
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
331
-
332
-
333
-
334
-
335
-
336
-
337
-
338
- var propTypes = {
339
- icon: (external_prop_types_default()).node.isRequired,
340
- name: (external_prop_types_default()).string.isRequired,
341
- tooltipLabel: (external_prop_types_default()).string.isRequired,
342
- tooltipPlacement: external_prop_types_default().oneOf(['above', 'below', 'left', 'right'])
343
- };
344
-
345
- function ToolbarButton(_ref) {
346
- var ariaLabel = _ref.ariaLabel,
347
- ariaKeyShortcuts = _ref.ariaKeyShortcuts,
348
- icon = _ref.icon,
349
- name = _ref.name,
350
- tooltipLabel = _ref.tooltipLabel,
351
- tooltipPlacement = _ref.tooltipPlacement,
352
- otherProps = _objectWithoutProperties(_ref, ["ariaLabel", "ariaKeyShortcuts", "icon", "name", "tooltipLabel", "tooltipPlacement"]);
353
-
354
- var contextValue = (0,external_react_namespaceObject.useContext)(DualListbox_ToolbarContext);
355
- var forceUpdate = useForceUpdate_default()();
356
- var getButtonState = contextValue.getButtonState,
357
- onButtonClick = contextValue.onButtonClick,
358
- updateButtonRefreshHookByName = contextValue.updateButtonRefreshHookByName;
359
- (0,external_react_namespaceObject.useEffect)(function () {
360
- updateButtonRefreshHookByName === null || updateButtonRefreshHookByName === void 0 ? void 0 : updateButtonRefreshHookByName(name, forceUpdate);
361
- return function () {
362
- return updateButtonRefreshHookByName === null || updateButtonRefreshHookByName === void 0 ? void 0 : updateButtonRefreshHookByName(name);
236
+ var I = n().createContext({});
237
+ /* harmony default export */ const L = I;
238
+ // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
239
+ const q = require("@splunk/react-ui/Tooltip");
240
+ var j = e.n(q);
241
+ // CONCATENATED MODULE: external "styled-components"
242
+ const _ = require("styled-components");
243
+ var D = e.n(_);
244
+ // CONCATENATED MODULE: external "@splunk/themes"
245
+ const N = require("@splunk/themes");
246
+ // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
247
+ const V = require("@splunk/react-ui/Clickable");
248
+ var P = e.n(V);
249
+ // CONCATENATED MODULE: ./src/DualListbox/ToolbarButtonStyles.ts
250
+ var H = D()(P()).withConfig({
251
+ displayName: "ToolbarButtonStyles__StyledClickable",
252
+ componentId: "k7zksz-0"
253
+ })([ "", " border:", ";border-radius:", ";box-sizing:border-box;cursor:pointer;flex-grow:1;font-weight:", ";line-height:", ";min-height:", ";min-width:", ";max-width:100%;padding:", ";position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;width:", ";&:active{transition:none;}&:focus{box-shadow:", ";}&:focus,&:hover{z-index:3;}", ";" ], N.mixins.reset("block"), (0,
254
+ N.pick)({
255
+ enterprise: "1px solid transparent"
256
+ }), N.variables.borderRadius, (0, N.pick)({
257
+ enterprise: N.variables.fontWeightSemiBold,
258
+ prisma: N.variables.fontWeightSemiBold
259
+ }), N.variables.lineHeight, N.variables.inputHeight, N.variables.inputHeight, (0,
260
+ N.pick)({
261
+ enterprise: {
262
+ comfortable: "0 5px",
263
+ compact: "0 2px"
264
+ },
265
+ prisma: {
266
+ comfortable: (0, _.css)([ "0px calc(", " / 2 - 1px)" ], N.variables.inputHeight),
267
+ compact: (0, _.css)([ "0px calc(", " / 2 - 1px)" ], N.variables.inputHeight)
268
+ }
269
+ }), N.variables.inputHeight, N.variables.focusShadow, (0, N.pickVariant)("$disabled", {
270
+ false: (0, N.pick)({
271
+ enterprise: (0, _.css)([ "color:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";transition:none;}&:focus{color:", ";}" ], (0,
272
+ N.pick)({
273
+ light: N.variables.gray45,
274
+ dark: N.variables.white
275
+ }), N.variables.backgroundColorHover, (0, N.pick)({
276
+ light: N.variables.gray60,
277
+ dark: N.variables.borderColor
278
+ }), (0, N.pick)({
279
+ light: N.variables.linkColor,
280
+ dark: N.variables.white
281
+ }), (0, N.pick)({
282
+ light: N.variables.gray92,
283
+ dark: N.variables.gray22
284
+ }), (0, N.pick)({
285
+ light: N.variables.linkColor,
286
+ dark: N.variables.white
287
+ })),
288
+ prisma: (0, _.css)([ "color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";box-shadow:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";}}" ], N.variables.contentColorActive, N.variables.interactiveColorOverlayHover, N.variables.interactiveColorBorderHover, N.variables.hoverShadow, N.variables.interactiveColorOverlayActive, N.variables.interactiveColorOverlayActive)
289
+ }),
290
+ true: (0, _.css)([ "border-color:", ";color:", ";cursor:not-allowed;" ], (0, N.pick)({
291
+ prisma: N.variables.interactiveColorBorderDisabled
292
+ }), (0, N.pick)({
293
+ enterprise: N.variables.textDisabledColor,
294
+ prisma: N.variables.contentColorDisabled
295
+ }))
296
+ }));
297
+ var T = D().span.withConfig({
298
+ displayName: "ToolbarButtonStyles__StyledIcon",
299
+ componentId: "k7zksz-1"
300
+ })([ "align-items:center;display:flex;flex-direction:row;flex-shrink:0;font-size:", ";justify-content:center;max-width:100%;" ], (0,
301
+ N.pick)({
302
+ enterprise: "inherit",
303
+ prisma: {
304
+ comfortable: "21px",
305
+ compact: "16px"
306
+ }
307
+ }));
308
+ // CONCATENATED MODULE: ./src/DualListbox/ToolbarButton.tsx
309
+ function B() {
310
+ B = Object.assign || function(e) {
311
+ for (var r = 1; r < arguments.length; r++) {
312
+ var t = arguments[r];
313
+ for (var n in t) {
314
+ if (Object.prototype.hasOwnProperty.call(t, n)) {
315
+ e[n] = t[n];
316
+ }
317
+ }
318
+ }
319
+ return e;
320
+ };
321
+ return B.apply(this, arguments);
322
+ }
323
+ function M(e, r) {
324
+ if (e == null) return {};
325
+ var t = A(e, r);
326
+ var n, a;
327
+ if (Object.getOwnPropertySymbols) {
328
+ var i = Object.getOwnPropertySymbols(e);
329
+ for (a = 0; a < i.length; a++) {
330
+ n = i[a];
331
+ if (r.indexOf(n) >= 0) continue;
332
+ if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
333
+ t[n] = e[n];
334
+ }
335
+ }
336
+ return t;
337
+ }
338
+ function A(e, r) {
339
+ if (e == null) return {};
340
+ var t = {};
341
+ var n = Object.keys(e);
342
+ var a, i;
343
+ for (i = 0; i < n.length; i++) {
344
+ a = n[i];
345
+ if (r.indexOf(a) >= 0) continue;
346
+ t[a] = e[a];
347
+ }
348
+ return t;
349
+ }
350
+ var K = {
351
+ icon: i().node.isRequired,
352
+ name: i().string.isRequired,
353
+ tooltipLabel: i().string.isRequired,
354
+ tooltipPlacement: i().oneOf([ "above", "below", "left", "right" ])
363
355
  };
364
- }, [name, updateButtonRefreshHookByName, forceUpdate]);
365
- var handleClick = (0,external_react_namespaceObject.useCallback)(function (event) {
366
- onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(event, {
367
- name: name
368
- });
369
- }, [onButtonClick, name]);
370
-
371
- if (!getButtonState) {
372
- return null;
373
- }
374
-
375
- var _getButtonState = getButtonState(name),
376
- disabled = _getButtonState.disabled;
377
-
378
- return /*#__PURE__*/external_react_default().createElement((Tooltip_default()), {
379
- defaultPlacement: tooltipPlacement,
380
- content: /*#__PURE__*/external_react_default().createElement("span", {
381
- "aria-hidden": true
382
- }, tooltipLabel)
383
- }, /*#__PURE__*/external_react_default().createElement(StyledClickable, ToolbarButton_extends({
384
- "aria-label": ariaLabel,
385
- "aria-keyshortcuts": ariaKeyShortcuts,
386
- "aria-disabled": disabled || undefined,
387
- "data-test": "toolbar-button",
388
- $disabled: disabled,
389
- onClick: !disabled ? handleClick : undefined
390
- }, otherProps), /*#__PURE__*/external_react_default().createElement(StyledIcon, null, icon)));
391
- }
392
-
393
- ToolbarButton.propsTypes = propTypes;
394
- /* harmony default export */ const DualListbox_ToolbarButton = (ToolbarButton);
395
- ;// CONCATENATED MODULE: external "@splunk/react-ui/Switch"
396
- const Switch_namespaceObject = require("@splunk/react-ui/Switch");
397
- var Switch_default = /*#__PURE__*/__webpack_require__.n(Switch_namespaceObject);
398
- ;// CONCATENATED MODULE: ./src/DualListbox/OptionStyles.ts
399
-
400
-
401
-
402
- var StyledListItem = external_styled_components_default().li.withConfig({
403
- displayName: "OptionStyles__StyledListItem",
404
- componentId: "q275d9-0"
405
- })(["align-items:center;color:", ";cursor:pointer;display:flex;overflow:hidden;width:100%;word-wrap:break-word;", " ", ""], themes_namespaceObject.variables.contentColorActive, (0,themes_namespaceObject.pickVariant)('$active', {
406
- "true": (0,external_styled_components_namespaceObject.css)(["", ""], (0,themes_namespaceObject.pick)({
407
- prisma: (0,external_styled_components_namespaceObject.css)(["background:", ";"], themes_namespaceObject.variables.interactiveColorOverlaySelected),
408
- enterprise: {
409
- light: (0,external_styled_components_namespaceObject.css)(["background:", ";"], themes_namespaceObject.variables.accentColorL50),
410
- dark: (0,external_styled_components_namespaceObject.css)(["background:", ";"], themes_namespaceObject.variables.accentColorD50)
356
+ function $(e) {
357
+ var r = e.ariaLabel, a = e.ariaKeyShortcuts, i = e.icon, l = e.name, o = e.tooltipLabel, u = e.tooltipPlacement, c = M(e, [ "ariaLabel", "ariaKeyShortcuts", "icon", "name", "tooltipLabel", "tooltipPlacement" ]);
358
+ var s = (0, t.useContext)(L);
359
+ var v = p()();
360
+ var d = s.getButtonState, f = s.onButtonClick, b = s.updateButtonRefreshHookByName;
361
+ (0, t.useEffect)((function() {
362
+ b === null || b === void 0 ? void 0 : b(l, v);
363
+ return function() {
364
+ return b === null || b === void 0 ? void 0 : b(l);
365
+ };
366
+ }), [ l, b, v ]);
367
+ var m = (0, t.useCallback)((function(e) {
368
+ f === null || f === void 0 ? void 0 : f(e, {
369
+ name: l
370
+ });
371
+ }), [ f, l ]);
372
+ if (!d) {
373
+ return null;
374
+ }
375
+ var h = d(l), g = h.disabled;
376
+
377
+ return n().createElement(j(), {
378
+ defaultPlacement: u,
379
+ content: n().createElement("span", {
380
+ "aria-hidden": true
381
+ }, o)
382
+ }, n().createElement(H, B({
383
+ "aria-label": r,
384
+ "aria-keyshortcuts": a,
385
+ "aria-disabled": g || undefined,
386
+ "data-test": "toolbar-button",
387
+ $disabled: g,
388
+ onClick: !g ? m : undefined
389
+ }, c), n().createElement(T, null, i)));
411
390
  }
412
- }))
413
- }), (0,themes_namespaceObject.pick)({
414
- prisma: (0,themes_namespaceObject.pickVariant)('$selected', {
415
- "true": (0,external_styled_components_namespaceObject.css)(["&:hover{background:", ";}"], themes_namespaceObject.mixins.overlayColors(themes_namespaceObject.variables.interactiveColorOverlaySelected, themes_namespaceObject.variables.interactiveColorOverlayHover)),
416
- "false": (0,external_styled_components_namespaceObject.css)(["&:hover{background:", ";}"], themes_namespaceObject.variables.interactiveColorOverlayHover)
417
- }),
418
- enterprise: (0,external_styled_components_namespaceObject.css)(["&:hover{background:", ";}"], themes_namespaceObject.variables.backgroundColorHover)
419
- }));
420
- var StyledSwtich = external_styled_components_default()((Switch_default())).withConfig({
421
- displayName: "OptionStyles__StyledSwtich",
422
- componentId: "q275d9-1"
423
- })(["padding-left:", ";"], themes_namespaceObject.variables.spacingSmall);
424
- var StyledDiv = external_styled_components_default().div.withConfig({
425
- displayName: "OptionStyles__StyledDiv",
426
- componentId: "q275d9-2"
427
- })(["padding:", ";word-break:break-word;word-wrap:break-word;"], (0,themes_namespaceObject.pick)({
428
- prisma: {
429
- compact: (0,external_styled_components_namespaceObject.css)(["6px ", ""], themes_namespaceObject.variables.spacingSmall),
430
- comfortable: (0,external_styled_components_namespaceObject.css)(["10px ", ""], themes_namespaceObject.variables.spacingSmall)
431
- },
432
- enterprise: (0,external_styled_components_namespaceObject.css)(["6px ", ""], themes_namespaceObject.variables.spacingSmall)
433
- }));
434
-
435
- ;// CONCATENATED MODULE: ./src/DualListbox/ListboxContext.tsx
436
-
437
-
438
- /**
391
+ $.propsTypes = K;
392
+ /* harmony default export */ const F = $;
393
+ // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
394
+ const z = require("@splunk/react-ui/Switch");
395
+ var U = e.n(z);
396
+ // CONCATENATED MODULE: ./src/DualListbox/OptionStyles.ts
397
+ var W = D().li.withConfig({
398
+ displayName: "OptionStyles__StyledListItem",
399
+ componentId: "q275d9-0"
400
+ })([ "align-items:center;color:", ";cursor:pointer;display:flex;overflow:hidden;width:100%;word-wrap:break-word;", " ", "" ], N.variables.contentColorActive, (0,
401
+ N.pickVariant)("$active", {
402
+ true: (0, _.css)([ "", "" ], (0, N.pick)({
403
+ prisma: (0, _.css)([ "background:", ";" ], N.variables.interactiveColorOverlaySelected),
404
+ enterprise: {
405
+ light: (0, _.css)([ "background:", ";" ], N.variables.accentColorL50),
406
+ dark: (0, _.css)([ "background:", ";" ], N.variables.accentColorD50)
407
+ }
408
+ }))
409
+ }), (0, N.pick)({
410
+ prisma: (0, N.pickVariant)("$selected", {
411
+ true: (0, _.css)([ "&:hover{background:", ";}" ], N.mixins.overlayColors(N.variables.interactiveColorOverlaySelected, N.variables.interactiveColorOverlayHover)),
412
+ false: (0, _.css)([ "&:hover{background:", ";}" ], N.variables.interactiveColorOverlayHover)
413
+ }),
414
+ enterprise: (0, _.css)([ "&:hover{background:", ";}" ], N.variables.backgroundColorHover)
415
+ }));
416
+ var X = D()(U()).withConfig({
417
+ displayName: "OptionStyles__StyledSwtich",
418
+ componentId: "q275d9-1"
419
+ })([ "padding-left:", ";" ], N.variables.spacingSmall);
420
+ var G = D().div.withConfig({
421
+ displayName: "OptionStyles__StyledDiv",
422
+ componentId: "q275d9-2"
423
+ })([ "padding:", ";word-break:break-word;word-wrap:break-word;" ], (0, N.pick)({
424
+ prisma: {
425
+ compact: (0, _.css)([ "6px ", "" ], N.variables.spacingSmall),
426
+ comfortable: (0, _.css)([ "10px ", "" ], N.variables.spacingSmall)
427
+ },
428
+ enterprise: (0, _.css)([ "6px ", "" ], N.variables.spacingSmall)
429
+ }));
430
+ // CONCATENATED MODULE: ./src/DualListbox/ListboxContext.tsx
431
+ /**
439
432
  * A React context used to inform subcomponets of Listbox of parent component values.
440
433
  * The context interface is `ListboxContextValue`.
441
434
  * Defaults to `'{}'`.
442
435
  * @public
443
436
  */
444
- var ListboxContext = /*#__PURE__*/external_react_default().createContext({});
445
- /* harmony default export */ const DualListbox_ListboxContext = (ListboxContext);
446
- ;// CONCATENATED MODULE: ./src/DualListbox/Option.tsx
447
- function Option_extends() { Option_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Option_extends.apply(this, arguments); }
448
-
449
- function Option_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Option_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
450
-
451
- function Option_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
452
-
453
-
454
-
455
-
456
-
457
-
458
- var Option_propTypes = {
459
- id: (external_prop_types_default()).string.isRequired,
460
- label: (external_prop_types_default()).string.isRequired,
461
- listName: (external_prop_types_default()).string,
462
- selected: (external_prop_types_default()).bool,
463
- value: (external_prop_types_default()).string.isRequired
464
- };
465
-
466
- function Option(_ref) {
467
- var id = _ref.id,
468
- label = _ref.label,
469
- selectedProp = _ref.selected,
470
- value = _ref.value,
471
- otherProps = Option_objectWithoutProperties(_ref, ["id", "label", "selected", "value"]);
472
-
473
- var contextValue = (0,external_react_namespaceObject.useContext)(DualListbox_ListboxContext);
474
- var forceUpdate = useForceUpdate_default()();
475
- var onOptionClick = contextValue.onOptionClick,
476
- getOptionStateForValue = contextValue.getOptionStateForValue,
477
- updateOptionRefreshHookByValue = contextValue.updateOptionRefreshHookByValue,
478
- controlled = contextValue.controlled;
479
- (0,external_react_namespaceObject.useEffect)(function () {
480
- updateOptionRefreshHookByValue === null || updateOptionRefreshHookByValue === void 0 ? void 0 : updateOptionRefreshHookByValue(value, forceUpdate);
481
- return function () {
482
- return updateOptionRefreshHookByValue === null || updateOptionRefreshHookByValue === void 0 ? void 0 : updateOptionRefreshHookByValue(value);
483
- };
484
- }, [value, updateOptionRefreshHookByValue, forceUpdate]);
485
- var handleClick = (0,external_react_namespaceObject.useCallback)(function (event) {
486
- onOptionClick === null || onOptionClick === void 0 ? void 0 : onOptionClick(event, {
487
- value: value
488
- });
489
- }, [onOptionClick, value]);
490
-
491
- if (!getOptionStateForValue) {
492
- return null;
493
- }
494
-
495
- var _getOptionStateForVal = getOptionStateForValue(value),
496
- active = _getOptionStateForVal.active,
497
- selectedContext = _getOptionStateForVal.selected;
498
-
499
- var selected = !!(controlled ? selectedProp : selectedContext);
500
- return /*#__PURE__*/external_react_default().createElement(StyledListItem, Option_extends({
501
- "aria-selected": selected,
502
- "data-test": "option",
503
- "data-test-value": value,
504
- "data-test-active": active,
505
- id: id,
506
- onClick: handleClick,
507
- role: "option",
508
- $active: active,
509
- $selected: selected
510
- }, otherProps), /*#__PURE__*/external_react_default().createElement(StyledSwtich, {
511
- interactive: false,
512
- selected: selected,
513
- appearance: "checkbox"
514
- }), /*#__PURE__*/external_react_default().createElement(StyledDiv, null, label));
515
- }
516
-
517
- Option.propTypes = Option_propTypes;
518
- /* harmony default export */ const DualListbox_Option = (Option);
519
- ;// CONCATENATED MODULE: external "@splunk/ui-utils/id"
520
- const id_namespaceObject = require("@splunk/ui-utils/id");
521
- ;// CONCATENATED MODULE: ./src/DualListbox/LabelStyles.ts
522
-
523
-
524
- var StyledLabel = external_styled_components_default().label.withConfig({
525
- displayName: "LabelStyles__StyledLabel",
526
- componentId: "unwplx-0"
527
- })(["color:", ";flex:0 0 auto;"], themes_namespaceObject.variables.contentColorActive);
528
- var StyledLabelContainer = external_styled_components_default().div.withConfig({
529
- displayName: "LabelStyles__StyledLabelContainer",
530
- componentId: "unwplx-1"
531
- })(["display:flex;flex-direction:column;"]);
532
- var StyledSwitchContainer = external_styled_components_default().div.withConfig({
533
- displayName: "LabelStyles__StyledSwitchContainer",
534
- componentId: "unwplx-2"
535
- })(["align-items:center;border:1px solid transparent;display:flex;gap:", ";grid-row:headers;padding:0 ", ";", ""], themes_namespaceObject.variables.spacingSmall, themes_namespaceObject.variables.spacingSmall, function (_ref) {
536
- var $columnNumber = _ref.$columnNumber;
537
- return (0,external_styled_components_namespaceObject.css)(["grid-column:", ";"], "list".concat($columnNumber));
538
- });
539
-
540
- ;// CONCATENATED MODULE: ./src/DualListbox/Label.tsx
541
-
542
-
543
-
544
-
545
-
546
-
547
-
548
-
549
-
550
-
551
- var Label_propTypes = {
552
- id: (external_prop_types_default()).string.isRequired,
553
- index: (external_prop_types_default()).number.isRequired,
554
- listId: (external_prop_types_default()).string.isRequired,
555
- name: (external_prop_types_default()).string.isRequired,
556
- onSwitchClick: (external_prop_types_default()).func,
557
- value: (external_prop_types_default()).string.isRequired
558
- };
559
-
560
- function ListboxLabel(_ref) {
561
- var id = _ref.id,
562
- index = _ref.index,
563
- listId = _ref.listId,
564
- name = _ref.name,
565
- onSwitchClick = _ref.onSwitchClick,
566
- value = _ref.value;
567
- var contextValue = (0,external_react_namespaceObject.useContext)(DualListbox_ListboxContext);
568
- var forceUpdate = useForceUpdate_default()();
569
- var switchIdRef = (0,external_react_namespaceObject.useRef)((0,id_namespaceObject.createDOMID)('switch'));
570
- var updateLabelRefreshHookByName = contextValue.updateLabelRefreshHookByName,
571
- getLabelState = contextValue.getLabelState;
572
- (0,external_react_namespaceObject.useEffect)(function () {
573
- updateLabelRefreshHookByName === null || updateLabelRefreshHookByName === void 0 ? void 0 : updateLabelRefreshHookByName(name, forceUpdate);
574
- return function () {
575
- return updateLabelRefreshHookByName === null || updateLabelRefreshHookByName === void 0 ? void 0 : updateLabelRefreshHookByName(name);
576
- };
577
- }, [name, updateLabelRefreshHookByName, forceUpdate]);
578
-
579
- if (!getLabelState) {
580
- return null;
581
- }
582
-
583
- var _getLabelState = getLabelState(),
584
- disabled = _getLabelState.disabled,
585
- selected = _getLabelState.selected,
586
- selectedValueCount = _getLabelState.selectedValueCount,
587
- valueCount = _getLabelState.valueCount;
588
-
589
- return /*#__PURE__*/external_react_default().createElement(StyledSwitchContainer, {
590
- $columnNumber: index
591
- }, /*#__PURE__*/external_react_default().createElement((ScreenReaderContent_default()), {
592
- "aria-hidden": true,
593
- id: switchIdRef.current
594
- }, (0,format_namespaceObject.sprintf)((0,i18n_namespaceObject._)('Select All %(listName)s Options'), {
595
- listName: value
596
- })), /*#__PURE__*/external_react_default().createElement((Switch_default()), {
597
- appearance: "checkbox",
598
- "data-test": "select-all",
599
- disabled: disabled,
600
- labelledBy: switchIdRef.current,
601
- onClick: onSwitchClick,
602
- selected: selected,
603
- value: value
604
- }), /*#__PURE__*/external_react_default().createElement(StyledLabelContainer, null, /*#__PURE__*/external_react_default().createElement(StyledLabel, {
605
- id: id,
606
- htmlFor: listId
607
- }, value), /*#__PURE__*/external_react_default().createElement("span", {
608
- "aria-hidden": true
609
- }, "".concat(selectedValueCount, "/").concat(valueCount, " Selected"))));
610
- }
611
-
612
- ListboxLabel.propTypes = Label_propTypes;
613
- /* harmony default export */ const Label = (ListboxLabel);
614
- ;// CONCATENATED MODULE: ./src/DualListbox/ListboxStyles.ts
615
-
616
-
617
- var StyledListbox = external_styled_components_default().ul.withConfig({
618
- displayName: "ListboxStyles__StyledListbox",
619
- componentId: "sc-11oqtd-0"
620
- })(["background-color:", ";border:1px solid ", ";border-radius:", ";grid-row:lists;list-style:none;margin:0;min-height:0;min-width:0;overflow:auto;padding:0;position:relative;&:focus{box-shadow:", ";outline:none;}", ""], themes_namespaceObject.variables.transparent, (0,themes_namespaceObject.pick)({
621
- enterprise: themes_namespaceObject.variables.gray60,
622
- prisma: themes_namespaceObject.variables.interactiveColorBorder
623
- }), themes_namespaceObject.variables.borderRadius, themes_namespaceObject.variables.focusShadow, function (_ref) {
624
- var $columnNumber = _ref.$columnNumber;
625
- return (0,external_styled_components_namespaceObject.css)(["grid-column:", ";"], "list".concat($columnNumber));
626
- });
627
-
628
- ;// CONCATENATED MODULE: ./src/DualListbox/Listbox.tsx
629
- function Listbox_extends() { Listbox_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Listbox_extends.apply(this, arguments); }
630
-
631
- function Listbox_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = Listbox_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
632
-
633
- function Listbox_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
634
-
635
-
636
-
637
-
638
-
639
-
640
-
641
-
642
- var Listbox_propTypes = {
643
- children: (external_prop_types_default()).node,
644
- index: (external_prop_types_default()).number.isRequired,
645
- label: (external_prop_types_default()).string.isRequired,
646
- multiSelect: (external_prop_types_default()).bool,
647
- name: (external_prop_types_default()).string.isRequired,
648
- onClick: (external_prop_types_default()).func,
649
- onKeyDown: (external_prop_types_default()).func,
650
- onSelectAllClick: (external_prop_types_default()).func
651
- };
652
-
653
- function Listbox(_ref) {
654
- var children = _ref.children,
655
- elementRef = _ref.elementRef,
656
- index = _ref.index,
657
- label = _ref.label,
658
- name = _ref.name,
659
- onClick = _ref.onClick,
660
- onKeyDown = _ref.onKeyDown,
661
- onSelectAllClick = _ref.onSelectAllClick,
662
- otherProps = Listbox_objectWithoutProperties(_ref, ["children", "elementRef", "index", "label", "name", "onClick", "onKeyDown", "onSelectAllClick"]);
663
-
664
- var labelIdRef = (0,external_react_namespaceObject.useRef)((0,id_namespaceObject.createDOMID)('label'));
665
- var idRef = (0,external_react_namespaceObject.useRef)((0,id_namespaceObject.createDOMID)('listbox'));
666
-
667
- var _useContext = (0,external_react_namespaceObject.useContext)(DualListbox_DualListboxContext),
668
- controlled = _useContext.controlled,
669
- getSelectedStateForValue = _useContext.getSelectedStateForValue,
670
- getActiveValue = _useContext.getActiveValue,
671
- getSelectedValueCount = _useContext.getSelectedValueCount,
672
- getValueCount = _useContext.getValueCount,
673
- updateLabelRefreshHookByName = _useContext.updateLabelRefreshHookByName,
674
- updateOptionRefreshHookByValue = _useContext.updateOptionRefreshHookByValue;
675
-
676
- var handleClick = (0,external_react_namespaceObject.useCallback)(function (event, _ref2) {
677
- var value = _ref2.value;
678
- onClick === null || onClick === void 0 ? void 0 : onClick(event, {
679
- name: name,
680
- value: value
681
- });
682
- }, [name, onClick]);
683
- var getOptionStateForValue = (0,external_react_namespaceObject.useCallback)(function (value) {
684
- return {
685
- active: (getActiveValue === null || getActiveValue === void 0 ? void 0 : getActiveValue(name)) === value,
686
- selected: !!(getSelectedStateForValue === null || getSelectedStateForValue === void 0 ? void 0 : getSelectedStateForValue(value))
687
- };
688
- }, [name, getActiveValue, getSelectedStateForValue]);
689
- var getLabelState = (0,external_react_namespaceObject.useCallback)(function () {
690
- var valueCount = (getValueCount === null || getValueCount === void 0 ? void 0 : getValueCount(name)) || 0;
691
- var selectedValueCount = (getSelectedValueCount === null || getSelectedValueCount === void 0 ? void 0 : getSelectedValueCount(name)) || 0;
692
- var switchSelected = false;
693
-
694
- if (selectedValueCount > 0) {
695
- switchSelected = selectedValueCount === valueCount ? true : 'some';
696
- }
697
-
698
- return {
699
- disabled: valueCount < 1,
700
- selected: switchSelected,
701
- selectedValueCount: selectedValueCount,
702
- valueCount: valueCount
703
- };
704
- }, [name, getSelectedValueCount, getValueCount]);
705
-
706
- var handleKeyDown = function handleKeyDown(event) {
707
- onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event, {
708
- name: name
709
- });
710
- };
711
-
712
- var handleSwitchClick = function handleSwitchClick(event, _ref3) {
713
- var selected = _ref3.selected;
714
- onSelectAllClick === null || onSelectAllClick === void 0 ? void 0 : onSelectAllClick(event, {
715
- name: name,
716
- selected: selected
717
- });
718
- };
719
-
720
- var handleMouseDown = function handleMouseDown(event) {
721
- // this prevents default text selection when using shift + click
722
- if (event.shiftKey && event.target !== event.currentTarget) {
723
- event.preventDefault();
724
- }
725
- };
726
-
727
- var contextValue = (0,external_react_namespaceObject.useMemo)(function () {
728
- return {
729
- onOptionClick: handleClick,
730
- updateLabelRefreshHookByName: updateLabelRefreshHookByName,
731
- updateOptionRefreshHookByValue: updateOptionRefreshHookByValue,
732
- getOptionStateForValue: getOptionStateForValue,
733
- getLabelState: getLabelState,
734
- controlled: controlled
735
- };
736
- }, [handleClick, updateLabelRefreshHookByName, updateOptionRefreshHookByValue, getOptionStateForValue, getLabelState, controlled]);
737
- return /*#__PURE__*/external_react_default().createElement(DualListbox_ListboxContext.Provider, {
738
- value: contextValue
739
- }, /*#__PURE__*/external_react_default().createElement(Label, {
740
- id: labelIdRef.current,
741
- index: index,
742
- listId: idRef.current,
743
- name: name,
744
- onSwitchClick: handleSwitchClick,
745
- value: label
746
- }), /*#__PURE__*/external_react_default().createElement(StyledListbox, Listbox_extends({
747
- "aria-activedescendant": "" // Important this value stays static, only updated via DOM maniupulation
748
- ,
749
- "aria-labelledby": labelIdRef.current,
750
- "aria-multiselectable": true,
751
- "data-test": "listbox",
752
- id: idRef.current,
753
- onKeyDown: handleKeyDown,
754
- onMouseDown: handleMouseDown,
755
- ref: elementRef,
756
- role: "listbox",
757
- tabIndex: 0,
758
- $columnNumber: index
759
- }, otherProps), children));
760
- }
761
-
762
- Listbox.propTypes = Listbox_propTypes;
763
- /* harmony default export */ const DualListbox_Listbox = (Listbox);
764
- ;// CONCATENATED MODULE: external "@splunk/react-ui/Box"
765
- const Box_namespaceObject = require("@splunk/react-ui/Box");
766
- var Box_default = /*#__PURE__*/__webpack_require__.n(Box_namespaceObject);
767
- ;// CONCATENATED MODULE: ./src/DualListbox/DualListboxStyles.ts
768
-
769
-
770
-
771
- var StyledBox = external_styled_components_default()((Box_default())).withConfig({
772
- displayName: "DualListboxStyles__StyledBox",
773
- componentId: "sc-1te6bz0-0"
774
- })(["display:grid;grid-template-columns:[list0] 180px [actions] min-content [list1] 180px;grid-template-rows:[headers] min-content [lists] 160px;gap:", " ", ";", " ", ""], themes_namespaceObject.variables.spacingXSmall, themes_namespaceObject.variables.spacingSmall, function (_ref) {
775
- var $inline = _ref.$inline;
776
- return $inline && (0,external_styled_components_namespaceObject.css)(["display:inline-grid;"]);
777
- }, function (_ref2) {
778
- var $fill = _ref2.$fill;
779
- return $fill && (0,external_styled_components_namespaceObject.css)(["height:100%;grid-template-columns:[list0] 1fr [actions] min-content [list1] 1fr;grid-template-rows:[headers] min-content [lists] 1fr;position:relative;width:100%;"]);
780
- });
781
- var StyledFlexColumn = external_styled_components_default().div.withConfig({
782
- displayName: "DualListboxStyles__StyledFlexColumn",
783
- componentId: "sc-1te6bz0-1"
784
- })(["&::before{content:'';grid-column:headers;grid-row:lists;}align-items:center;display:flex;flex-direction:column;gap:", ";grid-column:actions;grid-row:lists;justify-content:center;"], themes_namespaceObject.variables.spacingSmall);
785
-
786
- ;// CONCATENATED MODULE: ./src/DualListbox/DualListbox.tsx
787
- function DualListbox_extends() { DualListbox_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return DualListbox_extends.apply(this, arguments); }
788
-
789
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
790
-
791
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
792
-
793
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
794
-
795
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
796
-
797
- function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
798
-
799
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
800
-
801
- function DualListbox_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = DualListbox_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
802
-
803
- function DualListbox_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
804
-
805
-
806
-
807
-
808
-
809
-
810
-
811
-
812
-
813
-
814
-
815
-
816
-
817
-
818
-
819
-
820
-
821
-
822
-
823
- /** @public */
824
-
825
- var DualListbox_propTypes = {
826
- children: (external_prop_types_default()).node,
827
- controlled: (external_prop_types_default()).bool,
828
- fill: (external_prop_types_default()).bool,
829
- inline: (external_prop_types_default()).bool,
830
- onChange: (external_prop_types_default()).func,
831
- onSelect: (external_prop_types_default()).func,
832
- lists: external_prop_types_default().arrayOf(external_prop_types_default().shape({
833
- name: (external_prop_types_default()).string.isRequired,
834
- label: (external_prop_types_default()).string.isRequired
835
- })).isRequired
836
- };
837
-
838
- function DualListbox(_ref) {
839
- var _lists$, _lists$2, _lists$3, _lists$4;
840
-
841
- var children = _ref.children,
842
- _ref$controlled = _ref.controlled,
843
- controlled = _ref$controlled === void 0 ? false : _ref$controlled,
844
- _ref$fill = _ref.fill,
845
- fill = _ref$fill === void 0 ? false : _ref$fill,
846
- _ref$inline = _ref.inline,
847
- inline = _ref$inline === void 0 ? false : _ref$inline,
848
- onChange = _ref.onChange,
849
- onSelect = _ref.onSelect,
850
- lists = _ref.lists,
851
- otherProps = DualListbox_objectWithoutProperties(_ref, ["children", "controlled", "fill", "inline", "onChange", "onSelect", "lists"]);
852
-
853
- // @docs-props-type DualListboxPropsBase
854
- var forceUpdate = useForceUpdate_default()();
855
- var mountedRef = (0,external_react_namespaceObject.useRef)(false);
856
- (0,external_react_namespaceObject.useEffect)(function () {
857
- mountedRef.current = true;
858
- }, []); // TODO: Implement shared isControlled hook (SUI-5283).
859
-
860
- var isControlledRef = (0,external_react_namespaceObject.useRef)(controlled); // List One "Available" Refs
861
-
862
- var listOneValues = (0,external_react_namespaceObject.useRef)([]);
863
- var listOneSelectedValues = (0,external_react_namespaceObject.useRef)([]);
864
- var listOneActiveValue = (0,external_react_namespaceObject.useRef)();
865
- var listOneNodeRef = (0,external_react_namespaceObject.useRef)(null);
866
- var listOneMatchOptions = (0,external_react_namespaceObject.useRef)([]); // List Two "Selected" Refs
867
-
868
- var listTwoValues = (0,external_react_namespaceObject.useRef)([]);
869
- var listTwoSelectedValues = (0,external_react_namespaceObject.useRef)([]);
870
- var listTwoActiveValue = (0,external_react_namespaceObject.useRef)();
871
- var listTwoNodeRef = (0,external_react_namespaceObject.useRef)(null);
872
- var listTwoMatchOptions = (0,external_react_namespaceObject.useRef)([]); // Refresh Hook Stores, used to render indivual elements when uncontrolled
873
-
874
- var buttonRefreshHookByName = (0,external_react_namespaceObject.useRef)({});
875
- var labelRefreshHookByName = (0,external_react_namespaceObject.useRef)({});
876
- var optionRefreshHookByValue = (0,external_react_namespaceObject.useRef)({});
877
- var screenReaderRefreshHook = (0,external_react_namespaceObject.useRef)(); // Activity Values Refs
878
-
879
- var screenReaderValueRef = (0,external_react_namespaceObject.useRef)();
880
- var selectedByValue = (0,external_react_namespaceObject.useRef)({});
881
- var idByValue = (0,external_react_namespaceObject.useRef)({});
882
- var indexByValue = (0,external_react_namespaceObject.useRef)({});
883
- var initialRangeIndex = (0,external_react_namespaceObject.useRef)(0); // Key Match Refs
884
-
885
- var matchCharacter = (0,external_react_namespaceObject.useRef)();
886
- var matchTimeout = (0,external_react_namespaceObject.useRef)();
887
- var matchOptions = (0,external_react_namespaceObject.useRef)([]);
888
-
889
- if (false) {}
890
-
891
- if (false) {}
892
-
893
- if (false) {} // Unpack names and labels instead of relying on `lists` being a consistent reference
894
-
895
-
896
- var listOneName = (_lists$ = lists[0]) === null || _lists$ === void 0 ? void 0 : _lists$.name;
897
- var listTwoName = (_lists$2 = lists[1]) === null || _lists$2 === void 0 ? void 0 : _lists$2.name;
898
- var listOneLabel = (_lists$3 = lists[0]) === null || _lists$3 === void 0 ? void 0 : _lists$3.label;
899
- var listTwoLabel = (_lists$4 = lists[1]) === null || _lists$4 === void 0 ? void 0 : _lists$4.label; // Copy previous state for uncontrolled render so it's not voided by following value reset
900
-
901
- var internalValueSet = new Set(listTwoValues.current); // This ensures we recapture the indexes after batch moves, but will be refactored when sorting is implemented (SUI-5270).
902
-
903
- listOneValues.current = [];
904
- listTwoValues.current = [];
905
- listOneMatchOptions.current = [];
906
- listTwoMatchOptions.current = []; // Clean the data stores before we copy the references into listData
907
-
908
- if (!mountedRef.current || isControlledRef.current) {
909
- listOneSelectedValues.current = [];
910
- listTwoSelectedValues.current = [];
911
- selectedByValue.current = {};
912
- indexByValue.current = {};
913
- idByValue.current = {};
914
- }
915
-
916
- var listData = [{
917
- options: [],
918
- matchOptions: listOneMatchOptions.current,
919
- values: listOneValues.current,
920
- selectedValues: listOneSelectedValues.current,
921
- activeValue: listOneActiveValue.current,
922
- activeFound: !listOneActiveValue.current
923
- }, {
924
- options: [],
925
- matchOptions: listTwoMatchOptions.current,
926
- values: listTwoValues.current,
927
- selectedValues: listTwoSelectedValues.current,
928
- activeValue: listTwoActiveValue.current,
929
- activeFound: !listTwoActiveValue.current
930
- }];
931
-
932
- if (!mountedRef.current || isControlledRef.current) {
933
- external_react_namespaceObject.Children.toArray(children).filter(external_react_namespaceObject.isValidElement).forEach(function (child) {
934
- var _child$props = child.props,
935
- value = _child$props.value,
936
- label = _child$props.label;
937
- var isListTwo = child.props.listName === listTwoName;
938
- var data = listData[isListTwo ? 1 : 0]; // Ensure the active value is found on controlled renders
939
-
940
- if (!data.activeFound && data.activeValue === value) {
941
- data.activeFound = true;
942
- }
943
-
944
- data.values.push(value);
945
- data.options.push(child);
946
- data.matchOptions.push({
947
- value: value,
948
- label: label
949
- });
950
- var isSelected = !!child.props.selected;
951
-
952
- if (isSelected) {
953
- data.selectedValues.push(value);
954
- }
955
-
956
- selectedByValue.current[value] = isSelected;
957
- indexByValue.current[value] = data.values.length - 1;
958
- idByValue.current[value] = child.props.id;
959
- });
960
- } else {
961
- external_react_namespaceObject.Children.toArray(children).filter(external_react_namespaceObject.isValidElement).forEach(function (child) {
962
- var _child$props2 = child.props,
963
- value = _child$props2.value,
964
- label = _child$props2.label;
965
- var isListTwo = internalValueSet.has(value);
966
- var data = listData[isListTwo ? 1 : 0];
967
- data.values.push(value);
968
- data.options.push(child);
969
- data.matchOptions.push({
970
- value: value,
971
- label: label
972
- });
973
- indexByValue.current[value] = data.values.length - 1;
974
- });
975
- }
976
-
977
- var setActiveValue = (0,external_react_namespaceObject.useCallback)(function (name, value) {
978
- if (name === listOneName) {
979
- listOneActiveValue.current = value;
980
- } else {
981
- listTwoActiveValue.current = value;
437
+ var J = n().createContext({});
438
+ /* harmony default export */ const Q = J;
439
+ // CONCATENATED MODULE: ./src/DualListbox/Option.tsx
440
+ function Y() {
441
+ Y = Object.assign || function(e) {
442
+ for (var r = 1; r < arguments.length; r++) {
443
+ var t = arguments[r];
444
+ for (var n in t) {
445
+ if (Object.prototype.hasOwnProperty.call(t, n)) {
446
+ e[n] = t[n];
447
+ }
448
+ }
449
+ }
450
+ return e;
451
+ };
452
+ return Y.apply(this, arguments);
982
453
  }
983
- }, [listOneName]);
984
- var getActiveValue = (0,external_react_namespaceObject.useCallback)(function (name) {
985
- return name === listOneName ? listOneActiveValue.current : listTwoActiveValue.current;
986
- }, [listOneName]);
987
- var setSelectedValues = (0,external_react_namespaceObject.useCallback)(function (name, values) {
988
- if (name === listOneName) {
989
- listOneSelectedValues.current = values;
990
- } else {
991
- listTwoSelectedValues.current = values;
454
+ function Z(e, r) {
455
+ if (e == null) return {};
456
+ var t = ee(e, r);
457
+ var n, a;
458
+ if (Object.getOwnPropertySymbols) {
459
+ var i = Object.getOwnPropertySymbols(e);
460
+ for (a = 0; a < i.length; a++) {
461
+ n = i[a];
462
+ if (r.indexOf(n) >= 0) continue;
463
+ if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
464
+ t[n] = e[n];
465
+ }
466
+ }
467
+ return t;
992
468
  }
993
- }, [listOneName]);
994
- var getSelectedValues = (0,external_react_namespaceObject.useCallback)(function (name) {
995
- return name === listOneName ? listOneSelectedValues.current : listTwoSelectedValues.current;
996
- }, [listOneName]);
997
- var getSelectedValueCount = (0,external_react_namespaceObject.useCallback)(function (name) {
998
- return getSelectedValues(name).length;
999
- }, [getSelectedValues]);
1000
- var getScreenReaderMessage = (0,external_react_namespaceObject.useCallback)(function () {
1001
- return screenReaderValueRef.current;
1002
- }, []);
1003
- var getSelectedStateForValue = (0,external_react_namespaceObject.useCallback)(function (value) {
1004
- return selectedByValue.current[value];
1005
- }, []);
1006
- var setValues = (0,external_react_namespaceObject.useCallback)(function (name, values) {
1007
- if (name === listOneName) {
1008
- listOneValues.current = values;
1009
- } else {
1010
- listTwoValues.current = values;
469
+ function ee(e, r) {
470
+ if (e == null) return {};
471
+ var t = {};
472
+ var n = Object.keys(e);
473
+ var a, i;
474
+ for (i = 0; i < n.length; i++) {
475
+ a = n[i];
476
+ if (r.indexOf(a) >= 0) continue;
477
+ t[a] = e[a];
478
+ }
479
+ return t;
1011
480
  }
1012
- }, [listOneName]);
1013
- var getValues = (0,external_react_namespaceObject.useCallback)(function (name) {
1014
- return name === listOneName ? listOneValues.current : listTwoValues.current;
1015
- }, [listOneName]);
1016
- var getValueCount = (0,external_react_namespaceObject.useCallback)(function (name) {
1017
- return getValues(name).length;
1018
- }, [getValues]);
1019
- var getIsAllSelected = (0,external_react_namespaceObject.useCallback)(function (name) {
1020
- var valueCount = getValueCount(name);
1021
- return valueCount > 0 && valueCount === getSelectedValueCount(name);
1022
- }, [getValueCount, getSelectedValueCount]);
1023
- var getAvailableMatchOptions = (0,external_react_namespaceObject.useCallback)(function (name) {
1024
- return name === listOneName ? listOneMatchOptions.current : listTwoMatchOptions.current;
1025
- }, [listOneName]);
1026
- var getButtonState = (0,external_react_namespaceObject.useCallback)(function (name) {
1027
- var valueCount = getValueCount(name);
1028
- var selectedValueCount = getSelectedValueCount(name);
1029
- return {
1030
- disabled: valueCount < 1 || selectedValueCount < 1
481
+ var re = {
482
+ id: i().string.isRequired,
483
+ label: i().string.isRequired,
484
+ listName: i().string,
485
+ selected: i().bool,
486
+ value: i().string.isRequired
1031
487
  };
1032
- }, [getValueCount, getSelectedValueCount]);
1033
- var clearScreenReaderText = (0,external_react_namespaceObject.useCallback)(function () {
1034
- if (screenReaderValueRef.current && screenReaderValueRef.current.length > 0) {
1035
- var _screenReaderRefreshH;
1036
-
1037
- screenReaderValueRef.current = '';
1038
- (_screenReaderRefreshH = screenReaderRefreshHook.current) === null || _screenReaderRefreshH === void 0 ? void 0 : _screenReaderRefreshH.call(screenReaderRefreshHook);
1039
- }
1040
- }, []);
1041
- var resetMatches = (0,external_react_namespaceObject.useCallback)(function () {
1042
- matchCharacter.current = undefined;
1043
- matchOptions.current = [];
1044
-
1045
- if (matchTimeout.current) {
1046
- clearTimeout(matchTimeout.current);
1047
- }
1048
- }, []);
1049
- var updateScreenReaderRefreshHook = (0,external_react_namespaceObject.useCallback)(function (callback) {
1050
- screenReaderRefreshHook.current = callback;
1051
- }, []);
1052
- var updateOptionRefreshHookByValue = (0,external_react_namespaceObject.useCallback)(function (value, callback) {
1053
- if (callback) {
1054
- optionRefreshHookByValue.current[value] = callback;
1055
- } else {
1056
- delete optionRefreshHookByValue.current[value];
1057
- }
1058
- }, []);
1059
- var updateLabelRefreshHookByName = (0,external_react_namespaceObject.useCallback)(function (name, callback) {
1060
- if (callback) {
1061
- labelRefreshHookByName.current[name] = callback;
1062
- } else {
1063
- delete labelRefreshHookByName.current[name];
1064
- }
1065
- }, []);
1066
- var updateButtonRefreshHookByName = (0,external_react_namespaceObject.useCallback)(function (name, callback) {
1067
- if (callback) {
1068
- buttonRefreshHookByName.current[name] = callback;
1069
- } else {
1070
- delete buttonRefreshHookByName.current[name];
1071
- }
1072
- }, []);
1073
- var updateOption = (0,external_react_namespaceObject.useCallback)(function (value) {
1074
- if (value) {
1075
- var _optionRefreshHookByV, _optionRefreshHookByV2;
1076
-
1077
- (_optionRefreshHookByV = (_optionRefreshHookByV2 = optionRefreshHookByValue.current)[value]) === null || _optionRefreshHookByV === void 0 ? void 0 : _optionRefreshHookByV.call(_optionRefreshHookByV2);
1078
- }
1079
- }, []);
1080
- var updateLabel = (0,external_react_namespaceObject.useCallback)(function (name) {
1081
- if (name) {
1082
- var _labelRefreshHookByNa, _labelRefreshHookByNa2;
1083
-
1084
- (_labelRefreshHookByNa = (_labelRefreshHookByNa2 = labelRefreshHookByName.current)[name]) === null || _labelRefreshHookByNa === void 0 ? void 0 : _labelRefreshHookByNa.call(_labelRefreshHookByNa2);
1085
- }
1086
- }, []);
1087
- var updateButton = (0,external_react_namespaceObject.useCallback)(function (name) {
1088
- if (name) {
1089
- var _buttonRefreshHookByN, _buttonRefreshHookByN2;
1090
-
1091
- (_buttonRefreshHookByN = (_buttonRefreshHookByN2 = buttonRefreshHookByName.current)[name]) === null || _buttonRefreshHookByN === void 0 ? void 0 : _buttonRefreshHookByN.call(_buttonRefreshHookByN2);
1092
- }
1093
- }, []);
1094
- var updateInternalDisplay = (0,external_react_namespaceObject.useCallback)(function (name) {
1095
- clearScreenReaderText();
1096
- updateLabel(name);
1097
- updateButton(listOneName);
1098
- updateButton(listTwoName);
1099
- }, [clearScreenReaderText, updateButton, updateLabel, listOneName, listTwoName]);
1100
- var updateActiveOption = (0,external_react_namespaceObject.useCallback)(function (name, value) {
1101
- var skipRender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
1102
- var listbox = name === listOneName ? listOneNodeRef.current : listTwoNodeRef.current;
1103
-
1104
- if (!listbox) {
1105
- return;
1106
- }
1107
-
1108
- var previousValue = getActiveValue(name);
1109
- setActiveValue(name, value);
1110
-
1111
- if (!skipRender) {
1112
- // render new
1113
- updateOption(value);
488
+ function te(e) {
489
+ var r = e.id, a = e.label, i = e.selected, l = e.value, o = Z(e, [ "id", "label", "selected", "value" ]);
490
+ var u = (0, t.useContext)(Q);
491
+ var c = p()();
492
+ var s = u.onOptionClick, v = u.getOptionStateForValue, d = u.updateOptionRefreshHookByValue, f = u.controlled;
493
+ (0, t.useEffect)((function() {
494
+ d === null || d === void 0 ? void 0 : d(l, c);
495
+ return function() {
496
+ return d === null || d === void 0 ? void 0 : d(l);
497
+ };
498
+ }), [ l, d, c ]);
499
+ var b = (0, t.useCallback)((function(e) {
500
+ s === null || s === void 0 ? void 0 : s(e, {
501
+ value: l
502
+ });
503
+ }), [ s, l ]);
504
+ if (!v) {
505
+ return null;
506
+ }
507
+ var m = v(l), h = m.active, g = m.selected;
508
+ var y = !!(f ? i : g);
509
+
510
+ return n().createElement(W, Y({
511
+ "aria-selected": y,
512
+ "data-test": "option",
513
+ "data-test-value": l,
514
+ "data-test-active": h,
515
+ id: r,
516
+ onClick: b,
517
+ role: "option",
518
+ $active: h,
519
+ $selected: y
520
+ }, o), n().createElement(X, {
521
+ interactive: false,
522
+ selected: y,
523
+ appearance: "checkbox"
524
+ }), n().createElement(G, null, a));
1114
525
  }
1115
-
1116
- if (value !== previousValue) {
1117
- if (!skipRender) {
1118
- // render previous
1119
- updateOption(previousValue);
1120
- }
1121
-
1122
- var id = value ? idByValue.current[value] : ''; // update listbox via dom to avoid render + child render
1123
-
1124
- listbox.setAttribute('aria-activedescendant', id);
1125
-
1126
- if (!skipRender && id.length > 0) {
1127
- var element = listbox.querySelector("#".concat(id));
1128
- scrollIntoViewIfNeeded(element);
1129
- }
526
+ te.propTypes = re;
527
+ /* harmony default export */ const ne = te;
528
+ // CONCATENATED MODULE: external "@splunk/ui-utils/id"
529
+ const ae = require("@splunk/ui-utils/id");
530
+ // CONCATENATED MODULE: ./src/DualListbox/LabelStyles.ts
531
+ var ie = D().label.withConfig({
532
+ displayName: "LabelStyles__StyledLabel",
533
+ componentId: "unwplx-0"
534
+ })([ "color:", ";flex:0 0 auto;" ], N.variables.contentColorActive);
535
+ var le = D().div.withConfig({
536
+ displayName: "LabelStyles__StyledLabelContainer",
537
+ componentId: "unwplx-1"
538
+ })([ "display:flex;flex-direction:column;" ]);
539
+ var oe = D().div.withConfig({
540
+ displayName: "LabelStyles__StyledSwitchContainer",
541
+ componentId: "unwplx-2"
542
+ })([ "align-items:center;border:1px solid transparent;display:flex;gap:", ";grid-row:headers;padding:0 ", ";", "" ], N.variables.spacingSmall, N.variables.spacingSmall, (function(e) {
543
+ var r = e.$columnNumber;
544
+ return (0, _.css)([ "grid-column:", ";" ], "list".concat(r));
545
+ }));
546
+ // CONCATENATED MODULE: ./src/DualListbox/Label.tsx
547
+ var ue = {
548
+ id: i().string.isRequired,
549
+ index: i().number.isRequired,
550
+ listId: i().string.isRequired,
551
+ name: i().string.isRequired,
552
+ onSwitchClick: i().func,
553
+ value: i().string.isRequired
554
+ };
555
+ function ce(e) {
556
+ var r = e.id, a = e.index, i = e.listId, o = e.name, u = e.onSwitchClick, c = e.value;
557
+ var s = (0, t.useContext)(Q);
558
+ var v = p()();
559
+ var f = (0, t.useRef)((0, ae.createDOMID)("switch"));
560
+ var b = s.updateLabelRefreshHookByName, h = s.getLabelState;
561
+ (0, t.useEffect)((function() {
562
+ b === null || b === void 0 ? void 0 : b(o, v);
563
+ return function() {
564
+ return b === null || b === void 0 ? void 0 : b(o);
565
+ };
566
+ }), [ o, b, v ]);
567
+ if (!h) {
568
+ return null;
569
+ }
570
+ var g = h(), y = g.disabled, k = g.selected, C = g.selectedValueCount, x = g.valueCount;
571
+
572
+ return n().createElement(oe, {
573
+ $columnNumber: a
574
+ }, n().createElement(m(), {
575
+ "aria-hidden": true,
576
+ id: f.current
577
+ }, (0, d.sprintf)((0, l._)("Select All %(listName)s Options"), {
578
+ listName: c
579
+ })), n().createElement(U(), {
580
+ appearance: "checkbox",
581
+ "data-test": "select-all",
582
+ disabled: y,
583
+ labelledBy: f.current,
584
+ onClick: u,
585
+ selected: k,
586
+ value: c
587
+ }), n().createElement(le, null, n().createElement(ie, {
588
+ id: r,
589
+ htmlFor: i
590
+ }, c), n().createElement("span", {
591
+ "aria-hidden": true
592
+ }, "".concat(C, "/").concat(x, " Selected"))));
1130
593
  }
1131
- }, [getActiveValue, setActiveValue, updateOption, listOneName]);
1132
- var handleSingleSelection = (0,external_react_namespaceObject.useCallback)(function (event, _ref2) {
1133
- var value = _ref2.value,
1134
- name = _ref2.name;
1135
- var sourceValues = getIsAllSelected(name) ? getValues(name) : getSelectedValues(name);
1136
- var newValues = arrayWithToggledValue(sourceValues, value);
1137
-
1138
- if (!isControlledRef.current) {
1139
- selectedByValue.current[value] = !selectedByValue.current[value];
1140
- setSelectedValues(name, newValues);
1141
- updateInternalDisplay(name);
594
+ ce.propTypes = ue;
595
+ /* harmony default export */ const se = ce;
596
+ // CONCATENATED MODULE: ./src/DualListbox/ListboxStyles.ts
597
+ var ve = D().ul.withConfig({
598
+ displayName: "ListboxStyles__StyledListbox",
599
+ componentId: "sc-11oqtd-0"
600
+ })([ "background-color:", ";border:1px solid ", ";border-radius:", ";grid-row:lists;list-style:none;margin:0;min-height:0;min-width:0;overflow:auto;padding:0;position:relative;&:focus{box-shadow:", ";outline:none;}", "" ], N.variables.transparent, (0,
601
+ N.pick)({
602
+ enterprise: N.variables.gray60,
603
+ prisma: N.variables.interactiveColorBorder
604
+ }), N.variables.borderRadius, N.variables.focusShadow, (function(e) {
605
+ var r = e.$columnNumber;
606
+ return (0, _.css)([ "grid-column:", ";" ], "list".concat(r));
607
+ }));
608
+ // CONCATENATED MODULE: ./src/DualListbox/Listbox.tsx
609
+ function de() {
610
+ de = Object.assign || function(e) {
611
+ for (var r = 1; r < arguments.length; r++) {
612
+ var t = arguments[r];
613
+ for (var n in t) {
614
+ if (Object.prototype.hasOwnProperty.call(t, n)) {
615
+ e[n] = t[n];
616
+ }
617
+ }
618
+ }
619
+ return e;
620
+ };
621
+ return de.apply(this, arguments);
1142
622
  }
1143
-
1144
- updateActiveOption(name, value);
1145
- event.preventDefault();
1146
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
1147
- values: newValues,
1148
- listName: name
1149
- });
1150
- }, [getIsAllSelected, getSelectedValues, getValues, setSelectedValues, updateActiveOption, updateInternalDisplay, onSelect]);
1151
- var handleRangeSelection = (0,external_react_namespaceObject.useCallback)(function (event, _ref3) {
1152
- var initialIndex = _ref3.initialIndex,
1153
- name = _ref3.name,
1154
- targetIndex = _ref3.targetIndex;
1155
- var valuesArr = getValues(name);
1156
- var startIndex = Math.min(initialIndex, targetIndex);
1157
- var endIndex = Math.max(initialIndex, targetIndex);
1158
- var newValues = [];
1159
-
1160
- if (isControlledRef.current) {
1161
- newValues = valuesArr.slice(startIndex, endIndex + 1);
1162
- } else {
1163
- valuesArr.forEach(function (value, index) {
1164
- var newSelectedState = false;
1165
-
1166
- if (index >= startIndex && index <= endIndex) {
1167
- newSelectedState = true;
1168
- newValues.push(value);
1169
- } else {
1170
- newSelectedState = false;
1171
- }
1172
-
1173
- if (selectedByValue.current[value] !== newSelectedState) {
1174
- selectedByValue.current[value] = newSelectedState;
1175
- updateOption(value);
623
+ function fe(e, r) {
624
+ if (e == null) return {};
625
+ var t = pe(e, r);
626
+ var n, a;
627
+ if (Object.getOwnPropertySymbols) {
628
+ var i = Object.getOwnPropertySymbols(e);
629
+ for (a = 0; a < i.length; a++) {
630
+ n = i[a];
631
+ if (r.indexOf(n) >= 0) continue;
632
+ if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
633
+ t[n] = e[n];
634
+ }
1176
635
  }
1177
- });
1178
- setSelectedValues(name, newValues);
1179
- updateInternalDisplay(name);
636
+ return t;
1180
637
  }
1181
-
1182
- updateActiveOption(name, valuesArr[targetIndex]);
1183
- event.preventDefault();
1184
- event.stopPropagation();
1185
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
1186
- values: newValues,
1187
- listName: name
1188
- });
1189
- }, [getValues, onSelect, setSelectedValues, updateActiveOption, updateInternalDisplay, updateOption]);
1190
- var handleSelectAll = (0,external_react_namespaceObject.useCallback)(function (event, _ref4) {
1191
- var name = _ref4.name,
1192
- selected = _ref4.selected;
1193
- var listValues = getValues(name);
1194
- var newValues = selected === true ? [] : listValues;
1195
- var newState = selected !== true;
1196
-
1197
- if (!isControlledRef.current) {
1198
- listValues === null || listValues === void 0 ? void 0 : listValues.forEach(function (value) {
1199
- if (selectedByValue.current[value] !== newState) {
1200
- selectedByValue.current[value] = newState;
1201
- updateOption(value);
638
+ function pe(e, r) {
639
+ if (e == null) return {};
640
+ var t = {};
641
+ var n = Object.keys(e);
642
+ var a, i;
643
+ for (i = 0; i < n.length; i++) {
644
+ a = n[i];
645
+ if (r.indexOf(a) >= 0) continue;
646
+ t[a] = e[a];
1202
647
  }
1203
- });
1204
- setSelectedValues(name, newValues);
1205
- updateInternalDisplay(name);
648
+ return t;
1206
649
  }
1207
-
1208
- event.preventDefault();
1209
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
1210
- values: newValues,
1211
- listName: name
1212
- });
1213
- }, [getValues, onSelect, setSelectedValues, updateInternalDisplay, updateOption]); // handleMoveValues does not update the active value of the source, keyboard and mouse differ, only the target active value is updated
1214
-
1215
- var handleMoveValues = (0,external_react_namespaceObject.useCallback)(function (event, sourceName, targetName) {
1216
- var sourceValues = getValues(sourceName);
1217
- var sourceSelectedValues = getSelectedValues(sourceName);
1218
- var sourceIsAllSelected = getIsAllSelected(sourceName);
1219
- var targetValues = getValues(targetName);
1220
- var targetActiveValue = getActiveValue(targetName);
1221
-
1222
- if (sourceValues.length === 0 || !sourceIsAllSelected && sourceSelectedValues.length === 0) {
1223
- return;
650
+ var be = {
651
+ children: i().node,
652
+ index: i().number.isRequired,
653
+ label: i().string.isRequired,
654
+ multiSelect: i().bool,
655
+ name: i().string.isRequired,
656
+ onClick: i().func,
657
+ onKeyDown: i().func,
658
+ onSelectAllClick: i().func
659
+ };
660
+ function me(e) {
661
+ var r = e.children, a = e.elementRef, i = e.index, l = e.label, o = e.name, u = e.onClick, c = e.onKeyDown, s = e.onSelectAllClick, v = fe(e, [ "children", "elementRef", "index", "label", "name", "onClick", "onKeyDown", "onSelectAllClick" ]);
662
+ var d = (0, t.useRef)((0, ae.createDOMID)("label"));
663
+ var f = (0, t.useRef)((0, ae.createDOMID)("listbox"));
664
+ var p = (0, t.useContext)(g), b = p.controlled, m = p.getSelectedStateForValue, h = p.getActiveValue, y = p.getSelectedValueCount, k = p.getValueCount, C = p.updateLabelRefreshHookByName, x = p.updateOptionRefreshHookByValue;
665
+ var S = (0, t.useCallback)((function(e, r) {
666
+ var t = r.value;
667
+ u === null || u === void 0 ? void 0 : u(e, {
668
+ name: o,
669
+ value: t
670
+ });
671
+ }), [ o, u ]);
672
+ var w = (0, t.useCallback)((function(e) {
673
+ return {
674
+ active: (h === null || h === void 0 ? void 0 : h(o)) === e,
675
+ selected: !!(m === null || m === void 0 ? void 0 : m(e))
676
+ };
677
+ }), [ o, h, m ]);
678
+ var O = (0, t.useCallback)((function() {
679
+ var e = (k === null || k === void 0 ? void 0 : k(o)) || 0;
680
+ var r = (y === null || y === void 0 ? void 0 : y(o)) || 0;
681
+ var t = false;
682
+ if (r > 0) {
683
+ t = r === e ? true : "some";
684
+ }
685
+ return {
686
+ disabled: e < 1,
687
+ selected: t,
688
+ selectedValueCount: r,
689
+ valueCount: e
690
+ };
691
+ }), [ o, y, k ]);
692
+ var R = function e(r) {
693
+ c === null || c === void 0 ? void 0 : c(r, {
694
+ name: o
695
+ });
696
+ };
697
+ var E = function e(r, t) {
698
+ var n = t.selected;
699
+ s === null || s === void 0 ? void 0 : s(r, {
700
+ name: o,
701
+ selected: n
702
+ });
703
+ };
704
+ var I = function e(r) {
705
+ // this prevents default text selection when using shift + click
706
+ if (r.shiftKey && r.target !== r.currentTarget) {
707
+ r.preventDefault();
708
+ }
709
+ };
710
+ var L = (0, t.useMemo)((function() {
711
+ return {
712
+ onOptionClick: S,
713
+ updateLabelRefreshHookByName: C,
714
+ updateOptionRefreshHookByValue: x,
715
+ getOptionStateForValue: w,
716
+ getLabelState: O,
717
+ controlled: b
718
+ };
719
+ }), [ S, C, x, w, O, b ]);
720
+
721
+ return n().createElement(Q.Provider, {
722
+ value: L
723
+ }, n().createElement(se, {
724
+ id: d.current,
725
+ index: i,
726
+ listId: f.current,
727
+ name: o,
728
+ onSwitchClick: E,
729
+ value: l
730
+ }), n().createElement(ve, de({
731
+ "aria-activedescendant": "",
732
+ "aria-labelledby": d.current,
733
+ "aria-multiselectable": true,
734
+ "data-test": "listbox",
735
+ id: f.current,
736
+ onKeyDown: R,
737
+ onMouseDown: I,
738
+ ref: a,
739
+ role: "listbox",
740
+ tabIndex: 0,
741
+ $columnNumber: i
742
+ }, v), r));
1224
743
  }
1225
-
1226
- if (!targetActiveValue && sourceSelectedValues.length > 0) {
1227
- // target lacks an active value, default to the first
1228
- // skip the render it will be catch in batch
1229
- updateActiveOption(targetName, sourceSelectedValues[0], true);
744
+ me.propTypes = be;
745
+ /* harmony default export */ const he = me;
746
+ // CONCATENATED MODULE: external "@splunk/react-ui/Box"
747
+ const ge = require("@splunk/react-ui/Box");
748
+ var ye = e.n(ge);
749
+ // CONCATENATED MODULE: ./src/DualListbox/DualListboxStyles.ts
750
+ var ke = D()(ye()).withConfig({
751
+ displayName: "DualListboxStyles__StyledBox",
752
+ componentId: "sc-1te6bz0-0"
753
+ })([ "display:grid;grid-template-columns:[list0] 180px [actions] min-content [list1] 180px;grid-template-rows:[headers] min-content [lists] 160px;gap:", " ", ";", " ", "" ], N.variables.spacingXSmall, N.variables.spacingSmall, (function(e) {
754
+ var r = e.$inline;
755
+ return r && (0, _.css)([ "display:inline-grid;" ]);
756
+ }), (function(e) {
757
+ var r = e.$fill;
758
+ return r && (0, _.css)([ "height:100%;grid-template-columns:[list0] 1fr [actions] min-content [list1] 1fr;grid-template-rows:[headers] min-content [lists] 1fr;position:relative;width:100%;" ]);
759
+ }));
760
+ var Ce = D().div.withConfig({
761
+ displayName: "DualListboxStyles__StyledFlexColumn",
762
+ componentId: "sc-1te6bz0-1"
763
+ })([ "&::before{content:'';grid-column:headers;grid-row:lists;}align-items:center;display:flex;flex-direction:column;gap:", ";grid-column:actions;grid-row:lists;justify-content:center;" ], N.variables.spacingSmall);
764
+ // CONCATENATED MODULE: ./src/DualListbox/DualListbox.tsx
765
+ function xe() {
766
+ xe = Object.assign || function(e) {
767
+ for (var r = 1; r < arguments.length; r++) {
768
+ var t = arguments[r];
769
+ for (var n in t) {
770
+ if (Object.prototype.hasOwnProperty.call(t, n)) {
771
+ e[n] = t[n];
772
+ }
773
+ }
774
+ }
775
+ return e;
776
+ };
777
+ return xe.apply(this, arguments);
1230
778
  }
1231
-
1232
- var message = (0,format_namespaceObject.sprintf)((0,i18n_namespaceObject._)('Moved %(count)d items to %(listLabel)s list'), {
1233
- count: sourceSelectedValues.length,
1234
- listLabel: targetName === listOneName ? listOneLabel : listTwoLabel
1235
- }); // These new values do not perserve sort position, may need to be refactored with sort logic (SUI-5270).
1236
-
1237
- var newSourceValues = sourceIsAllSelected ? [] : arrayWithRemovedValues(sourceValues, sourceSelectedValues);
1238
- var newTargetValues = targetValues.concat(sourceSelectedValues);
1239
-
1240
- if (!isControlledRef.current) {
1241
- sourceSelectedValues.forEach(function (value) {
1242
- selectedByValue.current[value] = false;
1243
- });
1244
- setValues(targetName, newTargetValues);
1245
- setValues(sourceName, newSourceValues);
1246
- setSelectedValues(sourceName, []);
1247
- screenReaderValueRef.current = message; // move is a batch update, force a full render, no internal update needed
1248
-
1249
- forceUpdate();
779
+ function Se(e, r) {
780
+ return Ie(e) || Ee(e, r) || Oe(e, r) || we();
1250
781
  }
1251
-
1252
- var data = {
1253
- affectedValues: sourceSelectedValues,
1254
- sourceListName: sourceName || '',
1255
- sourceValues: newSourceValues,
1256
- targetListName: targetName || '',
1257
- targetValues: newTargetValues,
1258
- screenReaderMessage: message || '',
1259
- values: sourceSelectedValues.slice()
1260
- };
1261
- event.preventDefault();
1262
- onChange === null || onChange === void 0 ? void 0 : onChange(event, data);
1263
- }, [forceUpdate, getActiveValue, getIsAllSelected, getSelectedValues, getValues, onChange, setSelectedValues, setValues, updateActiveOption, listOneName, listOneLabel, listTwoLabel]);
1264
- var handleToolbarButtonClick = (0,external_react_namespaceObject.useCallback)(function (event, _ref5) {
1265
- var name = _ref5.name;
1266
- var isAllSelected = getIsAllSelected(name);
1267
- var activeValue = getActiveValue(name);
1268
- var targetName = name === listOneName ? listTwoName : listOneName;
1269
-
1270
- if (activeValue && (isAllSelected || !!selectedByValue.current[activeValue])) {
1271
- // active option was present in items to be removed, clear the active option
1272
- updateActiveOption(name);
782
+ function we() {
783
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
1273
784
  }
1274
-
1275
- handleMoveValues(event, name, targetName);
1276
- }, [getActiveValue, getIsAllSelected, handleMoveValues, updateActiveOption, listOneName, listTwoName]);
1277
- var handleOptionClick = (0,external_react_namespaceObject.useCallback)(function (event, _ref6) {
1278
- var name = _ref6.name,
1279
- value = _ref6.value;
1280
-
1281
- if (event.nativeEvent.shiftKey) {
1282
- handleRangeSelection(event, {
1283
- targetIndex: indexByValue.current[value],
1284
- initialIndex: initialRangeIndex.current,
1285
- name: name
1286
- });
1287
- } else {
1288
- handleSingleSelection(event, {
1289
- name: name,
1290
- value: value
1291
- });
785
+ function Oe(e, r) {
786
+ if (!e) return;
787
+ if (typeof e === "string") return Re(e, r);
788
+ var t = Object.prototype.toString.call(e).slice(8, -1);
789
+ if (t === "Object" && e.constructor) t = e.constructor.name;
790
+ if (t === "Map" || t === "Set") return Array.from(e);
791
+ if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return Re(e, r);
1292
792
  }
1293
- }, [handleRangeSelection, handleSingleSelection]);
1294
- var handleSelectAllClick = (0,external_react_namespaceObject.useCallback)(function (event, data) {
1295
- handleSelectAll(event, data);
1296
- }, [handleSelectAll]);
1297
- var handleKeyMatch = (0,external_react_namespaceObject.useCallback)(function (e, name) {
1298
- var currentKey = e.nativeEvent.key;
1299
- var availableOptions = getAvailableMatchOptions(name); // Checking for a single character to avoid complications from double-byte languages and emojis.
1300
-
1301
- if (currentKey.length === 1) {
1302
- var matches = [];
1303
- var character = {
1304
- index: 0,
1305
- value: currentKey
1306
- };
1307
-
1308
- if (!matchCharacter.current) {
1309
- if (currentKey === ' ') {
1310
- resetMatches();
1311
- return;
793
+ function Re(e, r) {
794
+ if (r == null || r > e.length) r = e.length;
795
+ for (var t = 0, n = new Array(r); t < r; t++) {
796
+ n[t] = e[t];
1312
797
  }
1313
-
1314
- matches = fuzzyMatch(availableOptions, character);
1315
- } else if (matchOptions.current.length > 1) {
1316
- character.index = matchCharacter.current.index + 1;
1317
- matches = fuzzyMatch(matchOptions.current, character);
1318
- }
1319
-
1320
- if (matches.length) {
1321
- var matchIndex = 0; // If the active option is a first character match, cycle to the next matching option.
1322
-
1323
- if (character.index === 0 && matches.length > 1) {
1324
- var activeValue = getActiveValue(name);
1325
-
1326
- if (activeValue) {
1327
- var activeMatchIndex = matches.findIndex(function (match) {
1328
- return match.value === activeValue;
1329
- });
1330
-
1331
- if (activeMatchIndex >= 0) {
1332
- matchIndex = activeMatchIndex === matches.length - 1 ? 0 : activeMatchIndex + 1;
798
+ return n;
799
+ }
800
+ function Ee(e, r) {
801
+ if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
802
+ var t = [];
803
+ var n = true;
804
+ var a = false;
805
+ var i = undefined;
806
+ try {
807
+ for (var l = e[Symbol.iterator](), o; !(n = (o = l.next()).done); n = true) {
808
+ t.push(o.value);
809
+ if (r && t.length === r) break;
810
+ }
811
+ } catch (e) {
812
+ a = true;
813
+ i = e;
814
+ } finally {
815
+ try {
816
+ if (!n && l["return"] != null) l["return"]();
817
+ } finally {
818
+ if (a) throw i;
1333
819
  }
1334
- }
1335
820
  }
1336
-
1337
- updateActiveOption(name, matches[matchIndex].value);
1338
- }
1339
-
1340
- matchOptions.current = matches;
1341
- matchCharacter.current = character;
1342
-
1343
- if (matchTimeout.current) {
1344
- clearTimeout(matchTimeout.current);
1345
- }
1346
-
1347
- matchTimeout.current = setTimeout(resetMatches, 500);
1348
- e.preventDefault();
1349
- e.stopPropagation();
821
+ return t;
1350
822
  }
1351
- }, [getActiveValue, getAvailableMatchOptions, resetMatches, updateActiveOption]);
1352
- var handleListboxKeyDown = (0,external_react_namespaceObject.useCallback)(function (event, _ref7) {
1353
- var name = _ref7.name;
1354
- var eventKeyCode = (0,keyboard_namespaceObject.keycode)(event.nativeEvent);
1355
- var listboxValues = getValues(name);
1356
- var listboxSelectedValues = getSelectedValues(name);
1357
- var isAllSelected = getIsAllSelected(name);
1358
- var activeValue = getActiveValue(name);
1359
- var activeIndex = activeValue ? indexByValue.current[activeValue] : -1;
1360
- var initialIndex = initialRangeIndex.current >= 0 ? initialRangeIndex.current : 0;
1361
-
1362
- if (screenReaderValueRef.current && screenReaderValueRef.current.length > 0) {
1363
- clearScreenReaderText();
823
+ function Ie(e) {
824
+ if (Array.isArray(e)) return e;
1364
825
  }
1365
-
1366
- var nextActiveValue = activeValue;
1367
-
1368
- switch (eventKeyCode) {
1369
- case 'shift':
1370
- initialRangeIndex.current = activeIndex;
1371
- break;
1372
-
1373
- case 'home':
1374
- if (event.nativeEvent.ctrlKey && event.nativeEvent.shiftKey) {
1375
- // handle select until start
1376
- handleRangeSelection(event, {
1377
- targetIndex: 0,
1378
- initialIndex: initialIndex,
1379
- name: name
1380
- });
1381
- } else {
1382
- var _listboxValues = _slicedToArray(listboxValues, 1);
1383
-
1384
- nextActiveValue = _listboxValues[0];
826
+ function Le(e, r) {
827
+ if (e == null) return {};
828
+ var t = qe(e, r);
829
+ var n, a;
830
+ if (Object.getOwnPropertySymbols) {
831
+ var i = Object.getOwnPropertySymbols(e);
832
+ for (a = 0; a < i.length; a++) {
833
+ n = i[a];
834
+ if (r.indexOf(n) >= 0) continue;
835
+ if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
836
+ t[n] = e[n];
837
+ }
1385
838
  }
1386
-
1387
- break;
1388
-
1389
- case 'end':
1390
- if (event.nativeEvent.ctrlKey && event.nativeEvent.shiftKey) {
1391
- // handle select until end
1392
- handleRangeSelection(event, {
1393
- targetIndex: listboxValues.length - 1,
1394
- initialIndex: initialIndex,
1395
- name: name
1396
- });
1397
- } else {
1398
- nextActiveValue = listboxValues[listboxValues.length - 1];
839
+ return t;
840
+ }
841
+ function qe(e, r) {
842
+ if (e == null) return {};
843
+ var t = {};
844
+ var n = Object.keys(e);
845
+ var a, i;
846
+ for (i = 0; i < n.length; i++) {
847
+ a = n[i];
848
+ if (r.indexOf(a) >= 0) continue;
849
+ t[a] = e[a];
1399
850
  }
1400
-
1401
- break;
1402
-
1403
- case 'up':
1404
- if (event.nativeEvent.shiftKey) {
1405
- // handle select until previous
1406
- handleRangeSelection(event, {
1407
- targetIndex: Math.max(activeIndex - 1, 0),
1408
- initialIndex: initialIndex,
1409
- name: name
1410
- });
1411
- } else {
1412
- nextActiveValue = listboxValues[Math.max(activeIndex - 1, 0)];
851
+ return t;
852
+ }
853
+ /** @public */ var je = {
854
+ children: i().node,
855
+ controlled: i().bool,
856
+ fill: i().bool,
857
+ inline: i().bool,
858
+ onChange: i().func,
859
+ onSelect: i().func,
860
+ lists: i().arrayOf(i().shape({
861
+ name: i().string.isRequired,
862
+ label: i().string.isRequired
863
+ })).isRequired
864
+ };
865
+ function _e(e) {
866
+ var r, a, i, u;
867
+ var s = e.children, f = e.controlled, b = f === void 0 ? false : f, m = e.fill, h = m === void 0 ? false : m, y = e.inline, k = y === void 0 ? false : y, R = e.onChange, I = e.onSelect, q = e.lists, j = Le(e, [ "children", "controlled", "fill", "inline", "onChange", "onSelect", "lists" ]);
868
+ // @docs-props-type DualListboxPropsBase
869
+ var _ = p()();
870
+ var D = (0, t.useRef)(false);
871
+ (0, t.useEffect)((function() {
872
+ D.current = true;
873
+ }), []);
874
+ // TODO: Implement shared isControlled hook (SUI-5283).
875
+ var N = (0, t.useRef)(b);
876
+ // List One "Available" Refs
877
+ var V = (0, t.useRef)([]);
878
+ var P = (0, t.useRef)([]);
879
+ var H = (0, t.useRef)();
880
+ var T = (0, t.useRef)(null);
881
+ var B = (0, t.useRef)([]);
882
+ // List Two "Selected" Refs
883
+ var M = (0, t.useRef)([]);
884
+ var A = (0, t.useRef)([]);
885
+ var K = (0, t.useRef)();
886
+ var $ = (0, t.useRef)(null);
887
+ var z = (0, t.useRef)([]);
888
+ // Refresh Hook Stores, used to render indivual elements when uncontrolled
889
+ var U = (0, t.useRef)({});
890
+ var W = (0, t.useRef)({});
891
+ var X = (0, t.useRef)({});
892
+ var G = (0, t.useRef)();
893
+ // Activity Values Refs
894
+ var J = (0, t.useRef)();
895
+ var Q = (0, t.useRef)({});
896
+ var Y = (0, t.useRef)({});
897
+ var Z = (0, t.useRef)({});
898
+ var ee = (0, t.useRef)(0);
899
+ // Key Match Refs
900
+ var re = (0, t.useRef)();
901
+ var te = (0, t.useRef)();
902
+ var ne = (0, t.useRef)([]);
903
+ if (false) {}
904
+ if (false) {}
905
+ if (false) {}
906
+ // Unpack names and labels instead of relying on `lists` being a consistent reference
907
+ var ae = (r = q[0]) === null || r === void 0 ? void 0 : r.name;
908
+ var ie = (a = q[1]) === null || a === void 0 ? void 0 : a.name;
909
+ var le = (i = q[0]) === null || i === void 0 ? void 0 : i.label;
910
+ var oe = (u = q[1]) === null || u === void 0 ? void 0 : u.label;
911
+ // Copy previous state for uncontrolled render so it's not voided by following value reset
912
+ var ue = new Set(M.current);
913
+ // This ensures we recapture the indexes after batch moves, but will be refactored when sorting is implemented (SUI-5270).
914
+ V.current = [];
915
+ M.current = [];
916
+ B.current = [];
917
+ z.current = [];
918
+ // Clean the data stores before we copy the references into listData
919
+ if (!D.current || N.current) {
920
+ P.current = [];
921
+ A.current = [];
922
+ Q.current = {};
923
+ Z.current = {};
924
+ Y.current = {};
1413
925
  }
1414
-
1415
- break;
1416
-
1417
- case 'down':
1418
- if (event.nativeEvent.shiftKey) {
1419
- // handle select until next
1420
- handleRangeSelection(event, {
1421
- targetIndex: Math.min(activeIndex + 1, listboxValues.length - 1),
1422
- initialIndex: initialIndex,
1423
- name: name
1424
- });
926
+ var ce = [ {
927
+ options: [],
928
+ matchOptions: B.current,
929
+ values: V.current,
930
+ selectedValues: P.current,
931
+ activeValue: H.current,
932
+ activeFound: !H.current
933
+ }, {
934
+ options: [],
935
+ matchOptions: z.current,
936
+ values: M.current,
937
+ selectedValues: A.current,
938
+ activeValue: K.current,
939
+ activeFound: !K.current
940
+ } ];
941
+ if (!D.current || N.current) {
942
+ t.Children.toArray(s).filter(t.isValidElement).forEach((function(e) {
943
+ var r = e.props, t = r.value, n = r.label;
944
+ var a = e.props.listName === ie;
945
+ var i = ce[a ? 1 : 0];
946
+ // Ensure the active value is found on controlled renders
947
+ if (!i.activeFound && i.activeValue === t) {
948
+ i.activeFound = true;
949
+ }
950
+ i.values.push(t);
951
+ i.options.push(e);
952
+ i.matchOptions.push({
953
+ value: t,
954
+ label: n
955
+ });
956
+ var l = !!e.props.selected;
957
+ if (l) {
958
+ i.selectedValues.push(t);
959
+ }
960
+ Q.current[t] = l;
961
+ Z.current[t] = i.values.length - 1;
962
+ Y.current[t] = e.props.id;
963
+ }));
1425
964
  } else {
1426
- nextActiveValue = listboxValues[Math.min(activeIndex + 1, listboxValues.length - 1)];
1427
- }
1428
-
1429
- break;
1430
-
1431
- case 'space':
1432
- if (activeValue != null) {
1433
- handleSingleSelection(event, {
1434
- name: name,
1435
- value: activeValue
1436
- });
1437
- }
1438
-
1439
- break;
1440
-
1441
- case 'enter':
1442
- if (name === listOneName) {
1443
- if (isAllSelected) {
1444
- // all values moved, no longer an active value
1445
- nextActiveValue = undefined;
1446
- } else if (listboxSelectedValues.length > 0) {
1447
- // somes values moved, determine next active value
1448
- nextActiveValue = findNextValue(activeIndex, listboxValues, listboxSelectedValues);
1449
- }
1450
-
1451
- handleMoveValues(event, listOneName, listTwoName);
965
+ t.Children.toArray(s).filter(t.isValidElement).forEach((function(e) {
966
+ var r = e.props, t = r.value, n = r.label;
967
+ var a = ue.has(t);
968
+ var i = ce[a ? 1 : 0];
969
+ i.values.push(t);
970
+ i.options.push(e);
971
+ i.matchOptions.push({
972
+ value: t,
973
+ label: n
974
+ });
975
+ Z.current[t] = i.values.length - 1;
976
+ }));
1452
977
  }
1453
-
1454
- break;
1455
-
1456
- case 'delete':
1457
- if (name === listTwoName) {
1458
- if (isAllSelected) {
1459
- // all values moved, no longer an active value
1460
- nextActiveValue = undefined;
1461
- } else if (listboxSelectedValues.length > 0) {
1462
- // somes values moved, determine next active value
1463
- nextActiveValue = findNextValue(activeIndex, listboxValues, listboxSelectedValues);
1464
- }
1465
-
1466
- handleMoveValues(event, listTwoName, listOneName);
978
+ var se = (0, t.useCallback)((function(e, r) {
979
+ if (e === ae) {
980
+ H.current = r;
981
+ } else {
982
+ K.current = r;
983
+ }
984
+ }), [ ae ]);
985
+ var ve = (0, t.useCallback)((function(e) {
986
+ return e === ae ? H.current : K.current;
987
+ }), [ ae ]);
988
+ var de = (0, t.useCallback)((function(e, r) {
989
+ if (e === ae) {
990
+ P.current = r;
991
+ } else {
992
+ A.current = r;
993
+ }
994
+ }), [ ae ]);
995
+ var fe = (0, t.useCallback)((function(e) {
996
+ return e === ae ? P.current : A.current;
997
+ }), [ ae ]);
998
+ var pe = (0, t.useCallback)((function(e) {
999
+ return fe(e).length;
1000
+ }), [ fe ]);
1001
+ var be = (0, t.useCallback)((function() {
1002
+ return J.current;
1003
+ }), []);
1004
+ var me = (0, t.useCallback)((function(e) {
1005
+ return Q.current[e];
1006
+ }), []);
1007
+ var ge = (0, t.useCallback)((function(e, r) {
1008
+ if (e === ae) {
1009
+ V.current = r;
1010
+ } else {
1011
+ M.current = r;
1012
+ }
1013
+ }), [ ae ]);
1014
+ var ye = (0, t.useCallback)((function(e) {
1015
+ return e === ae ? V.current : M.current;
1016
+ }), [ ae ]);
1017
+ var we = (0, t.useCallback)((function(e) {
1018
+ return ye(e).length;
1019
+ }), [ ye ]);
1020
+ var Oe = (0, t.useCallback)((function(e) {
1021
+ var r = we(e);
1022
+ return r > 0 && r === pe(e);
1023
+ }), [ we, pe ]);
1024
+ var Re = (0, t.useCallback)((function(e) {
1025
+ return e === ae ? B.current : z.current;
1026
+ }), [ ae ]);
1027
+ var Ee = (0, t.useCallback)((function(e) {
1028
+ var r = we(e);
1029
+ var t = pe(e);
1030
+ return {
1031
+ disabled: r < 1 || t < 1
1032
+ };
1033
+ }), [ we, pe ]);
1034
+ var Ie = (0, t.useCallback)((function() {
1035
+ if (J.current && J.current.length > 0) {
1036
+ var e;
1037
+ J.current = "";
1038
+ (e = G.current) === null || e === void 0 ? void 0 : e.call(G);
1039
+ }
1040
+ }), []);
1041
+ var qe = (0, t.useCallback)((function() {
1042
+ re.current = undefined;
1043
+ ne.current = [];
1044
+ if (te.current) {
1045
+ clearTimeout(te.current);
1046
+ }
1047
+ }), []);
1048
+ var je = (0, t.useCallback)((function(e) {
1049
+ G.current = e;
1050
+ }), []);
1051
+ var _e = (0, t.useCallback)((function(e, r) {
1052
+ if (r) {
1053
+ X.current[e] = r;
1054
+ } else {
1055
+ delete X.current[e];
1056
+ }
1057
+ }), []);
1058
+ var De = (0, t.useCallback)((function(e, r) {
1059
+ if (r) {
1060
+ W.current[e] = r;
1061
+ } else {
1062
+ delete W.current[e];
1063
+ }
1064
+ }), []);
1065
+ var Ne = (0, t.useCallback)((function(e, r) {
1066
+ if (r) {
1067
+ U.current[e] = r;
1068
+ } else {
1069
+ delete U.current[e];
1070
+ }
1071
+ }), []);
1072
+ var Ve = (0, t.useCallback)((function(e) {
1073
+ if (e) {
1074
+ var r, t;
1075
+ (r = (t = X.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
1076
+ }
1077
+ }), []);
1078
+ var Pe = (0, t.useCallback)((function(e) {
1079
+ if (e) {
1080
+ var r, t;
1081
+ (r = (t = W.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
1082
+ }
1083
+ }), []);
1084
+ var He = (0, t.useCallback)((function(e) {
1085
+ if (e) {
1086
+ var r, t;
1087
+ (r = (t = U.current)[e]) === null || r === void 0 ? void 0 : r.call(t);
1088
+ }
1089
+ }), []);
1090
+ var Te = (0, t.useCallback)((function(e) {
1091
+ Ie();
1092
+ Pe(e);
1093
+ He(ae);
1094
+ He(ie);
1095
+ }), [ Ie, He, Pe, ae, ie ]);
1096
+ var Be = (0, t.useCallback)((function(e, r) {
1097
+ var t = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
1098
+ var n = e === ae ? T.current : $.current;
1099
+ if (!n) {
1100
+ return;
1101
+ }
1102
+ var a = ve(e);
1103
+ se(e, r);
1104
+ if (!t) {
1105
+ // render new
1106
+ Ve(r);
1107
+ }
1108
+ if (r !== a) {
1109
+ if (!t) {
1110
+ // render previous
1111
+ Ve(a);
1112
+ }
1113
+ var i = r ? Y.current[r] : "";
1114
+ // update listbox via dom to avoid render + child render
1115
+ n.setAttribute("aria-activedescendant", i);
1116
+ if (!t && i.length > 0) {
1117
+ var l = n.querySelector("#".concat(i));
1118
+ O(l);
1119
+ }
1120
+ }
1121
+ }), [ ve, se, Ve, ae ]);
1122
+ var Me = (0, t.useCallback)((function(e, r) {
1123
+ var t = r.value, n = r.name;
1124
+ var a = Oe(n) ? ye(n) : fe(n);
1125
+ var i = x(a, t);
1126
+ if (!N.current) {
1127
+ Q.current[t] = !Q.current[t];
1128
+ de(n, i);
1129
+ Te(n);
1130
+ }
1131
+ Be(n, t);
1132
+ e.preventDefault();
1133
+ I === null || I === void 0 ? void 0 : I(e, {
1134
+ values: i,
1135
+ listName: n
1136
+ });
1137
+ }), [ Oe, fe, ye, de, Be, Te, I ]);
1138
+ var Ae = (0, t.useCallback)((function(e, r) {
1139
+ var t = r.initialIndex, n = r.name, a = r.targetIndex;
1140
+ var i = ye(n);
1141
+ var l = Math.min(t, a);
1142
+ var o = Math.max(t, a);
1143
+ var u = [];
1144
+ if (N.current) {
1145
+ u = i.slice(l, o + 1);
1146
+ } else {
1147
+ i.forEach((function(e, r) {
1148
+ var t = false;
1149
+ if (r >= l && r <= o) {
1150
+ t = true;
1151
+ u.push(e);
1152
+ } else {
1153
+ t = false;
1154
+ }
1155
+ if (Q.current[e] !== t) {
1156
+ Q.current[e] = t;
1157
+ Ve(e);
1158
+ }
1159
+ }));
1160
+ de(n, u);
1161
+ Te(n);
1162
+ }
1163
+ Be(n, i[a]);
1164
+ e.preventDefault();
1165
+ e.stopPropagation();
1166
+ I === null || I === void 0 ? void 0 : I(e, {
1167
+ values: u,
1168
+ listName: n
1169
+ });
1170
+ }), [ ye, I, de, Be, Te, Ve ]);
1171
+ var Ke = (0, t.useCallback)((function(e, r) {
1172
+ var t = r.name, n = r.selected;
1173
+ var a = ye(t);
1174
+ var i = n === true ? [] : a;
1175
+ var l = n !== true;
1176
+ if (!N.current) {
1177
+ a === null || a === void 0 ? void 0 : a.forEach((function(e) {
1178
+ if (Q.current[e] !== l) {
1179
+ Q.current[e] = l;
1180
+ Ve(e);
1181
+ }
1182
+ }));
1183
+ de(t, i);
1184
+ Te(t);
1185
+ }
1186
+ e.preventDefault();
1187
+ I === null || I === void 0 ? void 0 : I(e, {
1188
+ values: i,
1189
+ listName: t
1190
+ });
1191
+ }), [ ye, I, de, Te, Ve ]);
1192
+ // handleMoveValues does not update the active value of the source, keyboard and mouse differ, only the target active value is updated
1193
+ var $e = (0, t.useCallback)((function(e, r, t) {
1194
+ var n = ye(r);
1195
+ var a = fe(r);
1196
+ var i = Oe(r);
1197
+ var o = ye(t);
1198
+ var u = ve(t);
1199
+ if (n.length === 0 || !i && a.length === 0) {
1200
+ return;
1201
+ }
1202
+ if (!u && a.length > 0) {
1203
+ // target lacks an active value, default to the first
1204
+ // skip the render it will be catch in batch
1205
+ Be(t, a[0], true);
1206
+ }
1207
+ var c = (0, d.sprintf)((0, l._)("Moved %(count)d items to %(listLabel)s list"), {
1208
+ count: a.length,
1209
+ listLabel: t === ae ? le : oe
1210
+ });
1211
+ // These new values do not perserve sort position, may need to be refactored with sort logic (SUI-5270).
1212
+ var s = i ? [] : S(n, a);
1213
+ var v = o.concat(a);
1214
+ if (!N.current) {
1215
+ a.forEach((function(e) {
1216
+ Q.current[e] = false;
1217
+ }));
1218
+ ge(t, v);
1219
+ ge(r, s);
1220
+ de(r, []);
1221
+ J.current = c;
1222
+ // move is a batch update, force a full render, no internal update needed
1223
+ _();
1224
+ }
1225
+ var f = {
1226
+ affectedValues: a,
1227
+ sourceListName: r || "",
1228
+ sourceValues: s,
1229
+ targetListName: t || "",
1230
+ targetValues: v,
1231
+ screenReaderMessage: c || "",
1232
+ values: a.slice()
1233
+ };
1234
+ e.preventDefault();
1235
+ R === null || R === void 0 ? void 0 : R(e, f);
1236
+ }), [ _, ve, Oe, fe, ye, R, de, ge, Be, ae, le, oe ]);
1237
+ var Fe = (0, t.useCallback)((function(e, r) {
1238
+ var t = r.name;
1239
+ var n = Oe(t);
1240
+ var a = ve(t);
1241
+ var i = t === ae ? ie : ae;
1242
+ if (a && (n || !!Q.current[a])) {
1243
+ // active option was present in items to be removed, clear the active option
1244
+ Be(t);
1245
+ }
1246
+ $e(e, t, i);
1247
+ }), [ ve, Oe, $e, Be, ae, ie ]);
1248
+ var ze = (0, t.useCallback)((function(e, r) {
1249
+ var t = r.name, n = r.value;
1250
+ if (e.nativeEvent.shiftKey) {
1251
+ Ae(e, {
1252
+ targetIndex: Z.current[n],
1253
+ initialIndex: ee.current,
1254
+ name: t
1255
+ });
1256
+ } else {
1257
+ Me(e, {
1258
+ name: t,
1259
+ value: n
1260
+ });
1261
+ }
1262
+ }), [ Ae, Me ]);
1263
+ var Ue = (0, t.useCallback)((function(e, r) {
1264
+ Ke(e, r);
1265
+ }), [ Ke ]);
1266
+ var We = (0, t.useCallback)((function(e, r) {
1267
+ var t = e.nativeEvent.key;
1268
+ var n = Re(r);
1269
+ // Checking for a single character to avoid complications from double-byte languages and emojis.
1270
+ if (t.length === 1) {
1271
+ var a = [];
1272
+ var i = {
1273
+ index: 0,
1274
+ value: t
1275
+ };
1276
+ if (!re.current) {
1277
+ if (t === " ") {
1278
+ qe();
1279
+ return;
1280
+ }
1281
+ a = E(n, i);
1282
+ } else if (ne.current.length > 1) {
1283
+ i.index = re.current.index + 1;
1284
+ a = E(ne.current, i);
1285
+ }
1286
+ if (a.length) {
1287
+ var l = 0;
1288
+ // If the active option is a first character match, cycle to the next matching option.
1289
+ if (i.index === 0 && a.length > 1) {
1290
+ var o = ve(r);
1291
+ if (o) {
1292
+ var u = a.findIndex((function(e) {
1293
+ return e.value === o;
1294
+ }));
1295
+ if (u >= 0) {
1296
+ l = u === a.length - 1 ? 0 : u + 1;
1297
+ }
1298
+ }
1299
+ }
1300
+ Be(r, a[l].value);
1301
+ }
1302
+ ne.current = a;
1303
+ re.current = i;
1304
+ if (te.current) {
1305
+ clearTimeout(te.current);
1306
+ }
1307
+ te.current = setTimeout(qe, 500);
1308
+ e.preventDefault();
1309
+ e.stopPropagation();
1310
+ }
1311
+ }), [ ve, Re, qe, Be ]);
1312
+ var Xe = (0, t.useCallback)((function(e, r) {
1313
+ var t = r.name;
1314
+ var n = (0, o.keycode)(e.nativeEvent);
1315
+ var a = ye(t);
1316
+ var i = fe(t);
1317
+ var l = Oe(t);
1318
+ var u = ve(t);
1319
+ var c = u ? Z.current[u] : -1;
1320
+ var s = ee.current >= 0 ? ee.current : 0;
1321
+ if (J.current && J.current.length > 0) {
1322
+ Ie();
1323
+ }
1324
+ var v = u;
1325
+ switch (n) {
1326
+ case "shift":
1327
+ ee.current = c;
1328
+ break;
1329
+
1330
+ case "home":
1331
+ if (e.nativeEvent.ctrlKey && e.nativeEvent.shiftKey) {
1332
+ // handle select until start
1333
+ Ae(e, {
1334
+ targetIndex: 0,
1335
+ initialIndex: s,
1336
+ name: t
1337
+ });
1338
+ } else {
1339
+ var d = Se(a, 1);
1340
+ v = d[0];
1341
+ }
1342
+ break;
1343
+
1344
+ case "end":
1345
+ if (e.nativeEvent.ctrlKey && e.nativeEvent.shiftKey) {
1346
+ // handle select until end
1347
+ Ae(e, {
1348
+ targetIndex: a.length - 1,
1349
+ initialIndex: s,
1350
+ name: t
1351
+ });
1352
+ } else {
1353
+ v = a[a.length - 1];
1354
+ }
1355
+ break;
1356
+
1357
+ case "up":
1358
+ if (e.nativeEvent.shiftKey) {
1359
+ // handle select until previous
1360
+ Ae(e, {
1361
+ targetIndex: Math.max(c - 1, 0),
1362
+ initialIndex: s,
1363
+ name: t
1364
+ });
1365
+ } else {
1366
+ v = a[Math.max(c - 1, 0)];
1367
+ }
1368
+ break;
1369
+
1370
+ case "down":
1371
+ if (e.nativeEvent.shiftKey) {
1372
+ // handle select until next
1373
+ Ae(e, {
1374
+ targetIndex: Math.min(c + 1, a.length - 1),
1375
+ initialIndex: s,
1376
+ name: t
1377
+ });
1378
+ } else {
1379
+ v = a[Math.min(c + 1, a.length - 1)];
1380
+ }
1381
+ break;
1382
+
1383
+ case "space":
1384
+ if (u != null) {
1385
+ Me(e, {
1386
+ name: t,
1387
+ value: u
1388
+ });
1389
+ }
1390
+ break;
1391
+
1392
+ case "enter":
1393
+ if (t === ae) {
1394
+ if (l) {
1395
+ // all values moved, no longer an active value
1396
+ v = undefined;
1397
+ } else if (i.length > 0) {
1398
+ // somes values moved, determine next active value
1399
+ v = w(c, a, i);
1400
+ }
1401
+ $e(e, ae, ie);
1402
+ }
1403
+ break;
1404
+
1405
+ case "delete":
1406
+ if (t === ie) {
1407
+ if (l) {
1408
+ // all values moved, no longer an active value
1409
+ v = undefined;
1410
+ } else if (i.length > 0) {
1411
+ // somes values moved, determine next active value
1412
+ v = w(c, a, i);
1413
+ }
1414
+ $e(e, ie, ae);
1415
+ }
1416
+ break;
1417
+
1418
+ default:
1419
+ if (n === "a" && (e.nativeEvent.ctrlKey || e.nativeEvent.metaKey)) {
1420
+ // handle control + A, otherwise let 'a' passthrough
1421
+ Ke(e, {
1422
+ name: t,
1423
+ selected: l
1424
+ });
1425
+ } else {
1426
+ // do fuzzy match
1427
+ We(e, t);
1428
+ }
1429
+ break;
1430
+ }
1431
+ if (v !== u) {
1432
+ e.preventDefault();
1433
+ Be(t, v);
1434
+ }
1435
+ }), [ Ie, ve, Oe, fe, ye, We, $e, Ae, Me, Ke, Be, ae, ie ]);
1436
+ var Ge = (0, t.useMemo)((function() {
1437
+ return {
1438
+ onButtonClick: Fe,
1439
+ updateButtonRefreshHookByName: Ne,
1440
+ getButtonState: Ee
1441
+ };
1442
+ }), [ Fe, Ne, Ee ]);
1443
+ var Je = (0, t.useMemo)((function() {
1444
+ return {
1445
+ controlled: N.current,
1446
+ getActiveValue: ve,
1447
+ getScreenReaderMessage: be,
1448
+ getSelectedStateForValue: me,
1449
+ getSelectedValueCount: pe,
1450
+ getValueCount: we,
1451
+ updateLabelRefreshHookByName: De,
1452
+ updateOptionRefreshHookByValue: _e,
1453
+ updateScreenReaderRefreshHook: je
1454
+ };
1455
+ }), [ ve, be, me, pe, we, De, _e, je ]);
1456
+ if (N.current && !ce[0].activeFound) {
1457
+ // listOne active value wasn't found, likely the result of a controlled state reset
1458
+ // update interal values, skip the render it will be caught in batch
1459
+ Be(ae, undefined, true);
1467
1460
  }
1468
-
1469
- break;
1470
-
1471
- default:
1472
- if (eventKeyCode === 'a' && (event.nativeEvent.ctrlKey || event.nativeEvent.metaKey)) {
1473
- // handle control + A, otherwise let 'a' passthrough
1474
- handleSelectAll(event, {
1475
- name: name,
1476
- selected: isAllSelected
1477
- });
1478
- } else {
1479
- // do fuzzy match
1480
- handleKeyMatch(event, name);
1461
+ if (N.current && !ce[1].activeFound) {
1462
+ // listTwo active value wasn't found, likely the result of a controlled state reset
1463
+ // update interal values, skip the render it will be caught in batch
1464
+ Be(ie, undefined, true);
1481
1465
  }
1482
-
1483
- break;
1466
+
1467
+ return n().createElement(ke, xe({
1468
+ "data-test": "dual-listbox",
1469
+ $inline: h ? false : k,
1470
+ $fill: h
1471
+ }, j), n().createElement(g.Provider, {
1472
+ value: Je
1473
+ }, n().createElement(he, {
1474
+ index: 0,
1475
+ elementRef: T,
1476
+ label: le,
1477
+ name: ae,
1478
+ onClick: ze,
1479
+ onKeyDown: Xe,
1480
+ onSelectAllClick: Ue
1481
+ }, ce[0].options), n().createElement(Ce, null, n().createElement(L.Provider, {
1482
+ value: Ge
1483
+ }, n().createElement(F, {
1484
+ ariaLabel: (0, d.sprintf)((0, l._)("Move selected options to %(listLabel)s list"), {
1485
+ listLabel: oe
1486
+ }),
1487
+ ariaKeyShortcuts: "Enter",
1488
+ "data-test": "move-to-secondary",
1489
+ icon: n().createElement(v(), {
1490
+ hideDefaultTooltip: true,
1491
+ screenReaderText: null
1492
+ }),
1493
+ name: ae,
1494
+ tooltipLabel: (0, d.sprintf)((0, l._)("Move to %(listLabel)s"), {
1495
+ listLabel: oe
1496
+ }),
1497
+ tooltipPlacement: "left"
1498
+ }), n().createElement(F, {
1499
+ ariaLabel: (0, d.sprintf)((0, l._)("Move selected options to %(listLabel)s list"), {
1500
+ listLabel: le
1501
+ }),
1502
+ ariaKeyShortcuts: "Delete",
1503
+ "data-test": "move-to-primary",
1504
+ icon: n().createElement(c(), {
1505
+ hideDefaultTooltip: true,
1506
+ screenReaderText: null
1507
+ }),
1508
+ name: ie,
1509
+ tooltipLabel: (0, d.sprintf)((0, l._)("Move to %(listLabel)s"), {
1510
+ listLabel: le
1511
+ }),
1512
+ tooltipPlacement: "right"
1513
+ }))), n().createElement(he, {
1514
+ index: 1,
1515
+ elementRef: $,
1516
+ label: oe,
1517
+ name: ie,
1518
+ onClick: ze,
1519
+ onKeyDown: Xe,
1520
+ onSelectAllClick: Ue
1521
+ }, ce[1].options), n().createElement(C, null)));
1484
1522
  }
1485
-
1486
- if (nextActiveValue !== activeValue) {
1487
- event.preventDefault();
1488
- updateActiveOption(name, nextActiveValue);
1489
- }
1490
- }, [clearScreenReaderText, getActiveValue, getIsAllSelected, getSelectedValues, getValues, handleKeyMatch, handleMoveValues, handleRangeSelection, handleSingleSelection, handleSelectAll, updateActiveOption, listOneName, listTwoName]);
1491
- var toolbarContextValue = (0,external_react_namespaceObject.useMemo)(function () {
1492
- return {
1493
- onButtonClick: handleToolbarButtonClick,
1494
- updateButtonRefreshHookByName: updateButtonRefreshHookByName,
1495
- getButtonState: getButtonState
1496
- };
1497
- }, [handleToolbarButtonClick, updateButtonRefreshHookByName, getButtonState]);
1498
- var dualContextValue = (0,external_react_namespaceObject.useMemo)(function () {
1499
- return {
1500
- controlled: isControlledRef.current,
1501
- getActiveValue: getActiveValue,
1502
- getScreenReaderMessage: getScreenReaderMessage,
1503
- getSelectedStateForValue: getSelectedStateForValue,
1504
- getSelectedValueCount: getSelectedValueCount,
1505
- getValueCount: getValueCount,
1506
- updateLabelRefreshHookByName: updateLabelRefreshHookByName,
1507
- updateOptionRefreshHookByValue: updateOptionRefreshHookByValue,
1508
- updateScreenReaderRefreshHook: updateScreenReaderRefreshHook
1509
- };
1510
- }, [getActiveValue, getScreenReaderMessage, getSelectedStateForValue, getSelectedValueCount, getValueCount, updateLabelRefreshHookByName, updateOptionRefreshHookByValue, updateScreenReaderRefreshHook]);
1511
-
1512
- if (isControlledRef.current && !listData[0].activeFound) {
1513
- // listOne active value wasn't found, likely the result of a controlled state reset
1514
- // update interal values, skip the render it will be caught in batch
1515
- updateActiveOption(listOneName, undefined, true);
1516
- }
1517
-
1518
- if (isControlledRef.current && !listData[1].activeFound) {
1519
- // listTwo active value wasn't found, likely the result of a controlled state reset
1520
- // update interal values, skip the render it will be caught in batch
1521
- updateActiveOption(listTwoName, undefined, true);
1522
- }
1523
-
1524
- return /*#__PURE__*/external_react_default().createElement(StyledBox, DualListbox_extends({
1525
- "data-test": "dual-listbox",
1526
- $inline: fill ? false : inline,
1527
- $fill: fill
1528
- }, otherProps), /*#__PURE__*/external_react_default().createElement(DualListbox_DualListboxContext.Provider, {
1529
- value: dualContextValue
1530
- }, /*#__PURE__*/external_react_default().createElement(DualListbox_Listbox, {
1531
- index: 0,
1532
- elementRef: listOneNodeRef,
1533
- label: listOneLabel,
1534
- name: listOneName,
1535
- onClick: handleOptionClick,
1536
- onKeyDown: handleListboxKeyDown,
1537
- onSelectAllClick: handleSelectAllClick
1538
- }, listData[0].options), /*#__PURE__*/external_react_default().createElement(StyledFlexColumn, null, /*#__PURE__*/external_react_default().createElement(DualListbox_ToolbarContext.Provider, {
1539
- value: toolbarContextValue
1540
- }, /*#__PURE__*/external_react_default().createElement(DualListbox_ToolbarButton, {
1541
- ariaLabel: (0,format_namespaceObject.sprintf)((0,i18n_namespaceObject._)('Move selected options to %(listLabel)s list'), {
1542
- listLabel: listTwoLabel
1543
- }),
1544
- ariaKeyShortcuts: "Enter",
1545
- "data-test": "move-to-secondary",
1546
- icon: /*#__PURE__*/external_react_default().createElement((ChevronRight_default()), {
1547
- hideDefaultTooltip: true,
1548
- screenReaderText: null
1549
- }),
1550
- name: listOneName,
1551
- tooltipLabel: (0,format_namespaceObject.sprintf)((0,i18n_namespaceObject._)('Move to %(listLabel)s'), {
1552
- listLabel: listTwoLabel
1553
- }),
1554
- tooltipPlacement: "left"
1555
- }), /*#__PURE__*/external_react_default().createElement(DualListbox_ToolbarButton, {
1556
- ariaLabel: (0,format_namespaceObject.sprintf)((0,i18n_namespaceObject._)('Move selected options to %(listLabel)s list'), {
1557
- listLabel: listOneLabel
1558
- }),
1559
- ariaKeyShortcuts: "Delete",
1560
- "data-test": "move-to-primary",
1561
- icon: /*#__PURE__*/external_react_default().createElement((ChevronLeft_default()), {
1562
- hideDefaultTooltip: true,
1563
- screenReaderText: null
1564
- }),
1565
- name: listTwoName,
1566
- tooltipLabel: (0,format_namespaceObject.sprintf)((0,i18n_namespaceObject._)('Move to %(listLabel)s'), {
1567
- listLabel: listOneLabel
1568
- }),
1569
- tooltipPlacement: "right"
1570
- }))), /*#__PURE__*/external_react_default().createElement(DualListbox_Listbox, {
1571
- index: 1,
1572
- elementRef: listTwoNodeRef,
1573
- label: listTwoLabel,
1574
- name: listTwoName,
1575
- onClick: handleOptionClick,
1576
- onKeyDown: handleListboxKeyDown,
1577
- onSelectAllClick: handleSelectAllClick
1578
- }, listData[1].options), /*#__PURE__*/external_react_default().createElement(DualListbox_ScreenReaderWrapper, null)));
1579
- }
1580
-
1581
- DualListbox.propTypes = DualListbox_propTypes;
1582
- DualListbox.Option = DualListbox_Option;
1583
- /* harmony default export */ const DualListbox_DualListbox = (DualListbox);
1584
-
1585
- ;// CONCATENATED MODULE: ./src/DualListbox/index.ts
1586
-
1587
-
1588
- module.exports = __webpack_exports__;
1589
- /******/ })()
1590
- ;
1523
+ _e.propTypes = je;
1524
+ _e.Option = ne;
1525
+ /* harmony default export */ const De = _e;
1526
+ // CONCATENATED MODULE: ./src/DualListbox/index.ts
1527
+ module.exports = r;
1528
+ /******/})();