@procore/core-react 11.20.0-vite.1 → 11.21.0

package/dist/FileSelect/TreeSource/TreeSource.js

@@ -0,0 +1,157 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import { areEqual } from 'react-window';
+import { Spinner } from '../../Spinner/Spinner';
+import { Tree } from '../../Tree/Tree';
+import { useResizeObserver } from '../../_hooks/ResizeObserver';
+import { useFileSelectContext } from '../FileSelect';
+import { StyledFileTreeSpinner } from './TreeSource.styles';
+var topPadding = 24;
+function noop() { }
+/**
+ * `innerElementType` and `outerElementType` elements are needed to create top padding.
+ * Be aware that because of virtualization, it is not a trivial task.
+ * 1. First of all, we pass height to the `Tree` component without padding, it is needed for correct work of keyboard navigation.
+ * 2. Then we counterbalance height in outerElementType component (by adding padding to the height).
+ * 3. The last step - make padding using the shift of a relatively positioned element.
+ */
+var innerElementType = React.memo(React.forwardRef(function (_a, ref) {
+    var style = _a.style, children = _a.children, props = __rest(_a, ["style", "children"]);
+    return (React.createElement("div", __assign({ ref: ref, style: __assign(__assign({}, style), { position: 'relative', top: "".concat(topPadding, "px"), height: "".concat(parseFloat(style.height) - topPadding, "px") }) }, props), children));
+}), areEqual);
+var outerElementType = React.memo(React.forwardRef(function (_a, ref) {
+    var style = _a.style, children = _a.children, props = __rest(_a, ["style", "children"]);
+    return (React.createElement("div", __assign({ ref: ref, style: __assign(__assign({}, style), { height: "".concat(parseFloat(style.height) + topPadding, "px") }) }, props), children));
+}), areEqual);
+export var TreeSource = React.forwardRef(function (_a, ref) {
+    var sourceId = _a.sourceId, title = _a.title, icon = _a.icon, options = _a.options, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, _c = _a.onChange, onChange = _c === void 0 ? noop : _c, _d = _a.onExpand, onExpand = _d === void 0 ? function () { return Promise.resolve(); } : _d, props = __rest(_a, ["sourceId", "title", "icon", "options", "isLoading", "onChange", "onExpand"]);
+    var _e = useFileSelectContext(), maxFileNumber = _e.maxFileNumber, register = _e.register, currentSource = _e.currentSource, onSourceChange = _e.onChange, onResetValue = _e.onResetValue;
+    var _f = React.useState([]), value = _f[0], setValue = _f[1];
+    var _g = React.useState([]), expandedItems = _g[0], setExpandedNodes = _g[1];
+    React.useEffect(function () {
+        onSourceChange(sourceId, value);
+    }, [value]);
+    React.useEffect(function () {
+        var unregister = register(sourceId, {
+            title: title,
+            icon: icon,
+        });
+        var unsubscribe = onResetValue(function () {
+            setValue([]);
+        });
+        return function () {
+            unsubscribe();
+            unregister();
+        };
+    }, []);
+    var selectedFiles = React.useMemo(function () { return value.map(function (item) { return item.id; }); }, [value]);
+    var _onChange = function (files) {
+        setValue(files);
+        onChange(files);
+    };
+    var _onExpand = function (node) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, onExpand(node)];
+                case 1:
+                    _a.sent();
+                    setExpandedNodes(function (prev) { return __spreadArray(__spreadArray([], prev, true), [node.id], false); });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var _onCollapse = function (node) {
+        setExpandedNodes(function (prev) { return prev.filter(function (nodeId) { return nodeId !== node.id; }); });
+    };
+    var _h = React.useState({
+        width: 0,
+        height: 0,
+    }), containerSize = _h[0], setContainerSize = _h[1];
+    var handleContainerResize = React.useCallback(function (entries) {
+        if (entries[0]) {
+            var _a = entries[0].target, height = _a.clientHeight, width = _a.clientWidth;
+            setContainerSize({ width: width, height: height });
+        }
+    }, [setContainerSize]);
+    var setResizeObserverTarget = useResizeObserver(handleContainerResize);
+    React.useImperativeHandle(ref, function () { return ({
+        setExpandedNodes: setExpandedNodes,
+        setValue: setValue,
+    }); });
+    if (currentSource !== sourceId) {
+        return null;
+    }
+    return !isLoading ? (React.createElement(Tree, __assign({}, props, { ref: function (instance) {
+            if (instance === null || instance === void 0 ? void 0 : instance.rootEl) {
+                setResizeObserverTarget(instance.rootEl);
+            }
+        }, options: options, onSelect: _onChange, onExpand: _onExpand, onCollapse: _onCollapse, expanded: expandedItems, selected: selectedFiles, selectionLimit: maxFileNumber + value.length, visibleHeight: containerSize.height - topPadding, innerElementType: innerElementType, outerElementType: outerElementType, autoExpandParent: false }))) : (React.createElement(StyledFileTreeSpinner, null,
+        React.createElement(Spinner, null)));
+});
+//# sourceMappingURL=TreeSource.js.map

package/dist/FileSelect/TreeSource/TreeSource.js.map

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

package/dist/FileSelect/TreeSource/TreeSource.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledFileTreeSpinner: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/FileSelect/TreeSource/TreeSource.styles.js

@@ -0,0 +1,9 @@
+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 from 'styled-components';
+import { modalBodyHeight } from '../FileExplorer/FileExplorer.styles';
+export var StyledFileTreeSpinner = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ", "px;\n"])), modalBodyHeight);
+var templateObject_1;
+//# sourceMappingURL=TreeSource.styles.js.map

package/dist/FileSelect/TreeSource/TreeSource.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeSource.styles.js","sourceRoot":"","sources":["../../../src/FileSelect/TreeSource/TreeSource.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAErE,MAAM,CAAC,IAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,gKAAA,oFAInC,EAAe,OAC1B,KADW,eAAe,CAC1B,CAAA"}

package/dist/FileSelect/TreeSource/TreeSource.types.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { Node as TreeNode, TreeNodeId, TreeProps } from '../../Tree/Tree.types';
+export interface TreeSourceRef {
+    /**
+     * @since 10.19.0
+     */
+    setExpandedNodes: (expanded: TreeNodeId[]) => void;
+    /**
+     * @since 10.19.0
+     */
+    setValue: <Node extends TreeNode = TreeNode>(nodes: Node[]) => void;
+}
+export interface FileTreeProps extends Pick<TreeProps<TreeNode>, 'options' | 'getRoot' | 'getChildren' | 'getLabel' | 'getParentId' | 'getType' | 'isSelectable' | 'isExpandable' | 'onExpand' | 'expanded'> {
+    /**
+     * Callback function fired with currently selected array of nodes.
+     * <CodeBlock>(nodes: DefaultNode[]) => void</CodeBlock>
+     * @since 10.19.0
+     */
+    onChange?: (nodes: TreeNode[]) => void;
+    /**
+     * @since 10.19.0
+     */
+    sourceId: string;
+    /**
+     * @since 10.19.0
+     */
+    title: string;
+    /**
+     * @deprecated String icon variant is deprecated, use the React components
+     * directly from the `@procore/core-icons/dist` package
+     * @since 10.19.0
+     */
+    icon: React.ReactNode;
+    /**
+     * Show/Hide loading indicator of the content
+     * @since 10.19.0
+     */
+    isLoading?: boolean;
+}

package/dist/FileSelect/TreeSource/TreeSource.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TreeSource.types.js.map

package/dist/FileSelect/TreeSource/TreeSource.types.js.map

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

package/dist/FileSelect/TreeSource/index.d.ts

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

package/dist/FileSelect/TreeSource/index.js

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

package/dist/FileSelect/TreeSource/index.js.map

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

package/dist/FileSelect/index.d.ts

@@ -0,0 +1,3 @@
+export { FileSelect, FileSelectLocalSourceId, useFileSelectContext, } from './FileSelect';
+export { FileSelectProps, FileSelectRef, FileSelectSourceIdType, FileSelectValue, FileSelectValueEntry, } from './FileSelect.types';
+export { TreeSourceRef } from './TreeSource/TreeSource.types';

package/dist/FileSelect/index.js

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

package/dist/FileSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FileSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,cAAc,CAAA"}

package/dist/FileSelect/storyHelpers.d.ts

@@ -0,0 +1,50 @@
+import { DefaultNode } from '../Tree/Tree.types';
+export declare const MOCK_UPLOAD_FILES_URL = "/mock-upload-files";
+export declare const MOCK_UPLOAD_WITH_ERRORS_FILES_URL = "/mock-upload-files-with-errors";
+export declare const MOCK_BACKEND_LATENCY = 500;
+export declare const useMockBackend: () => void;
+export declare const gridItemsSample: ({
+    id: string;
+    name: string;
+    src: any;
+} | {
+    id: string;
+    name: string;
+    src?: undefined;
+})[];
+export declare const groupedGridItemsSample: ({
+    id: string;
+    name: string;
+    src: any;
+    groupId: string;
+} | {
+    id: string;
+    name: string;
+    groupId: string;
+    src?: undefined;
+} | {
+    id: string;
+    name: string;
+    src?: undefined;
+    groupId?: undefined;
+})[];
+export declare const photosCategories: {
+    id: number;
+    name: string;
+}[];
+export declare const photosByCategory: ({
+    id: string;
+    name: string;
+    src: any;
+    categoryId: number;
+} | {
+    id: string;
+    name: string;
+    categoryId: number;
+    src?: undefined;
+})[];
+export declare const groupItemsSample: {
+    id: string;
+    title: string;
+}[];
+export declare const fileTreeSample: DefaultNode[];

package/dist/FileSelect/storyHelpers.js

@@ -0,0 +1,148 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { createServer, Response } from 'miragejs';
+import React from 'react';
+import { ulid } from 'ulid';
+import thumbnailImage from '../Thumbnail/mocks/images/thumb_104x104_1.png';
+export var MOCK_UPLOAD_FILES_URL = '/mock-upload-files';
+export var MOCK_UPLOAD_WITH_ERRORS_FILES_URL = '/mock-upload-files-with-errors';
+export var MOCK_BACKEND_LATENCY = 500;
+var wait = function (ms) { return new Promise(function (res) { return setTimeout(res, ms); }); };
+export var useMockBackend = function () {
+    React.useEffect(function () {
+        var server = createServer({
+            routes: function () {
+                var _this = this;
+                this.post(MOCK_UPLOAD_FILES_URL, function (_, request) { return __awaiter(_this, void 0, void 0, function () {
+                    var _a, delay, remoteFileId;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = request.queryParams.delay, delay = _a === void 0 ? '0' : _a;
+                                return [4 /*yield*/, wait(Number(delay) * 1000)];
+                            case 1:
+                                _b.sent();
+                                remoteFileId = ulid();
+                                return [2 /*return*/, { remoteFileId: remoteFileId }];
+                        }
+                    });
+                }); });
+                this.post(MOCK_UPLOAD_WITH_ERRORS_FILES_URL, function (_, request) { return __awaiter(_this, void 0, void 0, function () {
+                    var _a, delay;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = request.queryParams.delay, delay = _a === void 0 ? '0' : _a;
+                                return [4 /*yield*/, wait(Number(delay) * 1000)];
+                            case 1:
+                                _b.sent();
+                                return [2 /*return*/, new Response(500, { error: 'Upload Error' })];
+                        }
+                    });
+                }); });
+            },
+            timing: MOCK_BACKEND_LATENCY,
+        });
+        return function () {
+            server.shutdown();
+        };
+    }, []);
+};
+export var gridItemsSample = [
+    { id: '0001', name: '0001.png', src: thumbnailImage },
+    { id: '0002', name: '0002.zip' },
+    { id: '0003', name: '0003.rtf', src: thumbnailImage },
+    { id: '0004', name: '0004.png' },
+    { id: '0005', name: '0005.docx', src: thumbnailImage },
+    { id: '0006', name: '0006.unss' },
+    { id: '0007', name: '0007.zip' },
+    { id: '0008', name: '0008.dll' },
+    { id: '0009', name: '0009.dll' },
+    { id: '00010', name: '0010.png' },
+    { id: '00011', name: '0011.png' },
+    { id: '00012', name: '0012.png' },
+];
+export var groupedGridItemsSample = [
+    { id: '0001', name: '0001.png', src: thumbnailImage, groupId: '1' },
+    { id: '0002', name: '0002.zip', groupId: '1' },
+    { id: '0003', name: '0003.rtf', src: thumbnailImage, groupId: '1' },
+    { id: '0006', name: '0006.unss' },
+    { id: '0007', name: '0007.zip' },
+];
+export var photosCategories = [
+    { id: 1, name: 'Category 1' },
+    { id: 2, name: 'Unclasified' },
+];
+export var photosByCategory = [
+    { id: '0001', name: '0001.png', src: thumbnailImage, categoryId: 1 },
+    { id: '0002', name: '0002.zip', categoryId: 1 },
+    { id: '0003', name: '0003.rtf', categoryId: 1 },
+    { id: '0004', name: '0004.png', categoryId: 1 },
+    { id: '0005', name: '0005.docx', src: thumbnailImage, categoryId: 1 },
+    { id: '0006', name: '0006.unss', categoryId: 1 },
+    { id: '0007', name: '0007.zip', categoryId: 2 },
+    { id: '0008', name: '0008.dll', categoryId: 2 },
+    { id: '0009', name: '0009.dll', categoryId: 2 },
+    { id: '00010', name: '0010.png', categoryId: 2 },
+];
+export var groupItemsSample = [
+    { id: '1', title: 'Group #1' },
+    { id: '2', title: 'Group #2' },
+];
+export var fileTreeSample = [
+    {
+        id: 1,
+        name: 'Root Folder',
+        parentId: null,
+        type: 'branch',
+    },
+    { id: 2, name: 'Animals', parentId: 1, type: 'branch' },
+    { id: 3, name: 'Birds', parentId: 1, type: 'branch' },
+    { id: 4, name: 'Cat.jpg', parentId: 2, type: 'leaf' },
+    { id: 5, name: 'Dog.jpg', parentId: 2, type: 'leaf' },
+    { id: 6, name: 'Woodpecker.jpg', parentId: 3, type: 'leaf' },
+    { id: 7, name: 'Owl.jpg', parentId: 3, type: 'leaf' },
+    { id: 12, name: 'Falcon.jpg', parentId: 3, type: 'leaf' },
+    { id: 13, name: 'Parrot.jpg', parentId: 3, type: 'leaf' },
+    { id: 14, name: 'Crane.jpg', parentId: 3, type: 'leaf' },
+    { id: 15, name: 'Ostrich.jpg', parentId: 3, type: 'leaf' },
+    { id: 122, name: 'Falcon.jpg', parentId: 3, type: 'leaf' },
+    { id: 132, name: 'Parrot.jpg', parentId: 3, type: 'leaf' },
+    { id: 142, name: 'Crane.jpg', parentId: 3, type: 'leaf' },
+    { id: 152, name: 'Ostrich.jpg', parentId: 3, type: 'leaf' },
+];
+//# sourceMappingURL=storyHelpers.js.map

package/dist/FileSelect/storyHelpers.js.map

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

package/dist/FileToken/FileToken.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DivAttributes } from '../_utils/types';
+import { FileTokenProps } from './FileToken.types';
+/**
+ * @deprecatedSince 11
+ * @deprecated Intended for internal library development.
+ */
+export declare const FileToken: React.ForwardRefExoticComponent<FileTokenProps & DivAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/FileToken/FileToken.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 { useId } from '@react-aria/utils';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import React from 'react';
+import { Loader } from '../Loader/Loader';
+import { loaderTransitionDuration } from '../Loader/Loader.styles';
+import { Token } from '../Token/Token';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { useI18nContext } from '../_hooks/I18n';
+import { parseFilename } from '../_utils/filename';
+import { pulseAnimationDuration, StyledExtension, StyledFilename, StyledFilenameShortcut, StyledFileToken, } from './FileToken.styles';
+/**
+ * @deprecatedSince 11
+ * @deprecated Intended for internal library development.
+ */
+export var FileToken = React.forwardRef(function FileToken(_a, ref) {
+    var fileName = _a.fileName, _b = _a.progressValue, progressValue = _b === void 0 ? 0 : _b, _c = _a.errorMessage, errorMessage = _c === void 0 ? '' : _c, onLabelClick = _a.onLabelClick, onClose = _a.onClose, qa = _a.qa, props = __rest(_a, ["fileName", "progressValue", "errorMessage", "onLabelClick", "onClose", "qa"]);
+    var i18n = useI18nContext();
+    var isError = Boolean(errorMessage);
+    var isProgressValueComplete = !isError && progressValue >= 100;
+    var _d = React.useState(isProgressValueComplete), isProgressComplete = _d[0], setProgressComplete = _d[1];
+    var _e = React.useState(false), isFinalized = _e[0], setFinalized = _e[1];
+    var didMountRef = React.useRef(false);
+    var _f = parseFilename(fileName), filename = _f.filename, extension = _f.extension, isFilename = _f.isFilename;
+    var progressBarLabelId = useId();
+    var name = isFilename ? "".concat(filename, ".") : fileName;
+    React.useEffect(function () {
+        var timerId = isProgressValueComplete
+            ? window.setTimeout(function () {
+                setProgressComplete(true);
+            }, loaderTransitionDuration)
+            : null;
+        if (!isProgressValueComplete) {
+            setProgressComplete(false);
+        }
+        return function () {
+            timerId && clearTimeout(timerId);
+        };
+    }, [isProgressValueComplete]);
+    React.useEffect(function () {
+        var isFinalized = didMountRef.current && isProgressComplete;
+        var timerId = isFinalized
+            ? window.setTimeout(function () {
+                setFinalized(false);
+            }, pulseAnimationDuration)
+            : null;
+        setFinalized(didMountRef.current && isProgressComplete);
+        if (!didMountRef.current) {
+            didMountRef.current = true;
+        }
+        return function () {
+            timerId && clearTimeout(timerId);
+        };
+    }, [isProgressComplete]);
+    var token = (React.createElement(Token, null,
+        React.createElement(Token.Label, { onClick: onLabelClick },
+            React.createElement(StyledFilenameShortcut, null,
+                React.createElement(StyledFilename, null, name),
+                React.createElement(StyledExtension, null, extension))),
+        React.createElement(Token.Remove, { onClick: onClose, "data-qa": qa === null || qa === void 0 ? void 0 : qa.closeButton })));
+    // prevent empty tooltip blinks when navigating via the keyboard by wrapping in tooltip conditionally
+    if (isError) {
+        return (React.createElement(Tooltip, { ref: ref, trigger: "hover", overlay: errorMessage },
+            React.createElement(StyledFileToken, __assign({}, props, { "$error": isError, "$finalized": isFinalized, "$progressComplete": isProgressComplete }),
+                token,
+                React.createElement(Loader, { value: progressValue, animated: true }, token))));
+    }
+    return (React.createElement(StyledFileToken, __assign({}, props, { "$error": isError, "$finalized": isFinalized, "$progressComplete": isProgressComplete, ref: ref }),
+        token,
+        React.createElement(Loader, { value: progressValue, animated: true, "aria-hidden": true }, token),
+        React.createElement(VisuallyHidden, null,
+            React.createElement("span", { id: progressBarLabelId }, i18n.t('core.fileToken.uploading')),
+            React.createElement("div", { "aria-labelledby": progressBarLabelId, role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuetext": "".concat(progressValue, "%") }))));
+});
+FileToken.displayName = 'FileToken';
+//# sourceMappingURL=FileToken.js.map

package/dist/FileToken/FileToken.js.map

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

package/dist/FileToken/FileToken.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const pulseAnimationDuration = 600;
+export declare const StyledFilenameShortcut: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFilename: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledExtension: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledFileToken: import("styled-components").StyledComponent<"div", any, {
+    $error?: boolean | undefined;
+    $finalized?: boolean | undefined;
+    $progressComplete?: boolean | undefined;
+}, never>;

package/dist/FileToken/FileToken.styles.js

@@ -0,0 +1,28 @@
+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, keyframes } from 'styled-components';
+import { StyledLoader } from '../Loader/Loader.styles';
+import { StyledLabel, StyledToken } from '../Token/Token.styles';
+import { colors } from '../_styles/colors';
+export var pulseAnimationDuration = 600;
+var focusPulse = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    box-shadow: 0 0 0 0 ", ", 0 0 0 0 ", ", 0 0 0 0 ", ";\n  }\n  25% {\n    box-shadow: 0 0 0 0 ", ", 0 0 0 0 ", ", 0 0 0 0 ", ";\n  }\n  50% {\n    box-shadow: 0 0 0 1px ", ", 0 0 0 3px ", ", 0 0 0 2px ", ";\n  }\n  100% {\n    box-shadow: 0 0 0 1.5px ", ", 0 0 0 3px ", ", 0 0 0 6px ", ";\n  }\n"], ["\n  0% {\n    box-shadow: 0 0 0 0 ", ", 0 0 0 0 ", ", 0 0 0 0 ", ";\n  }\n  25% {\n    box-shadow: 0 0 0 0 ", ", 0 0 0 0 ", ", 0 0 0 0 ", ";\n  }\n  50% {\n    box-shadow: 0 0 0 1px ", ", 0 0 0 3px ", ", 0 0 0 2px ", ";\n  }\n  100% {\n    box-shadow: 0 0 0 1.5px ", ", 0 0 0 3px ", ", 0 0 0 6px ", ";\n  }\n"])), colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94, colors.blue60, colors.blue90, colors.blue94);
+export var StyledFilenameShortcut = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+export var StyledFilename = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+export var StyledExtension = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"])));
+export var StyledFileToken = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 200px;\n  max-width: 100%;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  &:focus,\n  &.focus {\n    box-shadow: 0 0 0 2px ", ";\n    outline: none;\n\n    ", " {\n      border-color: transparent;\n\n      ", "\n    }\n  }\n\n  ", " {\n    background: none;\n    color: ", ";\n    display: flex;\n    user-select: none;\n  }\n\n  ", " {\n    overflow: hidden;\n\n    ", " {\n      border-radius: 200px 0 0 200px;\n      color: ", ";\n      padding-right: 0;\n      transition: color 0s linear, background-color 0s linear;\n      user-select: none;\n\n      ", " {\n        flex: 0 0 auto;\n      }\n    }\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 200px;\n  max-width: 100%;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  &:focus,\n  &.focus {\n    box-shadow: 0 0 0 2px ", ";\n    outline: none;\n\n    ", " {\n      border-color: transparent;\n\n      ", "\n    }\n  }\n\n  ", " {\n    background: none;\n    color: ", ";\n    display: flex;\n    user-select: none;\n  }\n\n  ", " {\n    overflow: hidden;\n\n    ", " {\n      border-radius: 200px 0 0 200px;\n      color: ", ";\n      padding-right: 0;\n      transition: color 0s linear, background-color 0s linear;\n      user-select: none;\n\n      ", " {\n        flex: 0 0 auto;\n      }\n    }\n  }\n\n  ", "\n"])), colors.gray96, colors.blue40, StyledToken, function (_a) {
+    var $progressComplete = _a.$progressComplete;
+    return $progressComplete && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: ", ";\n        "], ["\n          background-color: ", ";\n        "])), colors.blue45);
+}, StyledToken, colors.blue40, StyledLoader, StyledToken, colors.white, StyledLabel, function (_a) {
+    var $error = _a.$error, $finalized = _a.$finalized, $progressComplete = _a.$progressComplete;
+    if ($error) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        background-color: ", ";\n\n        &:focus {\n          background-color: ", ";\n        }\n\n        ", " {\n          color: ", ";\n        }\n\n        ", " {\n          display: none;\n        }\n      "], ["\n        background-color: ", ";\n\n        &:focus {\n          background-color: ", ";\n        }\n\n        ", " {\n          color: ", ";\n        }\n\n        ", " {\n          display: none;\n        }\n      "])), colors.red50, colors.red50, StyledToken, colors.white, StyledLoader);
+    }
+    else if ($finalized || $progressComplete) {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        ", ";\n\n        ", " {\n          opacity: 0;\n          pointer-events: none;\n        }\n\n        ", " {\n          background-color: ", ";\n          color: ", ";\n\n          &:hover,\n          &:focus {\n            background-color: ", ";\n          }\n        }\n\n        &.hover,\n        &.focus {\n          ", " {\n            background-color: ", ";\n          }\n        }\n      "], ["\n        ", ";\n\n        ", " {\n          opacity: 0;\n          pointer-events: none;\n        }\n\n        ", " {\n          background-color: ", ";\n          color: ", ";\n\n          &:hover,\n          &:focus {\n            background-color: ", ";\n          }\n        }\n\n        &.hover,\n        &.focus {\n          ", " {\n            background-color: ", ";\n          }\n        }\n      "])), $finalized && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          animation-delay: 0;\n          animation-duration: ", "ms;\n          animation-name: ", ";\n          animation-timing-function: ease-out;\n        "], ["\n          animation-delay: 0;\n          animation-duration: ", "ms;\n          animation-name: ", ";\n          animation-timing-function: ease-out;\n        "])), pulseAnimationDuration, focusPulse), StyledLoader, StyledToken, colors.blue50, colors.white, colors.blue45, StyledToken, colors.blue45);
+    }
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""])));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+//# sourceMappingURL=FileToken.styles.js.map