@splunk/react-ui 4.34.0 → 4.35.0

package/Breadcrumbs.js

@@ -61,9 +61,9 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        BreadcrumbsContext: () => /* reexport */ E,
-        Item: () => /* reexport */ O,
-        default: () => /* reexport */ q
+        BreadcrumbsContext: () => /* reexport */ x,
+        Item: () => /* reexport */ C,
+        default: () => /* reexport */ E
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -143,14 +143,10 @@
         startAdornment: o().node,
         to: o().string.isRequired
     };
-    var g = {
-        enableCurrentPage: false,
-        isCurrent: false
-    };
-    function C(e) {
+    function g(e) {
         var r = e.enableCurrentPage, a = e.endAdornment, o = e.isCurrent, l = e.label, i = e.onClick, c = e.startAdornment, u = e.to, s = b(e, [ "enableCurrentPage", "endAdornment", "isCurrent", "label", "onClick", "startAdornment", "to" ]);
         // @docs-props-type ItemPropsBase
-                var f = (0, t.useContext)(E), v = f.onClick;
+                var f = (0, t.useContext)(x), v = f.onClick;
         var y = {
             to: u
         };
@@ -178,19 +174,18 @@
             "data-test": "item"
         }, C, y, s), c && c, l, a && a);
     }
-    C.propTypes = y;
-    C.defaultProps = g;
-    /* harmony default export */    const O = C;
+    g.propTypes = y;
+    /* harmony default export */    const C = g;
     // CONCATENATED MODULE: ./src/Breadcrumbs/BreadcrumbsStyles.ts
-    var h = c().ol.withConfig({
+    var O = c().ol.withConfig({
         displayName: "BreadcrumbsStyles__StyledList",
         componentId: "sc-1maeyfk-0"
     })([ "", " flex-wrap:wrap;" ], u.mixins.reset("flex"));
-    var k = c().li.withConfig({
+    var h = c().li.withConfig({
         displayName: "BreadcrumbsStyles__StyledListItem",
         componentId: "sc-1maeyfk-1"
     })([ "display:flex;min-width:max-content;a[aria-current]{font-weight:", ";color:", ";cursor:default;}" ], u.variables.fontWeightSemiBold, u.variables.contentColorActive);
-    var P = c().span.withConfig({
+    var k = c().span.withConfig({
         displayName: "BreadcrumbsStyles__StyledSeparator",
         componentId: "sc-1maeyfk-2"
     })([ "cursor:default;padding:0 ", ";color:", ";" ], u.variables.spacingSmall, u.variables.contentColorDefault);
@@ -236,17 +231,14 @@
         }
         return t;
     }
-    var x = {
+    var P = {
         children: o().node.isRequired,
         elementRef: o().oneOfType([ o().func, o().object ]),
         enableCurrentPage: o().bool,
         onClick: o().func
     };
-    var _ = {
-        enableCurrentPage: false
-    };
-    var E =  n().createContext({});
-    function I(e) {
+    var x =  n().createContext({});
+    function _(e) {
         var r = e.children, a = e.elementRef, o = e.enableCurrentPage, i = e.onClick, c = S(e, [ "children", "elementRef", "enableCurrentPage", "onClick" ]);
         // @docs-props-type BreadcrumbsPropsBase
                 var u;
@@ -260,9 +252,9 @@
                 enableCurrentPage: o
             });
             
-            return n().createElement(k, {
+            return n().createElement(h, {
                 key: e.props.to
-            }, i, !l &&  n().createElement(P, {
+            }, i, !l &&  n().createElement(k, {
                 "aria-hidden": "true"
             }, "/"));
         }));
@@ -270,18 +262,17 @@
             onClick: i
         };
         
-        return n().createElement(E.Provider, {
+        return n().createElement(x.Provider, {
             value: f
         },  n().createElement("nav", w({
             "data-test": "breadcrumbs",
             "aria-label": (0, l._)("Breadcrumbs"),
             ref: a
-        }, c),  n().createElement(h, null, s)));
+        }, c),  n().createElement(O, null, s)));
     }
-    I.propTypes = x;
-    I.defaultProps = _;
-    I.Item = O;
-    /* harmony default export */    const q = I;
+    _.propTypes = P;
+    _.Item = C;
+    /* harmony default export */    const E = _;
     // CONCATENATED MODULE: ./src/Breadcrumbs/index.ts
     module.exports = r;
     /******/})();

package/Button.js

@@ -104,7 +104,7 @@
     var v = u()(d()).withConfig({
         displayName: "ButtonStyles__StyledButtonSimple",
         componentId: "eqxqs2-1"
-    })([ "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;}vertical-align:middle;", "}[data-inline] + &&[data-inline]{margin-bottom:0;", "}" ], m.variables.lineHeight, m.variables.inputHeight, (0, 
+    })([ "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)({
         enterprise: {
             comfortable: "5px 14px",

package/CHANGELOG.md

@@ -1,6 +1,30 @@
 Change Log
 ============
 
+4.35.0 - August 26, 2024
+----------
+New Features:
+* `Color`'s `hideInput` prop is now supported in Enterprise themes. Defaults to `true` in Enterprise and `false` in Prisma themes, maintaining existing behavior (SUI-6458).
+* `Menu.Item` now supports a new `"dimmed"` value for the `disabled` prop (SUI-5671).
+* `ControlGroup` uses `aria-errormessage` to help associate the input with its error message (SUI-6395).
+* Refactored uses of styled-components `withComponent` functionality to increase compatibility with styled-components v6 where it will no longer be available.
+
+Bug Fixes:
+* `Button` with `inline={false}` now aligns correctly with text when set to `display: inline-block` (SUI-6472).
+* `Text`'s border now shows focus when clicked and has a cursor text when hovering over the border now (SUI-5199).
+* `Text`'s nonclickable adornments now shows focus on the input when clicked (SUI-5199).
+* Reverted change to `CollapsiblePanel` focus shadow, now uses inset shadow:
+    * Note `@splunk/themes@0.21.0` should be used to ensure contrast requirements are met. 
+* `Message`'s remove button styling for focus and hover states has been corrected (SUI-6520).
+
+Deprecations:
+* `Progress`'s `type="warning"` value has been deprecated and will be removed in the next major version.
+* `Menu` now supports `focusMode` prop, which specifies how the menu manages focus (SUI-6164).
+* `Menu`'s `retainFocus` prop has been deprecated and will be removed in the next major version. See the migration guide for details (SUI-6164).
+
+Docs:
+* `Combobox.Option`, `Multiselect.Option`, `Search.Option` and `Select.Option` no longer incorrectly list `descriptionPosition="right"` as unsupported in Prisma themes (SUI-6568).
+
 4.34.0 - August 7, 2024
 ----------
 New Features:
@@ -18,7 +42,7 @@ Bug Fixes:
 * `Button`s with an `appearance` of `primary` or `destructive` no longer have incorrect background colors on focus when `disabled="dimmed"` (SUI-6357).
 * `JSONTree's` active border has been removed to avoid a layout shift (SUI-6324).
 * `CollapsiblePanel`'s focus shadow has been updated to improve contrast (SUI-6340).
-* `Search`'s `role` has been changed from `"textbox"` to `"searchbox"`. 
+* `Search`'s `role` has been changed from `"textbox"` to `"searchbox"`.
 * `Search`'s default labels have been removed to avoid redundant screen reader output (SUI-6332).
 * `CollapsiblePanel`'s Enterprise dark theme toggle button is now visible when `disabled` (SUI-6425).
 * `Popover` no longer moves focus to the container when no focusable children exist to ensure the focus indicator remains visible (SUI-6446).
@@ -39,7 +63,7 @@ New Features:
 * `Button` now supports `appearance="subtle"` with a visual appearance similar to the Enterprise `"pill"` and Prisma `"secondary"` appearances (SUI-6051).
 * `Button` now sets the `aria-pressed` attribute appropriately when the `selected` prop is provided (SUI-2791).
 * `Select` has a new `toggleContent` prop that specifies whether the children (`"optionChildren"`) or label (`"optionLabel"`) of the matched `Option` are rendered in the toggle button (SUI-6316).
-* `Menu.Item` now supports `descriptionPosition="right"` for Prisma themes (SUI-5664).
+* `Menu.Item`, `Combobox.Option`, `Multiselect.Option`, `Search.Option` and `Select.Option` now support `descriptionPosition="right"` for Prisma themes (SUI-5664).
 
 Bug Fixes:
 * `Modal.Header` uses semantic HTML elements for the `title` and `subtitle` props to improve accessibility.

package/Card.js

@@ -64,7 +64,7 @@
         Body: () => /* reexport */ m,
         Footer: () => /* reexport */ k,
         Header: () => /* reexport */ Q,
-        default: () => /* reexport */ Be
+        default: () => /* reexport */ Re
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -422,10 +422,7 @@
     var Y =  e.n(X);
     // CONCATENATED MODULE: ./src/Card/CardStyles.ts
     var Z = "0.2s";
-    var ee = l().article.withConfig({
-        displayName: "CardStyles__Styled",
-        componentId: "ola3x0-0"
-    })([ "", ";flex-direction:column;align-items:stretch;min-width:100px;flex:1;vertical-align:top;", " transition:height ", ",width ", ",min-width ", ",max-width ", ",margin ", ",box-shadow ", ",border-color ", ";", " &[data-clickable='true']{cursor:pointer;", " &:hover{", "}&:focus{", "}}" ], u.mixins.reset("inline-flex"), (0, 
+    var ee = (0, a.css)([ "", ";flex-direction:column;align-items:stretch;min-width:100px;flex:1;vertical-align:top;", " transition:height ", ",width ", ",min-width ", ",max-width ", ",margin ", ",box-shadow ", ",border-color ", ";", " &[data-clickable='true']{cursor:pointer;", " &:hover{", "}&:focus{", "}}" ], u.mixins.reset("inline-flex"), (0, 
     u.pick)({
         enterprise: (0, a.css)([ "background-color:", ";border:1px solid transparent;" ], u.variables.backgroundColor),
         prisma: (0, a.css)([ "background-color:", ";border-radius:", ";box-shadow:", ";" ], u.variables.backgroundColorSection, u.variables.borderRadius, u.variables.embossShadow)
@@ -447,36 +444,43 @@
         enterprise: (0, a.css)([ "box-shadow:", ";" ], u.variables.focusShadow),
         prisma: (0, a.css)([ "box-shadow:", ",", ";background-color:", ";" ], u.variables.embossShadow, u.variables.focusShadow, u.mixins.overlayColors(u.variables.backgroundColorSection, u.variables.interactiveColorOverlayHover))
     }));
-    var re = ee.withComponent(Y());
+    var re = l().article.withConfig({
+        displayName: "CardStyles__Styled",
+        componentId: "ola3x0-0"
+    })([ "", "" ], ee);
+    var te = l()(Y()).withConfig({
+        displayName: "CardStyles__StyledClickable",
+        componentId: "ola3x0-1"
+    })([ "", "" ], ee);
     /* A child element we add to <button>s to make flexbox work.
    Without this wrapper element, child elements won't flex
    in Firefox.
    This unfortunately exposes some fragility in IE (e.g., adding
    a flex: 1 style here will cause the card to collapse) so test
    across the supported browsers if making a change here.
-*/    var te = l().div.withConfig({
+*/    var ne = l().div.withConfig({
         displayName: "CardStyles__StyledFirefoxFlexHack",
-        componentId: "ola3x0-1"
+        componentId: "ola3x0-2"
     })([ "display:flex;flex:1 1 auto;flex-direction:column;align-items:stretch;justify-content:stretch;height:100%;", "" ], (0, 
     u.pick)({
         prisma: (0, a.css)([ "border-radius:", ";" ], u.variables.borderRadius)
     }));
     // CONCATENATED MODULE: ./src/Card/Card.tsx
-    function ne(e) {
+    function oe(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            ne = function e(r) {
+            oe = function e(r) {
                 return typeof r;
             };
         } else {
-            ne = function e(r) {
+            oe = function e(r) {
                 return r && typeof Symbol === "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
             };
         }
-        return ne(e);
+        return oe(e);
     }
-    function oe() {
-        oe = Object.assign || function(e) {
+    function ie() {
+        ie = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -487,30 +491,30 @@
             }
             return e;
         };
-        return oe.apply(this, arguments);
+        return ie.apply(this, arguments);
     }
-    function ie(e, r) {
-        return ue(e) || se(e, r) || le(e, r) || ae();
+    function ae(e, r) {
+        return pe(e) || ue(e, r) || ce(e, r) || le();
     }
-    function ae() {
+    function le() {
         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 le(e, r) {
+    function ce(e, r) {
         if (!e) return;
-        if (typeof e === "string") return ce(e, r);
+        if (typeof e === "string") return se(e, r);
         var t = Object.prototype.toString.call(e).slice(8, -1);
         if (t === "Object" && e.constructor) t = e.constructor.name;
         if (t === "Map" || t === "Set") return Array.from(e);
-        if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return ce(e, r);
+        if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return se(e, r);
     }
-    function ce(e, r) {
+    function se(e, r) {
         if (r == null || r > e.length) r = e.length;
         for (var t = 0, n = new Array(r); t < r; t++) {
             n[t] = e[t];
         }
         return n;
     }
-    function se(e, r) {
+    function ue(e, r) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var t = [];
         var n = true;
@@ -533,15 +537,15 @@
         }
         return t;
     }
-    function ue(e) {
+    function pe(e) {
         if (Array.isArray(e)) return e;
     }
-    function pe(e, r) {
+    function de(e, r) {
         if (!(e instanceof r)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function de(e, r) {
+    function fe(e, r) {
         for (var t = 0; t < r.length; t++) {
             var n = r[t];
             n.enumerable = n.enumerable || false;
@@ -550,12 +554,12 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function fe(e, r, t) {
-        if (r) de(e.prototype, r);
-        if (t) de(e, t);
+    function be(e, r, t) {
+        if (r) fe(e.prototype, r);
+        if (t) fe(e, t);
         return e;
     }
-    function be(e, r) {
+    function ve(e, r) {
         if (typeof r !== "function" && r !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -566,41 +570,41 @@
                 configurable: true
             }
         });
-        if (r) ve(e, r);
+        if (r) ye(e, r);
     }
-    function ve(e, r) {
-        ve = Object.setPrototypeOf || function e(r, t) {
+    function ye(e, r) {
+        ye = Object.setPrototypeOf || function e(r, t) {
             r.__proto__ = t;
             return r;
         };
-        return ve(e, r);
+        return ye(e, r);
     }
-    function ye(e) {
-        var r = ge();
+    function me(e) {
+        var r = we();
         return function t() {
-            var n = we(e), o;
+            var n = Oe(e), o;
             if (r) {
-                var i = we(this).constructor;
+                var i = Oe(this).constructor;
                 o = Reflect.construct(n, arguments, i);
             } else {
                 o = n.apply(this, arguments);
             }
-            return me(this, o);
+            return he(this, o);
         };
     }
-    function me(e, r) {
-        if (r && (ne(r) === "object" || typeof r === "function")) {
+    function he(e, r) {
+        if (r && (oe(r) === "object" || typeof r === "function")) {
             return r;
         }
-        return he(e);
+        return ge(e);
     }
-    function he(e) {
+    function ge(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function ge() {
+    function we() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -611,13 +615,13 @@
             return false;
         }
     }
-    function we(e) {
-        we = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
+    function Oe(e) {
+        Oe = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
             return r.__proto__ || Object.getPrototypeOf(r);
         };
-        return we(e);
+        return Oe(e);
     }
-    function Oe(e, r) {
+    function xe(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -628,24 +632,24 @@
         }
         return t;
     }
-    function xe(e) {
+    function Se(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = arguments[r] != null ? arguments[r] : {};
             if (r % 2) {
-                Oe(Object(t), true).forEach((function(r) {
-                    Se(e, r, t[r]);
+                xe(Object(t), true).forEach((function(r) {
+                    ke(e, r, t[r]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
                 Object.defineProperties(e, Object.getOwnPropertyDescriptors(t));
             } else {
-                Oe(Object(t)).forEach((function(r) {
+                xe(Object(t)).forEach((function(r) {
                     Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
                 }));
             }
         }
         return e;
     }
-    function Se(e, r, t) {
+    function ke(e, r, t) {
         if (r in e) {
             Object.defineProperty(e, r, {
                 value: t,
@@ -658,9 +662,9 @@
         }
         return e;
     }
-    function ke(e, r) {
+    function je(e, r) {
         if (e == null) return {};
-        var t = je(e, r);
+        var t = Ce(e, r);
         var n, o;
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
@@ -673,7 +677,7 @@
         }
         return t;
     }
-    function je(e, r) {
+    function Ce(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
@@ -685,7 +689,7 @@
         }
         return t;
     }
-    var Ce = {
+    var Pe = {
         children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
         /** @private */
@@ -702,16 +706,16 @@
         value: i().any,
         tag: i().oneOf([ "article", "div", "aside", "section" ])
     };
-    var Pe = {
+    var _e = {
         openInNewContext: false,
         showBorder: true
     };
-    function _e(e) {
+    function Ee(e) {
         return !!e.onClick || !!e.to;
     }
-    function Ee(e) {
-        var r = e.margin, t = e.maxWidth, n = e.minWidth, o = e.showBorder, i = e.style, a = ke(e, [ "margin", "maxWidth", "minWidth", "showBorder", "style" ]);
-        var l = xe({
+    function Te(e) {
+        var r = e.margin, t = e.maxWidth, n = e.minWidth, o = e.showBorder, i = e.style, a = je(e, [ "margin", "maxWidth", "minWidth", "showBorder", "style" ]);
+        var l = Se({
             minWidth: n,
             maxWidth: t,
             margin: r
@@ -723,17 +727,17 @@
         };
         return [ c, a ];
     }
-    var Te =  function(e) {
-        be(t, e);
-        var r = ye(t);
+    var Be =  function(e) {
+        ve(t, e);
+        var r = me(t);
         function t() {
             var e;
-            pe(this, t);
+            de(this, t);
             for (var n = arguments.length, o = new Array(n), i = 0; i < n; i++) {
                 o[i] = arguments[i];
             }
             e = r.call.apply(r, [ this ].concat(o));
-            Se(he(e), "handleCardClick", (function(r) {
+            ke(ge(e), "handleCardClick", (function(r) {
                 var t, n;
                 var o = e.props, i = o.selected, a = o.value;
                 (t = (n = e.props).onClick) === null || t === void 0 ? void 0 : t.call(n, r, {
@@ -743,15 +747,15 @@
             }));
             return e;
         }
-        fe(t, [ {
+        be(t, [ {
             key: "render",
             value: function e() {
-                if (_e(this.props)) {
-                    var r = Ee(this.props), t = ie(r, 2), o = t[0], i = t[1];
+                if (Ee(this.props)) {
+                    var r = Te(this.props), t = ae(r, 2), o = t[0], i = t[1];
                     var a = o.showBorder;
-                    var l = i.children, c = i.elementRef, s = i.onClick, u = i.openInNewContext, p = i.selected, d = i.to, f = ke(i, [ "children", "elementRef", "onClick", "openInNewContext", "selected", "to" ]);
+                    var l = i.children, c = i.elementRef, s = i.onClick, u = i.openInNewContext, p = i.selected, d = i.to, f = je(i, [ "children", "elementRef", "onClick", "openInNewContext", "selected", "to" ]);
                     
-                    return n().createElement(re, oe({
+                    return n().createElement(te, ie({
                         "data-clickable": true,
                         $selected: p || false,
                         $cardHasBorder: a,
@@ -760,13 +764,13 @@
                         onClick: s ? this.handleCardClick : undefined,
                         openInNewContext: u,
                         to: d || undefined
-                    }),  n().createElement(te, null, l));
+                    }),  n().createElement(ne, null, l));
                 }
-                var b = Ee(this.props), v = ie(b, 2), y = v[0], m = v[1];
+                var b = Te(this.props), v = ae(b, 2), y = v[0], m = v[1];
                 var h = y.showBorder;
-                var g = m.children, w = m.elementRef, O = m.tag, x = ke(m, [ "children", "elementRef", "tag" ]);
+                var g = m.children, w = m.elementRef, O = m.tag, x = je(m, [ "children", "elementRef", "tag" ]);
                 
-                return n().createElement(ee, oe({
+                return n().createElement(re, ie({
                     $selected: false,
                     $cardHasBorder: h,
                     ref: w,
@@ -778,12 +782,12 @@
         } ]);
         return t;
     }(t.Component);
-    Se(Te, "propTypes", Ce);
-    Se(Te, "defaultProps", Pe);
-    Se(Te, "Header", Q);
-    Se(Te, "Body", m);
-    Se(Te, "Footer", k);
-    /* harmony default export */    const Be = Te;
+    ke(Be, "propTypes", Pe);
+    ke(Be, "defaultProps", _e);
+    ke(Be, "Header", Q);
+    ke(Be, "Body", m);
+    ke(Be, "Footer", k);
+    /* harmony default export */    const Re = Be;
     // CONCATENATED MODULE: ./src/Card/index.ts
     module.exports = r;
     /******/})();