@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.4

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 (149) hide show
  1. package/Accordion.js +185 -243
  2. package/Animation.js +2 -2
  3. package/Button.js +1 -1
  4. package/ButtonSimple.js +47 -41
  5. package/CHANGELOG.md +12 -2
  6. package/CHANGELOG.v5.mdx +38 -0
  7. package/Calendar.js +352 -469
  8. package/Chip.js +149 -280
  9. package/Code.js +19 -12
  10. package/Color.js +32 -32
  11. package/ComboBox.js +8 -6
  12. package/Date.js +1 -1
  13. package/DualListbox.js +298 -296
  14. package/File.js +294 -281
  15. package/FormRows.js +165 -153
  16. package/Image.js +124 -251
  17. package/Layout.d.ts +2 -0
  18. package/MIGRATION.v5.mdx +1 -1
  19. package/Menu.js +1 -1
  20. package/Message.js +77 -100
  21. package/MessageBar.js +141 -251
  22. package/Modal.js +2 -2
  23. package/ModalLayer.js +12 -12
  24. package/Multiselect.js +1978 -2323
  25. package/NonInteractiveCheckbox.js +29 -117
  26. package/Number.js +114 -114
  27. package/Popover.js +348 -350
  28. package/Progress.js +1 -1
  29. package/RadioBar.js +136 -136
  30. package/Scroll.js +2 -2
  31. package/Select.js +236 -240
  32. package/SidePanel.js +17 -21
  33. package/Slider.js +366 -370
  34. package/SlidingPanels.js +100 -102
  35. package/SplitButton.js +39 -25
  36. package/StepBar.js +1 -1
  37. package/Switch.js +70 -64
  38. package/TabBar.js +544 -417
  39. package/Table.js +1580 -1434
  40. package/Text.js +34 -34
  41. package/TextArea.js +26 -26
  42. package/Tooltip.js +416 -562
  43. package/TransitionOpen.js +2 -2
  44. package/package.json +7 -9
  45. package/types/src/Accordion/Accordion.d.ts +14 -21
  46. package/types/src/Accordion/AccordionContext.d.ts +0 -1
  47. package/types/src/Animation/Animation.d.ts +2 -3
  48. package/types/src/AnimationToggle/docs/examples/Provider.d.ts +2 -2
  49. package/types/src/AnimationToggle/docs/examples/ToggleComponent.d.ts +2 -2
  50. package/types/src/AnimationToggle/useAnimationToggle.d.ts +1 -1
  51. package/types/src/Button/Button.d.ts +1 -1
  52. package/types/src/ButtonGroup/ButtonGroupContext.d.ts +0 -1
  53. package/types/src/ButtonSimple/ButtonSimple.d.ts +1 -3
  54. package/types/src/ButtonSimple/mixin.d.ts +1 -1
  55. package/types/src/Calendar/Calendar.d.ts +2 -2
  56. package/types/src/Calendar/{DateTable.d.ts → DateGrid.d.ts} +9 -9
  57. package/types/src/Calendar/Day.d.ts +8 -4
  58. package/types/src/CardLayout/CardLayoutContext.d.ts +0 -1
  59. package/types/src/CardLayout/docs/examples/Interactive.d.ts +2 -2
  60. package/types/src/Clickable/Clickable.d.ts +1 -1
  61. package/types/src/CollapsiblePanel/SingleOpenPanelGroupContext.d.ts +0 -1
  62. package/types/src/ComboBox/ComboBox.d.ts +3 -3
  63. package/types/src/ControlGroup/docs/examples/CustomizedLabelTarget.d.ts +2 -2
  64. package/types/src/Date/docs/examples/Controlled.d.ts +2 -2
  65. package/types/src/Date/docs/examples/HighlightToday.d.ts +2 -2
  66. package/types/src/DefinitionList/DefinitionListContext.d.ts +0 -1
  67. package/types/src/DualListbox/DualListbox.d.ts +5 -1
  68. package/types/src/File/File.d.ts +4 -4
  69. package/types/src/File/FileContext.d.ts +0 -1
  70. package/types/src/File/Item.d.ts +11 -3
  71. package/types/src/File/ItemIcon.d.ts +2 -1
  72. package/types/src/File/docs/examples/Disabled.d.ts +2 -2
  73. package/types/src/File/docs/examples/DropAnywhere.d.ts +2 -2
  74. package/types/src/File/docs/examples/Multi.d.ts +2 -2
  75. package/types/src/File/docs/examples/Single.d.ts +2 -2
  76. package/types/src/FormRows/FormRows.d.ts +4 -4
  77. package/types/src/FormRows/FormRowsContext.d.ts +1 -2
  78. package/types/src/FormRows/SortableRow.d.ts +1 -1
  79. package/types/src/FormRows/docs/examples/Basic.d.ts +2 -2
  80. package/types/src/FormRows/docs/examples/Header.d.ts +2 -2
  81. package/types/src/FormRows/docs/examples/Menu.d.ts +2 -2
  82. package/types/src/FormRows/docs/examples/ReorderOnly.d.ts +2 -2
  83. package/types/src/Image/Image.d.ts +1 -4
  84. package/types/src/JSONTree/docs/examples/Events.d.ts +2 -2
  85. package/types/src/Layout/Layout.d.ts +1 -0
  86. package/types/src/Link/icons/External.d.ts +1 -2
  87. package/types/src/Menu/Divider.d.ts +1 -1
  88. package/types/src/Menu/MenuContext.d.ts +0 -1
  89. package/types/src/MessageBar/MessageBar.d.ts +5 -1
  90. package/types/src/Modal/ModalContext.d.ts +0 -1
  91. package/types/src/Multiselect/Compact.d.ts +46 -21
  92. package/types/src/Multiselect/Multiselect.d.ts +70 -30
  93. package/types/src/Multiselect/Normal.d.ts +46 -57
  94. package/types/src/Multiselect/Option.d.ts +42 -18
  95. package/types/src/Multiselect/docs/examples/Children.d.ts +2 -2
  96. package/types/src/Multiselect/docs/examples/Controlled.d.ts +2 -2
  97. package/types/src/Multiselect/docs/examples/CustomizeSelected.d.ts +2 -2
  98. package/types/src/Multiselect/docs/examples/Disabled.d.ts +2 -2
  99. package/types/src/Multiselect/docs/examples/Error.d.ts +2 -2
  100. package/types/src/Multiselect/docs/examples/Fetching.d.ts +2 -2
  101. package/types/src/Multiselect/docs/examples/LoadMoreOnScrollBottom.d.ts +2 -2
  102. package/types/src/Multiselect/docs/examples/NewValues.d.ts +2 -2
  103. package/types/src/Multiselect/docs/examples/TabInput.d.ts +2 -2
  104. package/types/src/NonInteractiveCheckbox/NonInteractiveCheckbox.d.ts +8 -7
  105. package/types/src/Number/docs/examples/Basic.d.ts +2 -2
  106. package/types/src/Number/docs/examples/Limits.d.ts +2 -2
  107. package/types/src/Number/docs/examples/Locale.d.ts +2 -2
  108. package/types/src/Popover/Popover.d.ts +1 -1
  109. package/types/src/Popover/PopoverMenuContext.d.ts +0 -1
  110. package/types/src/RadioBar/RadioBar.d.ts +1 -1
  111. package/types/src/RadioBar/RadioBarContext.d.ts +0 -1
  112. package/types/src/RadioList/RadioListContext.d.ts +0 -1
  113. package/types/src/Scroll/Inner.d.ts +1 -1
  114. package/types/src/Scroll/docs/examples/Controlled.d.ts +2 -2
  115. package/types/src/Search/Search.d.ts +2 -2
  116. package/types/src/Select/SelectBase.d.ts +2 -2
  117. package/types/src/Slider/docs/examples/Controlled.d.ts +2 -2
  118. package/types/src/Slider/docs/examples/CustomLabels.d.ts +2 -2
  119. package/types/src/Slider/getStepMarksBackground.d.ts +8 -0
  120. package/types/src/SlidingPanels/Panel.d.ts +2 -2
  121. package/types/src/SlidingPanels/SlidingPanels.d.ts +2 -2
  122. package/types/src/SlidingPanels/docs/examples/Basic.d.ts +2 -2
  123. package/types/src/SlidingPanels/docs/examples/Dropdown.d.ts +2 -2
  124. package/types/src/SplitButton/Item.d.ts +15 -2
  125. package/types/src/StepBar/Step.d.ts +1 -1
  126. package/types/src/StepBar/StepBar.d.ts +1 -1
  127. package/types/src/StepBar/StepBarContext.d.ts +0 -1
  128. package/types/src/Switch/docs/examples/Basic.d.ts +2 -2
  129. package/types/src/Switch/docs/examples/Disabled.d.ts +2 -2
  130. package/types/src/TabBar/Tab.d.ts +12 -5
  131. package/types/src/TabBar/TabBar.d.ts +3 -2
  132. package/types/src/TabBar/TabBarContext.d.ts +7 -2
  133. package/types/src/Table/Head.d.ts +4 -15
  134. package/types/src/Table/HeadCell.d.ts +23 -25
  135. package/types/src/Table/HeadDropdownCell.d.ts +23 -26
  136. package/types/src/Table/HeadInner.d.ts +4 -10
  137. package/types/src/Table/Row.d.ts +6 -6
  138. package/types/src/Table/Table.d.ts +3 -8
  139. package/types/src/Table/TableContext.d.ts +0 -1
  140. package/types/src/Tooltip/Tooltip.d.ts +26 -58
  141. package/types/src/Tooltip/docs/examples/Controlled.d.ts +2 -2
  142. package/types/src/Tree/TreeContext.d.ts +0 -1
  143. package/types/src/useForceUpdate/useForceUpdate.d.ts +0 -1
  144. package/types/src/useResizeObserver/useResizeObserver.d.ts +2 -1
  145. package/types/src/utils/types.d.ts +2 -3
  146. package/useResizeObserver.js +26 -19
  147. package/types/src/Image/icons/Cross.d.ts +0 -3
  148. package/types/src/Table/docs/examples/prisma/DockedHeaderScrollbar.d.ts +0 -3
  149. package/types/src/Tooltip/InfoIcon.d.ts +0 -4
package/MessageBar.js CHANGED
@@ -24,11 +24,11 @@
24
24
  /******/ (() => {
25
25
  /******/ // define getter functions for harmony exports
26
26
  /******/ e.d = (r, a) => {
27
- /******/ for (var s in a) {
28
- /******/ if (e.o(a, s) && !e.o(r, s)) {
29
- /******/ Object.defineProperty(r, s, {
27
+ /******/ for (var i in a) {
28
+ /******/ if (e.o(a, i) && !e.o(r, i)) {
29
+ /******/ Object.defineProperty(r, i, {
30
30
  enumerable: true,
31
- get: a[s]
31
+ get: a[i]
32
32
  });
33
33
  /******/ }
34
34
  /******/ }
@@ -61,324 +61,214 @@
61
61
  e.r(r);
62
62
  // EXPORTS
63
63
  e.d(r, {
64
- default: () => /* reexport */ se
64
+ default: () => /* reexport */ P
65
65
  });
66
66
  // CONCATENATED MODULE: external "react"
67
67
  const a = require("react");
68
- var s = e.n(a);
68
+ var i = e.n(a);
69
69
  // CONCATENATED MODULE: external "prop-types"
70
- const i = require("prop-types");
71
- var n = e.n(i);
70
+ const s = require("prop-types");
71
+ var n = e.n(s);
72
+ // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
73
+ const t = require("@splunk/react-icons/CheckCircle");
74
+ var o = e.n(t);
72
75
  // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
73
- const o = require("@splunk/react-icons/Cross");
74
- var t = e.n(o);
75
- // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
76
- const l = require("@splunk/react-icons/enterprise/Close");
76
+ const l = require("@splunk/react-icons/Cross");
77
77
  var c = e.n(l);
78
- // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
79
- const p = require("@splunk/react-ui/ScreenReaderContent");
80
- var d = e.n(p);
81
- // CONCATENATED MODULE: external "@splunk/themes"
82
- const u = require("@splunk/themes");
83
- // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
84
- const v = require("@splunk/ui-utils/i18n");
85
- // CONCATENATED MODULE: external "styled-components"
86
- const b = require("styled-components");
87
- var g = e.n(b);
88
- // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
89
- const h = require("@splunk/react-icons/CheckCircle");
90
- var y = e.n(h);
91
78
  // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationCircle"
92
- const m = require("@splunk/react-icons/ExclamationCircle");
93
- var k = e.n(m);
79
+ const p = require("@splunk/react-icons/ExclamationCircle");
80
+ var d = e.n(p);
94
81
  // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
95
- const x = require("@splunk/react-icons/InformationCircle");
96
- var f = e.n(x);
82
+ const u = require("@splunk/react-icons/InformationCircle");
83
+ var b = e.n(u);
97
84
  // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationTriangle"
98
- const C = require("@splunk/react-icons/ExclamationTriangle");
99
- var w = e.n(C);
100
- // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Error"
101
- const S = require("@splunk/react-icons/enterprise/Error");
102
- var _ = e.n(S);
103
- // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/InfoCircle"
104
- const I = require("@splunk/react-icons/enterprise/InfoCircle");
105
- var z = e.n(I);
106
- // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Success"
107
- const q = require("@splunk/react-icons/enterprise/Success");
108
- var E = e.n(q);
109
- // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Warning"
110
- const O = require("@splunk/react-icons/enterprise/Warning");
111
- var B = e.n(O);
112
- // CONCATENATED MODULE: external "@splunk/react-ui/Box"
113
- const M = require("@splunk/react-ui/Box");
114
- var j = e.n(M);
85
+ const v = require("@splunk/react-icons/ExclamationTriangle");
86
+ var g = e.n(v);
87
+ // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
88
+ const f = require("@splunk/react-ui/ScreenReaderContent");
89
+ var h = e.n(f);
90
+ // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
91
+ const x = require("@splunk/ui-utils/i18n");
92
+ // CONCATENATED MODULE: external "styled-components"
93
+ const y = require("styled-components");
94
+ var k = e.n(y);
115
95
  // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
116
- const N = require("@splunk/react-ui/Clickable");
117
- var R = e.n(N);
96
+ const m = require("@splunk/react-ui/Clickable");
97
+ var w = e.n(m);
98
+ // CONCATENATED MODULE: external "@splunk/themes"
99
+ const C = require("@splunk/themes");
118
100
  // CONCATENATED MODULE: ./src/MessageBar/MessageBarStyles.ts
119
- var T = g().div.withConfig({
101
+ var O = k().div.withConfig({
120
102
  displayName: "MessageBarStyles__MessageBarContent",
121
103
  componentId: "sc-1uyhzza-0"
122
- })([ "", ";color:inherit;padding:0 8px;text-align:center;margin-right:auto;& a,& button[data-test='link']{display:inline-block;color:inherit;text-decoration:underline;text-underline-position:under;padding:0 3px 2px 3px;&:not([disabled],[aria-disabled='true']){&:hover,&:active,&:focus{color:", ";text-decoration:underline;text-decoration-thickness:2px;}}&:not([disabled]):focus{border-radius:", ";outline:0;", ";}}" ], u.mixins.reset("inline"), u.variables.contentColorLink, u.variables.borderRadius, (0,
123
- u.pick)({
104
+ })([ "", ";color:inherit;padding:0 8px;text-align:center;margin-right:auto;& a,& button[data-test='link']{display:inline-block;color:inherit;text-decoration:underline;text-underline-position:under;padding:0 3px 2px 3px;&:not([disabled],[aria-disabled='true']){&:hover,&:active,&:focus{color:", ";text-decoration:underline;text-decoration-thickness:2px;}}&:not([disabled]):focus{border-radius:", ";outline:0;", ";}}" ], C.mixins.reset("inline"), C.variables.contentColorLink, C.variables.borderRadius, (0,
105
+ C.pick)({
124
106
  enterprise: {
125
- dark: (0, b.css)([ "box-shadow:0 0 0 2px ", ";" ], u.variables.gray80),
126
- light: (0, b.css)([ "box-shadow:0 0 0 2px ", ";" ], u.variables.gray25)
107
+ dark: (0, y.css)([ "box-shadow:0 0 0 2px ", ";" ], C.variables.gray80),
108
+ light: (0, y.css)([ "box-shadow:0 0 0 2px ", ";" ], C.variables.gray25)
127
109
  },
128
110
  prisma: {
129
- light: (0, u.pickVariant)("$type", {
130
- info: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
131
- warning: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
132
- error: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white),
133
- success: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white)
111
+ light: (0, C.pickVariant)("$type", {
112
+ info: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
113
+ warning: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
114
+ error: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white),
115
+ success: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white)
134
116
  }),
135
- dark: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black)
117
+ dark: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black)
136
118
  }
137
119
  }));
138
- var W = g()(R()).withConfig({
120
+ var q = k()(w()).withConfig({
139
121
  displayName: "MessageBarStyles__MessageBarCloseWrapper",
140
122
  componentId: "sc-1uyhzza-1"
141
- })([ "", ";border:1px solid transparent;border-radius:", ";color:inherit;cursor:pointer;padding:", ";", " &:hover,&:focus{background:", ";border:1px solid;border-color:", ";color:", ";}&:active{", ";}", "" ], u.mixins.reset("flex"), u.variables.borderRadius, (0,
142
- u.pick)({
143
- enterprise: u.variables.spacingXSmall,
123
+ })([ "", ";border:1px solid transparent;border-radius:", ";color:inherit;cursor:pointer;padding:", ";", " &:hover,&:focus{background:", ";border:1px solid;border-color:", ";color:", ";}&:active{", ";}", "" ], C.mixins.reset("flex"), C.variables.borderRadius, (0,
124
+ C.pick)({
125
+ enterprise: C.variables.spacingXSmall,
144
126
  prisma: "3px"
145
- }), (0, u.pick)({
146
- enterprise: (0, b.css)([ "margin-top:1px;" ])
147
- }), (0, u.pick)({
148
- prisma: u.variables.interactiveColorOverlayHover,
127
+ }), (0, C.pick)({
128
+ enterprise: (0, y.css)([ "margin-top:1px;" ])
129
+ }), (0, C.pick)({
130
+ prisma: C.variables.interactiveColorOverlayHover,
149
131
  enterprise: {
150
- dark: u.variables.gray30,
151
- light: u.variables.gray92
132
+ dark: C.variables.gray30,
133
+ light: C.variables.gray92
152
134
  }
153
- }), (0, u.pick)({
135
+ }), (0, C.pick)({
154
136
  prisma: "inherit",
155
- enterprise: u.variables.gray80
156
- }), (0, u.pick)({
137
+ enterprise: C.variables.gray80
138
+ }), (0, C.pick)({
157
139
  enterprise: {
158
- dark: u.variables.gray96,
159
- light: u.variables.contentColorLink
140
+ dark: C.variables.gray96,
141
+ light: C.variables.contentColorLink
160
142
  }
161
- }), (0, u.pick)({
162
- prisma: (0, b.css)([ "background:", ";" ], u.variables.interactiveColorOverlayActive),
163
- enterprise: (0, b.css)([ "box-shadow:", ";" ], u.variables.focusShadow)
164
- }), (0, u.pick)({
165
- prisma: (0, b.css)([ "&:focus{border-radius:", ";", ";}" ], u.variables.borderRadius, (0,
166
- u.pick)({
167
- light: (0, u.pickVariant)("$type", {
168
- info: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
169
- warning: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
170
- error: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white),
171
- success: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white)
143
+ }), (0, C.pick)({
144
+ prisma: (0, y.css)([ "background:", ";" ], C.variables.interactiveColorOverlayActive),
145
+ enterprise: (0, y.css)([ "box-shadow:", ";" ], C.variables.focusShadow)
146
+ }), (0, C.pick)({
147
+ prisma: (0, y.css)([ "&:focus{border-radius:", ";", ";}" ], C.variables.borderRadius, (0,
148
+ C.pick)({
149
+ light: (0, C.pickVariant)("$type", {
150
+ info: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
151
+ warning: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
152
+ error: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white),
153
+ success: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white)
172
154
  }),
173
- dark: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black)
155
+ dark: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black)
174
156
  }))
175
157
  }));
176
- var $ = (0, b.css)([ "margin-left:auto;" ]);
177
- var P = g()(y()).withConfig({
178
- displayName: "MessageBarStyles__StyledCheckCircleIcon",
158
+ var S = k().span.withConfig({
159
+ displayName: "MessageBarStyles__StyledIcon",
179
160
  componentId: "sc-1uyhzza-2"
180
- })([ "", "" ], $);
181
- var A = g()(k()).withConfig({
182
- displayName: "MessageBarStyles__StyledExclamationCircleIcon",
183
- componentId: "sc-1uyhzza-3"
184
- })([ "", "" ], $);
185
- var L = g()(f()).withConfig({
186
- displayName: "MessageBarStyles__StyledInformationCircleIcon",
187
- componentId: "sc-1uyhzza-4"
188
- })([ "", "" ], $);
189
- var V = g()(w()).withConfig({
190
- displayName: "MessageBarStyles__StyledExclamationTriangleIcon",
191
- componentId: "sc-1uyhzza-5"
192
- })([ "", "" ], $);
193
- var D = g()(_()).withConfig({
194
- displayName: "MessageBarStyles__StyledEnterpriseErrorIcon",
195
- componentId: "sc-1uyhzza-6"
196
- })([ "", " color:", ";" ], $, u.variables.errorColor);
197
- var H = g()(z()).withConfig({
198
- displayName: "MessageBarStyles__StyledEnterpriseInfoCircleIcon",
199
- componentId: "sc-1uyhzza-7"
200
- })([ "", " color:", ";" ], $, u.variables.infoColor);
201
- var X = g()(E()).withConfig({
202
- displayName: "MessageBarStyles__StyledEnterpriseSuccessIcon",
203
- componentId: "sc-1uyhzza-8"
204
- })([ "", " color:", ";" ], $, u.variables.successColor);
205
- var F = g()(B()).withConfig({
206
- displayName: "MessageBarStyles__StyledEnterpriseWarningIcon",
207
- componentId: "sc-1uyhzza-9"
208
- })([ "", " color:", ";" ], $, u.variables.warningColor);
209
- var G = g()(j()).withConfig({
161
+ })([ "width:20px;height:20px;margin-left:auto;fill:", ";" ], (0, C.pickVariant)("$type", {
162
+ info: C.variables.notificationColorInfo,
163
+ success: C.variables.notificationColorPositive,
164
+ warning: C.variables.notificationColorCaution,
165
+ error: C.variables.notificationColorNegative
166
+ }));
167
+ var _ = k().div.withConfig({
210
168
  displayName: "MessageBarStyles__MessageBarWrapper",
211
- componentId: "sc-1uyhzza-10"
212
- })([ "", ";display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:", ";", ";word-wrap:break-word;color:", ";", ";" ], u.mixins.reset("block"), u.variables.spacingSmall, (function(e) {
169
+ componentId: "sc-1uyhzza-3"
170
+ })([ "", ";display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:", ";", ";word-wrap:break-word;color:", ";background-color:", ";" ], C.mixins.reset("block"), C.variables.spacingSmall, (function(e) {
213
171
  var r = e.$hasCloseButton;
214
- return r ? (0, b.css)([ "", "" ], (0, u.pick)({
215
- prisma: (0, b.css)([ "padding:0 8px 0 32px;" ]),
216
- enterprise: (0, b.css)([ "padding:0 8px 0 38px;" ])
217
- })) : (0, b.css)([ "", "" ], (0, u.pick)({
218
- prisma: (0, b.css)([ "padding:0 33px 0 32px;" ]),
219
- enterprise: (0, b.css)([ "padding:0 26px 0 32px;" ])
172
+ return r ? (0, y.css)([ "", "" ], (0, C.pick)({
173
+ prisma: (0, y.css)([ "padding:0 8px 0 32px;" ]),
174
+ enterprise: (0, y.css)([ "padding:0 8px 0 38px;" ])
175
+ })) : (0, y.css)([ "", "" ], (0, C.pick)({
176
+ prisma: (0, y.css)([ "padding:0 33px 0 32px;" ]),
177
+ enterprise: (0, y.css)([ "padding:0 26px 0 32px;" ])
220
178
  }));
221
- }), (0, u.pick)({
222
- prisma: (0, u.pickVariant)("$type", {
223
- info: {
224
- light: u.variables.contentColorActive,
225
- dark: u.variables.contentColorInverted
226
- },
227
- success: u.variables.contentColorInverted,
228
- warning: u.variables.black,
229
- error: u.variables.contentColorInverted
230
- }),
231
- enterprise: {
232
- dark: u.variables.gray96,
233
- light: u.variables.gray25
234
- }
235
- }), (0, u.pickVariant)("$type", {
236
- info: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
237
- prisma: {
238
- dark: u.variables.white,
239
- light: u.variables.neutral200
240
- },
241
- enterprise: {
242
- dark: u.mixins.colorWithAlpha(u.variables.infoColor, .5),
243
- light: u.variables.infoColorL50
244
- }
245
- })),
246
- success: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
247
- prisma: u.variables.statusColorNormal,
248
- enterprise: {
249
- dark: u.mixins.colorWithAlpha(u.variables.successColor, .5),
250
- light: u.variables.successColorL50
251
- }
252
- })),
253
- warning: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
254
- prisma: u.variables.statusColorMedium,
255
- enterprise: {
256
- dark: u.mixins.colorWithAlpha(u.variables.warningColor, .5),
257
- light: u.variables.warningColorL50
258
- }
259
- })),
260
- error: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
261
- prisma: u.variables.statusColorHigh,
262
- enterprise: {
263
- dark: u.mixins.colorWithAlpha(u.variables.errorColor, .5),
264
- light: u.variables.errorColorL50
265
- }
266
- }))
179
+ }), C.variables.contentColorActive, (0, C.pickVariant)("$type", {
180
+ info: C.variables.notificationColorInfoWeak,
181
+ success: C.variables.notificationColorPositiveWeak,
182
+ warning: C.variables.notificationColorCautionWeak,
183
+ error: C.variables.notificationColorNegativeWeak
267
184
  }));
268
185
  // CONCATENATED MODULE: ./src/MessageBar/MessageBar.tsx
269
- function J() {
270
- return J = Object.assign ? Object.assign.bind() : function(e) {
186
+ function j() {
187
+ return j = Object.assign ? Object.assign.bind() : function(e) {
271
188
  for (var r = 1; r < arguments.length; r++) {
272
189
  var a = arguments[r];
273
- for (var s in a) {
274
- ({}).hasOwnProperty.call(a, s) && (e[s] = a[s]);
190
+ for (var i in a) {
191
+ ({}).hasOwnProperty.call(a, i) && (e[i] = a[i]);
275
192
  }
276
193
  }
277
194
  return e;
278
- }, J.apply(null, arguments);
195
+ }, j.apply(null, arguments);
279
196
  }
280
- function K(e, r) {
197
+ function R(e, r) {
281
198
  if (null == e) return {};
282
- var a, s, i = Q(e, r);
199
+ var a, i, s = z(e, r);
283
200
  if (Object.getOwnPropertySymbols) {
284
201
  var n = Object.getOwnPropertySymbols(e);
285
- for (s = 0; s < n.length; s++) {
286
- a = n[s], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (i[a] = e[a]);
202
+ for (i = 0; i < n.length; i++) {
203
+ a = n[i], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (s[a] = e[a]);
287
204
  }
288
205
  }
289
- return i;
206
+ return s;
290
207
  }
291
- function Q(e, r) {
208
+ function z(e, r) {
292
209
  if (null == e) return {};
293
210
  var a = {};
294
- for (var s in e) {
295
- if ({}.hasOwnProperty.call(e, s)) {
296
- if (r.includes(s)) continue;
297
- a[s] = e[s];
211
+ for (var i in e) {
212
+ if ({}.hasOwnProperty.call(e, i)) {
213
+ if (r.includes(i)) continue;
214
+ a[i] = e[i];
298
215
  }
299
216
  }
300
217
  return a;
301
218
  }
302
- var U = {
219
+ var B = {
303
220
  children: n().node.isRequired,
304
221
  onRequestClose: n().func,
305
222
  type: n().oneOf([ "info", "success", "warning", "error" ]).isRequired
306
223
  };
307
- var Y = Object.freeze({
308
- info: (0, v._)("Info"),
309
- warning: (0, v._)("Warning"),
310
- error: (0, v._)("Alert"),
311
- success: (0, v._)("Success")
312
- });
313
- var Z = Object.freeze({
314
- info: H,
315
- warning: F,
316
- error: D,
317
- success: X
224
+ var E = Object.freeze({
225
+ info: (0, x._)("Info"),
226
+ warning: (0, x._)("Warning"),
227
+ error: (0, x._)("Alert"),
228
+ success: (0, x._)("Success")
318
229
  });
319
- var ee = Object.freeze({
320
- info: L,
321
- warning: V,
322
- error: A,
323
- success: P
230
+ var I = Object.freeze({
231
+ info: b(),
232
+ warning: g(),
233
+ error: d(),
234
+ success: o()
324
235
  });
325
- var re = "24px";
326
- function ae(e) {
327
- var r = e.children, a = e.type, i = e.onRequestClose, n = K(e, [ "children", "type", "onRequestClose" ]);
236
+ function M(e) {
237
+ var r = e.children, a = e.elementRef, s = e.onRequestClose, n = e.type, t = R(e, [ "children", "elementRef", "onRequestClose", "type" ]);
328
238
  // @docs-props-type MessageBarPropsBase
329
- var o = (0, u.useSplunkTheme)(), l = o.isEnterprise;
330
- var p = l && a === "error" ? "22px" : re;
331
- var b = l && a === "warning" ? "21px" : re;
332
- var g;
333
- if (l) {
334
- var h = Z[a];
335
- g = s().createElement(h, {
336
- height: b,
337
- width: p,
338
- hideDefaultTooltip: true,
339
- screenReaderText: null,
340
- "aria-hidden": true,
341
- "data-test": "icon"
342
- });
343
- } else {
344
- var y = ee[a];
345
- g = s().createElement(y, {
346
- height: re,
347
- width: re,
348
- variant: "filled",
349
- "aria-hidden": true,
350
- "data-test": "icon"
351
- });
352
- }
239
+ var o = I[n];
240
+ var l = E[n];
353
241
 
354
- return s().createElement(G, J({
355
- $type: a,
242
+ return i().createElement(_, j({
243
+ ref: a,
244
+ $type: n,
356
245
  "data-test": "message-bar",
357
- "data-test-type": a
358
- }, n, {
246
+ "data-test-type": n
247
+ }, t, {
359
248
  role: "region",
360
- $hasCloseButton: Boolean(i)
361
- }), g, s().createElement(d(), null, Y[a]), s().createElement(T, {
362
- $type: a,
249
+ $hasCloseButton: Boolean(s)
250
+ }), i().createElement(S, {
251
+ as: o,
252
+ $type: n,
253
+ variant: "filled",
254
+ "aria-hidden": true,
255
+ "data-test": "icon"
256
+ }), i().createElement(h(), null, l), i().createElement(O, {
257
+ $type: n,
363
258
  "data-test": "content"
364
- }, r), i && s().createElement(W, {
365
- $type: a,
366
- onClick: i
367
- }, l ? s().createElement(c(), {
368
- height: "12px",
369
- hideDefaultTooltip: true,
370
- screenReaderText: null,
371
- width: "12px"
372
- }) : s().createElement(t(), {
259
+ }, r), s && i().createElement(q, {
260
+ $type: n,
261
+ onClick: s
262
+ }, i().createElement(c(), {
373
263
  height: "19px",
374
264
  style: {
375
265
  margin: -.5
376
266
  },
377
267
  width: "19px"
378
- }), s().createElement(d(), null, (0, v._)("Close"))));
268
+ }), i().createElement(h(), null, (0, x._)("Close"))));
379
269
  }
380
- ae.propTypes = U;
381
- /* harmony default export */ const se = ae;
270
+ M.propTypes = B;
271
+ /* harmony default export */ const P = M;
382
272
  // CONCATENATED MODULE: ./src/MessageBar/index.ts
383
273
  module.exports = r;
384
274
  /******/})();
package/Modal.js CHANGED
@@ -403,8 +403,8 @@
403
403
  }
404
404
  le.propTypes = ie;
405
405
  /* harmony default export */ const ue = le;
406
- // CONCATENATED MODULE: external "react-spring"
407
- const ce = require("react-spring");
406
+ // CONCATENATED MODULE: external "@react-spring/web"
407
+ const ce = require("@react-spring/web");
408
408
  // CONCATENATED MODULE: ./src/Modal/ModalStyles.ts
409
409
  var se = g()(ce.animated.div).withConfig({
410
410
  displayName: "ModalStyles__Styled",
package/ModalLayer.js CHANGED
@@ -77,8 +77,8 @@
77
77
  // CONCATENATED MODULE: external "styled-components"
78
78
  const u = require("styled-components");
79
79
  var p = e.n(u);
80
- // CONCATENATED MODULE: external "react-spring"
81
- const s = require("react-spring");
80
+ // CONCATENATED MODULE: external "@react-spring/web"
81
+ const s = require("@react-spring/web");
82
82
  // CONCATENATED MODULE: external "@splunk/themes"
83
83
  const f = require("@splunk/themes");
84
84
  // CONCATENATED MODULE: ./src/ModalLayer/ModalLayerStyles.ts
@@ -88,15 +88,15 @@
88
88
  componentId: "sc-1sa3n1j-0"
89
89
  })([ "", ";background-color:", ";z-index:", ";" ], y, f.variables.backgroundColorScrim, f.variables.zindexModalBackdrop);
90
90
  // CONCATENATED MODULE: ./src/ModalLayer/ModalLayer.tsx
91
- function v(e) {
91
+ function b(e) {
92
92
  "@babel/helpers - typeof";
93
- return v = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
93
+ return b = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
94
94
  return typeof e;
95
95
  } : function(e) {
96
96
  return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
97
- }, v(e);
97
+ }, b(e);
98
98
  }
99
- function b(e, t) {
99
+ function v(e, t) {
100
100
  var r = Object.keys(e);
101
101
  if (Object.getOwnPropertySymbols) {
102
102
  var n = Object.getOwnPropertySymbols(e);
@@ -109,9 +109,9 @@
109
109
  function m(e) {
110
110
  for (var t = 1; t < arguments.length; t++) {
111
111
  var r = null != arguments[t] ? arguments[t] : {};
112
- t % 2 ? b(Object(r), !0).forEach((function(t) {
112
+ t % 2 ? v(Object(r), !0).forEach((function(t) {
113
113
  E(e, t, r[t]);
114
- })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : b(Object(r)).forEach((function(t) {
114
+ })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : v(Object(r)).forEach((function(t) {
115
115
  Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
116
116
  }));
117
117
  }
@@ -161,7 +161,7 @@
161
161
  };
162
162
  }
163
163
  function S(e, t) {
164
- if (t && ("object" == v(t) || "function" == typeof t)) return t;
164
+ if (t && ("object" == b(t) || "function" == typeof t)) return t;
165
165
  if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
166
166
  return k(e);
167
167
  }
@@ -192,14 +192,14 @@
192
192
  }
193
193
  function q(e) {
194
194
  var t = M(e, "string");
195
- return "symbol" == v(t) ? t : t + "";
195
+ return "symbol" == b(t) ? t : t + "";
196
196
  }
197
197
  function M(e, t) {
198
- if ("object" != v(e) || !e) return e;
198
+ if ("object" != b(e) || !e) return e;
199
199
  var r = e[Symbol.toPrimitive];
200
200
  if (void 0 !== r) {
201
201
  var n = r.call(e, t || "default");
202
- if ("object" != v(n)) return n;
202
+ if ("object" != b(n)) return n;
203
203
  throw new TypeError("@@toPrimitive must return a primitive value.");
204
204
  }
205
205
  return ("string" === t ? String : Number)(e);