@splunk/react-ui 4.39.0 → 4.40.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 (54) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/Card.js +3 -1
  3. package/Chip.js +133 -125
  4. package/ControlGroup.js +27 -30
  5. package/MIGRATION.mdx +31 -0
  6. package/Message.js +136 -123
  7. package/Multiselect.js +3147 -3130
  8. package/Number.js +23 -18
  9. package/Popover.js +2 -1
  10. package/Select.js +2072 -2064
  11. package/SplitButton.d.ts +2 -0
  12. package/TabBar.js +15 -12
  13. package/TabLayout.js +8 -2
  14. package/Table.js +229 -224
  15. package/WaitSpinner.js +1 -1
  16. package/package.json +2 -2
  17. package/types/src/Card/Card.d.ts +1 -0
  18. package/types/src/Card/Footer.d.ts +1 -0
  19. package/types/src/Chip/Chip.d.ts +3 -6
  20. package/types/src/ComboBox/ComboBox.d.ts +1 -1
  21. package/types/src/Multiselect/Compact.d.ts +1 -1
  22. package/types/src/Multiselect/Multiselect.d.ts +1 -1
  23. package/types/src/Multiselect/Normal.d.ts +1 -1
  24. package/types/src/Select/Select.d.ts +3 -1
  25. package/types/src/Select/SelectAllOption.d.ts +2 -2
  26. package/types/src/Select/SelectBase.d.ts +104 -66
  27. package/types/src/Select/docs/examples/Appearance.d.ts +0 -2
  28. package/types/src/Table/Cell.d.ts +0 -2
  29. package/types/src/Table/HeadInner.d.ts +5 -1
  30. package/types/src/WaitSpinner/WaitSpinner.d.ts +0 -1
  31. package/types/src/useControlled/index.d.ts +2 -0
  32. package/types/src/useControlled/useControlled.d.ts +21 -0
  33. package/types/src/useResizeObserver/index.d.ts +2 -0
  34. package/types/src/useResizeObserver/useResizeObserver.d.ts +12 -0
  35. package/useControlled.js +112 -0
  36. package/useKeyPress.d.ts +2 -0
  37. package/useResizeObserver.d.ts +2 -0
  38. package/useResizeObserver.js +137 -0
  39. package/types/src/Chip/docs/examples/Basic.d.ts +0 -2
  40. package/types/src/Chip/docs/examples/prisma/Appearance.d.ts +0 -2
  41. package/types/src/Color/docs/examples/prisma/Controlled.d.ts +0 -2
  42. package/types/src/Color/docs/examples/prisma/ThemeVariables.d.ts +0 -1
  43. package/types/src/Color/docs/examples/prisma/Uncontrolled.d.ts +0 -2
  44. package/types/src/Dropdown/docs/examples/prisma/Basic.d.ts +0 -2
  45. package/types/src/Dropdown/docs/examples/prisma/BasicMenu.d.ts +0 -2
  46. package/types/src/Dropdown/docs/examples/prisma/ControlledDropdown.d.ts +0 -2
  47. package/types/src/Dropdown/docs/examples/prisma/Dialog.d.ts +0 -2
  48. package/types/src/Dropdown/docs/examples/prisma/OtherToggles.d.ts +0 -2
  49. package/types/src/Dropdown/docs/examples/prisma/ScrollingMenu.d.ts +0 -2
  50. package/types/src/File/docs/examples/prisma/Disabled.d.ts +0 -12
  51. package/types/src/Message/docs/examples/Title.d.ts +0 -2
  52. package/types/src/WaitSpinner/docs/examples/prisma/Basic.d.ts +0 -2
  53. /package/types/src/Color/docs/examples/{prisma/CustomizedPalette.d.ts → CustomizedPalette.d.ts} +0 -0
  54. /package/types/src/Color/docs/examples/{prisma/HideInput.d.ts → HideInput.d.ts} +0 -0
package/Number.js CHANGED
@@ -114,10 +114,10 @@
114
114
  }
115
115
  // CONCATENATED MODULE: external "styled-components"
116
116
  const S = require("styled-components");
117
- var O = e.n(S);
117
+ var w = e.n(S);
118
118
  // CONCATENATED MODULE: external "@splunk/react-ui/Button"
119
- const w = require("@splunk/react-ui/Button");
120
- var x = e.n(w);
119
+ const x = require("@splunk/react-ui/Button");
120
+ var O = e.n(x);
121
121
  // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
122
122
  const j = require("@splunk/react-ui/Clickable");
123
123
  var P = e.n(j);
@@ -125,7 +125,7 @@
125
125
  const C = require("@splunk/react-ui/Text");
126
126
  var T = e.n(C);
127
127
  // CONCATENATED MODULE: ./src/Number/NumberStyles.ts
128
- var V = O()(T()).withConfig({
128
+ var V = w()(T()).withConfig({
129
129
  displayName: "NumberStyles__StyledText",
130
130
  componentId: "sc-2ekj9s-0"
131
131
  })([ "&[data-inline]{", "}" ], (0, v.pick)({
@@ -135,7 +135,7 @@
135
135
  },
136
136
  prisma: (0, S.css)([ "width:100px;" ])
137
137
  }));
138
- var E = O().div.withConfig({
138
+ var E = w().div.withConfig({
139
139
  displayName: "NumberStyles__StyledControls",
140
140
  componentId: "sc-2ekj9s-1"
141
141
  })([ "width:", ";height:100%;", " ", "" ], (0, v.pick)({
@@ -161,7 +161,7 @@
161
161
  enterprise: "calc(50% + 1.5px)",
162
162
  prisma: "50%"
163
163
  }));
164
- var N = O()(x()).withConfig({
164
+ var N = w()(O()).withConfig({
165
165
  displayName: "NumberStyles__StyledPlusButton",
166
166
  componentId: "sc-2ekj9s-2"
167
167
  })([ "", ";top:0;border-bottom-left-radius:0;border-bottom-right-radius:0;", " &:not([disabled]){&,&:hover{", ";}}" ], _, (function(e) {
@@ -177,7 +177,7 @@
177
177
  dark: (0, S.css)([ "border-color:", ";" ], v.variables.gray20)
178
178
  }
179
179
  }));
180
- var D = O()(x()).withConfig({
180
+ var D = w()(O()).withConfig({
181
181
  displayName: "NumberStyles__StyledMinusButton",
182
182
  componentId: "sc-2ekj9s-3"
183
183
  })([ "", ";bottom:1px;border-top-left-radius:0;border-top-right-radius:0;", " &:not([disabled]){&,&:hover{", ";}}" ], _, (function(e) {
@@ -193,7 +193,7 @@
193
193
  dark: (0, S.css)([ "border-color:", ";" ], v.variables.gray20)
194
194
  }
195
195
  }));
196
- var B = O()(P()).withConfig({
196
+ var B = w()(P()).withConfig({
197
197
  displayName: "NumberStyles__prismaButton",
198
198
  componentId: "sc-2ekj9s-4"
199
199
  })([ "", ";display:flex;align-items:center;justify-content:center;", " &:hover:not([disabled]){", "}&:active:not([disabled]){", "}" ], _, (0,
@@ -204,11 +204,11 @@
204
204
  }), (0, v.pick)({
205
205
  prisma: (0, S.css)([ "background-color:", ";color:", ";" ], v.variables.interactiveColorOverlayActive, v.variables.contentColorActive)
206
206
  }));
207
- var I = O()(B).withConfig({
207
+ var I = w()(B).withConfig({
208
208
  displayName: "NumberStyles__StyledPrismaPlusButton",
209
209
  componentId: "sc-2ekj9s-5"
210
210
  })([ "border-top-right-radius:4px;" ]);
211
- var q = O()(B).withConfig({
211
+ var q = w()(B).withConfig({
212
212
  displayName: "NumberStyles__StyledPrismaMinusButton",
213
213
  componentId: "sc-2ekj9s-6"
214
214
  })([ "border-bottom-right-radius:4px;padding-bottom:5px;" ]);
@@ -651,14 +651,14 @@
651
651
  var r = this.props, o = r.append, i = r.describedBy, a = r.disabled, l = r.error, s = r.hideStepButtons, p = r.inline, c = r.value, d = c === void 0 ? this.state.value : c, v = r.max, b = r.min, h = r.prepend, y = r.splunkTheme;
652
652
  var g = f()(this.props, [ "defaultValue", "hideStepButtons", "max", "min", "roundTo", "spellCheck", "step" ]);
653
653
  var S = y.isPrisma;
654
- var O = S ? {} : {
654
+ var w = S ? {} : {
655
655
  append: o,
656
656
  prepend: !o,
657
657
  error: l,
658
658
  inline: false
659
659
  };
660
- var w = d !== undefined && u()(d) && v !== undefined && u()(v) && d >= v;
661
- var x = d !== undefined && u()(d) && b !== undefined && u()(b) && d <= b;
660
+ var x = d !== undefined && u()(d) && v !== undefined && u()(v) && d >= v;
661
+ var O = d !== undefined && u()(d) && b !== undefined && u()(b) && d <= b;
662
662
  var j = n().createElement(k, {
663
663
  width: "6px",
664
664
  height: "4px",
@@ -666,10 +666,10 @@
666
666
  });
667
667
  var P = F({
668
668
  "data-test": "increment",
669
- disabled: a || w,
669
+ disabled: a || x,
670
670
  onClick: this.handleIncrement,
671
671
  tabIndex: -1
672
- }, O);
672
+ }, w);
673
673
  var C = S ? n().createElement(I, P, j) : n().createElement(N, P, j);
674
674
  var T = n().createElement(k, {
675
675
  width: "6px",
@@ -681,10 +681,10 @@
681
681
  });
682
682
  var _ = F({
683
683
  "data-test": "decrement",
684
- disabled: a || x,
684
+ disabled: a || O,
685
685
  onClick: this.handleDecrement,
686
686
  tabIndex: -1
687
- }, O);
687
+ }, w);
688
688
  var B = S ? n().createElement(q, _, T) : n().createElement(D, _, T);
689
689
  var K = o && !h;
690
690
  var M = (!a || S) && K && !s && n().createElement(E, {
@@ -714,7 +714,12 @@
714
714
  error: l,
715
715
  "data-test-value": d,
716
716
  startAdornment: M,
717
- endAdornment: R
717
+ endAdornment: R,
718
+ role: "spinbutton",
719
+ "aria-valuenow": this.state.value,
720
+ "aria-valuemin": b,
721
+ "aria-valuemax": v,
722
+ "aria-invalid": l
718
723
  }));
719
724
  }
720
725
  } ]);
package/Popover.js CHANGED
@@ -1347,7 +1347,8 @@
1347
1347
  to: C,
1348
1348
  config: Re({
1349
1349
  tension: 300,
1350
- friction: 40
1350
+ friction: 20,
1351
+ clamp: true
1351
1352
  }, a),
1352
1353
  onRest: o.handleAnimationEnd
1353
1354
  }, (function(e) {