@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.4

package/Image.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = r => {
-            /******/ var a = r && r.__esModule ? 
+            /******/ var t = r && r.__esModule ? 
             /******/ () => r["default"]
             /******/ : () => r
             /******/;
-            e.d(a, {
-                a
+            e.d(t, {
+                a: t
             });
-            /******/            return a;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, a) => {
-            /******/ for (var t in a) {
-                /******/ if (e.o(a, t) && !e.o(r, t)) {
-                    /******/ Object.defineProperty(r, t, {
+        /******/ 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: a[t]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -61,325 +61,198 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ G,
-        isAllowedFilename: () => /* reexport */ W
+        default: () => /* reexport */ P,
+        isAllowedFilename: () => /* reexport */ R
     });
     // CONCATENATED MODULE: external "react"
-    const a = require("react");
-    var t =  e.n(a);
+    const t = require("react");
+    var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const n = require("prop-types");
-    var i =  e.n(n);
+    const a = require("prop-types");
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "lodash/endsWith"
-    const o = require("lodash/endsWith");
-    var l =  e.n(o);
+    const l = require("lodash/endsWith");
+    var i =  e.n(l);
     // CONCATENATED MODULE: external "lodash/toLower"
-    const s = require("lodash/toLower");
-    var c =  e.n(s);
+    const u = require("lodash/toLower");
+    var s =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-ui/File"
-    const u = require("@splunk/react-ui/File");
-    var p =  e.n(u);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/format"
-    const d = require("@splunk/ui-utils/format");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const v = require("@splunk/ui-utils/i18n");
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const m = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const f = require("@splunk/react-icons/Cross");
-    var b =  e.n(f);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
-    const g = require("@splunk/react-icons/enterprise/Close");
-    var y =  e.n(g);
-    // CONCATENATED MODULE: ./src/Image/icons/Cross.tsx
-    var h = function e() {
-        var r = (0, m.useSplunkTheme)(), a = r.isEnterprise, n = r.isCompact;
-        var i = n ? "20px" : "24px";
-        var o = (0, v._)("Remove");
-        var l = a ?  t().createElement(y(), {
-            hideDefaultTooltip: true,
-            screenReaderText: o
-        }) :  t().createElement(b(), {
-            "aria-label": o,
-            height: i,
-            width: i
-        });
-        return l;
-    };
-    /* harmony default export */    const x = h;
-    // CONCATENATED MODULE: external "styled-components"
-    const k = require("styled-components");
-    var w =  e.n(k);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const C = require("@splunk/react-ui/Clickable");
-    var S =  e.n(C);
+    const c = require("@splunk/react-ui/File");
+    var f =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-ui/Message"
-    const I = require("@splunk/react-ui/Message");
-    var O =  e.n(I);
-    // CONCATENATED MODULE: ./src/Image/ImageStyles.ts
-    var E = w().div.withConfig({
-        displayName: "ImageStyles__StyledImagePreview",
-        componentId: "sc-16ooypp-0"
-    })([ "position:relative;min-height:", ";", "" ], (0, m.pick)({
-        enterprise: "30px",
-        prisma: m.variables.inputHeight
-    }), (0, m.pick)({
-        enterprise: (0, k.css)([ "border:1px solid ", ";" ], m.variables.borderColor),
-        prisma: (0, k.css)([ "border-radius:", ";overflow:hidden;margin-top:12px;background-color:", ";" ], m.variables.borderRadius, (0, 
-        m.pick)({
-            light: "#eeeeee",
-            dark: "#272a2f"
-        }))
-    }));
-    var _ = w().div.withConfig({
-        displayName: "ImageStyles__StyledLabelContainer",
-        componentId: "sc-16ooypp-1"
-    })([ "", ";flex-direction:row;justify-content:space-between;align-items:center;min-height:", ";background-color:", ";color:", ";opacity:0.9;position:absolute;width:100%;" ], m.mixins.reset("flex"), (0, 
-    m.pick)({
-        enterprise: "30px",
-        prisma: m.variables.inputHeight
-    }), (0, m.pick)({
-        enterprise: {
-            light: m.variables.gray92,
-            dark: m.variables.gray30
-        },
-        // TODO(SUI-6298): Should use a semantically correct token
-        prisma: {
-            light: m.mixins.overlayColors("#eeeeee", m.variables.interactiveColorOverlayHover),
-            dark: m.mixins.overlayColors("#272a2f", m.variables.interactiveColorOverlayHover)
-        }
-    }), m.variables.contentColorMuted);
-    var j = w()(S()).withConfig({
-        displayName: "ImageStyles__StyledRemoveClickable",
-        componentId: "sc-16ooypp-2"
-    })([ "cursor:pointer;", " text-align:center;height:inherit;&:focus{", "}&:hover{background-color:", ";color:", ";}" ], (0, 
-    m.pick)({
-        enterprise: (0, k.css)([ "flex:0 0 26px;min-height:30px;" ]),
-        prisma: (0, k.css)([ "color:", ";border-radius:50%;min-height:", ";min-width:", ";" ], m.variables.contentColorMuted, m.variables.inputHeight, m.variables.inputHeight)
-    }), (0, m.pick)({
-        enterprise: (0, k.css)([ "box-shadow:", ";color:", ";" ], m.variables.focusShadow, m.variables.contentColorLink),
-        prisma: (0, k.css)([ "color:", ";background-color:", ";box-shadow:0 0 0 3px ", ";" ], m.variables.contentColorActive, m.variables.interactiveColorOverlayHover, m.variables.focusColor)
-    }), (0, m.pick)({
-        enterprise: {
-            light: m.variables.gray96,
-            dark: m.variables.gray30
-        },
-        prisma: m.variables.interactiveColorOverlayHover
-    }), (0, m.pick)({
-        enterprise: m.variables.contentColorLink,
-        prisma: m.variables.contentColorActive
-    }));
-    var R = w().div.withConfig({
-        displayName: "ImageStyles__StyledLabel",
-        componentId: "sc-16ooypp-3"
-    })([ "color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 0 0px;padding:", ";", "" ], m.variables.contentColorActive, (0, 
-    m.pick)({
-        enterprise: "3px 0 3px 10px",
-        prisma: {
-            comfortable: "6px 10px",
-            compact: "2px 10px"
-        }
-    }), (function(e) {
-        var r = e.$disabled;
-        return r && (0, k.css)([ "background-color:", ";color:", ";cursor:not-allowed;" ], (0, 
-        m.pick)({
-            enterprise: m.variables.gray96,
-            prisma: {
-                light: "rgba(0, 0, 0, 0.1)",
-                dark: "rgba(255, 255, 255, 0.15)"
-            }
-        }), m.variables.contentColorDisabled);
-    }));
-    var q = w().img.withConfig({
-        displayName: "ImageStyles__StyledImageThumbnail",
-        componentId: "sc-16ooypp-4"
-    })([ "", ";margin:0 auto;max-height:", "px;max-width:100%;" ], m.mixins.reset("block"), (function(e) {
-        return e.maxHeight;
-    }));
-    var A = w()(O()).withConfig({
-        displayName: "ImageStyles__StyledErrorMessage",
-        componentId: "sc-16ooypp-5"
-    })([ "margin-top:", ";" ], (0, m.pick)({
-        enterprise: m.variables.spacingXSmall,
-        prisma: "12px"
-    }));
+    const d = require("@splunk/react-ui/Message");
+    var v =  e.n(d);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const m = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: ./src/Image/Image.tsx
-    function H() {
-        return H = 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 a = arguments[r];
-                for (var t in a) {
-                    ({}).hasOwnProperty.call(a, t) && (e[t] = a[t]);
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        }, H.apply(null, arguments);
+        }, p.apply(null, arguments);
     }
-    function T(e, r) {
-        return F(e) || U(e, r) || P(e, r) || M();
+    function y(e, r) {
+        return w(e) || O(e, r) || b(e, r) || g();
     }
-    function M() {
+    function g() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function P(e, r) {
+    function b(e, r) {
         if (e) {
-            if ("string" == typeof e) return D(e, r);
-            var a = {}.toString.call(e).slice(8, -1);
-            return "Object" === a && e.constructor && (a = e.constructor.name), "Map" === a || "Set" === a ? Array.from(e) : "Arguments" === a || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a) ? D(e, r) : void 0;
+            if ("string" == typeof e) return h(e, r);
+            var t = {}.toString.call(e).slice(8, -1);
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? h(e, r) : void 0;
         }
     }
-    function D(e, r) {
+    function h(e, r) {
         (null == r || r > e.length) && (r = e.length);
-        for (var a = 0, t = Array(r); a < r; a++) {
-            t[a] = e[a];
+        for (var t = 0, n = Array(r); t < r; t++) {
+            n[t] = e[t];
         }
-        return t;
+        return n;
     }
-    function U(e, r) {
-        var a = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != a) {
-            var t, n, i, o, l = [], s = !0, c = !1;
+    function O(e, r) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var n, a, o, l, i = [], u = !0, s = !1;
             try {
-                if (i = (a = a.call(e)).next, 0 === r) {
-                    if (Object(a) !== a) return;
-                    s = !1;
-                } else for (;!(s = (t = i.call(a)).done) && (l.push(t.value), l.length !== r); s = !0) {
+                if (o = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
+                    u = !1;
+                } else for (;!(u = (n = o.call(t)).done) && (i.push(n.value), i.length !== r); u = !0) {
                 }
             } catch (e) {
-                c = !0, n = e;
+                s = !0, a = e;
             } finally {
                 try {
-                    if (!s && null != a["return"] && (o = a["return"](), Object(o) !== o)) return;
+                    if (!u && null != t["return"] && (l = t["return"](), Object(l) !== l)) return;
                 } finally {
-                    if (c) throw n;
+                    if (s) throw a;
                 }
             }
-            return l;
+            return i;
         }
     }
-    function F(e) {
+    function w(e) {
         if (Array.isArray(e)) return e;
     }
-    function L(e, r) {
+    function j(e, r) {
         if (null == e) return {};
-        var a, t, n = N(e, r);
+        var t, n, a = I(e, r);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < i.length; t++) {
-                a = i[t], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (n[a] = e[a]);
+            var o = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < o.length; n++) {
+                t = o[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
-        return n;
+        return a;
     }
-    function N(e, r) {
+    function I(e, r) {
         if (null == e) return {};
-        var a = {};
-        for (var t in e) {
-            if ({}.hasOwnProperty.call(e, t)) {
-                if (r.includes(t)) continue;
-                a[t] = e[t];
+        var t = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (r.includes(n)) continue;
+                t[n] = e[n];
             }
         }
-        return a;
+        return t;
     }
-    /** @public */    var $ = {
-        allowExtensions: i().arrayOf(i().string),
-        defaultFilename: i().string,
-        defaultImageDataURI: i().string,
-        disabled: i().bool,
-        dropAnywhere: i().bool,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        error: i().bool,
-        maxHeight: i().number,
-        onImageChange: i().func
+    /** @public */    var S = {
+        allowExtensions: o().arrayOf(o().string),
+        defaultFilename: o().string,
+        defaultImageDataURI: o().string,
+        disabled: o().bool,
+        dropAnywhere: o().bool,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        error: o().bool,
+        onImageChange: o().func
     };
-    var W = function e(r, a) {
-        return !!r && a.some((function(e) {
-            return l()(c()(r), ".".concat(c()(e)));
+    var R = function e(r, t) {
+        return !!r && t.some((function(e) {
+            return i()(s()(r), ".".concat(s()(e)));
         }));
     };
-    var X = new FileReader;
-    var z = [ "gif", "jpeg", "jpg", "png" ];
+    var E = new FileReader;
+    var A = [ "gif", "jpeg", "jpg", "png" ];
     /**
  * Image provides the ability to accept image files and present a preview of the image.
- */    function B(e) {
-        var r = e.allowExtensions, n = r === void 0 ? z : r, i = e.defaultFilename, o = e.defaultImageDataURI, l = e.disabled, s = e.error, c = e.maxHeight, u = c === void 0 ? 180 : c, m = e.onImageChange, f = L(e, [ "allowExtensions", "defaultFilename", "defaultImageDataURI", "disabled", "error", "maxHeight", "onImageChange" ]);
+ */    function q(e) {
+        var r = e.allowExtensions, a = r === void 0 ? A : r, o = e.defaultFilename, l = e.defaultImageDataURI, i = e.disabled, u = e.error, s = e.onImageChange, c = j(e, [ "allowExtensions", "defaultFilename", "defaultImageDataURI", "disabled", "error", "onImageChange" ]);
         // @docs-props-type ImagePropsBase
-                var b = (0, a.useState)(i), g = T(b, 2), y = g[0], h = g[1];
-        var k = (0, a.useState)(o), w = T(k, 2), C = w[0], S = w[1];
-        var I = (0, a.useRef)(i), O = I.current;
-        (0, a.useEffect)((function() {
+                var d = (0, t.useState)(o), g = y(d, 2), b = g[0], h = g[1];
+        var O = (0, t.useState)(l), w = y(O, 2), I = w[0], S = w[1];
+        var q = (0, t.useRef)(o), P = q.current;
+        (0, t.useEffect)((function() {
             if (false) {}
-        }), [ O, i ]);
-        var M = (0, a.useCallback)((function(e) {
+        }), [ P, o ]);
+        var U = (0, t.useCallback)((function(e) {
             if (e.length > 0) {
                 var r = e[0];
-                if (X.readyState === 1) {
-                    X.abort();
+                if (E.readyState === 1) {
+                    E.abort();
                 }
-                X.onload = function() {
+                E.onload = function() {
                     h(r.name);
-                    S(X.result);
+                    S(E.result);
  // TS: guaranteed by readAsDataURL call below (see spec)
-                                        if (W(r.name, n)) {
-                        m === null || m === void 0 ? void 0 : m({
+                                        if (R(r.name, a)) {
+                        s === null || s === void 0 ? void 0 : s({
                             filename: r.name,
-                            imageDataURI: X.result
+                            imageDataURI: E.result
                         });
                     }
                 };
-                X.readAsDataURL(r);
+                E.readAsDataURL(r);
             }
-        }), [ n, m ]);
-        var P = (0, a.useCallback)((function() {
-            if (X.readyState === 1) {
-                X.abort();
+        }), [ a, s ]);
+        var x = (0, t.useCallback)((function() {
+            if (E.readyState === 1) {
+                E.abort();
             }
             h(undefined);
             S(undefined);
-            m === null || m === void 0 ? void 0 : m({
+            s === null || s === void 0 ? void 0 : s({
                 filename: null,
                 imageDataURI: null
             });
-        }), [ m ]);
-        var D = n.map((function(e) {
+        }), [ s ]);
+        var C = a.map((function(e) {
             return ".".concat(e);
         })).join(", ");
         // TODO: Error text should be customizable, error should support a string prop for customization SUI-5414
-                var U = y && !W(y, n) || s;
-        var F = (0, v._)("This file extension is unsupported.");
-        var N = (0, d.sprintf)((0, v._)('Remove "%(filename)s"'), {
-            filename: y
-        });
+                var D = b && !R(b, a) || u;
+        var F = (0, m._)("This file extension is unsupported.");
         
-        return t().createElement("div", {
+        return n().createElement("div", {
             "data-test": "image"
-        },  t().createElement(p(), H({}, f, {
-            accept: D,
+        },  n().createElement(f(), p({}, c, {
+            accept: C,
             allowMultiple: false,
-            disabled: l,
-            error: U,
-            onRequestAdd: M,
+            disabled: i,
+            error: D,
+            onRequestAdd: U,
+            onRequestRemove: x,
             "data-test": "file"
-        }), y && C && !U &&  t().createElement(E, null,  t().createElement(_, null,  t().createElement(R, {
-            "data-test": "label",
-            $disabled: !!l
-        }, y), !l &&  t().createElement(j, {
-            onClick: P,
-            "data-test": "remove",
-            "aria-label": N
-        },  t().createElement(x, null))),  t().createElement(q, {
-            alt: y,
-            "data-test": "preview",
-            maxHeight: u,
-            src: C
-        }))), U &&  t().createElement(A, {
+        }), b && I && !D &&  n().createElement(f().Item, {
+            icon:  n().createElement("img", {
+                alt: b,
+                "data-test": "preview",
+                src: I
+            }),
+            name: b
+        })), D &&  n().createElement(v(), {
             appearance: "fill",
             type: "error"
         }, F));
     }
-    B.propTypes = $;
-    /* harmony default export */    const G = B;
+    q.propTypes = S;
+    /* harmony default export */    const P = q;
     // CONCATENATED MODULE: ./src/Image/index.ts
     module.exports = r;
     /******/})();

package/Layout.d.ts

@@ -0,0 +1,2 @@
+export { default } from './types/src/Layout';
+export * from './types/src/Layout';

package/MIGRATION.v5.mdx

@@ -207,7 +207,7 @@ Components that formerly supported class focus methods (`Color`, `Link`, `Menu`,
 ### Migration steps
 - Convert all usage of `ref` to `elementRef`.
 - For `Number` and `Text`: Replace all usage of the class `focus` method with passing a `ref` to the `inputRef` prop and calling `inputRef.current.focus()`.
-- For `Button`, `Color`, `Link`, `Menu`, `Select.Option`, `SplitButton.Item`, and `TabBar.Tab`: Replace all usage of the class `focus` method with passing a `ref` to the `elementRef` prop and calling `elementRef.current.focus()`.
+- For `Button`, `Color`, `Link`, `Menu`, `Multiselect.Option`, `Select.Option`, `SplitButton.Item`, and `TabBar.Tab`: Replace all usage of the class `focus` method with passing a `ref` to the `elementRef` prop and calling `elementRef.current.focus()`.
 - For `Table.HeadDropdownCell`: Replace all usage of the class `focus` method with passing a `ref` to the `buttonRef` prop and calling `buttonRef.current.focus()`.
 - For `Switch`: Replace all usage of the class `focus` method with passing a `ref` to the `toggleRef` prop and calling `toggleRef.current.focus()`.
 - For `Slider`: Replace all usage of the class `focus` method with passing a `ref` to the `thumbRef` prop and calling `thumbRef.current.focus()`.

package/Menu.js

@@ -119,7 +119,7 @@
     var C = d()(g()).withConfig({
         displayName: "ItemStyles__StyledNonInteractiveCheckbox",
         componentId: "sc-4kc053-4"
-    })([ "padding-right:", ";" ], f.variables.spacingSmall);
+    })([ "min-height:0;padding-right:", ";" ], f.variables.spacingSmall);
     var I = d()(b()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-5"