@via-profit/ui-kit 0.8.0 → 0.9.0

package/EmptyState/index.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { EmptyStateContainerProps } from './EmptyStateContainer';
+import { EmptyStateIconProps } from './EmptyStateIcon';
+import { EmptyStateTitleProps } from './EmptyStateTitle';
+import { EmptyStateContentProps } from './EmptyStateContent';
+import { EmptyStateActionProps } from './EmptyStateAction';
+export type EmptyStateProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
+    /**
+     * The short line: what is empty («Заявок нет»)
+     */
+    readonly title?: React.ReactNode;
+    /**
+     * The explanation: why it is empty and what to do
+     */
+    readonly children?: React.ReactNode;
+    /**
+     * The next step: one or two buttons
+     */
+    readonly action?: React.ReactNode;
+    /**
+     * Replaces the empty box. `false` — no illustration
+     */
+    readonly icon?: React.ReactNode;
+    /**
+     * Takes the whole height of the parent and stands in its middle
+     * Default: false
+     */
+    readonly fullHeight?: boolean;
+    readonly overrides?: EmptyStateOverrides;
+};
+export interface EmptyStateOverrides {
+    /**
+     * The column in the middle; gets `fullHeight`
+     */
+    readonly Container?: React.ComponentType<EmptyStateContainerProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * The illustration; the own one from `icon` comes in `children`
+     */
+    readonly Icon?: React.ComponentType<EmptyStateIconProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The title. Rendered only with `title`
+     */
+    readonly Title?: React.ComponentType<EmptyStateTitleProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * The explanation. Rendered only with `children`
+     */
+    readonly Content?: React.ComponentType<EmptyStateContentProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * The buttons. Rendered only with `action`
+     */
+    readonly Action?: React.ComponentType<EmptyStateActionProps & React.RefAttributes<HTMLDivElement>>;
+}
+export * from './EmptyStateContainer';
+export * from './EmptyStateIcon';
+export * from './EmptyStateTitle';
+export * from './EmptyStateContent';
+export * from './EmptyStateAction';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /**
+     * The short line: what is empty («Заявок нет»)
+     */
+    readonly title?: React.ReactNode;
+    /**
+     * The explanation: why it is empty and what to do
+     */
+    readonly children?: React.ReactNode;
+    /**
+     * The next step: one or two buttons
+     */
+    readonly action?: React.ReactNode;
+    /**
+     * Replaces the empty box. `false` — no illustration
+     */
+    readonly icon?: React.ReactNode;
+    /**
+     * Takes the whole height of the parent and stands in its middle
+     * Default: false
+     */
+    readonly fullHeight?: boolean;
+    readonly overrides?: EmptyStateOverrides;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/EmptyState/index.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const EmptyStateContainer_1 = __importDefault(require("./EmptyStateContainer"));
+const EmptyStateIcon_1 = __importDefault(require("./EmptyStateIcon"));
+const EmptyStateTitle_1 = __importDefault(require("./EmptyStateTitle"));
+const EmptyStateContent_1 = __importDefault(require("./EmptyStateContent"));
+const EmptyStateAction_1 = __importDefault(require("./EmptyStateAction"));
+/**
+ * The empty list, the nothing found, the not chosen yet: the illustration, what is empty
+ * and what to do next
+ */
+const EmptyState = (props, ref) => {
+    const { title, children, action, icon, fullHeight = false, overrides } = props, nativeProps = __rest(props, ["title", "children", "action", "icon", "fullHeight", "overrides"]);
+    const overridesMap = react_1.default.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || EmptyStateContainer_1.default,
+        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || EmptyStateIcon_1.default,
+        Title: (overrides === null || overrides === void 0 ? void 0 : overrides.Title) || EmptyStateTitle_1.default,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || EmptyStateContent_1.default,
+        Action: (overrides === null || overrides === void 0 ? void 0 : overrides.Action) || EmptyStateAction_1.default,
+    }), [overrides]);
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { fullHeight: fullHeight, ref: ref }),
+        icon !== false && react_1.default.createElement(overridesMap.Icon, null, icon),
+        title && react_1.default.createElement(overridesMap.Title, null, title),
+        children && react_1.default.createElement(overridesMap.Content, null, children),
+        action && react_1.default.createElement(overridesMap.Action, null, action)));
+};
+__exportStar(require("./EmptyStateContainer"), exports);
+__exportStar(require("./EmptyStateIcon"), exports);
+__exportStar(require("./EmptyStateTitle"), exports);
+__exportStar(require("./EmptyStateContent"), exports);
+__exportStar(require("./EmptyStateAction"), exports);
+exports.default = react_1.default.forwardRef(EmptyState);

package/FileDropzone/FileDropzoneArea.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export type FileDropzoneAreaProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * A file is dragged over the area
+     */
+    readonly active: boolean;
+    /**
+     * The file is chosen: the solid border instead of the dashed one
+     */
+    readonly filled: boolean;
+    readonly disabled: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * A file is dragged over the area
+     */
+    readonly active: boolean;
+    /**
+     * The file is chosen: the solid border instead of the dashed one
+     */
+    readonly filled: boolean;
+    readonly disabled: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/FileDropzone/FileDropzoneArea.js

@@ -0,0 +1,81 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const StyledArea = styled_1.default.div `
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  min-height: 6.5em;
+  padding: 1em;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.6}em;
+  border: 1px ${({ $filled }) => ($filled ? 'solid' : 'dashed')}
+    ${({ theme, $active }) => ($active ? theme.color.accentPrimary : theme.color.textSecondary.alpha(0.45)).toString()};
+  background-color: ${({ theme, $active }) => ($active
+    ? theme.color.accentPrimary.alpha(0.1)
+    : theme.color.textPrimary.alpha(0.03)).toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  transition:
+    border-color 120ms ease-out,
+    background-color 120ms ease-out;
+
+  ${({ $filled, $disabled, theme }) => !$filled &&
+    !$disabled &&
+    (0, react_2.css) `
+      cursor: pointer;
+
+      &:hover,
+      &:focus-visible {
+        border-color: ${theme.color.accentPrimary.toString()};
+      }
+    `}
+
+  ${({ $filled }) => $filled
+    ? (0, react_2.css) `
+          flex-direction: row;
+          align-items: center;
+          gap: 0.75em;
+        `
+    : (0, react_2.css) `
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 0.3em;
+          text-align: center;
+        `}
+
+  ${({ $disabled }) => $disabled &&
+    (0, react_2.css) `
+      opacity: 0.5;
+      cursor: default;
+    `}
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.alpha(0.4).toString()};
+    outline-offset: 2px;
+  }
+`;
+/**
+ * The area: without the file — the icon and two lines in the middle (it chooses the file),
+ * with the file — the row of the file
+ */
+const FileDropzoneArea = (props, ref) => {
+    const { active, filled, disabled } = props, nativeProps = __rest(props, ["active", "filled", "disabled"]);
+    return (react_1.default.createElement(StyledArea, Object.assign({}, nativeProps, { "$active": active, "$filled": filled, "$disabled": disabled, ref: ref })));
+};
+exports.default = react_1.default.forwardRef(FileDropzoneArea);

package/FileDropzone/index.d.ts

@@ -0,0 +1,107 @@
+import React from 'react';
+import { FileDropzoneAreaProps } from './FileDropzoneArea';
+import { formatFileSize, isFileAccepted } from './utils';
+export { formatFileSize, isFileAccepted };
+export type FileDropzoneRejectReason = 'type' | 'size';
+export type FileDropzoneProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    /**
+     * The chosen file, `null` — no file
+     */
+    readonly value: File | null;
+    /**
+     * Called with the chosen file or `null` when the file is removed
+     */
+    readonly onChange: (file: File | null) => void;
+    /**
+     * The types of the files, as `accept` of the input: `image/png`, `image/*`, `.pdf`
+     */
+    readonly accept?: string;
+    /**
+     * The maximum size of the file in bytes
+     */
+    readonly maxSize?: number;
+    /**
+     * The file is not taken: the type is not in `accept` or it is larger than `maxSize`
+     */
+    readonly onReject?: (file: File, reason: FileDropzoneRejectReason) => void;
+    /**
+     * The line of the empty area
+     * Default: `Choose a file`
+     */
+    readonly label?: React.ReactNode;
+    /**
+     * The second line of the empty area: the types and the size
+     */
+    readonly hint?: React.ReactNode;
+    /**
+     * Default: `Replace`
+     */
+    readonly replaceLabel?: React.ReactNode;
+    /**
+     * The name of the delete button for the screen readers and its tooltip
+     * Default: `Remove the file`
+     */
+    readonly removeLabel?: string;
+    /**
+     * The size of the chosen file
+     * Default: `formatFileSize` — «54.1 KB»
+     */
+    readonly formatSize?: (bytes: number) => React.ReactNode;
+    readonly disabled?: boolean;
+    readonly overrides?: FileDropzoneOverrides;
+};
+export interface FileDropzoneOverrides {
+    /**
+     * The area with the border: without the file and with it (`filled`)
+     */
+    readonly Area?: React.ComponentType<FileDropzoneAreaProps & React.RefAttributes<HTMLDivElement>>;
+}
+export * from './FileDropzoneArea';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    /**
+     * The chosen file, `null` — no file
+     */
+    readonly value: File | null;
+    /**
+     * Called with the chosen file or `null` when the file is removed
+     */
+    readonly onChange: (file: File | null) => void;
+    /**
+     * The types of the files, as `accept` of the input: `image/png`, `image/*`, `.pdf`
+     */
+    readonly accept?: string;
+    /**
+     * The maximum size of the file in bytes
+     */
+    readonly maxSize?: number;
+    /**
+     * The file is not taken: the type is not in `accept` or it is larger than `maxSize`
+     */
+    readonly onReject?: (file: File, reason: FileDropzoneRejectReason) => void;
+    /**
+     * The line of the empty area
+     * Default: `Choose a file`
+     */
+    readonly label?: React.ReactNode;
+    /**
+     * The second line of the empty area: the types and the size
+     */
+    readonly hint?: React.ReactNode;
+    /**
+     * Default: `Replace`
+     */
+    readonly replaceLabel?: React.ReactNode;
+    /**
+     * The name of the delete button for the screen readers and its tooltip
+     * Default: `Remove the file`
+     */
+    readonly removeLabel?: string;
+    /**
+     * The size of the chosen file
+     * Default: `formatFileSize` — «54.1 KB»
+     */
+    readonly formatSize?: (bytes: number) => React.ReactNode;
+    readonly disabled?: boolean;
+    readonly overrides?: FileDropzoneOverrides;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/FileDropzone/index.js

@@ -0,0 +1,169 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFileAccepted = exports.formatFileSize = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Button_1 = __importDefault(require("../Button"));
+const FileDropzoneArea_1 = __importDefault(require("./FileDropzoneArea"));
+const utils_1 = require("./utils");
+Object.defineProperty(exports, "formatFileSize", { enumerable: true, get: function () { return utils_1.formatFileSize; } });
+Object.defineProperty(exports, "isFileAccepted", { enumerable: true, get: function () { return utils_1.isFileAccepted; } });
+const Icon = styled_1.default.span `
+  flex: none;
+  display: inline-flex;
+  font-size: 1.5em;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+const Label = styled_1.default.span `
+  font-size: 0.875em;
+  font-weight: 600;
+`;
+const Hint = styled_1.default.span `
+  font-size: 0.75em;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+const FileText = styled_1.default.span `
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15em;
+  text-align: left;
+`;
+/**
+ * The long name in one line: the whole name is in the tooltip
+ */
+const FileName = (0, styled_1.default)(Label) `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const Path = styled_1.default.path `
+  fill: currentColor;
+`;
+const UploadIcon = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true },
+    react_1.default.createElement(Path, { d: "M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95A5.469 5.469 0 0 1 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11A2.98 2.98 0 0 1 22 15c0 1.65-1.35 3-3 3zM8 13h2.55v3h2.9v-3H16l-4-4z" })));
+const FileIcon = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true },
+    react_1.default.createElement(Path, { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm2-6h8v2H8zm0 3h5v2H8z" })));
+const TrashIcon = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true },
+    react_1.default.createElement(Path, { d: "M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" })));
+/**
+ * The file by the click or by the drop: one area with the dashed border. The chosen file
+ * is the row with its name and size, «Replace» and the delete button; a new file can be
+ * dropped onto it too
+ */
+const FileDropzone = (props, ref) => {
+    const { value, onChange, accept, maxSize, onReject, label = 'Choose a file', hint, replaceLabel = 'Replace', removeLabel = 'Remove the file', formatSize = utils_1.formatFileSize, disabled = false, overrides } = props, nativeProps = __rest(props, ["value", "onChange", "accept", "maxSize", "onReject", "label", "hint", "replaceLabel", "removeLabel", "formatSize", "disabled", "overrides"]);
+    const AreaComponent = (overrides === null || overrides === void 0 ? void 0 : overrides.Area) || FileDropzoneArea_1.default;
+    const inputRef = react_1.default.useRef(null);
+    // dragenter/dragleave fire on every child: the counter keeps the highlight steady
+    const dragDepthRef = react_1.default.useRef(0);
+    const [isDragActive, setDragActive] = react_1.default.useState(false);
+    const take = (file) => {
+        if (!file) {
+            return;
+        }
+        if (!(0, utils_1.isFileAccepted)(file, accept)) {
+            onReject === null || onReject === void 0 ? void 0 : onReject(file, 'type');
+            return;
+        }
+        if (typeof maxSize === 'number' && file.size > maxSize) {
+            onReject === null || onReject === void 0 ? void 0 : onReject(file, 'size');
+            return;
+        }
+        onChange(file);
+    };
+    const choose = () => {
+        var _a;
+        if (!disabled) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    };
+    const dropHandlers = disabled
+        ? {}
+        : {
+            onDragEnter: (event) => {
+                event.preventDefault();
+                dragDepthRef.current += 1;
+                setDragActive(true);
+            },
+            onDragOver: (event) => {
+                event.preventDefault();
+            },
+            onDragLeave: () => {
+                dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+                if (dragDepthRef.current === 0) {
+                    setDragActive(false);
+                }
+            },
+            onDrop: (event) => {
+                var _a;
+                event.preventDefault();
+                dragDepthRef.current = 0;
+                setDragActive(false);
+                take((_a = event.dataTransfer.files) === null || _a === void 0 ? void 0 : _a[0]);
+            },
+        };
+    const input = (react_1.default.createElement("input", { hidden: true, ref: inputRef, type: "file", accept: accept, disabled: disabled, 
+        // the input is inside the area: its click must not reach the area and open the dialog again
+        onClick: event => event.stopPropagation(), onChange: event => {
+            var _a;
+            const file = (_a = event.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
+            // the same file can be chosen again after the removal
+            event.currentTarget.value = '';
+            take(file);
+        } }));
+    if (value) {
+        return (react_1.default.createElement(AreaComponent, Object.assign({}, nativeProps, dropHandlers, { active: isDragActive, filled: true, disabled: disabled, ref: ref }),
+            input,
+            react_1.default.createElement(Icon, null,
+                react_1.default.createElement(FileIcon, null)),
+            react_1.default.createElement(FileText, null,
+                react_1.default.createElement(FileName, { title: value.name }, value.name),
+                react_1.default.createElement(Hint, null, formatSize(value.size))),
+            react_1.default.createElement(Button_1.default, { type: "button", variant: "plain", disabled: disabled, onClick: choose }, replaceLabel),
+            react_1.default.createElement(Button_1.default, { type: "button", variant: "plain", color: "error", iconOnly: true, disabled: disabled, title: removeLabel, "aria-label": removeLabel, onClick: () => onChange(null) },
+                react_1.default.createElement(TrashIcon, null))));
+    }
+    return (react_1.default.createElement(AreaComponent, Object.assign({ role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined }, nativeProps, dropHandlers, { active: isDragActive, filled: false, disabled: disabled, onClick: choose, onKeyDown: event => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                choose();
+            }
+        }, ref: ref }),
+        input,
+        react_1.default.createElement(Icon, null,
+            react_1.default.createElement(UploadIcon, null)),
+        react_1.default.createElement(Label, null, label),
+        hint && react_1.default.createElement(Hint, null, hint)));
+};
+__exportStar(require("./FileDropzoneArea"), exports);
+exports.default = react_1.default.forwardRef(FileDropzone);

package/FileDropzone/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The file matches `accept` of the input: the MIME types (`image/png`), the groups (`image/*`)
+ * and the extensions (`.pdf`). The empty `accept` takes any file
+ */
+export declare const isFileAccepted: (file: File, accept?: string) => boolean;
+/**
+ * «54.1 KB», «2.3 MB»: the decimal units, as the file managers show
+ */
+export declare const formatFileSize: (bytes: number) => string;

package/FileDropzone/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatFileSize = exports.isFileAccepted = void 0;
+/**
+ * The file matches `accept` of the input: the MIME types (`image/png`), the groups (`image/*`)
+ * and the extensions (`.pdf`). The empty `accept` takes any file
+ */
+const isFileAccepted = (file, accept) => {
+    if (!accept) {
+        return true;
+    }
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return accept
+        .split(',')
+        .map(item => item.trim().toLowerCase())
+        .filter(Boolean)
+        .some(item => {
+        if (item.startsWith('.')) {
+            return name.endsWith(item);
+        }
+        if (item.endsWith('/*')) {
+            return type.startsWith(item.slice(0, -1));
+        }
+        return type === item;
+    });
+};
+exports.isFileAccepted = isFileAccepted;
+/**
+ * «54.1 KB», «2.3 MB»: the decimal units, as the file managers show
+ */
+const formatFileSize = (bytes) => {
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1000 && unit < units.length - 1) {
+        value /= 1000;
+        unit += 1;
+    }
+    return `${unit === 0 ? value : value.toFixed(1).replace(/\.0$/, '')} ${units[unit]}`;
+};
+exports.formatFileSize = formatFileSize;

package/HintPopover/HintPopoverButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type HintPopoverButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const _default: React.ForwardRefExoticComponent<HintPopoverButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/HintPopover/HintPopoverButton.js

@@ -0,0 +1,67 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+/**
+ * The color of the text around: the button stands in the text, in the label of a field,
+ * in a colored header of the dialog
+ */
+const StyledButton = styled_1.default.button `
+  box-sizing: content-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0.15em;
+  padding: 0.2em;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  font: inherit;
+  font-size: 1em;
+  line-height: 1;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  vertical-align: middle;
+  transition:
+    opacity 120ms ease-out,
+    background-color 120ms ease-out;
+
+  &:hover,
+  &:focus-visible,
+  &[aria-expanded='true'] {
+    opacity: 1;
+    background-color: color-mix(in srgb, currentColor 15%, transparent);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 1px;
+  }
+`;
+const Path = styled_1.default.path `
+  fill: currentColor;
+`;
+/**
+ * «?» in the circle. `children` replaces the icon
+ */
+const HintPopoverButton = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledButton, Object.assign({ type: "button" }, nativeProps, { ref: ref }), children !== null && children !== void 0 ? children : (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true },
+        react_1.default.createElement(Path, { d: "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" })))));
+};
+exports.default = react_1.default.forwardRef(HintPopoverButton);

package/HintPopover/HintPopoverContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type HintPopoverContainerProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<HintPopoverContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;