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

@@ -5,6 +5,45 @@ 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.
+
+### 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
@@ -31,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
 
@@ -719,3 +758,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/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;