@splunk/react-ui 4.36.0 → 4.38.0

package/Button.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ U
+        default: () => /* reexport */ Y
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
@@ -74,38 +74,43 @@
     var l =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
     const s = require("@splunk/react-ui/Dropdown");
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+    const c = require("@splunk/react-ui/ScreenReaderContent");
+    var p =  e.n(c);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const u = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/style"
-    const c = require("@splunk/ui-utils/style");
+    const f = require("@splunk/ui-utils/style");
     // CONCATENATED MODULE: external "styled-components"
-    const p = require("styled-components");
-    var u =  e.n(p);
+    const d = require("styled-components");
+    var m =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const f = require("@splunk/react-ui/ButtonSimple");
-    var d =  e.n(f);
+    const v = require("@splunk/react-ui/ButtonSimple");
+    var y =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const m = require("@splunk/themes");
+    const b = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Button/ButtonStyles.ts
-    var y = u().span.withConfig({
+    var h = m().span.withConfig({
         displayName: "ButtonStyles__StyledIcon",
         componentId: "eqxqs2-0"
     })([ "display:flex;align-items:center;flex-shrink:0;font-size:", ";", "" ], (0, 
-    m.pick)({
+    b.pick)({
         enterprise: "inherit",
         prisma: {
             comfortable: "21px",
             compact: "16px"
         }
-    }), (0, m.pickVariant)("$isStartIcon", {
+    }), (0, b.pickVariant)("$isStartIcon", {
         true: {
-            enterprise: (0, p.css)([ "padding-right:3px;" ]),
-            prisma: (0, p.css)([ "padding-right:8px;" ])
+            enterprise: (0, d.css)([ "padding-right:3px;" ]),
+            prisma: (0, d.css)([ "padding-right:8px;" ])
         }
     }));
-    var v = u()(d()).withConfig({
+    var x = m()(y()).withConfig({
         displayName: "ButtonStyles__StyledButtonSimple",
         componentId: "eqxqs2-1"
-    })([ "vertical-align:middle;text-decoration:none;white-space:nowrap;flex-grow:1;min-width:0;max-width:100%;line-height:", ";min-height:", ";padding:", ";", " ", " &[data-inline]{:where(:not(a)){display:inline-block;}:where(a){display:inline-flex;}", "}[data-inline] + &&[data-inline]{margin-bottom:0;", "}" ], m.variables.lineHeight, m.variables.inputHeight, (0, 
-    m.pick)({
+    })([ "vertical-align:middle;text-decoration:none;white-space:nowrap;flex-grow:1;min-width:0;max-width:100%;line-height:", ";min-height:", ";padding:", ";", " ", " &[data-inline]{:where(:not(a)){display:inline-block;}:where(a){display:inline-flex;}", "}[data-inline] + &&[data-inline]{margin-bottom:0;", "}" ], b.variables.lineHeight, b.variables.inputHeight, (0, 
+    b.pick)({
         enterprise: {
             comfortable: "5px 14px",
             compact: "2px 14px"
@@ -122,38 +127,38 @@
         }
     }), (function(e) {
         var t = e.$inline, n = e.append, r = e.prepend;
-        return !t && !n && !r && (0, p.css)([ "width:100%;" ]);
+        return !t && !n && !r && (0, d.css)([ "width:100%;" ]);
     }), (function(e) {
         var t = e.$isIconOnly;
-        return t && (0, p.css)([ "box-sizing:border-box;", ";width:", ";min-width:", ";" ], (0, 
-        m.pick)({
+        return t && (0, d.css)([ "box-sizing:border-box;", ";width:", ";min-width:", ";" ], (0, 
+        b.pick)({
             enterprise: {
-                comfortable: (0, p.css)([ "padding:0 5px;" ]),
-                compact: (0, p.css)([ "padding:0 2px;" ])
+                comfortable: (0, d.css)([ "padding:0 5px;" ]),
+                compact: (0, d.css)([ "padding:0 2px;" ])
             },
             prisma: {
-                comfortable: (0, p.css)([ "padding:0 calc(", " / 2 - 1px);" ], m.variables.inputHeight),
-                compact: (0, p.css)([ "padding:0 calc(", " / 2 - 1px);" ], m.variables.inputHeight)
+                comfortable: (0, d.css)([ "padding:0 calc(", " / 2 - 1px);" ], b.variables.inputHeight),
+                compact: (0, d.css)([ "padding:0 calc(", " / 2 - 1px);" ], b.variables.inputHeight)
             }
-        }), m.variables.inputHeight, m.variables.inputHeight);
+        }), b.variables.inputHeight, b.variables.inputHeight);
     }), (function(e) {
         var t = e.$isIconOnly;
-        return t ? null : (0, p.css)([ "width:auto;" ]);
+        return t ? null : (0, d.css)([ "width:auto;" ]);
     }), (function(e) {
         var t = e.prepend;
-        return !t && (0, p.css)([ "margin-left:", ";" ], m.variables.spacingSmall);
+        return !t && (0, d.css)([ "margin-left:", ";" ], b.variables.spacingSmall);
     }));
-    var b = u().span.withConfig({
+    var g = m().span.withConfig({
         displayName: "ButtonStyles__StyledContentWrapper",
         componentId: "eqxqs2-2"
     })([ "display:flex;flex-direction:row;justify-content:center;align-items:center;flex:1 0 auto;max-width:100%;box-sizing:border-box;padding:", ";" ], (0, 
-    m.pick)({
+    b.pick)({
         enterprise: function e(t) {
             var n = t.$error;
             if (n) {
                 return "1px";
             }
-            return (0, m.pickVariant)("$appearance", {
+            return (0, b.pickVariant)("$appearance", {
                 default: "0",
                 secondary: "0",
                 destructive: "1px",
@@ -166,7 +171,7 @@
                 subtle: "0"
             });
         },
-        prisma: (0, m.pickVariant)("$appearance", {
+        prisma: (0, b.pickVariant)("$appearance", {
             default: 0,
             secondary: "1px 0",
             primary: "1px 0",
@@ -178,71 +183,66 @@
             subtle: "1px 0"
         })
     }));
-    var h = u().span.withConfig({
+    var w = m().span.withConfig({
         displayName: "ButtonStyles__StyledLabel",
         componentId: "eqxqs2-3"
     })([ "text-overflow:ellipsis;overflow:hidden;flex:0 1 auto;&:not(:last-child){padding-right:", ";}", "" ], (0, 
-    m.pick)({
+    b.pick)({
         enterprise: "3px",
         prisma: "10px"
     }), (function(e) {
         var t = e.$isMenu;
-        return t && (0, p.css)([ "flex:1 1 auto;text-align:left;" ]);
+        return t && (0, d.css)([ "flex:1 1 auto;text-align:left;" ]);
     }));
-    var x = u().span.withConfig({
+    var S = m().span.withConfig({
         displayName: "ButtonStyles__StyledCaretWrapper",
         componentId: "eqxqs2-4"
-    })([ "display:inline-flex;", "" ], (0, m.pickVariant)("$disabled", {
+    })([ "display:inline-flex;", "" ], (0, b.pickVariant)("$disabled", {
         false: {
-            prisma: (0, m.pickVariant)("$primary", {
-                true: (0, p.css)([ "color:", ";" ], m.variables.contentColorInverted),
-                false: (0, p.css)([ "color:", ";", ":hover > * > &,", ":active > * > &,{color:", ";}" ], m.variables.contentColorDefault, 
+            prisma: (0, b.pickVariant)("$primary", {
+                true: (0, d.css)([ "color:", ";" ], b.variables.contentColorInverted),
+                false: (0, d.css)([ "color:", ";", ":hover > * > &,", ":active > * > &,{color:", ";}" ], b.variables.contentColorDefault, 
                 /* sc-sel */
-                v, 
+                x, 
                 /* sc-sel */
-                v, m.variables.contentColorDefault)
+                x, b.variables.contentColorDefault)
             })
         }
     }));
     // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallDown"
-    const g = require("@splunk/react-icons/CaretSmallDown");
-    var w =  e.n(g);
+    const k = require("@splunk/react-icons/CaretSmallDown");
+    var O =  e.n(k);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Caret"
-    const S = require("@splunk/react-icons/enterprise/Caret");
-    var k =  e.n(S);
+    const C = require("@splunk/react-icons/enterprise/Caret");
+    var q =  e.n(C);
     // CONCATENATED MODULE: ./src/Button/icons/CaretSmallDown.tsx
-    var O = function e() {
-        var t = (0, m.useSplunkTheme)(), n = t.isEnterprise, i = t.isCompact;
+    var $ = function e() {
+        var t = (0, b.useSplunkTheme)(), n = t.isEnterprise, i = t.isCompact;
         var a = i ? "20px" : "24px";
-        return n ?  r().createElement(k(), {
+        return n ?  r().createElement(q(), {
             screenReaderText: null,
             hideDefaultTooltip: true,
             size: .5
-        }) :  r().createElement(w(), {
+        }) :  r().createElement(O(), {
             height: a,
             width: a
         });
     };
-    /* harmony default export */    const C = O;
+    /* harmony default export */    const _ = $;
     // CONCATENATED MODULE: external "@splunk/react-icons/ArrowSquareTopRightInset"
-    const q = require("@splunk/react-icons/ArrowSquareTopRightInset");
-    var $ =  e.n(q);
+    const I = require("@splunk/react-icons/ArrowSquareTopRightInset");
+    var E =  e.n(I);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/External"
-    const _ = require("@splunk/react-icons/enterprise/External");
-    var I =  e.n(_);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const E = require("@splunk/ui-utils/i18n");
+    const P = require("@splunk/react-icons/enterprise/External");
+    var j =  e.n(P);
     // CONCATENATED MODULE: ./src/Button/icons/External.tsx
-    var P = (0, E._)("Open externally");
-    function j() {
-        var e = (0, m.useSplunkTheme)(), t = e.isEnterprise;
-        return t ?  r().createElement(I(), {
-            screenReaderText: P
-        }) :  r().createElement($(), {
-            "aria-label": P
-        },  r().createElement("title", null, P));
+    function N() {
+        var e = (0, b.useSplunkTheme)(), t = e.isEnterprise;
+        return t ?  r().createElement(j(), {
+            screenReaderText: null
+        }) :  r().createElement(E(), null);
     }
-    /* harmony default export */    const N = j;
+    /* harmony default export */    const T = N;
     // CONCATENATED MODULE: ./src/Button/Button.tsx
     function M(e) {
         "@babel/helpers - typeof";
@@ -257,8 +257,8 @@
         }
         return M(e);
     }
-    function T() {
-        T = Object.assign || function(e) {
+    function R() {
+        R = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -269,14 +269,14 @@
             }
             return e;
         };
-        return T.apply(this, arguments);
+        return R.apply(this, arguments);
     }
-    function R(e, t) {
+    function B(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function B(e, t) {
+    function D(e, t) {
         for (var n = 0; n < t.length; n++) {
             var r = t[n];
             r.enumerable = r.enumerable || false;
@@ -285,12 +285,12 @@
             Object.defineProperty(e, r.key, r);
         }
     }
-    function D(e, t, n) {
-        if (t) B(e.prototype, t);
-        if (n) B(e, n);
+    function H(e, t, n) {
+        if (t) D(e.prototype, t);
+        if (n) D(e, n);
         return e;
     }
-    function H(e, t) {
+    function V(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -301,41 +301,41 @@
                 configurable: true
             }
         });
-        if (t) V(e, t);
+        if (t) z(e, t);
     }
-    function V(e, t) {
-        V = Object.setPrototypeOf || function e(t, n) {
+    function z(e, t) {
+        z = Object.setPrototypeOf || function e(t, n) {
             t.__proto__ = n;
             return t;
         };
-        return V(e, t);
+        return z(e, t);
     }
-    function z(e) {
-        var t = L();
+    function W(e) {
+        var t = F();
         return function n() {
-            var r = F(e), i;
+            var r = G(e), i;
             if (t) {
-                var a = F(this).constructor;
+                var a = G(this).constructor;
                 i = Reflect.construct(r, arguments, a);
             } else {
                 i = r.apply(this, arguments);
             }
-            return W(this, i);
+            return A(this, i);
         };
     }
-    function W(e, t) {
+    function A(e, t) {
         if (t && (M(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return A(e);
+        return L(e);
     }
-    function A(e) {
+    function L(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function L() {
+    function F() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -346,13 +346,13 @@
             return false;
         }
     }
-    function F(e) {
-        F = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function G(e) {
+        G = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return F(e);
+        return G(e);
     }
-    function G(e, t, n) {
+    function J(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -365,7 +365,7 @@
         }
         return e;
     }
-    var J = {
+    var K = {
         action: a().string,
         appearance: a().oneOf([ "default", "secondary", "primary", "destructive", "pill", "toggle", "flat", "subtle" ]),
         append: a().bool,
@@ -380,13 +380,13 @@
         isMenu: a().bool,
         label: a().node,
         onClick: a().func,
-        openInNewContext: a().bool,
+        openInNewContext: a().oneOfType([ a().bool, a().string ]),
         prepend: a().bool,
         selected: a().bool,
         to: a().string,
         value: a().any
     };
-    var K = {
+    var Q = {
         appearance: "default",
         append: false,
         disabled: false,
@@ -396,16 +396,17 @@
         openInNewContext: false,
         prepend: false
     };
-    var Q =  function(e) {
-        H(n, e);
-        var t = z(n);
+    var U = (0, u._)("(Opens new window)");
+    var X =  function(e) {
+        V(n, e);
+        var t = W(n);
         // @docs-props-type ButtonPropsBase
                 function n(e) {
             var r;
-            R(this, n);
+            B(this, n);
             r = t.call(this, e);
-            G(A(r), "component", null);
-            G(A(r), "handleClick", (function(e) {
+            J(L(r), "component", null);
+            J(L(r), "handleClick", (function(e) {
                 var t = r.props, n = t.label, i = t.icon, a = t.value, o = t.action, l = t.onClick;
                 l === null || l === void 0 ? void 0 : l(e, {
                     label: n,
@@ -414,13 +415,13 @@
                     action: o
                 });
             }));
-            G(A(r), "handleMount", (function(e) {
+            J(L(r), "handleMount", (function(e) {
                 r.component = e;
             }));
             if (false) {}
             return r;
         }
-        D(n, [ {
+        H(n, [ {
             key: "focus",
             /**
      * Places focus on the button.
@@ -432,57 +433,63 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, n = t.action, i = t.appearance, a = t.append, o = t.className, s = t.classNamePrivate, p = t.disabled, u = t.error, f = t.icon, d = t.inline, m = t.isMenu, g = t.onClick, w = t.openInNewContext, S = t.prepend, k = t.to, O = t.value;
-                var q = this.props, $ = q.children, _ = q.label;
-                if (!_ && l()($)) {
-                    _ = $;
+                var t = this.props, n = t.action, i = t.appearance, a = t.append, o = t.className, s = t.classNamePrivate, c = t.disabled, u = t.error, d = t.icon, m = t.inline, v = t.isMenu, y = t.onClick, b = t.openInNewContext, k = t.prepend, O = t.to, C = t.value;
+                var q = this.props, $ = q.children, I = q.label;
+                if (!I && l()($)) {
+                    I = $;
                     $ = null;
                 }
-                var I = !!(f && !_ && !m && !$);
-                var E = k && w || m || !!f;
+                var E = false;
+                var P;
+                if (b) {
+                    E = true;
+                    P = typeof b === "string" ? b : U;
+                }
+                var j = !!(d && !I && !v && !$);
+                var N = O && E || v || !!d;
                 
-                return r().createElement(v, T({
-                    "aria-haspopup": m || undefined,
+                return r().createElement(x, R({
+                    "aria-haspopup": v || undefined,
                     "aria-invalid": u || undefined,
                     "data-test": "button"
                 }, this.props, {
-                    className: (0, c.toClassName)(o, s),
+                    className: (0, f.toClassName)(o, s),
                     "data-action": n,
-                    "data-inline": d || null,
-                    disabled: p,
+                    "data-inline": m || null,
+                    disabled: c,
                     append: a,
-                    prepend: S,
-                    $inline: d,
-                    $hasPrismaIcon: E,
-                    $isIconOnly: I,
-                    $isMenu: m,
-                    value: O,
-                    onClick: g ? this.handleClick : undefined,
+                    prepend: k,
+                    $inline: m,
+                    $hasPrismaIcon: N,
+                    $isIconOnly: j,
+                    $isMenu: v,
+                    value: C,
+                    onClick: y ? this.handleClick : undefined,
                     ref: this.handleMount,
-                    openInNewContext: w,
+                    openInNewContext: E,
                     appearance: i
-                }),  r().createElement(b, {
+                }),  r().createElement(g, {
                     $appearance: i,
                     $error: u
-                }, f &&  r().createElement(y, {
-                    $isStartIcon: !I
-                }, f), _ &&  r().createElement(h, {
+                }, d &&  r().createElement(h, {
+                    $isStartIcon: !j
+                }, d), I &&  r().createElement(w, {
                     "data-test": "label",
-                    $isMenu: m
-                }, _), $, m &&  r().createElement(x, {
-                    $disabled: p,
+                    $isMenu: v
+                }, I), $, v &&  r().createElement(S, {
+                    $disabled: c,
                     $primary: i === "primary"
-                },  r().createElement(C, null)), w &&  r().createElement(y, {
+                },  r().createElement(_, null)), b &&  r().createElement(h, {
                     $isStartIcon: false
-                },  r().createElement(N, null))));
+                },  r().createElement(T, null),  r().createElement(p(), null, P))));
             }
         } ]);
         return n;
     }(n.Component);
-    G(Q, "propTypes", J);
-    G(Q, "defaultProps", K);
-    G(Q, s.legacyRefMode, true);
-    /* harmony default export */    const U = Q;
+    J(X, "propTypes", K);
+    J(X, "defaultProps", Q);
+    J(X, s.legacyRefMode, true);
+    /* harmony default export */    const Y = X;
     // CONCATENATED MODULE: ./src/Button/index.ts
     module.exports = t;
     /******/})();

package/CHANGELOG.md

@@ -1,6 +1,38 @@
 Change Log
 ============
 
+4.38.0 - October 1, 2024
+----------
+New Features:
+* `Slider` now supports the `error` prop in Enterprise themes (SUI-6580).
+* `Search.Option` now supports the `matchRanges` prop (SUI-6383).
+* `Text` now supports a new `"dimmed"` value for the `disabled` prop (SUI-6648).
+* `Button` and `Menu.Item` support type `string` for `openInNewContext` to customize the default message (SUI-6662).
+* `Date` now supports the `inputOnly` prop in Enterprise themes (SUI-6579).
+
+Bug Fixes:
+* `Color`'s palette now renders with the correct role and has an accessible name (SUI-6635).
+* `Select` with `prefixLabel` or `suffixLabel` now has correct `aria-label` when option is selected (SUI-6642).
+* `Select`'s `role` has been changed from `"button"` to `"combobox"` (SUI-6441).
+    * Screen reader now announces the `option` selection status and number within the `listbox`.
+* `Color`'s interactive elements are additionally labelled by ControlGroup (SUI-6660).
+* `Button` and `Menu.Item` now correctly informs users when a link will open in a new window in Prisma themes (SUI-6662).
+* `Button` and `Menu.Item` have updated screen reader text better describing the `openInNewContext` behavior to users (SUI-6662).
+
+Docs:
+* New `List`, `Paginator`, `Table`, and `TextArea` component overviews.
+
+4.37.0 - September 9, 2024
+----------
+New Features:
+* `Progress` supports `success` and `error` values for the `type` prop in Enterprise themes (SUI-6492).
+
+Bug Fixes:
+* Updated `Progress` animation and style to improve contrast in Enterprise themes (SUI-6492).
+* `RadioBar`'s active item now has appropriate contrast in the Prisma light theme (SUI-6609).
+* `Switch` now shows the correct cursor type when `appearance="toggle"` is `disabled` (SUI-6612).
+* `TextArea` with `startAdornment` or `endAdornment` will no longer prematurely wrap text (SUI-6613).
+
 4.36.0 - September 3, 2024
 ----------
 New Features: