@splunk/react-ui 4.13.0 → 4.15.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 (144) hide show
  1. package/.dockerignore +2 -0
  2. package/Accordion.js +41 -16
  3. package/Anchor.js +9 -9
  4. package/Animation.js +6 -6
  5. package/AnimationToggle.js +2 -2
  6. package/Box.js +9 -9
  7. package/Button.js +47 -46
  8. package/ButtonGroup.js +9 -9
  9. package/ButtonSimple.js +14 -14
  10. package/CHANGELOG.md +46 -1
  11. package/Calendar.js +460 -147
  12. package/Card.js +85 -83
  13. package/CardLayout.js +9 -9
  14. package/Chip.js +23 -23
  15. package/Clickable.js +39 -15
  16. package/CloseButton.js +23 -23
  17. package/Code.js +484 -436
  18. package/CollapsiblePanel.js +64 -35
  19. package/Color.js +298 -188
  20. package/ColumnLayout.js +18 -17
  21. package/ComboBox.js +81 -32
  22. package/Concertina.js +89 -28
  23. package/ControlGroup.js +85 -27
  24. package/Date.js +134 -58
  25. package/DefinitionList.js +14 -8
  26. package/Divider.d.ts +2 -0
  27. package/Divider.js +194 -0
  28. package/Dockerfile.enterprise.storybook +7 -0
  29. package/Dockerfile.prisma.storybook +7 -0
  30. package/Dockerfile.visual +10 -0
  31. package/Dropdown.js +79 -19
  32. package/EventListener.js +17 -17
  33. package/File.js +96 -43
  34. package/FormRows.js +40 -39
  35. package/Heading.js +83 -55
  36. package/Image.js +67 -42
  37. package/JSONTree.js +106 -21
  38. package/Layer.js +130 -28
  39. package/Link.js +17 -17
  40. package/List.js +3 -3
  41. package/Markdown.js +71 -65
  42. package/Menu.js +155 -121
  43. package/Message.js +135 -135
  44. package/MessageBar.js +136 -136
  45. package/Modal.js +99 -48
  46. package/ModalLayer.js +15 -15
  47. package/Monogram.js +18 -17
  48. package/Multiselect.js +2788 -2310
  49. package/Number.js +76 -37
  50. package/Paginator.js +99 -86
  51. package/Paragraph.js +10 -10
  52. package/Popover.js +343 -48
  53. package/Progress.js +23 -22
  54. package/RadioBar.js +32 -14
  55. package/RadioList.js +17 -11
  56. package/Resize.js +34 -21
  57. package/ResultsMenu.js +44 -31
  58. package/ScreenReaderContent.js +9 -9
  59. package/Scroll.js +52 -27
  60. package/ScrollContainerContext.js +157 -6
  61. package/Search.js +71 -34
  62. package/Select.js +347 -69
  63. package/SidePanel.js +37 -24
  64. package/Slider.js +50 -20
  65. package/SlidingPanels.js +56 -18
  66. package/SplitButton.js +27 -26
  67. package/StaticContent.js +9 -9
  68. package/StepBar.js +22 -22
  69. package/Switch.js +18 -13
  70. package/TabBar.js +28 -28
  71. package/TabLayout.js +43 -18
  72. package/Table.js +549 -158
  73. package/Text.js +93 -50
  74. package/TextArea.d.ts +2 -0
  75. package/TextArea.js +134 -56
  76. package/Tooltip.js +246 -63
  77. package/TransitionOpen.js +63 -26
  78. package/Typography.d.ts +2 -0
  79. package/Typography.js +17 -16
  80. package/WaitSpinner.js +15 -81
  81. package/docker-compose.yml +42 -0
  82. package/package.json +20 -20
  83. package/test-runner-jest.config.js +23 -5
  84. package/types/src/Accordion/AccordionContext.d.ts +1 -0
  85. package/types/src/Button/docs/examples/Selected.d.ts +2 -2
  86. package/types/src/ButtonGroup/ButtonGroupContext.d.ts +1 -0
  87. package/types/src/Calendar/Calendar.d.ts +17 -2
  88. package/types/src/Calendar/DateTable.d.ts +7 -3
  89. package/types/src/Calendar/Day.d.ts +14 -5
  90. package/types/src/CardLayout/CardLayoutContext.d.ts +1 -0
  91. package/types/src/CollapsiblePanel/CollapsiblePanel.d.ts +7 -3
  92. package/types/src/Concertina/ConcertinaContext.d.ts +1 -0
  93. package/types/src/ControlGroup/ControlGroup.d.ts +15 -8
  94. package/types/src/ControlGroup/docs/examples/HelpWithErrorText.d.ts +2 -0
  95. package/types/src/ControlGroup/docs/examples/Required.d.ts +2 -0
  96. package/types/src/Date/Date.d.ts +17 -8
  97. package/types/src/Date/docs/examples/CustomDate.d.ts +2 -2
  98. package/types/src/Date/docs/examples/Disabled.d.ts +2 -2
  99. package/types/src/Date/docs/examples/prisma/WithoutCalendar.d.ts +2 -0
  100. package/types/src/Divider/Divider.d.ts +20 -0
  101. package/types/src/Divider/docs/examples/AriaHidden.d.ts +2 -0
  102. package/types/src/Divider/docs/examples/Basic.d.ts +2 -0
  103. package/types/src/Divider/docs/examples/CustomStyle.d.ts +2 -0
  104. package/types/src/Divider/docs/examples/Vertical.d.ts +2 -0
  105. package/types/src/Divider/index.d.ts +1 -0
  106. package/types/src/File/File.d.ts +4 -2
  107. package/types/src/File/FileContext.d.ts +1 -0
  108. package/types/src/FormRows/FormRowsContext.d.ts +1 -0
  109. package/types/src/Markdown/renderers/MarkdownLink.d.ts +1 -1
  110. package/types/src/Menu/MenuContext.d.ts +1 -0
  111. package/types/src/Modal/Modal.d.ts +7 -3
  112. package/types/src/Modal/ModalContext.d.ts +2 -0
  113. package/types/src/Multiselect/Compact.d.ts +10 -1
  114. package/types/src/Multiselect/Multiselect.d.ts +12 -1
  115. package/types/src/Multiselect/Normal.d.ts +2 -0
  116. package/types/src/Number/Number.d.ts +5 -1
  117. package/types/src/Popover/Popover.d.ts +25 -5
  118. package/types/src/Popover/PopoverContext.d.ts +1 -0
  119. package/types/src/RadioBar/RadioBar.d.ts +5 -3
  120. package/types/src/RadioBar/RadioBarContext.d.ts +1 -0
  121. package/types/src/RadioList/RadioList.d.ts +5 -1
  122. package/types/src/RadioList/RadioListContext.d.ts +1 -0
  123. package/types/src/Select/SelectBase.d.ts +2 -0
  124. package/types/src/Slider/Slider.d.ts +5 -3
  125. package/types/src/SplitButton/docs/examples/Disabled.d.ts +1 -1
  126. package/types/src/SplitButton/docs/examples/prisma/Disabled.d.ts +1 -1
  127. package/types/src/StepBar/StepBarContext.d.ts +1 -0
  128. package/types/src/Switch/Switch.d.ts +2 -0
  129. package/types/src/TabBar/TabBarContext.d.ts +1 -0
  130. package/types/src/Table/Head.d.ts +2 -0
  131. package/types/src/Table/TableContext.d.ts +1 -0
  132. package/types/src/Table/docs/examples/FilterColumnValues.d.ts +14 -0
  133. package/types/src/Text/Text.d.ts +5 -3
  134. package/types/src/TextArea/TextArea.d.ts +5 -3
  135. package/types/src/Tooltip/Tooltip.d.ts +26 -9
  136. package/types/src/TransitionOpen/TransitionOpen.d.ts +7 -3
  137. package/types/src/WaitSpinner/WaitSpinner.d.ts +1 -1
  138. package/types/src/useForceUpdate/useForceUpdate.d.ts +1 -0
  139. package/types/src/useKeyPress/index.d.ts +37 -0
  140. package/useForceUpdate.js +9 -9
  141. package/{useIsSsr.js → useKeyPress.js} +56 -49
  142. package/usePrevious.js +9 -9
  143. package/types/src/useIsSsr/index.d.ts +0 -2
  144. package/types/src/useIsSsr/useIsSsr.d.ts +0 -8
package/Date.js CHANGED
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 140);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 192);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -101,14 +101,14 @@ module.exports = require("prop-types");
101
101
 
102
102
  /***/ }),
103
103
 
104
- /***/ 10:
104
+ /***/ 11:
105
105
  /***/ (function(module, exports) {
106
106
 
107
- module.exports = require("@splunk/ui-utils/id");
107
+ module.exports = require("lodash/has");
108
108
 
109
109
  /***/ }),
110
110
 
111
- /***/ 11:
111
+ /***/ 12:
112
112
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
113
113
 
114
114
  "use strict";
@@ -135,7 +135,21 @@ function updateReactRef(ref, current) {
135
135
 
136
136
  /***/ }),
137
137
 
138
- /***/ 140:
138
+ /***/ 126:
139
+ /***/ (function(module, exports) {
140
+
141
+ module.exports = require("@splunk/react-ui/Calendar");
142
+
143
+ /***/ }),
144
+
145
+ /***/ 13:
146
+ /***/ (function(module, exports) {
147
+
148
+ module.exports = require("@splunk/ui-utils/id");
149
+
150
+ /***/ }),
151
+
152
+ /***/ 192:
139
153
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
140
154
 
141
155
  "use strict";
@@ -154,25 +168,30 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
154
168
  var external_prop_types_ = __webpack_require__(1);
155
169
  var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
156
170
 
157
- // EXTERNAL MODULE: external "lodash"
158
- var external_lodash_ = __webpack_require__(4);
171
+ // EXTERNAL MODULE: external "lodash/has"
172
+ var has_ = __webpack_require__(11);
173
+ var has_default = /*#__PURE__*/__webpack_require__.n(has_);
174
+
175
+ // EXTERNAL MODULE: external "lodash/omit"
176
+ var omit_ = __webpack_require__(5);
177
+ var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
159
178
 
160
179
  // EXTERNAL MODULE: external "moment"
161
180
  var external_moment_ = __webpack_require__(22);
162
181
  var external_moment_default = /*#__PURE__*/__webpack_require__.n(external_moment_);
163
182
 
164
183
  // EXTERNAL MODULE: external "@splunk/ui-utils/id"
165
- var id_ = __webpack_require__(10);
184
+ var id_ = __webpack_require__(13);
166
185
 
167
186
  // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
168
187
  var keyboard_ = __webpack_require__(9);
169
188
 
170
189
  // EXTERNAL MODULE: external "@splunk/react-ui/Calendar"
171
- var Calendar_ = __webpack_require__(86);
190
+ var Calendar_ = __webpack_require__(126);
172
191
  var Calendar_default = /*#__PURE__*/__webpack_require__.n(Calendar_);
173
192
 
174
193
  // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
175
- var Popover_ = __webpack_require__(17);
194
+ var Popover_ = __webpack_require__(23);
176
195
  var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
177
196
 
178
197
  // EXTERNAL MODULE: external "@splunk/themes"
@@ -183,7 +202,7 @@ var external_styled_components_ = __webpack_require__(3);
183
202
  var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
184
203
 
185
204
  // EXTERNAL MODULE: external "@splunk/react-ui/Text"
186
- var Text_ = __webpack_require__(23);
205
+ var Text_ = __webpack_require__(30);
187
206
  var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
188
207
 
189
208
  // CONCATENATED MODULE: ./src/Date/DateStyles.ts
@@ -193,25 +212,25 @@ var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
193
212
  var StyledText = external_styled_components_default()(Text_default.a).withConfig({
194
213
  displayName: "DateStyles__StyledText",
195
214
  componentId: "kacgdc-0"
196
- })(["&[data-inline]{width:", ";flex-basis:", ";}"], Object(themes_["pick"])({
215
+ })(["cursor:text;&[data-inline]{flex-basis:", ";width:", ";}"], Object(themes_["pick"])({
216
+ enterprise: '105px',
217
+ prisma: '150px'
218
+ }), Object(themes_["pick"])({
197
219
  enterprise: {
198
220
  comfortable: '105px',
199
221
  compact: '80px'
200
222
  },
201
223
  prisma: '150px'
202
- }), Object(themes_["pick"])({
203
- enterprise: '105px',
204
- prisma: '150px'
205
224
  }));
206
225
  var IconContainer = external_styled_components_default.a.div.withConfig({
207
226
  displayName: "DateStyles__IconContainer",
208
227
  componentId: "kacgdc-1"
209
- })(["display:flex;align-items:center;padding:", ";color:", ";pointer-events:none;"], Object(themes_["pick"])({
210
- comfortable: '0 8px',
211
- compact: '0 6px'
212
- }), Object(themes_["pickVariant"])('$disabled', {
228
+ })(["align-items:center;color:", ";display:flex;padding:", ";pointer-events:none;"], Object(themes_["pickVariant"])('$disabled', {
213
229
  "false": themes_["variables"].contentColorMuted,
214
230
  "true": themes_["variables"].contentColorDisabled
231
+ }), Object(themes_["pick"])({
232
+ comfortable: '0 8px',
233
+ compact: '0 6px'
215
234
  }));
216
235
 
217
236
  // CONCATENATED MODULE: ./src/Date/Icon.tsx
@@ -235,7 +254,7 @@ function CalendarIcon(props) {
235
254
  }));
236
255
  }
237
256
  // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
238
- var updateReactRef = __webpack_require__(11);
257
+ var updateReactRef = __webpack_require__(12);
239
258
 
240
259
  // CONCATENATED MODULE: ./src/Date/Date.tsx
241
260
  function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -276,6 +295,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
276
295
 
277
296
 
278
297
 
298
+
279
299
  var propTypes = {
280
300
  defaultValue: external_prop_types_default.a.string,
281
301
  describedBy: external_prop_types_default.a.string,
@@ -285,6 +305,7 @@ var propTypes = {
285
305
  highlightToday: external_prop_types_default.a.bool,
286
306
  inline: external_prop_types_default.a.bool,
287
307
  inputId: external_prop_types_default.a.string,
308
+ inputOnly: external_prop_types_default.a.bool,
288
309
  labelledBy: external_prop_types_default.a.string,
289
310
  locale: external_prop_types_default.a.string,
290
311
  name: external_prop_types_default.a.string,
@@ -303,6 +324,7 @@ var defaultProps = {
303
324
  error: false,
304
325
  highlightToday: false,
305
326
  inline: true,
327
+ inputOnly: false,
306
328
  locale: 'en_US'
307
329
  };
308
330
 
@@ -337,6 +359,10 @@ var _Date = /*#__PURE__*/function (_Component) {
337
359
 
338
360
  _defineProperty(_assertThisInitialized(_this), "popoverId", void 0);
339
361
 
362
+ _defineProperty(_assertThisInitialized(_this), "calendar", null);
363
+
364
+ _defineProperty(_assertThisInitialized(_this), "openWithFocus", false);
365
+
340
366
  _defineProperty(_assertThisInitialized(_this), "applyTextChange", function (e) {
341
367
  var date = external_moment_default()(_this.state.tempTextInputDate, 'l', _this.props.locale);
342
368
 
@@ -385,12 +411,9 @@ var _Date = /*#__PURE__*/function (_Component) {
385
411
  _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
386
412
  var _this$props$onFocus, _this$props2;
387
413
 
388
- /* SUI-930 On IE 11 this handler is essentially deferred after calling
389
- * this.textInput.focus(). this.focusCalledInternally enables the focus event to be ignored
390
- * when the menu closes. */
391
414
  if (_this.focusCalledInternally) {
392
415
  _this.focusCalledInternally = false;
393
- } else {
416
+ } else if (!_this.props.inputOnly) {
394
417
  _this.setState({
395
418
  calendarOpen: true
396
419
  });
@@ -400,9 +423,13 @@ var _Date = /*#__PURE__*/function (_Component) {
400
423
  });
401
424
 
402
425
  _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
403
- var _this$props$onClick, _this$props3;
426
+ var _this$state$anchor, _this$props$onClick, _this$props3;
404
427
 
405
- if (!_this.state.calendarOpen) {
428
+ if (document.activeElement !== _this.state.input && ((_this$state$anchor = _this.state.anchor) === null || _this$state$anchor === void 0 ? void 0 : _this$state$anchor.contains(e.target))) {
429
+ _this.focus();
430
+ }
431
+
432
+ if (!_this.props.inputOnly && !_this.state.calendarOpen) {
406
433
  _this.setState({
407
434
  calendarOpen: true
408
435
  });
@@ -416,7 +443,7 @@ var _Date = /*#__PURE__*/function (_Component) {
416
443
 
417
444
  _this.setState({
418
445
  tempTextInputDate: value,
419
- calendarOpen: true
446
+ calendarOpen: !_this.props.inputOnly
420
447
  });
421
448
  });
422
449
 
@@ -427,10 +454,18 @@ var _Date = /*#__PURE__*/function (_Component) {
427
454
 
428
455
  if (eventKeyCode === 'enter' || eventKeyCode === 'tab') {
429
456
  _this.applyTextChange(e);
430
- } else if ((eventKeyCode === 'up' || eventKeyCode === 'down') && !_this.state.calendarOpen) {
431
- _this.setState({
432
- calendarOpen: true
433
- });
457
+ } else if (!_this.props.inputOnly && eventKeyCode === 'down') {
458
+ e.preventDefault();
459
+
460
+ if (!_this.state.calendarOpen) {
461
+ _this.openWithFocus = true;
462
+
463
+ _this.setState({
464
+ calendarOpen: true
465
+ });
466
+ } else if (_this.calendar) {
467
+ _this.calendar.focusActiveDay();
468
+ }
434
469
  } else if (eventKeyCode === 'esc') {
435
470
  _this.setState({
436
471
  calendarOpen: false,
@@ -457,16 +492,26 @@ var _Date = /*#__PURE__*/function (_Component) {
457
492
  });
458
493
  });
459
494
 
495
+ _defineProperty(_assertThisInitialized(_this), "handleCalendarMount", function (el) {
496
+ _this.calendar = el;
497
+ });
498
+
460
499
  _defineProperty(_assertThisInitialized(_this), "handleRequestClose", function (_ref3) {
461
500
  var event = _ref3.event,
462
501
  reason = _ref3.reason;
463
502
 
464
503
  if ((reason === 'clickAway' || reason === 'escapeKey') && event !== undefined && event.target !== _this.state.anchor) {
465
504
  _this.applyTextChange(event);
505
+
506
+ if (reason === 'escapeKey') {
507
+ _this.focusCalledInternally = true;
508
+
509
+ _this.focus();
510
+ }
466
511
  }
467
512
  });
468
513
 
469
- _this.controlledExternally = Object(external_lodash_["has"])(props, 'value');
514
+ _this.controlledExternally = has_default()(props, 'value');
470
515
  var dateString = _this.isControlled() ? props.value : props.defaultValue || external_moment_default()().locale(props.locale).format(_Date.momentFormat);
471
516
  _this.state = {
472
517
  anchor: null,
@@ -474,7 +519,9 @@ var _Date = /*#__PURE__*/function (_Component) {
474
519
  input: null,
475
520
  value: _this.isControlled() ? undefined : dateString
476
521
  };
477
- _this.popoverId = Object(id_["createDOMID"])('calender');
522
+ _this.popoverId = Object(id_["createDOMID"])('calendar');
523
+
524
+ if (false) {}
478
525
 
479
526
  if (false) {}
480
527
 
@@ -483,10 +530,24 @@ var _Date = /*#__PURE__*/function (_Component) {
483
530
 
484
531
  _createClass(Date, [{
485
532
  key: "componentDidUpdate",
486
- value: function componentDidUpdate(prevProps) {
533
+ value: function componentDidUpdate(prevProps, prevState) {
534
+ if (false) {}
535
+
487
536
  if (false) {}
488
537
 
489
538
  if (false) {}
539
+ /**
540
+ * If `openWithFocus` and `calendarOpen` are set the user is attempting to navigate to the dropdown, but it's closed.
541
+ * On the first update following the state change set focus to the active day within the calendar.
542
+ */
543
+
544
+
545
+ if (this.openWithFocus && this.state.calendarOpen && prevState.calendarOpen !== this.state.calendarOpen) {
546
+ var _this$calendar;
547
+
548
+ this.openWithFocus = false;
549
+ (_this$calendar = this.calendar) === null || _this$calendar === void 0 ? void 0 : _this$calendar.focusActiveDay();
550
+ }
490
551
  }
491
552
  }, {
492
553
  key: "getValue",
@@ -519,12 +580,37 @@ var _Date = /*#__PURE__*/function (_Component) {
519
580
  value: function render() {
520
581
  var _this$props5 = this.props,
521
582
  highlightToday = _this$props5.highlightToday,
583
+ inputOnly = _this$props5.inputOnly,
584
+ locale = _this$props5.locale,
522
585
  splunkTheme = _this$props5.splunkTheme;
523
586
  var isPrisma = splunkTheme.isPrisma;
524
587
  var currentValue = this.getValue();
525
- var startAdornment = isPrisma && /*#__PURE__*/external_react_default.a.createElement(IconContainer, {
588
+ var startAdornment = isPrisma && !inputOnly && /*#__PURE__*/external_react_default.a.createElement(IconContainer, {
589
+ "aria-hidden": true,
526
590
  $disabled: this.props.disabled
527
591
  }, /*#__PURE__*/external_react_default.a.createElement(CalendarIcon, null));
592
+ var children;
593
+ var ariaProps = {};
594
+
595
+ if (!inputOnly) {
596
+ ariaProps.role = 'combobox';
597
+ ariaProps['aria-controls'] = this.state.calendarOpen ? this.popoverId : undefined;
598
+ ariaProps['aria-expanded'] = this.props.disabled ? false : this.state.calendarOpen;
599
+ ariaProps['aria-haspopup'] = true;
600
+ children = /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
601
+ anchor: this.state.anchor,
602
+ id: this.popoverId,
603
+ open: this.props.disabled ? false : this.state.calendarOpen,
604
+ onRequestClose: this.handleRequestClose
605
+ }, /*#__PURE__*/external_react_default.a.createElement(Calendar_default.a, {
606
+ ref: this.handleCalendarMount,
607
+ highlightToday: highlightToday,
608
+ locale: locale,
609
+ onChange: this.handleDateChange,
610
+ value: currentValue
611
+ }));
612
+ }
613
+
528
614
  return /*#__PURE__*/external_react_default.a.createElement(StyledText, Date_extends({
529
615
  autoCapitalize: "off",
530
616
  autoComplete: "off",
@@ -541,17 +627,7 @@ var _Date = /*#__PURE__*/function (_Component) {
541
627
  onKeyDown: this.handleKeyDown,
542
628
  value: this.getTextInputValue(),
543
629
  startAdornment: startAdornment
544
- }, Object(external_lodash_["omit"])(this.props, 'className', 'defaultValue', 'elementRef', 'multiline', 'locale', 'onChange', 'onClick', 'onFocus', 'onKeyDown', 'onSelect', 'spellCheck', 'value')), /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
545
- anchor: this.state.anchor,
546
- id: this.popoverId,
547
- open: this.props.disabled ? false : this.state.calendarOpen,
548
- onRequestClose: this.handleRequestClose
549
- }, /*#__PURE__*/external_react_default.a.createElement(Calendar_default.a, {
550
- highlightToday: highlightToday,
551
- locale: this.props.locale,
552
- onChange: this.handleDateChange,
553
- value: currentValue
554
- })));
630
+ }, ariaProps, omit_default()(this.props, 'className', 'defaultValue', 'elementRef', 'inputOnly', 'multiline', 'locale', 'onChange', 'onClick', 'onFocus', 'onKeyDown', 'onSelect', 'spellCheck', 'value')), children);
555
631
  }
556
632
  }]);
557
633
 
@@ -564,6 +640,13 @@ _defineProperty(_Date, "defaultProps", defaultProps);
564
640
 
565
641
  _defineProperty(_Date, "momentFormat", 'YYYY-MM-DD');
566
642
 
643
+ _defineProperty(_Date, "validateValue", function (value) {
644
+ if (!external_moment_default()(value, _Date.momentFormat).isValid()) {
645
+ // eslint-disable-next-line no-console
646
+ console.error("Invalid date string value \"".concat(value, "\" provided to Moment."));
647
+ }
648
+ });
649
+
567
650
  var DateWithThemeBase = Object(themes_["withSplunkTheme"])(_Date);
568
651
  var DateWithTheme = DateWithThemeBase;
569
652
  DateWithTheme.propTypes = _Date.propTypes;
@@ -574,13 +657,6 @@ DateWithTheme.momentFormat = _Date.momentFormat;
574
657
 
575
658
 
576
659
 
577
- /***/ }),
578
-
579
- /***/ 17:
580
- /***/ (function(module, exports) {
581
-
582
- module.exports = require("@splunk/react-ui/Popover");
583
-
584
660
  /***/ }),
585
661
 
586
662
  /***/ 2:
@@ -600,7 +676,7 @@ module.exports = require("moment");
600
676
  /***/ 23:
601
677
  /***/ (function(module, exports) {
602
678
 
603
- module.exports = require("@splunk/react-ui/Text");
679
+ module.exports = require("@splunk/react-ui/Popover");
604
680
 
605
681
  /***/ }),
606
682
 
@@ -611,17 +687,17 @@ module.exports = require("styled-components");
611
687
 
612
688
  /***/ }),
613
689
 
614
- /***/ 4:
690
+ /***/ 30:
615
691
  /***/ (function(module, exports) {
616
692
 
617
- module.exports = require("lodash");
693
+ module.exports = require("@splunk/react-ui/Text");
618
694
 
619
695
  /***/ }),
620
696
 
621
- /***/ 86:
697
+ /***/ 5:
622
698
  /***/ (function(module, exports) {
623
699
 
624
- module.exports = require("@splunk/react-ui/Calendar");
700
+ module.exports = require("lodash/omit");
625
701
 
626
702
  /***/ }),
627
703
 
package/DefinitionList.js CHANGED
@@ -82,7 +82,7 @@ module.exports =
82
82
  /******/
83
83
  /******/
84
84
  /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 123);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 175);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
101
101
 
102
102
  /***/ }),
103
103
 
104
- /***/ 123:
104
+ /***/ 175:
105
105
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
106
106
 
107
107
  "use strict";
@@ -134,9 +134,12 @@ var themes_ = __webpack_require__(0);
134
134
  var Styled = external_styled_components_default.a.dd.withConfig({
135
135
  displayName: "DescriptionStyles__Styled",
136
136
  componentId: "sc-1jglixb-0"
137
- })(["", ";min-height:", ";padding-left:5px;", ""], themes_["mixins"].reset('block'), themes_["variables"].lineHeight, Object(themes_["pick"])({
138
- prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorActive)
139
- }));
137
+ })(["", ";", ";min-height:", ";padding-left:5px;"], themes_["mixins"].reset('block'), Object(themes_["pick"])({
138
+ prisma: themes_["mixins"].typography('body', {
139
+ color: 'active'
140
+ }),
141
+ enterprise: themes_["mixins"].typography('body')
142
+ }), themes_["variables"].lineHeight);
140
143
 
141
144
  // CONCATENATED MODULE: ./src/DefinitionList/Description.tsx
142
145
  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); }
@@ -176,7 +179,7 @@ Description.propTypes = propTypes;
176
179
  var DefinitionListStyles_Styled = external_styled_components_default.a.dl.withConfig({
177
180
  displayName: "DefinitionListStyles__Styled",
178
181
  componentId: "sc-1pqfrgm-0"
179
- })(["", ";"], themes_["mixins"].reset('block'));
182
+ })(["", ";", ";"], themes_["mixins"].reset('block'), themes_["mixins"].typography('body'));
180
183
 
181
184
  // CONCATENATED MODULE: ./src/DefinitionList/TermStyles.ts
182
185
 
@@ -184,8 +187,11 @@ var DefinitionListStyles_Styled = external_styled_components_default.a.dl.withCo
184
187
  var TermStyles_Styled = external_styled_components_default.a.dt.withConfig({
185
188
  displayName: "TermStyles__Styled",
186
189
  componentId: "sc-1ao97j9-0"
187
- })(["", ";float:left;width:120px;overflow:hidden;overflow-x:hidden;white-space:nowrap;font-weight:400;word-wrap:normal;", " ", ""], themes_["mixins"].reset('block'), Object(themes_["pick"])({
188
- prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorMuted)
190
+ })(["", ";", " float:left;width:120px;overflow:hidden;overflow-x:hidden;white-space:nowrap;word-wrap:normal;", ""], themes_["mixins"].reset('block'), Object(themes_["pick"])({
191
+ prisma: themes_["mixins"].typography('body', {
192
+ color: 'muted'
193
+ }),
194
+ enterprise: themes_["mixins"].typography('body')
189
195
  }), Object(themes_["pick"])({
190
196
  enterprise: Object(external_styled_components_["css"])(["&::after{content:'", "';}"], " ".concat('.'.repeat(100)))
191
197
  }));
package/Divider.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default } from './types/src/Divider';
2
+ export * from './types/src/Divider';
package/Divider.js ADDED
@@ -0,0 +1,194 @@
1
+ module.exports =
2
+ /******/ (function(modules) { // webpackBootstrap
3
+ /******/ // The module cache
4
+ /******/ var installedModules = {};
5
+ /******/
6
+ /******/ // The require function
7
+ /******/ function __webpack_require__(moduleId) {
8
+ /******/
9
+ /******/ // Check if module is in cache
10
+ /******/ if(installedModules[moduleId]) {
11
+ /******/ return installedModules[moduleId].exports;
12
+ /******/ }
13
+ /******/ // Create a new module (and put it into the cache)
14
+ /******/ var module = installedModules[moduleId] = {
15
+ /******/ i: moduleId,
16
+ /******/ l: false,
17
+ /******/ exports: {}
18
+ /******/ };
19
+ /******/
20
+ /******/ // Execute the module function
21
+ /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
22
+ /******/
23
+ /******/ // Flag the module as loaded
24
+ /******/ module.l = true;
25
+ /******/
26
+ /******/ // Return the exports of the module
27
+ /******/ return module.exports;
28
+ /******/ }
29
+ /******/
30
+ /******/
31
+ /******/ // expose the modules object (__webpack_modules__)
32
+ /******/ __webpack_require__.m = modules;
33
+ /******/
34
+ /******/ // expose the module cache
35
+ /******/ __webpack_require__.c = installedModules;
36
+ /******/
37
+ /******/ // define getter function for harmony exports
38
+ /******/ __webpack_require__.d = function(exports, name, getter) {
39
+ /******/ if(!__webpack_require__.o(exports, name)) {
40
+ /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
41
+ /******/ }
42
+ /******/ };
43
+ /******/
44
+ /******/ // define __esModule on exports
45
+ /******/ __webpack_require__.r = function(exports) {
46
+ /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
47
+ /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
48
+ /******/ }
49
+ /******/ Object.defineProperty(exports, '__esModule', { value: true });
50
+ /******/ };
51
+ /******/
52
+ /******/ // create a fake namespace object
53
+ /******/ // mode & 1: value is a module id, require it
54
+ /******/ // mode & 2: merge all properties of value into the ns
55
+ /******/ // mode & 4: return value when already ns object
56
+ /******/ // mode & 8|1: behave like require
57
+ /******/ __webpack_require__.t = function(value, mode) {
58
+ /******/ if(mode & 1) value = __webpack_require__(value);
59
+ /******/ if(mode & 8) return value;
60
+ /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
61
+ /******/ var ns = Object.create(null);
62
+ /******/ __webpack_require__.r(ns);
63
+ /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
64
+ /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
65
+ /******/ return ns;
66
+ /******/ };
67
+ /******/
68
+ /******/ // getDefaultExport function for compatibility with non-harmony modules
69
+ /******/ __webpack_require__.n = function(module) {
70
+ /******/ var getter = module && module.__esModule ?
71
+ /******/ function getDefault() { return module['default']; } :
72
+ /******/ function getModuleExports() { return module; };
73
+ /******/ __webpack_require__.d(getter, 'a', getter);
74
+ /******/ return getter;
75
+ /******/ };
76
+ /******/
77
+ /******/ // Object.prototype.hasOwnProperty.call
78
+ /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
79
+ /******/
80
+ /******/ // __webpack_public_path__
81
+ /******/ __webpack_require__.p = "";
82
+ /******/
83
+ /******/
84
+ /******/ // Load entry module and return exports
85
+ /******/ return __webpack_require__(__webpack_require__.s = 211);
86
+ /******/ })
87
+ /************************************************************************/
88
+ /******/ ({
89
+
90
+ /***/ 0:
91
+ /***/ (function(module, exports) {
92
+
93
+ module.exports = require("@splunk/themes");
94
+
95
+ /***/ }),
96
+
97
+ /***/ 1:
98
+ /***/ (function(module, exports) {
99
+
100
+ module.exports = require("prop-types");
101
+
102
+ /***/ }),
103
+
104
+ /***/ 2:
105
+ /***/ (function(module, exports) {
106
+
107
+ module.exports = require("react");
108
+
109
+ /***/ }),
110
+
111
+ /***/ 211:
112
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
113
+
114
+ "use strict";
115
+ // ESM COMPAT FLAG
116
+ __webpack_require__.r(__webpack_exports__);
117
+
118
+ // EXPORTS
119
+ __webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ Divider_Divider; });
120
+
121
+ // EXTERNAL MODULE: external "react"
122
+ var external_react_ = __webpack_require__(2);
123
+ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
124
+
125
+ // EXTERNAL MODULE: external "prop-types"
126
+ var external_prop_types_ = __webpack_require__(1);
127
+ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
128
+
129
+ // EXTERNAL MODULE: external "styled-components"
130
+ var external_styled_components_ = __webpack_require__(3);
131
+ var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
132
+
133
+ // EXTERNAL MODULE: external "@splunk/themes"
134
+ var themes_ = __webpack_require__(0);
135
+
136
+ // CONCATENATED MODULE: ./src/Divider/DividerStyles.ts
137
+
138
+
139
+ var StyledRule = external_styled_components_default.a.hr.withConfig({
140
+ displayName: "DividerStyles__StyledRule",
141
+ componentId: "gl6kyz-0"
142
+ })(["", ";", ";border-color:", ";"], themes_["mixins"].reset('block'), Object(themes_["pickVariant"])('$orientation', {
143
+ horizontal: Object(external_styled_components_["css"])(["border-top-style:solid;border-width:1px;"]),
144
+ vertical: Object(external_styled_components_["css"])(["display:inline;border-left-style:solid;border-width:1px;"])
145
+ }), Object(themes_["pick"])({
146
+ enterprise: themes_["variables"].borderColor,
147
+ prisma: themes_["variables"].neutral200
148
+ }));
149
+
150
+ // CONCATENATED MODULE: ./src/Divider/Divider.tsx
151
+ 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); }
152
+
153
+ 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; }
154
+
155
+ 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; }
156
+
157
+
158
+
159
+
160
+ var propTypes = {
161
+ elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
162
+ orientation: external_prop_types_default.a.oneOf(['horizontal', 'vertical'])
163
+ };
164
+
165
+ function Divider(_ref) {
166
+ var elementRef = _ref.elementRef,
167
+ _ref$orientation = _ref.orientation,
168
+ orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
169
+ otherProps = _objectWithoutProperties(_ref, ["elementRef", "orientation"]);
170
+
171
+ // @docs-props-type DividerPropsBase
172
+ return /*#__PURE__*/external_react_default.a.createElement(StyledRule, _extends({
173
+ "data-test": "divider",
174
+ ref: elementRef,
175
+ "aria-orientation": orientation,
176
+ $orientation: orientation
177
+ }, otherProps));
178
+ }
179
+
180
+ Divider.propTypes = propTypes;
181
+ /* harmony default export */ var Divider_Divider = (Divider);
182
+ // CONCATENATED MODULE: ./src/Divider/index.ts
183
+
184
+
185
+ /***/ }),
186
+
187
+ /***/ 3:
188
+ /***/ (function(module, exports) {
189
+
190
+ module.exports = require("styled-components");
191
+
192
+ /***/ })
193
+
194
+ /******/ });
@@ -0,0 +1,7 @@
1
+ FROM node:14.20 as builder
2
+
3
+ WORKDIR /react-ui
4
+
5
+ COPY storybook-static-visual-enterprise storybook-static-visual-enterprise
6
+
7
+ EXPOSE 6008