@splunk/react-ui 4.21.0 → 4.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/Accordion.js +425 -325
  2. package/Anchor.js +147 -117
  3. package/Animation.js +142 -94
  4. package/AnimationToggle.js +197 -193
  5. package/Box.js +145 -118
  6. package/Breadcrumbs.js +288 -206
  7. package/Button.js +488 -465
  8. package/ButtonGroup.js +160 -128
  9. package/ButtonSimple.js +543 -462
  10. package/CHANGELOG.md +24 -3
  11. package/Calendar.js +1111 -1001
  12. package/Card.js +771 -598
  13. package/CardLayout.js +205 -147
  14. package/Chip.js +509 -488
  15. package/Clickable.js +414 -352
  16. package/CloseButton.js +165 -142
  17. package/Code.js +1807 -2084
  18. package/CollapsiblePanel.js +586 -519
  19. package/Color.js +1068 -1068
  20. package/ColumnLayout.js +402 -363
  21. package/ComboBox.js +903 -794
  22. package/Concertina.js +997 -802
  23. package/ControlGroup.js +687 -594
  24. package/Date.js +567 -547
  25. package/DefinitionList.js +308 -234
  26. package/Divider.js +149 -118
  27. package/Dropdown.js +459 -416
  28. package/DualListbox.js +1479 -1541
  29. package/EventListener.js +94 -97
  30. package/File.js +1051 -969
  31. package/FormRows.js +883 -696
  32. package/Heading.js +216 -193
  33. package/Image.js +446 -402
  34. package/JSONTree.js +690 -551
  35. package/Layer.js +437 -410
  36. package/Link.js +336 -255
  37. package/List.js +213 -161
  38. package/Markdown.js +509 -487
  39. package/Menu.js +1104 -1056
  40. package/Message.js +475 -441
  41. package/MessageBar.js +387 -373
  42. package/Modal.js +810 -634
  43. package/ModalLayer.js +326 -243
  44. package/Monogram.js +308 -276
  45. package/Multiselect.js +3564 -3364
  46. package/Number.js +729 -687
  47. package/Paginator.js +510 -449
  48. package/Paragraph.js +145 -112
  49. package/Popover.js +1459 -1432
  50. package/Progress.js +301 -246
  51. package/RadioBar.js +634 -527
  52. package/RadioList.js +483 -444
  53. package/Resize.js +530 -489
  54. package/ResultsMenu.js +479 -455
  55. package/ScreenReaderContent.js +142 -111
  56. package/Scroll.js +595 -456
  57. package/ScrollContainerContext.js +197 -206
  58. package/Search.js +756 -650
  59. package/Select.js +2446 -2345
  60. package/SidePanel.js +390 -284
  61. package/Slider.js +680 -676
  62. package/SlidingPanels.js +639 -503
  63. package/SplitButton.js +464 -367
  64. package/StaticContent.js +161 -133
  65. package/StepBar.js +386 -358
  66. package/Switch.js +710 -640
  67. package/TabBar.js +741 -680
  68. package/TabLayout.js +406 -322
  69. package/Table.js +4974 -4616
  70. package/Text.js +1170 -1138
  71. package/TextArea.js +1102 -1090
  72. package/Tooltip.js +624 -581
  73. package/TransitionOpen.js +489 -422
  74. package/Typography.js +176 -153
  75. package/WaitSpinner.js +230 -206
  76. package/package.json +7 -7
  77. package/types/src/Color/Color.d.ts +0 -1
  78. package/types/src/JSONTree/JSONTreeContext.d.ts +7 -0
  79. package/types/src/JSONTree/TreeNode.d.ts +5 -0
  80. package/types/src/RadioBar/RadioBar.d.ts +1 -0
  81. package/types/src/ResultsMenu/ResultsMenu.d.ts +0 -2
  82. package/types/src/Select/docs/examples/Icons.d.ts +1 -9
  83. package/types/src/Slider/Slider.d.ts +1 -0
  84. package/types/src/TabBar/Tab.d.ts +10 -1
  85. package/types/src/TabBar/TabBar.d.ts +4 -2
  86. package/types/src/Table/Head.d.ts +7 -3
  87. package/types/src/Table/Table.d.ts +3 -2
  88. package/types/src/Table/TableContext.d.ts +2 -0
  89. package/useForceUpdate.js +112 -82
  90. package/useKeyPress.js +74 -71
  91. package/usePrevious.js +65 -65
  92. package/useRovingFocus.js +122 -138
package/StepBar.js CHANGED
@@ -1,360 +1,388 @@
1
- /******/ (() => { // webpackBootstrap
2
- /******/ "use strict";
3
- /******/ // The require scope
4
- /******/ var __webpack_require__ = {};
5
- /******/
6
- /************************************************************************/
7
- /******/ /* webpack/runtime/compat get default export */
8
- /******/ (() => {
9
- /******/ // getDefaultExport function for compatibility with non-harmony modules
10
- /******/ __webpack_require__.n = (module) => {
11
- /******/ var getter = module && module.__esModule ?
12
- /******/ () => (module['default']) :
13
- /******/ () => (module);
14
- /******/ __webpack_require__.d(getter, { a: getter });
15
- /******/ return getter;
16
- /******/ };
17
- /******/ })();
18
- /******/
19
- /******/ /* webpack/runtime/define property getters */
20
- /******/ (() => {
21
- /******/ // define getter functions for harmony exports
22
- /******/ __webpack_require__.d = (exports, definition) => {
23
- /******/ for(var key in definition) {
24
- /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
25
- /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
26
- /******/ }
27
- /******/ }
28
- /******/ };
29
- /******/ })();
30
- /******/
31
- /******/ /* webpack/runtime/hasOwnProperty shorthand */
32
- /******/ (() => {
33
- /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
34
- /******/ })();
35
- /******/
36
- /******/ /* webpack/runtime/make namespace object */
37
- /******/ (() => {
38
- /******/ // define __esModule on exports
39
- /******/ __webpack_require__.r = (exports) => {
40
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
41
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
42
- /******/ }
43
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
44
- /******/ };
45
- /******/ })();
46
- /******/
47
- /************************************************************************/
48
- var __webpack_exports__ = {};
49
- // ESM COMPAT FLAG
50
- __webpack_require__.r(__webpack_exports__);
51
-
52
- // EXPORTS
53
- __webpack_require__.d(__webpack_exports__, {
54
- Step: () => (/* reexport */ StepBar_Step),
55
- "default": () => (/* reexport */ StepBar_StepBar)
56
- });
57
-
58
- ;// CONCATENATED MODULE: external "react"
59
- const external_react_namespaceObject = require("react");
60
- var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
61
- ;// CONCATENATED MODULE: external "prop-types"
62
- const external_prop_types_namespaceObject = require("prop-types");
63
- var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_namespaceObject);
64
- ;// CONCATENATED MODULE: external "@splunk/ui-utils/id"
65
- const id_namespaceObject = require("@splunk/ui-utils/id");
66
- ;// CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
67
- const useSplunkTheme_namespaceObject = require("@splunk/themes/useSplunkTheme");
68
- var useSplunkTheme_default = /*#__PURE__*/__webpack_require__.n(useSplunkTheme_namespaceObject);
69
- ;// CONCATENATED MODULE: external "styled-components"
70
- const external_styled_components_namespaceObject = require("styled-components");
71
- var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_namespaceObject);
72
- ;// CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
73
- const CheckCircle_namespaceObject = require("@splunk/react-icons/CheckCircle");
74
- var CheckCircle_default = /*#__PURE__*/__webpack_require__.n(CheckCircle_namespaceObject);
75
- ;// CONCATENATED MODULE: external "@splunk/react-icons/ExclamationCircle"
76
- const ExclamationCircle_namespaceObject = require("@splunk/react-icons/ExclamationCircle");
77
- var ExclamationCircle_default = /*#__PURE__*/__webpack_require__.n(ExclamationCircle_namespaceObject);
78
- ;// CONCATENATED MODULE: external "@splunk/themes"
79
- const themes_namespaceObject = require("@splunk/themes");
80
- ;// CONCATENATED MODULE: ./src/StepBar/StepStyles.ts
81
-
82
-
83
-
84
-
85
- var primaryBackgroundColor = '#1A8929'; // SUI-2439 to meet WCAG AA compliance
86
-
87
- var Styled = external_styled_components_default().li.withConfig({
88
- displayName: "StepStyles__Styled",
89
- componentId: "sc-756fxp-0"
90
- })(["", " ", ";text-align:center;padding:", ";", ";", ""], themes_namespaceObject.mixins.reset('block'), (0,themes_namespaceObject.pick)({
91
- enterprise: (0,external_styled_components_namespaceObject.css)(["position:relative;flex:1 1 0;"]),
92
- prisma: (0,external_styled_components_namespaceObject.css)(["display:flex;align-items:center;flex:0 1 auto;margin:0 12px 0 12px;"])
93
- }), (0,themes_namespaceObject.pick)({
94
- enterprise: (0,external_styled_components_namespaceObject.css)(["25px 15px 0"]),
95
- prisma: {
96
- comfortable: '8px 8px 8px 0',
97
- compact: '4px 8px 4px 0'
98
- }
99
- }), (0,themes_namespaceObject.pick)({
100
- prisma: (0,external_styled_components_namespaceObject.css)(["&::before{align-items:center;box-sizing:border-box;border-radius:50%;counter-increment:", ";content:counter(", ");display:inline-flex;flex-shrink:0;font-size:12px;height:20px;width:20px;justify-content:center;line-height:20px;margin:2px 16px 2px 18px;}"], function (_ref) {
101
- var $idCounter = _ref.$idCounter;
102
- return $idCounter;
103
- }, function (_ref2) {
104
- var $idCounter = _ref2.$idCounter;
105
- return $idCounter;
106
- })
107
- }), (0,themes_namespaceObject.pickVariant)('$status', {
108
- error: {
109
- prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";&::before{visibility:hidden;position:absolute;}"], themes_namespaceObject.variables.contentColorActive)
110
- },
111
- active: {
112
- prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";&::before{color:", ";background:", ";border:1px solid ", ";}"], themes_namespaceObject.variables.contentColorActive, themes_namespaceObject.variables.contentColorInverted, themes_namespaceObject.variables.contentColorActive, themes_namespaceObject.variables.contentColorActive)
113
- },
114
- next: {
115
- enterprise: (0,external_styled_components_namespaceObject.css)(["color:", ";"], themes_namespaceObject.variables.textDisabledColor),
116
- prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";&::before{color:", ";border:1px solid ", ";}"], themes_namespaceObject.variables.contentColorMuted, themes_namespaceObject.variables.contentColorMuted, themes_namespaceObject.variables.contentColorMuted)
117
- },
118
- prev: {
119
- prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";&::before{visibility:hidden;position:absolute;}"], themes_namespaceObject.variables.contentColorDefault)
120
- }
121
- }));
122
- var iconStyles = (0,external_styled_components_namespaceObject.css)(["height:24px;width:24px;margin:0 14px 0 16px;"]);
123
- var StyledCheckCircleIcon = external_styled_components_default()((CheckCircle_default())).withConfig({
124
- displayName: "StepStyles__StyledCheckCircleIcon",
125
- componentId: "sc-756fxp-1"
126
- })(["", ";color:", ";"], iconStyles, themes_namespaceObject.variables.accentColorPositive);
127
- var StyledExclamationCircleIcon = external_styled_components_default()((ExclamationCircle_default())).withConfig({
128
- displayName: "StepStyles__StyledExclamationCircleIcon",
129
- componentId: "sc-756fxp-2"
130
- })(["", ";color:", ";"], iconStyles, themes_namespaceObject.variables.accentColorNegative);
131
- var StyledSvg = external_styled_components_default().svg.withConfig({
132
- displayName: "StepStyles__StyledSvg",
133
- componentId: "sc-756fxp-3"
134
- })(["position:absolute;left:0;right:0;top:0;"]);
135
- var StyledPrevOrActiveRect = external_styled_components_default().rect.withConfig({
136
- displayName: "StepStyles__StyledPrevOrActiveRect",
137
- componentId: "sc-756fxp-4"
138
- })(["fill:", ";"], primaryBackgroundColor);
139
- var StyledPrevOrActiveCircle = StyledPrevOrActiveRect.withComponent('circle');
140
- var StyledGray = external_styled_components_default().rect.withConfig({
141
- displayName: "StepStyles__StyledGray",
142
- componentId: "sc-756fxp-5"
143
- })(["fill:", ";"], themes_namespaceObject.variables.gray60);
144
- var StyledNext = external_styled_components_default().circle.withConfig({
145
- displayName: "StepStyles__StyledNext",
146
- componentId: "sc-756fxp-6"
147
- })(["stroke:", ";stroke-width:3px;fill:", ";"], themes_namespaceObject.variables.gray60, themes_namespaceObject.variables.backgroundColor);
148
-
149
- ;// CONCATENATED MODULE: ./src/StepBar/StepBarContext.tsx
150
-
151
- var StepBarContext = /*#__PURE__*/(0,external_react_namespaceObject.createContext)({
152
- activeStepId: 0
153
- });
154
- StepBarContext.displayName = 'StepBar';
155
- /* harmony default export */ const StepBar_StepBarContext = (StepBarContext);
156
- ;// CONCATENATED MODULE: ./src/StepBar/Step.tsx
157
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
158
-
159
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
160
-
161
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
162
-
163
-
164
-
165
-
166
-
167
-
168
- var propTypes = {
169
- children: (external_prop_types_default()).node,
170
- elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
171
- error: (external_prop_types_default()).bool,
172
- stepId: (external_prop_types_default()).any
173
- };
174
-
175
- function Step(_ref) {
176
- var children = _ref.children,
177
- elementRef = _ref.elementRef,
178
- _ref$error = _ref.error,
179
- error = _ref$error === void 0 ? false : _ref$error,
180
- stepId = _ref.stepId,
181
- otherProps = _objectWithoutProperties(_ref, ["children", "elementRef", "error", "stepId"]);
182
-
183
- // @docs-props-type StepPropsBase
184
- var _useContext = (0,external_react_namespaceObject.useContext)(StepBarContext),
185
- activeStepIdContext = _useContext.activeStepId,
186
- idCounterContext = _useContext.idCounter,
187
- lastChildIndexContext = _useContext.lastChildIndex;
188
-
189
- var _useSplunkTheme = useSplunkTheme_default()(),
190
- isEnterprise = _useSplunkTheme.isEnterprise;
191
-
192
- var status = 'next';
193
- var active = activeStepIdContext === stepId;
194
- var isFirst = stepId === 0;
195
- var isLast = stepId === lastChildIndexContext;
196
-
197
- if (stepId < activeStepIdContext) {
198
- status = 'prev';
199
- }
200
-
201
- if (active && !error) {
202
- status = 'active';
203
- }
204
-
205
- if (active && error) {
206
- status = 'error';
207
- }
208
-
209
- if (isEnterprise) {
210
- return /*#__PURE__*/external_react_default().createElement(Styled, _extends({
211
- $status: status,
212
- "data-test-status": status,
213
- "data-test": "step",
214
- "data-test-step-id": stepId,
215
- ref: elementRef
216
- }, otherProps), /*#__PURE__*/external_react_default().createElement(StyledSvg, {
217
- focusable: "false",
218
- width: "100%",
219
- height: "15px",
220
- viewBox: "0 0 100 15",
221
- preserveAspectRatio: "none",
222
- xmlns: "http://www.w3.org/2000/svg"
223
- }, /*#__PURE__*/external_react_default().createElement(StyledGray, {
224
- x: isFirst ? '50' : '0',
225
- y: "6",
226
- width: isLast || isFirst ? '50%' : '100%',
227
- height: "3"
228
- }), (status === 'active' || status === 'error') && !isFirst && /*#__PURE__*/external_react_default().createElement(StyledPrevOrActiveRect, {
229
- x: "0",
230
- y: "6",
231
- width: "50%",
232
- height: "3"
233
- }), status === 'prev' && /*#__PURE__*/external_react_default().createElement(StyledPrevOrActiveRect, {
234
- x: isFirst ? '50%' : '0',
235
- y: "6",
236
- width: "100%",
237
- height: "3"
238
- })), /*#__PURE__*/external_react_default().createElement(StyledSvg, {
239
- focusable: "false",
240
- width: "100%",
241
- height: "15px",
242
- viewBox: "0 0 15 15",
243
- xmlns: "http://www.w3.org/2000/svg"
244
- }, status !== 'next' && /*#__PURE__*/external_react_default().createElement(StyledPrevOrActiveCircle, {
245
- cx: "50%",
246
- cy: "50%",
247
- r: "7.5"
248
- }), status === 'next' && /*#__PURE__*/external_react_default().createElement(StyledNext, {
249
- cx: "50%",
250
- cy: "50%",
251
- r: "6"
252
- })), children);
253
- }
254
-
255
- return /*#__PURE__*/external_react_default().createElement(Styled, _extends({
256
- $status: status,
257
- "data-test-status": status,
258
- "data-test": "step",
259
- "data-test-step-id": stepId,
260
- $idCounter: idCounterContext,
261
- ref: elementRef
262
- }, otherProps), status === 'prev' && /*#__PURE__*/external_react_default().createElement(StyledCheckCircleIcon, null), status === 'error' && /*#__PURE__*/external_react_default().createElement(StyledExclamationCircleIcon, null), children);
263
- }
264
-
265
- Step.propTypes = propTypes;
266
- /* harmony default export */ const StepBar_Step = (Step);
267
- ;// CONCATENATED MODULE: ./src/StepBar/StepBarStyles.ts
268
-
269
-
270
- var StepBarStyles_Styled = external_styled_components_default().ul.withConfig({
271
- displayName: "StepBarStyles__Styled",
272
- componentId: "sc-13bf2x4-0"
273
- })(["", ";", ";", ";"], themes_namespaceObject.mixins.reset('flex'), (0,themes_namespaceObject.pick)({
274
- prisma: (0,external_styled_components_namespaceObject.css)(["position:relative;display:flex;counter-reset:", ";"], function (_ref) {
275
- var $idCounter = _ref.$idCounter;
276
- return $idCounter;
277
- })
278
- }), function (_ref2) {
279
- var $inline = _ref2.$inline;
280
- return $inline && (0,external_styled_components_namespaceObject.css)(["display:inline-flex;"]);
281
- });
282
-
283
- ;// CONCATENATED MODULE: ./src/StepBar/StepBar.tsx
284
- function StepBar_extends() { StepBar_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 StepBar_extends.apply(this, arguments); }
285
-
286
- function StepBar_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = StepBar_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; }
287
-
288
- function StepBar_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; }
289
-
290
-
291
-
292
-
293
-
294
-
295
-
296
- var StepBar_propTypes = {
297
- activeStepId: (external_prop_types_default()).any.isRequired,
298
- children: (external_prop_types_default()).node,
299
- elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
300
- inline: (external_prop_types_default()).bool
301
- };
302
-
303
- function StepBar(_ref) {
304
- var activeStepId = _ref.activeStepId,
305
- children = _ref.children,
306
- elementRef = _ref.elementRef,
307
- _ref$inline = _ref.inline,
308
- inline = _ref$inline === void 0 ? false : _ref$inline,
309
- otherProps = StepBar_objectWithoutProperties(_ref, ["activeStepId", "children", "elementRef", "inline"]);
310
-
311
- // @docs-props-type StepBarPropsBase
312
- var _useRef = (0,external_react_namespaceObject.useRef)((0,id_namespaceObject.createDOMID)('stepbar')),
313
- idCounter = _useRef.current;
314
-
315
- var activeIndex = 0;
316
- var validChildren = external_react_namespaceObject.Children.toArray(children).filter(external_react_namespaceObject.isValidElement);
317
- var lastChildIndex = validChildren.length - 1;
318
- var clonedChildren = validChildren.map(function (child, idx) {
319
- var stepId = child.props.stepId || idx;
320
- var error = child.props.error;
321
-
322
- if (stepId === activeStepId) {
323
- activeIndex = idx;
324
- }
325
-
326
- return /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(child, {
327
- stepId: stepId,
328
- error: error
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 = t => {
12
+ /******/ var r = t && t.__esModule ?
13
+ /******/ () => t["default"]
14
+ /******/ : () => t
15
+ /******/;
16
+ e.d(r, {
17
+ a: r
18
+ });
19
+ /******/ return r;
20
+ /******/ };
21
+ /******/ })();
22
+ /******/
23
+ /******/ /* webpack/runtime/define property getters */
24
+ /******/ (() => {
25
+ /******/ // define getter functions for harmony exports
26
+ /******/ e.d = (t, r) => {
27
+ /******/ for (var n in r) {
28
+ /******/ if (e.o(r, n) && !e.o(t, n)) {
29
+ /******/ Object.defineProperty(t, n, {
30
+ enumerable: true,
31
+ get: r[n]
32
+ });
33
+ /******/ }
34
+ /******/ }
35
+ /******/ };
36
+ /******/ })();
37
+ /******/
38
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
39
+ /******/ (() => {
40
+ /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
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 t = {};
60
+ // ESM COMPAT FLAG
61
+ e.r(t);
62
+ // EXPORTS
63
+ e.d(t, {
64
+ Step: () => /* reexport */ $,
65
+ default: () => /* reexport */ z
66
+ });
67
+ // CONCATENATED MODULE: external "react"
68
+ const r = require("react");
69
+ var n = e.n(r);
70
+ // CONCATENATED MODULE: external "prop-types"
71
+ const i = require("prop-types");
72
+ var o = e.n(i);
73
+ // CONCATENATED MODULE: external "@splunk/ui-utils/id"
74
+ const a = require("@splunk/ui-utils/id");
75
+ // CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
76
+ const l = require("@splunk/themes/useSplunkTheme");
77
+ var s = e.n(l);
78
+ // CONCATENATED MODULE: external "styled-components"
79
+ const c = require("styled-components");
80
+ var p = e.n(c);
81
+ // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
82
+ const d = require("@splunk/react-icons/CheckCircle");
83
+ var u = e.n(d);
84
+ // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationCircle"
85
+ const v = require("@splunk/react-icons/ExclamationCircle");
86
+ var f = e.n(v);
87
+ // CONCATENATED MODULE: external "@splunk/themes"
88
+ const m = require("@splunk/themes");
89
+ // CONCATENATED MODULE: ./src/StepBar/StepStyles.ts
90
+ var y = "#1A8929";
91
+ // SUI-2439 to meet WCAG AA compliance
92
+ var x = p().li.withConfig({
93
+ displayName: "StepStyles__Styled",
94
+ componentId: "sc-756fxp-0"
95
+ })([ "", " ", ";text-align:center;padding:", ";", ";", "" ], m.mixins.reset("block"), (0,
96
+ m.pick)({
97
+ enterprise: (0, c.css)([ "position:relative;flex:1 1 0;" ]),
98
+ prisma: (0, c.css)([ "display:flex;align-items:center;flex:0 1 auto;margin:0 12px 0 12px;" ])
99
+ }), (0, m.pick)({
100
+ enterprise: (0, c.css)([ "25px 15px 0" ]),
101
+ prisma: {
102
+ comfortable: "8px 8px 8px 0",
103
+ compact: "4px 8px 4px 0"
104
+ }
105
+ }), (0, m.pick)({
106
+ prisma: (0, c.css)([ "&::before{align-items:center;box-sizing:border-box;border-radius:50%;counter-increment:", ";content:counter(", ");display:inline-flex;flex-shrink:0;font-size:12px;height:20px;width:20px;justify-content:center;line-height:20px;margin:2px 16px 2px 18px;}" ], (function(e) {
107
+ var t = e.$idCounter;
108
+ return t;
109
+ }), (function(e) {
110
+ var t = e.$idCounter;
111
+ return t;
112
+ }))
113
+ }), (0, m.pickVariant)("$status", {
114
+ error: {
115
+ prisma: (0, c.css)([ "color:", ";&::before{visibility:hidden;position:absolute;}" ], m.variables.contentColorActive)
116
+ },
117
+ active: {
118
+ prisma: (0, c.css)([ "color:", ";&::before{color:", ";background:", ";border:1px solid ", ";}" ], m.variables.contentColorActive, m.variables.contentColorInverted, m.variables.contentColorActive, m.variables.contentColorActive)
119
+ },
120
+ next: {
121
+ enterprise: (0, c.css)([ "color:", ";" ], m.variables.textDisabledColor),
122
+ prisma: (0, c.css)([ "color:", ";&::before{color:", ";border:1px solid ", ";}" ], m.variables.contentColorMuted, m.variables.contentColorMuted, m.variables.contentColorMuted)
123
+ },
124
+ prev: {
125
+ prisma: (0, c.css)([ "color:", ";&::before{visibility:hidden;position:absolute;}" ], m.variables.contentColorDefault)
126
+ }
127
+ }));
128
+ var b = (0, c.css)([ "height:24px;width:24px;margin:0 14px 0 16px;" ]);
129
+ var h = p()(u()).withConfig({
130
+ displayName: "StepStyles__StyledCheckCircleIcon",
131
+ componentId: "sc-756fxp-1"
132
+ })([ "", ";color:", ";" ], b, m.variables.accentColorPositive);
133
+ var g = p()(f()).withConfig({
134
+ displayName: "StepStyles__StyledExclamationCircleIcon",
135
+ componentId: "sc-756fxp-2"
136
+ })([ "", ";color:", ";" ], b, m.variables.accentColorNegative);
137
+ var S = p().svg.withConfig({
138
+ displayName: "StepStyles__StyledSvg",
139
+ componentId: "sc-756fxp-3"
140
+ })([ "position:absolute;left:0;right:0;top:0;" ]);
141
+ var C = p().rect.withConfig({
142
+ displayName: "StepStyles__StyledPrevOrActiveRect",
143
+ componentId: "sc-756fxp-4"
144
+ })([ "fill:", ";" ], y);
145
+ var w = C.withComponent("circle");
146
+ var O = p().rect.withConfig({
147
+ displayName: "StepStyles__StyledGray",
148
+ componentId: "sc-756fxp-5"
149
+ })([ "fill:", ";" ], m.variables.gray60);
150
+ var I = p().circle.withConfig({
151
+ displayName: "StepStyles__StyledNext",
152
+ componentId: "sc-756fxp-6"
153
+ })([ "stroke:", ";stroke-width:3px;fill:", ";" ], m.variables.gray60, m.variables.backgroundColor);
154
+ // CONCATENATED MODULE: ./src/StepBar/StepBarContext.tsx
155
+ var k = (0, r.createContext)({
156
+ activeStepId: 0
329
157
  });
330
- });
331
- return /*#__PURE__*/external_react_default().createElement(StepBarStyles_Styled, StepBar_extends({
332
- $inline: inline,
333
- "data-test": "step-bar",
334
- "data-test-active-step-id": activeStepId // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
335
- ,
336
- role: "progressbar",
337
- "aria-valuemin": 1,
338
- "aria-valuemax": lastChildIndex + 1,
339
- "aria-valuenow": activeIndex + 1,
340
- $idCounter: idCounter,
341
- ref: elementRef
342
- }, otherProps), /*#__PURE__*/external_react_default().createElement(StepBar_StepBarContext.Provider, {
343
- value: {
344
- idCounter: idCounter,
345
- lastChildIndex: lastChildIndex,
346
- activeStepId: activeStepId
158
+ k.displayName = "StepBar";
159
+ /* harmony default export */ const E = k;
160
+ // CONCATENATED MODULE: ./src/StepBar/Step.tsx
161
+ function _() {
162
+ _ = Object.assign || function(e) {
163
+ for (var t = 1; t < arguments.length; t++) {
164
+ var r = arguments[t];
165
+ for (var n in r) {
166
+ if (Object.prototype.hasOwnProperty.call(r, n)) {
167
+ e[n] = r[n];
168
+ }
169
+ }
170
+ }
171
+ return e;
172
+ };
173
+ return _.apply(this, arguments);
174
+ }
175
+ function j(e, t) {
176
+ if (e == null) return {};
177
+ var r = P(e, t);
178
+ var n, i;
179
+ if (Object.getOwnPropertySymbols) {
180
+ var o = Object.getOwnPropertySymbols(e);
181
+ for (i = 0; i < o.length; i++) {
182
+ n = o[i];
183
+ if (t.indexOf(n) >= 0) continue;
184
+ if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
185
+ r[n] = e[n];
186
+ }
187
+ }
188
+ return r;
189
+ }
190
+ function P(e, t) {
191
+ if (e == null) return {};
192
+ var r = {};
193
+ var n = Object.keys(e);
194
+ var i, o;
195
+ for (o = 0; o < n.length; o++) {
196
+ i = n[o];
197
+ if (t.indexOf(i) >= 0) continue;
198
+ r[i] = e[i];
199
+ }
200
+ return r;
201
+ }
202
+ var N = {
203
+ children: o().node,
204
+ elementRef: o().oneOfType([ o().func, o().object ]),
205
+ error: o().bool,
206
+ stepId: o().any
207
+ };
208
+ function R(e) {
209
+ var t = e.children, i = e.elementRef, o = e.error, a = o === void 0 ? false : o, l = e.stepId, c = j(e, [ "children", "elementRef", "error", "stepId" ]);
210
+ // @docs-props-type StepPropsBase
211
+ var p = (0, r.useContext)(k), d = p.activeStepId, u = p.idCounter, v = p.lastChildIndex;
212
+ var f = s()(), m = f.isEnterprise;
213
+ var y = "next";
214
+ var b = d === l;
215
+ var E = l === 0;
216
+ var P = l === v;
217
+ if (l < d) {
218
+ y = "prev";
219
+ }
220
+ if (b && !a) {
221
+ y = "active";
222
+ }
223
+ if (b && a) {
224
+ y = "error";
225
+ }
226
+ if (m) {
227
+
228
+ return n().createElement(x, _({
229
+ $status: y,
230
+ "data-test-status": y,
231
+ "data-test": "step",
232
+ "data-test-step-id": l,
233
+ ref: i
234
+ }, c), n().createElement(S, {
235
+ focusable: "false",
236
+ width: "100%",
237
+ height: "15px",
238
+ viewBox: "0 0 100 15",
239
+ preserveAspectRatio: "none",
240
+ xmlns: "http://www.w3.org/2000/svg"
241
+ }, n().createElement(O, {
242
+ x: E ? "50" : "0",
243
+ y: "6",
244
+ width: P || E ? "50%" : "100%",
245
+ height: "3"
246
+ }), (y === "active" || y === "error") && !E && n().createElement(C, {
247
+ x: "0",
248
+ y: "6",
249
+ width: "50%",
250
+ height: "3"
251
+ }), y === "prev" && n().createElement(C, {
252
+ x: E ? "50%" : "0",
253
+ y: "6",
254
+ width: "100%",
255
+ height: "3"
256
+ })), n().createElement(S, {
257
+ focusable: "false",
258
+ width: "100%",
259
+ height: "15px",
260
+ viewBox: "0 0 15 15",
261
+ xmlns: "http://www.w3.org/2000/svg"
262
+ }, y !== "next" && n().createElement(w, {
263
+ cx: "50%",
264
+ cy: "50%",
265
+ r: "7.5"
266
+ }), y === "next" && n().createElement(I, {
267
+ cx: "50%",
268
+ cy: "50%",
269
+ r: "6"
270
+ })), t);
271
+ }
272
+
273
+ return n().createElement(x, _({
274
+ $status: y,
275
+ "data-test-status": y,
276
+ "data-test": "step",
277
+ "data-test-step-id": l,
278
+ $idCounter: u,
279
+ ref: i
280
+ }, c), y === "prev" && n().createElement(h, null), y === "error" && n().createElement(g, null), t);
281
+ }
282
+ R.propTypes = N;
283
+ /* harmony default export */ const $ = R;
284
+ // CONCATENATED MODULE: ./src/StepBar/StepBarStyles.ts
285
+ var q = p().ul.withConfig({
286
+ displayName: "StepBarStyles__Styled",
287
+ componentId: "sc-13bf2x4-0"
288
+ })([ "", ";", ";", ";" ], m.mixins.reset("flex"), (0, m.pick)({
289
+ prisma: (0, c.css)([ "position:relative;display:flex;counter-reset:", ";" ], (function(e) {
290
+ var t = e.$idCounter;
291
+ return t;
292
+ }))
293
+ }), (function(e) {
294
+ var t = e.$inline;
295
+ return t && (0, c.css)([ "display:inline-flex;" ]);
296
+ }));
297
+ // CONCATENATED MODULE: ./src/StepBar/StepBar.tsx
298
+ function A() {
299
+ A = Object.assign || function(e) {
300
+ for (var t = 1; t < arguments.length; t++) {
301
+ var r = arguments[t];
302
+ for (var n in r) {
303
+ if (Object.prototype.hasOwnProperty.call(r, n)) {
304
+ e[n] = r[n];
305
+ }
306
+ }
307
+ }
308
+ return e;
309
+ };
310
+ return A.apply(this, arguments);
311
+ }
312
+ function M(e, t) {
313
+ if (e == null) return {};
314
+ var r = T(e, t);
315
+ var n, i;
316
+ if (Object.getOwnPropertySymbols) {
317
+ var o = Object.getOwnPropertySymbols(e);
318
+ for (i = 0; i < o.length; i++) {
319
+ n = o[i];
320
+ if (t.indexOf(n) >= 0) continue;
321
+ if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
322
+ r[n] = e[n];
323
+ }
324
+ }
325
+ return r;
326
+ }
327
+ function T(e, t) {
328
+ if (e == null) return {};
329
+ var r = {};
330
+ var n = Object.keys(e);
331
+ var i, o;
332
+ for (o = 0; o < n.length; o++) {
333
+ i = n[o];
334
+ if (t.indexOf(i) >= 0) continue;
335
+ r[i] = e[i];
336
+ }
337
+ return r;
338
+ }
339
+ var B = {
340
+ activeStepId: o().any.isRequired,
341
+ children: o().node,
342
+ elementRef: o().oneOfType([ o().func, o().object ]),
343
+ inline: o().bool
344
+ };
345
+ function D(e) {
346
+ var t = e.activeStepId, i = e.children, o = e.elementRef, l = e.inline, s = l === void 0 ? false : l, c = M(e, [ "activeStepId", "children", "elementRef", "inline" ]);
347
+ // @docs-props-type StepBarPropsBase
348
+ var p = (0, r.useRef)((0, a.createDOMID)("stepbar")), d = p.current;
349
+ var u = 0;
350
+ var v = r.Children.toArray(i).filter(r.isValidElement);
351
+ var f = v.length - 1;
352
+ var m = v.map((function(e, n) {
353
+ var i = e.props.stepId || n;
354
+ var o = e.props.error;
355
+ if (i === t) {
356
+ u = n;
357
+ }
358
+
359
+ return (0, r.cloneElement)(e, {
360
+ stepId: i,
361
+ error: o
362
+ });
363
+ }));
364
+
365
+ return n().createElement(q, A({
366
+ $inline: s,
367
+ "data-test": "step-bar",
368
+ "data-test-active-step-id": t,
369
+ role: "progressbar",
370
+ "aria-valuemin": 1,
371
+ "aria-valuemax": f + 1,
372
+ "aria-valuenow": u + 1,
373
+ $idCounter: d,
374
+ ref: o
375
+ }, c), n().createElement(E.Provider, {
376
+ value: {
377
+ idCounter: d,
378
+ lastChildIndex: f,
379
+ activeStepId: t
380
+ }
381
+ }, m));
347
382
  }
348
- }, clonedChildren));
349
- }
350
-
351
- StepBar.propTypes = StepBar_propTypes;
352
- StepBar.Step = StepBar_Step;
353
- /* harmony default export */ const StepBar_StepBar = (StepBar);
354
-
355
- ;// CONCATENATED MODULE: ./src/StepBar/index.ts
356
-
357
-
358
- module.exports = __webpack_exports__;
359
- /******/ })()
360
- ;
383
+ D.propTypes = B;
384
+ D.Step = $;
385
+ /* harmony default export */ const z = D;
386
+ // CONCATENATED MODULE: ./src/StepBar/index.ts
387
+ module.exports = t;
388
+ /******/})();