@splunk/react-ui 5.1.0 → 5.3.0

package/DefinitionList.js

@@ -61,41 +61,73 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Description: () => /* reexport */ h,
-        Term: () => /* reexport */ P,
-        default: () => /* reexport */ _
+        Description: () => /* reexport */ b,
+        Term: () => /* reexport */ j,
+        default: () => /* reexport */ T
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
     var n =  e.n(t);
+    // CONCATENATED MODULE: external "lodash/has"
+    const i = require("lodash/has");
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var o =  e.n(i);
+    const a = require("prop-types");
+    var o =  e.n(a);
     // CONCATENATED MODULE: ./src/DefinitionList/DefinitionListContext.tsx
-    var a =  (0, t.createContext)({});
+    var s =  (0, t.createContext)({
+        layout: "fixed"
+    });
     // CONCATENATED MODULE: external "styled-components"
     const l = require("styled-components");
     var c =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const s = require("@splunk/themes");
+    const d = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/DefinitionList/DefinitionListStyles.ts
-    var u = c().dl.withConfig({
-        displayName: "DefinitionListStyles__Styled",
+    var p = c().dt.withConfig({
+        displayName: "DefinitionListStyles__StyledTerm",
         componentId: "sc-1pqfrgm-0"
-    })([ "", ";", ";" ], s.mixins.reset("block"), s.mixins.typography("body"));
-    // CONCATENATED MODULE: ./src/DefinitionList/DescriptionStyles.ts
+    })([ "", "" ], (function(e) {
+        var r = e.$separatorCharacter, t = e.$termWidth;
+        return (0, d.pickVariant)("$layout", {
+            fixed: (0, l.css)([ "", ";", ";float:left;overflow:hidden;white-space:nowrap;word-wrap:normal;width:", ";", "" ], d.mixins.reset("block"), d.mixins.typography("body", {
+                color: "muted"
+            }), t, r && (0, l.css)([ "&::after{content:'", "';}" ], " ".concat(r.repeat(100)))),
+            auto: (0, l.css)([ "", ";", ";grid-template-columns:[term] auto [separator] 1fr;grid-column:term;overflow:hidden;white-space:normal;word-break:break-word;width:", ";", "" ], d.mixins.reset("grid"), d.mixins.typography("body", {
+                color: "muted"
+            }), t, r && (0, l.css)([ "&::after{grid-column:separator;content:'", "';margin-inline-start:", ";min-width:", ";overflow:hidden;white-space:nowrap;}" ], " ".concat(r.repeat(250)), d.variables.spacingXSmall, d.variables.spacingLarge)),
+            stacked: (0, l.css)([ "", ";", ";grid-column:definitionList;white-space:normal;word-break:break-word;&:not(:first-of-type){margin-block-start:", ";}" ], d.mixins.reset("grid"), d.mixins.typography("body", {
+                color: "muted"
+            }), d.variables.spacingLarge)
+        });
+    }));
     var f = c().dd.withConfig({
-        displayName: "DescriptionStyles__Styled",
-        componentId: "sc-1jglixb-0"
-    })([ "", ";", ";min-height:1.5em;padding-inline-start:", ";margin-inline-start:", ";" ], s.mixins.reset("block"), s.mixins.typography("body", {
-        color: "active"
-    }), s.variables.spacingSmall, (function(e) {
-        var r = e.$termWidth;
-        return r;
+        displayName: "DefinitionListStyles__StyledDescription",
+        componentId: "sc-1pqfrgm-1"
+    })([ "", "" ], (function(e) {
+        var r = e.$descriptionWidth, t = e.$termWidth;
+        return (0, d.pickVariant)("$layout", {
+            fixed: (0, l.css)([ "", ";", ";padding-inline-start:", ";margin-inline-start:", ";white-space:normal;word-break:break-word;width:", ";" ], d.mixins.reset("block"), d.mixins.typography("body", {
+                color: "active"
+            }), d.variables.spacingSmall, t, r),
+            auto: (0, l.css)([ "", ";", ";grid-column:description;white-space:normal;word-break:break-word;width:", ";" ], d.mixins.reset("grid"), d.mixins.typography("body", {
+                color: "active"
+            }), r),
+            stacked: (0, l.css)([ "", ";", ";grid-column:definitionList;white-space:normal;word-break:break-word;" ], d.mixins.reset("grid"), d.mixins.typography("body", {
+                color: "active"
+            }))
+        });
+    }));
+    var u = c().dl.withConfig({
+        displayName: "DefinitionListStyles__Styled",
+        componentId: "sc-1pqfrgm-2"
+    })([ "", "" ], (0, d.pickVariant)("$layout", {
+        fixed: (0, l.css)([ "", ";", ";" ], d.mixins.reset("block"), d.mixins.typography("body")),
+        auto: (0, l.css)([ "", ";grid-template-columns:[term] fit-content(", ") [description] fit-content( ", " );column-gap:", ";row-gap:", ";" ], d.mixins.reset("grid"), d.variables.lineLength, d.variables.lineLength, d.variables.spacingXLarge, d.variables.spacingMedium),
+        stacked: (0, l.css)([ "", ";grid-template-columns:[definitionList] fit-content(", ");row-gap:", ";" ], d.mixins.reset("grid"), d.variables.lineLength, d.variables.spacingXSmall)
     }));
     // CONCATENATED MODULE: ./src/DefinitionList/Description.tsx
-    function d() {
-        return d = Object.assign ? Object.assign.bind() : function(e) {
+    function m() {
+        return m = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -103,65 +135,54 @@
                 }
             }
             return e;
-        }, d.apply(null, arguments);
+        }, m.apply(null, arguments);
     }
-    function p(e, r) {
+    function y(e, r) {
         if (null == e) return {};
-        var t, n, i = m(e, r);
+        var t, n, i = 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) && (i[t] = e[t]);
+            var a = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < a.length; n++) {
+                t = a[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
             }
         }
         return i;
     }
-    function m(e, r) {
+    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 y = {
+    var g = {
         children: o().node.isRequired,
         elementRef: o().oneOfType([ o().func, o().object ])
     };
     /**
  * Container component for a `DefinitionList` description.
  */    function v(e) {
-        var r = e.children, i = e.elementRef, o = p(e, [ "children", "elementRef" ]);
+        var r = e.children, i = e.elementRef, a = y(e, [ "children", "elementRef" ]);
         // @docs-props-type DescriptionPropsBase
-                var l = (0, t.useContext)(a), c = l.termWidth;
+                var o = (0, t.useContext)(s), l = o.descriptionWidth, c = o.layout, d = o.termWidth;
         
-        return n().createElement(f, d({
+        return n().createElement(f, m({
             "data-test": "description",
             ref: i,
-            $termWidth: c
-        }, o), r);
+            $descriptionWidth: l,
+            $layout: c,
+            $termWidth: d
+        }, a), r);
     }
-    v.propTypes = y;
-    /* harmony default export */    const h = v;
-    // CONCATENATED MODULE: ./src/DefinitionList/TermStyles.ts
-    var b = c().dt.withConfig({
-        displayName: "TermStyles__Styled",
-        componentId: "sc-1ao97j9-0"
-    })([ "", ";", " float:left;overflow:hidden;overflow-x:hidden;white-space:nowrap;word-wrap:normal;", " width:", ";" ], s.mixins.reset("block"), s.mixins.typography("body", {
-        color: "muted"
-    }), (function(e) {
-        var r = e.$separator;
-        return r && r !== "none" && (0, l.css)([ "&::after{content:'", "';}" ], " ".concat(r.repeat(100)));
-    }), (function(e) {
-        var r = e.$termWidth;
-        return r;
-    }));
+    v.propTypes = g;
+    /* harmony default export */    const b = v;
     // CONCATENATED MODULE: ./src/DefinitionList/Term.tsx
-    function g() {
-        return g = Object.assign ? Object.assign.bind() : function(e) {
+    function w() {
+        return w = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -169,53 +190,54 @@
                 }
             }
             return e;
-        }, g.apply(null, arguments);
+        }, w.apply(null, arguments);
     }
     function O(e, r) {
         if (null == e) return {};
-        var t, n, i = w(e, r);
+        var t, n, i = x(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) && (i[t] = e[t]);
+            var a = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < a.length; n++) {
+                t = a[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
             }
         }
         return i;
     }
-    function w(e, r) {
+    function x(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 j = {
+    var k = {
         children: o().node.isRequired,
         elementRef: o().oneOfType([ o().func, o().object ])
     };
     /**
  * Container component for a `DefinitionList` term.
  */    function S(e) {
-        var r = e.children, i = e.elementRef, o = O(e, [ "children", "elementRef" ]);
+        var r = e.children, i = e.elementRef, a = O(e, [ "children", "elementRef" ]);
         // @docs-props-type TermPropsBase
-                var l = (0, t.useContext)(a), c = l.separatorCharacter, s = l.termWidth;
+                var o = (0, t.useContext)(s), l = o.layout, c = o.separatorCharacter, d = o.termWidth;
         
-        return n().createElement(b, g({
+        return n().createElement(p, w({
             "data-test": "term",
             ref: i,
-            $separator: c,
-            $termWidth: s
-        }, o), r);
+            $layout: l,
+            $separatorCharacter: c,
+            $termWidth: d
+        }, a), r);
     }
-    S.propTypes = j;
-    /* harmony default export */    const P = S;
+    S.propTypes = k;
+    /* harmony default export */    const j = S;
     // CONCATENATED MODULE: ./src/DefinitionList/DefinitionList.tsx
-    function x() {
-        return x = Object.assign ? Object.assign.bind() : function(e) {
+    function P() {
+        return P = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -223,56 +245,77 @@
                 }
             }
             return e;
-        }, x.apply(null, arguments);
+        }, P.apply(null, arguments);
     }
-    function C(e, r) {
+    function W(e, r) {
         if (null == e) return {};
-        var t, n, i = R(e, r);
+        var t, n, i = $(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) && (i[t] = e[t]);
+            var a = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < a.length; n++) {
+                t = a[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
             }
         }
         return i;
     }
-    function R(e, r) {
+    function $(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 T = {
+    var C = {
         children: o().node,
+        descriptionWidth: o().string,
         elementRef: o().oneOfType([ o().func, o().object ]),
-        separatorCharacter: o().oneOf([ ".", o().string ]),
+        layout: o().oneOf([ "fixed", "auto", "stacked" ]),
+        separatorCharacter: o().string,
         termWidth: o().string
     };
-    function W(e) {
-        var r = e.children, t = e.elementRef, i = e.separatorCharacter, o = e.termWidth, l = o === void 0 ? "120px" : o, c = C(e, [ "children", "elementRef", "separatorCharacter", "termWidth" ]);
+    var L = "120px";
+    function R(e) {
+        var r = e.children, i = e.descriptionWidth, a = e.elementRef, o = e.layout, l = o === void 0 ? "fixed" : o, c = e.separatorCharacter, d = e.termWidth, p = d === void 0 ? L : d, f = W(e, [ "children", "descriptionWidth", "elementRef", "layout", "separatorCharacter", "termWidth" ]);
         // @docs-props-type DefinitionListPropsBase
-        // eslint-disable-next-line react/jsx-no-constructed-context-values, react-perf/jsx-no-new-object-as-prop
-                var s = {
-            separatorCharacter: i,
-            termWidth: l
-        };
+        /* eslint-disable-next-line prefer-rest-params */        var m = arguments[0];
+        (0, t.useEffect)((function() {
+            if (false) {}
+        }), [ l, c, m, i ]);
+        var y;
+        var h;
+        // termWidth and descriptionWidth are not supported in stacked layout
+                if (l === "stacked") {
+            y = undefined;
+            h = undefined;
+        } else {
+            y = l !== "fixed" && p === L ? undefined : p;
+            h = i;
+        }
+        var g = (0, t.useMemo)((function() {
+            return {
+                descriptionWidth: h,
+                layout: l,
+                separatorCharacter: c,
+                termWidth: y
+            };
+        }), [ h, l, c, y ]);
         
-        return n().createElement(u, x({
+        return n().createElement(u, P({
             "data-test": "definition-list",
-            ref: t
-        }, c),  n().createElement(a.Provider, {
-            value: s
+            ref: a,
+            $layout: l
+        }, f),  n().createElement(s.Provider, {
+            value: g
         }, r));
     }
-    W.propTypes = T;
-    W.Description = h;
-    W.Term = P;
-    /* harmony default export */    const _ = W;
+    R.propTypes = C;
+    R.Description = b;
+    R.Term = j;
+    /* harmony default export */    const T = R;
     // CONCATENATED MODULE: ./src/DefinitionList/index.ts
     module.exports = r;
     /******/})();

package/Divider.js

@@ -155,7 +155,7 @@
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (o = 0; o < i.length; o++) {
-                t = i[o], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
+                t = i[o], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
             }
         }
         return n;
@@ -165,7 +165,7 @@
         var t = {};
         for (var o in e) {
             if ({}.hasOwnProperty.call(e, o)) {
-                if (r.includes(o)) continue;
+                if (-1 !== r.indexOf(o)) continue;
                 t[o] = e[o];
             }
         }

package/Dropdown.js

@@ -221,7 +221,7 @@
                 var r = o.target;
                 while (r) {
                     // Ignore clicks on toggle.
-                    if (r.id === X) {
+                    if (V.current === r) {
                         return;
                     }
                     r = r.parentNode;
@@ -237,7 +237,7 @@
                 }
                 A === null || A === void 0 ? void 0 : A(e);
             }
-        }), [ y, O, $, B, A, X ]);
+        }), [ y, O, $, B, A ]);
         var oe = (0, n.useCallback)((function(e) {
             ee({
                 reason: "contentClick",