@splunk/react-ui 4.28.2 → 4.30.0

package/Multiselect.js

@@ -404,7 +404,7 @@
         if (n) T(e, n);
         return e;
     }
-    function N(e, t) {
+    function B(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -415,14 +415,14 @@
                 configurable: true
             }
         });
-        if (t) B(e, t);
+        if (t) N(e, t);
     }
-    function B(e, t) {
-        B = Object.setPrototypeOf || function e(t, n) {
+    function N(e, t) {
+        N = Object.setPrototypeOf || function e(t, n) {
             t.__proto__ = n;
             return t;
         };
-        return B(e, t);
+        return N(e, t);
     }
     function L(e) {
         var t = $();
@@ -519,7 +519,7 @@
  * [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
  * so any elements passed to it must also be pure.
  */    var G =  function(e) {
-        N(n, e);
+        B(n, e);
         var t = L(n);
         function n() {
             var e;
@@ -638,7 +638,7 @@
     const Te = require("@splunk/react-icons/Magnifier");
     var qe =  e.n(Te);
     // CONCATENATED MODULE: ./src/Select/icons/Search.tsx
-    var Ne = function e() {
+    var Be = function e() {
         var t = (0, Ae.useSplunkTheme)(), n = t.isEnterprise, o = t.isCompact;
         var a = (0, u._)("Search");
         var i = o ? "20px" : "24px";
@@ -655,7 +655,7 @@
         });
         return l;
     };
-    /* harmony default export */    const Be = Ne;
+    /* harmony default export */    const Ne = Be;
     // CONCATENATED MODULE: external "styled-components"
     const Le = require("styled-components");
     var Fe =  e.n(Le);
@@ -686,7 +686,7 @@
         componentId: "sc-4kc053-2"
     })([ "position:absolute;", " color:", ";" ], (0, Ae.pick)({
         prisma: (0, Le.css)([ "right:16px;" ]),
-        enterprise: (0, Le.css)([ "top:5px;right:3px;left:8px;" ])
+        enterprise: (0, Le.css)([ "right:3px;left:8px;" ])
     }), (0, Ae.pick)({
         prisma: Ae.variables.contentColorActive,
         enterprise: Ae.variables.accentColorL10
@@ -807,7 +807,7 @@
     var et = Fe().span.withConfig({
         displayName: "ItemStyles__StyledTitleAndDescriptionWrapper",
         componentId: "sc-4kc053-7"
-    })([ "max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
+    })([ "display:flex;flex-wrap:wrap;flex-direction:column;max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
         var t = e.$truncate;
         return t && (0, Le.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
     }));
@@ -1217,12 +1217,12 @@
             Object.defineProperty(e, r.key, r);
         }
     }
-    function Nt(e, t, n) {
+    function Bt(e, t, n) {
         if (t) qt(e.prototype, t);
         if (n) qt(e, n);
         return e;
     }
-    function Bt(e, t) {
+    function Nt(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -1427,9 +1427,9 @@
         return "".concat(Wt(e), "-").concat(e, "-").concat(t);
     }
     var rn =  function(e) {
-        Bt(o, e);
+        Nt(o, e);
         var t = Ft(o);
-        Nt(o, null, [ {
+        Bt(o, null, [ {
             key: "validateAppearance",
             // @docs-props-type CompactPropsBase
             value: function e(t) {
@@ -1449,6 +1449,7 @@
             Jt($t(a), "firstSelectedEnabledOption", null);
             Jt($t(a), "firstSelectedOptionIndex", void 0);
             Jt($t(a), "menuId", void 0);
+            Jt($t(a), "menuListboxId", void 0);
             Jt($t(a), "previousActiveIndex", null);
             Jt($t(a), "selectedOptionCount", void 0);
             Jt($t(a), "optionRefsByKey", void 0);
@@ -1763,7 +1764,6 @@
                     "aria-describedby": p,
                     "aria-label": "".concat(y ? "".concat(y, ", ") : "").concat(j),
                     "aria-labelledby": y ? undefined : b,
-                    "aria-multiselectable": m || undefined,
                     "aria-required": w,
                     "data-select-appearance": l,
                     "data-test": m ? "multiselect" : "select",
@@ -2053,10 +2053,11 @@
             if (false) {}
             o.validateAppearance(e);
             a.menuId = (0, be.createDOMID)("menu");
+            a.menuListboxId = (0, be.createDOMID)("menu-listbox");
             a.activeItemId = (0, be.createDOMID)("active-item");
             return a;
         }
-        Nt(o, [ {
+        Bt(o, [ {
             key: "componentDidUpdate",
             value: function e(t, n) {
                 if (false) {}
@@ -2181,12 +2182,13 @@
                     placeholder: (0, u._)("filter"),
                     role: "combobox",
                     "aria-expanded": "true",
+                    "aria-controls": this.menuListboxId,
                     "aria-label": (0, u._)("Filter"),
-                    "aria-activedescendant": this.activeItemId,
+                    "aria-activedescendant": this.state.textHasFocus && n ? this.activeItemId : undefined,
                     inputRef: s,
                     inputId: l,
                     canClear: true,
-                    startAdornment:  r().createElement(ht, null,  r().createElement(Be, null))
+                    startAdornment:  r().createElement(ht, null,  r().createElement(Ne, null))
                 })), c && n && p === "buttongroup" && v);
             }
         }, {
@@ -2225,7 +2227,8 @@
                         onScrollBottom: o.props.onScrollBottom ? o.handleScrollBottom : undefined,
                         "data-test": "results-menu",
                         isLoading: o.props.isLoadingOptions,
-                        id: o.menuId
+                        id: o.menuId,
+                        menuId: o.menuListboxId
                     }, pe()(o.props, "noOptionsMessage", "footerMessage", "animateLoading", "loadingMessage", "onScroll")), {}, {
                         style: l,
                         tabIndex: s
@@ -2537,10 +2540,10 @@
     var Tn =  e.n(Dn);
     // CONCATENATED MODULE: external "@splunk/react-ui/Chip"
     const qn = require("@splunk/react-ui/Chip");
-    var Nn =  e.n(qn);
+    var Bn =  e.n(qn);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const Bn = require("@splunk/react-ui/Popover");
-    var Ln =  e.n(Bn);
+    const Nn = require("@splunk/react-ui/Popover");
+    var Ln =  e.n(Nn);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const Fn = require("@splunk/react-ui/ScreenReaderContent");
     var Kn =  e.n(Fn);
@@ -2599,14 +2602,14 @@
         enterprise: Ae.variables.spacingHalf,
         prisma: Ae.variables.spacingSmall
     }));
-    var Un = Fe().div.withConfig({
-        displayName: "NormalStyles__StyledInputWrapper",
+    var Un = Fe().span.withConfig({
+        displayName: "NormalStyles__StyledButtonsWrapper",
         componentId: "sc-1uwwpco-1"
-    })([ "flex:1 0 auto;max-width:100%;" ]);
+    })([ "display:contents;" ]);
     var Gn = Fe().input.withConfig({
         displayName: "NormalStyles__StyledInput",
         componentId: "sc-1uwwpco-2"
-    })([ "", ";min-width:100%;max-width:100%;line-height:12px;", "" ], Ae.mixins.reset("block"), (0, 
+    })([ "", ";flex:1 0 auto;max-width:100%;line-height:12px;", "" ], Ae.mixins.reset("block"), (0, 
     Ae.pick)({
         enterprise: {
             comfortable: (0, Le.css)([ "padding:", ";" ], Ae.variables.spacingQuarter),
@@ -3238,7 +3241,7 @@
                     if (o != null) {
                         var a = o.children, i = o.icon, l = o.label, s = o.selectedAppearance, c = o.selectedBackgroundColor, u = o.selectedForegroundColor, p = o.value;
                         
-                        return r().createElement(Nn(), {
+                        return r().createElement(Bn(), {
                             "aria-selected": true,
                             disabled: n.props.disabled,
                             icon: i,
@@ -3253,7 +3256,7 @@
                         },  r().createElement(r().Fragment, null, a || l));
                     }
                     
-                    return r().createElement(Nn(), {
+                    return r().createElement(Bn(), {
                         "aria-selected": true,
                         disabled: n.props.disabled,
                         key: (0, be.createGUID)(),
@@ -3389,18 +3392,15 @@
                     $popoverOpen: this.state.open,
                     flex: true,
                     elementRef: this.handleMount,
-                    role: "listbox",
+                    role: "group",
                     "aria-disabled": v || undefined,
-                    "aria-labelledby": m,
+                    "aria-labelledby": m
+                }, k),  r().createElement(Un, {
+                    role: "listbox",
                     "aria-invalid": h,
                     "aria-multiselectable": "true"
-                }, k), this.renderButtons(_), !v &&  r().createElement(Un, {
+                }, this.renderButtons(_)), !v &&  r().createElement(Gn, sr({
                     role: "combobox",
-                    "aria-owns": this.state.open ? this.popoverId : undefined,
-                    "aria-haspopup": true,
-                    "aria-expanded": this.state.open,
-                    "aria-controls": this.state.open ? this.popoverId : undefined
-                },  r().createElement(Gn, sr({
                     "data-test": "textbox",
                     id: y,
                     ref: this.handleInputMount,
@@ -3413,12 +3413,16 @@
                     autoComplete: "off",
                     autoCorrect: "off",
                     spellCheck: false,
-                    "aria-autocomplete": "list",
                     style: A,
                     placeholder: I.length ? "" : g,
                     required: O,
-                    "aria-activedescendant": this.state.open && this.availableOptionCount > 0 ? this.activeItemId : undefined
-                }, x))), !v &&  r().createElement(Ln(), {
+                    "aria-activedescendant": this.state.open && this.availableOptionCount > 0 ? this.activeItemId : undefined,
+                    "aria-autocomplete": "list",
+                    "aria-controls": this.state.open ? this.popoverId : undefined,
+                    "aria-owns": this.state.open ? this.popoverId : undefined,
+                    "aria-expanded": this.state.open,
+                    "aria-haspopup": true
+                }, x)),  r().createElement(Ln(), {
                     open: this.state.open && !!this.state.el,
                     autoCloseWhenOffScreen: true,
                     anchor: this.state.el,
@@ -3557,7 +3561,7 @@
         };
         return qr(e);
     }
-    function Nr(e, t, n) {
+    function Br(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -3570,7 +3574,7 @@
         }
         return e;
     }
-    var Br = {
+    var Nr = {
         allowNewValues: a().bool,
         animateLoading: a().bool,
         children: a().node,
@@ -3625,7 +3629,7 @@
         useClickawayOverlay: false
     };
     function Fr(e) {
-        return e && e.compact === true;
+        return (e === null || e === void 0 ? void 0 : e.compact) === true;
     }
     var Kr =  function(e) {
         Ar(n, e);
@@ -3655,12 +3659,12 @@
         } ]);
         return n;
     }(n.Component);
-    Nr(Kr, "propTypes", Br);
-    Nr(Kr, "defaultProps", Lr);
-    Nr(Kr, "componentType", "Multiselect");
-    Nr(Kr, "Option", J);
-    Nr(Kr, "Heading", p.Heading);
-    Nr(Kr, "Divider", p.Divider);
+    Br(Kr, "propTypes", Nr);
+    Br(Kr, "defaultProps", Lr);
+    Br(Kr, "componentType", "Multiselect");
+    Br(Kr, "Option", J);
+    Br(Kr, "Heading", p.Heading);
+    Br(Kr, "Divider", p.Divider);
     /* harmony default export */    const $r = Kr;
     // CONCATENATED MODULE: ./src/Multiselect/index.ts
     module.exports = t;

package/Number.js

@@ -83,10 +83,10 @@
     var f =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/themes"
     const v = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const m = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const h = require("@splunk/ui-utils/i18n");
+    const m = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
+    const h = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/react-icons/SVGEnterprise"
     const b = require("@splunk/react-icons/SVGEnterprise");
     var y =  e.n(b);
@@ -163,7 +163,7 @@
         enterprise: "calc(50% + 1.5px)",
         prisma: "50%"
     }));
-    var D = x()(w()).withConfig({
+    var N = x()(w()).withConfig({
         displayName: "NumberStyles__StyledPlusButton",
         componentId: "sc-2ekj9s-2"
     })([ "", ";top:0;border-bottom-left-radius:0;border-bottom-right-radius:0;", " &:not([disabled]){&,&:hover{", ";}}" ], E, (function(e) {
@@ -179,7 +179,7 @@
             dark: (0, S.css)([ "border-color:", ";" ], v.variables.gray20)
         }
     }));
-    var N = x()(w()).withConfig({
+    var D = x()(w()).withConfig({
         displayName: "NumberStyles__StyledMinusButton",
         componentId: "sc-2ekj9s-3"
     })([ "", ";bottom:1px;border-top-left-radius:0;border-top-right-radius:0;", " &:not([disabled]){&,&:hover{", ";}}" ], E, (function(e) {
@@ -492,29 +492,29 @@
             }));
             Q(H(n), "handleKeyDown", (function(e) {
                 var t, r;
-                if (!e.metaKey && !e.ctrlKey && !e.altKey && (0, m.addsCharacter)(e.nativeEvent) !== false) {
+                if (!e.metaKey && !e.ctrlKey && !e.altKey && (0, h.addsCharacter)(e.nativeEvent) !== false) {
                     // only allow numbers, negative and decimals
-                    if (!(0, m.isNumeric)(e.nativeEvent, {
+                    if (!(0, h.isNumeric)(e.nativeEvent, {
                         locale: n.props.locale
                     })) {
                         e.preventDefault();
                     }
  // if minus is not allowed or there is already one, prevent input
-                                        if ((0, m.isMinus)(e.nativeEvent) && (n.preventNegativeNumbers() || n.state.stringValue.indexOf("-") >= 0)) {
+                                        if ((0, h.isMinus)(e.nativeEvent) && (n.preventNegativeNumbers() || n.state.stringValue.indexOf("-") >= 0)) {
                         e.preventDefault();
                     }
  // if decimal is not allowed or there is already one, prevent input
-                                        if ((0, m.isDecimal)(e.nativeEvent, {
+                                        if ((0, h.isDecimal)(e.nativeEvent, {
                         locale: n.props.locale
                     }) && (n.props.roundTo <= 0 || n.state.stringValue.indexOf(n.props.locale) >= 0)) {
                         e.preventDefault();
                     }
                 }
  // Arrow up and down will increment
-                                if ((0, m.keycode)(e.nativeEvent) === "up") {
+                                if ((0, h.keycode)(e.nativeEvent) === "up") {
                     n.increment(e, n.props.step);
                     e.preventDefault();
-                } else if ((0, m.keycode)(e.nativeEvent) === "down") {
+                } else if ((0, h.keycode)(e.nativeEvent) === "down") {
                     n.increment(e, -n.props.step);
                     e.preventDefault();
                 }
@@ -522,7 +522,7 @@
             }));
             Q(H(n), "handleKeyUp", (function(e) {
                 var t, r;
-                if ((0, m.keycode)(e.nativeEvent) === "enter") {
+                if ((0, h.keycode)(e.nativeEvent) === "enter") {
                     n.updateString();
                 }
                 (t = (r = n.props).onKeyUp) === null || t === void 0 ? void 0 : t.call(r, e);
@@ -656,7 +656,7 @@
             key: "render",
             value: function e() {
                 var t = this;
-                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, m = r.min, b = r.prepend, y = r.splunkTheme;
+                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, h = r.min, b = r.prepend, y = r.splunkTheme;
                 var g = f()(this.props, [ "defaultValue", "hideStepButtons", "max", "min", "roundTo", "spellCheck", "step" ]);
                 var S = y.isPrisma;
                 var x = S ? {} : {
@@ -666,11 +666,11 @@
                     inline: false
                 };
                 var O = d !== undefined && u()(d) && v !== undefined && u()(v) && d >= v;
-                var w = d !== undefined && u()(d) && m !== undefined && u()(m) && d <= m;
+                var w = d !== undefined && u()(d) && h !== undefined && u()(h) && d <= h;
                 var C =  n().createElement(k, {
                     width: "6px",
                     height: "4px",
-                    screenReaderText: (0, h._)("Increment")
+                    screenReaderText: (0, m._)("Increment")
                 });
                 var j = R({
                     "data-test": "increment",
@@ -678,11 +678,11 @@
                     onClick: this.handleIncrement,
                     tabIndex: -1
                 }, x);
-                var P = S ?  n().createElement(I, j, C) :  n().createElement(D, j, C);
+                var P = S ?  n().createElement(I, j, C) :  n().createElement(N, j, C);
                 var V =  n().createElement(k, {
                     width: "6px",
                     height: "4px",
-                    screenReaderText: (0, h._)("Decrement"),
+                    screenReaderText: (0, m._)("Decrement"),
                     style: {
                         transform: "rotateX(180deg)"
                     }
@@ -693,7 +693,7 @@
                     onClick: this.handleDecrement,
                     tabIndex: -1
                 }, x);
-                var B = S ?  n().createElement(q, E, V) :  n().createElement(N, E, V);
+                var B = S ?  n().createElement(q, E, V) :  n().createElement(D, E, V);
                 var K = o && !b;
                 var M = (!a || S) && K && !s &&  n().createElement(_, {
                     $isAppend: K
@@ -730,6 +730,7 @@
     }(r.Component);
     Q(ee, "propTypes", W);
     Q(ee, "defaultProps", Z);
+    Q(ee, "displayName", "Number");
     Q(ee, "getDerivedStateFromProps", (function(e, t) {
         if (l()(e, "value") && e.value !== t.prevValueProp) {
             var r = ee.stringToNumber(t.stringValue, e);