@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.
- package/Accordion.js +425 -325
- package/Anchor.js +147 -117
- package/Animation.js +142 -94
- package/AnimationToggle.js +197 -193
- package/Box.js +145 -118
- package/Breadcrumbs.js +288 -206
- package/Button.js +488 -465
- package/ButtonGroup.js +160 -128
- package/ButtonSimple.js +543 -462
- package/CHANGELOG.md +24 -3
- package/Calendar.js +1111 -1001
- package/Card.js +771 -598
- package/CardLayout.js +205 -147
- package/Chip.js +509 -488
- package/Clickable.js +414 -352
- package/CloseButton.js +165 -142
- package/Code.js +1807 -2084
- package/CollapsiblePanel.js +586 -519
- package/Color.js +1068 -1068
- package/ColumnLayout.js +402 -363
- package/ComboBox.js +903 -794
- package/Concertina.js +997 -802
- package/ControlGroup.js +687 -594
- package/Date.js +567 -547
- package/DefinitionList.js +308 -234
- package/Divider.js +149 -118
- package/Dropdown.js +459 -416
- package/DualListbox.js +1479 -1541
- package/EventListener.js +94 -97
- package/File.js +1051 -969
- package/FormRows.js +883 -696
- package/Heading.js +216 -193
- package/Image.js +446 -402
- package/JSONTree.js +690 -551
- package/Layer.js +437 -410
- package/Link.js +336 -255
- package/List.js +213 -161
- package/Markdown.js +509 -487
- package/Menu.js +1104 -1056
- package/Message.js +475 -441
- package/MessageBar.js +387 -373
- package/Modal.js +810 -634
- package/ModalLayer.js +326 -243
- package/Monogram.js +308 -276
- package/Multiselect.js +3564 -3364
- package/Number.js +729 -687
- package/Paginator.js +510 -449
- package/Paragraph.js +145 -112
- package/Popover.js +1459 -1432
- package/Progress.js +301 -246
- package/RadioBar.js +634 -527
- package/RadioList.js +483 -444
- package/Resize.js +530 -489
- package/ResultsMenu.js +479 -455
- package/ScreenReaderContent.js +142 -111
- package/Scroll.js +595 -456
- package/ScrollContainerContext.js +197 -206
- package/Search.js +756 -650
- package/Select.js +2446 -2345
- package/SidePanel.js +390 -284
- package/Slider.js +680 -676
- package/SlidingPanels.js +639 -503
- package/SplitButton.js +464 -367
- package/StaticContent.js +161 -133
- package/StepBar.js +386 -358
- package/Switch.js +710 -640
- package/TabBar.js +741 -680
- package/TabLayout.js +406 -322
- package/Table.js +4974 -4616
- package/Text.js +1170 -1138
- package/TextArea.js +1102 -1090
- package/Tooltip.js +624 -581
- package/TransitionOpen.js +489 -422
- package/Typography.js +176 -153
- package/WaitSpinner.js +230 -206
- package/package.json +7 -7
- package/types/src/Color/Color.d.ts +0 -1
- package/types/src/JSONTree/JSONTreeContext.d.ts +7 -0
- package/types/src/JSONTree/TreeNode.d.ts +5 -0
- package/types/src/RadioBar/RadioBar.d.ts +1 -0
- package/types/src/ResultsMenu/ResultsMenu.d.ts +0 -2
- package/types/src/Select/docs/examples/Icons.d.ts +1 -9
- package/types/src/Slider/Slider.d.ts +1 -0
- package/types/src/TabBar/Tab.d.ts +10 -1
- package/types/src/TabBar/TabBar.d.ts +4 -2
- package/types/src/Table/Head.d.ts +7 -3
- package/types/src/Table/Table.d.ts +3 -2
- package/types/src/Table/TableContext.d.ts +2 -0
- package/useForceUpdate.js +112 -82
- package/useKeyPress.js +74 -71
- package/usePrevious.js +65 -65
- package/useRovingFocus.js +122 -138
package/DualListbox.js
CHANGED
|
@@ -1,1590 +1,1528 @@
|
|
|
1
|
-
/******/ (() => {
|
|
2
|
-
|
|
3
|
-
/******/
|
|
4
|
-
/******/
|
|
5
|
-
/******/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
/******/
|
|
9
|
-
/******/
|
|
10
|
-
/******/
|
|
11
|
-
/******/
|
|
12
|
-
/******/
|
|
13
|
-
/******/
|
|
14
|
-
/******/
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
/******/
|
|
20
|
-
/******/
|
|
21
|
-
/******/
|
|
22
|
-
/******/
|
|
23
|
-
/******/
|
|
24
|
-
/******/
|
|
25
|
-
/******/
|
|
26
|
-
/******/
|
|
27
|
-
/******/
|
|
28
|
-
/******/
|
|
29
|
-
/******/
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
/******/
|
|
34
|
-
/******/
|
|
35
|
-
/******/
|
|
36
|
-
/******/
|
|
37
|
-
/******/
|
|
38
|
-
/******/
|
|
39
|
-
/******/
|
|
40
|
-
/******/
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
/******/
|
|
44
|
-
/******/
|
|
45
|
-
/******/
|
|
46
|
-
/******/
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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
|
|
92
|
-
/* harmony default export */
|
|
93
|
-
|
|
94
|
-
function
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
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
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
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
|
-
|
|
234
|
-
|
|
235
|
-
|
|
129
|
+
|
|
130
|
+
return n().createElement(m(), y({
|
|
131
|
+
"aria-live": "assertive"
|
|
132
|
+
}, r), l() || "");
|
|
236
133
|
}
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
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
|
|
254
|
-
/* harmony default export */
|
|
255
|
-
|
|
256
|
-
const
|
|
257
|
-
var
|
|
258
|
-
|
|
259
|
-
const
|
|
260
|
-
var
|
|
261
|
-
|
|
262
|
-
const
|
|
263
|
-
|
|
264
|
-
const
|
|
265
|
-
var
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
})
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
}));
|
|
314
|
-
var
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
})(["align-items:center;display:flex;flex-direction:row;flex-shrink:0;font-size:", ";justify-content:center;max-width:100%;"], (0,
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
function
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
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
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
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
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
})
|
|
434
|
-
|
|
435
|
-
|
|
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
|
|
445
|
-
/* harmony default export */
|
|
446
|
-
|
|
447
|
-
function
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
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
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
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
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
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
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
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
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
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
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
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
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
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
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
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
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
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
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
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
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
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
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
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
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
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
|
-
|
|
1352
|
-
|
|
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
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
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
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
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
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
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
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
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
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
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
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
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
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
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
|
+
/******/})();
|