@splunk/react-ui 4.42.0 → 4.44.0

package/ComboBox.js

@@ -88,8 +88,8 @@
     const v = require("lodash/pick");
     var b =  e.n(v);
     // CONCATENATED MODULE: external "lodash/some"
-    const y = require("lodash/some");
-    var h =  e.n(y);
+    const h = require("lodash/some");
+    var y =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/ui-utils/filter"
     const m = require("@splunk/ui-utils/filter");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
@@ -482,6 +482,7 @@
         error: i().bool,
         footerMessage: i().node,
         inline: i().bool,
+        inputId: i().string,
         inputRef: i().oneOfType([ i().func, i().object ]),
         isLoadingOptions: i().bool,
         labelledBy: i().string,
@@ -516,12 +517,12 @@
         menuStyle: {},
         placeholder: (0, O._)("Select...")
     };
-    function ye(e, t) {
+    function he(e, t) {
         var n = t.clientX, o = t.clientY;
         var r = e.getBoundingClientRect(), i = r.top, a = r.left, l = r.bottom, u = r.right;
         return n > a && n < u && o > i && o < l;
     }
-    var he = p()((function(e) {
+    var ye = p()((function(e) {
         var t = e.anchorWidth, n = e.maxHeight, o = e.menuStyle;
         return l()({
             maxHeight: n,
@@ -531,8 +532,7 @@
     }));
     /**
  * `ComboBox` allows the user to select a predefined string or enter a new value. Unlike `Select`
- * and `Multiselect`, `Option` value must always be a string and `Option` does not have a label
- * property.
+ * and `Multiselect`, `Option` value must always be a string.
  */    var me =  function(e) {
         re(r, e);
         var t = ae(r);
@@ -545,7 +545,6 @@
             pe(ue(i), "activeValue", void 0);
             pe(ue(i), "availableOptionCount", 0);
             pe(ue(i), "controlledExternally", void 0);
-            pe(ue(i), "focusCalledInternally", false);
             pe(ue(i), "options", void 0);
             pe(ue(i), "popoverId", void 0);
             pe(ue(i), "previousActiveIndex", null);
@@ -567,13 +566,7 @@
             }));
             pe(ue(i), "handleInputFocus", (function(e, t) {
                 var n, o;
-                /* SUI-930 On IE 11 this handler is essentially deferred after calling
-       * this.textInput.focus(). this.focusCalledInternally enables the focus event to be ignored
-       * when the menu closes. */                if (i.focusCalledInternally) {
-                    i.focusCalledInternally = false;
-                } else {
-                    i.open();
-                }
+                i.open();
                 (n = (o = i.props).onFocus) === null || n === void 0 ? void 0 : n.call(o, e, t);
             }));
             pe(ue(i), "handleChange", (function(e, t) {
@@ -603,7 +596,6 @@
                 i.handleChange(e, ee(ee({}, t), {}, {
                     selectedOption: true
                 }));
-                i.focusCalledInternally = true;
                 i.focus();
                 i.close();
             }));
@@ -668,7 +660,7 @@
             }));
             pe(ue(i), "handleRequestClose", (function(e) {
                 var t = e.event, n = e.reason;
-                var o = n === "offScreen" || n === "escapeKey" || n === "clickAway" && i.state.anchor && !ye(i.state.anchor, t);
+                var o = n === "offScreen" || n === "escapeKey" || n === "clickAway" && i.state.anchor && !he(i.state.anchor, t);
                 if (o) {
                     i.close();
                 }
@@ -684,7 +676,7 @@
                 var a = i.state, l = a.activeIndex, u = a.typedValue;
                 var s = i.getValue();
                 var p = n.Children.toArray(t).filter(n.isValidElement);
-                var f = h()(p, (function(e) {
+                var f = y()(p, (function(e) {
                     if (e.type === S.Heading) {
                         return false;
                     }
@@ -751,7 +743,7 @@
             pe(ue(i), "renderMenu", (function(e) {
                 var t = e.anchorWidth, n = e.maxHeight;
                 var r = i.props, a = r.isLoadingOptions, l = r.menuStyle, u = r.onScrollBottom, c = r.virtualization;
-                var s = he({
+                var s = ye({
                     anchorWidth: t,
                     maxHeight: n,
                     menuStyle: l
@@ -851,10 +843,10 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props.defaultPlacement;
-                var n = this.state, r = n.anchor, i = n.open;
-                var a = this.getValue();
-                var l = this.getDisplayValue();
+                var t = this.props, n = t.defaultPlacement, r = t.inputId;
+                var i = this.state, a = i.anchor, l = i.open;
+                var u = this.getValue();
+                var c = this.getDisplayValue();
                 this.prepareOptions();
                 
                 return o().createElement(x(), Z({
@@ -864,30 +856,31 @@
                     spellCheck: false,
                     canClear: true,
                     "data-test": "combo-box"
-                }, d()(this.props, "animateLoading", "className", "controlledFilter", "defaultValue", "footerMessage", "isLoadingOptions", "loadingMessage", "menuStyle", "noOptionsMessage", "onClose", "onOpen", "onScroll", "onScrollBottom", "spellCheck"), {
+                }, d()(this.props, "animateLoading", "className", "controlledFilter", "defaultValue", "footerMessage", "inputId", "isLoadingOptions", "loadingMessage", "menuStyle", "noOptionsMessage", "onClose", "onOpen", "onScroll", "onScrollBottom", "spellCheck"), {
                     "data-test-popover-id": this.popoverId,
-                    "data-test-label": l,
-                    "data-test-value": a,
-                    "data-test-open": i && !!r,
+                    "data-test-label": c,
+                    "data-test-value": u,
+                    "data-test-open": l && !!a,
                     onFocus: this.handleInputFocus,
                     onInputClick: this.handleInputClick,
                     onChange: this.handleChange,
                     onKeyDown: this.handleInputKeyDown,
+                    inputId: r,
                     inputRef: this.handleInputMount,
                     elementRef: this.handleAnchorMount,
                     role: "combobox",
-                    value: l,
+                    value: c,
                     "aria-activedescendant": this.state.open && Array.isArray(this.options) && this.options.length > 0 ? this.activeItemId : undefined,
-                    "aria-expanded": i,
-                    "aria-controls": i ? this.popoverId : undefined
+                    "aria-expanded": l,
+                    "aria-controls": l ? this.popoverId : undefined
                 }),  o().createElement(P(), {
-                    anchor: r,
+                    anchor: a,
                     autoCloseWhenOffScreen: true,
                     canCoverAnchor: false,
-                    defaultPlacement: t,
+                    defaultPlacement: n,
                     id: this.popoverId,
                     onRequestClose: this.handleRequestClose,
-                    open: i && !!r,
+                    open: l && !!a,
                     repositionMode: "flip"
                 }, this.renderMenu));
             }

package/Date.js

@@ -138,7 +138,7 @@
             return e;
         }, T.apply(null, arguments);
     }
-    function I(e) {
+    function S(e) {
         var t = (0, m.useSplunkTheme)(), n = t.density;
         var r = n === "compact" ? "20px" : "24px";
         
@@ -159,7 +159,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function S(e, t) {
+    function D(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -172,16 +172,16 @@
         }
     }
     // CONCATENATED MODULE: ./src/Date/Date.tsx
-    function D(e) {
+    function V(e) {
         "@babel/helpers - typeof";
-        return D = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return V = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, D(e);
+        }, V(e);
     }
-    function V() {
-        return V = Object.assign ? Object.assign.bind() : function(e) {
+    function I() {
+        return I = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var a in n) {
@@ -189,7 +189,7 @@
                 }
             }
             return e;
-        }, V.apply(null, arguments);
+        }, I.apply(null, arguments);
     }
     function j(e, t) {
         if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
@@ -235,7 +235,7 @@
         };
     }
     function M(e, t) {
-        if (t && ("object" == D(t) || "function" == typeof t)) return t;
+        if (t && ("object" == V(t) || "function" == typeof t)) return t;
         if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
         return F(e);
     }
@@ -266,14 +266,14 @@
     }
     function W(e) {
         var t = A(e, "string");
-        return "symbol" == D(t) ? t : t + "";
+        return "symbol" == V(t) ? t : t + "";
     }
     function A(e, t) {
-        if ("object" != D(e) || !e) return e;
+        if ("object" != V(e) || !e) return e;
         var n = e[Symbol.toPrimitive];
         if (void 0 !== n) {
             var a = n.call(e, t || "default");
-            if ("object" != D(a)) return a;
+            if ("object" != V(a)) return a;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
@@ -322,6 +322,9 @@
  * @type string
  */    var N = "YYYY-MM-DD";
     var Z = function e(t) {
+        if (t === "") {
+            return;
+        }
         if (!p()(t, N).isValid()) {
             // eslint-disable-next-line no-console
             console.error('Invalid date string value "'.concat(t, '" provided to Moment.'));
@@ -336,15 +339,19 @@
             j(this, n);
             r = t.call(this, e);
             B(F(r), "controlledExternally", void 0);
-            B(F(r), "focusCalledInternally", false);
             B(F(r), "popoverId", void 0);
             B(F(r), "calendarRef",  a().createRef());
             B(F(r), "openWithFocus", false);
             B(F(r), "applyTextChange", (function(e) {
-                var t = p()(r.state.tempTextInputDate, "l", r.props.locale);
-                if (t.isValid()) {
+                var t = r.state.tempTextInputDate;
+                var n = p()(t, "l", r.props.locale);
+                if (t === "") {
+                    r.handleDateChange(e, {
+                        value: ""
+                    }, "textInput");
+                } else if (n.isValid()) {
                     r.handleDateChange(e, {
-                        value: t.format(N)
+                        value: n.format(N)
                     }, "textInput");
                 } else {
                     r.setState({
@@ -356,7 +363,6 @@
             B(F(r), "handleDateChange", (function(e, t, n) {
                 var a = t.value;
                 if (n !== "textInput") {
-                    r.focusCalledInternally = true;
                     r.focus();
                 }
                 if (r.getValue() !== a) {
@@ -379,9 +385,7 @@
             }));
             B(F(r), "handleFocus", (function(e, t) {
                 var n, a;
-                if (r.focusCalledInternally) {
-                    r.focusCalledInternally = false;
-                } else if (!r.props.inputOnly) {
+                if (!r.props.inputOnly) {
                     r.setState({
                         calendarOpen: true
                     });
@@ -432,7 +436,7 @@
                 r.setState({
                     anchor: e
                 });
-                S(r.props.elementRef, e);
+                D(r.props.elementRef, e);
             }));
             B(F(r), "handleInputMount", (function(e) {
                 r.setState({
@@ -444,13 +448,16 @@
                 if ((n === "clickAway" || n === "escapeKey") && t !== undefined && t.target !== r.state.anchor) {
                     r.applyTextChange(t);
                     if (n === "escapeKey") {
-                        r.focusCalledInternally = true;
                         r.focus();
                     }
                 }
             }));
             r.controlledExternally = i()(e, "value");
-            var o = r.isControlled() ? e.value : e.defaultValue || p()().locale(e.locale).format(N);
+            /**
+     * TODO(SUI-7412): defaultValue will be set to current if date gets empty string.
+     * Changing this would be a breaking change but this should be changed in epic/five
+     * to have consistent behavior for empty-string between controlled and uncontrolled
+     */            var o = r.isControlled() ? e.value : e.defaultValue || p()().locale(e.locale).format(N);
             r.state = {
                 anchor: null,
                 calendarOpen: false,
@@ -484,7 +491,15 @@
         }, {
             key: "getTextInputValue",
             value: function e() {
-                return this.state.tempTextInputDate === undefined ? p()(this.getValue(), N, this.props.locale).format("l") : this.state.tempTextInputDate;
+                var t = this.state.tempTextInputDate;
+                if (t === undefined) {
+                    var n = this.getValue();
+                    if (n === undefined || n === "") {
+                        return "";
+                    }
+                    return p()(this.getValue(), N, this.props.locale).format("l");
+                }
+                return t;
             }
         }, {
             key: "isControlled",
@@ -508,7 +523,7 @@
                 var p = u && !o &&  a().createElement(w, {
                     "aria-hidden": true,
                     $disabled: n
-                },  a().createElement(I, null));
+                },  a().createElement(S, null));
                 var f;
                 var d = {};
                 if (!o) {
@@ -526,11 +541,11 @@
                         highlightToday: r,
                         locale: l,
                         onChange: this.handleDateChange,
-                        value: c
+                        value: c === "" ? undefined : c
                     }));
                 }
                 
-                return a().createElement(k, V({
+                return a().createElement(k, I({
                     autoCapitalize: "off",
                     autoComplete: "off",
                     autoCorrect: "off",

package/Dropdown.js

@@ -382,7 +382,7 @@
             key: "componentDidUpdate",
             value: function e() {
                 if (false) {}
-                var o = R({}, y()(this.props, v()(r.propTypes), "value", "id"));
+                var o = R({}, y()(this.props, v()(r.propTypes), "aria-labelledby", "id", "value"));
                 if (false) {}
             }
         }, {

package/DualListbox.js

@@ -281,7 +281,7 @@
             })),
             prisma: (0, _.css)([ "color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";box-shadow:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";}}" ], N.variables.contentColorActive, N.variables.interactiveColorOverlayHover, N.variables.interactiveColorBorderHover, N.variables.hoverShadow, N.variables.interactiveColorOverlayActive, N.variables.interactiveColorOverlayActive)
         }),
-        true: (0, _.css)([ "border-color:", ";color:", ";cursor:not-allowed;" ], (0, N.pick)({
+        true: (0, _.css)([ "border-color:", ";color:", ";" ], (0, N.pick)({
             prisma: N.variables.interactiveColorBorderDisabled
         }), (0, N.pick)({
             enterprise: N.variables.textDisabledColor,

package/JSONTree.js

@@ -139,9 +139,9 @@
             function C(e) {
                 var r = e.id, n = e.children, a = e.content, i = e.customIndent, l = e.endAdornment, u = e.labelledBy, f = e.onFocus, d = e.onKeyDown, s = e.onToggle, h = e.open, g = h === void 0 ? true : h, S = e.toggle, w = O(e, [ "id", "children", "content", "customIndent", "endAdornment", "labelledBy", "onFocus", "onKeyDown", "onToggle", "open", "toggle" ]);
                 var k = (0, t.useContext)(c), x = k.defaultIndent, I = x === void 0 ? true : x, C = k.onItemKeyDown, j = k.onItemClick, E = k.removeNode, A = k.setNode, T = k.itemPaths, P = k.focusedItemId;
-                var R = (0, t.useState)(g), K = b(R, 2), _ = K[0], N = K[1];
+                var R = (0, t.useState)(g), K = b(R, 2), _ = K[0], D = K[1];
  // make first tree item tabbable
-                                var D = (0, t.useState)((T === null || T === void 0 ? void 0 : T.get("".concat(r))) === "0" ? 0 : -1), V = b(D, 2), L = V[0], q = V[1];
+                                var N = (0, t.useState)((T === null || T === void 0 ? void 0 : T.get("".concat(r))) === "0" ? 0 : -1), V = b(N, 2), L = V[0], q = V[1];
                 var F = (0, t.useRef)(null);
                 var M = (0, t.useRef)(null);
                 var $ = t.Children.toArray(n).filter(t.isValidElement);
@@ -155,7 +155,7 @@
                     }
                 }));
                 var J = function e(r, n) {
-                    N(r);
+                    D(r);
                     s === null || s === void 0 ? void 0 : s(r, n);
                 };
                 var U = function e(n) {
@@ -286,13 +286,13 @@
             }
             /**
  * A helper function to get parent path of current item path
- */            function N(e) {
+ */            function D(e) {
                 // remove last index number of the current item path string to get parent
                 return e.split("-").slice(0, -1).join("-");
             }
             /**
  * A helper function to get next path of current item path in same level
- */            function D(e, r) {
+ */            function N(e, r) {
                 return e === null || e === void 0 ? void 0 : e.replace(/([^-]*)$/, "".concat(r + 1));
             }
             /**
@@ -309,19 +309,19 @@
                 if (!n) {
                     return r;
                 }
-                var t = N(n);
+                var t = D(n);
                 return _(e, t) || r;
             }
             /**
  * A helper function for getNextTreeItem
  */            function q(e, r) {
-                var n = N(r);
+                var n = D(r);
                 if (!n) {
                     return _(e, r);
                 }
                 // get next node in the parent level
                                 var t = V(n);
-                var o = D(n, t);
+                var o = N(n, t);
                 var a = _(e, o);
                 if (a) {
                     return a;
@@ -341,7 +341,7 @@
                 }
                 // case where next tree item is the next node in the same level
                                 var o = V(n);
-                var a = D(n, o);
+                var a = N(n, o);
                 var i = _(e, a);
                 if (i) {
                     return i;
@@ -361,7 +361,7 @@
                 // get the last child in current node, and continue to find its children recursively
                                 while (t) {
                     var a = V(o);
-                    var i = D(o, a);
+                    var i = N(o, a);
                     t = _(e, i);
                     if (t) {
                         o = i;
@@ -393,9 +393,9 @@
                 // find last child in current node
                                 while (n) {
                     var o = V(t);
-                    n = _(e, D(t, o));
+                    n = _(e, N(t, o));
                     if (n) {
-                        t = D(t, o);
+                        t = N(t, o);
                     }
                 }
                 // check if last child has children
@@ -495,8 +495,9 @@
                 var u = (0, t.useState)(), f = H(u, 2), d = f[0], s = f[1];
                 var v = new Map;
                 var p = function e(r, n, t, o, a) {
-                    var i = (0, l.keycode)(r.nativeEvent);
                     r.stopPropagation();
+                    var i = (0, l.keycode)(r.nativeEvent);
+                    var u = t && (o === null || o === void 0 ? void 0 : o.length);
                     switch (i) {
                       case "up":
                         r.preventDefault();
@@ -510,7 +511,7 @@
 
                       case "left":
                         r.preventDefault();
-                        if (t && (o === null || o === void 0 ? void 0 : o.length)) {
+                        if (u) {
                             a(false, r);
                         } else {
                             s(L(v, n));
@@ -519,7 +520,7 @@
 
                       case "right":
                         r.preventDefault();
-                        if (t && (o === null || o === void 0 ? void 0 : o.length)) {
+                        if (u) {
                             s(F(v, n));
                         } else {
                             a(true, r);
@@ -536,6 +537,11 @@
                         s(U(v));
                         break;
 
+                      case "enter":
+                        r.preventDefault();
+                        a(!u, r);
+                        break;
+
                       default:
  // do nothing
                                         }
@@ -754,26 +760,26 @@
             }, P.apply(null, arguments);
         }
         function R(e, r) {
-            return V(e) || D(e, r) || _(e, r) || K();
+            return V(e) || N(e, r) || _(e, r) || K();
         }
         function K() {
             throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         }
         function _(e, r) {
             if (e) {
-                if ("string" == typeof e) return N(e, r);
+                if ("string" == typeof e) return D(e, r);
                 var n = {}.toString.call(e).slice(8, -1);
-                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? N(e, r) : void 0;
+                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? D(e, r) : void 0;
             }
         }
-        function N(e, r) {
+        function D(e, r) {
             (null == r || r > e.length) && (r = e.length);
             for (var n = 0, t = Array(r); n < r; n++) {
                 t[n] = e[n];
             }
             return t;
         }
-        function D(e, r) {
+        function N(e, r) {
             var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != n) {
                 var t, o, a, i, l = [], u = !0, c = !1;
@@ -1055,14 +1061,14 @@
                 }
                 return false;
             };
-            var N = function e(r) {
+            var D = function e(r) {
                 if (a === "withShiftModifier" || u) {
                     if (T != null) {
                         T(r.shiftKey);
                     }
                 }
             };
-            var D = function e(r, n) {
+            var N = function e(r, n) {
                 var t, o;
                 // When rendering a single value key is not present, here we prevent `[undefined]` in path
                                 var a = n !== undefined ? [].concat(oe(x), [ n ]) : oe(x);
@@ -1107,7 +1113,7 @@
                     elementRef: a,
                     tabIndex: -1,
                     onClick: function e(r) {
-                        N(r);
+                        D(r);
                     },
                     "aria-expanded": t,
                     "data-test": "toggle"
@@ -1199,7 +1205,7 @@
                             tabIndex: -1,
                             onClick: function e(r) {
                                 K = t;
-                                D(r, n);
+                                N(r, n);
                             },
                             onKeyDown: function e(r) {
                                 L(r, true);