@uxf/ui 11.74.0 → 11.74.2

package/dropzone/handle-rejected-files.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleRejectedFiles = handleRejectedFiles;
+const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
+const react_dropzone_1 = require("react-dropzone");
+async function handleRejectedFiles(fileRejections, fileCountLimit) {
+    const bigFiles = fileRejections.filter((rejection) => rejection.errors.some((error) => error.code === react_dropzone_1.ErrorCode.FileTooLarge));
+    const tooManyFiles = fileRejections.filter((rejection) => rejection.errors.some((error) => error.code === react_dropzone_1.ErrorCode.TooManyFiles));
+    if ((0, is_not_empty_1.isNotEmpty)(bigFiles)) {
+        // eslint-disable-next-line no-alert
+        alert(`Tyto soubory jsou příliš velké a nebyly nahrány: ${bigFiles.map((file) => file.file.name).join(", ")}`);
+    }
+    if ((0, is_not_empty_1.isNotEmpty)(tooManyFiles) && fileCountLimit) {
+        // eslint-disable-next-line no-alert
+        alert(`Bylo nahráno příliš mnoho souborů. Maximální počet souborů je ${fileCountLimit}`);
+    }
+}

package/dropzone/index.d.ts

@@ -0,0 +1,6 @@
+import { DropzoneList } from "./dropzone-list";
+export type { DropzoneInputProps } from "./dropzone-input";
+export type { DropzoneListProps } from "./dropzone-list";
+export declare const Dropzone: import("react").ForwardRefExoticComponent<import("./dropzone-input").DropzoneInputProps & import("react").RefAttributes<HTMLDivElement>> & {
+    List: typeof DropzoneList;
+};

package/dropzone/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropzone = void 0;
+const dropzone_input_1 = require("./dropzone-input");
+const dropzone_list_1 = require("./dropzone-list");
+exports.Dropzone = Object.assign(dropzone_input_1.DropzoneInput, { List: dropzone_list_1.DropzoneList });

package/dropzone/types.d.ts

@@ -0,0 +1,10 @@
+import { FileResponse } from "@uxf/core/types";
+export interface DropzoneFile extends FileResponse {
+    abortController?: AbortController;
+    error?: unknown;
+    originalFile?: File;
+    progress?: number | null;
+}
+export interface Accept {
+    [key: string]: string[];
+}

package/dropzone/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/error-message/error-message.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from "react";
+export interface ErrorMessageProps {
+    id?: string | undefined;
+    children?: ReactNode;
+}
+export declare const ErrorMessage: FC<ErrorMessageProps>;

package/error-message/error-message.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+const react_1 = __importDefault(require("react"));
+const ErrorMessage = (props) => {
+    return (react_1.default.createElement("p", { className: "uxf-error-message", id: props.id }, props.children));
+};
+exports.ErrorMessage = ErrorMessage;
+exports.ErrorMessage.displayName = "UxfUiErrorMessage";

package/error-message/error-message.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/error-message/error-message.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+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 snap_test_1 = require("../utils/snap-test");
+const error_message_stories_1 = require("./error-message.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(error_message_stories_1.Default, null));

package/error-message/error-message.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/error-message/error-message.stories.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importDefault(require("react"));
+const index_1 = require("./index");
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.ErrorMessage, null, "This field is required.")));
+}

package/error-message/index.d.ts

@@ -0,0 +1 @@
+export { ErrorMessage } from "./error-message";

package/error-message/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+var error_message_1 = require("./error-message");
+Object.defineProperty(exports, "ErrorMessage", { enumerable: true, get: function () { return error_message_1.ErrorMessage; } });

package/file-input/file-input.d.ts

@@ -0,0 +1,15 @@
+import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
+import { Clearable } from "@uxf/ui/types";
+import React, { ReactNode } from "react";
+import { FileInputBaseProps } from "../_file-input-base";
+export interface FileInputProps extends FileInputBaseProps, Clearable {
+    className?: string;
+    helperText?: ReactNode;
+    hiddenLabel?: boolean;
+    label?: ReactNode;
+    placeholder?: string;
+    size?: keyof InputGroupSizes;
+    uploadButtonLabel?: string;
+    variant?: keyof InputGroupVariants;
+}
+export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;

package/file-input/file-input.js

@@ -0,0 +1,72 @@
+"use strict";
+"use client";
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInput = void 0;
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
+const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const context_1 = require("@uxf/ui/context");
+const input_1 = require("@uxf/ui/input");
+const loader_1 = require("@uxf/ui/loader");
+const get_file_url_1 = require("@uxf/ui/utils/files/get-file-url");
+const react_1 = __importStar(require("react"));
+const _file_input_base_1 = require("../_file-input-base");
+const form_component_1 = require("../form-component");
+// eslint-disable-next-line complexity
+exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b, _c, _d;
+    const context = (0, react_1.useContext)(context_1.UiContext);
+    const [isUploading, setIsUploading] = (0, react_1.useState)(false);
+    const generatedId = (0, react_1.useId)();
+    const id = props.id || generatedId;
+    const innerRef = (0, react_1.useRef)(null);
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
+    const fileName = props.value ? `${props.value.name}` : props.placeholder || "No file has been selected yet";
+    const onUploadFile = (file) => {
+        setIsUploading(true);
+        return props.onUploadFile(file).finally(() => setIsUploading(false));
+    };
+    const onChange = (value, event) => {
+        const inputNode = innerRef.current;
+        // this ensures that the input is cleared after the upload, so there is no problem with uploading the same file again
+        if (!value && inputNode) {
+            inputNode.value = "";
+        }
+        props.onChange(value, event);
+    };
+    const rootClassName = (0, cx_1.cx)("uxf-file-input", ((_a = props.isFocused) !== null && _a !== void 0 ? _a : input.focused) && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-file-input__input", form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: onUploadFile, ref: (0, compose_refs_1.composeRefs)(ref, innerRef), value: props.value }),
+            react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-input--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`), htmlFor: id },
+                react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? (((_d = props.uploadButtonLabel) !== null && _d !== void 0 ? _d : "Vyberte soubor")) : (react_1.default.createElement(loader_1.Loader, { className: "uxf-file-input__label__loader", size: "sm" }))),
+                react_1.default.createElement("div", { className: "uxf-file-input__label__wrapper" },
+                    (context === null || context === void 0 ? void 0 : context.domain) && props.value ? (react_1.default.createElement("a", { className: "uxf-file-input__label__wrapper__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, props.value), rel: "noreferrer noopenner", target: "_blank" }, fileName)) : (react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, fileName)),
+                    props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: onChange })))))));
+});
+exports.FileInput.displayName = "UxfUiFileInput";

package/file-input/file-input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/file-input/file-input.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+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 snap_test_1 = require("../utils/snap-test");
+const file_input_stories_1 = require("./file-input.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(file_input_stories_1.Default, null));

package/file-input/file-input.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/file-input/file-input.stories.js

@@ -0,0 +1,43 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
+const upload_file_mock_1 = require("../utils/mocks/upload-file.mock");
+const index_1 = require("./index");
+function Default() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", setValue);
+    const onUploadError = (err) => {
+        // eslint-disable-next-line no-console
+        console.log("Upload error", err);
+    };
+    return (react_1.default.createElement("div", { className: "max-w-screen-sm space-y-2 p-20" },
+        react_1.default.createElement("div", { className: "space-y-2" },
+            react_1.default.createElement(index_1.FileInput, { label: "Default file input", name: "file-input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value }),
+            react_1.default.createElement(index_1.FileInput, { helperText: "Error file input", id: "error-file-input", isClearable: true, isInvalid: true, label: "Error file input", name: "file-input-error-message", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value }),
+            react_1.default.createElement(index_1.FileInput, { helperText: "Readonly/disabled file input", isDisabled: true, isReadOnly: true, label: "Readonly/disabled file input", name: "file-input-read-only", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value }))));
+}

package/file-input/index.d.ts

@@ -0,0 +1,2 @@
+export { FileInput } from "./file-input";
+export type { FileInputProps } from "./file-input";

package/file-input/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInput = void 0;
+var file_input_1 = require("./file-input");
+Object.defineProperty(exports, "FileInput", { enumerable: true, get: function () { return file_input_1.FileInput; } });

package/flash-messages/flash-message.d.ts

@@ -0,0 +1,17 @@
+import { FlashMessageVariants } from "@uxf/ui/flash-messages/theme";
+import React, { CSSProperties, MouseEventHandler, ReactNode } from "react";
+export type FlashMessageVariant = keyof FlashMessageVariants;
+export interface Notification {
+    autoDismiss?: boolean;
+    message: ReactNode;
+    dismissTimeout?: number;
+    id?: number;
+    onClick?: () => void;
+    variant?: FlashMessageVariant;
+}
+export interface FlashMessageProps {
+    notification: Notification;
+    onClose: MouseEventHandler<HTMLDivElement>;
+    style?: CSSProperties;
+}
+export declare const FlashMessage: React.ForwardRefExoticComponent<FlashMessageProps & React.RefAttributes<HTMLDivElement>>;

package/flash-messages/flash-message.js

@@ -0,0 +1,47 @@
+"use strict";
+"use client";
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashMessage = void 0;
+const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
+const react_1 = __importStar(require("react"));
+exports.FlashMessage = (0, react_1.forwardRef)((props, ref) => {
+    (0, react_1.useEffect)(() => {
+        const { autoDismiss, dismissTimeout } = props.notification;
+        let timer;
+        if (autoDismiss) {
+            timer = window.setTimeout(props.onClose, dismissTimeout);
+        }
+        return () => clearTimeout(timer);
+    }, [props.onClose, props.notification]);
+    const clickableProps = (0, use_clickable_props_1.useClickableProps)({
+        className: `uxf-flash-message uxf-flash-message--${props.notification.variant || "success"}`,
+        onClick: props.onClose,
+        role: "listitem alert",
+        style: props.style,
+    });
+    return (react_1.default.createElement("div", { ...clickableProps, ref: ref }, props.notification.message));
+});
+exports.FlashMessage.displayName = "UxfUiFlashMessage";

package/flash-messages/flash-messages-service.d.ts

@@ -0,0 +1,4 @@
+import { Notification } from "@uxf/ui/flash-messages/flash-message";
+import { FlashMessagesRef } from "@uxf/ui/flash-messages/flash-messages";
+export declare function getFlashMessagesRef(): import("react").RefObject<FlashMessagesRef>;
+export declare function flashMessage(notification: Notification): void;

package/flash-messages/flash-messages-service.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFlashMessagesRef = getFlashMessagesRef;
+exports.flashMessage = flashMessage;
+const react_1 = require("react");
+const flashMessagesRef = (0, react_1.createRef)();
+function getFlashMessagesRef() {
+    return flashMessagesRef;
+}
+function flashMessage(notification) {
+    if (flashMessagesRef.current) {
+        flashMessagesRef.current.open(notification);
+    }
+}

package/flash-messages/flash-messages.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Notification } from "./flash-message";
+export interface FlashMessagesRef {
+    close: (notification: Notification) => void;
+    closeAll: () => void;
+    open: (notification: Notification) => void;
+}
+export declare const FlashMessages: React.ForwardRefExoticComponent<React.RefAttributes<FlashMessagesRef>>;

package/flash-messages/flash-messages.js

@@ -0,0 +1,116 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashMessages = void 0;
+const react_1 = require("@headlessui/react");
+const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const react_2 = __importStar(require("react"));
+const flash_message_1 = require("./flash-message");
+exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
+    const [notifications, setNotifications] = (0, react_2.useState)([]);
+    const permanentNotificationsRef = (0, react_2.useRef)(null);
+    const permanentNotifications = notifications.filter((notification) => !notification.autoDismiss);
+    const dismissableNotifications = notifications.filter((notification) => Boolean(notification.autoDismiss));
+    const [lastToastHeight, setLastToastHeight] = (0, react_2.useState)(0);
+    const lastToastRef = (0, react_2.useRef)(null);
+    const [isCollapsed, setIsCollapsed] = (0, react_2.useState)(true);
+    const [showDivider, setShowDivider] = (0, react_2.useState)(false);
+    (0, react_2.useEffect)(() => {
+        if (lastToastRef.current) {
+            setLastToastHeight(lastToastRef.current.offsetHeight);
+        }
+    }, [lastToastHeight, dismissableNotifications]);
+    (0, react_2.useEffect)(() => {
+        const dividerHandler = () => {
+            if (permanentNotificationsRef.current &&
+                permanentNotificationsRef.current.scrollHeight > permanentNotificationsRef.current.clientHeight &&
+                dismissableNotifications.length > 0) {
+                setShowDivider(true);
+            }
+            else {
+                setShowDivider(false);
+            }
+        };
+        dividerHandler();
+        window.addEventListener("resize", dividerHandler);
+        return () => window.removeEventListener("resize", dividerHandler);
+    }, [dismissableNotifications.length, notifications]);
+    const open = (0, react_2.useCallback)((notification) => setNotifications((prev) => {
+        var _a;
+        return [
+            ...prev,
+            {
+                ...notification,
+                variant: notification.variant || "success",
+                autoDismiss: (_a = notification.autoDismiss) !== null && _a !== void 0 ? _a : true,
+                dismissTimeout: notification.dismissTimeout || 5000,
+                id: notification.id || Math.round(Math.random() * 1000),
+            },
+        ];
+    }), []);
+    const close = (0, react_2.useCallback)((notification) => setNotifications((prev) => prev.filter((n) => n !== notification)), []);
+    const closeAll = (0, react_2.useCallback)(() => setNotifications([]), []);
+    const innerRef = (0, react_2.useRef)({
+        close,
+        closeAll,
+        open,
+    });
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        close: innerRef.current.close,
+        closeAll: innerRef.current.closeAll,
+        open: innerRef.current.open,
+    }), []);
+    const dismissableContainerRef = (0, react_2.useRef)(null);
+    const clickableProps = (0, use_clickable_props_1.useClickableProps)({
+        className: `uxf-flash-messages__dismissable ${isCollapsed ? "is-collapsed" : "is-expanded"}`,
+        onMouseEnter: () => setIsCollapsed(false),
+        onMouseLeave: () => {
+            // scroll back down in case of having too many flash messages and scrolled up
+            if ((0, is_not_nil_1.isNotNil)(dismissableContainerRef.current)) {
+                dismissableContainerRef.current.scrollTop = dismissableContainerRef.current.scrollHeight;
+            }
+            setIsCollapsed(true);
+        },
+    });
+    return notifications.length > 0 ? (react_2.default.createElement("div", { className: "uxf-flash-messages", style: { "--last-flash-message-height": `${lastToastHeight}px` } },
+        dismissableNotifications.length > 0 && (react_2.default.createElement("div", { ref: dismissableContainerRef, ...clickableProps },
+            react_2.default.createElement("div", null, dismissableNotifications.map((notification, index) => {
+                const isLast = index === dismissableNotifications.length - 1;
+                return (react_2.default.createElement(react_1.Transition, { appear: true, className: "uxf-flash-message-wrapper", enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", key: notification.id, ref: isLast ? lastToastRef : null, show: true, style: isLast
+                        ? {}
+                        : {
+                            "--flash-message-height": `${lastToastHeight}px`,
+                        } },
+                    react_2.default.createElement(flash_message_1.FlashMessage, { notification: notification, onClose: () => close(notification) })));
+            })))),
+        showDivider && react_2.default.createElement("hr", { className: "uxf-flash-messages__divider" }),
+        permanentNotifications.length > 0 && (react_2.default.createElement("div", { className: "uxf-flash-messages__permanent", ref: permanentNotificationsRef },
+            react_2.default.createElement("div", null, permanentNotifications.map((notification) => {
+                return (react_2.default.createElement(react_1.Transition, { appear: true, className: "uxf-flash-message-wrapper", enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", key: notification.id, show: true },
+                    react_2.default.createElement(flash_message_1.FlashMessage, { notification: notification, onClose: () => close(notification) })));
+            })))))) : null;
+});
+exports.FlashMessages.displayName = "UxfUiFlashMessages";

package/flash-messages/flash-messages.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/flash-messages/flash-messages.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+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 snap_test_1 = require("../utils/snap-test");
+const flash_messages_stories_1 = require("./flash-messages.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(flash_messages_stories_1.Default, null));

package/flash-messages/flash-messages.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/flash-messages/flash-messages.stories.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+const flash_messages_service_1 = require("./flash-messages-service");
+// Random texts for flash message height testing
+const randomTexts = [
+    "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ex fuga neque. Delectus error, esse eum exercitationem iste iure maiores mollitia officia quasi reiciendis saepe voluptates voluptatum? Commodi, nulla, quo!",
+    "ulpa ex fuga neque. Delectus error",
+    "consectetur adipisicing elit. Culpa ex fuga neque. Delectus error, esse eum exercit",
+];
+function Default() {
+    return (react_1.default.createElement("div", { className: "inline-flex flex-col space-y-4" },
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
+                    react_1.default.createElement("span", null, "Everything is alright."))),
+            }) }, "Click to fire Flash message, variant success"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
+                    react_1.default.createElement("span", null, "Everything is alright."))),
+                variant: "error",
+            }) }, "Click to fire Flash message, variant error"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
+                    react_1.default.createElement("span", null, "Everything is alright."))),
+                variant: "info",
+            }) }, "Click to fire Flash message, variant info"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 20 }),
+                    react_1.default.createElement("span", null, "Seems like an error occurred :)"))),
+                autoDismiss: false,
+                variant: "error",
+            }) }, "AutoDismiss: false Flash message, variant error"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }),
+                    react_1.default.createElement("span", null, "You should better watch out :)"))),
+                autoDismiss: false,
+                variant: "warning",
+            }) }, "Flash message, variant warning"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
+                    react_1.default.createElement("span", null, "Just letting you know"))),
+                autoDismiss: false,
+                variant: "info",
+            }) }, "Flash message, variant info"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: "Small",
+                autoDismiss: false,
+                variant: "info",
+            }) }, "Small flash message"),
+        react_1.default.createElement(button_1.Button, { onClick: () => {
+                const randomNumber = Math.floor(Math.random() * randomTexts.length);
+                return (0, flash_messages_service_1.flashMessage)({
+                    message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                        react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
+                        react_1.default.createElement("span", null, randomTexts[randomNumber]))),
+                });
+            } }, "Flash message, variant success, random text")));
+}

package/flash-messages/index.d.ts

@@ -0,0 +1,3 @@
+export { FlashMessages } from "./flash-messages";
+export type { FlashMessagesRef } from "./flash-messages";
+export { flashMessage, getFlashMessagesRef } from "./flash-messages-service";

package/flash-messages/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFlashMessagesRef = exports.flashMessage = exports.FlashMessages = void 0;
+var flash_messages_1 = require("./flash-messages");
+Object.defineProperty(exports, "FlashMessages", { enumerable: true, get: function () { return flash_messages_1.FlashMessages; } });
+var flash_messages_service_1 = require("./flash-messages-service");
+Object.defineProperty(exports, "flashMessage", { enumerable: true, get: function () { return flash_messages_service_1.flashMessage; } });
+Object.defineProperty(exports, "getFlashMessagesRef", { enumerable: true, get: function () { return flash_messages_service_1.getFlashMessagesRef; } });

package/flash-messages/theme.d.ts

@@ -0,0 +1,6 @@
+export interface FlashMessageVariants {
+    error: true;
+    info: true;
+    success: true;
+    warning: true;
+}

package/flash-messages/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/form-component/form-component.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactElement, ReactNode } from "react";
+export interface FormComponentProps {
+    children?: ReactElement;
+    className?: string;
+    errorId?: string;
+    form?: string;
+    helperText?: ReactNode;
+    hiddenLabel?: boolean;
+    inputId: string;
+    isRequired?: boolean;
+    label?: ReactNode;
+    name: string;
+}
+export declare const FormComponent: React.ForwardRefExoticComponent<FormComponentProps & React.RefAttributes<HTMLDivElement>>;