@uxf/ui 11.34.0 → 11.35.0

package/button/button.d.ts

@@ -1,7 +1,7 @@
 import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button/theme";
 import React, { AnchorHTMLAttributes } from "react";
-import { NextLink } from "./next-link";
+import { NextLink } from "../utils/next-link";
 export type ButtonVariant = keyof ButtonVariants;
 export type ButtonSize = keyof ButtonSizes;
 export type ButtonColor = keyof ButtonColors;

package/button-list/button-list.js

@@ -36,12 +36,13 @@ const use_dropdown_1 = require("../hooks/use-dropdown");
 const icon_1 = require("../icon");
 const MenuButton = (0, react_3.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment,@typescript-eslint/no-unused-vars
-    const { variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
+    const { as = "a", variant, color, isIconButton, isFullWidth, size, icon, label, className, ...restProps } = props;
+    const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
         className: (0, cx_1.cx)("uxf-button-list__menu-button", `uxf-button-list__menu-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button-list__menu-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className),
     });
-    return (react_3.default.createElement("a", { ref: ref, ...anchorProps },
+    return (react_3.default.createElement(Component, { ref: ref, ...anchorProps },
         icon && react_3.default.createElement(icon_1.Icon, { className: "uxf-button-list__menu-button-icon", name: icon }),
         label && react_3.default.createElement("span", { className: "uxf-button-list__menu-button-label" }, label)));
 });

package/chip/chip.d.ts

@@ -1,7 +1,9 @@
 import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import { ChipColor, ChipSize, ChipVariant } from "@uxf/ui/chip/theme";
 import React, { AnchorHTMLAttributes, MouseEventHandler } from "react";
+import { NextLink } from "../utils/next-link";
 export interface ChipProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "type">, UseAnchorProps {
+    as?: NextLink | "a";
     color?: ChipColor;
     onClose?: MouseEventHandler;
     size?: ChipSize;

package/chip/chip.js

@@ -42,14 +42,15 @@ const CloseButton = (props) => {
 };
 exports.Chip = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
-    const { children, className, onClose, suppressFocus, tabIndex, ...restProps } = props;
+    const { as = "a", children, className, onClose, suppressFocus, tabIndex, ...restProps } = props;
     const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-chip--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-chip--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, (0, is_not_nil_1.isNotNil)(onClose) && "has-button", className);
+    const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         className: (0, cx_1.cx)(chipClassName),
         tabIndex: suppressFocus ? -1 : tabIndex,
         ...restProps,
     });
-    return (react_1.default.createElement("a", { ref: ref, ...anchorProps },
+    return (react_1.default.createElement(Component, { ref: ref, ...anchorProps },
         typeof children === "string" ? react_1.default.createElement("span", { className: "uxf-chip__text" }, children) : children,
         (0, is_not_nil_1.isNotNil)(onClose) && react_1.default.createElement(CloseButton, { onClose: onClose })));
 });

package/combobox/combobox.js

@@ -57,28 +57,30 @@ function Options(props) {
     })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
 }
 Options.displayName = "UxfUiComboboxOptions";
+// eslint-disable-next-line complexity
 function Combobox(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const isAsync = (0, is_not_nil_1.isNotNil)(props.loadOptions);
     const [query, setQuery] = (0, react_3.useState)("");
-    const options = (0, use_async_loading_1.useAsyncLoading)(query, (_a = props.options) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY, props.loadOptions);
+    const asyncOptions = (0, use_async_loading_1.useAsyncLoading)(query, (_a = props.options) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY, props.loadOptions);
+    const options = isAsync ? asyncOptions : ((_b = props.options) !== null && _b !== void 0 ? _b : empty_array_1.EMPTY_ARRAY);
     const filteredData = (0, is_empty_1.isEmpty)(query) || isAsync ? options : options.filter((item) => (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
     const emptyMessage = (0, is_empty_1.isEmpty)(query)
-        ? ((_b = props.noQueryMessage) !== null && _b !== void 0 ? _b : "Pro zobrazení možností začněte psát")
+        ? ((_c = props.noQueryMessage) !== null && _c !== void 0 ? _c : "Pro zobrazení možností začněte psát")
         : (0, is_empty_1.isEmpty)(options)
-            ? ((_c = props.noOptionsMessage) !== null && _c !== void 0 ? _c : "Nabídka neosahuje žádné položky")
-            : ((_d = props.notFoundMessage) !== null && _d !== void 0 ? _d : "Nic nenalezeno");
+            ? ((_d = props.noOptionsMessage) !== null && _d !== void 0 ? _d : "Nabídka neosahuje žádné položky")
+            : ((_e = props.notFoundMessage) !== null && _e !== void 0 ? _e : "Nic nenalezeno");
     const clearQuery = () => setQuery("");
     const onChange = (v) => props.onChange(v);
     const onInputChange = (event) => setQuery(event.target.value);
     const displayValue = (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; };
-    const selectedOption = (_e = props.value) !== null && _e !== void 0 ? _e : null;
+    const selectedOption = (_f = props.value) !== null && _f !== void 0 ? _f : null;
     const generatedId = (0, react_3.useId)();
-    const id = (_f = props.id) !== null && _f !== void 0 ? _f : generatedId;
+    const id = (_g = props.id) !== null && _g !== void 0 ? _g : generatedId;
     const innerRef = (0, react_3.useRef)(null);
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
-    const dropdown = (0, use_dropdown_1.useDropdown)((_g = props.dropdownPlacement) !== null && _g !== void 0 ? _g : "bottom", (_h = props.dropdownMatchesInputWidth) !== null && _h !== void 0 ? _h : true, props.dropdownMaxHeight, props.dropdownStrategy);
+    const dropdown = (0, use_dropdown_1.useDropdown)((_h = props.dropdownPlacement) !== null && _h !== void 0 ? _h : "bottom", (_j = props.dropdownMatchesInputWidth) !== null && _j !== void 0 ? _j : true, props.dropdownMaxHeight, props.dropdownStrategy);
     const stableRef = (0, react_3.useMemo)(() => (0, compose_refs_1.composeRefs)(innerRef, props.inputGroupRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.inputGroupRef]);
     const isNotInteractive = props.isDisabled || props.isReadOnly;
     return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), "data-name": props.name, disabled: isNotInteractive, form: props.form, name: props.name, onChange: onChange, style: props.style, value: selectedOption }, (renderProps) => (react_3.default.createElement(react_3.default.Fragment, null,

package/combobox/combobox.spec.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const snap_test_1 = require("../utils/snap-test");
 const combobox_stories_1 = require("./combobox.stories");
-(0, snap_test_1.snapTest)("render default stories", react_1.default.createElement(combobox_stories_1.Default, null));
-(0, snap_test_1.snapTest)("render async stories", react_1.default.createElement(combobox_stories_1.Async, null));
+(0, snap_test_1.snapTest)("render default stories", react_1.default.createElement(combobox_stories_1.SynchronousOptions, null));
+(0, snap_test_1.snapTest)("render async stories", react_1.default.createElement(combobox_stories_1.AsynchronousOptions, null));

package/combobox/combobox.stories.d.ts

@@ -1,10 +1,3 @@
 import React from "react";
-import { Combobox } from "./index";
-declare const _default: {
-    title: string;
-    component: typeof Combobox;
-};
-export default _default;
-export declare function Default(): React.JSX.Element;
-export declare function Async(): React.JSX.Element;
-export declare function ComponentStructure(): React.JSX.Element;
+export declare function SynchronousOptions(): React.JSX.Element;
+export declare function AsynchronousOptions(): React.JSX.Element;

package/combobox/combobox.stories.js

@@ -22,61 +22,34 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = Default;
-exports.Async = Async;
-exports.ComponentStructure = ComponentStructure;
+exports.SynchronousOptions = SynchronousOptions;
+exports.AsynchronousOptions = AsynchronousOptions;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
-const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/Combobox",
-    component: index_1.Combobox,
-};
-const options = [
+const OPTIONS = [
     { id: "one", label: "Option one" },
     { id: "two", label: "Option two disabled", disabled: true },
     { id: "three", label: "Option three" },
     { id: "four", label: "Option with diacritics (ěščřžýáíé)" },
 ];
-function Default() {
+function SynchronousOptions() {
     const [value, setValue] = (0, react_1.useState)(null);
-    const onChange = (0, action_1.action)("onChange", (v) => {
-        // eslint-disable-next-line no-console
-        console.log("Select value: ", v);
-        setValue(v);
-    });
-    const storyComboboxes = (react_1.default.createElement("div", { className: "space-y-8" },
-        react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-1", label: "Combobox with helper text", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(index_1.Combobox, { helperText: "Error message", id: "combobox-1", isInvalid: true, isRequired: true, label: "Combobox invalid", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", isClearable: true, label: "Combobox with dropdown top", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(index_1.Combobox, { id: "combobox-render", isClearable: true, label: "RenderOption", name: "combobox", onChange: onChange, options: options, placeholder: "Vyberte...", renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
+    const onChange = (0, action_1.action)("onChange", setValue);
+    return (react_1.default.createElement("div", { className: "space-y-4 p-4" },
+        react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-1", label: "Combobox", name: "combobox", onChange: onChange, options: OPTIONS, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Combobox, { helperText: "Error message", id: "combobox-1", isInvalid: true, isRequired: true, label: "Combobox invalid", name: "combobox", onChange: onChange, options: OPTIONS, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", id: "combobox-1", isClearable: true, label: "Combobox with dropdown top", name: "combobox", onChange: onChange, options: OPTIONS, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-render", isClearable: true, label: "RenderOption", name: "combobox", onChange: onChange, options: OPTIONS, placeholder: "Vyberte...", renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
                 "Option: ",
                 option.label,
                 isSelected && " (selected)")), value: value })));
-    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyComboboxes)));
 }
-function Async() {
+function AsynchronousOptions() {
     const [value, setValue] = (0, react_1.useState)(null);
-    const onChange = (0, action_1.action)("onChange", (v) => {
-        // eslint-disable-next-line no-console
-        console.log("Select value: ", v);
-        setValue(v);
-    });
-    const loadOptions = (query) => Promise.resolve(options.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase())));
-    const storyComboboxes = (react_1.default.createElement("div", { className: "space-y-8" },
+    const onChange = (0, action_1.action)("onChange", setValue);
+    const loadOptions = (query) => Promise.resolve(OPTIONS.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase())));
+    return (react_1.default.createElement("div", { className: "p-4" },
         react_1.default.createElement(index_1.Combobox, { id: "combobox-1", label: "Combobox", loadOptions: loadOptions, name: "combobox", onChange: onChange, placeholder: "Vyberte...", value: value })));
-    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyComboboxes)));
-}
-function ComponentStructure() {
-    const [value, onChange] = (0, react_1.useState)(null);
-    return (react_1.default.createElement(component_structure_analyzer_1.default, null,
-        react_1.default.createElement(index_1.Combobox, { helperText: "Start typing to see options...", id: "combobox-structure", label: "Combobox with helper text", name: "combobox", onChange: onChange, options: options, value: value })));
 }

package/css/pagination.css

@@ -16,11 +16,11 @@
             }
         }
 
-        &.is-first {
+        &:first-child {
             @apply rounded-l-md;
         }
 
-        &.is-last {
+        &:last-child {
             @apply rounded-r-md;
         }
 

package/dropdown/dropdown.d.ts

@@ -1,6 +1,8 @@
 import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
+import { NextLink } from "../utils/next-link";
 export interface DropdownItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
+    as?: NextLink | "a";
 }
 type ItemsProps = HTMLAttributes<HTMLDivElement>;
 export type DropdownItemsProps = HTMLDivElement;

package/dropdown/dropdown.js

@@ -29,13 +29,14 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const Item = (0, react_1.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
-    const { children, className, ...restProps } = props;
+    const { as = "a", children, className, ...restProps } = props;
+    const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         className: `uxf-dropdown__item ${className || ""}`,
         role: "menuitem",
         ...restProps,
     });
-    return (react_1.default.createElement("a", { ref: ref, ...anchorProps }, children));
+    return (react_1.default.createElement(Component, { ref: ref, ...anchorProps }, children));
 });
 Item.displayName = "UxfUiDropdownItem";
 const Items = (0, react_1.forwardRef)((props, ref) => {

package/dropzone/README.md

@@ -1,8 +1,106 @@
 # Dropzone
 
+---
+
 ## CSS dependencies
 
 ```css
 @import url("@uxf/ui/icon/icon.css");
 @import url("@uxf/ui/dropzone/dropzone.css");
-```
+```
+
+---
+
+#### The Dropzone component is split into two parts:
+
+1. `<Dropzone />` (**DropzoneInput**): This handles file input via drag-and-drop or file selection. It manages file upload and validation.
+2. `<Dropzone.List />`: Displays the uploaded files and allows managing them (e.g., removing files) and provides the upload status of files. It works with the same `value` and `onChange` properties as the main `Dropzone` component to ensure synchronization between the uploaded files and their display.
+
+### **getDropzoneState**
+---
+This function returns the current status of the uploaded files. It can be used to determine whether the Dropzone component should be disabled or not.
+
+The status can be one of the following: `"ERROR" | "OK" | "UPLOADING"`
+
+```tsx
+const { status } = getDropzoneState(files);
+```
+
+## Component Overview
+---
+### How it works:
+
+- `value` and `onChange`: Both components share the same `value`, which represents the list of uploaded files, and `onChange`, which updates that list. This ensures that the files selected for upload are consistent with what is displayed in the file list.
+- We can use the `getDropzoneState` function to determine the current status of the uploaded files. This status can be used to disable the Dropzone component while files are being uploaded.
+- We can use the `onDropRejected` prop to handle rejected files. This prop is called when the user tries to upload files that exceed the size limit or the maximum number of files allowed. We can use this prop to display an error message to the user.
+
+Example of handling rejected files:
+ ```tsx
+  const handleDropRejectedFiles = async (fileRejections: FileRejection[]) => {
+        const bigFiles = fileRejections.filter((rejection) =>
+            rejection.errors.some((error) => error.code === ErrorCode.FileTooLarge),
+        );
+        const tooManyFiles = fileRejections.filter((rejection) =>
+            rejection.errors.some((error) => error.code === ErrorCode.TooManyFiles),
+        );
+        if (isNotEmpty(bigFiles)) {
+            alert(
+                `Tyto soubory jsou příliš velké a nebyly nahrány: ${bigFiles.map((file) => file.file.name).join(", ")}`,
+            );
+        }
+        if (isNotEmpty(tooManyFiles)) {
+            alert(`Bylo nahráno příliš mnoho souborů. Maximální počet souborů je ${fileCountLimit}`);
+        }
+    };
+ ```
+
+## Basic Example:
+---
+This example shows how to use the **Dropzone** component with useState to manage file uploads:
+
+```tsx
+import React, {useState} from "react";
+import {Dropzone} from "./path/to/dropzone";
+import {DropzoneFile} from "./path/to/dropzone/types";
+import {uploadFile} from "@uxf/ui/utils/mocks/upload-file.mock";
+
+function BasicExample() {
+    // Store uploaded files in state
+    const [files, setFiles] = useState<DropzoneFile[]>([]);
+
+    // Get the current status of uploaded files
+    const { status } = getDropzoneState(files);
+
+    // Confirm file removal
+    const onRemoveConfirm = (): Promise<boolean> => Promise.resolve(confirm("Do you want to delete the file?"));
+    
+    // Handle upload errors
+    const onUploadError = (error: unknown) => {
+        console.error(error);
+    };
+
+    return (
+        <div>
+            {/* Dropzone component for uploading files */}
+            <Dropzone
+                isDisabled={status === "UPLOADING"}
+                onChange={setFiles}
+                onUploadError={onUploadError}
+                onUploadFile={uploadFile}
+                value={files}
+            />
+
+            {/* List of uploaded files */}
+            <Dropzone.List
+                onChange={setFiles}
+                onRemoveConfirm={onRemoveConfirm}
+                value={files}
+            />
+        </div>
+    );
+};
+```
+
+## Advanced Example:
+---
+This example shows how to use the **Dropzone** component with limited file types and sizes:

package/dropzone/dropzone-input.d.ts

@@ -1,6 +1,7 @@
 import { FileResponse } from "@uxf/core/types";
 import { FormControlProps, UploadOptions } from "@uxf/ui/types";
 import React, { CSSProperties, ReactNode } from "react";
+import { FileRejection } from "react-dropzone";
 import { IconName } from "../icon/types";
 import { Accept, DropzoneFile } from "./types";
 export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | undefined> {
@@ -9,12 +10,13 @@ export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | un
     helperText?: ReactNode;
     icon?: IconName;
     id?: string;
+    isNotClickable?: boolean;
+    isNotDraggable?: boolean;
     label?: ReactNode;
     maxFileSize?: number;
     maxFilesCount?: number;
     minFileSize?: number;
-    noClick?: boolean;
-    noDrag?: boolean;
+    onDropRejected?: (fileRejections: FileRejection[]) => void;
     onUploadError?: (err: unknown) => void;
     onUploadFile: (file: File, options?: UploadOptions) => Promise<FileResponse>;
     style?: CSSProperties;

package/dropzone/dropzone-input.js

@@ -30,7 +30,6 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const react_dropzone_1 = require("react-dropzone");
 const icon_1 = require("../icon");
-const validator_exceptions_1 = require("../utils/validator/validator-exceptions");
 function fileToFileResponse(file) {
     return {
         id: -Math.round(Math.random() * 100000000),
@@ -68,16 +67,6 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const refValue = (0, react_1.useRef)();
     refValue.current = props.value;
-    const handleFileRejected = async (fileRejections) => {
-        fileRejections.forEach((fileRejection) => {
-            if (props.maxFileSize && fileRejection.file.size > props.maxFileSize) {
-                if (props.onUploadError) {
-                    props.onUploadError(validator_exceptions_1.ValidatorExceptions.MaxFileSize);
-                }
-                throw validator_exceptions_1.ValidatorExceptions.MaxFileSize;
-            }
-        });
-    };
     const handleFileDrop = async (acceptedFiles, inputRef) => {
         const files = acceptedFiles.map((file) => ({
             ...fileToFileResponse(file),
@@ -116,18 +105,18 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
         maxSize: props.maxFileSize,
         minSize: props.minFileSize,
         multiple: props.maxFilesCount !== 1,
-        noClick: props.noClick,
-        noDrag: props.noDrag,
+        noClick: props.isNotClickable,
+        noDrag: props.isNotDraggable,
         onDrop: (acceptedFiles) => handleFileDrop(acceptedFiles, inputRef),
-        preventDropOnDocument: props.noDrag,
-        onDropRejected: handleFileRejected,
+        preventDropOnDocument: props.isNotDraggable,
+        onDropRejected: props.onDropRejected,
     });
     const labelOnCLick = (e) => {
         e.stopPropagation();
     };
     return (react_1.default.createElement("div", { className: `uxf-dropzone ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
         react_1.default.createElement("label", { ...getRootProps({
-                className: (0, cx_1.cx)("uxf-dropzone__label", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.noClick && "cursor-auto"),
+                className: (0, cx_1.cx)("uxf-dropzone__label", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isNotClickable && "cursor-auto"),
                 onClick: labelOnCLick,
             }), ref: (0, compose_refs_1.composeRefs)(ref, rootRef) },
             react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone__label__icon", name: (_b = props.icon) !== null && _b !== void 0 ? _b : "cloud" }),

package/dropzone/dropzone-list.d.ts

@@ -1,5 +1,5 @@
 import { FormControlProps } from "@uxf/ui/types";
-import { CSSProperties, FC, ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import { DropzoneFile } from "./types";
 export interface DropzoneListProps extends FormControlProps<DropzoneFile[] | undefined> {
     className?: string;
@@ -9,4 +9,7 @@ export interface DropzoneListProps extends FormControlProps<DropzoneFile[] | und
     renderItem?: (file: DropzoneFile) => ReactNode;
     style?: CSSProperties;
 }
-export declare const DropzoneList: FC<DropzoneListProps>;
+export declare function DropzoneList(props: DropzoneListProps): React.JSX.Element | null;
+export declare namespace DropzoneList {
+    var displayName: string;
+}

package/dropzone/dropzone-list.js

@@ -23,7 +23,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropzoneList = void 0;
+exports.DropzoneList = DropzoneList;
+const hide_1 = require("@uxf/core-react/components/hide");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const context_1 = require("@uxf/ui/context");
@@ -39,7 +40,7 @@ function formatBytes(bytes, decimals = 2) {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
-const DropzoneList = (props) => {
+function DropzoneList(props) {
     var _a, _b, _c;
     const context = (0, react_1.useContext)(context_1.UiContext);
     const handleRemove = (file, value, isUploading) => {
@@ -76,10 +77,10 @@ const DropzoneList = (props) => {
                 react_1.default.createElement("div", { className: "uxf-dropzone-list__item__block" },
                     isUploading ? (react_1.default.createElement(loader_1.Loader, { size: "sm" })) : (!file.error &&
                         ((_c = file.originalFile) === null || _c === void 0 ? void 0 : _c.size) && (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-size" }, formatBytes(file.originalFile.size)))),
-                    react_1.default.createElement("button", { className: "uxf-dropzone-list__item__block__remove-button", onClick: onRemove(file, isUploading), type: "button" },
-                        react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone-list__item__block__remove-button__icon", name: "xmarkLarge" })))),
+                    react_1.default.createElement(hide_1.Hide, { when: Boolean(props.isDisabled) },
+                        react_1.default.createElement("button", { className: "uxf-dropzone-list__item__block__remove-button", onClick: onRemove(file, isUploading), type: "button" },
+                            react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone-list__item__block__remove-button__icon", name: "xmarkLarge" }))))),
             Boolean(file.error) && (react_1.default.createElement("span", { className: (0, cx_1.cx)("uxf-helper-text", classes_1.CLASSES.IS_INVALID) }, props.errorText || "File upload error")))));
     })));
-};
-exports.DropzoneList = DropzoneList;
-exports.DropzoneList.displayName = "UxfUiDropzoneList";
+}
+DropzoneList.displayName = "UxfUiDropzoneList";

package/dropzone/dropzone.stories.d.ts

@@ -2,9 +2,8 @@ import React from "react";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("./dropzone-input").DropzoneInputProps & React.RefAttributes<HTMLDivElement>> & {
-        List: React.FC<import("./dropzone-list").DropzoneListProps>;
+        List: typeof import("./dropzone-list").DropzoneList;
     };
 };
 export default _default;
 export declare function Default(): React.JSX.Element;
-export declare function ComponentStructure(): React.JSX.Element;

package/dropzone/dropzone.stories.js

@@ -22,54 +22,46 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
-exports.ComponentStructure = ComponentStructure;
-const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
+const show_1 = require("@uxf/core-react/components/show");
+const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
+const handle_rejected_files_1 = require("@uxf/ui/dropzone/handle-rejected-files");
 const react_1 = __importStar(require("react"));
-const get_provider_config_1 = require("../_private-utils/get-provider-config");
-const context_1 = require("../context");
-const message_1 = require("../message");
+const toggle_1 = require("../toggle");
 const action_1 = require("../utils/action");
-const get_dropzone_state_1 = require("../utils/get-dropzone-state");
 const upload_file_mock_1 = require("../utils/mocks/upload-file.mock");
 const index_1 = require("./index");
 exports.default = {
     title: "UI/Dropzone",
     component: index_1.Dropzone,
 };
+const MB_SIZE = 1024 * 1024;
 function Default() {
+    const [isDisabled, setIsDisabled] = (0, react_1.useState)(false);
+    const [isFileCountLimited, setIsFileCountLimited] = (0, react_1.useState)(false);
+    const [fileCountLimit, setFileCountLimit] = (0, react_1.useState)(1);
+    const [isFileSizeLimited, setIsFileSizeLimited] = (0, react_1.useState)(false);
+    const [fileSizeLimit, setFileSizeLimit] = (0, react_1.useState)(1);
+    const [hasOnlyImagesAllowed, setHasOnlyImagesAllowed] = (0, react_1.useState)(false);
     const [files, setFiles] = (0, react_1.useState)([]);
     const onChange = (0, action_1.action)("onChange", setFiles);
-    const { status } = (0, get_dropzone_state_1.getDropzoneState)(files);
-    const onRemoveConfirm = () => {
-        return new Promise((resolve) => {
-            message_1.MessageService.openConfirm({
-                acceptLabel: "Yes, delete",
-                cancelLabel: "Cancel",
-                title: "Do you want to delete the file?",
-                color: "error",
-                variant: "centered",
-                onAccept: () => resolve(true),
-                onCancel: () => resolve(false),
-                CustomIconComponent: null,
-            });
-        });
-    };
-    return (react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() },
-        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled drag 'n' drop", isDisabled: status === "UPLOADING", label: "Use drag and drop or click to upload", name: "dropzone-disabled-drag-and-drop", noDrag: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled onClick upload", label: react_1.default.createElement("span", { className: "bg-primary-600 rounded-lg px-4 py-2 font-bold text-white" }, "JSX label"), name: "dropzone-disabled-click", noClick: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone, { accept: { "image/*": [] }, label: "Only images upload", name: "dropzone-only-images", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone, { label: "Single file upload", maxFilesCount: 1, name: "dropzone-single-file", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", name: "dropzone-disabled", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", name: "dropzone-error-message", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files }),
-        react_1.default.createElement(index_1.Dropzone.List, { name: "dropzone-list", onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
-                react_1.default.createElement("pre", { className: "text-wrap" }, JSON.stringify(file, null, 4)))), value: files })));
-}
-function ComponentStructure() {
-    return (react_1.default.createElement(component_structure_analyzer_1.default, null,
-        react_1.default.createElement(index_1.Dropzone, null)));
+    const onRemoveConfirm = () => Promise.resolve(confirm("Do you want to delete the file?"));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(toggle_1.Toggle, { label: "Disabled", name: "toggle", onChange: () => setIsDisabled((prev) => !prev), value: isDisabled }),
+        react_1.default.createElement(toggle_1.Toggle, { label: "Only images upload", name: "toggle", onChange: () => setHasOnlyImagesAllowed((prev) => !prev), value: hasOnlyImagesAllowed }),
+        react_1.default.createElement("div", { className: "flex items-center" },
+            react_1.default.createElement(toggle_1.Toggle, { label: "Limit file count", name: "toggle", onChange: () => setIsFileCountLimited((prev) => !prev), value: isFileCountLimited }),
+            react_1.default.createElement("input", { className: "w-20", onChange: (event) => setFileCountLimit(parseInt(event.target.value, 10)), type: "number", value: fileCountLimit })),
+        react_1.default.createElement("div", { className: "flex items-center" },
+            react_1.default.createElement(toggle_1.Toggle, { label: "Limit file size", name: "toggle", onChange: () => setIsFileSizeLimited((prev) => !prev), value: isFileSizeLimited }),
+            react_1.default.createElement("input", { className: "w-20", onChange: (event) => setFileSizeLimit(parseInt(event.target.value, 10)), type: "number", value: fileSizeLimit }),
+            "MB"),
+        react_1.default.createElement(index_1.Dropzone, { accept: hasOnlyImagesAllowed ? { "image/*": [] } : undefined, isDisabled: isDisabled, label: "Use drag and drop or click to upload", maxFileSize: isFileSizeLimited ? fileSizeLimit * MB_SIZE : undefined, maxFilesCount: isFileCountLimited ? fileCountLimit : undefined, name: "dropzone-disabled-drag-and-drop", onChange: onChange, onDropRejected: (fileRejections) => (0, handle_rejected_files_1.handleRejectedFiles)(fileRejections, fileCountLimit), onUploadFile: upload_file_mock_1.uploadFile, value: files }),
+        react_1.default.createElement(index_1.Dropzone.List, { className: "mt-6", errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", isDisabled: isDisabled, name: "dropzone-error-message", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files }),
+        react_1.default.createElement(show_1.Show, { when: (0, is_not_empty_1.isNotEmpty)(files) },
+            react_1.default.createElement("div", { className: "mt-6" },
+                react_1.default.createElement("p", null, "File response:"),
+                react_1.default.createElement(index_1.Dropzone.List, { className: "w-max bg-gray-200 p-4", name: "dropzone-list", onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
+                        react_1.default.createElement("pre", { className: "text-wrap" }, JSON.stringify(file, null, 4)))), value: files })))));
 }

package/dropzone/handle-rejected-files.d.ts

@@ -0,0 +1,2 @@
+import { FileRejection } from "react-dropzone";
+export declare function handleRejectedFiles(fileRejections: FileRejection[], fileCountLimit: number): Promise<void>;

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)) {
+        // 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

@@ -1,5 +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: import("react").FC<import("./dropzone-list").DropzoneListProps>;
+    List: typeof DropzoneList;
 };

package/list-item/list-item.d.ts

@@ -1,7 +1,9 @@
 import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import React, { AnchorHTMLAttributes, ReactNode } from "react";
 import { IconName } from "../icon/types";
+import { NextLink } from "../utils/next-link";
 export interface ListItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
+    as?: NextLink | "a";
     endIcon?: IconName;
     endElement?: ReactNode;
 }

package/list-item/list-item.js

@@ -30,12 +30,13 @@ const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 exports.ListItem = (0, react_1.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
-    const { className, children, endElement, endIcon, ...restProps } = props;
+    const { as = "a", className, children, endElement, endIcon, ...restProps } = props;
+    const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
         className: (0, cx_1.cx)("uxf-list-item", className),
     });
-    return (react_1.default.createElement("a", { ref: ref, ...anchorProps },
+    return (react_1.default.createElement(Component, { ref: ref, ...anchorProps },
         react_1.default.createElement("span", { className: "uxf-list-item__inner" }, children),
         endElement && react_1.default.createElement("span", { className: "uxf-list-item__end-element-wrapper" }, endElement),
         endIcon && (react_1.default.createElement("span", { className: "uxf-list-item__end-icon-wrapper" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.34.0",
+  "version": "11.35.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -17,10 +17,10 @@
   "dependencies": {
     "@floating-ui/react": "0.26.23",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "11.32.0",
-    "@uxf/core-react": "11.33.0",
+    "@uxf/core": "11.35.0",
+    "@uxf/core-react": "11.35.0",
     "@uxf/datepicker": "11.32.0",
-    "@uxf/styles": "11.32.0",
+    "@uxf/styles": "11.35.0",
     "color2k": "2.0.3",
     "dayjs": "1.11.13",
     "jump.js": "1.0.2",

package/text-link/text-link.d.ts

@@ -1,8 +1,10 @@
 import { UseAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
 import { TextLinkVariants } from "@uxf/ui/text-link/theme";
 import React, { AnchorHTMLAttributes } from "react";
+import { NextLink } from "../utils/next-link";
 export type TextLinkVariant = keyof TextLinkVariants;
 export interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
+    as?: NextLink | "a";
     variant?: TextLinkVariant;
 }
 export declare const TextLink: React.ForwardRefExoticComponent<TextLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/text-link/text-link.js

@@ -29,11 +29,12 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 exports.TextLink = (0, react_1.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
-    const { className, children, variant, ...restProps } = props;
+    const { as = "a", className, children, variant, ...restProps } = props;
+    const Component = as;
     const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
         ...restProps,
         className: (0, cx_1.cx)("uxf-text-link", `uxf-text-link--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className),
     });
-    return (react_1.default.createElement("a", { ref: ref, ...anchorProps }, children));
+    return (react_1.default.createElement(Component, { ref: ref, ...anchorProps }, children));
 });
 exports.TextLink.displayName = "UxfUiTextLink";