@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
@@ -1,524 +1,591 @@
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
- "default": () => (/* reexport */ CollapsiblePanel_CollapsiblePanel)
55
- });
56
-
57
- ;// CONCATENATED MODULE: external "react"
58
- const external_react_namespaceObject = require("react");
59
- var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
60
- ;// CONCATENATED MODULE: external "prop-types"
61
- const external_prop_types_namespaceObject = require("prop-types");
62
- var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_namespaceObject);
63
- ;// CONCATENATED MODULE: external "lodash/has"
64
- const has_namespaceObject = require("lodash/has");
65
- var has_default = /*#__PURE__*/__webpack_require__.n(has_namespaceObject);
66
- ;// CONCATENATED MODULE: external "lodash/keys"
67
- const keys_namespaceObject = require("lodash/keys");
68
- var keys_default = /*#__PURE__*/__webpack_require__.n(keys_namespaceObject);
69
- ;// CONCATENATED MODULE: external "lodash/omit"
70
- const omit_namespaceObject = require("lodash/omit");
71
- var omit_default = /*#__PURE__*/__webpack_require__.n(omit_namespaceObject);
72
- ;// CONCATENATED MODULE: external "@splunk/ui-utils/id"
73
- const id_namespaceObject = require("@splunk/ui-utils/id");
74
- ;// CONCATENATED MODULE: external "@splunk/react-ui/TransitionOpen"
75
- const TransitionOpen_namespaceObject = require("@splunk/react-ui/TransitionOpen");
76
- var TransitionOpen_default = /*#__PURE__*/__webpack_require__.n(TransitionOpen_namespaceObject);
77
- ;// CONCATENATED MODULE: external "styled-components"
78
- const external_styled_components_namespaceObject = require("styled-components");
79
- var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_namespaceObject);
80
- ;// CONCATENATED MODULE: external "@splunk/react-ui/Box"
81
- const Box_namespaceObject = require("@splunk/react-ui/Box");
82
- var Box_default = /*#__PURE__*/__webpack_require__.n(Box_namespaceObject);
83
- ;// CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
84
- const Clickable_namespaceObject = require("@splunk/react-ui/Clickable");
85
- var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_namespaceObject);
86
- ;// CONCATENATED MODULE: external "@splunk/themes"
87
- const themes_namespaceObject = require("@splunk/themes");
88
- ;// CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanelStyles.ts
89
-
90
-
91
-
92
-
93
- var StyledBox = external_styled_components_default()((Box_default())).withConfig({
94
- displayName: "CollapsiblePanelStyles__StyledBox",
95
- componentId: "sc-1phikbp-0"
96
- })(["display:flex;flex-direction:column;min-height:", ";", ";& + &{margin-top:", ";}"], (0,themes_namespaceObject.pick)({
97
- enterprise: (0,external_styled_components_namespaceObject.css)(["calc(", " + 12px)"], themes_namespaceObject.variables.lineHeight),
98
- prisma: {
99
- comfortable: '56px',
100
- compact: '48px'
101
- }
102
- }), (0,themes_namespaceObject.pick)({
103
- prisma: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.variables.backgroundColorSection)
104
- }), (0,themes_namespaceObject.pick)({
105
- enterprise: '2px',
106
- prisma: '1px'
107
- }));
108
- var StyledIcon = external_styled_components_default().span.withConfig({
109
- displayName: "CollapsiblePanelStyles__StyledIcon",
110
- componentId: "sc-1phikbp-1"
111
- })(["position:absolute;left:", ";transition:transform ", ";", ";"], (0,themes_namespaceObject.pick)({
112
- enterprise: '12px',
113
- prisma: '20px'
114
- }), (0,themes_namespaceObject.pick)({
115
- enterprise: '300ms',
116
- prisma: '200ms'
117
- }), (0,themes_namespaceObject.pick)({
118
- prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";display:flex;top:", ";[disabled] > &{color:inherit;}"], themes_namespaceObject.variables.contentColorDefault, (0,themes_namespaceObject.pick)({
119
- comfortable: '20px',
120
- compact: '16px'
121
- }))
122
- }));
123
- var StyledTitleWithActions = external_styled_components_default().div.withConfig({
124
- displayName: "CollapsiblePanelStyles__StyledTitleWithActions",
125
- componentId: "sc-1phikbp-2"
126
- })(["flex-shrink:0;border-bottom:0;position:relative;padding:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";", " ", ""], (0,themes_namespaceObject.pick)({
127
- enterprise: (0,external_styled_components_namespaceObject.css)(["", " ", " ", " 30px"], themes_namespaceObject.variables.spacingXSmall, themes_namespaceObject.variables.spacingSmall, themes_namespaceObject.variables.spacingXSmall),
128
- prisma: {
129
- comfortable: '8px 10px 8px 52px',
130
- compact: '8px 10px 8px 52px'
131
- }
132
- }), (0,themes_namespaceObject.pick)({
133
- enterprise: themes_namespaceObject.variables.textColor,
134
- prisma: themes_namespaceObject.variables.contentColorActive
135
- }), (0,themes_namespaceObject.pick)({
136
- prisma: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.variables.interactiveColorBackground),
137
- enterprise: {
138
- dark: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.variables.gray45),
139
- light: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.variables.gray96)
140
- }
141
- }), function (_ref) {
142
- var $disabled = _ref.$disabled;
143
- return $disabled && (0,external_styled_components_namespaceObject.css)(["cursor:default;color:", ";"], (0,themes_namespaceObject.pick)({
144
- enterprise: themes_namespaceObject.variables.contentColorDefault,
145
- prisma: themes_namespaceObject.variables.contentColorDisabled
146
- }));
147
- });
148
- var StyledClickableIcon = external_styled_components_default()((Clickable_default())).withConfig({
149
- displayName: "CollapsiblePanelStyles__StyledClickableIcon",
150
- componentId: "sc-1phikbp-3"
151
- })(["position:absolute;left:", ";padding:", ";top:8px;& > svg{transition:transform ", ";}", ";", " &:focus:not([disabled]),&:active:not([disabled]){color:", ";box-shadow:", ";}&:hover:not([disabled]){color:", ";background-color:", ";}"], (0,themes_namespaceObject.pick)({
152
- enterprise: '4px',
153
- prisma: '8px'
154
- }), (0,themes_namespaceObject.pick)({
155
- enterprise: {
156
- comfortable: '2px 8px',
157
- compact: '0px 8px'
158
- },
159
- prisma: {
160
- comfortable: '14px',
161
- compact: '8px'
162
- }
163
- }), (0,themes_namespaceObject.pick)({
164
- enterprise: '300ms',
165
- prisma: '200ms'
166
- }), (0,themes_namespaceObject.pick)({
167
- prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";display:flex;[disabled] > &{color:inherit;}"], themes_namespaceObject.variables.contentColorDefault)
168
- }), (0,themes_namespaceObject.pickVariant)('$open', {
169
- "true": (0,external_styled_components_namespaceObject.css)(["& > svg{transform:rotate(90deg);}"])
170
- }), (0,themes_namespaceObject.pick)({
171
- enterprise: themes_namespaceObject.variables.textColor,
172
- prisma: themes_namespaceObject.variables.contentColorActive
173
- }), themes_namespaceObject.variables.focusShadowInset, (0,themes_namespaceObject.pick)({
174
- enterprise: themes_namespaceObject.variables.textColor,
175
- prisma: themes_namespaceObject.variables.contentColorActive
176
- }), (0,themes_namespaceObject.pick)({
177
- enterprise: {
178
- light: themes_namespaceObject.variables.gray92,
179
- dark: themes_namespaceObject.variables.gray30
180
- },
181
- prisma: themes_namespaceObject.mixins.overlayColors(themes_namespaceObject.variables.interactiveColorBackground, themes_namespaceObject.variables.interactiveColorOverlayHover)
182
- }));
183
- var StyledTitleClickable = external_styled_components_default()((Clickable_default())).withConfig({
184
- displayName: "CollapsiblePanelStyles__StyledTitleClickable",
185
- componentId: "sc-1phikbp-4"
186
- })(["width:100%;flex-shrink:0;border-bottom:0;cursor:pointer;position:relative;display:block;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", ";color:", ";", " ", " &[disabled]{cursor:default;color:", ";}&:focus:not([disabled]),&:active:not([disabled]){color:", ";box-shadow:", ";}&:hover:not([disabled]){color:", ";background-color:", ";}"], (0,themes_namespaceObject.pick)({
187
- enterprise: '6px 30px',
188
- prisma: {
189
- comfortable: '18px 20px 18px 52px',
190
- compact: '14px 20px 14px 52px'
191
- }
192
- }), (0,themes_namespaceObject.pick)({
193
- enterprise: themes_namespaceObject.variables.textColor,
194
- prisma: themes_namespaceObject.variables.contentColorActive
195
- }), (0,themes_namespaceObject.pick)({
196
- prisma: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.variables.interactiveColorBackground)
197
- }), (0,themes_namespaceObject.pickVariant)('$open', {
198
- "true": (0,external_styled_components_namespaceObject.css)(["", "{transform:rotate(90deg);}"],
199
- /* sc-sel */
200
- StyledIcon),
201
- "false": {
202
- enterprise: {
203
- dark: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.variables.gray45),
204
- light: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.variables.gray96)
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 o in r) {
28
+ /******/ if (e.o(r, o) && !e.o(t, o)) {
29
+ /******/ Object.defineProperty(t, o, {
30
+ enumerable: true,
31
+ get: r[o]
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
+ default: () => /* reexport */ te
65
+ });
66
+ // CONCATENATED MODULE: external "react"
67
+ const r = require("react");
68
+ var o = e.n(r);
69
+ // CONCATENATED MODULE: external "prop-types"
70
+ const n = require("prop-types");
71
+ var i = e.n(n);
72
+ // CONCATENATED MODULE: external "lodash/has"
73
+ const a = require("lodash/has");
74
+ var l = e.n(a);
75
+ // CONCATENATED MODULE: external "lodash/keys"
76
+ const s = require("lodash/keys");
77
+ var c = e.n(s);
78
+ // CONCATENATED MODULE: external "lodash/omit"
79
+ const p = require("lodash/omit");
80
+ var d = e.n(p);
81
+ // CONCATENATED MODULE: external "@splunk/ui-utils/id"
82
+ const u = require("@splunk/ui-utils/id");
83
+ // CONCATENATED MODULE: external "@splunk/react-ui/TransitionOpen"
84
+ const f = require("@splunk/react-ui/TransitionOpen");
85
+ var b = e.n(f);
86
+ // CONCATENATED MODULE: external "styled-components"
87
+ const v = require("styled-components");
88
+ var m = e.n(v);
89
+ // CONCATENATED MODULE: external "@splunk/react-ui/Box"
90
+ const h = require("@splunk/react-ui/Box");
91
+ var y = e.n(h);
92
+ // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
93
+ const g = require("@splunk/react-ui/Clickable");
94
+ var k = e.n(g);
95
+ // CONCATENATED MODULE: external "@splunk/themes"
96
+ const C = require("@splunk/themes");
97
+ // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanelStyles.ts
98
+ var x = m()(y()).withConfig({
99
+ displayName: "CollapsiblePanelStyles__StyledBox",
100
+ componentId: "sc-1phikbp-0"
101
+ })([ "display:flex;flex-direction:column;min-height:", ";", ";& + &{margin-top:", ";}" ], (0,
102
+ C.pick)({
103
+ enterprise: (0, v.css)([ "calc(", " + 12px)" ], C.variables.lineHeight),
104
+ prisma: {
105
+ comfortable: "56px",
106
+ compact: "48px"
107
+ }
108
+ }), (0, C.pick)({
109
+ prisma: (0, v.css)([ "background-color:", ";" ], C.variables.backgroundColorSection)
110
+ }), (0, C.pick)({
111
+ enterprise: "2px",
112
+ prisma: "1px"
113
+ }));
114
+ var O = m().span.withConfig({
115
+ displayName: "CollapsiblePanelStyles__StyledIcon",
116
+ componentId: "sc-1phikbp-1"
117
+ })([ "position:absolute;left:", ";transition:transform ", ";", ";" ], (0, C.pick)({
118
+ enterprise: "12px",
119
+ prisma: "20px"
120
+ }), (0, C.pick)({
121
+ enterprise: "300ms",
122
+ prisma: "200ms"
123
+ }), (0, C.pick)({
124
+ prisma: (0, v.css)([ "color:", ";display:flex;top:", ";[disabled] > &{color:inherit;}" ], C.variables.contentColorDefault, (0,
125
+ C.pick)({
126
+ comfortable: "20px",
127
+ compact: "16px"
128
+ }))
129
+ }));
130
+ var S = m().div.withConfig({
131
+ displayName: "CollapsiblePanelStyles__StyledTitleWithActions",
132
+ componentId: "sc-1phikbp-2"
133
+ })([ "flex-shrink:0;border-bottom:0;position:relative;padding:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;color:", ";", " ", "" ], (0,
134
+ C.pick)({
135
+ enterprise: (0, v.css)([ "", " ", " ", " 30px" ], C.variables.spacingXSmall, C.variables.spacingSmall, C.variables.spacingXSmall),
136
+ prisma: {
137
+ comfortable: "8px 10px 8px 52px",
138
+ compact: "8px 10px 8px 52px"
139
+ }
140
+ }), (0, C.pick)({
141
+ enterprise: C.variables.textColor,
142
+ prisma: C.variables.contentColorActive
143
+ }), (0, C.pick)({
144
+ prisma: (0, v.css)([ "background-color:", ";" ], C.variables.interactiveColorBackground),
145
+ enterprise: {
146
+ dark: (0, v.css)([ "background-color:", ";" ], C.variables.gray45),
147
+ light: (0, v.css)([ "background-color:", ";" ], C.variables.gray96)
148
+ }
149
+ }), (function(e) {
150
+ var t = e.$disabled;
151
+ return t && (0, v.css)([ "cursor:default;color:", ";" ], (0, C.pick)({
152
+ enterprise: C.variables.contentColorDefault,
153
+ prisma: C.variables.contentColorDisabled
154
+ }));
155
+ }));
156
+ var w = m()(k()).withConfig({
157
+ displayName: "CollapsiblePanelStyles__StyledClickableIcon",
158
+ componentId: "sc-1phikbp-3"
159
+ })([ "position:absolute;left:", ";padding:", ";top:8px;& > svg{transition:transform ", ";}", ";", " &:focus:not([disabled]),&:active:not([disabled]){color:", ";box-shadow:", ";}&:hover:not([disabled]){color:", ";background-color:", ";}" ], (0,
160
+ C.pick)({
161
+ enterprise: "4px",
162
+ prisma: "8px"
163
+ }), (0, C.pick)({
164
+ enterprise: {
165
+ comfortable: "2px 8px",
166
+ compact: "0px 8px"
167
+ },
168
+ prisma: {
169
+ comfortable: "14px",
170
+ compact: "8px"
171
+ }
172
+ }), (0, C.pick)({
173
+ enterprise: "300ms",
174
+ prisma: "200ms"
175
+ }), (0, C.pick)({
176
+ prisma: (0, v.css)([ "color:", ";display:flex;[disabled] > &{color:inherit;}" ], C.variables.contentColorDefault)
177
+ }), (0, C.pickVariant)("$open", {
178
+ true: (0, v.css)([ "& > svg{transform:rotate(90deg);}" ])
179
+ }), (0, C.pick)({
180
+ enterprise: C.variables.textColor,
181
+ prisma: C.variables.contentColorActive
182
+ }), C.variables.focusShadowInset, (0, C.pick)({
183
+ enterprise: C.variables.textColor,
184
+ prisma: C.variables.contentColorActive
185
+ }), (0, C.pick)({
186
+ enterprise: {
187
+ light: C.variables.gray92,
188
+ dark: C.variables.gray30
189
+ },
190
+ prisma: C.mixins.overlayColors(C.variables.interactiveColorBackground, C.variables.interactiveColorOverlayHover)
191
+ }));
192
+ var P = m()(k()).withConfig({
193
+ displayName: "CollapsiblePanelStyles__StyledTitleClickable",
194
+ componentId: "sc-1phikbp-4"
195
+ })([ "width:100%;flex-shrink:0;border-bottom:0;cursor:pointer;position:relative;display:block;transition:background-color 0.2s,border 0.2s,box-shadow 0.2s;padding:", ";color:", ";", " ", " &[disabled]{cursor:default;color:", ";}&:focus:not([disabled]),&:active:not([disabled]){color:", ";box-shadow:", ";}&:hover:not([disabled]){color:", ";background-color:", ";}" ], (0,
196
+ C.pick)({
197
+ enterprise: "6px 30px",
198
+ prisma: {
199
+ comfortable: "18px 20px 18px 52px",
200
+ compact: "14px 20px 14px 52px"
201
+ }
202
+ }), (0, C.pick)({
203
+ enterprise: C.variables.textColor,
204
+ prisma: C.variables.contentColorActive
205
+ }), (0, C.pick)({
206
+ prisma: (0, v.css)([ "background-color:", ";" ], C.variables.interactiveColorBackground)
207
+ }), (0, C.pickVariant)("$open", {
208
+ true: (0, v.css)([ "", "{transform:rotate(90deg);}" ],
209
+ /* sc-sel */
210
+ O),
211
+ false: {
212
+ enterprise: {
213
+ dark: (0, v.css)([ "background-color:", ";" ], C.variables.gray45),
214
+ light: (0, v.css)([ "background-color:", ";" ], C.variables.gray96)
215
+ }
216
+ }
217
+ }), (0, C.pick)({
218
+ enterprise: C.variables.contentColorDefault,
219
+ prisma: C.variables.contentColorDisabled
220
+ }), (0, C.pick)({
221
+ enterprise: C.variables.textColor,
222
+ prisma: C.variables.contentColorActive
223
+ }), C.variables.focusShadowInset, (0, C.pick)({
224
+ enterprise: C.variables.textColor,
225
+ prisma: C.variables.contentColorActive
226
+ }), (0, C.pick)({
227
+ enterprise: {
228
+ light: C.variables.gray92,
229
+ dark: C.variables.gray30
230
+ },
231
+ prisma: C.mixins.overlayColors(C.variables.interactiveColorBackground, C.variables.interactiveColorOverlayHover)
232
+ }));
233
+ var I = m().span.withConfig({
234
+ displayName: "CollapsiblePanelStyles__StyledHeadingContent",
235
+ componentId: "sc-1phikbp-5"
236
+ })([ "display:flex;justify-content:space-between;", " ", "" ], (0, C.pick)({
237
+ prisma: (0, v.css)([ "font-weight:", ";" ], C.variables.fontWeightSemiBold)
238
+ }), (function(e) {
239
+ var t = e.$titleWithActions;
240
+ return t && (0, v.css)([ "min-height:", ";" ], (0, C.pick)({
241
+ prisma: {
242
+ comfortable: "40px",
243
+ compact: "32px"
244
+ }
245
+ }));
246
+ }));
247
+ var j = m().span.withConfig({
248
+ displayName: "CollapsiblePanelStyles__StyledDescription",
249
+ componentId: "sc-1phikbp-6"
250
+ })([ "font-size:", ";margin-left:", ";" ], C.variables.fontSizeSmall, (0, C.pick)({
251
+ enterprise: C.variables.spacingHalf,
252
+ prisma: C.variables.spacingLarge
253
+ }));
254
+ // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
255
+ const _ = require("@splunk/react-icons/ChevronRight");
256
+ var E = e.n(_);
257
+ // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
258
+ const q = require("@splunk/react-icons/enterprise/ChevronRight");
259
+ var R = e.n(q);
260
+ // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
261
+ const D = require("@splunk/ui-utils/i18n");
262
+ // CONCATENATED MODULE: ./src/CollapsiblePanel/icons/ExpandPanel.tsx
263
+ var A = {
264
+ open: i().bool
265
+ };
266
+ var T = function e(t) {
267
+ var r = t.open;
268
+ var n = (0, C.useSplunkTheme)(), i = n.isEnterprise;
269
+ var a = r ? (0, D._)("Panel is open") : (0, D._)("Panel is closed");
270
+ return i ? o().createElement(R(), {
271
+ hideDefaultTooltip: true,
272
+ screenReaderText: a
273
+ }) : o().createElement(E(), {
274
+ "aria-label": a
275
+ });
276
+ };
277
+ T.propTypes = A;
278
+ /* harmony default export */ const W = T;
279
+ // CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanel.tsx
280
+ function B(e) {
281
+ "@babel/helpers - typeof";
282
+ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
283
+ B = function e(t) {
284
+ return typeof t;
285
+ };
286
+ } else {
287
+ B = function e(t) {
288
+ return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
289
+ };
290
+ }
291
+ return B(e);
205
292
  }
206
- }
207
- }), (0,themes_namespaceObject.pick)({
208
- enterprise: themes_namespaceObject.variables.contentColorDefault,
209
- prisma: themes_namespaceObject.variables.contentColorDisabled
210
- }), (0,themes_namespaceObject.pick)({
211
- enterprise: themes_namespaceObject.variables.textColor,
212
- prisma: themes_namespaceObject.variables.contentColorActive
213
- }), themes_namespaceObject.variables.focusShadowInset, (0,themes_namespaceObject.pick)({
214
- enterprise: themes_namespaceObject.variables.textColor,
215
- prisma: themes_namespaceObject.variables.contentColorActive
216
- }), (0,themes_namespaceObject.pick)({
217
- enterprise: {
218
- light: themes_namespaceObject.variables.gray92,
219
- dark: themes_namespaceObject.variables.gray30
220
- },
221
- prisma: themes_namespaceObject.mixins.overlayColors(themes_namespaceObject.variables.interactiveColorBackground, themes_namespaceObject.variables.interactiveColorOverlayHover)
222
- }));
223
- var StyledHeadingContent = external_styled_components_default().span.withConfig({
224
- displayName: "CollapsiblePanelStyles__StyledHeadingContent",
225
- componentId: "sc-1phikbp-5"
226
- })(["display:flex;justify-content:space-between;", " ", ""], (0,themes_namespaceObject.pick)({
227
- prisma: (0,external_styled_components_namespaceObject.css)(["font-weight:", ";"], themes_namespaceObject.variables.fontWeightSemiBold)
228
- }), function (_ref2) {
229
- var $titleWithActions = _ref2.$titleWithActions;
230
- return $titleWithActions && (0,external_styled_components_namespaceObject.css)(["min-height:", ";"], (0,themes_namespaceObject.pick)({
231
- prisma: {
232
- comfortable: '40px',
233
- compact: '32px'
293
+ function $() {
294
+ $ = Object.assign || function(e) {
295
+ for (var t = 1; t < arguments.length; t++) {
296
+ var r = arguments[t];
297
+ for (var o in r) {
298
+ if (Object.prototype.hasOwnProperty.call(r, o)) {
299
+ e[o] = r[o];
300
+ }
301
+ }
302
+ }
303
+ return e;
304
+ };
305
+ return $.apply(this, arguments);
234
306
  }
235
- }));
236
- });
237
- var StyledDescription = external_styled_components_default().span.withConfig({
238
- displayName: "CollapsiblePanelStyles__StyledDescription",
239
- componentId: "sc-1phikbp-6"
240
- })(["font-size:", ";margin-left:", ";"], themes_namespaceObject.variables.fontSizeSmall, (0,themes_namespaceObject.pick)({
241
- enterprise: themes_namespaceObject.variables.spacingHalf,
242
- prisma: themes_namespaceObject.variables.spacingLarge
243
- }));
244
-
245
- ;// CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
246
- const ChevronRight_namespaceObject = require("@splunk/react-icons/ChevronRight");
247
- var ChevronRight_default = /*#__PURE__*/__webpack_require__.n(ChevronRight_namespaceObject);
248
- ;// CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
249
- const enterprise_ChevronRight_namespaceObject = require("@splunk/react-icons/enterprise/ChevronRight");
250
- var enterprise_ChevronRight_default = /*#__PURE__*/__webpack_require__.n(enterprise_ChevronRight_namespaceObject);
251
- ;// CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
252
- const i18n_namespaceObject = require("@splunk/ui-utils/i18n");
253
- ;// CONCATENATED MODULE: ./src/CollapsiblePanel/icons/ExpandPanel.tsx
254
-
255
-
256
-
257
-
258
-
259
-
260
- var propTypes = {
261
- open: (external_prop_types_default()).bool
262
- };
263
-
264
- var ChevronRight = function ChevronRight(_ref) {
265
- var open = _ref.open;
266
-
267
- var _useSplunkTheme = (0,themes_namespaceObject.useSplunkTheme)(),
268
- isEnterprise = _useSplunkTheme.isEnterprise;
269
-
270
- var screenReaderText = open ? (0,i18n_namespaceObject._)('Panel is open') : (0,i18n_namespaceObject._)('Panel is closed');
271
- return isEnterprise ? /*#__PURE__*/external_react_default().createElement((enterprise_ChevronRight_default()), {
272
- hideDefaultTooltip: true,
273
- screenReaderText: screenReaderText
274
- }) : /*#__PURE__*/external_react_default().createElement((ChevronRight_default()), {
275
- "aria-label": screenReaderText
276
- });
277
- };
278
-
279
- ChevronRight.propTypes = propTypes;
280
- /* harmony default export */ const ExpandPanel = (ChevronRight);
281
- ;// CONCATENATED MODULE: ./src/CollapsiblePanel/CollapsiblePanel.tsx
282
- 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); }
283
-
284
- 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); }
285
-
286
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
287
-
288
- 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; }
289
-
290
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
291
-
292
- 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); } }
293
-
294
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
295
-
296
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
297
-
298
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
299
-
300
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
301
-
302
- function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
303
-
304
- function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
305
-
306
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
307
-
308
- function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
309
-
310
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
311
-
312
-
313
-
314
-
315
-
316
-
317
-
318
-
319
-
320
-
321
- /** @public */
322
-
323
- var CollapsiblePanel_propTypes = {
324
- innerBodyStyles: (external_prop_types_default()).object,
325
- children: (external_prop_types_default()).node,
326
- defaultOpen: (external_prop_types_default()).bool,
327
- description: (external_prop_types_default()).string,
328
- disabled: (external_prop_types_default()).bool,
329
- elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
330
- headingLevel: (external_prop_types_default()).number,
331
- onRequestClose: (external_prop_types_default()).func,
332
- onRequestOpen: (external_prop_types_default()).func,
333
- open: (external_prop_types_default()).bool,
334
- overflow: (external_prop_types_default()).string,
335
- panelId: (external_prop_types_default()).any,
336
- renderChildrenWhenCollapsed: (external_prop_types_default()).bool,
337
- title: (external_prop_types_default()).node.isRequired,
338
- titleWithActions: (external_prop_types_default()).bool
339
- };
340
- var defaultProps = {
341
- disabled: false,
342
- overflow: 'auto',
343
- renderChildrenWhenCollapsed: false,
344
- titleWithActions: false
345
- };
346
-
347
- var CollapsiblePanel = /*#__PURE__*/function (_Component) {
348
- _inherits(CollapsiblePanel, _Component);
349
-
350
- var _super = _createSuper(CollapsiblePanel);
351
-
352
- // @docs-props-type CollapsiblePanelPropsBase
353
- function CollapsiblePanel(props) {
354
- var _this;
355
-
356
- _classCallCheck(this, CollapsiblePanel);
357
-
358
- _this = _super.call(this, props);
359
-
360
- _defineProperty(_assertThisInitialized(_this), "controlledExternally", void 0);
361
-
362
- _defineProperty(_assertThisInitialized(_this), "containerId", void 0);
363
-
364
- _defineProperty(_assertThisInitialized(_this), "toggleId", void 0);
365
-
366
- _defineProperty(_assertThisInitialized(_this), "handleRequestClose", function (event) {
367
- var _this$props = _this.props,
368
- panelId = _this$props.panelId,
369
- onRequestClose = _this$props.onRequestClose;
370
- onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose({
371
- event: event,
372
- panelId: panelId,
373
- reason: 'toggleClick'
374
- });
375
-
376
- _this.setState(_objectSpread({
377
- animating: true
378
- }, !_this.isControlled() ? {
379
- open: false
380
- } : {}));
381
- });
382
-
383
- _defineProperty(_assertThisInitialized(_this), "handleRequestOpen", function (event) {
384
- var _this$props2 = _this.props,
385
- panelId = _this$props2.panelId,
386
- onRequestOpen = _this$props2.onRequestOpen;
387
- onRequestOpen === null || onRequestOpen === void 0 ? void 0 : onRequestOpen({
388
- event: event,
389
- panelId: panelId,
390
- reason: 'toggleClick'
391
- });
392
-
393
- _this.setState(_objectSpread({
394
- animating: true
395
- }, !_this.isControlled() ? {
396
- open: true
397
- } : {}));
398
- });
399
-
400
- _defineProperty(_assertThisInitialized(_this), "handleAnimationEnd", function () {
401
- _this.setState({
402
- animating: false
403
- });
404
- });
405
-
406
- _this.controlledExternally = has_default()(props, 'open');
407
- _this.state = _objectSpread({
408
- animating: false
409
- }, !_this.isControlled() ? {
410
- open: props.defaultOpen || false
411
- } : undefined);
412
-
413
- if (false) {}
414
-
415
- _this.containerId = "container-".concat((0,id_namespaceObject.createGUID)());
416
- _this.toggleId = "toggle-".concat((0,id_namespaceObject.createGUID)());
417
- return _this;
418
- }
419
-
420
- _createClass(CollapsiblePanel, [{
421
- key: "componentDidUpdate",
422
- value: function componentDidUpdate(prevProps) {
423
- if (this.props.open !== prevProps.open) {
424
- this.setState({
425
- animating: true
426
- }); // eslint-disable-line react/no-did-update-set-state
427
- }
428
-
429
- if (false) {}
430
-
431
- if (false) {}
307
+ function N(e, t) {
308
+ var r = Object.keys(e);
309
+ if (Object.getOwnPropertySymbols) {
310
+ var o = Object.getOwnPropertySymbols(e);
311
+ if (t) o = o.filter((function(t) {
312
+ return Object.getOwnPropertyDescriptor(e, t).enumerable;
313
+ }));
314
+ r.push.apply(r, o);
315
+ }
316
+ return r;
432
317
  }
433
- }, {
434
- key: "isControlled",
435
- value: function isControlled() {
436
- return this.controlledExternally;
318
+ function H(e) {
319
+ for (var t = 1; t < arguments.length; t++) {
320
+ var r = arguments[t] != null ? arguments[t] : {};
321
+ if (t % 2) {
322
+ N(Object(r), true).forEach((function(t) {
323
+ Q(e, t, r[t]);
324
+ }));
325
+ } else if (Object.getOwnPropertyDescriptors) {
326
+ Object.defineProperties(e, Object.getOwnPropertyDescriptors(r));
327
+ } else {
328
+ N(Object(r)).forEach((function(t) {
329
+ Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
330
+ }));
331
+ }
332
+ }
333
+ return e;
437
334
  }
438
- }, {
439
- key: "render",
440
- value: function render() {
441
- var _this$props3 = this.props,
442
- innerBodyStyles = _this$props3.innerBodyStyles,
443
- children = _this$props3.children,
444
- description = _this$props3.description,
445
- disabled = _this$props3.disabled,
446
- elementRef = _this$props3.elementRef,
447
- headingLevel = _this$props3.headingLevel,
448
- overflow = _this$props3.overflow,
449
- renderChildrenWhenCollapsed = _this$props3.renderChildrenWhenCollapsed,
450
- title = _this$props3.title,
451
- titleWithActions = _this$props3.titleWithActions;
452
- var animating = this.state.animating;
453
- var open = this.isControlled() ? this.props.open : this.state.open;
454
- return /*#__PURE__*/external_react_default().createElement(StyledBox, _extends({
455
- "data-test": "collapsible-panel",
456
- elementRef: elementRef
457
- }, omit_default()(this.props, keys_default()(CollapsiblePanel.propTypes))), titleWithActions ? /*#__PURE__*/external_react_default().createElement(StyledTitleWithActions, {
458
- $disabled: disabled
459
- }, /*#__PURE__*/external_react_default().createElement(StyledClickableIcon, {
460
- disabled: disabled,
461
- onClick: open ? this.handleRequestClose : this.handleRequestOpen,
462
- id: this.toggleId,
463
- "aria-controls": this.containerId,
464
- "aria-expanded": open,
465
- $open: !!open,
466
- "data-test": "toggle"
467
- }, /*#__PURE__*/external_react_default().createElement(ExpandPanel, {
468
- open: open
469
- })), /*#__PURE__*/external_react_default().createElement(StyledHeadingContent, {
470
- $titleWithActions: titleWithActions,
471
- "data-test": "title"
472
- }, title)) :
473
- /*#__PURE__*/
474
-
475
- /* Clickable component is not allowed to have role="heading" so it is wrapped with a span */
476
- external_react_default().createElement("span", {
477
- "data-test": "heading",
478
- role: headingLevel ? 'heading' : undefined,
479
- "aria-level": headingLevel
480
- }, /*#__PURE__*/external_react_default().createElement(StyledTitleClickable, {
481
- disabled: disabled,
482
- onClick: open ? this.handleRequestClose : this.handleRequestOpen,
483
- id: this.toggleId,
484
- "aria-controls": this.containerId,
485
- "aria-expanded": open,
486
- $open: !!open,
487
- "data-test": "toggle"
488
- }, /*#__PURE__*/external_react_default().createElement(StyledIcon, null, /*#__PURE__*/external_react_default().createElement(ExpandPanel, {
489
- open: open
490
- })), /*#__PURE__*/external_react_default().createElement(StyledHeadingContent, null, /*#__PURE__*/external_react_default().createElement("span", {
491
- "data-test": "title"
492
- }, title), description && /*#__PURE__*/external_react_default().createElement(StyledDescription, {
493
- "data-test": "description"
494
- }, description)))), /*#__PURE__*/external_react_default().createElement((TransitionOpen_default()), {
495
- outerId: this.containerId,
496
- "aria-labelledby": this.toggleId,
497
- "data-test": "body",
498
- outerStyle: {
499
- overflow: animating ? 'hidden' : overflow
500
- },
501
- innerStyle: _objectSpread({
502
- tableLayout: 'fixed'
503
- }, innerBodyStyles),
504
- open: open,
505
- onAnimationEnd: this.handleAnimationEnd,
506
- renderChildrenWhenCollapsed: renderChildrenWhenCollapsed
507
- }, children));
335
+ function L(e, t) {
336
+ if (!(e instanceof t)) {
337
+ throw new TypeError("Cannot call a class as a function");
338
+ }
339
+ }
340
+ function M(e, t) {
341
+ for (var r = 0; r < t.length; r++) {
342
+ var o = t[r];
343
+ o.enumerable = o.enumerable || false;
344
+ o.configurable = true;
345
+ if ("value" in o) o.writable = true;
346
+ Object.defineProperty(e, o.key, o);
347
+ }
348
+ }
349
+ function U(e, t, r) {
350
+ if (t) M(e.prototype, t);
351
+ if (r) M(e, r);
352
+ return e;
353
+ }
354
+ function z(e, t) {
355
+ if (typeof t !== "function" && t !== null) {
356
+ throw new TypeError("Super expression must either be null or a function");
357
+ }
358
+ e.prototype = Object.create(t && t.prototype, {
359
+ constructor: {
360
+ value: e,
361
+ writable: true,
362
+ configurable: true
363
+ }
364
+ });
365
+ if (t) G(e, t);
366
+ }
367
+ function G(e, t) {
368
+ G = Object.setPrototypeOf || function e(t, r) {
369
+ t.__proto__ = r;
370
+ return t;
371
+ };
372
+ return G(e, t);
373
+ }
374
+ function V(e) {
375
+ var t = J();
376
+ return function r() {
377
+ var o = K(e), n;
378
+ if (t) {
379
+ var i = K(this).constructor;
380
+ n = Reflect.construct(o, arguments, i);
381
+ } else {
382
+ n = o.apply(this, arguments);
383
+ }
384
+ return X(this, n);
385
+ };
386
+ }
387
+ function X(e, t) {
388
+ if (t && (B(t) === "object" || typeof t === "function")) {
389
+ return t;
390
+ }
391
+ return F(e);
392
+ }
393
+ function F(e) {
394
+ if (e === void 0) {
395
+ throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
396
+ }
397
+ return e;
398
+ }
399
+ function J() {
400
+ if (typeof Reflect === "undefined" || !Reflect.construct) return false;
401
+ if (Reflect.construct.sham) return false;
402
+ if (typeof Proxy === "function") return true;
403
+ try {
404
+ Date.prototype.toString.call(Reflect.construct(Date, [], (function() {})));
405
+ return true;
406
+ } catch (e) {
407
+ return false;
408
+ }
409
+ }
410
+ function K(e) {
411
+ K = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
412
+ return t.__proto__ || Object.getPrototypeOf(t);
413
+ };
414
+ return K(e);
415
+ }
416
+ function Q(e, t, r) {
417
+ if (t in e) {
418
+ Object.defineProperty(e, t, {
419
+ value: r,
420
+ enumerable: true,
421
+ configurable: true,
422
+ writable: true
423
+ });
424
+ } else {
425
+ e[t] = r;
426
+ }
427
+ return e;
508
428
  }
509
- }]);
510
-
511
- return CollapsiblePanel;
512
- }(external_react_namespaceObject.Component);
513
-
514
- _defineProperty(CollapsiblePanel, "propTypes", CollapsiblePanel_propTypes);
515
-
516
- _defineProperty(CollapsiblePanel, "defaultProps", defaultProps);
517
-
518
- /* harmony default export */ const CollapsiblePanel_CollapsiblePanel = (CollapsiblePanel);
519
- ;// CONCATENATED MODULE: ./src/CollapsiblePanel/index.ts
520
-
521
-
522
- module.exports = __webpack_exports__;
523
- /******/ })()
524
- ;
429
+ /** @public */ var Y = {
430
+ innerBodyStyles: i().object,
431
+ children: i().node,
432
+ defaultOpen: i().bool,
433
+ description: i().string,
434
+ disabled: i().bool,
435
+ elementRef: i().oneOfType([ i().func, i().object ]),
436
+ headingLevel: i().number,
437
+ onRequestClose: i().func,
438
+ onRequestOpen: i().func,
439
+ open: i().bool,
440
+ overflow: i().string,
441
+ panelId: i().any,
442
+ renderChildrenWhenCollapsed: i().bool,
443
+ title: i().node.isRequired,
444
+ titleWithActions: i().bool
445
+ };
446
+ var Z = {
447
+ disabled: false,
448
+ overflow: "auto",
449
+ renderChildrenWhenCollapsed: false,
450
+ titleWithActions: false
451
+ };
452
+ var ee = function(e) {
453
+ z(r, e);
454
+ var t = V(r);
455
+ // @docs-props-type CollapsiblePanelPropsBase
456
+ function r(e) {
457
+ var o;
458
+ L(this, r);
459
+ o = t.call(this, e);
460
+ Q(F(o), "controlledExternally", void 0);
461
+ Q(F(o), "containerId", void 0);
462
+ Q(F(o), "toggleId", void 0);
463
+ Q(F(o), "handleRequestClose", (function(e) {
464
+ var t = o.props, r = t.panelId, n = t.onRequestClose;
465
+ n === null || n === void 0 ? void 0 : n({
466
+ event: e,
467
+ panelId: r,
468
+ reason: "toggleClick"
469
+ });
470
+ o.setState(H({
471
+ animating: true
472
+ }, !o.isControlled() ? {
473
+ open: false
474
+ } : {}));
475
+ }));
476
+ Q(F(o), "handleRequestOpen", (function(e) {
477
+ var t = o.props, r = t.panelId, n = t.onRequestOpen;
478
+ n === null || n === void 0 ? void 0 : n({
479
+ event: e,
480
+ panelId: r,
481
+ reason: "toggleClick"
482
+ });
483
+ o.setState(H({
484
+ animating: true
485
+ }, !o.isControlled() ? {
486
+ open: true
487
+ } : {}));
488
+ }));
489
+ Q(F(o), "handleAnimationEnd", (function() {
490
+ o.setState({
491
+ animating: false
492
+ });
493
+ }));
494
+ o.controlledExternally = l()(e, "open");
495
+ o.state = H({
496
+ animating: false
497
+ }, !o.isControlled() ? {
498
+ open: e.defaultOpen || false
499
+ } : undefined);
500
+ if (false) {}
501
+ o.containerId = "container-".concat((0, u.createGUID)());
502
+ o.toggleId = "toggle-".concat((0, u.createGUID)());
503
+ return o;
504
+ }
505
+ U(r, [ {
506
+ key: "componentDidUpdate",
507
+ value: function e(t) {
508
+ if (this.props.open !== t.open) {
509
+ this.setState({
510
+ animating: true
511
+ });
512
+ // eslint-disable-line react/no-did-update-set-state
513
+ }
514
+ if (false) {}
515
+ if (false) {}
516
+ }
517
+ }, {
518
+ key: "isControlled",
519
+ value: function e() {
520
+ return this.controlledExternally;
521
+ }
522
+ }, {
523
+ key: "render",
524
+ value: function e() {
525
+ var t = this.props, n = t.innerBodyStyles, i = t.children, a = t.description, l = t.disabled, s = t.elementRef, p = t.headingLevel, u = t.overflow, f = t.renderChildrenWhenCollapsed, v = t.title, m = t.titleWithActions;
526
+ var h = this.state.animating;
527
+ var y = this.isControlled() ? this.props.open : this.state.open;
528
+
529
+ return o().createElement(x, $({
530
+ "data-test": "collapsible-panel",
531
+ elementRef: s
532
+ }, d()(this.props, c()(r.propTypes))), m ? o().createElement(S, {
533
+ $disabled: l
534
+ }, o().createElement(w, {
535
+ disabled: l,
536
+ onClick: y ? this.handleRequestClose : this.handleRequestOpen,
537
+ id: this.toggleId,
538
+ "aria-controls": this.containerId,
539
+ "aria-expanded": y,
540
+ $open: !!y,
541
+ "data-test": "toggle"
542
+ }, o().createElement(W, {
543
+ open: y
544
+ })), o().createElement(I, {
545
+ $titleWithActions: m,
546
+ "data-test": "title"
547
+ }, v)) :
548
+
549
+ /* Clickable component is not allowed to have role="heading" so it is wrapped with a span */
550
+ o().createElement("span", {
551
+ "data-test": "heading",
552
+ role: p ? "heading" : undefined,
553
+ "aria-level": p
554
+ }, o().createElement(P, {
555
+ disabled: l,
556
+ onClick: y ? this.handleRequestClose : this.handleRequestOpen,
557
+ id: this.toggleId,
558
+ "aria-controls": this.containerId,
559
+ "aria-expanded": y,
560
+ $open: !!y,
561
+ "data-test": "toggle"
562
+ }, o().createElement(O, null, o().createElement(W, {
563
+ open: y
564
+ })), o().createElement(I, null, o().createElement("span", {
565
+ "data-test": "title"
566
+ }, v), a && o().createElement(j, {
567
+ "data-test": "description"
568
+ }, a)))), o().createElement(b(), {
569
+ outerId: this.containerId,
570
+ "aria-labelledby": this.toggleId,
571
+ "data-test": "body",
572
+ outerStyle: {
573
+ overflow: h ? "hidden" : u
574
+ },
575
+ innerStyle: H({
576
+ tableLayout: "fixed"
577
+ }, n),
578
+ open: y,
579
+ onAnimationEnd: this.handleAnimationEnd,
580
+ renderChildrenWhenCollapsed: f
581
+ }, i));
582
+ }
583
+ } ]);
584
+ return r;
585
+ }(r.Component);
586
+ Q(ee, "propTypes", Y);
587
+ Q(ee, "defaultProps", Z);
588
+ /* harmony default export */ const te = ee;
589
+ // CONCATENATED MODULE: ./src/CollapsiblePanel/index.ts
590
+ module.exports = t;
591
+ /******/})();