@splunk/react-ui 4.21.1 → 4.22.1

package/Date.js

@@ -385,8 +385,8 @@
                     });
                 }
             }));
-            W(R(a), "handleFocus", (function(e) {
-                var t, n;
+            W(R(a), "handleFocus", (function(e, t) {
+                var n, o;
                 if (a.focusCalledInternally) {
                     a.focusCalledInternally = false;
                 } else if (!a.props.inputOnly) {
@@ -394,7 +394,7 @@
                         calendarOpen: true
                     });
                 }
-                (t = (n = a.props).onFocus) === null || t === void 0 ? void 0 : t.call(n, e);
+                (n = (o = a.props).onFocus) === null || n === void 0 ? void 0 : n.call(o, e, t);
             }));
             W(R(a), "handleClick", (function(e) {
                 var t, n, o;

package/List.js

@@ -62,7 +62,7 @@
     // EXPORTS
         e.d(t, {
         Item: () => /* reexport */ v,
-        default: () => /* reexport */ S
+        default: () => /* reexport */ P
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -76,11 +76,11 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/List/ListStyles.ts
-    var f = a().ol.withConfig({
-        displayName: "ListStyles__StyledOl",
+    var f = a().ul.withConfig({
+        displayName: "ListStyles__StyledUl",
         componentId: "sc-1yyh8l9-0"
     })([ "", ";", ";list-style-type:", ";padding-left:40px;margin-bottom:1.3em;margin-top:1em;" ], c.mixins.reset("block"), c.mixins.typography("body"), (function(e) {
-        var t = e.$type;
+        var t = e.$listStyleType;
         return t;
     }));
     var p = a().li.withConfig({
@@ -194,21 +194,26 @@
         ordered: i().bool,
         type: i().oneOf([ "disc", "decimal", "lower-alpha", "upper-alpha" ])
     };
-    function j(e) {
-        var t = e.children, r = e.elementRef, o = e.type, i = o === void 0 ? "disc" : o, l = e.ordered, a = O(e, [ "children", "elementRef", "type", "ordered" ]);
+    var j = {
+        type: "disc"
+    };
+    function S(e) {
+        var t = e.children, r = e.elementRef, o = e.type, i = e.ordered, l = O(e, [ "children", "elementRef", "type", "ordered" ]);
         // @docs-props-type ListPropsBase
+        // Default prop value is "disc", we cannot determine if user or defaultProps is setting the value
                 if (false) {}
         
         return n().createElement(f, b({
-            as: !l && i === "disc" ? "ul" : "ol",
+            as: i || o !== "disc" ? "ol" : "ul",
             "data-test": "list",
             ref: r,
-            $type: l || i === "decimal" ? "decimal" || 0 || 0 : i
-        }, a), t);
+            $listStyleType: i ? "decimal" : o
+        }, l), t);
     }
-    j.propTypes = g;
-    j.Item = v;
-    /* harmony default export */    const S = j;
+    S.propTypes = g;
+    S.defaultProps = j;
+    S.Item = v;
+    /* harmony default export */    const P = S;
     // CONCATENATED MODULE: ./src/List/index.ts
     module.exports = t;
     /******/})();

package/Menu.js

@@ -72,10 +72,10 @@
     var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
-    var a =  e.n(i);
+    var o =  e.n(i);
     // CONCATENATED MODULE: external "lodash/omit"
-    const o = require("lodash/omit");
-    var l =  e.n(o);
+    const a = require("lodash/omit");
+    var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
     const s = require("@splunk/react-ui/Popover");
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
@@ -128,10 +128,10 @@
  */    function k(e) {
         var t = y({}, e);
         // @docs-props-type DividerPropsBase
-                var i = (0, r.useContext)(h), a = i.role;
+                var i = (0, r.useContext)(h), o = i.role;
         
         return n().createElement(m, y({
-            "aria-hidden": a === "listbox",
+            "aria-hidden": o === "listbox",
             "data-test": "divider",
             role: "separator"
         }, t));
@@ -231,9 +231,9 @@
         var r = R(e, t);
         var n, i;
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < a.length; i++) {
-                n = a[i];
+            var o = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < o.length; i++) {
+                n = o[i];
                 if (t.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 r[n] = e[n];
@@ -245,36 +245,36 @@
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
-        var i, a;
-        for (a = 0; a < n.length; a++) {
-            i = n[a];
+        var i, o;
+        for (o = 0; o < n.length; o++) {
+            i = n[o];
             if (t.indexOf(i) >= 0) continue;
             r[i] = e[i];
         }
         return r;
     }
     var q = {
-        children: a().node,
-        title: a().bool,
-        outerStyle: a().object
+        children: o().node,
+        title: o().bool,
+        outerStyle: o().object
     };
     /**
  * A non-interactive `Menu` item used to separate and label groups of `Menu` items.
  */    function N(e) {
-        var t = e.children, i = e.title, a = e.outerStyle, o = D(e, [ "children", "title", "outerStyle" ]);
+        var t = e.children, i = e.title, o = e.outerStyle, a = D(e, [ "children", "title", "outerStyle" ]);
         var l = (0, r.useContext)(h), s = l.role;
         var c = C()(), p = c.family;
         var u = p === "prisma" ?  n().createElement(P, T({
             as: i ? "h4" : "h5",
-            style: a,
+            style: o,
             "data-test": "heading"
-        }, o), t) :  n().createElement(S(), T({
-            style: j(j({}, a), {}, {
+        }, a), t) :  n().createElement(S(), T({
+            style: j(j({}, o), {}, {
                 margin: 0
             }),
             level: i ? 4 : "ss",
             "data-test": "heading"
-        }, o), t);
+        }, a), t);
  // headings are not supported in role="listbox"
         // this causes Firefox to incorrectly read the total number
         // of items in the list if it contains a heading or divider
@@ -292,8 +292,8 @@
     // CONCATENATED MODULE: external "lodash/isString"
     const F = require("lodash/isString");
     var $ =  e.n(F);
-    // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallRight"
-    const A = require("@splunk/react-icons/CaretSmallRight");
+    // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
+    const A = require("@splunk/react-icons/ChevronRight");
     var M =  e.n(A);
     // CONCATENATED MODULE: external "@splunk/react-icons/Checkmark"
     const K = require("@splunk/react-icons/Checkmark");
@@ -449,14 +449,14 @@
         displayName: "ItemStyles__StyledInnerWrapper",
         componentId: "sc-4kc053-6"
     })([ "display:flex;align-items:flex-start;" ]);
-    var ae = v().span.withConfig({
+    var oe = v().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) {
         var t = e.$truncate;
         return t && (0, f.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
     }));
-    var oe = v().div.withConfig({
+    var ae = v().div.withConfig({
         displayName: "ItemStyles__StyledLabel",
         componentId: "sc-4kc053-8"
     })([ "overflow:inherit;white-space:inherit;text-overflow:inherit;max-width:100%;min-height:20px;", "" ], (function(e) {
@@ -476,10 +476,12 @@
     var se = v().span.withConfig({
         displayName: "ItemStyles__StyledSubmenu",
         componentId: "sc-4kc053-10"
-    })([ "float:right;padding-left:", ";color:", ";" ], b.variables.spacingSmall, (0, 
+    })([ "float:right;padding-left:", ";color:", ";", "" ], b.variables.spacingSmall, (0, 
     b.pick)({
         prisma: "inherit",
         enterprise: b.variables.textGray
+    }), (0, b.pick)({
+        prisma: (0, f.css)([ "& > svg{width:20px;height:20px;}" ])
     }));
     // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRight"
     const ce = require("@splunk/react-icons/ArrowSquareTopRight");
@@ -582,9 +584,9 @@
         var r = Ce(e, t);
         var n, i;
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < a.length; i++) {
-                n = a[i];
+            var o = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < o.length; i++) {
+                n = o[i];
                 if (t.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 r[n] = e[n];
@@ -596,9 +598,9 @@
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
-        var i, a;
-        for (a = 0; a < n.length; a++) {
-            i = n[a];
+        var i, o;
+        for (o = 0; o < n.length; o++) {
+            i = n[o];
             if (t.indexOf(i) >= 0) continue;
             r[i] = e[i];
         }
@@ -648,8 +650,8 @@
         return function r() {
             var n = Ne(e), i;
             if (t) {
-                var a = Ne(this).constructor;
-                i = Reflect.construct(n, arguments, a);
+                var o = Ne(this).constructor;
+                i = Reflect.construct(n, arguments, o);
             } else {
                 i = n.apply(this, arguments);
             }
@@ -699,34 +701,34 @@
         return e;
     }
     var Fe = {
-        active: a().bool,
-        children: a().node,
-        description: a().string,
-        descriptionPosition: a().oneOf([ "right", "bottom" ]),
-        disabled: a().bool,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        hasSubmenu: a().bool,
-        icon: a().node,
+        active: o().bool,
+        children: o().node,
+        description: o().string,
+        descriptionPosition: o().oneOf([ "right", "bottom" ]),
+        disabled: o().bool,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        hasSubmenu: o().bool,
+        icon: o().node,
         /** @private. The internal key of the tab */
-        itemKey: a().number,
-        matchRanges: a().arrayOf(a().shape({
-            start: a().number.isRequired,
-            end: a().number.isRequired
+        itemKey: o().number,
+        matchRanges: o().arrayOf(o().shape({
+            start: o().number.isRequired,
+            end: o().number.isRequired
         })),
-        onClick: a().func,
+        onClick: o().func,
         /** @private */
-        onFocus: a().func,
-        openInNewContext: a().bool,
+        onFocus: o().func,
+        openInNewContext: o().bool,
         /** @private */
-        preventFocus: a().bool,
-        role: a().oneOf([ "menuitem", "menuitemradio", "menuitemcheckbox", "listboxitem", "option" ]),
-        selectable: a().bool,
-        selectableAppearance: a().oneOf([ "checkmark", "checkbox" ]),
-        selected: a().bool,
+        preventFocus: o().bool,
+        role: o().oneOf([ "menuitem", "menuitemradio", "menuitemcheckbox", "listboxitem", "option" ]),
+        selectable: o().bool,
+        selectableAppearance: o().oneOf([ "checkmark", "checkbox" ]),
+        selected: o().bool,
         /** @private */
-        splunkTheme: a().object,
-        to: a().string,
-        truncate: a().bool
+        splunkTheme: o().object,
+        to: o().string,
+        truncate: o().bool
     };
     var $e = {
         active: false,
@@ -791,11 +793,11 @@
                 if (!i || !$()(r)) {
                     return r;
                 }
-                var a = [];
+                var o = [];
  // before first match. May be empty string.
-                                a.push(r.substring(0, i[0].start));
+                                o.push(r.substring(0, i[0].start));
                 i.forEach((function(e, t) {
-                    a.push(
+                    o.push(
                     
                     // eslint-disable-next-line react/no-array-index-key
                     n().createElement(le, {
@@ -803,19 +805,19 @@
                         "data-test": "match"
                     }, r.substring(e.start, e.end)));
                     if (t < i.length - 1) {
-                        a.push(r.substring(e.end, i[t + 1].start));
+                        o.push(r.substring(e.end, i[t + 1].start));
                     } else {
-                        a.push(r.substring(e.end, r.length));
+                        o.push(r.substring(e.end, r.length));
                     }
                 }));
-                return a;
+                return o;
             }
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, r = t.active, i = t.children, a = t.hasSubmenu, o = t.selectable, s = t.selectableAppearance, c = t.selected, p = t.icon, u = t.description, d = t.disabled, f = t.onClick, v = t.preventFocus, b = t.role, m = t.splunkTheme, h = t.to, y = t.truncate, g = t.descriptionPosition, k = t.openInNewContext, x = Oe(t, [ "active", "children", "hasSubmenu", "selectable", "selectableAppearance", "selected", "icon", "description", "disabled", "onClick", "preventFocus", "role", "splunkTheme", "to", "truncate", "descriptionPosition", "openInNewContext" ]);
+                var t = this.props, r = t.active, i = t.children, o = t.hasSubmenu, a = t.selectable, s = t.selectableAppearance, c = t.selected, p = t.icon, u = t.description, d = t.disabled, f = t.onClick, v = t.preventFocus, b = t.role, m = t.splunkTheme, h = t.to, y = t.truncate, g = t.descriptionPosition, k = t.openInNewContext, x = Oe(t, [ "active", "children", "hasSubmenu", "selectable", "selectableAppearance", "selected", "icon", "description", "disabled", "onClick", "preventFocus", "role", "splunkTheme", "to", "truncate", "descriptionPosition", "openInNewContext" ]);
                 var w = m.isEnterprise, S = m.isPrisma;
-                var O = o || c;
+                var O = a || c;
                 var C = {
                     nonselectable: "menuitem",
                     checkmark: "menuitemradio",
@@ -823,7 +825,7 @@
                 }[O ? s : "nonselectable"];
  // aria-checked updates only with checkmark appearance for now SUI-2578
                                 var I = {
-                    "aria-haspopup": a ? true : undefined,
+                    "aria-haspopup": o ? true : undefined,
                     "aria-checked": s === "checkmark" && c ? true : undefined
                 };
                 var P = S ? "right" : "left";
@@ -863,22 +865,19 @@
                     openInNewContext: k
                 }, I, l()(x, "onFocus"), {
                     elementRef: this.handleMount
-                }), P === "left" && E, o && s === "checkbox" &&  n().createElement(ne, {
+                }), P === "left" && E, a && s === "checkbox" &&  n().createElement(ne, {
                     interactive: false,
                     selected: c,
                     selectedLabel: "Selected",
                     value: "menu-item"
-                }), a &&  n().createElement(se, null, w ?  n().createElement(G(), {
+                }), o &&  n().createElement(se, null, w ?  n().createElement(G(), {
                     hideDefaultTooltip: true,
                     screenReaderText: null
-                }) :  n().createElement(M(), {
-                    height: "24",
-                    width: "24"
-                })), _ &&  n().createElement(Z, {
+                }) :  n().createElement(M(), null)), _ &&  n().createElement(Z, {
                     "data-test": "description"
-                }, u),  n().createElement(ie, null, p &&  n().createElement(te, null, p),  n().createElement(ae, {
+                }, u),  n().createElement(ie, null, p &&  n().createElement(te, null, p),  n().createElement(oe, {
                     $truncate: y
-                },  n().createElement(oe, {
+                },  n().createElement(ae, {
                     $truncate: y,
                     "data-test": "label"
                 }, this.renderLabel(), k &&  n().createElement(ge, null)), j &&  n().createElement(X, {
@@ -929,9 +928,9 @@
     function Ve(e, t, r) {
         for (var n = 0; n < e.length; n += 1) {
             var i;
-            var a = (n + r) % e.length;
-            if (((i = e[a].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
-                return e[a];
+            var o = (n + r) % e.length;
+            if (((i = e[o].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
+                return e[o];
             }
         }
         return e[t];
@@ -939,9 +938,9 @@
     function Qe(e, t, r) {
         for (var n = e.length; n > 0; n -= 1) {
             var i;
-            var a = (n + r) % e.length;
-            if (((i = e[a].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
-                return e[a];
+            var o = (n + r) % e.length;
+            if (((i = e[o].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
+                return e[o];
             }
         }
         return e[t];
@@ -966,9 +965,9 @@
         var r = Xe(e, t);
         var n, i;
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < a.length; i++) {
-                n = a[i];
+            var o = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < o.length; i++) {
+                n = o[i];
                 if (t.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 r[n] = e[n];
@@ -980,34 +979,34 @@
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
-        var i, a;
-        for (a = 0; a < n.length; a++) {
-            i = n[a];
+        var i, o;
+        for (o = 0; o < n.length; o++) {
+            i = n[o];
             if (t.indexOf(i) >= 0) continue;
             r[i] = e[i];
         }
         return r;
     }
     var Ze = {
-        children: a().node,
+        children: o().node,
         /** @private */
-        controlledExternally: a().bool,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        retainFocus: a().bool,
-        stopScrollPropagation: a().bool
+        controlledExternally: o().bool,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        retainFocus: o().bool,
+        stopScrollPropagation: o().bool
     };
     var et = {
         stopScrollPropagation: false
     };
     function tt(e) {
-        var t = e.children, i = e.controlledExternally, a = e.elementRef, o = e.retainFocus, u = e.stopScrollPropagation, f = Je(e, [ "children", "controlledExternally", "elementRef", "retainFocus", "stopScrollPropagation" ]);
+        var t = e.children, i = e.controlledExternally, o = e.elementRef, a = e.retainFocus, u = e.stopScrollPropagation, f = Je(e, [ "children", "controlledExternally", "elementRef", "retainFocus", "stopScrollPropagation" ]);
         // @docs-props-type MenuPropsBase
                 var v = (0, r.useContext)(h), b = v.role, m = b === void 0 ? "menu" : b;
         var y = (0, r.useContext)(s.PopoverContext), g = y.retainFocus;
         var k = d()();
         var x = true;
-        if (o != null) {
-            x = o;
+        if (a != null) {
+            x = a;
         } else if (g != null) {
             x = g;
         }
@@ -1037,8 +1036,8 @@
                 i = Qe(S, n, S.length - 1);
             }
             if (i != null) {
-                var a, o;
-                (a = i.current) === null || a === void 0 ? void 0 : (o = a.focus) === null || o === void 0 ? void 0 : o.call(a);
+                var o, a;
+                (o = i.current) === null || o === void 0 ? void 0 : (a = o.focus) === null || a === void 0 ? void 0 : a.call(o);
                 t.preventDefault();
             }
         };
@@ -1048,7 +1047,7 @@
                 w.current = r;
             }
         }), []);
-        var T = r.Children.toArray(t).filter(r.isValidElement).reduce((function(e, t, r, a) {
+        var T = r.Children.toArray(t).filter(r.isValidElement).reduce((function(e, t, r, o) {
             /* Filter out initial Dividers
      * Requires reduce() over filter() because a Heading may have been
      * before the Divider.
@@ -1058,14 +1057,14 @@
             }
  // Filter out consecutive Dividers and Headings
             // If Divider is next to Heading then it will remove both Heading and Divider unless Heading has title prop set to it
-                        if ((t.type.as === "Heading" || t.type.as === "Divider") && !t.props.title && t.type.filterConsecutive && a.length > r + 1) {
-                var o = a[r + 1];
-                if (o.type.as === "Heading" || o.type.as === "Divider") {
+                        if ((t.type.as === "Heading" || t.type.as === "Divider") && !t.props.title && t.type.filterConsecutive && o.length > r + 1) {
+                var a = o[r + 1];
+                if (a.type.as === "Heading" || a.type.as === "Divider") {
                     return e;
                 }
             }
  // Filter out last Dividers and Headings
-                        if ((t.type.as === "Divider" || t.type.as === "Heading") && r === a.length - 1) {
+                        if ((t.type.as === "Divider" || t.type.as === "Heading") && r === o.length - 1) {
                 return e;
             }
  // the filterConsecutive check filters out Headings and Dividers whether styled or not
@@ -1114,10 +1113,10 @@
             tabIndex: C == null && !i ? 0 : undefined
         };
         return u ?  n().createElement(Ue, Ye({}, D, {
-            elementRef: a,
+            elementRef: o,
             stopScrollPropagation: true
         }, l()(f, "tagName")), T) :  n().createElement(Ge, Ye({}, D, {
-            ref: a
+            ref: o
         }, f), T);
     }
     tt.propTypes = Ze;

package/Message.js

@@ -180,7 +180,7 @@
     var D = I().div.withConfig({
         displayName: "MessageStyles__StyledContent",
         componentId: "eg66af-0"
-    })([ "display:flex;align-items:baseline;", ";", " ", ";" ], (0, E.pick)({
+    })([ "display:flex;align-items:baseline;flex:1;", ";", " ", ";" ], (0, E.pick)({
         prisma: (0, P.css)([ "padding:", " 0;color:", ";" ], E.variables.spacingMedium, E.variables.contentColorActive),
         enterprise: (0, P.css)([ "padding:12px 0;" ])
     }), (0, E.pick)({