@splunk/react-ui 5.1.0 → 5.3.0

package/Layer.js

@@ -359,8 +359,11 @@
                 var _ = (0, n.useCallback)((function() {
             if (e.layerContainer) {
                 var t = x();
+                var n = e.layerContainer.contains(t.fullscreenElement);
                 if (t.fullscreenElement != null) {
-                    t.fullscreenElement.appendChild(e.layerContainer);
+                    if (!n) {
+                        t.fullscreenElement.appendChild(e.layerContainer);
+                    }
                 } else {
                     t.body.appendChild(e.layerContainer);
                 }

package/Layout.js

@@ -72,9 +72,9 @@
     var a =  e.n(o);
     // CONCATENATED MODULE: external "styled-components"
     const l = require("styled-components");
-    var u =  e.n(l);
+    var i =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/themes/mixins"
-    const i = require("@splunk/themes/mixins");
+    const u = require("@splunk/themes/mixins");
     // CONCATENATED MODULE: ./src/Layout/Layout.tsx
     function c() {
         return c = Object.assign ? Object.assign.bind() : function(e) {
@@ -87,23 +87,23 @@
             return e;
         }, c.apply(null, arguments);
     }
-    function s(e, r) {
+    function f(e, r) {
         if (null == e) return {};
-        var t, n, o = f(e, r);
+        var t, n, o = s(e, r);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (n = 0; n < a.length; n++) {
-                t = a[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+                t = a[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
     }
-    function f(e, r) {
+    function s(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
+                if (-1 !== r.indexOf(n)) continue;
                 t[n] = e[n];
             }
         }
@@ -113,14 +113,14 @@
         children: a().node.isRequired,
         elementRef: a().oneOfType([ a().func, a().object ])
     };
-    var y = u().div.withConfig({
+    var y = i().div.withConfig({
         displayName: "Layout__StyledLayout",
         componentId: "sc-1imtojn-0"
-    })([ "", "" ], (0, i.layout)());
+    })([ "", "" ], (0, u.layout)());
     /**
  * Renders a container to layout children using standard spacing values.
  */    function p(e) {
-        var r = e.children, t = e.elementRef, o = s(e, [ "children", "elementRef" ]);
+        var r = e.children, t = e.elementRef, o = f(e, [ "children", "elementRef" ]);
         // @docs-props-type LayoutPropsBase
                 
         return n().createElement(y, c({

package/Link.js

@@ -83,11 +83,11 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const f = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Link/icons/External.tsx
-    var b = d()(p()).withConfig({
+    var v = d()(p()).withConfig({
         displayName: "External",
         componentId: "sc-13bdx45-0"
     })([ "vertical-align:text-bottom;margin-left:", ";" ], f.variables.spacingXSmall);
-    /* harmony default export */    const v = b;
+    /* harmony default export */    const b = v;
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const g = require("@splunk/react-ui/Clickable");
     var m =  e.n(g);
@@ -99,7 +99,7 @@
     f.pickVariant)("$appearance", {
         inline: (0, c.css)([ "text-decoration:underline;" ]),
         standalone: (0, c.css)([ "font-weight:", ";" ], f.variables.fontWeightSemiBold)
-    }), f.variables.contentColorLink, f.variables.focusShadow, f.variables.contentColorDisabled);
+    }), f.variables.contentColorLink, f.variables.focusShadow, f.variables.contentColorAccentWeak);
     // CONCATENATED MODULE: ./src/Link/Link.tsx
     function y() {
         return y = Object.assign ? Object.assign.bind() : function(e) {
@@ -118,7 +118,7 @@
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (r = 0; r < a.length; r++) {
-                t = a[r], n.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+                t = a[r], -1 === n.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
@@ -128,7 +128,7 @@
         var t = {};
         for (var r in e) {
             if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
+                if (-1 !== n.indexOf(r)) continue;
                 t[r] = e[r];
             }
         }
@@ -142,19 +142,19 @@
         openInNewContext: a().oneOfType([ a().bool, a().string ]),
         to: a().string
     };
-    var S = (0, s._)("(Opens new window)");
+    var k = (0, s._)("(Opens new window)");
     /**
  * `Link` is a simple method for configuring `Button` for inline links. For more complex behaviors,
  * see the `Button` documentation.
- */    var k =  r().forwardRef((function(e, 
+ */    var S =  r().forwardRef((function(e, 
     // SUI-7623 - needs to be specified for react-docgen versions less than 7.1.0
     n) {
-        var t = e.appearance, o = t === void 0 ? "inline" : t, a = e.children, i = e.disabled, s = i === void 0 ? false : i, c = e.elementRef, d = e.openInNewContext, u = d === void 0 ? false : d, p = e.tag, f = p === void 0 ? "a" : p, b = e.to, g = w(e, [ "appearance", "children", "disabled", "elementRef", "openInNewContext", "tag", "to" ]);
+        var t = e.appearance, o = t === void 0 ? "inline" : t, a = e.children, i = e.disabled, s = i === void 0 ? false : i, c = e.elementRef, d = e.openInNewContext, u = d === void 0 ? false : d, p = e.tag, f = p === void 0 ? "a" : p, v = e.to, g = w(e, [ "appearance", "children", "disabled", "elementRef", "openInNewContext", "tag", "to" ]);
         // @docs-props-type LinkPropsBase
-                var m = typeof u === "string" ? u : S;
+                var m = typeof u === "string" ? u : k;
         // Ensure `Link` always renders as an `a` (unless overriden by `tag`) by passing a value to Clickable,
         // using '' if disabled or the to is not passed.
-                var O = s && "" || b && b || "";
+                var O = s && "" || v && v || "";
         
         return r().createElement(h, y({
             "data-test": "link",
@@ -166,10 +166,10 @@
             to: O
         }, g, {
             tag: f
-        }), a, u &&  r().createElement(r().Fragment, null,  r().createElement(v, null),  r().createElement(l(), null, m)));
+        }), a, u &&  r().createElement(r().Fragment, null,  r().createElement(b, null),  r().createElement(l(), null, m)));
     }));
-    k.propTypes = x;
-    /* harmony default export */    const C = k;
+    S.propTypes = x;
+    /* harmony default export */    const C = S;
     // forwardRef appears to prevent TS from inferring LinkProps in components that import Link
     // so we need to export it separately to prevent the TS build from failing with:
     // "... has or is using name 'LinkPropsBase' from external module "...packages/react-ui/src/Link/Link" but cannot be named."

package/List.js

@@ -69,8 +69,8 @@
     const t = require("react");
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const l = require("prop-types");
-    var o =  e.n(l);
+    const o = require("prop-types");
+    var l =  e.n(o);
     // CONCATENATED MODULE: external "styled-components"
     const i = require("styled-components");
     var a =  e.n(i);
@@ -99,40 +99,40 @@
     }
     function d(e, r) {
         if (null == e) return {};
-        var t, n, l = y(e, r);
+        var t, n, o = y(e, r);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < o.length; n++) {
-                t = o[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (l[t] = e[t]);
+            var l = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < l.length; n++) {
+                t = l[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
-        return l;
+        return o;
     }
     function y(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
+                if (-1 !== r.indexOf(n)) continue;
                 t[n] = e[n];
             }
         }
         return t;
     }
     var p = {
-        children: o().node,
-        elementRef: o().oneOfType([ o().func, o().object ])
+        children: l().node,
+        elementRef: l().oneOfType([ l().func, l().object ])
     };
     /**
  * A container for items of a `List`.
  */    function m(e) {
-        var r = e.children, t = e.elementRef, l = d(e, [ "children", "elementRef" ]);
+        var r = e.children, t = e.elementRef, o = d(e, [ "children", "elementRef" ]);
         // @docs-props-type ItemPropsBase
                 
         return n().createElement(u, f({
             "data-test": "item",
             ref: t
-        }, l), r);
+        }, o), r);
     }
     m.propTypes = p;
     /* harmony default export */    const b = m;
@@ -150,40 +150,40 @@
     }
     function O(e, r) {
         if (null == e) return {};
-        var t, n, l = h(e, r);
+        var t, n, o = h(e, r);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < o.length; n++) {
-                t = o[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (l[t] = e[t]);
+            var l = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < l.length; n++) {
+                t = l[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
-        return l;
+        return o;
     }
     function h(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
+                if (-1 !== r.indexOf(n)) continue;
                 t[n] = e[n];
             }
         }
         return t;
     }
     var g = {
-        children: o().node,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        ordered: o().bool
+        children: l().node,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        ordered: l().bool
     };
     function j(e) {
-        var r = e.children, t = e.elementRef, l = e.ordered, o = O(e, [ "children", "elementRef", "ordered" ]);
+        var r = e.children, t = e.elementRef, o = e.ordered, l = O(e, [ "children", "elementRef", "ordered" ]);
         // @docs-props-type ListPropsBase
                 
         return n().createElement(c, v({
-            as: l ? "ol" : "ul",
+            as: o ? "ol" : "ul",
             "data-test": "list",
             ref: t
-        }, o), r);
+        }, l), r);
     }
     j.propTypes = g;
     j.Item = b;

package/MIGRATION.md

@@ -2,6 +2,33 @@
 
 This document lists migration guidance for new features and breaking changes.
 
+## 5.3.0
+
+### `Switch`'s `appearance="checkbox"` prop has been deprecated in favor of new `Checkbox` component.
+
+#### Change
+### `Switch`'s `appearance="checkbox"` prop has been deprecated and will be removed in the next major verion.
+
+#### Context
+The `Switch` component combines two different components - a checkbox and a toggle. While superficially similar in that they both provide a boolean control, they are semantically different controls.
+
+* `appearance="toggle"` is semantically a button, and should have an immediate effect
+* `appearance="checkbox"` is semantically a checkbox, and should not take effect until a form submission or similar action has been taken
+
+Additionally, there are several properties (error, indeterminate state) that exist as props on `Switch` despite only being supported when `appearance="checkbox"`.
+
+Given this, we are introducing a new `<Checkbox>` component that can replace `<Switch appearance="checkbox">`.
+
+#### Migration steps
+* Replace `<Switch appearance="checkbox">` with `<Checkbox />`, and update the following props:
+    * replace `onClick` with `onChange`
+      * note that `onChange` reports the new state of the `Checkbox`, whereas `onClick` reported the old state of the `Switch`
+    * replace `toggleRef` with `inputRef`
+    * replace `selected` with `checked`
+    * replace `selected="some"` with `checked="indeterminate"`
+    * replace `selectedLabel`, `someSelectedLabel`, or `unselectedLabel` with an `aria-label` that matches `checked`
+        * consider whether or not these three props are necessary, and if a visible label can be used instead
+
 ## 5.0.0
 
 ### Component spacing