@splunk/react-ui 4.40.0 → 4.41.0

package/FormRows.js

@@ -62,7 +62,7 @@
     // EXPORTS
         e.d(t, {
         Row: () => /* reexport */ Oe,
-        default: () => /* reexport */ Ge
+        default: () => /* reexport */ Ue
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -737,13 +737,90 @@
         disabled: false,
         header: null
     };
-    var Ve =  function(e) {
-        De(o, e);
-        var t = Be(o);
-        function o() {
+    /**
+ * Static function for adding a row.
+ *
+ * Example Use:
+ *
+ *      onRequestAdd() => {
+ *          this.setState(state => ({
+ *              items: FormRows.addRow(
+ *                  <FormRows.Row
+ *                      index={state.items.length}
+ *                      key={createDOMID()}
+ *                      onRequestRemove={this.handleRequestRemove}
+ *                  >
+ *                      <Text />
+ *                  </FormRows.Row>,
+ *                  state.items
+ *              ),
+ *          }));
+ *      };
+ *
+ * @param element Row element to add.
+ * @param items Array of current FormRows to add to.
+ * @return New array of FormRows with new Row added.
+ */    var Ve = function e(t, r) {
+        return r.concat(t);
+    };
+    /**
+ * Static function for moving a row.
+ *
+ * Example Use:
+ *
+ *      onRequestMove({ fromIndex, toIndex }) => {
+ *          this.setState(state => ({
+ *              items: FormRows.moveRow(fromIndex, toIndex, state.items),
+ *          }));
+ *      };
+ *
+ * @param fromIndex Current index of row to move.
+ * @param toIndex New index to move row to.
+ * @param items Array of current FormRows.
+ * @return New array of FormRows arranged in new order.
+ */    var Ge = function e(t, n, o) {
+        var i = o.filter((function(e, r) {
+            return r !== t;
+        }));
+        i.splice(n, 0, o[t]);
+        return i.map((function(e, t) {
+            
+            return (0, r.cloneElement)(e, {
+                index: t
+            });
+        }));
+    };
+    /**
+ * Static function for removing a row.
+ *
+ * Example Use:
+ *
+ *      onRequestRemove(e, { index }) => {
+ *          this.setState(state => ({
+ *              items: FormRows.removeRow(index, state.items),
+ *          }));
+ *      };
+ *
+ * @param index Index of Row to delete.
+ * @param items Array of current FormRows.
+ * @return New array of FormRows with Row of given index deleted.
+ */    var Je = function e(t, n) {
+        return n.filter((function(e, r) {
+            return r !== t;
+        })).map((function(e, t) {
+            
+            return (0, r.cloneElement)(e, {
+                index: t
+            });
+        }));
+    };
+    var Qe =  function(e) {
+        De(r, e);
+        var t = Be(r);
+        function r() {
             var e;
-            qe(this, o);
-            for (var r = arguments.length, i = new Array(r), a = 0; a < r; a++) {
+            qe(this, r);
+            for (var o = arguments.length, i = new Array(o), a = 0; a < o; a++) {
                 i[a] = arguments[a];
             }
             e = t.call.apply(t, [ this ].concat(i));
@@ -783,7 +860,7 @@
             return e;
         }
  // @docs-props-type FormRowsPropsBase
-                Te(o, [ {
+                Te(r, [ {
             key: "render",
             value: function e() {
                 var t = this.props, r = t.addLabel, o = t.children, i = t.disabled, a = t.header, l = t.menu, u = t.onRequestAdd, s = t.onRequestMove, p = ke(t, [ "addLabel", "children", "disabled", "header", "menu", "onRequestAdd", "onRequestMove" ]);
@@ -813,97 +890,16 @@
                     $sortable: f
                 })));
             }
-        } ], [ {
-            key: "addRow",
-            /**
-     * Static function for adding a row.
-     *
-     * Example Use:
-     *
-     *      onRequestAdd() => {
-     *          this.setState(state => ({
-     *              items: FormRows.addRow(
-     *                  <FormRows.Row
-     *                      index={state.items.length}
-     *                      key={createDOMID()}
-     *                      onRequestRemove={this.handleRequestRemove}
-     *                  >
-     *                      <Text />
-     *                  </FormRows.Row>,
-     *                  state.items
-     *              ),
-     *          }));
-     *      };
-     *
-     * @param element Row element to add.
-     * @param items Array of current FormRows to add to.
-     * @return New array of FormRows with new Row added.
-     */
-            value: function e(t, r) {
-                return r.concat(t);
-            }
-            /**
-     * Static function for moving a row.
-     *
-     * Example Use:
-     *
-     *      onRequestMove({ fromIndex, toIndex }) => {
-     *          this.setState(state => ({
-     *              items: FormRows.moveRow(fromIndex, toIndex, state.items),
-     *          }));
-     *      };
-     *
-     * @param fromIndex Current index of row to move.
-     * @param toIndex New index to move row to.
-     * @param items Array of current FormRows.
-     * @return New array of FormRows arranged in new order.
-     */        }, {
-            key: "moveRow",
-            value: function e(t, n, o) {
-                var i = o.filter((function(e, r) {
-                    return r !== t;
-                }));
-                i.splice(n, 0, o[t]);
-                return i.map((function(e, t) {
-                    
-                    return (0, r.cloneElement)(e, {
-                        index: t
-                    });
-                }));
-            }
-            /**
-     * Static function for removing a row.
-     *
-     * Example Use:
-     *
-     *      onRequestRemove(e, { index }) => {
-     *          this.setState(state => ({
-     *              items: FormRows.removeRow(index, state.items),
-     *          }));
-     *      };
-     *
-     * @param index Index of Row to delete.
-     * @param items Array of current FormRows.
-     * @return New array of FormRows with Row of given index deleted.
-     */        }, {
-            key: "removeRow",
-            value: function e(t, n) {
-                return n.filter((function(e, r) {
-                    return r !== t;
-                })).map((function(e, t) {
-                    
-                    return (0, r.cloneElement)(e, {
-                        index: t
-                    });
-                }));
-            }
         } ]);
-        return o;
+        return r;
     }(r.Component);
-    Fe(Ve, "propTypes", $e);
-    Fe(Ve, "defaultProps", ze);
-    Fe(Ve, "Row", Oe);
-    /* harmony default export */    const Ge = Ve;
+    Fe(Qe, "propTypes", $e);
+    Fe(Qe, "defaultProps", ze);
+    Fe(Qe, "Row", Oe);
+    Fe(Qe, "addRow", Ve);
+    Fe(Qe, "moveRow", Ge);
+    Fe(Qe, "removeRow", Je);
+    /* harmony default export */    const Ue = Qe;
     // CONCATENATED MODULE: ./src/FormRows/index.ts
     module.exports = t;
     /******/})();

package/Link.js

@@ -61,6 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
+        StyledLink: () => /* reexport */ x,
         default: () => /* reexport */ Q
     });
     // CONCATENATED MODULE: external "react"
@@ -105,10 +106,10 @@
     }
     /* harmony default export */    const O = g;
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const j = require("@splunk/react-ui/Clickable");
-    var x =  e.n(j);
+    const S = require("@splunk/react-ui/Clickable");
+    var j =  e.n(S);
     // CONCATENATED MODULE: ./src/Link/LinkStyles.ts
-    var S = p()(x()).withConfig({
+    var x = p()(j()).withConfig({
         displayName: "LinkStyles__StyledClickable",
         componentId: "sc-1hhltcf-0"
     })([ "", ";color:", ";text-decoration:none;font-size:inherit;font-weight:inherit;line-height:inherit;border-radius:", ";&:not([disabled],[aria-disabled='true']){cursor:pointer;", ";&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}}&[disabled],&[aria-disabled='true']{color:", ";}" ], v.mixins.reset("inline"), (0, 
@@ -197,11 +198,11 @@
         }, N(e, t);
     }
     function R(e) {
-        var t = A();
+        var t = L();
         return function() {
-            var r, n = B(e);
+            var r, n = A(e);
             if (t) {
-                var o = B(this).constructor;
+                var o = A(this).constructor;
                 r = Reflect.construct(n, arguments, o);
             } else r = n.apply(this, arguments);
             return M(this, r);
@@ -216,20 +217,20 @@
         if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         return e;
     }
-    function A() {
+    function L() {
         try {
             var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
         } catch (e) {}
-        return (A = function t() {
+        return (L = function t() {
             return !!e;
         })();
     }
-    function B(e) {
-        return B = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
+    function A(e) {
+        return A = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
             return e.__proto__ || Object.getPrototypeOf(e);
-        }, B(e);
+        }, A(e);
     }
-    function L(e, t, r) {
+    function B(e, t, r) {
         return (t = z(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
@@ -278,8 +279,8 @@
                 o[i] = arguments[i];
             }
             e = t.call.apply(t, [ this ].concat(o));
-            L(D(e), "component", null);
-            L(D(e), "handleMount", (function(t) {
+            B(D(e), "component", null);
+            B(D(e), "handleMount", (function(t) {
                 e.component = t;
             }));
             return e;
@@ -306,7 +307,7 @@
                     u = typeof o === "string" ? o : J;
                 }
                 
-                return n().createElement(S, k({
+                return n().createElement(x, k({
                     "data-test": "link",
                     ref: this.handleMount,
                     openInNewContext: a
@@ -315,10 +316,11 @@
         } ]);
         return r;
     }(r.Component);
-    L(K, "propTypes", H);
-    L(K, "defaultProps", G);
-    L(K, u.legacyRefMode, true);
+    B(K, "propTypes", H);
+    B(K, "defaultProps", G);
+    B(K, u.legacyRefMode, true);
     /* harmony default export */    const Q = K;
-    // CONCATENATED MODULE: ./src/Link/index.ts
+    // exported so that we can style both <a> and <button> tags in MessageBar
+        // CONCATENATED MODULE: ./src/Link/index.ts
     module.exports = t;
     /******/})();

package/MIGRATION.mdx

@@ -15,7 +15,7 @@ This document lists migration guidance for new features and breaking changes.
 
 #### 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`. 
+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
@@ -23,6 +23,27 @@ Including both a primary `Select` and `Button` conflicts with the visual importa
 * 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.
 
+### Deprecated `TabBar` and `TabLayout`'s `iconSize` prop
+
+#### Context
+
+The `iconSize` prop has two major issues:
+
+* Despite its name, it controls both size and position, which is both confusing to users and makes it difficult to control those independently.
+* It does not correctly set the icon size for the new icons introduced in `@splunk/react-icons@4`.
+
+To eliminate these issues, we have deprecated the `iconSize` prop.
+
+#### Migration steps
+
+Remove usages of the `iconSize` prop.
+
+* Icon position can now be controlled with the new `iconPosition` prop.
+* Icon size can be set using `@splunk/react-icons` APIs.
+* If you are using the new icons in `react-icons@4`, you can set size with the `height` and `width` props.
+* If you are using `react-icons@3` or using the `/enterprise` path in `react-icons@4`,
+    the `size` prop can be set to `"18px"` to match `iconSize="small"` or `"36px"` to match `iconSize="large"`.
+
 ## 4.39.0
 
 ### Deprecated `TabBar` and `TabLayout`'s `appearance` prop
@@ -49,8 +70,8 @@ To eliminate these issues, we have deprecated the `appearance` prop.
 
 Remove usages of the `appearance` prop:
 
-1) If you were using `appearance="navigation"`, that is the default appearance and removing the prop will have no effect.
-2) If you were using `appearance="context"`, the tabs will render with the default appearance.
+* If you were using `appearance="navigation"`, that is the default appearance and removing the prop will have no effect.
+* If you were using `appearance="context"`, the tabs will render with the default appearance.
 
 ### Deprecated `Button`'s `selected` prop
 

package/Menu.js

@@ -282,7 +282,7 @@
         // so we set them to aria-hidden to prevent that
                 
         return n().createElement(E, {
-            "aria-hidden": s === "listbox"
+            "aria-hidden": s === "listbox" ? true : undefined
         }, d);
     }
     $.propTypes = H;

package/MessageBar.js

@@ -61,7 +61,7 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ se
+        default: () => /* reexport */ ie
     });
     // CONCATENATED MODULE: external "react"
     const a = require("react");
@@ -90,10 +90,10 @@
     var y =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationCircle"
     const m = require("@splunk/react-icons/ExclamationCircle");
-    var f =  e.n(m);
+    var k =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
-    const k = require("@splunk/react-icons/InformationCircle");
-    var x =  e.n(k);
+    const f = require("@splunk/react-icons/InformationCircle");
+    var x =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationTriangle"
     const C = require("@splunk/react-icons/ExclamationTriangle");
     var w =  e.n(C);
@@ -115,11 +115,13 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const N = require("@splunk/react-ui/Clickable");
     var R =  e.n(N);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Link"
+    const T = require("@splunk/react-ui/Link");
     // CONCATENATED MODULE: ./src/MessageBar/MessageBarStyles.ts
-    var T = g().div.withConfig({
+    var W = g().div.withConfig({
         displayName: "MessageBarStyles__MessageBarContent",
         componentId: "sc-1uyhzza-0"
-    })([ "", ";color:inherit;padding:0 8px;text-align:center;margin-right:auto;& a{display:inline-block;color:inherit;text-decoration:underline;text-underline-position:under;padding:0 3px 2px 3px;&:not([disabled]):focus{border-radius:", ";outline:0;", ";}}" ], u.mixins.reset("inline"), u.variables.borderRadius, (0, 
+    })([ "", ";color:inherit;padding:0 8px;text-align:center;margin-right:auto;& a,& ", "{display:inline-block;color:inherit;text-decoration:underline;text-underline-position:under;padding:0 3px 2px 3px;&:not([disabled]):focus{border-radius:", ";outline:0;", ";}}" ], u.mixins.reset("inline"), /* sc-sel */ T.StyledLink, u.variables.borderRadius, (0, 
     u.pick)({
         enterprise: {
             dark: (0, b.css)([ "box-shadow:0 0 0 2px ", ";" ], u.variables.gray80),
@@ -135,7 +137,7 @@
             dark: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black)
         }
     }));
-    var W = g()(R()).withConfig({
+    var P = g()(R()).withConfig({
         displayName: "MessageBarStyles__MessageBarCloseWrapper",
         componentId: "sc-1uyhzza-1"
     })([ "", ";border:1px solid transparent;border-radius:", ";color:inherit;cursor:pointer;padding:", ";", " &:hover,&:focus{background:", ";border:1px solid;border-color:", ";color:", ";}&:active{", ";}", "" ], u.mixins.reset("flex"), u.variables.borderRadius, (0, 
@@ -173,40 +175,40 @@
             dark: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black)
         }))
     }));
-    var P = (0, b.css)([ "margin-left:auto;" ]);
-    var $ = g()(y()).withConfig({
+    var $ = (0, b.css)([ "margin-left:auto;" ]);
+    var A = g()(y()).withConfig({
         displayName: "MessageBarStyles__StyledCheckCircleIcon",
         componentId: "sc-1uyhzza-2"
-    })([ "", "" ], P);
-    var A = g()(f()).withConfig({
+    })([ "", "" ], $);
+    var L = g()(k()).withConfig({
         displayName: "MessageBarStyles__StyledExclamationCircleIcon",
         componentId: "sc-1uyhzza-3"
-    })([ "", "" ], P);
-    var L = g()(x()).withConfig({
+    })([ "", "" ], $);
+    var V = g()(x()).withConfig({
         displayName: "MessageBarStyles__StyledInformationCircleIcon",
         componentId: "sc-1uyhzza-4"
-    })([ "", "" ], P);
-    var V = g()(w()).withConfig({
+    })([ "", "" ], $);
+    var D = g()(w()).withConfig({
         displayName: "MessageBarStyles__StyledExclamationTriangleIcon",
         componentId: "sc-1uyhzza-5"
-    })([ "", "" ], P);
-    var D = g()(_()).withConfig({
+    })([ "", "" ], $);
+    var H = g()(_()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseErrorIcon",
         componentId: "sc-1uyhzza-6"
-    })([ "", " color:", ";" ], P, u.variables.errorColor);
-    var H = g()(z()).withConfig({
+    })([ "", " color:", ";" ], $, u.variables.errorColor);
+    var X = g()(z()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseInfoCircleIcon",
         componentId: "sc-1uyhzza-7"
-    })([ "", " color:", ";" ], P, u.variables.infoColor);
-    var X = g()(E()).withConfig({
+    })([ "", " color:", ";" ], $, u.variables.infoColor);
+    var F = g()(E()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseSuccessIcon",
         componentId: "sc-1uyhzza-8"
-    })([ "", " color:", ";" ], P, u.variables.successColor);
-    var F = g()(B()).withConfig({
+    })([ "", " color:", ";" ], $, u.variables.successColor);
+    var G = g()(B()).withConfig({
         displayName: "MessageBarStyles__StyledEnterpriseWarningIcon",
         componentId: "sc-1uyhzza-9"
-    })([ "", " color:", ";" ], P, u.variables.warningColor);
-    var G = g()(j()).withConfig({
+    })([ "", " color:", ";" ], $, u.variables.warningColor);
+    var J = g()(j()).withConfig({
         displayName: "MessageBarStyles__MessageBarWrapper",
         componentId: "sc-1uyhzza-10"
     })([ "", ";display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:", ";", ";word-wrap:break-word;color:", ";", ";" ], u.mixins.reset("block"), u.variables.spacingSmall, (function(e) {
@@ -266,8 +268,8 @@
         }))
     }));
     // CONCATENATED MODULE: ./src/MessageBar/MessageBar.tsx
-    function J() {
-        return J = Object.assign ? Object.assign.bind() : function(e) {
+    function K() {
+        return K = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var a = arguments[r];
                 for (var s in a) {
@@ -275,11 +277,11 @@
                 }
             }
             return e;
-        }, J.apply(null, arguments);
+        }, K.apply(null, arguments);
     }
-    function K(e, r) {
+    function Q(e, r) {
         if (null == e) return {};
-        var a, s, i = Q(e, r);
+        var a, s, i = U(e, r);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
             for (s = 0; s < n.length; s++) {
@@ -288,7 +290,7 @@
         }
         return i;
     }
-    function Q(e, r) {
+    function U(e, r) {
         if (null == e) return {};
         var a = {};
         for (var s in e) {
@@ -299,39 +301,39 @@
         }
         return a;
     }
-    var U = {
+    var Y = {
         children: n().node.isRequired,
         onRequestClose: n().func,
         type: n().oneOf([ "info", "success", "warning", "error" ]).isRequired
     };
-    var Y = Object.freeze({
+    var Z = Object.freeze({
         info: (0, v._)("Info"),
         warning: (0, v._)("Warning"),
         error: (0, v._)("Alert"),
         success: (0, v._)("Success")
     });
-    var Z = Object.freeze({
-        info: H,
-        warning: F,
-        error: D,
-        success: X
-    });
     var ee = Object.freeze({
-        info: L,
-        warning: V,
-        error: A,
-        success: $
+        info: X,
+        warning: G,
+        error: H,
+        success: F
+    });
+    var re = Object.freeze({
+        info: V,
+        warning: D,
+        error: L,
+        success: A
     });
-    var re = "24px";
-    function ae(e) {
-        var r = e.children, a = e.type, i = e.onRequestClose, n = K(e, [ "children", "type", "onRequestClose" ]);
+    var ae = "24px";
+    function se(e) {
+        var r = e.children, a = e.type, i = e.onRequestClose, n = Q(e, [ "children", "type", "onRequestClose" ]);
         // @docs-props-type MessageBarPropsBase
                 var o = (0, u.useSplunkTheme)(), l = o.isEnterprise;
-        var p = l && a === "error" ? "22px" : re;
-        var b = l && a === "warning" ? "21px" : re;
+        var p = l && a === "error" ? "22px" : ae;
+        var b = l && a === "warning" ? "21px" : ae;
         var g;
         if (l) {
-            var h = Z[a];
+            var h = ee[a];
             g =  s().createElement(h, {
                 height: b,
                 width: p,
@@ -341,27 +343,27 @@
                 "data-test": "icon"
             });
         } else {
-            var y = ee[a];
+            var y = re[a];
             g =  s().createElement(y, {
-                height: re,
-                width: re,
+                height: ae,
+                width: ae,
                 variant: "filled",
                 "aria-hidden": true,
                 "data-test": "icon"
             });
         }
         
-        return s().createElement(G, J({
+        return s().createElement(J, K({
             $type: a,
             "data-test": "message-bar",
             "data-test-type": a
         }, n, {
             role: "region",
             $hasCloseButton: Boolean(i)
-        }), g,  s().createElement(d(), null, Y[a]),  s().createElement(T, {
+        }), g,  s().createElement(d(), null, Z[a]),  s().createElement(W, {
             $type: a,
             "data-test": "content"
-        }, r), i &&  s().createElement(W, {
+        }, r), i &&  s().createElement(P, {
             $type: a,
             onClick: i
         }, l ?  s().createElement(c(), {
@@ -377,8 +379,8 @@
             width: "19px"
         }),  s().createElement(d(), null, (0, v._)("Close"))));
     }
-    ae.propTypes = U;
-    /* harmony default export */    const se = ae;
+    se.propTypes = Y;
+    /* harmony default export */    const ie = se;
     // CONCATENATED MODULE: ./src/MessageBar/index.ts
     module.exports = r;
     /******/})();