@uxf/ui 11.16.0 → 11.18.0

package/_select-base/_select-base.d.ts

@@ -19,6 +19,7 @@ export interface SelectBaseProps<Value, Option> extends FormControlProps<Value |
     customInputElementDisplayName: string;
     dropdownClassName?: string;
     dropdownMatchesInputWidth?: boolean;
+    dropdownMaxHeight?: number;
     dropdownPlacement?: Placement;
     dropdownStrategy?: Strategy;
     emptyMessage: string;

package/_select-base/_select-base.js

@@ -79,7 +79,7 @@ const _SelectBase = (props) => {
     const innerRef = (0, react_2.useRef)(null);
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
-    const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", (_c = props.dropdownMatchesInputWidth) !== null && _c !== void 0 ? _c : true, props.dropdownStrategy);
+    const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", (_c = props.dropdownMatchesInputWidth) !== null && _c !== void 0 ? _c : true, props.dropdownMaxHeight, props.dropdownStrategy);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, props.forwardRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.forwardRef]);
     const HUIComponent = props.HUIComponent;
     return (react_2.default.createElement(HUIComponent, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-select-base", 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: props.isDisabled || props.isReadOnly, onChange: props.onChange, style: props.style, value: props.value }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,

package/button-list/button-list.d.ts

@@ -14,6 +14,7 @@ export interface ButtonListProps {
     color?: ButtonProps["color"];
     size?: ButtonProps["size"];
     variant?: ButtonProps["variant"];
+    menuMaxHeight?: number;
     menuPlacement?: Placement;
     menuStrategy?: Strategy;
 }

package/button-list/button-list.js

@@ -51,7 +51,7 @@ const ButtonList = (props) => {
     const restButtons = props.buttons.slice(props.visibleButtonsCount, props.buttons.length);
     const openButtonIcon = ((_a = props.openButton) === null || _a === void 0 ? void 0 : _a.icon) === null ? null : (_c = (_b = props.openButton) === null || _b === void 0 ? void 0 : _b.icon) !== null && _c !== void 0 ? _c : "ellipsis-vertical";
     const openButtonLabel = (_e = (_d = props.openButton) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : null;
-    const dropdown = (0, use_dropdown_1.useDropdown)((_f = props.menuPlacement) !== null && _f !== void 0 ? _f : "bottom-start", false, props.menuStrategy);
+    const dropdown = (0, use_dropdown_1.useDropdown)((_f = props.menuPlacement) !== null && _f !== void 0 ? _f : "bottom-start", false, props.menuMaxHeight, props.menuStrategy);
     if ((0, is_empty_1.isEmpty)(props.buttons)) {
         return null;
     }

package/button-list/button-list.stories.js

@@ -12,11 +12,18 @@ exports.default = {
 };
 const Default = () => {
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 0, variant: "outlined", buttons: [
+        react_1.default.createElement(index_1.ButtonList, { menuMaxHeight: 350, visibleButtonsCount: 0, variant: "outlined", buttons: [
                 { label: "First item" },
                 { label: "Second item" },
                 { label: "Third item" },
                 { label: "Fourth item", disabled: true },
+                { label: "Fifth item" },
+                { label: "Sixth item" },
+                { label: "Seventh item" },
+                { label: "Eighth item" },
+                { label: "Nineth item" },
+                { label: "Tenth item" },
+                { label: "Eleventh item" },
             ] }),
         react_1.default.createElement(index_1.ButtonList, { visibleButtonsCount: 4, variant: "white", buttons: [
                 { label: "First item" },

package/calendar/utils/get-class-names-from-flags.d.ts

@@ -1,2 +1,2 @@
 import { Flag } from "@uxf/datepicker/utils/types";
-export declare const getClassNamesFromFlags: (flags: Flag[]) => string[];
+export declare const getClassNamesFromFlags: (flags: Flag[]) => string;

package/calendar/utils/get-class-names-from-flags.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getClassNamesFromFlags = void 0;
-const getClassNamesFromFlags = (flags) => flags.reduce((acc, curr) => [
-    ...acc,
-    curr.flag,
-    ...(curr.isFirst ? [`${curr.flag}--first`] : []),
-    ...(curr.isLast ? [`${curr.flag}--last`] : []),
-], []);
+const getClassNamesFromFlags = (flags) => flags
+    .reduce((acc, curr) => [...acc, curr.flag, ...(curr.isFirst ? [`${curr.flag}--first`] : []), ...(curr.isLast ? [`${curr.flag}--last`] : [])], [])
+    .join(" ");
 exports.getClassNamesFromFlags = getClassNamesFromFlags;

package/date-range-picker-input/README.md

@@ -6,4 +6,5 @@
 @import url("@uxf/ui/button/button.css");
 @import url("@uxf/ui/calendar/calendar.css");
 @import url("@uxf/ui/date-picker/date-picker.css");
+@import url("@uxf/ui/date-range-picker/date-range-picker.css");
 ```

package/dropzone/dropzone.stories.js

@@ -28,12 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentStructure = exports.Default = void 0;
 const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
-const upload_file_mock_1 = require("@uxf/ui/utils/mocks/upload-file.mock");
 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 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",
@@ -42,6 +43,7 @@ exports.default = {
 function Default() {
     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({
@@ -56,8 +58,8 @@ function Default() {
             });
         });
     };
-    const storyDropzone = (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled drag 'n' drop", label: "Use drag and drop or click to upload", noDrag: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled-drag-and-drop" }),
+    return (react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() },
+        react_1.default.createElement(index_1.Dropzone, { isDisabled: status === "UPLOADING", helperText: "Disabled drag 'n' drop", label: "Use drag and drop or click to upload", noDrag: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled-drag-and-drop" }),
         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"), noClick: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled-click" }),
         react_1.default.createElement(index_1.Dropzone, { accept: { "image/*": [] }, label: "Only images upload", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-only-images" }),
         react_1.default.createElement(index_1.Dropzone, { label: "Single file upload", maxFilesCount: 1, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-single-file" }),
@@ -65,9 +67,6 @@ function Default() {
         react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files, name: "dropzone-error-message" }),
         react_1.default.createElement(index_1.Dropzone.List, { onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
                 react_1.default.createElement("pre", null, JSON.stringify(file, null, 4)))), value: files, name: "dropzone-list" })));
-    return (react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() },
-        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" }, storyDropzone))));
 }
 exports.Default = Default;
 function ComponentStructure() {

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

@@ -24,9 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-const upload_file_mock_1 = require("@uxf/ui/utils/mocks/upload-file.mock");
 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");
 exports.default = {
     title: "UI/FileInput",
@@ -39,11 +39,11 @@ function Default() {
         // 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: upload_file_mock_1.uploadFile, value: value, name: "file-input" }),
-        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: upload_file_mock_1.uploadFile, value: value, isClearable: true, name: "file-input-error-message" }),
-        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: upload_file_mock_1.uploadFile, value: value, name: "file-input-read-only" })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyFileInputs)));
+        react_1.default.createElement("div", { className: "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", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, name: "file-input" }),
+                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: upload_file_mock_1.uploadFile, value: value, isClearable: true, name: "file-input-error-message" }),
+                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: upload_file_mock_1.uploadFile, value: value, name: "file-input-read-only" })))));
 }
 exports.Default = Default;

package/hooks/use-dropdown.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Placement, Strategy } from "@floating-ui/react";
-export declare function useDropdown(placement: Placement, matchWidth?: boolean, strategy?: Strategy): {
+export declare function useDropdown(placement: Placement, matchWidth?: boolean, maxHeight?: number, strategy?: Strategy): {
     placement: Placement;
     strategy: Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;

package/hooks/use-dropdown.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDropdown = void 0;
 const react_1 = require("@floating-ui/react");
-function useDropdown(placement, matchWidth = false, strategy) {
+const with_unit_1 = require("@uxf/styles/units/with-unit");
+function useDropdown(placement, matchWidth = false, maxHeight, strategy) {
     return (0, react_1.useFloating)({
         middleware: [
             (0, react_1.flip)(),
@@ -10,10 +11,10 @@ function useDropdown(placement, matchWidth = false, strategy) {
             (0, react_1.size)({
                 apply({ availableHeight, availableWidth, elements }) {
                     Object.assign(elements.floating.style, {
-                        maxHeight: Math.min(240, availableHeight) + "px",
+                        maxHeight: (0, with_unit_1.withUnit)(Math.min(maxHeight !== null && maxHeight !== void 0 ? maxHeight : 240, availableHeight), "px"),
                         maxWidth: matchWidth
-                            ? Math.min(availableWidth, elements.reference.getBoundingClientRect().width) + "px"
-                            : availableWidth,
+                            ? (0, with_unit_1.withUnit)(Math.min(availableWidth, elements.reference.getBoundingClientRect().width), "px")
+                            : (0, with_unit_1.withUnit)(availableWidth, "px"),
                     });
                 },
             }),

package/multi-combobox/_multi-combobox-base.js

@@ -70,7 +70,7 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
                 (query === "" || (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
         });
     const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "caretDown";
-    const dropdown = (0, use_dropdown_1.useDropdown)((_d = props.dropdownPlacement) !== null && _d !== void 0 ? _d : "bottom", true, props.dropdownStrategy);
+    const dropdown = (0, use_dropdown_1.useDropdown)((_d = props.dropdownPlacement) !== null && _d !== void 0 ? _d : "bottom", true, props.dropdownMaxHeight, props.dropdownStrategy);
     const inputRef = (0, react_3.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(inputRef, props.onBlur, props.onFocus);
     const stableRef = (0, react_3.useMemo)(() => (0, composeRefs_1.composeRefs)(inputRef, ref, dropdown.refs.setReference), [ref, dropdown.refs.setReference]);

package/multi-combobox/multi-combobox.stories.js

@@ -42,6 +42,12 @@ const options = [
     { id: "four", label: "Option four" },
     { id: "five", label: "Option five disabled" },
     { id: "six", label: "Option with diacritics (ěščřžýáíé)" },
+    { id: "seven", label: "Option seven" },
+    { id: "eight", label: "Option eight" },
+    { id: "nine", label: "Option nine" },
+    { id: "ten", label: "Option ten" },
+    { id: "twelve", label: "Option twelve" },
+    { id: "thirteen", label: "Option thirteen" },
 ];
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
@@ -51,7 +57,7 @@ function Default() {
         setValue(v);
     });
     const storyComboboxes = (react_1.default.createElement("div", { className: "space-y-8" },
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-1", label: "MultiCombobox", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", value: value }),
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownMaxHeight: 350, id: "multi-combobox-1", label: "MultiCombobox", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", value: value }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-2", label: "MultiCombobox with checkboxes", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withCheckboxes: true }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", id: "multi-combobox-3", label: "MultiCombobox with popover", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withPopover: true }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-4", label: "MultiCombobox with popup and checkboxes", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withCheckboxes: true, withPopover: true }),

package/multi-combobox/types.d.ts

@@ -16,6 +16,7 @@ export interface MultiComboboxOption<ValueId = MultiComboboxValueId> extends Mul
 export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = MultiComboboxOption<ValueId>> extends FormControlProps<Option[] | null> {
     allOptionsSelectedMessage?: string;
     className?: string;
+    dropdownMaxHeight?: number;
     dropdownPlacement?: Placement;
     dropdownStrategy?: Strategy;
     form?: string;

package/multi-select/_multi-select-base.js

@@ -39,7 +39,7 @@ exports._MultiSelectBase = (0, react_3.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const innerRef = (0, react_3.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
-    const dropdown = (0, use_dropdown_1.useDropdown)((_a = props.dropdownPlacement) !== null && _a !== void 0 ? _a : "bottom", true, props.dropdownStrategy);
+    const dropdown = (0, use_dropdown_1.useDropdown)((_a = props.dropdownPlacement) !== null && _a !== void 0 ? _a : "bottom", true, props.dropdownMaxHeight, props.dropdownStrategy);
     const stableRef = (0, react_3.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.refs.setReference), [ref, dropdown.refs.setReference]);
     const iconName = (_b = props.iconName) !== null && _b !== void 0 ? _b : "caretDown";
     const selectedOptions = (_c = props.value) !== null && _c !== void 0 ? _c : [];

package/multi-select/multi-select.stories.js

@@ -42,6 +42,12 @@ const options = [
     { id: "four", label: "Option four" },
     { id: "five", label: "Option five disabled", disabled: true },
     { id: "six", label: "Option with diacritics (ěščřžýáíé)" },
+    { id: "seven", label: "Option seven" },
+    { id: "eight", label: "Option eight" },
+    { id: "nine", label: "Option nine" },
+    { id: "ten", label: "Option ten" },
+    { id: "twelve", label: "Option twelve" },
+    { id: "thirteen", label: "Option thirteen" },
 ];
 const Default = () => {
     const [value, setValue] = (0, react_1.useState)(null);
@@ -51,7 +57,7 @@ const Default = () => {
         setValue(v);
     });
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-1", label: "MultiSelect", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", value: value }),
+        react_1.default.createElement(index_1.MultiSelect, { dropdownMaxHeight: 350, id: "multi-select-1", label: "MultiSelect", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", value: value }),
         react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-2", label: "MultiSelect with popover", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withPopover: true }),
         react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-3", label: "MultiSelect with renderOption", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
                 "Option: ",

package/multi-select/types.d.ts

@@ -13,6 +13,7 @@ export type MultiSelectOption<T = MultiSelectValueId> = {
 };
 export interface MultiSelectProps<ValueId = MultiSelectValueId, Option = MultiSelectOption<ValueId>> extends FormControlProps<Option[] | null> {
     className?: string;
+    dropdownMaxHeight?: number;
     dropdownPlacement?: Placement;
     dropdownStrategy?: Strategy;
     form?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.16.0",
+  "version": "11.18.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -17,9 +17,9 @@
   "dependencies": {
     "@floating-ui/react": "0.26.9",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "11.11.3",
+    "@uxf/core": "11.18.0",
     "@uxf/datepicker": "11.11.3",
-    "@uxf/styles": "11.11.3",
+    "@uxf/styles": "11.18.0",
     "color2k": "2.0.3",
     "dayjs": "1.11.10",
     "jump.js": "1.0.2",

package/raster-image/raster-image.js

@@ -12,37 +12,27 @@ const context_1 = require("../context");
 const RasterImage = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const componentContext = (0, context_1.useComponentContext)("rasterImage");
-    const className = [
-        "uxf-raster-image",
-        props.mode === "contain" && "uxf-raster-image--contain",
-        props.mode === "cover" && "uxf-raster-image--cover",
-        props.className,
-    ];
+    const className = (0, cx_1.cx)("uxf-raster-image", props.mode === "contain" && "uxf-raster-image--contain", props.mode === "cover" && "uxf-raster-image--cover", props.className);
     const resizerSrc = (0, resizer_1.resizerImageUrl)(props.src, (_a = props.width) !== null && _a !== void 0 ? _a : "auto", (_b = props.height) !== null && _b !== void 0 ? _b : "auto", {
         ...((_c = props.options) !== null && _c !== void 0 ? _c : {}),
         quality: (0, image_1.getImgQuality)(props.quality, "original"),
     });
     if (!resizerSrc) {
-        return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-raster-image--no-image", ...className) }, props.noImageContent);
+        return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-raster-image--no-image", className) }, props.noImageContent);
     }
-    const imgClassName = [
-        "uxf-raster-image__img",
-        props.mode === "contain" && "uxf-raster-image__img--contain",
-        props.mode === "cover" && "uxf-raster-image__img--cover",
-        props.imgClassName,
-    ];
+    const imgClassName = (0, cx_1.cx)("uxf-raster-image__img", props.mode === "contain" && "uxf-raster-image__img--contain", props.mode === "cover" && "uxf-raster-image__img--cover", props.imgClassName);
     const svgUrl = props.src && (0, image_1.getSvgImgUrl)(props.src);
     if (svgUrl) {
-        return (react_1.default.createElement("picture", { className: (0, cx_1.cx)(className) },
-            react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)(imgClassName), height: props.height, loading: props.loading, src: svgUrl, width: props.width })));
+        return (react_1.default.createElement("picture", { className: className },
+            react_1.default.createElement("img", { alt: props.alt, className: imgClassName, height: props.height, loading: props.loading, src: svgUrl, width: props.width })));
     }
     const breakpoints = ["0em", ...Object.values((_d = props.breakpoints) !== null && _d !== void 0 ? _d : componentContext.breakpoints)];
-    return (react_1.default.createElement("picture", { className: (0, cx_1.cx)(className) }, (_f = (_e = props.widths) === null || _e === void 0 ? void 0 : _e.map((w, i) => i < breakpoints.length && (react_1.default.createElement(image_1.ImgSources, { breakpointIndex: i, breakpoints: breakpoints, height: props.heights && props.heights[i]
+    return (react_1.default.createElement("picture", { className: className }, (_f = (_e = props.widths) === null || _e === void 0 ? void 0 : _e.map((w, i) => i < breakpoints.length && (react_1.default.createElement(image_1.ImgSources, { breakpointIndex: i, breakpoints: breakpoints, height: props.heights && props.heights[i]
             ? props.heights[i]
             : props.width && props.height
                 ? Math.ceil((props.height / props.width) * w)
                 : "auto", key: `${w}-${i}`, options: props.options, quality: props.quality, src: props.src, width: w }))).reverse()) !== null && _f !== void 0 ? _f : (react_1.default.createElement(image_1.ImgSources, { height: (_g = props.height) !== null && _g !== void 0 ? _g : "auto", options: props.options, quality: props.quality, src: props.src, width: (_h = props.width) !== null && _h !== void 0 ? _h : "auto" })),
-        react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)(imgClassName), height: (0, image_1.getImgElementHeight)(props.src, props.width, props.height), loading: props.loading, src: resizerSrc, width: (0, image_1.getImgElementWidth)(props.src, props.width, props.height) })));
+        react_1.default.createElement("img", { alt: props.alt, className: imgClassName, height: (0, image_1.getImgElementHeight)(props.src, props.width, props.height), loading: props.loading, src: resizerSrc, width: (0, image_1.getImgElementWidth)(props.src, props.width, props.height) })));
 };
 exports.RasterImage = RasterImage;
 exports.RasterImage.displayName = "UxfUiRasterImage";

package/select/select.js

@@ -12,7 +12,7 @@ const Select = (props) => {
     var _a, _b, _c, _d;
     const onChange = (v) => { var _a; return props.onChange((_a = v === null || v === void 0 ? void 0 : v.id) !== null && _a !== void 0 ? _a : null); };
     const selectedOption = (_a = props.options.find((option) => option.id === props.value)) !== null && _a !== void 0 ? _a : null;
-    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, customInputElementDisplayName: react_1.Listbox.Button.displayName, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: "", forwardRef: props.forwardRef, helperText: props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: selectedOption, variant: props.variant },
+    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, customInputElementDisplayName: react_1.Listbox.Button.displayName, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownMaxHeight: props.dropdownMaxHeight, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: "", forwardRef: props.forwardRef, helperText: props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: selectedOption, variant: props.variant },
         react_2.default.createElement(react_1.Listbox.Button, { className: `uxf-input__element ${!(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && classes_1.CLASSES.IS_EMPTY}` },
             react_2.default.createElement("span", { className: "uxf-input__element-text" }, selectedOption
                 ? (_d = (_c = props.renderSelectedOption) === null || _c === void 0 ? void 0 : _c.call(props, selectedOption)) !== null && _d !== void 0 ? _d : selectedOption.label

package/select/select.stories.js

@@ -51,7 +51,7 @@ function Default() {
         setValue(v);
     });
     return (react_1.default.createElement("div", { className: "flex flex-col gap-2" },
-        react_1.default.createElement(index_1.Select, { helperText: "Helper text", label: "Default select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, name: "select" }),
+        react_1.default.createElement(index_1.Select, { dropdownMaxHeight: 350, helperText: "Helper text", label: "Default select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, name: "select" }),
         react_1.default.createElement(index_1.Select, { helperText: "Helper text", isInvalid: true, label: "Invalid select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, isClearable: true, name: "select-invalid" }),
         react_1.default.createElement(index_1.Select, { helperText: "Helper text", isDisabled: true, label: "Disabled select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, name: "select-disabled" }),
         react_1.default.createElement(index_1.Select, { helperText: "Helper text", isReadOnly: true, label: "Read only select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, name: "select-read-only" }),

package/tabs/tabs.d.ts

@@ -4,6 +4,7 @@ export interface TabsPanelProps {
     disabled?: boolean;
     style?: CSSProperties;
     title: ReactNode;
+    unmount?: boolean;
 }
 export interface TabsProps {
     className?: string;
@@ -11,6 +12,7 @@ export interface TabsProps {
     defaultIndex?: number;
     grow?: boolean;
     onChange?: (index: number) => void;
+    selectedIndex?: number;
     tabListClassName?: string;
     variant?: "default" | "segmented";
 }

package/tabs/tabs.js

@@ -57,14 +57,14 @@ const TabsRoot = (0, react_2.forwardRef)((props, ref) => {
         title: c.props.title,
         disabled: c.props.disabled,
     }));
-    return (react_2.default.createElement(react_1.Tab.Group, { as: "div", className: tabsClassName, defaultIndex: props.defaultIndex, onChange: props.onChange, ref: ref },
+    return (react_2.default.createElement(react_1.Tab.Group, { as: "div", className: tabsClassName, defaultIndex: props.defaultIndex, onChange: props.onChange, ref: ref, selectedIndex: props.selectedIndex },
         react_2.default.createElement(react_1.Tab.List, { className: (0, cx_1.cx)("uxf-tabs__tab-list__wrapper", `uxf-tabs__tab-list__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.tabListClassName) },
             react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list", `uxf-tabs__tab-list--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), ref: containerRef, style: { justifyContent: hasOverflow ? "flex-start" : undefined, ...dragStyle } }, tabs.map((tab, index) => (react_2.default.createElement(react_1.Tab, { disabled: tab.disabled, className: ({ selected }) => {
                     var _a;
                     return (0, cx_1.cx)("uxf-tabs__tab", selected && classes_1.CLASSES.IS_ACTIVE, tab.disabled && classes_1.CLASSES.IS_DISABLED, `uxf-tabs__tab--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`);
                 }, key: `${tab.title}--${index}` }, tab.title)))),
             props.customTabListContent),
-        react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tab, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tab}--${index}` }, tab))))));
+        react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tabPanel, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tabPanel}--${index}`, unmount: tabPanel.props.unmount }, tabPanel))))));
 });
 TabsRoot.displayName = "UxfUiTabs";
 exports.Tabs = Object.assign(TabsRoot, { Panel });

package/utils/get-dropzone-state.d.ts

@@ -0,0 +1,7 @@
+import { DropzoneFile } from "../dropzone/types";
+type DropzoneState = {
+    errorMessage?: string;
+    status: "ERROR" | "OK" | "UPLOADING";
+};
+export declare function getDropzoneState(files: DropzoneFile[]): DropzoneState;
+export {};

package/utils/get-dropzone-state.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDropzoneState = void 0;
+function getDropzoneState(files) {
+    const errors = files
+        .filter((file) => file.error)
+        .map((file) => file.error)
+        .join("; ");
+    const isUploading = Boolean(files.find((file) => file.id < 0));
+    if (errors) {
+        return {
+            errorMessage: errors,
+            status: "ERROR",
+        };
+    }
+    if (isUploading) {
+        return {
+            status: "UPLOADING",
+        };
+    }
+    return { status: "OK" };
+}
+exports.getDropzoneState = getDropzoneState;