@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/usePrevious.js CHANGED
@@ -1,52 +1,57 @@
1
- /******/ (() => { // webpackBootstrap
2
- /******/ "use strict";
3
- /******/ // The require scope
4
- /******/ var __webpack_require__ = {};
5
- /******/
6
- /************************************************************************/
7
- /******/ /* webpack/runtime/define property getters */
8
- /******/ (() => {
9
- /******/ // define getter functions for harmony exports
10
- /******/ __webpack_require__.d = (exports, definition) => {
11
- /******/ for(var key in definition) {
12
- /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
13
- /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
14
- /******/ }
15
- /******/ }
16
- /******/ };
17
- /******/ })();
18
- /******/
19
- /******/ /* webpack/runtime/hasOwnProperty shorthand */
20
- /******/ (() => {
21
- /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
22
- /******/ })();
23
- /******/
24
- /******/ /* webpack/runtime/make namespace object */
25
- /******/ (() => {
26
- /******/ // define __esModule on exports
27
- /******/ __webpack_require__.r = (exports) => {
28
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
29
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
30
- /******/ }
31
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
32
- /******/ };
33
- /******/ })();
34
- /******/
35
- /************************************************************************/
36
- var __webpack_exports__ = {};
37
- // ESM COMPAT FLAG
38
- __webpack_require__.r(__webpack_exports__);
39
-
40
- // EXPORTS
41
- __webpack_require__.d(__webpack_exports__, {
42
- "default": () => (/* reexport */ usePrevious_usePrevious)
43
- });
44
-
45
- ;// CONCATENATED MODULE: external "react"
46
- const external_react_namespaceObject = require("react");
47
- ;// CONCATENATED MODULE: ./src/usePrevious/usePrevious.tsx
48
-
49
- /**
1
+ /******/ (() => {
2
+ // webpackBootstrap
3
+ /******/ "use strict";
4
+ /******/ // The require scope
5
+ /******/ var e = {};
6
+ /******/
7
+ /************************************************************************/
8
+ /******/ /* webpack/runtime/define property getters */
9
+ /******/ (() => {
10
+ /******/ // define getter functions for harmony exports
11
+ /******/ e.d = (r, t) => {
12
+ /******/ for (var o in t) {
13
+ /******/ if (e.o(t, o) && !e.o(r, o)) {
14
+ /******/ Object.defineProperty(r, o, {
15
+ enumerable: true,
16
+ get: t[o]
17
+ });
18
+ /******/ }
19
+ /******/ }
20
+ /******/ };
21
+ /******/ })();
22
+ /******/
23
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
24
+ /******/ (() => {
25
+ /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
26
+ /******/;
27
+ })();
28
+ /******/
29
+ /******/ /* webpack/runtime/make namespace object */
30
+ /******/ (() => {
31
+ /******/ // define __esModule on exports
32
+ /******/ e.r = e => {
33
+ /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
34
+ /******/ Object.defineProperty(e, Symbol.toStringTag, {
35
+ value: "Module"
36
+ });
37
+ /******/ }
38
+ /******/ Object.defineProperty(e, "__esModule", {
39
+ value: true
40
+ });
41
+ /******/ };
42
+ /******/ })();
43
+ /******/
44
+ /************************************************************************/ var r = {};
45
+ // ESM COMPAT FLAG
46
+ e.r(r);
47
+ // EXPORTS
48
+ e.d(r, {
49
+ default: () => /* reexport */ n
50
+ });
51
+ // CONCATENATED MODULE: external "react"
52
+ const t = require("react");
53
+ // CONCATENATED MODULE: ./src/usePrevious/usePrevious.tsx
54
+ /**
50
55
  * This is a private component not intended for use outside @splunk/react-ui
51
56
  *
52
57
  * Keeps the previous version of a value. Useful for emulating the "prevState"
@@ -55,19 +60,14 @@ const external_react_namespaceObject = require("react");
55
60
  *
56
61
  * @param value - The value to store
57
62
  */
58
-
59
- function usePrevious(value) {
60
- var ref = (0,external_react_namespaceObject.useRef)();
61
- (0,external_react_namespaceObject.useEffect)(function () {
62
- ref.current = value;
63
- }, [value]);
64
- return ref.current;
65
- }
66
-
67
- /* harmony default export */ const usePrevious_usePrevious = (usePrevious);
68
- ;// CONCATENATED MODULE: ./src/usePrevious/index.ts
69
-
70
-
71
- module.exports = __webpack_exports__;
72
- /******/ })()
73
- ;
63
+ function o(e) {
64
+ var r = (0, t.useRef)();
65
+ (0, t.useEffect)((function() {
66
+ r.current = e;
67
+ }), [ e ]);
68
+ return r.current;
69
+ }
70
+ /* harmony default export */ const n = o;
71
+ // CONCATENATED MODULE: ./src/usePrevious/index.ts
72
+ module.exports = r;
73
+ /******/})();
package/useRovingFocus.js CHANGED
@@ -1,64 +1,66 @@
1
- /******/ (() => { // webpackBootstrap
2
- /******/ "use strict";
3
- /******/ // The require scope
4
- /******/ var __webpack_require__ = {};
5
- /******/
6
- /************************************************************************/
7
- /******/ /* webpack/runtime/define property getters */
8
- /******/ (() => {
9
- /******/ // define getter functions for harmony exports
10
- /******/ __webpack_require__.d = (exports, definition) => {
11
- /******/ for(var key in definition) {
12
- /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
13
- /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
14
- /******/ }
15
- /******/ }
16
- /******/ };
17
- /******/ })();
18
- /******/
19
- /******/ /* webpack/runtime/hasOwnProperty shorthand */
20
- /******/ (() => {
21
- /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
22
- /******/ })();
23
- /******/
24
- /******/ /* webpack/runtime/make namespace object */
25
- /******/ (() => {
26
- /******/ // define __esModule on exports
27
- /******/ __webpack_require__.r = (exports) => {
28
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
29
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
30
- /******/ }
31
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
32
- /******/ };
33
- /******/ })();
34
- /******/
35
- /************************************************************************/
36
- var __webpack_exports__ = {};
37
- // ESM COMPAT FLAG
38
- __webpack_require__.r(__webpack_exports__);
39
-
40
- // EXPORTS
41
- __webpack_require__.d(__webpack_exports__, {
42
- "default": () => (/* reexport */ useRovingFocus_useRovingFocus)
43
- });
44
-
45
- ;// CONCATENATED MODULE: external "react"
46
- const external_react_namespaceObject = require("react");
47
- ;// CONCATENATED MODULE: external "@splunk/ui-utils/focus"
48
- const focus_namespaceObject = require("@splunk/ui-utils/focus");
49
- ;// CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
50
- const keyboard_namespaceObject = require("@splunk/ui-utils/keyboard");
51
- ;// CONCATENATED MODULE: ./src/useRovingFocus/useRovingFocus.tsx
52
-
53
-
54
-
55
-
56
- function focusElement(element) {
57
- if (element instanceof HTMLElement && element.focus) {
58
- element.focus();
59
- }
60
- }
61
- /**
1
+ /******/ (() => {
2
+ // webpackBootstrap
3
+ /******/ "use strict";
4
+ /******/ // The require scope
5
+ /******/ var e = {};
6
+ /******/
7
+ /************************************************************************/
8
+ /******/ /* webpack/runtime/define property getters */
9
+ /******/ (() => {
10
+ /******/ // define getter functions for harmony exports
11
+ /******/ e.d = (t, r) => {
12
+ /******/ for (var n in r) {
13
+ /******/ if (e.o(r, n) && !e.o(t, n)) {
14
+ /******/ Object.defineProperty(t, n, {
15
+ enumerable: true,
16
+ get: r[n]
17
+ });
18
+ /******/ }
19
+ /******/ }
20
+ /******/ };
21
+ /******/ })();
22
+ /******/
23
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
24
+ /******/ (() => {
25
+ /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
26
+ /******/;
27
+ })();
28
+ /******/
29
+ /******/ /* webpack/runtime/make namespace object */
30
+ /******/ (() => {
31
+ /******/ // define __esModule on exports
32
+ /******/ e.r = e => {
33
+ /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
34
+ /******/ Object.defineProperty(e, Symbol.toStringTag, {
35
+ value: "Module"
36
+ });
37
+ /******/ }
38
+ /******/ Object.defineProperty(e, "__esModule", {
39
+ value: true
40
+ });
41
+ /******/ };
42
+ /******/ })();
43
+ /******/
44
+ /************************************************************************/ var t = {};
45
+ // ESM COMPAT FLAG
46
+ e.r(t);
47
+ // EXPORTS
48
+ e.d(t, {
49
+ default: () => /* reexport */ a
50
+ });
51
+ // CONCATENATED MODULE: external "react"
52
+ const r = require("react");
53
+ // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
54
+ const n = require("@splunk/ui-utils/focus");
55
+ // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
56
+ const u = require("@splunk/ui-utils/keyboard");
57
+ // CONCATENATED MODULE: ./src/useRovingFocus/useRovingFocus.tsx
58
+ function i(e) {
59
+ if (e instanceof HTMLElement && e.focus) {
60
+ e.focus();
61
+ }
62
+ }
63
+ /**
62
64
  * This is a private hook not intended for use outside @splunk/react-ui
63
65
  *
64
66
  * Handles "roving focus" for a group of elements inside a containing element.
@@ -77,81 +79,63 @@ function focusElement(element) {
77
79
  * <button type="button">second</button>
78
80
  * </div>
79
81
  * ```
80
- */
81
-
82
-
83
- function useRovingFocus() {
84
- var activeItemIndex = (0,external_react_namespaceObject.useRef)(0);
85
- var actionItemsRef = (0,external_react_namespaceObject.useRef)([]);
86
-
87
- var updateActiveItem = function updateActiveItem(newActiveindex) {
88
- activeItemIndex.current = newActiveindex;
89
- actionItemsRef.current.forEach(function (el, index) {
90
- return index === activeItemIndex.current ? el.removeAttribute('tabindex') : el.setAttribute('tabindex', '-1');
91
- });
92
- };
93
-
94
- var handleItemsMount = function handleItemsMount(element) {
95
- actionItemsRef.current = element != null ? (0,focus_namespaceObject.getSortedTabbableElements)(element, {
96
- ignoreTabIndex: true
97
- }) : [];
98
- updateActiveItem(activeItemIndex.current);
99
- };
100
-
101
- var handleBlur = function handleBlur(e) {
102
- var focusOnActionItem = e.relatedTarget instanceof Element && actionItemsRef.current.includes(e.relatedTarget);
103
-
104
- if (!focusOnActionItem) {
105
- updateActiveItem(0);
106
- }
107
- };
108
-
109
- var handleFocus = function handleFocus(e) {
110
- var focusIndex = e.target instanceof Element ? actionItemsRef.current.indexOf(e.target) : -1;
111
-
112
- if (focusIndex >= 0) {
113
- updateActiveItem(focusIndex);
114
- }
115
- };
116
-
117
- var handleKeyDown = function handleKeyDown(e) {
118
- if (e.nativeEvent.target instanceof HTMLElement) {
119
- var index = actionItemsRef.current.indexOf(e.nativeEvent.target);
120
-
121
- if (index >= 0) {
122
- var key = (0,keyboard_namespaceObject.keycode)(e.nativeEvent);
123
- var newIndex = -1;
124
-
125
- if (key === 'left') {
126
- newIndex = index - 1;
127
- } else if (key === 'right') {
128
- newIndex = index + 1;
129
- } else if (key === 'home') {
130
- newIndex = 0;
131
- } else if (key === 'end') {
132
- newIndex = actionItemsRef.current.length - 1;
133
- }
134
-
135
- if (newIndex >= 0) {
136
- e.preventDefault();
137
- focusElement(actionItemsRef.current[newIndex]);
138
- }
139
- }
82
+ */ function o() {
83
+ var e = (0, r.useRef)(0);
84
+ var t = (0, r.useRef)([]);
85
+ var o = function r(n) {
86
+ e.current = n;
87
+ t.current.forEach((function(t, r) {
88
+ return r === e.current ? t.removeAttribute("tabindex") : t.setAttribute("tabindex", "-1");
89
+ }));
90
+ };
91
+ var a = function r(u) {
92
+ t.current = u != null ? (0, n.getSortedTabbableElements)(u, {
93
+ ignoreTabIndex: true
94
+ }) : [];
95
+ o(e.current);
96
+ };
97
+ var f = function e(r) {
98
+ var n = r.relatedTarget instanceof Element && t.current.includes(r.relatedTarget);
99
+ if (!n) {
100
+ o(0);
101
+ }
102
+ };
103
+ var c = function e(r) {
104
+ var n = r.target instanceof Element ? t.current.indexOf(r.target) : -1;
105
+ if (n >= 0) {
106
+ o(n);
107
+ }
108
+ };
109
+ var l = function e(r) {
110
+ if (r.nativeEvent.target instanceof HTMLElement) {
111
+ var n = t.current.indexOf(r.nativeEvent.target);
112
+ if (n >= 0) {
113
+ var o = (0, u.keycode)(r.nativeEvent);
114
+ var a = -1;
115
+ if (o === "left") {
116
+ a = n - 1;
117
+ } else if (o === "right") {
118
+ a = n + 1;
119
+ } else if (o === "home") {
120
+ a = 0;
121
+ } else if (o === "end") {
122
+ a = t.current.length - 1;
123
+ }
124
+ if (a >= 0) {
125
+ r.preventDefault();
126
+ i(t.current[a]);
127
+ }
128
+ }
129
+ }
130
+ };
131
+ return {
132
+ ref: a,
133
+ onBlur: f,
134
+ onFocus: c,
135
+ onKeyDown: l
136
+ };
140
137
  }
141
- };
142
-
143
- return {
144
- ref: handleItemsMount,
145
- onBlur: handleBlur,
146
- onFocus: handleFocus,
147
- onKeyDown: handleKeyDown
148
- };
149
- }
150
-
151
- /* harmony default export */ const useRovingFocus_useRovingFocus = (useRovingFocus);
152
- ;// CONCATENATED MODULE: ./src/useRovingFocus/index.ts
153
-
154
-
155
- module.exports = __webpack_exports__;
156
- /******/ })()
157
- ;
138
+ /* harmony default export */ const a = o;
139
+ // CONCATENATED MODULE: ./src/useRovingFocus/index.ts
140
+ module.exports = t;
141
+ /******/})();