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

package/Image.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = r => {
-            /******/ var t = r && r.__esModule ? 
+            /******/ var a = r && r.__esModule ? 
             /******/ () => r["default"]
             /******/ : () => r
             /******/;
-            e.d(t, {
-                a: t
+            e.d(a, {
+                a
             });
-            /******/            return t;
+            /******/            return a;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var a in t) {
-                /******/ if (e.o(t, a) && !e.o(r, a)) {
-                    /******/ Object.defineProperty(r, a, {
+        /******/ e.d = (r, a) => {
+            /******/ for (var t in a) {
+                /******/ if (e.o(a, t) && !e.o(r, t)) {
+                    /******/ Object.defineProperty(r, t, {
                         enumerable: true,
-                        get: t[a]
+                        get: a[t]
                     });
                     /******/                }
                 /******/            }
@@ -61,376 +61,325 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ Z
+        default: () => /* reexport */ G,
+        isAllowedFilename: () => /* reexport */ W
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var a =  e.n(t);
+    const a = require("react");
+    var t =  e.n(a);
     // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var n =  e.n(o);
+    const n = require("prop-types");
+    var i =  e.n(n);
     // CONCATENATED MODULE: external "lodash/endsWith"
-    const i = require("lodash/endsWith");
-    var l =  e.n(i);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const s = require("lodash/omit");
-    var c =  e.n(s);
+    const o = require("lodash/endsWith");
+    var l =  e.n(o);
     // CONCATENATED MODULE: external "lodash/toLower"
-    const u = require("lodash/toLower");
-    var p =  e.n(u);
+    const s = require("lodash/toLower");
+    var c =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-ui/File"
-    const d = require("@splunk/react-ui/File");
-    var f =  e.n(d);
+    const u = require("@splunk/react-ui/File");
+    var p =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/ui-utils/format"
-    const v = require("@splunk/ui-utils/format");
+    const d = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const m = require("@splunk/ui-utils/i18n");
+    const v = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/themes"
-    const b = require("@splunk/themes");
+    const m = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const y = require("@splunk/react-icons/Cross");
-    var g =  e.n(y);
+    const f = require("@splunk/react-icons/Cross");
+    var b =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
-    const h = require("@splunk/react-icons/enterprise/Close");
-    var w =  e.n(h);
+    const g = require("@splunk/react-icons/enterprise/Close");
+    var y =  e.n(g);
     // CONCATENATED MODULE: ./src/Image/icons/Cross.tsx
-    var x = function e() {
-        var r = (0, b.useSplunkTheme)(), t = r.isEnterprise, o = r.isCompact;
-        var n = o ? "20px" : "24px";
-        var i = (0, m._)("Remove");
-        var l = t ?  a().createElement(w(), {
+    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: i
-        }) :  a().createElement(g(), {
-            "aria-label": i,
-            height: n,
-            width: n
+            screenReaderText: o
+        }) :  t().createElement(b(), {
+            "aria-label": o,
+            height: i,
+            width: i
         });
         return l;
     };
-    /* harmony default export */    const k = x;
+    /* harmony default export */    const x = h;
     // CONCATENATED MODULE: external "styled-components"
-    const C = require("styled-components");
-    var S =  e.n(C);
+    const k = require("styled-components");
+    var w =  e.n(k);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const R = require("@splunk/react-ui/Clickable");
-    var O =  e.n(R);
+    const C = require("@splunk/react-ui/Clickable");
+    var S =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/react-ui/Message"
     const I = require("@splunk/react-ui/Message");
-    var _ =  e.n(I);
+    var O =  e.n(I);
     // CONCATENATED MODULE: ./src/Image/ImageStyles.ts
-    var j = S().div.withConfig({
+    var E = w().div.withConfig({
         displayName: "ImageStyles__StyledImagePreview",
         componentId: "sc-16ooypp-0"
-    })([ "position:relative;min-height:", ";", "" ], (0, b.pick)({
+    })([ "position:relative;min-height:", ";", "" ], (0, m.pick)({
         enterprise: "30px",
-        prisma: b.variables.inputHeight
-    }), (0, b.pick)({
-        enterprise: (0, C.css)([ "border:", ";" ], b.variables.border),
-        prisma: (0, C.css)([ "border-radius:", ";overflow:hidden;margin-top:12px;background-color:", ";" ], b.variables.borderRadius, b.variables.interactiveColorBackground)
+        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 E = S().div.withConfig({
+    var _ = w().div.withConfig({
         displayName: "ImageStyles__StyledLabelContainer",
         componentId: "sc-16ooypp-1"
-    })([ "", ";flex-direction:row;justify-content:space-between;background-color:", ";color:", ";opacity:0.9;position:absolute;width:100%;" ], b.mixins.reset("flex"), (0, 
-    b.pick)({
+    })([ "", ";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: b.variables.gray92,
-            dark: b.variables.gray30
+            light: m.variables.gray92,
+            dark: m.variables.gray30
         },
-        prisma: b.mixins.overlayColors(b.variables.interactiveColorBackground, b.variables.interactiveColorOverlaySelected)
-    }), b.variables.contentColorMuted);
-    var P = S()(O()).withConfig({
-        displayName: "ImageStyles__StyledRemoveClickable",
-        componentId: "sc-16ooypp-2"
-    })([ "cursor:pointer;", " padding:", ";text-align:center;height:inherit;&:focus{", "}&:hover{background-color:", ";color:", ";}" ], (0, 
-    b.pick)({
-        enterprise: (0, C.css)([ "flex:0 0 26px;" ]),
-        prisma: (0, C.css)([ "color:", ";border-radius:50%;" ], b.variables.contentColorMuted)
-    }), (0, b.pick)({
-        enterprise: "3px 0",
+        // TODO(SUI-6298): Should use a semantically correct token
         prisma: {
-            comfortable: "0 8px",
-            compact: "0 6px"
+            light: m.mixins.overlayColors("#eeeeee", m.variables.interactiveColorOverlayHover),
+            dark: m.mixins.overlayColors("#272a2f", m.variables.interactiveColorOverlayHover)
         }
-    }), (0, b.pick)({
-        enterprise: (0, C.css)([ "box-shadow:", ";color:", ";" ], b.variables.focusShadow, b.variables.linkColor),
-        prisma: (0, C.css)([ "color:", ";background-color:", ";box-shadow:0 0 0 3px ", ";" ], b.variables.contentColorActive, b.variables.interactiveColorOverlayHover, b.variables.focusColor)
-    }), (0, b.pick)({
+    }), 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: b.variables.gray96,
-            dark: b.variables.gray30
+            light: m.variables.gray96,
+            dark: m.variables.gray30
         },
-        prisma: b.variables.interactiveColorOverlayHover
-    }), (0, b.pick)({
-        enterprise: b.variables.linkColor,
-        prisma: b.variables.contentColorActive
+        prisma: m.variables.interactiveColorOverlayHover
+    }), (0, m.pick)({
+        enterprise: m.variables.contentColorLink,
+        prisma: m.variables.contentColorActive
     }));
-    var q = S().div.withConfig({
+    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:", ";", "" ], b.variables.contentColorActive, (0, 
-    b.pick)({
+    })([ "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: "10px 10px",
-            compact: "6px 10px"
+            comfortable: "6px 10px",
+            compact: "2px 10px"
         }
     }), (function(e) {
         var r = e.$disabled;
-        return r && (0, C.css)([ "background-color:", ";color:", ";cursor:not-allowed;" ], (0, 
-        b.pick)({
-            enterprise: b.variables.gray96,
-            prisma: b.variables.interactiveColorBackgroundDisabled
-        }), b.variables.contentColorDisabled);
+        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 D = S().img.withConfig({
+    var q = w().img.withConfig({
         displayName: "ImageStyles__StyledImageThumbnail",
         componentId: "sc-16ooypp-4"
-    })([ "", ";margin:0 auto;max-height:", "px;max-width:100%;" ], b.mixins.reset("block"), (function(e) {
+    })([ "", ";margin:0 auto;max-height:", "px;max-width:100%;" ], m.mixins.reset("block"), (function(e) {
         return e.maxHeight;
     }));
-    var T = S()(_()).withConfig({
+    var A = w()(O()).withConfig({
         displayName: "ImageStyles__StyledErrorMessage",
         componentId: "sc-16ooypp-5"
-    })([ "margin-top:", ";" ], (0, b.pick)({
-        enterprise: b.variables.spacingXSmall,
+    })([ "margin-top:", ";" ], (0, m.pick)({
+        enterprise: m.variables.spacingXSmall,
         prisma: "12px"
     }));
     // CONCATENATED MODULE: ./src/Image/Image.tsx
-    function A(e) {
-        "@babel/helpers - typeof";
-        return A = "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;
-        }, A(e);
-    }
-    function F() {
-        return F = Object.assign ? Object.assign.bind() : function(e) {
+    function H() {
+        return H = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var a in t) {
-                    ({}).hasOwnProperty.call(t, a) && (e[a] = t[a]);
+                var a = arguments[r];
+                for (var t in a) {
+                    ({}).hasOwnProperty.call(a, t) && (e[t] = a[t]);
                 }
             }
             return e;
-        }, F.apply(null, arguments);
+        }, H.apply(null, arguments);
     }
-    function H(e, r) {
-        if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function");
+    function T(e, r) {
+        return F(e) || U(e, r) || P(e, r) || M();
     }
-    function U(e, r) {
-        for (var t = 0; t < r.length; t++) {
-            var a = r[t];
-            a.enumerable = a.enumerable || !1, a.configurable = !0, "value" in a && (a.writable = !0), 
-            Object.defineProperty(e, J(a.key), a);
+    function M() {
+        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) {
+        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;
         }
     }
-    function M(e, r, t) {
-        return r && U(e.prototype, r), t && U(e, t), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
+    function D(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var a = 0, t = Array(r); a < r; a++) {
+            t[a] = e[a];
+        }
+        return t;
     }
-    function N(e, r) {
-        if ("function" != typeof r && null !== r) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(r && r.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
+    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;
+            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) {
+                }
+            } catch (e) {
+                c = !0, n = e;
+            } finally {
+                try {
+                    if (!s && null != a["return"] && (o = a["return"](), Object(o) !== o)) return;
+                } finally {
+                    if (c) throw n;
+                }
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), r && B(e, r);
-    }
-    function B(e, r) {
-        return B = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, r) {
-            return e.__proto__ = r, e;
-        }, B(e, r);
-    }
-    function L(e) {
-        var r = X();
-        return function() {
-            var t, a = z(e);
-            if (r) {
-                var o = z(this).constructor;
-                t = Reflect.construct(a, arguments, o);
-            } else t = a.apply(this, arguments);
-            return $(this, t);
-        };
-    }
-    function $(e, r) {
-        if (r && ("object" == A(r) || "function" == typeof r)) return r;
-        if (void 0 !== r) throw new TypeError("Derived constructors may only return object or undefined");
-        return W(e);
-    }
-    function W(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function X() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (X = function r() {
-            return !!e;
-        })();
-    }
-    function z(e) {
-        return z = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, z(e);
+            return l;
+        }
     }
-    function G(e, r, t) {
-        return (r = J(r)) in e ? Object.defineProperty(e, r, {
-            value: t,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[r] = t, e;
+    function F(e) {
+        if (Array.isArray(e)) return e;
     }
-    function J(e) {
-        var r = K(e, "string");
-        return "symbol" == A(r) ? r : r + "";
+    function L(e, r) {
+        if (null == e) return {};
+        var a, t, n = N(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]);
+            }
+        }
+        return n;
     }
-    function K(e, r) {
-        if ("object" != A(e) || !e) return e;
-        var t = e[Symbol.toPrimitive];
-        if (void 0 !== t) {
-            var a = t.call(e, r || "default");
-            if ("object" != A(a)) return a;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+    function N(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];
+            }
         }
-        return ("string" === r ? String : Number)(e);
+        return a;
     }
-    /** @public */    var Q = {
-        allowExtensions: n().arrayOf(n().string),
-        defaultFilename: n().string,
-        defaultImageDataURI: n().string,
-        disabled: n().bool,
-        dropAnywhere: n().bool,
-        elementRef: n().oneOfType([ n().func, n().object ]),
-        error: n().bool,
-        maxHeight: n().number,
-        onImageChange: n().func
+    /** @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
     };
-    var V = {
-        allowExtensions: [ "gif", "jpeg", "jpg", "png" ],
-        disabled: false,
-        dropAnywhere: false,
-        error: false,
-        maxHeight: 180
+    var W = function e(r, a) {
+        return !!r && a.some((function(e) {
+            return l()(c()(r), ".".concat(c()(e)));
+        }));
     };
+    var X = new FileReader;
+    var z = [ "gif", "jpeg", "jpg", "png" ];
     /**
  * Image provides the ability to accept image files and present a preview of the image.
- */    var Y =  function(e) {
-        N(t, e);
-        var r = L(t);
-        M(t, null, [ {
-            key: "isAllowedFilename",
-            // @docs-props-type ImagePropsBase
-            value: function e(r, t) {
-                return !!r && t.some((function(e) {
-                    return l()(p()(r), ".".concat(p()(e)));
-                }));
-            }
-        } ]);
-        function t(e) {
-            var a;
-            H(this, t);
-            a = r.call(this, e);
-            G(W(a), "fileReader", void 0);
-            G(W(a), "handleAddFiles", (function(e) {
-                if (e.length > 0) {
-                    var r = e[0];
-                    if (a.fileReader.readyState === 1) {
-                        a.fileReader.abort();
-                    }
-                    a.fileReader.onload = function() {
-                        var e = {
-                            filename: r.name,
-                            imageDataURI: a.fileReader.result
-                        };
-                        a.setState(e);
-                        if (t.isAllowedFilename(r.name, a.props.allowExtensions)) {
-                            var o, n;
-                            (o = (n = a.props).onImageChange) === null || o === void 0 ? void 0 : o.call(n, e);
-                        }
-                    };
-                    a.fileReader.readAsDataURL(r);
-                }
-            }));
-            G(W(a), "handleRemoveFile", (function() {
-                var e, r;
-                if (a.fileReader.readyState === 1) {
-                    a.fileReader.abort();
+ */    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" ]);
+        // @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() {
+            if (false) {}
+        }), [ O, i ]);
+        var M = (0, a.useCallback)((function(e) {
+            if (e.length > 0) {
+                var r = e[0];
+                if (X.readyState === 1) {
+                    X.abort();
                 }
-                var t = {
-                    filename: null,
-                    imageDataURI: null
+                X.onload = function() {
+                    h(r.name);
+                    S(X.result);
+ // TS: guaranteed by readAsDataURL call below (see spec)
+                                        if (W(r.name, n)) {
+                        m === null || m === void 0 ? void 0 : m({
+                            filename: r.name,
+                            imageDataURI: X.result
+                        });
+                    }
                 };
-                a.setState(t);
-                (e = (r = a.props).onImageChange) === null || e === void 0 ? void 0 : e.call(r, t);
-            }));
-            a.state = {
-                filename: e.defaultFilename,
-                imageDataURI: e.defaultImageDataURI
-            };
-            a.fileReader = new FileReader;
-            return a;
-        }
-        M(t, [ {
-            key: "componentDidUpdate",
-            value: function e(r) {
-                if (false) {}
+                X.readAsDataURL(r);
             }
-        }, {
-            key: "render",
-            value: function e() {
-                var r = this.props, o = r.allowExtensions, n = r.maxHeight, i = r.disabled, l = r.error;
-                var s = this.state, u = s.filename, p = s.imageDataURI;
-                var d = o.map((function(e) {
-                    return ".".concat(e);
-                })).join(", ");
-                // TODO: Error text should be customizable, error should support a string prop for customization SUI-5414
-                                var b = u && !t.isAllowedFilename(u, o) || l;
-                var y = (0, m._)("This file extension is unsupported.");
-                var g = (0, v.sprintf)((0, m._)('Remove "%(filename)s"'), {
-                    filename: u
-                });
-                
-                return a().createElement("div", {
-                    "data-test": "image"
-                },  a().createElement(f(), F({}, c()(this.props, [ "allowExtensions", "defaultFilename", "defaultImageDataURI", "maxHeight", "onImageChange" ]), {
-                    accept: d,
-                    allowMultiple: false,
-                    error: b,
-                    onRequestAdd: this.handleAddFiles,
-                    "data-test": "file"
-                }), u && p && !b &&  a().createElement(j, null,  a().createElement(E, null,  a().createElement(q, {
-                    "data-test": "label",
-                    $disabled: i
-                }, u), !i &&  a().createElement(P, {
-                    onClick: this.handleRemoveFile,
-                    "data-test": "remove",
-                    "aria-label": g
-                },  a().createElement(k, null))),  a().createElement(D, {
-                    alt: u,
-                    "data-test": "preview",
-                    maxHeight: n,
-                    src: p
-                }))), b &&  a().createElement(T, {
-                    appearance: "fill",
-                    type: "error"
-                }, y));
+        }), [ n, m ]);
+        var P = (0, a.useCallback)((function() {
+            if (X.readyState === 1) {
+                X.abort();
             }
-        } ]);
-        return t;
-    }(t.Component);
-    G(Y, "propTypes", Q);
-    G(Y, "defaultProps", V);
-    /* harmony default export */    const Z = Y;
+            h(undefined);
+            S(undefined);
+            m === null || m === void 0 ? void 0 : m({
+                filename: null,
+                imageDataURI: null
+            });
+        }), [ m ]);
+        var D = n.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
+        });
+        
+        return t().createElement("div", {
+            "data-test": "image"
+        },  t().createElement(p(), H({}, f, {
+            accept: D,
+            allowMultiple: false,
+            disabled: l,
+            error: U,
+            onRequestAdd: M,
+            "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, {
+            appearance: "fill",
+            type: "error"
+        }, F));
+    }
+    B.propTypes = $;
+    /* harmony default export */    const G = B;
     // CONCATENATED MODULE: ./src/Image/index.ts
     module.exports = r;
     /******/})();