@splunk/react-ui 4.33.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

@@ -85,7 +85,7 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const m = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Button/ButtonStyles.ts
-    var v = u().span.withConfig({
+    var y = u().span.withConfig({
         displayName: "ButtonStyles__StyledIcon",
         componentId: "eqxqs2-0"
     })([ "display:flex;align-items:center;flex-shrink:0;font-size:", ";", "" ], (0, 
@@ -101,10 +101,10 @@
             prisma: (0, p.css)([ "padding-right:8px;" ])
         }
     }));
-    var y = u()(d()).withConfig({
+    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",
@@ -125,15 +125,15 @@
         return !t && !n && !r && (0, p.css)([ "width:100%;" ]);
     }), (function(e) {
         var t = e.$isIconOnly;
-        return t && (0, p.css)([ "box-sizing:border-box;padding:", ";width:", ";min-width:", ";" ], (0, 
+        return t && (0, p.css)([ "box-sizing:border-box;", ";width:", ";min-width:", ";" ], (0, 
         m.pick)({
             enterprise: {
-                comfortable: "0 5px",
-                compact: "0 2px"
+                comfortable: (0, p.css)([ "padding:0 5px;" ]),
+                compact: (0, p.css)([ "padding:0 2px;" ])
             },
             prisma: {
-                comfortable: (0, p.css)([ "0px calc(", " / 2 - 1px)" ], m.variables.inputHeight),
-                compact: (0, p.css)([ "0px calc(", " / 2 - 1px)" ], m.variables.inputHeight)
+                comfortable: (0, p.css)([ "padding:0 calc(", " / 2 - 1px);" ], m.variables.inputHeight),
+                compact: (0, p.css)([ "padding:0 calc(", " / 2 - 1px);" ], m.variables.inputHeight)
             }
         }), m.variables.inputHeight, m.variables.inputHeight);
     }), (function(e) {
@@ -141,10 +141,7 @@
         return t ? null : (0, p.css)([ "width:auto;" ]);
     }), (function(e) {
         var t = e.prepend;
-        return !t && (0, p.css)([ "margin-left:", ";" ], (0, m.pick)({
-            enterprise: m.variables.spacingHalf,
-            prisma: m.variables.spacingSmall
-        }));
+        return !t && (0, p.css)([ "margin-left:", ";" ], m.variables.spacingSmall);
     }));
     var b = u().span.withConfig({
         displayName: "ButtonStyles__StyledContentWrapper",
@@ -201,9 +198,9 @@
                 true: (0, p.css)([ "color:", ";" ], m.variables.contentColorInverted),
                 false: (0, p.css)([ "color:", ";", ":hover > * > &,", ":active > * > &,{color:", ";}" ], m.variables.contentColorDefault, 
                 /* sc-sel */
-                y, 
+                v, 
                 /* sc-sel */
-                y, m.variables.contentColorDefault)
+                v, m.variables.contentColorDefault)
             })
         }
     }));
@@ -211,13 +208,13 @@
     const g = require("@splunk/react-icons/CaretSmallDown");
     var w =  e.n(g);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Caret"
-    const k = require("@splunk/react-icons/enterprise/Caret");
-    var S =  e.n(k);
+    const S = require("@splunk/react-icons/enterprise/Caret");
+    var k =  e.n(S);
     // CONCATENATED MODULE: ./src/Button/icons/CaretSmallDown.tsx
     var O = function e() {
         var t = (0, m.useSplunkTheme)(), n = t.isEnterprise, i = t.isCompact;
         var a = i ? "20px" : "24px";
-        return n ?  r().createElement(S(), {
+        return n ?  r().createElement(k(), {
             screenReaderText: null,
             hideDefaultTooltip: true,
             size: .5
@@ -435,16 +432,16 @@
         }, {
             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, k = t.prepend, S = t.to, O = t.value;
+                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()($)) {
                     _ = $;
                     $ = null;
                 }
                 var I = !!(f && !_ && !m && !$);
-                var E = S && w || m || !!f;
+                var E = k && w || m || !!f;
                 
-                return r().createElement(y, T({
+                return r().createElement(v, T({
                     "aria-haspopup": m || undefined,
                     "aria-invalid": u || undefined,
                     "data-test": "button"
@@ -454,7 +451,7 @@
                     "data-inline": d || null,
                     disabled: p,
                     append: a,
-                    prepend: k,
+                    prepend: S,
                     $inline: d,
                     $hasPrismaIcon: E,
                     $isIconOnly: I,
@@ -467,7 +464,7 @@
                 }),  r().createElement(b, {
                     $appearance: i,
                     $error: u
-                }, f &&  r().createElement(v, {
+                }, f &&  r().createElement(y, {
                     $isStartIcon: !I
                 }, f), _ &&  r().createElement(h, {
                     "data-test": "label",
@@ -475,7 +472,7 @@
                 }, _), $, m &&  r().createElement(x, {
                     $disabled: p,
                     $primary: i === "primary"
-                },  r().createElement(C, null)), w &&  r().createElement(v, {
+                },  r().createElement(C, null)), w &&  r().createElement(y, {
                     $isStartIcon: false
                 },  r().createElement(N, null))));
             }

package/ButtonGroup.js

@@ -68,23 +68,20 @@
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
-    var i =  e.n(o);
+    var l =  e.n(o);
     // CONCATENATED MODULE: external "styled-components"
-    const a = require("styled-components");
-    var l =  e.n(a);
+    const i = require("styled-components");
+    var a =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
     const u = require("@splunk/react-ui/Box");
     var p =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/themes"
     const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ButtonGroup/ButtonGroupStyles.ts
-    var s = l()(p()).withConfig({
+    var s = a()(p()).withConfig({
         displayName: "ButtonGroupStyles__StyledBox",
         componentId: "sc-14fs2xs-0"
-    })([ "position:relative;[data-inline] + &{margin-left:", ";}" ], (0, c.pick)({
-        enterprise: c.variables.spacingHalf,
-        prisma: c.variables.spacingSmall
-    }));
+    })([ "position:relative;[data-inline] + &{margin-left:", ";}" ], c.variables.spacingSmall);
     // CONCATENATED MODULE: ./src/ButtonGroup/ButtonGroup.tsx
     function f() {
         f = Object.assign || function(e) {
@@ -102,12 +99,12 @@
     }
     function d(e, r) {
         if (e == null) return {};
-        var t = v(e, r);
+        var t = y(e, r);
         var n, o;
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < i.length; o++) {
-                n = i[o];
+            var l = Object.getOwnPropertySymbols(e);
+            for (o = 0; o < l.length; o++) {
+                n = l[o];
                 if (r.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 t[n] = e[n];
@@ -115,28 +112,28 @@
         }
         return t;
     }
-    function v(e, r) {
+    function y(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
-        var o, i;
-        for (i = 0; i < n.length; i++) {
-            o = n[i];
+        var o, l;
+        for (l = 0; l < n.length; l++) {
+            o = n[l];
             if (r.indexOf(o) >= 0) continue;
             t[o] = e[o];
         }
         return t;
     }
-    var y = {
-        children: i().node,
-        elementRef: i().oneOfType([ i().func, i().object ]),
+    var v = {
+        children: l().node,
+        elementRef: l().oneOfType([ l().func, l().object ]),
         /** @private */
-        flex: i().bool
+        flex: l().bool
     };
     function b(e) {
         var r = e.children, o = d(e, [ "children" ]);
         // @docs-props-type ButtonGroupPropsBase
-                var i = t.Children.toArray(r).filter(t.isValidElement).map((function(e, r, n) {
+                var l = t.Children.toArray(r).filter(t.isValidElement).map((function(e, r, n) {
             var o = n.length;
             
             return (0, t.cloneElement)(e, {
@@ -152,9 +149,9 @@
             flex: true,
             "data-test": "button-group",
             role: "menubar"
-        }, o), i);
+        }, o), l);
     }
-    b.propTypes = y;
+    b.propTypes = v;
     /* harmony default export */    const m = b;
     // CONCATENATED MODULE: ./src/ButtonGroup/index.ts
     module.exports = r;

package/ButtonSimple.js

@@ -263,7 +263,7 @@
         var t = b()(i, o), s = t.background, c = t.backgroundActive, d = t.backgroundDisabled, v = t.backgroundDisabledSelected, f = t.backgroundHover, g = t.backgroundSelected, y = t.borderColor, k = t.borderColorDisabled, m = t.color, C = t.colorDisabled;
         var x = s != null && s !== "transparent";
         return function() {
-            return (0, n.css)([ "border-radius:", ";", ";", " ", " cursor:pointer;position:relative;&:focus,&:hover{z-index:3;}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";}&:active{background-color:", ";transition:none;}", "}&:focus{box-shadow:", ";}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";cursor:not-allowed;", "}" ], l.variables.borderRadius, (function() {
+            return (0, n.css)([ "border-radius:", ";", ";", " ", " cursor:pointer;position:relative;&:focus,&:hover{z-index:3;}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";}&:active{background-color:", ";transition:none;}", "}&:not([disabled]){&:focus{box-shadow:", ";}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";cursor:not-allowed;", "}" ], l.variables.borderRadius, (function() {
                 return y && (0, n.css)([ "border:1px solid ", ";" ], y);
             }), (function(r) {
                 var e = r.$append;
@@ -282,8 +282,18 @@
     }
     /* harmony default export */    const m = k;
     // CONCATENATED MODULE: ./src/ButtonSimple/prismaStyles.ts
-    var C = (0, n.css)([ "", " &:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{border-color:", ";", "}", " ", "}&[disabled],&[aria-disabled='true']{", "}" ], (0, 
+    var C = (0, n.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{border-color:", ";", "}", " ", "}", " &[disabled],&[aria-disabled='true']{", "}" ], l.variables.interactiveColorOverlayHover, l.variables.interactiveColorBorderHover, (0, 
     l.pickVariant)("$variant", {
+        secondary: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow),
+        default: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow),
+        subtle: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow)
+    }), (function(r) {
+        var e = r.$selected;
+        return e && (0, n.css)([ "border-color:", ";&:hover{background-color:", ";}" ], l.variables.interactiveColorBorderDisabled, l.mixins.overlayColors(l.variables.interactiveColorOverlaySelected, l.variables.interactiveColorOverlayHover));
+    }), (function(r) {
+        var e = r.$error;
+        return e && (0, n.css)([ "border-color:", ";&:hover{border-color:", ";}" ], l.variables.accentColorNegative, l.variables.accentColorNegative);
+    }), (0, l.pickVariant)("$variant", {
         secondary: (0, n.css)([ "", " font-weight:", ";" ], m("subtle", {
             color: l.variables.contentColorActive
         }), l.variables.fontWeightSemiBold),
@@ -296,23 +306,16 @@
         toggle: (0, n.css)([ "", " font-weight:normal;" ], m("secondary", {
             background: "transparent"
         }))
-    }), l.variables.interactiveColorOverlayHover, l.variables.interactiveColorBorderHover, (0, 
-    l.pickVariant)("$variant", {
-        secondary: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow),
-        default: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow),
-        subtle: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow)
-    }), (function(r) {
-        var e = r.$selected;
-        return e && (0, n.css)([ "border-color:", ";&:hover{background-color:", ";}" ], l.variables.interactiveColorBorderDisabled, l.mixins.overlayColors(l.variables.interactiveColorOverlaySelected, l.variables.interactiveColorOverlayHover));
-    }), (function(r) {
-        var e = r.$error;
-        return e && (0, n.css)([ "border-color:", ";&:hover{border-color:", ";}" ], l.variables.accentColorNegative, l.variables.accentColorNegative);
     }), (function(r) {
         var e = r.$selected;
         return e && (0, n.css)([ "background-color:", ";" ], l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected));
     }));
-    var x = (0, n.css)([ "", " font-weight:", ";&:focus{background-color:", ";}&:hover{box-shadow:", ";}" ], (0, 
+    var x = (0, n.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{box-shadow:", ";}}", " font-weight:", ";" ], (0, 
     l.pickVariant)("$variant", {
+        primary: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayHover),
+        destructive: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayHover),
+        flat: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover)
+    }), l.variables.hoverShadow, (0, l.pickVariant)("$variant", {
         primary: m("primary"),
         destructive: m("destructive"),
         flat: m({
@@ -323,11 +326,7 @@
             backgroundHover: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover),
             backgroundSelected: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlaySelected)
         })
-    }), l.variables.fontWeightSemiBold, (0, l.pickVariant)("$variant", {
-        primary: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayHover),
-        destructive: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayHover),
-        flat: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover)
-    }), l.variables.hoverShadow);
+    }), l.variables.fontWeightSemiBold);
     // CONCATENATED MODULE: ./src/ButtonSimple/enterpriseStyles.ts
     var w = "#1A8929";
  // SUI-2439 to meet WCAG AA compliance
@@ -343,10 +342,10 @@
     }));
     var D = "inset 0 -1px 0 rgba(0, 0, 0, 0.1)";
     var P = "inset 0 1px 0 rgba(0, 0, 0, 0.1)";
-    var j = (0, n.css)([ "", ";border:", ";", ";font-weight:", ";&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", ";", " &:hover{background-color:", ";box-shadow:", ";}&:active{transition:none;background-color:", ";border-color:", ";", ";}&:focus{", " ", "}}&:not([disabled]){&:focus{box-shadow:", ",", ";}}&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";background-color:", ";border-color:", ";", "}" ], O, (0, 
+    var j = (0, n.css)([ "", ";border:1px solid;border-color:", ";", ";font-weight:", ";&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", ";", " &:hover{background-color:", ";", ";}&:active{transition:none;background-color:", ";border-color:", ";", ";}&:focus{", " ", "}}&:not([disabled]){&:focus{", "}}&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";background-color:", ";border-color:", ";", "}" ], O, (0, 
     l.pick)({
-        light: (0, n.css)([ "1px solid ", "" ], l.variables.gray60),
-        dark: l.variables.border
+        light: l.variables.gray60,
+        dark: l.variables.borderColor
     }), $, (0, l.pickVariant)("$variant", {
         default: "normal",
         secondary: l.variables.fontWeightSemiBold
@@ -361,10 +360,10 @@
         dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray30)
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], (0, 
+        return e && (0, n.css)([ "", ";background-color:", ";border-color:", ";" ], (0, 
         l.pick)({
-            light: P,
-            dark: (0, n.css)([ "inset 0 1px 0 ", "" ], l.variables.black)
+            light: (0, n.css)([ "box-shadow:", ";" ], P),
+            dark: (0, n.css)([ "box-shadow:inset 0 1px 0 ", ";" ], l.variables.black)
         }), (0, l.pick)({
             light: l.variables.gray92,
             dark: l.variables.gray22
@@ -376,8 +375,8 @@
         light: "#ebeeef",
         dark: l.variables.gray30
     }), (0, l.pick)({
-        light: D,
-        dark: (0, n.css)([ "inset 0 -1px 0 ", "" ], l.variables.gray25)
+        light: (0, n.css)([ "box-shadow:", ";" ], D),
+        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray25)
     }), (0, l.pick)({
         light: l.variables.gray92,
         dark: l.variables.gray22
@@ -388,10 +387,10 @@
         dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray22)
     }), (function(r) {
         var e = r.$append;
-        return e && (0, n.css)([ "box-shadow:", ",", ",inset -1px 0 0 ", ";" ], (0, l.pick)({
-            light: D,
-            dark: (0, n.css)([ "inset 0 -1px 0 ", "" ], l.variables.gray30)
-        }), l.variables.focusShadow, l.variables.borderColor);
+        return e && (0, l.pick)({
+            light: (0, n.css)([ "box-shadow:", " ", ",inset -1px 0 0 ", ";" ], D, l.variables.focusShadow, l.variables.borderColor),
+            dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", " ", ",inset -1px 0 0 ", ";" ], l.variables.gray30, l.variables.focusShadow, l.variables.borderColor)
+        });
     }), (function(r) {
         var e = r.$append, a = r.$selected;
         return e && a && (0, l.pick)({
@@ -399,9 +398,9 @@
             dark: (0, n.css)([ "box-shadow:inset 0 1px 0 ", ",", ",inset -1px 0 0 ", ";" ], l.variables.black, l.variables.focusShadow, l.variables.borderColor)
         });
     }), (0, l.pick)({
-        light: D,
-        dark: (0, n.css)([ "inset 0 -1px 0 ", "" ], l.variables.gray30)
-    }), l.variables.focusShadow, l.variables.textDisabledColor, (0, l.pick)({
+        light: (0, n.css)([ "box-shadow:", ",", ";" ], D, l.variables.focusShadow),
+        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ",", ";" ], l.variables.gray30, l.variables.focusShadow)
+    }), l.variables.textDisabledColor, (0, l.pick)({
         light: l.variables.gray96,
         dark: l.variables.gray30
     }), (0, l.pick)({

package/CHANGELOG.md

@@ -1,6 +1,60 @@
 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:
+* `RadioBar` supports new prop `role` for either `radiogroup` (default) or `menubar` (SUI-6335).
+* `CollapsiblePanel` has a new `actions` prop for rendering the toggle button and interactive elements separate from `title`, reserving the `title` prop for text only (SUI-5999).
+    * If using the new `actions` prop, the toggle button supports `aria-labelledby` with the title and the panel body supports `role='region'`.
+* `Select` now supports `appearance="subtle"` with the same visual appearance as the Enterprise `"pill"` and Prisma `"secondary"` appearances (SUI-6440).
+* `Card` has a new `actions` prop for rendering card actions. This should be used to add unambiguous labels to the secondary actions, see the migration guide for details (SUI-5881).
+* `Card` has a new `tag` prop for overriding the default HTML tag (SUI-5881).
+
+Bug Fixes:
+* `CollapsiblePanel` now correctly announces its expanded state to a11y tools in Firefox (SUI-5999).
+* `RadioBar` no longer warns about the deprecated `appearance` prop when the default value is used.
+* `Button` now shows focus styling when hovered (SUI-6357).
+* `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 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).
+* `Card` uses the `article` tag instead of `div` by default (SUI-5881).
+* `Menu` no longer takes focus when all `Menu.Item` children are disabled (SUI-6268).
+* `Color`'s textbox swatch in the popover palette is now focusable in Enterprise themes (SUI-6401).
+* `Menu`s last `Item` no longer has an incorrect border radius on hover when a `footerMessage` is set (SUI-6450).
+
+Deprecations:
+* `CollapsiblePanel`'s `titleWithActions` prop has been deprecated and will be removed in the next major version. Use the new `actions` prop instead to render the toggle button and interactive elements separate from `title` (SUI-5999).
+* `Select`'s `"flat"`, `"pill"`, and `"toggle"` values of the `appearance` prop have been deprecated and will be removed in the next major version. See the migration guide for details (SUI-6440).
+
 4.33.0 - July 8, 2024
 ----------
 New Features:
@@ -9,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.
@@ -17,6 +71,7 @@ Bug Fixes:
 * `Button`'s text is now centered correctly when combining the `icon` and `to` props (SUI-6331).
 * `Button`'s external icon now has the same size as an icon rendered by the `icon` prop (SUI-6255).
 * `Select` now constructs `aria-label` out of the `Option`-s `label`s rather than `children` (SUI-6316).
+* `Search` now allows provided `aria-label` value to override the default `aria-label` value (SUI-6332).
 
 Deprecations:
 * `Button`'s `"flat"`, `"pill"`, and `"toggle"` values of the `appearance` prop have been deprecated and will be removed in the next major version (SUI-6501).