@splunk/react-ui 4.3.0 → 4.5.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 (138) hide show
  1. package/Accordion.js +37 -21
  2. package/Anchor.js +2 -2
  3. package/Animation.js +2 -2
  4. package/AnimationToggle.js +2 -2
  5. package/Box.js +2 -2
  6. package/Button.js +36 -12
  7. package/ButtonGroup.js +27 -6
  8. package/ButtonSimple.js +6 -6
  9. package/CHANGELOG.md +57 -0
  10. package/Calendar.js +14 -14
  11. package/Card.js +51 -25
  12. package/CardLayout.js +31 -10
  13. package/Chip.js +77 -53
  14. package/Clickable.js +6 -6
  15. package/CloseButton.js +6 -6
  16. package/Code.js +1279 -1120
  17. package/CollapsiblePanel.js +6 -6
  18. package/Color.js +180 -209
  19. package/ColumnLayout.js +4 -4
  20. package/ComboBox.js +22 -17
  21. package/Concertina.js +56 -51
  22. package/ControlGroup.js +121 -32
  23. package/Date.js +62 -25
  24. package/DefinitionList.js +2 -2
  25. package/Dropdown.js +12 -12
  26. package/EventListener.js +168 -0
  27. package/FetchOptions.js +8 -8
  28. package/File.js +122 -96
  29. package/FormRows.js +66 -58
  30. package/Heading.js +2 -2
  31. package/Image.js +14 -14
  32. package/JSONTree.js +5 -5
  33. package/Layer.js +32 -20
  34. package/Link.js +8 -8
  35. package/List.js +2 -2
  36. package/Markdown.js +250 -88
  37. package/Menu.js +70 -64
  38. package/Message.js +18 -18
  39. package/Modal.js +70 -16
  40. package/ModalLayer.js +4 -4
  41. package/Monogram.js +12 -11
  42. package/Multiselect.js +124 -80
  43. package/Number.js +44 -34
  44. package/Paginator.js +10 -10
  45. package/Paragraph.js +2 -2
  46. package/Popover.js +54 -40
  47. package/Progress.js +8 -8
  48. package/RadioBar.js +45 -38
  49. package/RadioList.js +2 -2
  50. package/Resize.js +19 -15
  51. package/ResultsMenu.js +6 -6
  52. package/ScreenReaderContent.js +2 -2
  53. package/Scroll.js +25 -23
  54. package/ScrollContainerContext.js +5 -5
  55. package/Search.d.ts +2 -0
  56. package/Search.js +797 -0
  57. package/Select.js +85 -45
  58. package/SidePanel.js +6 -6
  59. package/Slider.js +34 -30
  60. package/SlidingPanels.js +6 -6
  61. package/StaticContent.js +2 -2
  62. package/StepBar.js +56 -52
  63. package/Switch.js +8 -8
  64. package/TabBar.js +126 -85
  65. package/TabLayout.js +4 -5
  66. package/Table.js +266 -155
  67. package/Text.js +486 -401
  68. package/Tooltip.js +11 -11
  69. package/TransitionOpen.js +11 -11
  70. package/WaitSpinner.js +3 -4
  71. package/package.json +5 -6
  72. package/types/src/Accordion/AccordionContext.d.ts +10 -0
  73. package/types/src/Accordion/Panel.d.ts +0 -9
  74. package/types/src/Button/Button.d.ts +4 -2
  75. package/types/src/ButtonGroup/ButtonGroupContext.d.ts +7 -0
  76. package/types/src/ButtonSimple/ButtonSimple.d.ts +5 -5
  77. package/types/src/Card/Card.d.ts +2 -0
  78. package/types/src/CardLayout/CardLayoutContext.d.ts +8 -0
  79. package/types/src/Color/Color.d.ts +2 -2
  80. package/types/src/Color/Swatch.d.ts +4 -15
  81. package/types/src/ComboBox/ComboBox.d.ts +4 -3
  82. package/types/src/Concertina/ConcertinaContext.d.ts +8 -0
  83. package/types/src/Concertina/Panel.d.ts +2 -4
  84. package/types/src/ControlGroup/ControlGroup.d.ts +11 -1
  85. package/types/src/ControlGroup/ControlGroupContext.d.ts +15 -0
  86. package/types/src/Date/Date.d.ts +6 -4
  87. package/types/src/EventListener/EventListener.d.ts +18 -0
  88. package/types/src/EventListener/index.d.ts +2 -0
  89. package/types/src/File/File.d.ts +6 -4
  90. package/types/src/File/FileContext.d.ts +9 -0
  91. package/types/src/File/Item.d.ts +5 -10
  92. package/types/src/FormRows/FormRows.d.ts +2 -2
  93. package/types/src/FormRows/FormRowsContext.d.ts +10 -0
  94. package/types/src/FormRows/Row.d.ts +5 -16
  95. package/types/src/Markdown/Markdown.d.ts +2 -0
  96. package/types/src/Markdown/renderers/MarkdownBlockquote.d.ts +14 -0
  97. package/types/src/Markdown/renderers/MarkdownCode.d.ts +15 -0
  98. package/types/src/Markdown/renderers/MarkdownCodeBlock.d.ts +16 -0
  99. package/types/src/Markdown/renderers/MarkdownHeading.d.ts +15 -0
  100. package/types/src/Markdown/renderers/MarkdownImage.d.ts +18 -0
  101. package/types/src/Markdown/renderers/MarkdownItem.d.ts +14 -0
  102. package/types/src/Markdown/renderers/MarkdownLink.d.ts +18 -0
  103. package/types/src/Markdown/renderers/MarkdownList.d.ts +26 -0
  104. package/types/src/Markdown/renderers/MarkdownParagraph.d.ts +14 -0
  105. package/types/src/Markdown/renderers/index.d.ts +10 -0
  106. package/types/src/Modal/Modal.d.ts +15 -3
  107. package/types/src/Monogram/Monogram.d.ts +5 -1
  108. package/types/src/Multiselect/Compact.d.ts +12 -4
  109. package/types/src/Multiselect/Multiselect.d.ts +14 -4
  110. package/types/src/Multiselect/Normal.d.ts +7 -2
  111. package/types/src/Number/Number.d.ts +11 -7
  112. package/types/src/Popover/Popover.d.ts +2 -2
  113. package/types/src/RadioBar/Option.d.ts +1 -15
  114. package/types/src/RadioBar/RadioBar.d.ts +2 -2
  115. package/types/src/RadioBar/RadioBarContext.d.ts +9 -0
  116. package/types/src/Scroll/Inner.d.ts +2 -2
  117. package/types/src/ScrollContainerContext/ScrollContainerContext.d.ts +4 -4
  118. package/types/src/Search/Option.d.ts +60 -0
  119. package/types/src/Search/Search.d.ts +97 -0
  120. package/types/src/Search/index.d.ts +2 -0
  121. package/types/src/Select/Select.d.ts +6 -2
  122. package/types/src/Select/SelectBase.d.ts +12 -5
  123. package/types/src/Slider/Slider.d.ts +2 -2
  124. package/types/src/StepBar/Step.d.ts +1 -13
  125. package/types/src/StepBar/StepBarContext.d.ts +8 -0
  126. package/types/src/TabBar/Tab.d.ts +5 -13
  127. package/types/src/TabBar/TabBarContext.d.ts +14 -0
  128. package/types/src/Table/Body.d.ts +1 -1
  129. package/types/src/Table/Head.d.ts +3 -1
  130. package/types/src/Table/HeadCell.d.ts +1 -1
  131. package/types/src/Table/HeadInner.d.ts +3 -3
  132. package/types/src/Table/Row.d.ts +10 -3
  133. package/types/src/Table/Table.d.ts +10 -5
  134. package/types/src/Text/Text.d.ts +33 -12
  135. package/types/src/icons/Sort.d.ts +3 -0
  136. package/types/src/usePrevious/index.d.ts +2 -0
  137. package/types/src/usePrevious/usePrevious.d.ts +12 -0
  138. package/usePrevious.js +137 -0
package/Menu.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 = 107);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 111);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -101,7 +101,34 @@ module.exports = require("prop-types");
101
101
 
102
102
  /***/ }),
103
103
 
104
- /***/ 107:
104
+ /***/ 11:
105
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
106
+
107
+ "use strict";
108
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
109
+ /**
110
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
111
+ *
112
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
113
+ * @param current - The new value of the ref.
114
+ */
115
+ function updateReactRef(ref, current) {
116
+ if (ref) {
117
+ if (typeof ref === 'function') {
118
+ ref(current);
119
+ } else {
120
+ // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
121
+ // the intention here is to signal "we will take care of setting 'current', not you".
122
+ ref.current = current; // eslint-disable-line no-param-reassign
123
+ }
124
+ }
125
+ }
126
+
127
+
128
+
129
+ /***/ }),
130
+
131
+ /***/ 111:
105
132
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
106
133
 
107
134
  "use strict";
@@ -124,14 +151,14 @@ var external_prop_types_ = __webpack_require__(1);
124
151
  var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
125
152
 
126
153
  // EXTERNAL MODULE: external "lodash/omit"
127
- var omit_ = __webpack_require__(32);
154
+ var omit_ = __webpack_require__(42);
128
155
  var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
129
156
 
130
157
  // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
131
- var Popover_ = __webpack_require__(17);
158
+ var Popover_ = __webpack_require__(16);
132
159
 
133
160
  // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
134
- var focus_ = __webpack_require__(24);
161
+ var focus_ = __webpack_require__(25);
135
162
 
136
163
  // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
137
164
  var keyboard_ = __webpack_require__(9);
@@ -206,7 +233,7 @@ Divider.filterConsecutive = true;
206
233
  Divider.filterLast = true;
207
234
  /* harmony default export */ var Menu_Divider = (Divider);
208
235
  // EXTERNAL MODULE: external "@splunk/react-ui/Heading"
209
- var Heading_ = __webpack_require__(61);
236
+ var Heading_ = __webpack_require__(64);
210
237
  var Heading_default = /*#__PURE__*/__webpack_require__.n(Heading_);
211
238
 
212
239
  // EXTERNAL MODULE: external "@splunk/themes/useSplunkTheme"
@@ -310,10 +337,10 @@ Heading.filterLast = true;
310
337
  var external_lodash_ = __webpack_require__(4);
311
338
 
312
339
  // EXTERNAL MODULE: ./src/icons/Check.tsx
313
- var Check = __webpack_require__(47);
340
+ var Check = __webpack_require__(48);
314
341
 
315
342
  // EXTERNAL MODULE: external "@splunk/react-icons/TriangleRightSmall"
316
- var TriangleRightSmall_ = __webpack_require__(86);
343
+ var TriangleRightSmall_ = __webpack_require__(89);
317
344
  var TriangleRightSmall_default = /*#__PURE__*/__webpack_require__.n(TriangleRightSmall_);
318
345
 
319
346
  // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -351,11 +378,11 @@ function CaretRight(props) {
351
378
  var ChevronRight = __webpack_require__(27);
352
379
 
353
380
  // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
354
- var Clickable_ = __webpack_require__(11);
381
+ var Clickable_ = __webpack_require__(12);
355
382
  var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
356
383
 
357
384
  // EXTERNAL MODULE: external "@splunk/react-ui/Switch"
358
- var Switch_ = __webpack_require__(62);
385
+ var Switch_ = __webpack_require__(65);
359
386
  var Switch_default = /*#__PURE__*/__webpack_require__.n(Switch_);
360
387
 
361
388
  // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
@@ -536,7 +563,7 @@ var StyledSubmenu = external_styled_components_default.a.span.withConfig({
536
563
  }));
537
564
 
538
565
  // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
539
- var updateReactRef = __webpack_require__(12);
566
+ var updateReactRef = __webpack_require__(11);
540
567
 
541
568
  // CONCATENATED MODULE: ./src/Menu/Item.tsx
542
569
  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); }
@@ -753,7 +780,7 @@ var Item_Item = /*#__PURE__*/function (_Component) {
753
780
  openInNewContext = _this$props3.openInNewContext,
754
781
  otherProps = Item_objectWithoutProperties(_this$props3, ["active", "children", "hasSubmenu", "selectable", "selectableAppearance", "selected", "icon", "description", "disabled", "onClick", "preventFocus", "role", "splunkTheme", "to", "truncate", "descriptionPosition", "openInNewContext"]);
755
782
 
756
- var family = splunkTheme.family;
783
+ var isPrisma = splunkTheme.isPrisma;
757
784
  var isSelectable = selectable || selected;
758
785
  var defaultRole = {
759
786
  nonselectable: 'menuitem',
@@ -765,13 +792,19 @@ var Item_Item = /*#__PURE__*/function (_Component) {
765
792
  'aria-haspopup': hasSubmenu ? true : undefined,
766
793
  'aria-checked': selectableAppearance === 'checkmark' && selected ? true : undefined
767
794
  };
768
- var selectablePosition = family === 'prisma' ? 'right' : 'left';
795
+ var selectablePosition = isPrisma ? 'right' : 'left';
769
796
  var descriptionRight = description && descriptionPosition === 'right' && selectablePosition !== 'right';
770
797
  var descriptionBottom = description && !descriptionRight;
771
798
  var selectableCheckmark = selected && selectableAppearance === 'checkmark' && /*#__PURE__*/external_react_default.a.createElement(StyledItemSelectedIcon, null, /*#__PURE__*/external_react_default.a.createElement(Check["a" /* default */], {
772
799
  enterpriseSize: 0.85,
773
800
  prismaSize: "small",
774
- inline: true
801
+ inline: true,
802
+ style: // eslint-disable-next-line no-nested-ternary
803
+ isPrisma ? icon ? {
804
+ verticalAlign: 'sub'
805
+ } : {
806
+ verticalAlign: 'text-top'
807
+ } : undefined
775
808
  }));
776
809
  return /*#__PURE__*/external_react_default.a.createElement(StyledClickable, Item_extends({
777
810
  $isSelectable: isSelectable,
@@ -802,7 +835,7 @@ var Item_Item = /*#__PURE__*/function (_Component) {
802
835
  selectedLabel: "Selected",
803
836
  unselectedLabel: "",
804
837
  value: "menu-item"
805
- }), hasSubmenu && /*#__PURE__*/external_react_default.a.createElement(StyledSubmenu, null, family === 'prisma' ? /*#__PURE__*/external_react_default.a.createElement(CaretRight, null) : /*#__PURE__*/external_react_default.a.createElement(ChevronRight["a" /* default */], null)), descriptionRight && /*#__PURE__*/external_react_default.a.createElement(StyledItemDescriptionRight, {
838
+ }), hasSubmenu && /*#__PURE__*/external_react_default.a.createElement(StyledSubmenu, null, isPrisma ? /*#__PURE__*/external_react_default.a.createElement(CaretRight, null) : /*#__PURE__*/external_react_default.a.createElement(ChevronRight["a" /* default */], null)), descriptionRight && /*#__PURE__*/external_react_default.a.createElement(StyledItemDescriptionRight, {
806
839
  "data-test": "description"
807
840
  }, description), /*#__PURE__*/external_react_default.a.createElement(StyledInnerWrapper, null, icon && /*#__PURE__*/external_react_default.a.createElement(StyledItemIcon, null, icon), /*#__PURE__*/external_react_default.a.createElement(StyledTitleAndDescriptionWrapper, {
808
841
  $truncate: truncate
@@ -826,7 +859,7 @@ var ItemWithTheme = Object(themes_["withSplunkTheme"])(Item_Item);
826
859
  ItemWithTheme.propTypes = Item_Item.propTypes;
827
860
  /* harmony default export */ var Menu_Item = (ItemWithTheme);
828
861
  // EXTERNAL MODULE: external "@splunk/react-ui/Scroll"
829
- var Scroll_ = __webpack_require__(58);
862
+ var Scroll_ = __webpack_require__(61);
830
863
  var Scroll_default = /*#__PURE__*/__webpack_require__.n(Scroll_);
831
864
 
832
865
  // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
@@ -1042,41 +1075,14 @@ Menu.Heading = Menu_Heading;
1042
1075
 
1043
1076
  /***/ }),
1044
1077
 
1045
- /***/ 11:
1078
+ /***/ 12:
1046
1079
  /***/ (function(module, exports) {
1047
1080
 
1048
1081
  module.exports = require("@splunk/react-ui/Clickable");
1049
1082
 
1050
1083
  /***/ }),
1051
1084
 
1052
- /***/ 12:
1053
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
1054
-
1055
- "use strict";
1056
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
1057
- /**
1058
- * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
1059
- *
1060
- * @param ref - The React callback or object ref. Can be `null` or `undefined`.
1061
- * @param current - The new value of the ref.
1062
- */
1063
- function updateReactRef(ref, current) {
1064
- if (ref) {
1065
- if (typeof ref === 'function') {
1066
- ref(current);
1067
- } else {
1068
- // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
1069
- // the intention here is to signal "we will take care of setting 'current', not you".
1070
- ref.current = current; // eslint-disable-line no-param-reassign
1071
- }
1072
- }
1073
- }
1074
-
1075
-
1076
-
1077
- /***/ }),
1078
-
1079
- /***/ 17:
1085
+ /***/ 16:
1080
1086
  /***/ (function(module, exports) {
1081
1087
 
1082
1088
  module.exports = require("@splunk/react-ui/Popover");
@@ -1090,7 +1096,7 @@ module.exports = require("react");
1090
1096
 
1091
1097
  /***/ }),
1092
1098
 
1093
- /***/ 24:
1099
+ /***/ 25:
1094
1100
  /***/ (function(module, exports) {
1095
1101
 
1096
1102
  module.exports = require("@splunk/ui-utils/focus");
@@ -1161,42 +1167,42 @@ module.exports = require("@splunk/react-icons/ChevronRight");
1161
1167
 
1162
1168
  /***/ }),
1163
1169
 
1164
- /***/ 32:
1170
+ /***/ 38:
1165
1171
  /***/ (function(module, exports) {
1166
1172
 
1167
- module.exports = require("lodash/omit");
1173
+ module.exports = require("@splunk/themes/useSplunkTheme");
1168
1174
 
1169
1175
  /***/ }),
1170
1176
 
1171
- /***/ 38:
1177
+ /***/ 4:
1172
1178
  /***/ (function(module, exports) {
1173
1179
 
1174
- module.exports = require("@splunk/themes/useSplunkTheme");
1180
+ module.exports = require("lodash");
1175
1181
 
1176
1182
  /***/ }),
1177
1183
 
1178
- /***/ 4:
1184
+ /***/ 42:
1179
1185
  /***/ (function(module, exports) {
1180
1186
 
1181
- module.exports = require("lodash");
1187
+ module.exports = require("lodash/omit");
1182
1188
 
1183
1189
  /***/ }),
1184
1190
 
1185
- /***/ 44:
1191
+ /***/ 45:
1186
1192
  /***/ (function(module, exports) {
1187
1193
 
1188
1194
  module.exports = require("@splunk/react-icons/Check");
1189
1195
 
1190
1196
  /***/ }),
1191
1197
 
1192
- /***/ 47:
1198
+ /***/ 48:
1193
1199
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
1194
1200
 
1195
1201
  "use strict";
1196
1202
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Check; });
1197
1203
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
1198
1204
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1199
- /* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(44);
1205
+ /* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(45);
1200
1206
  /* harmony import */ var _splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Check__WEBPACK_IMPORTED_MODULE_1__);
1201
1207
  /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
1202
1208
  /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -1239,13 +1245,6 @@ function Check(props) {
1239
1245
 
1240
1246
  /***/ }),
1241
1247
 
1242
- /***/ 58:
1243
- /***/ (function(module, exports) {
1244
-
1245
- module.exports = require("@splunk/react-ui/Scroll");
1246
-
1247
- /***/ }),
1248
-
1249
1248
  /***/ 6:
1250
1249
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
1251
1250
 
@@ -1274,11 +1273,18 @@ function SVG(props) {
1274
1273
  /***/ 61:
1275
1274
  /***/ (function(module, exports) {
1276
1275
 
1276
+ module.exports = require("@splunk/react-ui/Scroll");
1277
+
1278
+ /***/ }),
1279
+
1280
+ /***/ 64:
1281
+ /***/ (function(module, exports) {
1282
+
1277
1283
  module.exports = require("@splunk/react-ui/Heading");
1278
1284
 
1279
1285
  /***/ }),
1280
1286
 
1281
- /***/ 62:
1287
+ /***/ 65:
1282
1288
  /***/ (function(module, exports) {
1283
1289
 
1284
1290
  module.exports = require("@splunk/react-ui/Switch");
@@ -1403,7 +1409,7 @@ Icon.defaultProps = defaultProps;
1403
1409
 
1404
1410
  /***/ }),
1405
1411
 
1406
- /***/ 86:
1412
+ /***/ 89:
1407
1413
  /***/ (function(module, exports) {
1408
1414
 
1409
1415
  module.exports = require("@splunk/react-icons/TriangleRightSmall");
package/Message.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 = 106);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 110);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
101
101
 
102
102
  /***/ }),
103
103
 
104
- /***/ 106:
104
+ /***/ 110:
105
105
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
106
106
 
107
107
  "use strict";
@@ -121,7 +121,7 @@ var external_prop_types_ = __webpack_require__(1);
121
121
  var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
122
122
 
123
123
  // EXTERNAL MODULE: ./src/icons/CrossMark.tsx
124
- var CrossMark = __webpack_require__(21);
124
+ var CrossMark = __webpack_require__(22);
125
125
 
126
126
  // EXTERNAL MODULE: external "styled-components"
127
127
  var external_styled_components_ = __webpack_require__(3);
@@ -132,7 +132,7 @@ var Box_ = __webpack_require__(8);
132
132
  var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
133
133
 
134
134
  // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
135
- var Clickable_ = __webpack_require__(11);
135
+ var Clickable_ = __webpack_require__(12);
136
136
  var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
137
137
 
138
138
  // EXTERNAL MODULE: external "@splunk/themes"
@@ -194,7 +194,7 @@ var BannerWrapper = external_styled_components_default()(Box_default.a).withConf
194
194
  enterprise: '0 8px 0 38px'
195
195
  }), Object(themes_["pickVariant"])('$type', {
196
196
  info: Object(external_styled_components_["css"])(["background-color:", ";"], Object(themes_["pick"])({
197
- prisma: themes_["variables"].contentColorMuted,
197
+ prisma: themes_["variables"].contentColorActive,
198
198
  enterprise: {
199
199
  dark: themes_["mixins"].colorWithAlpha(themes_["variables"].infoColor, 0.5),
200
200
  light: themes_["variables"].infoColorL50
@@ -433,7 +433,7 @@ var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
433
433
  },
434
434
  "false": {
435
435
  prisma: '10px 8px 10px 36px',
436
- enterprise: '10px 0 10px 40px'
436
+ enterprise: '10px 10px 10px 40px'
437
437
  }
438
438
  }), function (_ref3) {
439
439
  var $fillStyle = _ref3.$fillStyle;
@@ -474,7 +474,7 @@ var StyledBox = external_styled_components_default()(Box_default.a).withConfig({
474
474
  }));
475
475
 
476
476
  // EXTERNAL MODULE: external "@splunk/react-icons/Error"
477
- var Error_ = __webpack_require__(63);
477
+ var Error_ = __webpack_require__(66);
478
478
  var Error_default = /*#__PURE__*/__webpack_require__.n(Error_);
479
479
 
480
480
  // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -511,7 +511,7 @@ function AlertFilled(props) {
511
511
  }, props));
512
512
  }
513
513
  // EXTERNAL MODULE: external "@splunk/react-icons/InfoCircle"
514
- var InfoCircle_ = __webpack_require__(87);
514
+ var InfoCircle_ = __webpack_require__(90);
515
515
  var InfoCircle_default = /*#__PURE__*/__webpack_require__.n(InfoCircle_);
516
516
 
517
517
  // CONCATENATED MODULE: ./src/icons/InfoFilled.tsx
@@ -542,7 +542,7 @@ function InfoFilled(props) {
542
542
  }, props));
543
543
  }
544
544
  // EXTERNAL MODULE: external "@splunk/react-icons/Success"
545
- var Success_ = __webpack_require__(64);
545
+ var Success_ = __webpack_require__(67);
546
546
  var Success_default = /*#__PURE__*/__webpack_require__.n(Success_);
547
547
 
548
548
  // CONCATENATED MODULE: ./src/icons/SuccessFilled.tsx
@@ -573,7 +573,7 @@ function SuccessFilled(props) {
573
573
  }, props));
574
574
  }
575
575
  // EXTERNAL MODULE: external "@splunk/react-icons/Warning"
576
- var Warning_ = __webpack_require__(88);
576
+ var Warning_ = __webpack_require__(91);
577
577
  var Warning_default = /*#__PURE__*/__webpack_require__.n(Warning_);
578
578
 
579
579
  // CONCATENATED MODULE: ./src/icons/WarningFilled.tsx
@@ -697,7 +697,7 @@ Message.Link = Message_Link;
697
697
 
698
698
  /***/ }),
699
699
 
700
- /***/ 11:
700
+ /***/ 12:
701
701
  /***/ (function(module, exports) {
702
702
 
703
703
  module.exports = require("@splunk/react-ui/Clickable");
@@ -711,14 +711,14 @@ module.exports = require("react");
711
711
 
712
712
  /***/ }),
713
713
 
714
- /***/ 21:
714
+ /***/ 22:
715
715
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
716
716
 
717
717
  "use strict";
718
718
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CrossMark; });
719
719
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
720
720
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
721
- /* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
721
+ /* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(26);
722
722
  /* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__);
723
723
  /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
724
724
  /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -761,7 +761,7 @@ function CrossMark(props) {
761
761
 
762
762
  /***/ }),
763
763
 
764
- /***/ 25:
764
+ /***/ 26:
765
765
  /***/ (function(module, exports) {
766
766
 
767
767
  module.exports = require("@splunk/react-icons/Close");
@@ -807,14 +807,14 @@ function SVG(props) {
807
807
 
808
808
  /***/ }),
809
809
 
810
- /***/ 63:
810
+ /***/ 66:
811
811
  /***/ (function(module, exports) {
812
812
 
813
813
  module.exports = require("@splunk/react-icons/Error");
814
814
 
815
815
  /***/ }),
816
816
 
817
- /***/ 64:
817
+ /***/ 67:
818
818
  /***/ (function(module, exports) {
819
819
 
820
820
  module.exports = require("@splunk/react-icons/Success");
@@ -946,14 +946,14 @@ module.exports = require("@splunk/react-ui/Box");
946
946
 
947
947
  /***/ }),
948
948
 
949
- /***/ 87:
949
+ /***/ 90:
950
950
  /***/ (function(module, exports) {
951
951
 
952
952
  module.exports = require("@splunk/react-icons/InfoCircle");
953
953
 
954
954
  /***/ }),
955
955
 
956
- /***/ 88:
956
+ /***/ 91:
957
957
  /***/ (function(module, exports) {
958
958
 
959
959
  module.exports = require("@splunk/react-icons/Warning");
package/Modal.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 = 110);
85
+ /******/ return __webpack_require__(__webpack_require__.s = 115);
86
86
  /******/ })
87
87
  /************************************************************************/
88
88
  /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
101
101
 
102
102
  /***/ }),
103
103
 
104
- /***/ 110:
104
+ /***/ 115:
105
105
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
106
106
 
107
107
  "use strict";
@@ -126,11 +126,11 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
126
126
  var external_lodash_ = __webpack_require__(4);
127
127
 
128
128
  // EXTERNAL MODULE: external "@splunk/react-ui/ModalLayer"
129
- var ModalLayer_ = __webpack_require__(65);
129
+ var ModalLayer_ = __webpack_require__(68);
130
130
  var ModalLayer_default = /*#__PURE__*/__webpack_require__.n(ModalLayer_);
131
131
 
132
132
  // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
133
- var focus_ = __webpack_require__(24);
133
+ var focus_ = __webpack_require__(25);
134
134
 
135
135
  // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
136
136
  var ScrollContainerContext_ = __webpack_require__(35);
@@ -271,7 +271,7 @@ function Footer(_ref) {
271
271
  Footer.propTypes = Footer_propTypes;
272
272
  /* harmony default export */ var Modal_Footer = (Footer);
273
273
  // EXTERNAL MODULE: external "@splunk/react-ui/CloseButton"
274
- var CloseButton_ = __webpack_require__(59);
274
+ var CloseButton_ = __webpack_require__(62);
275
275
  var CloseButton_default = /*#__PURE__*/__webpack_require__.n(CloseButton_);
276
276
 
277
277
  // CONCATENATED MODULE: ./src/Modal/HeaderStyles.ts
@@ -411,7 +411,7 @@ function Header(_ref) {
411
411
  Header.propTypes = Header_propTypes;
412
412
  /* harmony default export */ var Modal_Header = (Header);
413
413
  // EXTERNAL MODULE: external "react-spring"
414
- var external_react_spring_ = __webpack_require__(19);
414
+ var external_react_spring_ = __webpack_require__(18);
415
415
 
416
416
  // CONCATENATED MODULE: ./src/Modal/ModalStyles.ts
417
417
 
@@ -426,8 +426,6 @@ var Styled = external_styled_components_default()(external_react_spring_["animat
426
426
  }));
427
427
 
428
428
  // CONCATENATED MODULE: ./src/Modal/Modal.tsx
429
- 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); }
430
-
431
429
  function Modal_extends() { Modal_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 Modal_extends.apply(this, arguments); }
432
430
 
433
431
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || Modal_unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -446,6 +444,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
446
444
 
447
445
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
448
446
 
447
+ 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); }
448
+
449
449
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
450
450
 
451
451
  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -479,10 +479,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
479
479
 
480
480
  var Modal_propTypes = {
481
481
  children: external_prop_types_default.a.node,
482
+ initialFocus: external_prop_types_default.a.oneOfType([external_prop_types_default.a.object, external_prop_types_default.a.oneOf(['first', 'container'])]),
482
483
  onRequestClose: external_prop_types_default.a.func,
483
484
  open: external_prop_types_default.a.bool
484
485
  };
485
486
  var defaultProps = {
487
+ initialFocus: 'first',
486
488
  open: false
487
489
  };
488
490
 
@@ -504,6 +506,10 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
504
506
 
505
507
  _defineProperty(_assertThisInitialized(_this), "el", null);
506
508
 
509
+ _defineProperty(_assertThisInitialized(_this), "initialFocusTimeoutId", undefined);
510
+
511
+ _defineProperty(_assertThisInitialized(_this), "initialFocus", null);
512
+
507
513
  _defineProperty(_assertThisInitialized(_this), "getDefaultMotionStyle", function () {
508
514
  return {
509
515
  top: 0
@@ -522,12 +528,40 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
522
528
  };
523
529
  });
524
530
 
531
+ _defineProperty(_assertThisInitialized(_this), "handleInitialFocus", function () {
532
+ var initialFocus = _this.props.initialFocus;
533
+ _this.initialFocusTimeoutId = Object(external_lodash_["defer"])(function () {
534
+ var focusTarget; // not using the takeFocus() util here because it
535
+ // doesn't work for all values of "initialFocus"
536
+ // and it has a nested defer() call, which we want to avoid
537
+
538
+ if (_this.initialFocus !== initialFocus) {
539
+ if (initialFocus === 'first') {
540
+ if (_this.el) {
541
+ /* eslint-disable prefer-destructuring */
542
+
543
+ /* prefer-desturucting leads to harder-to-read syntax in this case */
544
+ focusTarget = Object(focus_["getSortedTabbableElements"])(_this.el)[0];
545
+ /* eslint-enable prefer-destructuring */
546
+ }
547
+ } else if (initialFocus === 'container') {
548
+ focusTarget = _this.el;
549
+ } else if (_typeof(initialFocus) === 'object') {
550
+ focusTarget = initialFocus;
551
+ } // Typescript isn't happy with optional chaining here
552
+
553
+
554
+ if (focusTarget != null && 'focus' in focusTarget) {
555
+ focusTarget.focus();
556
+ }
557
+
558
+ _this.initialFocus = initialFocus;
559
+ }
560
+ });
561
+ });
562
+
525
563
  _defineProperty(_assertThisInitialized(_this), "handleModalMount", function (element) {
526
564
  _this.el = element;
527
-
528
- if (element) {
529
- Object(external_lodash_["defer"])(focus_["takeFocus"], element);
530
- }
531
565
  });
532
566
 
533
567
  _defineProperty(_assertThisInitialized(_this), "handleModalKeyDown", function (e) {
@@ -539,6 +573,7 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
539
573
  _defineProperty(_assertThisInitialized(_this), "handleRequestClose", function (e) {
540
574
  var _this$props$onRequest, _this$props;
541
575
 
576
+ _this.initialFocus = null;
542
577
  (_this$props$onRequest = (_this$props = _this.props).onRequestClose) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props, e);
543
578
  });
544
579
 
@@ -567,6 +602,25 @@ var Modal_Modal = /*#__PURE__*/function (_Component) {
567
602
  }
568
603
 
569
604
  _createClass(Modal, [{
605
+ key: "componentDidUpdate",
606
+ value: function componentDidUpdate(prevProps) {
607
+ var _this$props3 = this.props,
608
+ initialFocus = _this$props3.initialFocus,
609
+ open = _this$props3.open;
610
+
611
+ if (prevProps.initialFocus !== initialFocus) {
612
+ // cancel the defer() set up in handleInitialFocus()
613
+ // so that focus won't jump around if "initialFocus" changes
614
+ clearTimeout(this.initialFocusTimeoutId);
615
+ }
616
+
617
+ if (open) {
618
+ this.handleInitialFocus();
619
+ } else {
620
+ this.initialFocus = null;
621
+ }
622
+ }
623
+ }, {
570
624
  key: "render",
571
625
  value: function render() {
572
626
  return /*#__PURE__*/external_react_default.a.createElement(ModalLayer_default.a, {
@@ -600,7 +654,7 @@ _defineProperty(Modal_Modal, "Footer", Modal_Footer);
600
654
 
601
655
  /***/ }),
602
656
 
603
- /***/ 19:
657
+ /***/ 18:
604
658
  /***/ (function(module, exports) {
605
659
 
606
660
  module.exports = require("react-spring");
@@ -614,7 +668,7 @@ module.exports = require("react");
614
668
 
615
669
  /***/ }),
616
670
 
617
- /***/ 24:
671
+ /***/ 25:
618
672
  /***/ (function(module, exports) {
619
673
 
620
674
  module.exports = require("@splunk/ui-utils/focus");
@@ -642,14 +696,14 @@ module.exports = require("lodash");
642
696
 
643
697
  /***/ }),
644
698
 
645
- /***/ 59:
699
+ /***/ 62:
646
700
  /***/ (function(module, exports) {
647
701
 
648
702
  module.exports = require("@splunk/react-ui/CloseButton");
649
703
 
650
704
  /***/ }),
651
705
 
652
- /***/ 65:
706
+ /***/ 68:
653
707
  /***/ (function(module, exports) {
654
708
 
655
709
  module.exports = require("@splunk/react-ui/ModalLayer");