@procore/core-react 10.30.0 → 11.0.0-rc.2

package/dist/TextEditor/TextEditor.js

@@ -0,0 +1,72 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Editor } from '@tinymce/tinymce-react';
+import React, { useState } from 'react';
+import { useI18nContext } from '../_hooks/I18n';
+import { defaultPlugins, generateExternalPlugins, generateLanguageUrl, getValidLookupLocale, tinyMCEConfig, tinyMCESource, tinyMCEVersion, } from '../_utils/TinyMCE';
+var errorRed = '#E61920';
+function noop() { }
+/**
+
+ We use text editors to allow users to enter multiple lines of formatted text.
+
+ If users need to add unformatted text, see Text Area.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-texteditor--demo)
+
+ @see [Design Guidelines](https://design.procore.com/text-editor)
+
+ */
+export function TextEditor(_a) {
+    var _b, _c;
+    var error = _a.error, initOverrides = _a.init, locale = _a.locale, _d = _a.onChange, onChange = _d === void 0 ? noop : _d, _onInit = _a.onInit, _e = _a.plugins, plugins = _e === void 0 ? defaultPlugins : _e, props = __rest(_a, ["error", "init", "locale", "onChange", "onInit", "plugins"]);
+    var contextLocale = useI18nContext().locale;
+    var onEditorChange = function (_, editor) {
+        onChange(editor.getContent(), editor.isDirty());
+    };
+    var ref = React.useRef();
+    var updateError = function () {
+        if (ref.current) {
+            if (error) {
+                ref.current.style.borderColor = errorRed;
+            }
+            else {
+                ref.current.style.borderColor = '';
+            }
+        }
+    };
+    React.useEffect(function () {
+        updateError();
+    }, [error]);
+    var onInit = function (event, editor) {
+        ref.current = editor.editorContainer;
+        updateError();
+        _onInit && _onInit(event, editor);
+    };
+    var derivedInitial = useState((_b = props.initialValue) !== null && _b !== void 0 ? _b : props.value)[0];
+    return (React.createElement(Editor, __assign({ init: __assign(__assign(__assign({}, tinyMCEConfig), { external_plugins: generateExternalPlugins(plugins), language_url: generateLanguageUrl(locale || contextLocale), language: getValidLookupLocale(locale || contextLocale), content_style: "p { margin: 0; }" }), initOverrides), tinymceScriptSrc: "".concat(tinyMCESource, "/").concat(tinyMCEVersion, "/tinymce.min.js"), onInit: onInit, onEditorChange: onEditorChange }, props, { value: (_c = props.value) !== null && _c !== void 0 ? _c : props.initialValue, initialValue: derivedInitial })));
+}
+TextEditor.displayName = 'TextEditor';
+//# sourceMappingURL=TextEditor.js.map

package/dist/TextEditor/TextEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditor.js","sourceRoot":"","sources":["../../src/TextEditor/TextEditor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EACL,cAAc,EACd,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,aAAa,EACb,aAAa,EACb,cAAc,GACf,MAAM,mBAAmB,CAAA;AAG1B,IAAM,QAAQ,GAAG,SAAS,CAAA;AAE1B,SAAS,IAAI,KAAI,CAAC;AAElB;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,EAQT;;IAPhB,IAAA,KAAK,WAAA,EACC,aAAa,UAAA,EACnB,MAAM,YAAA,EACN,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACP,OAAO,YAAA,EACf,eAAwB,EAAxB,OAAO,mBAAG,cAAc,KAAA,EACrB,KAAK,cAPiB,4DAQ1B,CADS;IAEA,IAAQ,aAAa,GAAK,cAAc,EAAE,OAArB,CAAqB;IAElD,IAAM,cAAc,GAEE,UAAC,CAAM,EAAE,MAAW;QACxC,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAA;IACjD,CAAC,CAAA;IAED,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,EAAe,CAAA;IAEvC,IAAM,WAAW,GAAG;QAClB,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,IAAI,KAAK,EAAE;gBACT,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,QAAQ,CAAA;aACzC;iBAAM;gBACL,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAA;aACnC;SACF;IACH,CAAC,CAAA;IAED,KAAK,CAAC,SAAS,CAAC;QACd,WAAW,EAAE,CAAA;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,IAAM,MAAM,GAAkD,UAC5D,KAAK,EACL,MAAM;QAEN,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,eAAe,CAAA;QACpC,WAAW,EAAE,CAAA;QACb,OAAO,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACnC,CAAC,CAAA;IAEM,IAAA,cAAc,GAAI,QAAQ,CAAC,MAAA,KAAK,CAAC,YAAY,mCAAI,KAAK,CAAC,KAAK,CAAC,GAA/C,CAA+C;IAEpE,OAAO,CACL,oBAAC,MAAM,aACL,IAAI,iCACC,aAAa,KAChB,gBAAgB,EAAE,uBAAuB,CAAC,OAAO,CAAC,EAClD,YAAY,EAAE,mBAAmB,CAAC,MAAM,IAAI,aAAa,CAAC,EAC1D,QAAQ,EAAE,oBAAoB,CAAC,MAAM,IAAI,aAAa,CAAC,EACvD,aAAa,EAAE,kBAAkB,KAC9B,aAAa,GAElB,gBAAgB,EAAE,UAAG,aAAa,cAAI,cAAc,oBAAiB,EACrE,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,IAC1B,KAAK,IACT,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,KAAK,CAAC,YAAY,EACxC,YAAY,EAAE,cAAc,IAC5B,CACH,CAAA;AACH,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}

package/dist/TextEditor/TextEditor.types.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Editor, IAllProps } from '@tinymce/tinymce-react';
+import { Locale } from '../_hooks/I18n';
+export interface TextEditorProps extends Omit<React.ComponentProps<typeof Editor>, 'onChange' | 'onKeyUp'> {
+    /**
+     * @since 10.19.0
+     */
+    disabled?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    error?: boolean;
+    /**
+     * @unsupported Use at your own risk. DST makes no guarantees about this API,
+     * and is subject to removal at any point without warning or deprecation.
+     * @since 10.19.0
+     */
+    init?: IAllProps['init'];
+    /**
+     * @deprecated
+     * `initialValue` has been deprecated and will be removed in a future version.
+     * Please use the `value` prop instead
+     *
+     * The first value passed into `value` prop will be the `TextEditor` initial
+     * value. Changing the value will update the text of the `TextEditor`.
+     * The editor should be controlled via the combination of `value`
+     * and `onChange` props.
+     *
+     * **Before**
+     *
+     * `<TextEditor initialValue="Hello World" />`
+     *
+     * **After**
+     *
+     * `<TextEditor value="Hello World" />`
+     *
+     * @deprecatedSince 10.20.0
+     * @since 10.19.0
+     */
+    initialValue?: string;
+    /**
+     * Locale which will be used used for localization. Can be passed directly or
+     * set by wrapping components in I18n provider. Icelandic (is-IS) is not
+     * actually supported by TinyMCE, so it is defaulted to english.
+     * @since 10.19.0
+     */
+    locale?: Locale;
+    /**
+     * <div>onChange event handler for text editor area</div>
+     * <CodeBlock>(content: string) => void</CodeBlock>
+     * @since 10.19.0
+     */
+    onChange?: (content: string, isDirty?: boolean) => void;
+    /**
+     * <div>
+     *  Array of plugins to use with the editor in addition to the defaults.
+     *  Can be any of:
+     * </div>
+     * <CodeBlock>
+     *  [{plugins.map((plugin) => `'${plugin}'`).join(', ')}]
+     * </CodeBlock>
+     * @since 10.19.0
+     */
+    plugins?: Array<string>;
+}

package/dist/TextEditor/TextEditor.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditor.types.js","sourceRoot":"","sources":["../../src/TextEditor/TextEditor.types.ts"],"names":[],"mappings":""}

package/dist/TextEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { TextEditor } from './TextEditor';
+export { TextEditorProps } from './TextEditor.types';

package/dist/TextEditor/index.js

@@ -0,0 +1,2 @@
+export { TextEditor } from './TextEditor';
+//# sourceMappingURL=index.js.map

package/dist/TextEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/dist/TextEditorOutput/TextEditorOutput.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TextEditorOutputProps } from './TextEditorOutput.types';
+import { DivAttributes } from '../_utils/types';
+/**
+
+ We use TextEditorOutput to render formatted text.
+
+ @since 10.24.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-texteditoroutput--demo)
+
+ */
+export declare const TextEditorOutput: React.ForwardRefExoticComponent<TextEditorOutputProps & DivAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/TextEditorOutput/TextEditorOutput.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Editor } from '@tinymce/tinymce-react';
+import React from 'react';
+import { generateExternalPlugins, tinyMCEConfig, tinyMCESource, tinyMCEVersion, } from '../_utils/TinyMCE';
+import { StyledEditor } from './TextEditorOutput.styles';
+/**
+
+ We use TextEditorOutput to render formatted text.
+
+ @since 10.24.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-texteditoroutput--demo)
+
+ */
+export var TextEditorOutput = React.forwardRef(function TextEditorOutput(_a, ref) {
+    var value = _a.value, props = __rest(_a, ["value"]);
+    return (React.createElement(StyledEditor, __assign({}, props, { ref: ref }),
+        React.createElement(Editor, { value: value, init: __assign(__assign({}, tinyMCEConfig), { external_plugins: generateExternalPlugins(['autoresize']), toolbar: false, autoresize_overflow_padding: 0, min_height: 0, content_style: "body { margin: 0; padding: 0; } p { margin: 0; }" }), tinymceScriptSrc: "".concat(tinyMCESource, "/").concat(tinyMCEVersion, "/tinymce.min.js"), disabled: true })));
+});
+TextEditorOutput.displayName = 'TextEditorOutput';
+//# sourceMappingURL=TextEditorOutput.js.map

package/dist/TextEditorOutput/TextEditorOutput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditorOutput.js","sourceRoot":"","sources":["../../src/TextEditorOutput/TextEditorOutput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,uBAAuB,EACvB,aAAa,EACb,aAAa,EACb,cAAc,GACf,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAGxD;;;;;;;;GAQG;AACH,MAAM,CAAC,IAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAG9C,SAAS,gBAAgB,CAAC,EAAmB,EAAE,GAAG;IAAtB,IAAA,KAAK,WAAA,EAAK,KAAK,cAAjB,SAAmB,CAAF;IAC3C,OAAO,CACL,oBAAC,YAAY,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG;QAC/B,oBAAC,MAAM,IACL,KAAK,EAAE,KAAK,EACZ,IAAI,wBACC,aAAa,KAChB,gBAAgB,EAAE,uBAAuB,CAAC,CAAC,YAAY,CAAC,CAAC,EACzD,OAAO,EAAE,KAAK,EACd,2BAA2B,EAAE,CAAC,EAC9B,UAAU,EAAE,CAAC,EACb,aAAa,EAAE,kDAAkD,KAEnE,gBAAgB,EAAE,UAAG,aAAa,cAAI,cAAc,oBAAiB,EACrE,QAAQ,SACR,CACW,CAChB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA"}

package/dist/TextEditorOutput/TextEditorOutput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditorOutput.styles.js","sourceRoot":"","sources":["../../src/TextEditorOutput/TextEditorOutput.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,IAAM,YAAY,GAAG,MAAM,CAAC,GAAG,mHAAA,gDAIrC,IAAA,CAAA"}

package/dist/TextEditorOutput/TextEditorOutput.types.d.ts

@@ -0,0 +1,9 @@
+import { IAllProps } from '@tinymce/tinymce-react';
+import { Props } from '../_utils/types';
+export interface TextEditorOutputProps extends Omit<Props, 'children'> {
+    /**
+     * formatted text
+     * @since 10.24.0
+     * */
+    value?: IAllProps['value'];
+}

package/dist/TextEditorOutput/TextEditorOutput.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditorOutput.types.js","sourceRoot":"","sources":["../../src/TextEditorOutput/TextEditorOutput.types.ts"],"names":[],"mappings":""}

package/dist/TextEditorOutput/index.d.ts

@@ -0,0 +1 @@
+export { TextEditorOutput } from './TextEditorOutput';

package/dist/TextEditorOutput/index.js

@@ -0,0 +1,2 @@
+export { TextEditorOutput } from './TextEditorOutput';
+//# sourceMappingURL=index.js.map

package/dist/TextEditorOutput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextEditorOutput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/Thumbnail/DocumentIcon.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type DocumentIconVariant = 'image' | 'unknown' | 'zip' | 'drawing' | 'email' | 'excel' | 'gantt' | 'ini' | 'mov' | 'pdf' | 'powerpoint' | 'word' | 'xml' | '3d' | 'folder' | 'folderPeople' | 'folderLock';
+export interface DocumentIconProps {
+    variant: DocumentIconVariant;
+    className?: string;
+    width?: string | number;
+    height?: string | number;
+    focusable?: boolean;
+}
+export declare function DocumentIcon({ className, focusable, height, variant, width, }: DocumentIconProps): JSX.Element;

package/dist/Thumbnail/DocumentIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentIcon.js","sourceRoot":"","sources":["../../src/Thumbnail/DocumentIcon.tsx"],"names":[],"mappings":"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"}

package/dist/Thumbnail/Thumbnail.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { PlaceholderProps, ThumbnailProps } from './Thumbnail.types';
+import { DivAttributes } from '../_utils/types';
+export declare const Thumbnail: React.ForwardRefExoticComponent<ThumbnailProps & DivAttributes & React.RefAttributes<HTMLDivElement>> & {
+    Placeholder: React.ForwardRefExoticComponent<PlaceholderProps & DivAttributes & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/Thumbnail/Thumbnail.js

@@ -0,0 +1,97 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+import { ThumbnailPreview } from './ThumbnailPreview';
+import { StyledFileIcon, StyledImageThumbnail, StyledImageThumbnailImage, StyledImageThumbnailOverlay, StyledLabel, StyledPlaceholderThumbnail, StyledThumbnailWrapper, StyledTickIcon, StyledLabelText, } from './Thumbnail.styles';
+import { getIsFilePreviewableAsImage, getVariantForFilename, } from './Thumbnail.utils';
+import { ThumbnailCaption } from './ThumbnailCaption';
+var defaultSize = 'lg';
+function TickIcon(_a) {
+    var size = _a.size, selected = _a.selected;
+    return (React.createElement(StyledTickIcon
+    // in IE11, all svg element are focusable by default
+    , { 
+        // in IE11, all svg element are focusable by default
+        focusable: false, selected: selected, size: size, width: "26", height: "26", viewBox: "0 0 26 26", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M1 13C1 6.37258 6.37258 1 13 1C19.6274 1 25 6.37258 25 13C25 19.6274 19.6274 25 13 25C6.37258 25 1 19.6274 1 13Z", fill: "white" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.167 17.5L7 13.459L8.6155 12.0535L11.167 14.5285L17.3845 8.5L19 9.9055L11.167 17.5ZM13 1C6.3715 1 1 6.373 1 13C1 19.627 6.3715 25 13 25C19.627 25 25 19.627 25 13C25 6.373 19.627 1 13 1Z", fill: "hsl(218,75%,50%)" }),
+        React.createElement("path", { d: "M13 24C6.92487 24 2 19.0751 2 13H0C0 20.1797 5.8203 26 13 26V24ZM24 13C24 19.0751 19.0751 24 13 24V26C20.1797 26 26 20.1797 26 13H24ZM13 2C19.0751 2 24 6.92487 24 13H26C26 5.8203 20.1797 0 13 0V2ZM13 0C5.8203 0 0 5.8203 0 13H2C2 6.92487 6.92487 2 13 2V0Z", fill: "white" })));
+}
+function Label(_a) {
+    var label = _a.label, disabled = _a.disabled;
+    return label ? (React.createElement(StyledLabel, null,
+        React.createElement(StyledLabelText, { color: disabled ? 'gray70' : 'gray15', intent: "small", weight: "bold" }, label))) : null;
+}
+/**
+
+ We use thumbnails to display previews for images or files as either a smaller
+ version of an uploaded image, or an icon representing the file type. If an
+ image preview can be generated from the file (in the case of images) then
+ display that image.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-thumbnail--demo-thumbnail)
+
+ @see [Design Guidelines](https://design.procore.com/thumbnail)
+
+ */
+var Thumbnail_ = React.forwardRef(function Thumbnail(_a, ref) {
+    var src = _a.src, _b = _a.size, size = _b === void 0 ? defaultSize : _b, _c = _a.focused, focused = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.selected, selected = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.clickable, clickable = _g === void 0 ? true : _g, _h = _a.caption, caption = _h === void 0 ? '' : _h, _j = _a.label, label = _j === void 0 ? '' : _j, _k = _a.hasCaptionPlaceholder, hasCaptionPlaceholder = _k === void 0 ? false : _k, className = _a.className, qa = _a.qa, props = __rest(_a, ["src", "size", "focused", "error", "selected", "disabled", "clickable", "caption", "label", "hasCaptionPlaceholder", "className", "qa"]);
+    var layout = size === 'sm' ? 'row' : 'column';
+    var isFile = src instanceof File;
+    var canPreviewFileAsImage = getIsFilePreviewableAsImage(src);
+    var isFileOrNonPreviewableImage = isFile && !canPreviewFileAsImage;
+    var shouldUsePlaceholder = isFileOrNonPreviewableImage || !src;
+    if (shouldUsePlaceholder) {
+        var filename = isFileOrNonPreviewableImage ? src.name : caption;
+        return (React.createElement(Placeholder, __assign({ ref: ref, filename: filename, size: size, focused: focused, selected: selected, disabled: disabled, error: error, clickable: clickable, caption: caption, hasCaptionPlaceholder: hasCaptionPlaceholder, label: label, className: className, qa: qa }, props)));
+    }
+    var isImageURL = typeof src === 'string';
+    if (!isFile && !isImageURL) {
+        console.warn('Unknown Thumbnail source:', src);
+        return null;
+    }
+    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: layout, size: size }, props),
+        React.createElement(StyledImageThumbnail, { focused: focused, disabled: disabled, selected: selected, clickable: clickable, size: size },
+            isImageURL ? (React.createElement(StyledImageThumbnailImage, { src: src })) : (React.createElement(ThumbnailPreview, { file: src })),
+            React.createElement(TickIcon, { size: size, selected: selected }),
+            React.createElement(StyledImageThumbnailOverlay, null),
+            size === 'lg' && React.createElement(Label, { label: label, disabled: disabled })),
+        React.createElement(ThumbnailCaption, { qa: qa === null || qa === void 0 ? void 0 : qa.caption, multiline: size === 'lg', layout: layout, caption: caption, hasCaptionPlaceholder: hasCaptionPlaceholder, disabled: disabled, error: error })));
+});
+var Placeholder = React.forwardRef(function Placeholder(_a, ref) {
+    var _b = _a.filename, filename = _b === void 0 ? '' : _b, _c = _a.caption, caption = _c === void 0 ? '' : _c, _d = _a.label, label = _d === void 0 ? '' : _d, variant = _a.variant, _e = _a.size, size = _e === void 0 ? 'lg' : _e, _f = _a.focused, focused = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.selected, selected = _j === void 0 ? false : _j, _k = _a.clickable, clickable = _k === void 0 ? true : _k, _l = _a.hasCaptionPlaceholder, hasCaptionPlaceholder = _l === void 0 ? false : _l, qa = _a.qa, props = __rest(_a, ["filename", "caption", "label", "variant", "size", "focused", "disabled", "error", "selected", "clickable", "hasCaptionPlaceholder", "qa"]);
+    var layout = size === 'sm' ? 'row' : 'column';
+    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: layout, size: size }, props),
+        React.createElement(StyledPlaceholderThumbnail, { focused: focused, disabled: disabled, selected: selected, clickable: clickable, size: size },
+            React.createElement(TickIcon, { size: size, selected: selected }),
+            React.createElement(StyledFileIcon, { variant: variant || getVariantForFilename(filename) }),
+            size === 'lg' && React.createElement(Label, { label: label, disabled: disabled })),
+        React.createElement(ThumbnailCaption, { error: error, qa: qa === null || qa === void 0 ? void 0 : qa.caption, multiline: size === 'lg', layout: layout, caption: caption, hasCaptionPlaceholder: hasCaptionPlaceholder, disabled: disabled })));
+});
+Placeholder.displayName = 'Thumbnail.Placeholder';
+Thumbnail_.displayName = 'Thumbnail';
+export var Thumbnail = addSubcomponents({ Placeholder: Placeholder }, Thumbnail_);
+//# sourceMappingURL=Thumbnail.js.map

package/dist/Thumbnail/Thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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"}

package/dist/Thumbnail/Thumbnail.styles.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { DocumentIcon } from './DocumentIcon';
+import { LayoutVariant, SizeVariant } from './Thumbnail.types';
+interface CaptionProps {
+    layout: LayoutVariant;
+    error: boolean;
+    disabled: boolean;
+}
+interface StyledThumbnailProps {
+    focused: boolean;
+    disabled: boolean;
+    selected: boolean;
+    clickable: boolean;
+    size: SizeVariant;
+}
+interface StyledTickIconProps {
+    selected: boolean;
+    size: SizeVariant;
+}
+export declare const StyledMultilineCaption: import("styled-components").StyledComponent<"div", any, CaptionProps, never>;
+export declare const StyledCaptionText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledPlaceholderCaption: import("styled-components").StyledComponent<"div", any, CaptionProps, never>;
+export declare const StyledSingleLineCaption: import("styled-components").StyledComponent<"div", any, CaptionProps, never>;
+export declare const StyledSinglelineCaptionBody: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledSinglelineCaptionEnding: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledLabelText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../_utils/types").SpanAttributes & import("../Typography").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTickIcon: import("styled-components").StyledComponent<"svg", any, StyledTickIconProps, never>;
+export declare const StyledFileIcon: import("styled-components").StyledComponent<typeof DocumentIcon, any, {}, never>;
+export declare const StyledImageThumbnailPreview: import("styled-components").StyledComponent<"div", any, {
+    $bgImage: string;
+}, never>;
+export declare const StyledImageThumbnailOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledImageThumbnailImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const StyledImageThumbnail: import("styled-components").StyledComponent<"div", any, StyledThumbnailProps, never>;
+export declare const StyledThumbnailWrapper: import("styled-components").StyledComponent<"div", any, {
+    layout: LayoutVariant;
+    size: SizeVariant;
+}, never>;
+export declare const StyledPlaceholderThumbnail: import("styled-components").StyledComponent<"div", any, StyledThumbnailProps, never>;
+export {};

package/dist/Thumbnail/Thumbnail.styles.js

@@ -0,0 +1,150 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { borderRadius } from '../_styles/borderRadius';
+import { colors } from '../_styles/colors';
+import { getEllipsis, getFocus } from '../_styles/mixins';
+import { spacing } from '../_styles/spacing';
+import { Typography } from '../Typography';
+import { DocumentIcon } from './DocumentIcon';
+var thumbnailSizeSm = 40;
+var thumbnailSizeLg = 104;
+var labelHeight = 24;
+var labelFontSize = 12;
+var tickSize = 24;
+var rowLayoutCaptionWidth = 288;
+var multilineCaptionMaxHeight = spacing.lg * 2;
+var captionBase = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  ", "\n  ", "\n\n  ", "\n  ", "\n"], ["\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  ", "\n  ", "\n\n  ", "\n  ", "\n"])), colors.gray15, function (_a) {
+    var layout = _a.layout;
+    return layout === 'row'
+        ? "\n        align-items: center;\n        margin-left: ".concat(spacing.sm, "px;\n        width: ").concat(rowLayoutCaptionWidth, "px;\n      ")
+        : '';
+}, function (_a) {
+    var layout = _a.layout;
+    return layout === 'column'
+        ? "\n        margin-top: ".concat(spacing.xs / 2, "px;\n        width: ").concat(thumbnailSizeLg, "px;\n      ")
+        : '';
+}, function (_a) {
+    var error = _a.error;
+    return (error ? "color: ".concat(colors.red50, ";") : '');
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? "color: ".concat(colors.gray70, ";") : '');
+});
+export var StyledMultilineCaption = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  word-wrap: break-word;\n  // for IE11, use word-wrap property\n  overflow-wrap: break-word;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  // limit height for browsers that do not support line-clamp CSS prop\n  max-height: ", "px;\n"], ["\n  ", "\n  display: flex;\n  word-wrap: break-word;\n  // for IE11, use word-wrap property\n  overflow-wrap: break-word;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  // limit height for browsers that do not support line-clamp CSS prop\n  max-height: ", "px;\n"])), captionBase, multilineCaptionMaxHeight);
+export var StyledCaptionText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  // fix word wrap issue in IE\n  width: 100%;\n"], ["\n  // fix word wrap issue in IE\n  width: 100%;\n"])));
+export var StyledPlaceholderCaption = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), captionBase);
+export var StyledSingleLineCaption = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), captionBase);
+export var StyledSinglelineCaptionBody = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), getEllipsis);
+export var StyledSinglelineCaptionEnding = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  max-width: 50%;\n  white-space: nowrap;\n  flex-shrink: 0;\n"], ["\n  max-width: 50%;\n  white-space: nowrap;\n  flex-shrink: 0;\n"])));
+export var StyledLabelText = styled(Typography)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), getEllipsis());
+export var StyledLabel = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ", "px;\n  padding: ", "px ", "px;\n  font-size: ", "px;\n  background-color: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ", "px;\n  padding: ", "px ", "px;\n  font-size: ", "px;\n  background-color: ", ";\n"])), labelHeight, spacing.sm / 2, spacing.sm, labelFontSize, colors.white);
+var thumbnailBase = css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n\n  ", "\n\n  ", "\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n\n  ", "\n\n  ", "\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), colors.gray85, borderRadius.md, function (_a) {
+    var clickable = _a.clickable;
+    return (clickable ? 'cursor: pointer;' : '');
+}, function (_a) {
+    var selected = _a.selected;
+    return selected
+        ? "\n        ".concat(StyledTickIcon, " {\n          opacity: 1;\n          transform: scale(1);\n        }\n      ")
+        : '';
+}, getFocus(), function (_a) {
+    var focused = _a.focused;
+    return focused && getFocus();
+}, function (_a) {
+    var disabled = _a.disabled, clickable = _a.clickable;
+    return disabled && clickable ? 'cursor: not-allowed;' : '';
+}, function (_a) {
+    var size = _a.size;
+    var sizeInPx = "".concat(size === 'lg' ? thumbnailSizeLg : thumbnailSizeSm, "px");
+    return "\n      width: ".concat(sizeInPx, ";\n      height: ").concat(sizeInPx, ";\n    ");
+});
+export var StyledTickIcon = styled.svg(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  right: ", "px;\n  width: ", "px;\n  height: ", "px;\n  opacity: 0;\n  transform: scale(0.75);\n  transition: transform 250ms ease-out, opacity 100ms ease-out;\n\n  ", "\n\n  ", "\n"], ["\n  position: absolute;\n  top: ", "px;\n  right: ", "px;\n  width: ", "px;\n  height: ", "px;\n  opacity: 0;\n  transform: scale(0.75);\n  transition: transform 250ms ease-out, opacity 100ms ease-out;\n\n  ", "\n\n  ", "\n"])), spacing.sm, spacing.sm, tickSize, tickSize, function (_a) {
+    var selected = _a.selected;
+    return selected
+        ? "\n        opacity: 1;\n        transform: scale(1);\n      "
+        : '';
+}, function (_a) {
+    var size = _a.size;
+    return size === 'sm'
+        ? "\n        top: 50%;\n        left: 50%;\n        margin-top: ".concat(-tickSize / 2, "px;\n        margin-left: ").concat(-tickSize / 2, "px;\n      ")
+        : '';
+});
+export var StyledFileIcon = styled(DocumentIcon)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  width: 36.5%;\n  height: auto;\n"], ["\n  width: 36.5%;\n  height: auto;\n"])));
+export var StyledImageThumbnailPreview = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  ", "\n"], ["\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  ", "\n"])), function (_a) {
+    var $bgImage = _a.$bgImage;
+    return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    background-image: url(", ");\n  "], ["\n    background-image: url(", ");\n  "])), $bgImage);
+});
+export var StyledImageThumbnailOverlay = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n"], ["\n  display: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n"])));
+var blackOverlay = "\n  background-color: ".concat(colors.black, ";\n  opacity: 0.2;\n");
+var whiteOverlay = "\n  background-color: ".concat(colors.white, ";\n  opacity: 0.5;\n");
+export var StyledImageThumbnailImage = styled.img(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])));
+export var StyledImageThumbnail = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), thumbnailBase, function (_a) {
+    var disabled = _a.disabled;
+    return disabled
+        ? "\n        &,\n        &:hover {\n          ".concat(StyledImageThumbnailOverlay, " {\n            display: block;\n            ").concat(whiteOverlay, "\n          }\n        }\n        ").concat(StyledImageThumbnailPreview, ",\n        ").concat(StyledTickIcon, ",\n        ").concat(StyledImageThumbnailImage, " {\n          filter: saturate(0);\n        }\n      ")
+        : '';
+}, function (_a) {
+    var selected = _a.selected, focused = _a.focused, disabled = _a.disabled;
+    return focused && disabled
+        ? selected
+            ? "\n          ".concat(StyledTickIcon, " {\n            z-index: 0;\n          }\n        ")
+            : "\n          ".concat(StyledTickIcon, " {\n            z-index: 1;\n          }\n        ")
+        : '';
+}, function (_a) {
+    var selected = _a.selected, focused = _a.focused;
+    return selected && focused
+        ? "\n        ".concat(StyledTickIcon, " {\n          z-index: 1;\n        }\n      ")
+        : '';
+}, function (_a) {
+    var selected = _a.selected, focused = _a.focused, disabled = _a.disabled;
+    return selected && focused && disabled
+        ? "\n        ".concat(StyledTickIcon, " {\n          z-index: 0;\n        }\n      ")
+        : '';
+}, function (_a) {
+    var focused = _a.focused, disabled = _a.disabled;
+    return focused && !disabled
+        ? "\n        ".concat(StyledImageThumbnailOverlay, " {\n          display: block;\n          ").concat(blackOverlay, "\n        }\n      ")
+        : '';
+}, function (_a) {
+    var clickable = _a.clickable, disabled = _a.disabled;
+    return clickable && !disabled
+        ? "\n        &:hover {\n          ".concat(StyledImageThumbnailOverlay, " {\n            display: block;\n            ").concat(blackOverlay, "\n          }\n        }\n      ")
+        : '';
+});
+export var StyledThumbnailWrapper = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  ", "\n  ", "\n"])), function (_a) {
+    var size = _a.size;
+    return size === 'lg'
+        ? "\n        width: ".concat(thumbnailSizeLg, "px;\n      ")
+        : '';
+}, function (_a) {
+    var layout = _a.layout;
+    var isRowLayout = layout === 'row';
+    return isRowLayout
+        ? "\n        flex-direction: row;\n        aligh-items: center;\n      "
+        : "\n        flex-direction: column;\n        aligh-items: flex-start;\n      ";
+});
+export var StyledPlaceholderThumbnail = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), thumbnailBase, function (_a) {
+    var clickable = _a.clickable;
+    return clickable
+        ? "\n        &:hover {\n          background-color: ".concat(colors.gray96, ";\n        }\n\n      ")
+        : '';
+}, function (_a) {
+    var selected = _a.selected, size = _a.size;
+    return selected && size === 'sm'
+        ? "\n        ".concat(StyledFileIcon, " {\n          display: none;\n        }\n      ")
+        : '';
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled
+        ? "\n        ".concat(StyledFileIcon, ",\n        ").concat(StyledTickIcon, " {\n          filter: saturate(0);\n          opacity: 0.5;\n        }\n\n        &:hover {\n          background-color: inherit;\n        }\n      ")
+        : '';
+}, function (_a) {
+    var disabled = _a.disabled, selected = _a.selected;
+    return disabled && !selected
+        ? "\n        ".concat(StyledTickIcon, " {\n          opacity: 0;\n          transform: scale(0.75);\n        }\n      ")
+        : '';
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
+//# sourceMappingURL=Thumbnail.styles.js.map