@uxf/ui 1.0.0-beta.99 → 1.0.1

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/ui/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

@@ -1,7 +1,6 @@
-import { ReactNode } from "react";
-interface Props {
+import { FC, ReactNode } from "react";
+export interface ErrorMessageProps {
     id?: string | undefined;
     children?: ReactNode;
 }
-export declare function ErrorMessage(props: Props): JSX.Element;
-export {};
+export declare const ErrorMessage: FC<ErrorMessageProps>;

package/error-message/error-message.js

@@ -5,7 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorMessage = void 0;
 const react_1 = __importDefault(require("react"));
-function ErrorMessage(props) {
+const ErrorMessage = (props) => {
     return (react_1.default.createElement("p", { id: props.id, className: "uxf-error-message" }, 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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { ErrorMessage } from "./index";
+import React from "react";
 declare const _default: {
     title: string;
-    component: typeof ErrorMessage;
+    component: React.FC<import("./error-message").ErrorMessageProps>;
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

package/error-message/index.d.ts

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

package/error-message/index.js

@@ -1,17 +1,5 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./error-message"), exports);
+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,12 @@
+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 {
+    helperText?: ReactNode;
+    label?: ReactNode;
+    placeholder?: string;
+    size?: keyof InputGroupSizes;
+    variant?: keyof InputGroupVariants;
+}
+export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;

package/file-input/file-input.js

@@ -0,0 +1,75 @@
+"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.FileInput = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const cx_1 = require("@uxf/core/utils/cx");
+const context_1 = require("@uxf/ui/context");
+const form_component_1 = require("../form-component");
+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");
+// eslint-disable-next-line complexity
+exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    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, useInputFocus_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 onChange = async (_, e) => {
+        var _a, _b;
+        const file = (_a = e === null || e === void 0 ? void 0 : e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file) {
+            return;
+        }
+        setIsUploading(true);
+        try {
+            const response = await props.onUploadFile(file);
+            await props.onChange(response);
+        }
+        catch (err) {
+            (_b = props.onUploadError) === null || _b === void 0 ? void 0 : _b.call(props, err);
+        }
+        finally {
+            setIsUploading(false);
+        }
+    };
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(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), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
+        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, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: ref, 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-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), htmlFor: id },
+                react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? ("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), target: "_blank", rel: "noreferrer noopenner" }, 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: props.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,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./file-input").FileInputProps & React.RefAttributes<HTMLInputElement>>;
+};
+export default _default;
+export declare function Default(): React.JSX.Element;

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

@@ -0,0 +1,50 @@
+"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 = void 0;
+const uploadFIle_mock_1 = require("@uxf/ui/utils/mocks/uploadFIle.mock");
+const react_1 = __importStar(require("react"));
+const index_1 = require("./index");
+const action_1 = require("../utils/action");
+exports.default = {
+    title: "UI/FileInput",
+    component: index_1.FileInput,
+};
+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);
+    };
+    const storyFileInputs = (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.FileInput, { label: "Default file input", onChange: onChange, onUploadError: onUploadError, onUploadFile: uploadFIle_mock_1.uploadFile, value: value }),
+        react_1.default.createElement(index_1.FileInput, { helperText: "Error file input", id: "error-file-input", isInvalid: true, label: "Error file input", onChange: onChange, onUploadError: onUploadError, onUploadFile: uploadFIle_mock_1.uploadFile, value: value, isClearable: true }),
+        react_1.default.createElement(index_1.FileInput, { helperText: "Readonly/disabled file input", label: "Readonly/disabled file input", isReadOnly: true, isDisabled: true, onChange: onChange, onUploadError: onUploadError, onUploadFile: uploadFIle_mock_1.uploadFile, value: value })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyFileInputs),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyFileInputs)));
+}
+exports.Default = Default;

package/file-input/index.d.ts

@@ -0,0 +1,2 @@
+export type { FileInputProps } from "./file-input";
+export { FileInput } 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

@@ -1,6 +1,6 @@
 import { FC, MouseEventHandler, ReactNode } from "react";
 import { FlashMessageVariants } from "@uxf/ui/flash-messages/theme";
-export declare type FlashMessageVariant = keyof FlashMessageVariants;
+export type FlashMessageVariant = keyof FlashMessageVariants;
 export interface Notification {
     autoDismiss?: boolean;
     message: ReactNode;

package/flash-messages/flash-message.js

@@ -44,3 +44,4 @@ const FlashMessage = ({ notification, onClose }) => {
     return react_1.default.createElement("div", { ...clickableProps }, notification.message);
 };
 exports.FlashMessage = FlashMessage;
+exports.FlashMessage.displayName = "UxfUiFlashMessage";

package/flash-messages/flash-messages.js

@@ -52,4 +52,4 @@ exports.FlashMessages = (0, react_1.forwardRef)((props, ref) => {
     return notifications.length > 0 ? (react_1.default.createElement("div", { className: "uxf-flash-messages" },
         react_1.default.createElement("div", { className: "uxf-flash-messages__list-wrapper", role: "list" }, notifications.map((notification) => (react_1.default.createElement(flash_message_1.FlashMessage, { key: `${notification.id}`, notification: notification, onClose: onClose(notification) })))))) : null;
 });
-exports.FlashMessages.displayName = "FlashMessages";
+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

@@ -4,4 +4,4 @@ declare const _default: {
     component: React.ForwardRefExoticComponent<React.RefAttributes<import("./flash-messages").FlashMessagesRef>>;
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

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

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 const flash_messages_1 = require("./flash-messages");
 const flash_messages_service_1 = require("./flash-messages-service");
-const button_1 = require("@uxf/ui/button");
-const icon_1 = require("@uxf/ui/icon");
 exports.default = {
     title: "UI/FlashMessages",
     component: flash_messages_1.FlashMessages,
@@ -17,29 +17,34 @@ function Default() {
     return (react_1.default.createElement("div", { className: "light 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: 24 }),
+                    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: "xmarkLarge", size: 24 }),
+                    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: 24 }),
+                    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: 24 }),
+                    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")));
+            }) }, "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")));
 }
 exports.Default = Default;

package/flash-messages/index.d.ts

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

package/flash-messages/index.js

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

package/{form-control/form-control.d.ts → form-component/form-component.d.ts}

@@ -1,5 +1,5 @@
 import React, { ReactElement, ReactNode } from "react";
-export interface FormControlProps {
+export interface FormComponentProps {
     children?: ReactElement;
     className?: string;
     errorId?: string;
@@ -10,4 +10,4 @@ export interface FormControlProps {
     isRequired?: boolean;
     label?: ReactNode;
 }
-export declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FormComponent: React.ForwardRefExoticComponent<FormComponentProps & React.RefAttributes<HTMLDivElement>>;

package/form-component/form-component.js

@@ -0,0 +1,41 @@
+"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.FormComponent = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const label_1 = require("../label");
+exports.FormComponent = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
+    const helperTextClassName = (0, cx_1.cx)("uxf-helper-text", props.errorId && classes_1.CLASSES.IS_INVALID);
+    return (react_1.default.createElement("div", { className: `uxf-form-component ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref },
+        react_1.default.createElement("div", { className: "uxf-form-component__label" },
+            react_1.default.createElement(label_1.Label, { isHidden: props.hiddenLabel, isRequired: props.isRequired, htmlFor: props.inputId, form: props.form }, props.label)),
+        react_1.default.createElement("div", { className: "uxf-form-component__input" },
+            props.children,
+            props.helperText && (react_1.default.createElement("div", { className: helperTextClassName, id: props.errorId }, props.helperText)))));
+});
+exports.FormComponent.displayName = "UxfUiFormComponent";

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

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

package/form-component/form-component.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 form_component_stories_1 = require("./form-component.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(form_component_stories_1.Default, null));

package/{form-control/form-control.stories.d.ts → form-component/form-component.stories.d.ts}

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./form-control").FormControlProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("./form-component").FormComponentProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         actions: {
             argTypesRegex: string;
@@ -9,4 +9,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

package/form-component/form-component.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const form_component_1 = require("./form-component");
+exports.default = {
+    title: "UI/FormComponent",
+    component: form_component_1.FormComponent,
+    parameters: { actions: { argTypesRegex: "^on.*" } },
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default" },
+            react_1.default.createElement("div", null, "Default")),
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default", isRequired: true },
+            react_1.default.createElement("div", null, "Is required")),
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", isRequired: true },
+            react_1.default.createElement("div", null, "Is invalid")),
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", hiddenLabel: true },
+            react_1.default.createElement("div", null, "hidden label"))));
+}
+exports.Default = Default;

package/form-component/index.d.ts

@@ -0,0 +1,2 @@
+export type { FormComponentProps } from "./form-component";
+export { FormComponent } from "./form-component";

package/form-component/index.js

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

package/hooks/use-async-loading.d.ts

@@ -0,0 +1,4 @@
+export declare function useAsyncLoading<Option extends {
+    id: number | string;
+    label: string;
+}>(query: string, initialOptions: Option[], loadOptions?: (query: string) => Promise<Option[]>): Option[];

package/hooks/use-async-loading.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsyncLoading = void 0;
+const react_1 = require("react");
+function useAsyncLoading(query, initialOptions, loadOptions) {
+    const [options, setOptions] = (0, react_1.useState)(initialOptions);
+    const asyncLoadingCounter = (0, react_1.useRef)(0);
+    const timer = (0, react_1.useRef)();
+    const handleAsyncLoading = (0, react_1.useCallback)(async (loadingVersion, q) => {
+        let data = [];
+        if (loadOptions) {
+            data = await loadOptions(q);
+        }
+        return [data, loadingVersion];
+    }, [loadOptions]);
+    const getOptions = (0, react_1.useCallback)(async (q) => {
+        if (loadOptions) {
+            asyncLoadingCounter.current++;
+            const [loadedOptions, loadingVersion] = await handleAsyncLoading(asyncLoadingCounter.current, q);
+            if (asyncLoadingCounter.current === loadingVersion) {
+                setOptions(loadedOptions);
+            }
+        }
+    }, [handleAsyncLoading, loadOptions, setOptions]);
+    (0, react_1.useEffect)(() => {
+        window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => getOptions(query), 200);
+        return () => window.clearTimeout(timer.current);
+    }, [getOptions, query]);
+    return options;
+}
+exports.useAsyncLoading = useAsyncLoading;

package/hooks/use-dropdown.d.ts

@@ -1,2 +1,32 @@
-import { Placement } from "@floating-ui/react";
-export declare function useDropdown(placement: Placement, matchWidth?: boolean): import("@floating-ui/react").UseFloatingReturn<import("@floating-ui/react").ReferenceType>;
+/// <reference types="react" />
+import { Placement, Strategy } from "@floating-ui/react";
+export declare function useDropdown(placement: Placement, matchWidth?: boolean, strategy?: Strategy): {
+    placement: Placement;
+    strategy: Strategy;
+    middlewareData: import("@floating-ui/react").MiddlewareData;
+    x: number;
+    y: number;
+    update: () => void;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: Strategy;
+        middlewareData: import("@floating-ui/react").MiddlewareData;
+        update: () => void;
+        isPositioned: boolean;
+        floatingStyles: import("react").CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    isPositioned: boolean;
+    floatingStyles: import("react").CSSProperties;
+};

package/hooks/use-dropdown.js

@@ -2,26 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDropdown = void 0;
 const react_1 = require("@floating-ui/react");
-function useDropdown(placement, matchWidth = false) {
+function useDropdown(placement, matchWidth = false, strategy) {
     return (0, react_1.useFloating)({
-        placement,
         middleware: [
             (0, react_1.flip)(),
             (0, react_1.shift)(),
             (0, react_1.size)({
-                apply({ availableHeight, availableWidth, elements, strategy, x, y }) {
+                apply({ availableHeight, availableWidth, elements }) {
                     Object.assign(elements.floating.style, {
-                        left: x + "px",
                         maxHeight: Math.min(240, availableHeight) + "px",
                         maxWidth: matchWidth
                             ? Math.min(availableWidth, elements.reference.getBoundingClientRect().width) + "px"
                             : availableWidth,
-                        position: strategy,
-                        top: y + "px",
                     });
                 },
             }),
         ],
+        placement,
+        strategy,
         whileElementsMounted: (reference, floating, update) => (0, react_1.autoUpdate)(reference, floating, update, {
             elementResize: typeof ResizeObserver !== "undefined",
         }),