@splunk/react-ui 4.23.0 → 4.24.0

package/Breadcrumbs.js

@@ -61,33 +61,33 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Item: () => /* reexport */ j,
-        default: () => /* reexport */ I
+        Item: () => /* reexport */ h,
+        default: () => /* reexport */ q
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var a =  e.n(o);
+    const a = require("prop-types");
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const i = require("@splunk/ui-utils/i18n");
+    const l = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const l = require("styled-components");
-    var c =  e.n(l);
+    const i = require("styled-components");
+    var s =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const s = require("@splunk/themes");
+    const u = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-ui/Link"
-    const u = require("@splunk/react-ui/Link");
-    var f =  e.n(u);
+    const c = require("@splunk/react-ui/Link");
+    var f =  e.n(c);
     // CONCATENATED MODULE: ./src/Breadcrumbs/ItemStyles.ts
-    var p = c()(f()).withConfig({
+    var d = s()(f()).withConfig({
         displayName: "ItemStyles__StyledLink",
         componentId: "sc-1ywtawf-0"
-    })([ "display:flex;align-items:center;gap:", ";white-space:nowrap;color:", ";&:where(:hover,:focus):not([disabled],[aria-disabled='true']){color:", ";}" ], s.variables.spacingXSmall, s.variables.contentColorDefault, s.variables.contentColorActive);
+    })([ "display:flex;align-items:center;gap:", ";white-space:nowrap;color:", ";&:where(:hover,:focus):not([disabled],[aria-disabled='true']){color:", ";}" ], u.variables.spacingXSmall, u.variables.contentColorDefault, u.variables.contentColorActive);
     // CONCATENATED MODULE: ./src/Breadcrumbs/Item.tsx
-    function d() {
-        d = Object.assign || function(e) {
+    function p() {
+        p = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -98,57 +98,16 @@
             }
             return e;
         };
-        return d.apply(this, arguments);
+        return p.apply(this, arguments);
     }
     function b(e, r) {
-        var t = Object.keys(e);
-        if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            if (r) n = n.filter((function(r) {
-                return Object.getOwnPropertyDescriptor(e, r).enumerable;
-            }));
-            t.push.apply(t, n);
-        }
-        return t;
-    }
-    function y(e) {
-        for (var r = 1; r < arguments.length; r++) {
-            var t = arguments[r] != null ? arguments[r] : {};
-            if (r % 2) {
-                b(Object(t), true).forEach((function(r) {
-                    m(e, r, t[r]);
-                }));
-            } else if (Object.getOwnPropertyDescriptors) {
-                Object.defineProperties(e, Object.getOwnPropertyDescriptors(t));
-            } else {
-                b(Object(t)).forEach((function(r) {
-                    Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-                }));
-            }
-        }
-        return e;
-    }
-    function m(e, r, t) {
-        if (r in e) {
-            Object.defineProperty(e, r, {
-                value: t,
-                enumerable: true,
-                configurable: true,
-                writable: true
-            });
-        } else {
-            e[r] = t;
-        }
-        return e;
-    }
-    function v(e, r) {
         if (e == null) return {};
-        var t = O(e, r);
-        var n, o;
+        var t = m(e, r);
+        var n, a;
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < a.length; o++) {
-                n = a[o];
+            var o = Object.getOwnPropertySymbols(e);
+            for (a = 0; a < o.length; a++) {
+                n = o[a];
                 if (r.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 t[n] = e[n];
@@ -156,62 +115,72 @@
         }
         return t;
     }
-    function O(e, r) {
+    function m(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
-        var o, a;
-        for (a = 0; a < n.length; a++) {
-            o = n[a];
-            if (r.indexOf(o) >= 0) continue;
-            t[o] = e[o];
+        var a, o;
+        for (o = 0; o < n.length; o++) {
+            a = n[o];
+            if (r.indexOf(a) >= 0) continue;
+            t[a] = e[a];
         }
         return t;
     }
+    var v = Object.freeze({
+        allowDisabledLink: true,
+        disabled: true,
+        to: ""
+    });
+    var y = {
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        enableCurrentPage: o().bool,
+        endAdornment: o().node,
+        isCurrent: o().bool,
+        label: o().string.isRequired,
+        startAdornment: o().node,
+        to: o().string.isRequired
+    };
     var g = {
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        endAdornment: a().node,
-        isCurrent: a().bool,
-        label: a().string.isRequired,
-        startAdornment: a().node,
-        to: a().string.isRequired
+        enableCurrentPage: false,
+        isCurrent: false
     };
-    function h(e) {
-        var r = e.endAdornment, t = e.isCurrent, o = t === void 0 ? false : t, a = e.label, i = e.startAdornment, l = e.to, c = v(e, [ "endAdornment", "isCurrent", "label", "startAdornment", "to" ]);
+    function O(e) {
+        var r = e.enableCurrentPage, t = e.endAdornment, a = e.isCurrent, o = e.label, l = e.startAdornment, i = e.to, s = b(e, [ "enableCurrentPage", "endAdornment", "isCurrent", "label", "startAdornment", "to" ]);
         // @docs-props-type ItemPropsBase
-                var s = {
-            to: l
+                var u = {
+            to: i
         };
-        var u = {
-            "aria-current": "page",
-            allowDisabledLink: true,
-            disabled: true,
-            to: ""
-        };
-        var f = o ? y(y({}, s), u) : s;
+        if (a) {
+            u["aria-current"] = "page";
+            if (!r) {
+                Object.assign(u, v);
+            }
+        }
         
-        return n().createElement(p, d({
+        return n().createElement(d, p({
             "data-test": "item"
-        }, f, c), i && i, a, r && r);
+        }, u, s), l && l, o, t && t);
     }
-    h.propTypes = g;
-    /* harmony default export */    const j = h;
+    O.propTypes = y;
+    O.defaultProps = g;
+    /* harmony default export */    const h = O;
     // CONCATENATED MODULE: ./src/Breadcrumbs/BreadcrumbsStyles.ts
-    var w = c().ol.withConfig({
+    var C = s().ol.withConfig({
         displayName: "BreadcrumbsStyles__StyledList",
         componentId: "sc-1maeyfk-0"
-    })([ "", " flex-wrap:wrap;" ], s.mixins.reset("flex"));
-    var S = c().li.withConfig({
+    })([ "", " flex-wrap:wrap;" ], u.mixins.reset("flex"));
+    var w = s().li.withConfig({
         displayName: "BreadcrumbsStyles__StyledListItem",
         componentId: "sc-1maeyfk-1"
-    })([ "display:flex;min-width:max-content;a[aria-current]{font-weight:", ";color:", ";cursor:default;}" ], s.variables.fontWeightSemiBold, s.variables.contentColorActive);
-    var P = c().span.withConfig({
+    })([ "display:flex;min-width:max-content;a[aria-current]{font-weight:", ";color:", ";cursor:default;}" ], u.variables.fontWeightSemiBold, u.variables.contentColorActive);
+    var P = s().span.withConfig({
         displayName: "BreadcrumbsStyles__StyledSeparator",
         componentId: "sc-1maeyfk-2"
-    })([ "cursor:default;padding:0 ", ";color:", ";" ], s.variables.spacingSmall, s.variables.contentColorDefault);
+    })([ "cursor:default;padding:0 ", ";color:", ";" ], u.variables.spacingSmall, u.variables.contentColorDefault);
     // CONCATENATED MODULE: ./src/Breadcrumbs/Breadcrumbs.tsx
-    function C() {
-        C = Object.assign || function(e) {
+    function S() {
+        S = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -222,16 +191,16 @@
             }
             return e;
         };
-        return C.apply(this, arguments);
+        return S.apply(this, arguments);
     }
-    function k(e, r) {
+    function j(e, r) {
         if (e == null) return {};
         var t = _(e, r);
-        var n, o;
+        var n, a;
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < a.length; o++) {
-                n = a[o];
+            var o = Object.getOwnPropertySymbols(e);
+            for (a = 0; a < o.length; a++) {
+                n = o[a];
                 if (r.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 t[n] = e[n];
@@ -243,47 +212,53 @@
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
-        var o, a;
-        for (a = 0; a < n.length; a++) {
-            o = n[a];
-            if (r.indexOf(o) >= 0) continue;
-            t[o] = e[o];
+        var a, o;
+        for (o = 0; o < n.length; o++) {
+            a = n[o];
+            if (r.indexOf(a) >= 0) continue;
+            t[a] = e[a];
         }
         return t;
     }
+    var k = {
+        children: o().node.isRequired,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        enableCurrentPage: o().bool
+    };
     var x = {
-        children: a().node.isRequired,
-        elementRef: a().oneOfType([ a().func, a().object ])
+        enableCurrentPage: false
     };
-    function E(e) {
-        var r = e.children, o = e.elementRef, a = k(e, [ "children", "elementRef" ]);
+    function I(e) {
+        var r = e.children, a = e.elementRef, o = e.enableCurrentPage, i = j(e, [ "children", "elementRef", "enableCurrentPage" ]);
         // @docs-props-type BreadcrumbsPropsBase
-                var l;
-        var c = t.Children.toArray(r).filter(t.isValidElement).map((function(e, o) {
+                var s;
+        var u = t.Children.toArray(r).filter(t.isValidElement).map((function(e, a) {
             if (false) {}
             if (false) {}
  // Set the last child as the current Breadcrumb.Item
-                        var a = o === t.Children.count(r) - 1;
+                        var l = a === t.Children.count(r) - 1;
             var i =  (0, t.cloneElement)(e, {
-                isCurrent: a
+                isCurrent: l,
+                enableCurrentPage: o
             });
             
-            return n().createElement(S, {
+            return n().createElement(w, {
                 key: e.props.to
-            }, i, !a &&  n().createElement(P, {
+            }, i, !l &&  n().createElement(P, {
                 "aria-hidden": "true"
             }, "/"));
         }));
         
-        return n().createElement("nav", C({
+        return n().createElement("nav", S({
             "data-test": "breadcrumbs",
-            "aria-label": (0, i._)("Breadcrumb"),
-            ref: o
-        }, a),  n().createElement(w, null, c));
+            "aria-label": (0, l._)("Breadcrumb"),
+            ref: a
+        }, i),  n().createElement(C, null, u));
     }
-    E.propTypes = x;
-    E.Item = j;
-    /* harmony default export */    const I = E;
+    I.propTypes = k;
+    I.defaultProps = x;
+    I.Item = h;
+    /* harmony default export */    const q = I;
     // CONCATENATED MODULE: ./src/Breadcrumbs/index.ts
     module.exports = r;
     /******/})();

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 Change Log
 ============
 
+4.24.0 - Jan 9, 2024
+----------
+New Features:
+* `Breadcrumbs` now supports `enableCurrentPage` which enables the current page link (SUI-5910).
+
+Bug Fixes:
+* Disabled `Option`s for `ComboBox` and `Search` are no longer selectable with keyboard navigation (SUI-5905).
+* Fixed a `styled-components` specificity issue where `Table`'s cursor would incorrectly be set to `pointer` in some cases (SUI-5914).
+* `TabBar` no longer shows a duplicate browser tooltip (SUI-5916).
+
 4.23.0 - Dec 5, 2023
 ----------
 New Features:
@@ -8,6 +18,7 @@ New Features:
 
 Bug Fixes:
 * The system color picker for `Color` no longer closes unexpectedly during color selection in Safari (SUI-5831).
+* `ComboBox`'s options are no longer clickable while closing (SUI-5825).
 
 Deprecations:
 * `JSONTree`'s `expandChildren="withShiftModifier"` value has been deprecated and will be removed in a future major version. Use the `expandChildrenOnShiftKey` prop instead (SUI-5771).

package/ComboBox.js

@@ -206,9 +206,9 @@
     function T(e) {
         var t = H();
         return function n() {
-            var o = K(e), r;
+            var o = z(e), r;
             if (t) {
-                var i = K(this).constructor;
+                var i = z(this).constructor;
                 r = Reflect.construct(o, arguments, i);
             } else {
                 r = o.apply(this, arguments);
@@ -239,13 +239,13 @@
             return false;
         }
     }
-    function K(e) {
-        K = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function z(e) {
+        z = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return K(e);
+        return z(e);
     }
-    function N(e, t, n) {
+    function K(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -258,7 +258,7 @@
         }
         return e;
     }
-    var z = {
+    var N = {
         /** @private */
         active: i().bool,
         description: i().string,
@@ -295,8 +295,8 @@
                 r[i] = arguments[i];
             }
             e = t.call.apply(t, [ this ].concat(r));
-            N(F(e), "item", null);
-            N(F(e), "handleClick", (function(t) {
+            K(F(e), "item", null);
+            K(F(e), "handleClick", (function(t) {
                 var n = e.props, o = n.disabled, r = n.onClick, i = n.value;
                 if (!o) {
                     r === null || r === void 0 ? void 0 : r(t, {
@@ -335,8 +335,8 @@
         } ]);
         return n;
     }(n.PureComponent);
-    N(U, "propTypes", z);
-    N(U, "defaultProps", W);
+    K(U, "propTypes", N);
+    K(U, "defaultProps", W);
     /* harmony default export */    const X = U;
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
@@ -537,7 +537,9 @@
         placeholder: i().string,
         prepend: i().bool,
         size: i().oneOf([ "small", "medium", "large" ]),
-        value: i().string
+        value: i().string,
+        /** @private. */
+        virtualization: i().number
     };
     var fe = {
         animateLoading: false,
@@ -614,6 +616,7 @@
             ce(ae(i), "handleChange", (function(e, t) {
                 var n, o;
                 var r = t.value, a = t.selectedOption;
+                e.stopPropagation();
                 var l = i.props.name;
                 var u = a ? undefined : r;
                 if (i.isControlled()) {
@@ -713,41 +716,41 @@
             }));
             ce(ae(i), "renderMenu", (function(e) {
                 var t = e.anchorWidth, r = e.maxHeight;
-                var a = i.props, l = a.children, u = a.controlledFilter, s = a.isLoadingOptions, f = a.menuStyle, p = a.onScrollBottom;
-                var d = i.state, v = d.activeIndex, y = d.typedValue;
-                var g = i.getValue();
-                var S = n.Children.toArray(l).filter(n.isValidElement);
-                var C = b()(S, (function(e) {
+                var a = i.props, l = a.children, u = a.controlledFilter, s = a.isLoadingOptions, f = a.menuStyle, p = a.onScrollBottom, d = a.virtualization;
+                var v = i.state, y = v.activeIndex, g = v.typedValue;
+                var S = i.getValue();
+                var C = n.Children.toArray(l).filter(n.isValidElement);
+                var w = b()(C, (function(e) {
                     if (e.type === I.Heading) {
                         return false;
                     }
                     if (e.props.label === undefined) {
-                        return e.props.value === g;
+                        return e.props.value === S;
                     }
-                    if (e.props.label !== undefined && y !== undefined) {
-                        return e.props.label === g;
+                    if (e.props.label !== undefined && g !== undefined) {
+                        return e.props.label === S;
                     }
-                    return e.props.value === g;
+                    return e.props.value === S;
                 }));
-                if (!C && g) {
-                    S.unshift( o().createElement(X, {
+                if (!w && S) {
+                    C.unshift( o().createElement(X, {
                         description: (0, O._)("(New value)"),
                         descriptionPosition: "right",
                         key: "currentValueOption",
-                        value: g,
-                        "data-test-current-value-option": g
+                        value: S,
+                        "data-test-current-value-option": S
                     }));
                 }
  // Highlight Active
                                 i.availableOptionCount = 0;
                 i.activeValue = undefined;
-                var w = (0, m.stringToKeywords)(y ? g : i.getDisplayValue());
-                i.options = (u ? S : S.filter((function(e) {
+                var j = (0, m.stringToKeywords)(g ? S : i.getDisplayValue());
+                i.options = (u ? C : C.filter((function(e) {
                     if (e.props.label !== undefined) {
-                        return (0, m.testPhrase)(e.props.label, w);
+                        return (0, m.testPhrase)(e.props.label, j);
                     }
                     if (e.props.value !== undefined) {
-                        return (0, m.testPhrase)(e.props.value, w);
+                        return (0, m.testPhrase)(e.props.value, j);
                     }
                     return true;
  // Keep all headers and non-interactive options
@@ -756,13 +759,15 @@
                         // ignore Headings and Dividers
                         return e;
                     }
-                    var o = i.availableOptionCount === v;
+                    var o = i.availableOptionCount === y;
                     i.availableOptionCount += 1;
                     var r = e.props.label !== undefined ? e.props.label : e.props.value;
                     var a = e.props.matchRanges;
-                    var l = !u && g && (C || t > 0) ? (0, m.keywordLocations)(r, w) || undefined : undefined;
+                    var l = !u && S && (w || t > 0) ? (0, m.keywordLocations)(r, j) || undefined : undefined;
                     if (o) {
-                        i.activeValue = e.props.value;
+                        if (!e.props.disabled) {
+                            i.activeValue = e.props.value;
+                        }
                         
                         return (0, n.cloneElement)(e, {
                             ref: i.handleActiveOptionMount,
@@ -778,18 +783,25 @@
                         matchRanges: a || l
                     });
                 }));
-                var k = de({
+                var x = de({
                     anchorWidth: t,
                     maxHeight: r,
                     menuStyle: f
                 });
-                
-                return o().createElement(P(), J({
-                    style: k,
+                var R = Z({
+                    style: x,
                     controlledExternally: true,
                     onScrollBottom: p ? i.handleScrollBottom : undefined,
                     isLoading: s
-                }, h()(i.props, "className", "noOptionsMessage", "footerMessage", "animateLoading", "loadingMessage", "onScroll")), i.options);
+                }, h()(i.props, "className", "noOptionsMessage", "footerMessage", "animateLoading", "loadingMessage", "onScroll"));
+                if (d) {
+                    
+                    return o().createElement(k.VirtualizedResultsMenu, J({
+                        virtualization: d
+                    }, R), i.options);
+                }
+                
+                return o().createElement(P(), R, i.options);
             }));
             i.state = {
                 activeIndex: 0,