@splunk/react-ui 4.40.0 → 4.42.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/Layer.js

@@ -73,10 +73,10 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        LayerContext: () => /* reexport */ b,
-        LayerStackContext: () => /* reexport */ h,
-        LayerStackGlobalProvider: () => /* reexport */ w,
-        default: () => /* reexport */ U
+        LayerContext: () => /* reexport */ h,
+        LayerStackContext: () => /* reexport */ v,
+        LayerStackGlobalProvider: () => /* reexport */ b,
+        default: () => /* reexport */ I
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
@@ -87,27 +87,25 @@
     const i = require("prop-types");
     var a =  e.n(i);
     // CONCATENATED MODULE: external "lodash/includes"
-    const c = require("lodash/includes");
-    var u =  e.n(c);
+    const l = require("lodash/includes");
+    var c =  e.n(l);
     // CONCATENATED MODULE: external "lodash/last"
-    const l = require("lodash/last");
-    var s =  e.n(l);
+    const u = require("lodash/last");
+    var s =  e.n(u);
     // CONCATENATED MODULE: external "lodash/pull"
     const p = require("lodash/pull");
     var f =  e.n(p);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const y = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-    const d = require("@splunk/react-ui/EventListener");
-    var v =  e.n(d);
+    const y = require("@splunk/react-ui/EventListener");
+    var d =  e.n(y);
     // CONCATENATED MODULE: ./src/Layer/LayerStack.tsx
     /**
  * `LayerStackContext` is used to manage the array that `Layer` (and components that
  * depend on it, such as `Modal`) uses to determine the order of open layers.
  * @public
  */
-    var h =  r().createContext([]);
-    var b =  r().createContext({});
+    var v =  r().createContext([]);
+    var h =  r().createContext({});
     var m = {
         children: a().node,
         name: a().string,
@@ -119,10 +117,10 @@
  * A `LayerStackContext` provider that stores a shared layer stack using a global variable.
  * Applications should only use this provider if there's a known need to support multiple
  * instances of this library on the same page.
- */    function w(t) {
-        var o = t.children, i = t.name, a = i === void 0 ? "__splunkui_layer_instances__" : i, c = t.scope, u = c === void 0 ? typeof window !== "undefined" ? window : e.g : c, l = t.separateStackingContexts, s = l === void 0 ? false : l;
-        if (!u[a]) {
-            u[a] = [];
+ */    function b(t) {
+        var o = t.children, i = t.name, a = i === void 0 ? "__splunkui_layer_instances__" : i, l = t.scope, c = l === void 0 ? typeof window !== "undefined" ? window : e.g : l, u = t.separateStackingContexts, s = u === void 0 ? false : u;
+        if (!c[a]) {
+            c[a] = [];
  // eslint-disable-line no-param-reassign
                 }
         var p = (0, n.useMemo)((function() {
@@ -131,29 +129,29 @@
             };
         }), [ s ]);
         
-        return r().createElement(h.Provider, {
-            value: u[a]
-        },  r().createElement(b.Provider, {
+        return r().createElement(v.Provider, {
+            value: c[a]
+        },  r().createElement(h.Provider, {
             value: p
         }, o));
     }
-    w.propTypes = m;
+    b.propTypes = m;
     // CONCATENATED MODULE: external "styled-components"
-    const k = require("styled-components");
-    var g =  e.n(k);
+    const w = require("styled-components");
+    var g =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/themes"
     const C = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Layer/LayerStyles.ts
-    var S = g().div.withConfig({
+    var k = g().div.withConfig({
         displayName: "LayerStyles__StyledLayer",
         componentId: "ii6psl-0"
     })([ "", "" ], (function(e) {
         var t = e.$separateStackingContexts;
-        return t && (0, k.css)([ "isolation:isolate;z-index:", ";" ], C.variables.zindexLayer);
+        return t && (0, w.css)([ "isolation:isolate;z-index:", ";" ], C.variables.zindexLayer);
     }));
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var O = {
+    var S = {
         body: {
             appendChild: function e() {
                 return [];
@@ -208,34 +206,34 @@
         }
     };
     function E() {
-        var e = typeof document !== "undefined" ? document : O;
+        var e = typeof document !== "undefined" ? document : S;
         return e;
     }
     // CONCATENATED MODULE: ./src/Layer/Layer.tsx
-    function j(e) {
+    function O(e) {
         "@babel/helpers - typeof";
-        return j = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return O = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, j(e);
+        }, O(e);
     }
-    function L(e, t) {
+    function j(e, t) {
         if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
     }
-    function P(e, t) {
+    function L(e, t) {
         for (var n = 0; n < t.length; n++) {
             var r = t[n];
             r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, K(r.key), r);
+            Object.defineProperty(e, A(r.key), r);
         }
     }
-    function _(e, t, n) {
-        return t && P(e.prototype, t), n && P(e, n), Object.defineProperty(e, "prototype", {
+    function P(e, t, n) {
+        return t && L(e.prototype, t), n && L(e, n), Object.defineProperty(e, "prototype", {
             writable: !1
         }), e;
     }
-    function T(e, t) {
+    function _(e, t) {
         if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
         e.prototype = Object.create(t && t.prototype, {
             constructor: {
@@ -245,103 +243,101 @@
             }
         }), Object.defineProperty(e, "prototype", {
             writable: !1
-        }), t && x(e, t);
+        }), t && T(e, t);
     }
-    function x(e, t) {
-        return x = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
+    function T(e, t) {
+        return T = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
             return e.__proto__ = t, e;
-        }, x(e, t);
+        }, T(e, t);
     }
-    function q(e) {
-        var t = M();
+    function x(e) {
+        var t = D();
         return function() {
-            var n, r = N(e);
+            var n, r = M(e);
             if (t) {
-                var o = N(this).constructor;
+                var o = M(this).constructor;
                 n = Reflect.construct(r, arguments, o);
             } else n = r.apply(this, arguments);
-            return R(this, n);
+            return q(this, n);
         };
     }
-    function R(e, t) {
-        if (t && ("object" == j(t) || "function" == typeof t)) return t;
+    function q(e, t) {
+        if (t && ("object" == O(t) || "function" == typeof t)) return t;
         if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return D(e);
+        return R(e);
     }
-    function D(e) {
+    function R(e) {
         if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         return e;
     }
-    function M() {
+    function D() {
         try {
             var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
         } catch (e) {}
-        return (M = function t() {
+        return (D = function t() {
             return !!e;
         })();
     }
-    function N(e) {
-        return N = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
+    function M(e) {
+        return M = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
             return e.__proto__ || Object.getPrototypeOf(e);
-        }, N(e);
+        }, M(e);
     }
-    function A(e, t, n) {
-        return (t = K(t)) in e ? Object.defineProperty(e, t, {
+    function N(e, t, n) {
+        return (t = A(t)) in e ? Object.defineProperty(e, t, {
             value: n,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = n, e;
     }
-    function K(e) {
-        var t = W(e, "string");
-        return "symbol" == j(t) ? t : t + "";
+    function A(e) {
+        var t = K(e, "string");
+        return "symbol" == O(t) ? t : t + "";
     }
-    function W(e, t) {
-        if ("object" != j(e) || !e) return e;
+    function K(e, t) {
+        if ("object" != O(e) || !e) return e;
         var n = e[Symbol.toPrimitive];
         if (void 0 !== n) {
             var r = n.call(e, t || "default");
-            if ("object" != j(r)) return r;
+            if ("object" != O(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
     /** @public */
-    /** @public */    var B = [ "clickAway", "escapeKey" ];
-    var z = {
+    /** @public */    var W = [ "clickAway", "escapeKey" ];
+    var F = {
         children: a().node,
-        closeReasons: a().arrayOf(a().oneOf(B)),
+        closeReasons: a().arrayOf(a().oneOf(W)),
         onRequestClose: a().func,
         open: a().bool
     };
-    var F = {
-        closeReasons: B,
+    var B = {
+        closeReasons: W,
         open: false
     };
-    var I =  function(e) {
-        T(n, e);
-        var t = q(n);
+    var z =  function(e) {
+        _(n, e);
+        var t = x(n);
         // @docs-props-type LayerPropsBase
         // eslint-disable-next-line react/sort-comp
         // LayerStackContext (an array) keeps track of the current instances of Layer. This is
         // used by Layer#handleKeyDown to determine if the escapeKey event should be handled by
         // the current instance. Only the topmost Layer instance should honor the escapeKey.
-        // TODO: enable once this is sorted out within the babel/ts ecosystem
-        // declare context: React.ContextType<typeof LayerStackContext>;
                 function n(e) {
             var r;
-            L(this, n);
+            j(this, n);
             r = t.call(this, e);
-            A(D(r), "layerClickEvent", null);
-            A(D(r), "handleClickOnLayer", (function(e) {
+            N(R(r), "layerClickEvent", null);
+            N(R(r), "handleClickOnLayer", (function(e) {
                 var t = e.nativeEvent;
                 r.layerClickEvent = t;
             }));
-            A(D(r), "handleClickOnWindow", (function(e) {
+            N(R(r), "handleClickOnWindow", (function(e) {
                 var t, n;
                 // clicks inside the layer should not be considered clickAways
-                                if (!r.props.open || !u()(r.props.closeReasons, "clickAway") || r.layerClickEvent === e) {
+                                if (!r.props.open || !c()(r.props.closeReasons, "clickAway") || r.layerClickEvent === e) {
                     return;
                 }
                 (t = (n = r.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(n, {
@@ -349,8 +345,8 @@
                     reason: "clickAway"
                 });
             }));
-            A(D(r), "handleKeyDownOnWindow", (function(e) {
-                if (r.props.open && (0, y.keycode)(e) === "esc" && s()(r.getLayerStack()) === D(r) && u()(r.props.closeReasons, "escapeKey")) {
+            N(R(r), "handleKeyDownOnWindow", (function(e) {
+                if (r.props.open && e.key === "Escape" && s()(r.getLayerStack()) === R(r) && c()(r.props.closeReasons, "escapeKey")) {
                     var t, n;
                     (t = (n = r.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(n, {
                         event: e,
@@ -366,7 +362,7 @@
             }
             return r;
         }
-        _(n, [ {
+        P(n, [ {
             key: "componentDidMount",
             value: function e() {
                 if (this.props.open) {
@@ -392,16 +388,25 @@
             value: function e() {
                 return this.context;
             }
-        }, {
+ // the fullscreen API does not render elements outside the fullscreen element
+            // Layer renders in document.body, which means that anything using Layer will not render in fullscreen
+            // this code moves the layer container into the fullscreen element, ensuring that it will render
+                }, {
             key: "render",
             value: function e() {
                 var t = this;
-                var i = this.props, a = i.children, c = i.open;
-                if (c) {
-                    var u =  (0, o.createPortal)( r().createElement(b.Consumer, null, (function(e) {
+                var i = this.props, a = i.children, l = i.open;
+                var c =  r().createElement(d(), {
+                    target: window,
+                    eventType: "fullscreenchange",
+                    listener: n.handleFullScreenChange,
+                    key: "fullScreenChange"
+                });
+                if (l) {
+                    var u =  (0, o.createPortal)( r().createElement(h.Consumer, null, (function(e) {
                         var n = e.separateStackingContexts, o = n === void 0 ? false : n;
                         
-                        return r().createElement(S, {
+                        return r().createElement(k, {
                             $separateStackingContexts: o,
                             "data-test": "layer",
                             onMouseDown: t.handleClickOnLayer,
@@ -409,17 +414,17 @@
                         }, a);
                     })), n.layerContainer);
                     
-                    return r().createElement(r().Fragment, null,  r().createElement(v(), {
+                    return r().createElement(r().Fragment, null,  r().createElement(d(), {
                         target: window,
                         eventType: "keydown",
                         listener: this.handleKeyDownOnWindow,
                         key: "eventListenerKeydown"
-                    }),  r().createElement(v(), {
+                    }),  r().createElement(d(), {
                         target: window,
                         eventType: "mousedown",
                         listener: this.handleClickOnWindow,
                         key: "eventListenerMouseDown"
-                    }),  r().createElement(v(), {
+                    }),  r().createElement(d(), {
                         target: window,
                         eventType: "touchstart",
                         listener: this.handleClickOnWindow,
@@ -427,19 +432,32 @@
                         options: {
                             passive: true
                         }
-                    }), u);
+                    }), c, u);
                 }
-                return null;
+                // the fragment has to be present to avoid type issues with React 18
+                // eslint-disable-next-line react/jsx-no-useless-fragment
+                                
+                return r().createElement(r().Fragment, null, c);
             }
         } ]);
         return n;
     }(n.Component);
-    A(I, "layerContainer", null);
-    A(I, "possibleCloseReasons", B);
-    A(I, "propTypes", z);
-    A(I, "defaultProps", F);
-    A(I, "contextType", h);
-    /* harmony default export */    const U = I;
+    N(z, "layerContainer", null);
+    N(z, "possibleCloseReasons", W);
+    N(z, "propTypes", F);
+    N(z, "defaultProps", B);
+    N(z, "contextType", v);
+    N(z, "handleFullScreenChange", (function() {
+        if (z.layerContainer) {
+            var e = E();
+            if (e.fullscreenElement != null) {
+                e.fullscreenElement.appendChild(z.layerContainer);
+            } else {
+                e.body.appendChild(z.layerContainer);
+            }
+        }
+    }));
+    /* harmony default export */    const I = z;
     // CONCATENATED MODULE: ./src/Layer/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