@splunk/react-ui 4.42.0 → 5.0.0-beta.2

package/ColumnLayout.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            e.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
@@ -56,328 +56,284 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(r);
     // EXPORTS
-        e.d(t, {
-        Column: () => /* reexport */ C,
-        Row: () => /* reexport */ R,
-        default: () => /* reexport */ z
+        e.d(r, {
+        Column: () => /* reexport */ m,
+        Row: () => /* reexport */ x,
+        default: () => /* reexport */ T
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const t = require("react");
+    var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var l =  e.n(i);
-    // CONCATENATED MODULE: external "@splunk/themes/useSplunkTheme"
-    const a = require("@splunk/themes/useSplunkTheme");
-    var o =  e.n(a);
-    // CONCATENATED MODULE: external "lodash/defaults"
-    const s = require("lodash/defaults");
-    var c =  e.n(s);
+    const a = require("prop-types");
+    var i =  e.n(a);
     // CONCATENATED MODULE: external "styled-components"
-    const u = require("styled-components");
-    var d =  e.n(u);
+    const l = require("styled-components");
+    var o =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const f = require("@splunk/themes");
+    const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ColumnLayout/ColumnStyles.ts
-    var p = d().div.withConfig({
+    var u = o().div.withConfig({
         displayName: "ColumnStyles__Styled",
         componentId: "sc-1pchz98-0"
-    })([ "", ";" ], f.mixins.reset("block"));
-    // CONCATENATED MODULE: ./src/utils/types.ts
-    // see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245 for details
-    // regarding the css prop. certain (versions of) libraries included in the compilation
-    // - such as storybook->emotion - introduce the css prop using a global augmentation,
-    // which causes the prop to end up in our declaration files (via JSX.IntrinsicElements).
-    // it's difficult to control all nested dependencies and their types, which is why the
-    // css prop is omitted in the two prop helpers above - this ensures the css prop isn't
-    // erroneously included in react-ui's public api.
-    // see https://github.com/microsoft/TypeScript/pull/12253
-    // see https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html
-    function m(e, t) {
-        if (e === undefined || e === null) {
-            throw new Error(t !== null && t !== void 0 ? t : "Unexpected undefined or null");
+    })([ "", " flex:", ";", "" ], c.mixins.reset("block"), (function(e) {
+        var r = e.$span;
+        return "".concat(r, " ").concat(r, " auto");
+    }), (function(e) {
+        var r = e.$gutter, t = e.$span;
+        if (r === 0) {
+            return (0, l.css)([ "width:", "%;" ], 100 / 12 * t);
         }
-    }
+        var n = r !== undefined ? "".concat(r, "px") : c.variables.spacingXLarge;
+        return (0, l.css)([ "width:calc( (100% - 11 * ", ") * ", " + (", " * ", ") );" ], n, t / 12, n, t - 1);
+    }));
     // CONCATENATED MODULE: ./src/ColumnLayout/Column.tsx
-    function v() {
-        return v = Object.assign ? Object.assign.bind() : function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+    function s() {
+        return s = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        }, v.apply(null, arguments);
+        }, s.apply(null, arguments);
     }
-    function y(e, t) {
+    function d(e, r) {
         if (null == e) return {};
-        var r, n, i = h(e, t);
+        var t, n, a = f(e, r);
         if (Object.getOwnPropertySymbols) {
-            var l = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < l.length; n++) {
-                r = l[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
-        return i;
+        return a;
     }
-    function h(e, t) {
+    function f(e, r) {
         if (null == e) return {};
-        var r = {};
+        var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
-                r[n] = e[n];
+                if (r.includes(n)) continue;
+                t[n] = e[n];
             }
         }
-        return r;
+        return t;
     }
-    var g = {
-        children: l().node,
-        elementRef: l().oneOfType([ l().func, l().object ]),
-        /** @private. */
-        gutter: l().number,
+    var v = {
+        children: i().node,
+        elementRef: i().oneOfType([ i().func, i().object ]),
         /** @private. */
-        isFirstChild: l().bool,
-        /** @private. */
-        isLastChild: l().bool,
-        span: l().number,
-        /** @private. */
-        style: l().object
+        gutter: i().number,
+        span: i().number
     };
-    function b(e) {
-        var t = e.children, r = e.elementRef, i = e.gutter, l = e.span, a = l === void 0 ? 1 : l, o = e.isFirstChild, s = e.isLastChild, u = e.style, d = y(e, [ "children", "elementRef", "gutter", "span", "isFirstChild", "isLastChild", "style" ]);
+    function p(e) {
+        var r = e.children, t = e.elementRef, a = e.gutter, i = e.span, l = i === void 0 ? 1 : i, o = d(e, [ "children", "elementRef", "gutter", "span" ]);
         // @docs-props-type ColumnPropsBase
-                var f = i ? "calc((100% - ".concat(11 * i, "px) * ").concat(a / 12, " + (").concat(i, "px * ").concat(a - 1, "))") : "".concat(100 / 12 * a, "%");
-        m(i);
-        var h = {
-            marginLeft: o ? undefined : i / 2,
-            marginRight: s ? undefined : i / 2,
-            flex: "".concat(a, " ").concat(a, " auto"),
-            // may accommodate small rounding errors and dividers
-            width: f
-        };
-        
-        return n().createElement(p, v({
+                
+        return n().createElement(u, s({
             "data-test": "column",
-            ref: r,
-            style: c()({}, u, h)
-        }, d), t);
+            ref: t,
+            $gutter: a,
+            $span: l
+        }, o), r);
     }
-    b.propTypes = g;
-    /* harmony default export */    const C = b;
+    p.propTypes = v;
+    /* harmony default export */    const m = p;
+    // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
+    const g = require("@splunk/react-ui/Divider");
+    var y =  e.n(g);
     // CONCATENATED MODULE: ./src/ColumnLayout/RowStyles.ts
-    var O = d().div.withConfig({
+    var b = o().div.withConfig({
         displayName: "RowStyles__Styled",
         componentId: "sc-121ntds-0"
-    })([ "", ";flex-flow:row nowrap;&[data-align-items='start']{align-items:flex-start;}&[data-align-items='end']{align-items:flex-end;}&[data-align-items='center']{align-items:center;}&[data-align-items='stretch']{align-items:stretch;}" ], f.mixins.reset("flex"));
-    var w = d().div.withConfig({
-        displayName: "RowStyles__StyledDivider",
-        componentId: "sc-121ntds-1"
-    })([ "border-left:1px solid ", ";flex:0 0 1;align-self:stretch;" ], (0, f.pick)({
-        prisma: f.variables.neutral200,
-        enterprise: {
-            light: f.variables.gray92,
-            dark: f.variables.gray60
+    })([ "", ";flex-flow:row nowrap;", ";&[data-align-items='start']{align-items:flex-start;}&[data-align-items='end']{align-items:flex-end;}&[data-align-items='center']{align-items:center;}&[data-align-items='stretch']{align-items:stretch;}" ], c.mixins.reset("flex"), (function(e) {
+        var r = e.$hasDivider, t = e.$gutter;
+        var n = t !== undefined ? "".concat(t, "px") : c.variables.spacingXLarge;
+        if (r) {
+            return (0, l.css)([ "gap:calc(", " / 2);" ], n);
         }
+        return (0, l.css)([ "gap:", ";" ], n);
     }));
+    var h = o()(y()).withConfig({
+        displayName: "RowStyles__StyledDivider",
+        componentId: "sc-121ntds-1"
+    })([ "border-color:", ";flex:0 0 1;" ], c.variables.borderColorWeak);
     // CONCATENATED MODULE: ./src/ColumnLayout/Row.tsx
-    function S() {
-        return S = Object.assign ? Object.assign.bind() : function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+    function O() {
+        return O = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        }, S.apply(null, arguments);
+        }, O.apply(null, arguments);
     }
-    function j(e, t) {
+    function w(e, r) {
         if (null == e) return {};
-        var r, n, i = x(e, t);
+        var t, n, a = S(e, r);
         if (Object.getOwnPropertySymbols) {
-            var l = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < l.length; n++) {
-                r = l[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
-        return i;
+        return a;
     }
-    function x(e, t) {
+    function S(e, r) {
         if (null == e) return {};
-        var r = {};
+        var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
-                r[n] = e[n];
+                if (r.includes(n)) continue;
+                t[n] = e[n];
             }
         }
-        return r;
+        return t;
     }
-    var P = {
-        alignItems: l().oneOf([ "start", "end", "center", "stretch" ]),
-        children: l().node,
-        /** @private. */
-        divider: l().bool,
-        elementRef: l().oneOfType([ l().func, l().object ]),
+    var j = {
+        alignItems: i().oneOf([ "start", "end", "center", "stretch" ]),
+        children: i().node,
         /** @private. */
-        gutter: l().number,
+        divider: i().bool,
+        elementRef: i().oneOfType([ i().func, i().object ]),
         /** @private. */
-        isFirstChild: l().bool,
-        /** @private. */
-        isLastChild: l().bool,
-        /** @private. */
-        style: l().object
+        gutter: i().number
     };
-    function k(e) {
-        var t = e.alignItems, i = t === void 0 ? "stretch" : t, l = e.children, a = e.divider, o = e.elementRef, s = e.gutter, u = e.isFirstChild, d = e.isLastChild, f = e.style, p = j(e, [ "alignItems", "children", "divider", "elementRef", "gutter", "isFirstChild", "isLastChild", "style" ]);
+    function C(e) {
+        var r = e.alignItems, a = r === void 0 ? "stretch" : r, i = e.children, l = e.divider, o = e.elementRef, c = e.gutter, u = w(e, [ "alignItems", "children", "divider", "elementRef", "gutter" ]);
         // @docs-props-type RowPropsBase
                 if (false) {
-            var v;
+            var s;
         }
-        var y = (0, r.useCallback)((function(e, t) {
+        var d = (0, t.useCallback)((function(e) {
             
-            return (0, r.cloneElement)(e, {
-                gutter: s,
-                isFirstChild: t === 0,
-                isLastChild: t === r.Children.count(l) - 1
+            return (0, t.cloneElement)(e, {
+                gutter: c
             });
-        }), [ l, s ]);
-        var h = (0, r.useCallback)((function(e, t, r, i) {
-            e.push(t);
-            if (a && r < i.length - 1) {
-                e.push( n().createElement(w, {
-                    key: "".concat(r, "-divider")
+        }), [ c ]);
+        var f = (0, t.useCallback)((function(e, r, t, a) {
+            e.push(r);
+            if (l && t < a.length - 1) {
+                e.push( n().createElement(h, {
+                    orientation: "vertical",
+                    decorative: true,
+                    key: "".concat(t, "-divider")
                 }));
             }
             return e;
-        }), [ a ]);
-        m(s);
-        var g = {
-            marginTop: u ? undefined : s / 2,
-            marginBottom: d ? undefined : s / 2
-        };
-        var b = r.Children.toArray(l).filter(r.isValidElement).map(y).reduce(h, []);
+        }), [ l ]);
+        var v = t.Children.toArray(i).filter(t.isValidElement).map(d).reduce(f, []);
         
-        return n().createElement(O, S({
-            style: c()({}, f, g),
-            "data-align-items": i,
+        return n().createElement(b, O({
+            "data-align-items": a,
             "data-test": "row",
+            $hasDivider: l,
+            $gutter: c,
             ref: o
-        }, p), b);
+        }, u), v);
     }
-    k.propTypes = P;
-    /* harmony default export */    const R = k;
+    C.propTypes = j;
+    /* harmony default export */    const x = C;
     // CONCATENATED MODULE: ./src/ColumnLayout/ColumnLayoutStyles.ts
-    var _ = d().div.withConfig({
+    var P = o().div.withConfig({
         displayName: "ColumnLayoutStyles__Styled",
         componentId: "sc-3eatxz-0"
-    })([ "", ";flex-direction:column;" ], f.mixins.reset("flex"));
-    var E = d().div.withConfig({
-        displayName: "ColumnLayoutStyles__StyledDivider",
-        componentId: "sc-3eatxz-1"
-    })([ "border-top:1px solid ", ";height:0;" ], (0, f.pick)({
-        prisma: f.variables.neutral200,
-        enterprise: {
-            light: f.variables.gray92,
-            dark: f.variables.gray60
+    })([ "", ";flex-direction:column;", ";" ], c.mixins.reset("flex"), (function(e) {
+        var r = e.$hasDivider, t = e.$gutter;
+        var n = t !== undefined ? "".concat(t, "px") : c.variables.spacingXLarge;
+        if (r) {
+            return (0, l.css)([ "gap:calc(", " / 2);" ], n);
         }
+        return (0, l.css)([ "gap:", ";" ], n);
     }));
+    var _ = o()(y()).withConfig({
+        displayName: "ColumnLayoutStyles__StyledDivider",
+        componentId: "sc-3eatxz-1"
+    })([ "border-color:", ";height:0;" ], c.variables.borderColorWeak);
     // CONCATENATED MODULE: ./src/ColumnLayout/ColumnLayout.tsx
-    function I() {
-        return I = Object.assign ? Object.assign.bind() : function(e) {
-            for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+    function R() {
+        return R = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        }, I.apply(null, arguments);
+        }, R.apply(null, arguments);
     }
-    function L(e, t) {
+    function $(e, r) {
         if (null == e) return {};
-        var r, n, i = T(e, t);
+        var t, n, a = E(e, r);
         if (Object.getOwnPropertySymbols) {
-            var l = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < l.length; n++) {
-                r = l[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
-        return i;
+        return a;
     }
-    function T(e, t) {
+    function E(e, r) {
         if (null == e) return {};
-        var r = {};
+        var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
-                r[n] = e[n];
+                if (r.includes(n)) continue;
+                t[n] = e[n];
             }
         }
-        return r;
+        return t;
     }
-    var F = {
-        children: l().node,
-        divider: l().oneOf([ "none", "vertical", "horizontal" ]),
-        elementRef: l().oneOfType([ l().func, l().object ]),
-        gutter: l().number
+    var k = {
+        children: i().node,
+        divider: i().oneOf([ "none", "vertical", "horizontal" ]),
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        gutter: i().number
     };
     /**
  * `ColumnLayout` provides simple API for laying out content into columns. It is based on flexbox
  * and has 12 columns.
- */    function q(e) {
-        var t = e.children, i = e.divider, l = i === void 0 ? "none" : i, a = e.elementRef, s = e.gutter, c = L(e, [ "children", "divider", "elementRef", "gutter" ]);
+ */    function I(e) {
+        var r = e.children, a = e.divider, i = a === void 0 ? "none" : a, l = e.elementRef, o = e.gutter, c = $(e, [ "children", "divider", "elementRef", "gutter" ]);
         // @docs-props-type ColumnLayoutPropsBase
-                var u = o()(), d = u.family, f = u.density;
-        var p = (0, r.useCallback)((function(e, n) {
-            var i = n === 0;
-            var a = n === r.Children.count(t) - 1;
-            var o = s;
-            if (o === undefined) {
-                if (d === "prisma") {
-                    if (f === "compact") {
-                        o = 16;
-                    } else if (f === "comfortable") {
-                        o = 24;
-                    }
-                } else if (d === "enterprise") {
-                    o = 30;
-                }
-            }
+                var u = (0, t.useCallback)((function(e) {
             
-            return (0, r.cloneElement)(e, {
-                gutter: o,
-                divider: l === "vertical",
-                isFirstChild: i,
-                isLastChild: a
+            return (0, t.cloneElement)(e, {
+                divider: i === "vertical",
+                gutter: o
             });
-        }), [ t, f, l, d, s ]);
-        var m = (0, r.useCallback)((function(e, t, r, i) {
-            e.push(t);
-            if (l === "horizontal" && r < i.length - 1) {
-                e.push( n().createElement(E, {
-                    key: "".concat(r, "-divider")
+        }), [ i, o ]);
+        var s = (0, t.useCallback)((function(e, r, t, a) {
+            e.push(r);
+            if (i === "horizontal" && t < a.length - 1) {
+                e.push( n().createElement(_, {
+                    decorative: true,
+                    key: "".concat(t, "-divider")
                 }));
             }
             return e;
-        }), [ l ]);
-        var v = r.Children.toArray(t).filter(r.isValidElement).map(p).reduce(m, []);
+        }), [ i ]);
+        var d = t.Children.toArray(r).filter(t.isValidElement).map(u).reduce(s, []);
         
-        return n().createElement(_, I({
+        return n().createElement(P, R({
             "data-test": "column-layout",
-            ref: a
-        }, c), v);
+            $gutter: o,
+            $hasDivider: i === "horizontal",
+            ref: l
+        }, c), d);
     }
-    q.propTypes = F;
-    q.Row = R;
-    q.Column = C;
-    /* harmony default export */    const z = q;
+    I.propTypes = k;
+    I.Row = x;
+    I.Column = m;
+    /* harmony default export */    const T = I;
     // CONCATENATED MODULE: ./src/ColumnLayout/index.ts
-    module.exports = t;
+    module.exports = r;
     /******/})();