@splunk/react-ui 4.39.0 → 4.40.0

package/MIGRATION.mdx

@@ -5,6 +5,24 @@ import Table from '@splunk/react-ui/Table';
 
 This document lists migration guidance for new features and breaking changes.
 
+## 4.40.0
+
+### Deprecated `Select`'s `appearance="primary"` value
+
+#### Change
+
+`Select`'s `appearance="primary"` value has been deprecated and will be removed in the next major version.
+
+#### Context
+
+The `primary` appearance is no longer supported as primary actions are generally intended for tasks like submitting a form or page, whereas `Select` should be used to make a choice that then gets submitted with a primary `Button`. 
+Including both a primary `Select` and `Button` conflicts with the visual importance and hierarchy of the page.
+
+#### Migration steps
+
+* If `Select` was being used as a primary action but there are some variants for how that primary action works (e.g. Save vs. Save As), use `SplitButton`.
+* Otherwise use `Select` with the `default` appearance paired with a primary `Button` to submit.
+
 ## 4.39.0
 
 ### Deprecated `TabBar` and `TabLayout`'s `appearance` prop
@@ -719,3 +737,16 @@ The `size` prop currently does not do anything in `ComboBox`, `ControlGroup`, or
 
 Remove all usage of `ComboBox`, `ControlGroup`, and `StaticContent`'s `size` prop. To change the size of components, use the `SplunkThemeProvider`'s `density` prop.
 
+## 4.39.0
+
+### Deprecated `Menu.Item`'s `icon` prop
+
+#### Change
+`Menu.Item`'s `icon` prop is deprecated and will be removed in a future major version.
+
+#### Context
+The `Menu.Item` icon should not be used as `Menu.Item` as that restricted the location of the icon and it is now possible to place an adornment at the start or the end of the `Menu.Item` content.
+
+#### Migration steps
+Replace all usage of `Menu.Item`'s `icon` prop with `startAdornment` and/or `endAdornment`.
+

package/Message.js

@@ -62,7 +62,7 @@
     // EXPORTS
         e.d(r, {
         Link: () => /* reexport */ z,
-        default: () => /* reexport */ pe
+        default: () => /* reexport */ ue
     });
     // CONCATENATED MODULE: external "react"
     const a = require("react");
@@ -84,10 +84,10 @@
     var d =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
     const b = require("@splunk/react-icons/InformationCircle");
-    var g =  e.n(b);
+    var f =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationTriangle"
-    const f = require("@splunk/react-icons/ExclamationTriangle");
-    var m =  e.n(f);
+    const g = require("@splunk/react-icons/ExclamationTriangle");
+    var m =  e.n(g);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Error"
     const y = require("@splunk/react-icons/enterprise/Error");
     var k =  e.n(y);
@@ -102,12 +102,12 @@
     var O =  e.n(S);
     // CONCATENATED MODULE: external "@splunk/react-ui/MessageBar"
     const q = require("@splunk/react-ui/MessageBar");
-    var P =  e.n(q);
+    var _ =  e.n(q);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const _ = require("@splunk/react-ui/ScreenReaderContent");
-    var j =  e.n(_);
+    const E = require("@splunk/react-ui/ScreenReaderContent");
+    var P =  e.n(E);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const E = require("@splunk/themes");
+    const j = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const I = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
@@ -173,142 +173,146 @@
     var F = T().p.withConfig({
         displayName: "TitleStyles__StyledTitle",
         componentId: "sc-6gbjha-0"
-    })([ "", " ", "" ], E.mixins.reset("block"), (0, E.pick)({
+    })([ "", " ", "" ], j.mixins.reset("block"), (0, j.pick)({
         prisma: (0, R.css)([ "font-size:14px;line-height:20px;" ])
     }));
     // CONCATENATED MODULE: ./src/Message/MessageStyles.ts
     var G = T().div.withConfig({
         displayName: "MessageStyles__StyledContent",
         componentId: "eg66af-0"
-    })([ "display:flex;align-items:baseline;flex:1;", ";", " ", ";" ], (0, E.pick)({
-        prisma: (0, R.css)([ "padding:", " 0;color:", ";" ], E.variables.spacingMedium, E.variables.contentColorActive),
+    })([ "width:100%;", ";", " ", ";" ], (0, j.pick)({
+        prisma: (0, R.css)([ "padding:", " 0;color:", ";" ], j.variables.spacingMedium, j.variables.contentColorActive),
         enterprise: (0, R.css)([ "padding:12px 0;" ])
-    }), (0, E.pick)({
-        prisma: (0, R.css)([ "padding-left:", ";" ], E.variables.spacingXSmall),
+    }), (0, j.pick)({
+        prisma: (0, R.css)([ "padding-left:", ";" ], j.variables.spacingXSmall),
         enterprise: (0, R.css)([ "padding-left:15px;" ])
     }), (function(e) {
         var r = e.$fillStyle;
-        return r && (0, E.pick)({
-            prisma: (0, R.css)([ "padding-left:", ";" ], E.variables.spacingMedium)
+        return r && (0, j.pick)({
+            prisma: (0, R.css)([ "padding-left:", ";" ], j.variables.spacingMedium)
         });
     }));
-    var J = T()(H()).withConfig({
-        displayName: "MessageStyles__StyledRemove",
+    var J = T().div.withConfig({
+        displayName: "MessageStyles__StyledWrapper",
         componentId: "eg66af-1"
-    })([ "", ";border:1px solid transparent;border-radius:", ";color:", ";", ";cursor:pointer;position:absolute;", " padding:8px;&:hover,&:focus{background:", ";color:", ";}&:active{", ";}", "" ], E.mixins.reset("flex"), (0, 
-    E.pick)({
+    })([ "display:flex;align-items:baseline;flex:1;" ]);
+    var K = T()(H()).withConfig({
+        displayName: "MessageStyles__StyledRemove",
+        componentId: "eg66af-2"
+    })([ "", ";border:1px solid transparent;border-radius:", ";color:", ";", ";cursor:pointer;position:absolute;", " padding:8px;&:hover,&:focus{background:", ";color:", ";}&:active{", ";}", "" ], j.mixins.reset("flex"), (0, 
+    j.pick)({
         prisma: "50%",
-        enterprise: E.variables.borderRadius
-    }), (0, E.pick)({
-        prisma: E.variables.contentColorMuted,
+        enterprise: j.variables.borderRadius
+    }), (0, j.pick)({
+        prisma: j.variables.contentColorMuted,
         enterprise: {
-            dark: E.variables.gray96,
-            light: E.variables.gray45
+            dark: j.variables.gray96,
+            light: j.variables.gray45
         }
     }), (function(e) {
         var r = e.$appearance;
-        return r === "banner" && (0, E.pick)({
-            prisma: (0, R.css)([ "color:", ";" ], E.variables.contentColorInverted)
+        return r === "banner" && (0, j.pick)({
+            prisma: (0, R.css)([ "color:", ";" ], j.variables.contentColorInverted)
         });
-    }), (0, E.pick)({
+    }), (0, j.pick)({
         prisma: (0, R.css)([ "top:3px;right:2px;" ]),
         enterprise: (0, R.css)([ "top:8px;right:8px;" ])
-    }), (0, E.pick)({
-        prisma: E.variables.interactiveColorOverlayHover,
+    }), (0, j.pick)({
+        prisma: j.variables.interactiveColorOverlayHover,
         enterprise: {
-            dark: E.variables.gray30,
-            light: E.variables.gray92
+            dark: j.variables.gray30,
+            light: j.variables.gray92
         }
-    }), (0, E.pick)({
+    }), (0, j.pick)({
         enterprise: {
-            dark: E.variables.gray96,
-            light: E.variables.linkColor
+            dark: j.variables.gray96,
+            light: j.variables.linkColor
         },
-        prisma: E.variables.contentColorActive
-    }), (0, E.pick)({
-        prisma: (0, R.css)([ "background:", ";" ], E.variables.interactiveColorOverlayActive),
-        enterprise: (0, R.css)([ "box-shadow:", ";" ], E.variables.focusShadow)
-    }), (0, E.pick)({
-        prisma: (0, R.css)([ "&:focus{box-shadow:0 0 0 3px ", ";}" ], E.variables.focusColor)
+        prisma: j.variables.contentColorActive
+    }), (0, j.pick)({
+        prisma: (0, R.css)([ "background:", ";" ], j.variables.interactiveColorOverlayActive),
+        enterprise: (0, R.css)([ "box-shadow:", ";" ], j.variables.focusShadow)
+    }), (0, j.pick)({
+        prisma: (0, R.css)([ "&:focus{box-shadow:0 0 0 3px ", ";}" ], j.variables.focusColor)
     }));
-    var K = T().span.withConfig({
+    var Q = T().span.withConfig({
         displayName: "MessageStyles__StyledIconWrapper",
-        componentId: "eg66af-2"
+        componentId: "eg66af-3"
     })([ "position:relative;min-width:", ";text-align:center;color:", ";", " ", "" ], (0, 
-    E.pick)({
-        prisma: E.variables.spacingXLarge,
+    j.pick)({
+        prisma: j.variables.spacingXLarge,
         enterprise: "25px"
-    }), E.variables.white, (0, E.pick)({
+    }), j.variables.white, (0, j.pick)({
         enterprise: (0, R.css)([ "top:-2px;" ]),
         prisma: (0, R.css)([ "top:-1.8px;" ])
-    }), (0, E.pickVariant)("$type", {
-        info: (0, R.css)([ "color:", ";" ], (0, E.pick)({
-            prisma: E.variables.contentColorMuted,
-            enterprise: E.variables.infoColor
+    }), (0, j.pickVariant)("$type", {
+        info: (0, R.css)([ "color:", ";" ], (0, j.pick)({
+            prisma: j.variables.contentColorMuted,
+            enterprise: j.variables.infoColor
         })),
-        success: (0, R.css)([ "color:", ";" ], E.variables.accentColorPositive),
-        warning: (0, R.css)([ "color:", ";" ], E.variables.accentColorWarning),
-        error: (0, R.css)([ "color:", ";" ], E.variables.accentColorNegative)
+        success: (0, R.css)([ "color:", ";" ], j.variables.accentColorPositive),
+        warning: (0, R.css)([ "color:", ";" ], j.variables.accentColorWarning),
+        error: (0, R.css)([ "color:", ";" ], j.variables.accentColorNegative)
     }));
-    var Q = T()(B()).withConfig({
+    var U = T()(B()).withConfig({
         displayName: "MessageStyles__StyledBox",
-        componentId: "eg66af-3"
-    })([ "", ";align-items:baseline;position:relative;border-radius:", ";margin-bottom:", ";", " word-wrap:break-word;", " ", "" ], E.mixins.reset("flex"), (0, 
-    E.pick)({
-        prisma: E.variables.borderRadius,
+        componentId: "eg66af-4"
+    })([ "", ";align-items:baseline;position:relative;border-radius:", ";margin-bottom:", ";", " word-wrap:break-word;", " ", "" ], j.mixins.reset("flex"), (0, 
+    j.pick)({
+        prisma: j.variables.borderRadius,
         enterprise: "5px"
-    }), E.variables.spacingSmall, (0, E.pickVariant)("$hasRemoveIcon", {
+    }), j.variables.spacingSmall, (0, j.pickVariant)("$hasRemoveIcon", {
         true: {
-            prisma: (0, R.css)([ "padding-right:", ";" ], E.variables.spacingXXXLarge),
-            enterprise: (0, R.css)([ "padding-right:", ";" ], E.variables.spacingXXLarge)
+            prisma: (0, R.css)([ "padding-right:", ";" ], j.variables.spacingXXXLarge),
+            enterprise: (0, R.css)([ "padding-right:", ";" ], j.variables.spacingXXLarge)
         },
-        false: (0, R.css)([ "padding-right:", ";" ], E.variables.spacingSmall)
+        false: (0, R.css)([ "padding-right:", ";" ], j.variables.spacingSmall)
     }), (function(e) {
         var r = e.$fillStyle;
-        return r && (0, E.pick)({
-            enterprise: (0, R.css)([ "& > ", "{left:", ";}", "" ], /* sc-sel */ K, E.variables.spacingXSmall, (0, 
-            E.pickVariant)("$type", {
-                info: (0, R.css)([ "", "" ], (0, E.pick)({
-                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], E.variables.infoColorL50, E.variables.infoColor),
-                    dark: (0, R.css)([ "background-color:", ";" ], E.mixins.colorWithAlpha(E.variables.infoColor, .5))
+        return r && (0, j.pick)({
+            enterprise: (0, R.css)([ "& > ", "{left:", ";}", "" ], /* sc-sel */ Q, j.variables.spacingXSmall, (0, 
+            j.pickVariant)("$type", {
+                info: (0, R.css)([ "", "" ], (0, j.pick)({
+                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], j.variables.infoColorL50, j.variables.infoColor),
+                    dark: (0, R.css)([ "background-color:", ";" ], j.mixins.colorWithAlpha(j.variables.infoColor, .5))
                 })),
-                success: (0, R.css)([ "", "" ], (0, E.pick)({
-                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], E.variables.successColorL50, E.variables.successColor),
-                    dark: (0, R.css)([ "background-color:", ";" ], E.mixins.colorWithAlpha(E.variables.successColor, .5))
+                success: (0, R.css)([ "", "" ], (0, j.pick)({
+                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], j.variables.successColorL50, j.variables.successColor),
+                    dark: (0, R.css)([ "background-color:", ";" ], j.mixins.colorWithAlpha(j.variables.successColor, .5))
                 })),
-                warning: (0, R.css)([ "", "" ], (0, E.pick)({
-                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], E.variables.warningColorL50, E.variables.warningColor),
-                    dark: (0, R.css)([ "background-color:", ";" ], E.mixins.colorWithAlpha(E.variables.warningColor, .5))
+                warning: (0, R.css)([ "", "" ], (0, j.pick)({
+                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], j.variables.warningColorL50, j.variables.warningColor),
+                    dark: (0, R.css)([ "background-color:", ";" ], j.mixins.colorWithAlpha(j.variables.warningColor, .5))
                 })),
-                error: (0, R.css)([ "", "" ], (0, E.pick)({
-                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], E.variables.errorColorL50, E.variables.errorColor),
-                    dark: (0, R.css)([ "background-color:", ";" ], E.mixins.colorWithAlpha(E.variables.errorColor, .5))
+                error: (0, R.css)([ "", "" ], (0, j.pick)({
+                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], j.variables.errorColorL50, j.variables.errorColor),
+                    dark: (0, R.css)([ "background-color:", ";" ], j.mixins.colorWithAlpha(j.variables.errorColor, .5))
                 }))
             })),
             prisma: (0, R.css)([ "", ";box-shadow:", ";& > ", "{color:", ";}" ], (function(e) {
                 var r = e.$type;
                 var a = {
-                    info: E.variables.contentColorActive,
-                    success: E.variables.accentColorPositive,
-                    warning: E.variables.accentColorWarning,
-                    error: E.variables.accentColorNegative
+                    info: j.variables.contentColorActive,
+                    success: j.variables.accentColorPositive,
+                    warning: j.variables.accentColorWarning,
+                    error: j.variables.accentColorNegative
                 };
                 var n = a[r];
-                return (0, R.css)([ "background:linear-gradient( to right,", " 0,", " ", ",", " ", ",", " 100% );" ], n, n, E.variables.spacingXLarge, E.variables.backgroundColorPopup, E.variables.spacingXLarge, E.variables.backgroundColorPopup);
-            }), E.variables.embossShadow, /* sc-sel */ K, E.variables.backgroundColorPopup)
+                return (0, R.css)([ "background:linear-gradient( to right,", " 0,", " ", ",", " ", ",", " 100% );" ], n, n, j.variables.spacingXLarge, j.variables.backgroundColorPopup, j.variables.spacingXLarge, j.variables.backgroundColorPopup);
+            }), j.variables.embossShadow, /* sc-sel */ Q, j.variables.backgroundColorPopup)
         });
-    }), (0, E.pick)({
-        prisma: (0, R.css)([ "& ", "{color:", ";}" ], /* sc-sel */ F, (0, E.pickVariant)("$type", {
-            info: E.variables.contentColorActive,
-            warning: E.variables.accentColorWarning,
-            error: E.variables.accentColorNegative,
-            success: E.variables.accentColorPositive
+    }), (0, j.pick)({
+        prisma: (0, R.css)([ "& ", "{color:", ";}" ], /* sc-sel */ F, (0, j.pickVariant)("$type", {
+            info: j.variables.contentColorActive,
+            warning: j.variables.accentColorWarning,
+            error: j.variables.accentColorNegative,
+            success: j.variables.accentColorPositive
         }))
     }));
     // CONCATENATED MODULE: ./src/Message/Title.tsx
-    function U(e, r) {
+    function Y(e, r) {
         if (null == e) return {};
-        var a, n, i = Y(e, r);
+        var a, n, i = Z(e, r);
         if (Object.getOwnPropertySymbols) {
             var s = Object.getOwnPropertySymbols(e);
             for (n = 0; n < s.length; n++) {
@@ -317,7 +321,7 @@
         }
         return i;
     }
-    function Y(e, r) {
+    function Z(e, r) {
         if (null == e) return {};
         var a = {};
         for (var n in e) {
@@ -328,22 +332,22 @@
         }
         return a;
     }
-    var Z = {
+    var ee = {
         children: s().node
     };
     /**
  * A title component for use in `Message`.
- */    function ee(e) {
-        var r = e.children, a = U(e, [ "children" ]);
+ */    function re(e) {
+        var r = e.children, a = Y(e, [ "children" ]);
         // @docs-props-type TitleProps
                 
         return n().createElement(F, a, r);
     }
-    ee.propTypes = Z;
-    /* harmony default export */    const re = ee;
+    re.propTypes = ee;
+    /* harmony default export */    const ae = re;
     // CONCATENATED MODULE: ./src/Message/Message.tsx
-    function ae() {
-        return ae = Object.assign ? Object.assign.bind() : function(e) {
+    function ne() {
+        return ne = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var a = arguments[r];
                 for (var n in a) {
@@ -351,11 +355,11 @@
                 }
             }
             return e;
-        }, ae.apply(null, arguments);
+        }, ne.apply(null, arguments);
     }
-    function ne(e, r) {
+    function ie(e, r) {
         if (null == e) return {};
-        var a, n, i = ie(e, r);
+        var a, n, i = se(e, r);
         if (Object.getOwnPropertySymbols) {
             var s = Object.getOwnPropertySymbols(e);
             for (n = 0; n < s.length; n++) {
@@ -364,7 +368,7 @@
         }
         return i;
     }
-    function ie(e, r) {
+    function se(e, r) {
         if (null == e) return {};
         var a = {};
         for (var n in e) {
@@ -375,35 +379,35 @@
         }
         return a;
     }
-    var se = {
+    var oe = {
         appearance: s().oneOf([ "default", "fill", "banner" ]),
         children: s().node,
         elementRef: s().oneOfType([ s().func, s().object ]),
         onRequestRemove: s().func,
         type: s().oneOf([ "info", "success", "warning", "error" ])
     };
-    var oe = Object.freeze({
+    var te = Object.freeze({
         info: (0, I._)("Info"),
         warning: (0, I._)("Warning"),
         error: (0, I._)("Alert"),
         success: (0, I._)("Success")
     });
-    var te = Object.freeze({
+    var le = Object.freeze({
         info: C(),
         warning: O(),
         error: k(),
         success: w()
     });
-    var le = Object.freeze({
-        info: g(),
+    var ce = Object.freeze({
+        info: f(),
         warning: m(),
         error: d(),
         success: t()
     });
-    function ce(e) {
-        var r = e.appearance, i = r === void 0 ? "default" : r, s = e.children, o = e.type, t = o === void 0 ? "warning" : o, l = e.onRequestRemove, p = ne(e, [ "appearance", "children", "type", "onRequestRemove" ]);
+    function pe(e) {
+        var r = e.appearance, i = r === void 0 ? "default" : r, s = e.children, o = e.type, t = o === void 0 ? "warning" : o, l = e.onRequestRemove, p = ie(e, [ "appearance", "children", "type", "onRequestRemove" ]);
         // @docs-props-type MessagePropsBase
-                var v = (0, E.useSplunkTheme)(), d = v.isEnterprise;
+                var v = (0, j.useSplunkTheme)(), d = v.isEnterprise;
         if (false) {}
         // double check this can only be button
                 var b = (0, a.useCallback)((function(e) {
@@ -411,38 +415,47 @@
         }), [ l ]);
         if (i === "banner") {
             
-            return n().createElement(P(), ae({
+            return n().createElement(_(), ne({
                 type: t,
                 "data-test": "banner",
                 onRequestClose: b
             }, p), s);
         }
-        var g = d ? te : le;
-        var f = g[t];
+        var f = d ? le : ce;
+        var g = f[t];
         var m = i === "fill";
         var y = i === "default" || i === "fill";
+        // filters out Message.Title from other content
+                var k;
+        var h = n().Children.toArray(s).filter((function(e) {
+            if ( n().isValidElement(e) && e.type === ae) {
+                k = e;
+                return false;
+            }
+            return true;
+        }));
         
-        return n().createElement(Q, ae({
+        return n().createElement(U, ne({
             $appearance: i,
             $fillStyle: m,
             $hasRemoveIcon: !!l,
             $type: t,
             "data-test-type": t,
             "data-test": "message"
-        }, p), y &&  n().createElement(K, {
+        }, p), y &&  n().createElement(Q, {
             $fillStyle: m,
             $type: t
-        }, d ?  n().createElement(f, {
+        }, d ?  n().createElement(g, {
             height: "24px",
             width: "24px",
             hideDefaultTooltip: true,
             screenReaderText: null
-        }) :  n().createElement(f, {
+        }) :  n().createElement(g, {
             variant: "filled"
-        }),  n().createElement(j(), null, oe[t])),  n().createElement(G, {
+        }),  n().createElement(P(), null, te[t])),  n().createElement(G, {
             "data-test": "content",
             $fillStyle: m
-        }, s), l &&  n().createElement(J, {
+        }, k,  n().createElement(J, null, h)), l &&  n().createElement(K, {
             "data-test": "remove",
             onClick: b,
             $appearance: i
@@ -456,10 +469,10 @@
             width: "20px"
         })));
     }
-    ce.propTypes = se;
-    ce.Title = re;
-    ce.Link = z;
-    /* harmony default export */    const pe = ce;
+    pe.propTypes = oe;
+    pe.Title = ae;
+    pe.Link = z;
+    /* harmony default export */    const ue = pe;
     // CONCATENATED MODULE: ./src/Message/index.ts
     module.exports = r;
     /******/})();