@uxf/ui 10.5.2 → 10.7.0

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

@@ -28,6 +28,7 @@ export interface SelectBaseProps<Value, Option> extends FormControlProps<Value |
     id?: string;
     keyExtractor?: (option: Option) => string | number;
     label: ReactNode;
+    onOptionsUnmount?: () => void;
     options?: Option[];
     placeholder?: string;
     renderOption?: (option: Option, isSelected: boolean) => ReactNode;

package/_select-base/_select-base.js

@@ -27,6 +27,7 @@ exports._SelectBase = void 0;
 const react_1 = require("@floating-ui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const useOnUnmount_1 = require("@uxf/core/hooks/useOnUnmount");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const use_dropdown_1 = require("@uxf/ui/hooks/use-dropdown");
@@ -34,6 +35,13 @@ const icon_1 = require("@uxf/ui/icon");
 const input_1 = require("@uxf/ui/input");
 const label_1 = require("@uxf/ui/label");
 const react_2 = __importStar(require("react"));
+const Option = (props) => {
+    var _a, _b, _c, _d;
+    const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, props.option);
+    const HUIComponent = props.HUIComponent;
+    return (react_2.default.createElement(HUIComponent.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : props.option.id, value: props.option }, (_d = (_c = (_b = props.renderOption) === null || _b === void 0 ? void 0 : _b.call(props, props.option)) !== null && _c !== void 0 ? _c : optionKey) !== null && _d !== void 0 ? _d : props.option.label));
+};
+Option.displayName = "UxfUiSelectBaseOption";
 function isHUICombobox(HUIComponent) {
     return typeof HUIComponent.Input !== "undefined";
 }
@@ -53,13 +61,16 @@ const InputArrow = (props) => {
 const Options = (props) => {
     var _a, _b;
     const HUIComponent = props.HUIComponent;
+    (0, useOnUnmount_1.useOnUnmount)(() => {
+        var _a;
+        (_a = props.onUnmount) === null || _a === void 0 ? void 0 : _a.call(props);
+    });
     return (react_2.default.createElement(HUIComponent.Options, { className: (0, cx_1.cx)("uxf-dropdown uxf-select-base__options", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, props.matchWidth
             ? "uxf-select-base__options--match-width"
             : "uxf-select-base__options--not-match-width", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top", props.className), ref: props.forwardRef, static: true, style: props.style }, props.options && props.options.length > 0 ? (props.options.map((option) => {
         var _a;
         const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
-        const _option = option;
-        return (react_2.default.createElement(HUIComponent.Option, { disabled: _option.disabled, className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : _option.id, value: option }, (optionState) => { var _a, _b; return (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option, optionState.selected)) !== null && _b !== void 0 ? _b : option.label; }));
+        return (react_2.default.createElement(Option, { key: optionKey, keyExtractor: props.keyExtractor, option: option, HUIComponent: HUIComponent }));
     })) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
 };
 Options.displayName = "UxfUiSelectBaseOptions";
@@ -91,7 +102,7 @@ const _SelectBase = (props) => {
                         react_2.default.createElement(InputArrow, { iconName: props.iconName, open: renderProps.open }))) : (react_2.default.createElement(InputArrow, { iconName: props.iconName, open: renderProps.open }))),
                 props.rightAddon && react_2.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
             renderProps.open && (react_2.default.createElement(react_1.FloatingPortal, null,
-                react_2.default.createElement(Options, { HUIComponent: HUIComponent, className: props.dropdownClassName, emptyMessage: props.emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, matchWidth: props.dropdownMatchesInputWidth, options: props.options, placement: dropdown.placement, renderOption: props.renderOption, size: props.size, style: dropdown.floatingStyles, variant: props.variant }))),
+                react_2.default.createElement(Options, { HUIComponent: HUIComponent, className: props.dropdownClassName, emptyMessage: props.emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, matchWidth: props.dropdownMatchesInputWidth, onUnmount: props.onOptionsUnmount, options: props.options, placement: dropdown.placement, renderOption: props.renderOption, size: props.size, style: dropdown.floatingStyles, variant: props.variant }))),
             props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))))));
 };
 exports._SelectBase = _SelectBase;

package/avatar-file-input/avatar-file-input.js

@@ -36,7 +36,7 @@ const button_1 = require("../button");
 const form_component_1 = require("../form-component");
 const icon_1 = require("../icon");
 exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const generatedId = (0, react_1.useId)();
     const id = props.id || generatedId;
     const innerRef = (0, react_1.useRef)(null);
@@ -49,14 +49,14 @@ exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
     return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, label: props.label },
         react_1.default.createElement("div", { className: "uxf-avatar-file-input__inner-wrapper" },
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input__input", stateClassName), onClick: onSelectFile },
-                react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onFocus: input.onFocus, onChange: props.onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), value: props.value }),
+                react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: (_c = props.accept) !== null && _c !== void 0 ? _c : "image/*", "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onFocus: input.onFocus, onChange: props.onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), value: props.value }),
                 props.value ? (react_1.default.createElement(avatar_1.Avatar, { className: "uxf-avatar-file-input__input-avatar", src: (0, file_1.getFileUrl)(props.value) })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__input-empty" },
-                    react_1.default.createElement(icon_1.Icon, { className: "uxf-avatar-file-input__input-empty-icon", name: (_c = props.icon) !== null && _c !== void 0 ? _c : "cloud" })))),
+                    react_1.default.createElement(icon_1.Icon, { className: "uxf-avatar-file-input__input-empty-icon", name: (_d = props.icon) !== null && _d !== void 0 ? _d : "cloud" })))),
             react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls" }, props.customControls ? (props.customControls({
                 onSelectFile,
                 onRemoveFile,
             })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls-buttons" },
-                react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--select", disabled: props.isDisabled, onClick: onSelectFile, size: "sm", variant: "white" }, (_d = props.selectFileLabel) !== null && _d !== void 0 ? _d : "Upload image"),
-                !!props.value && !props.isDisabled && (react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--remove", color: "error", disabled: props.isDisabled, onClick: onRemoveFile, size: "sm", variant: "white" }, (_e = props.removeFileLabel) !== null && _e !== void 0 ? _e : "Remove avatar"))))))));
+                react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--select", disabled: props.isDisabled, onClick: onSelectFile, size: "sm", variant: "white" }, (_e = props.selectFileLabel) !== null && _e !== void 0 ? _e : "Upload image"),
+                !!props.value && !props.isDisabled && (react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--remove", color: "error", disabled: props.isDisabled, onClick: onRemoveFile, size: "sm", variant: "white" }, (_f = props.removeFileLabel) !== null && _f !== void 0 ? _f : "Remove avatar"))))))));
 });
 exports.AvatarFileInput.displayName = "UxfUiAvatarFileInput";

package/combobox/combobox.js

@@ -38,11 +38,12 @@ const Combobox = (props) => {
     const emptyMessage = query.length === 0
         ? (_b = props.noQueryMessage) !== null && _b !== void 0 ? _b : "Pro zobrazení možností začněte psát"
         : (_c = props.notFoundMessage) !== null && _c !== void 0 ? _c : "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 = (_d = props.value) !== null && _d !== void 0 ? _d : null;
-    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Combobox, className: props.className, customInputElementDisplayName: react_1.Combobox.Input.displayName, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: 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: filteredData, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: selectedOption, variant: props.variant },
+    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Combobox, className: props.className, customInputElementDisplayName: react_1.Combobox.Input.displayName, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: 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, onOptionsUnmount: clearQuery, options: filteredData, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: selectedOption, variant: props.variant },
         react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-input__element", displayValue: displayValue, onBlur: props.onBlur, onChange: onInputChange, placeholder: props.placeholder, type: "text" })));
 };
 exports.Combobox = Combobox;

package/date-picker-input/date-picker-input.d.ts

@@ -4,11 +4,13 @@ export declare const ALLOWED_DATE_FORMAT: string[];
 export declare const DISPLAY_DATE_FORMAT = "D. M. YYYY";
 export declare const OUTPUT_DATE_FORMAT = "YYYY-MM-DD";
 export interface DatePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
+    allowedDateFormats?: string[];
+    bottomContent?: ReactNode;
+    displayDateFormat?: string;
+    maxDate?: string;
+    minDate?: string;
     placeholder?: string;
     triggerElement?: ReactNode;
-    minDate?: string;
-    maxDate?: string;
     unavailableDates?: Date[];
-    bottomContent?: ReactNode;
 }
 export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;

package/date-picker-input/date-picker-input.js

@@ -38,10 +38,10 @@ const icon_1 = require("../icon");
 exports.ALLOWED_DATE_FORMAT = ["D. M. YYYY", "DD. MM. YYYY", "D.M.YYYY", "DD.MM.YYYY"];
 exports.DISPLAY_DATE_FORMAT = "D. M. YYYY";
 exports.OUTPUT_DATE_FORMAT = "YYYY-MM-DD";
-function getValue(value) {
+function getValue(value, format) {
     const parsedValue = (0, dayjs_1.default)(value, exports.OUTPUT_DATE_FORMAT, true);
     if (value && parsedValue.isValid()) {
-        return parsedValue.format(exports.DISPLAY_DATE_FORMAT);
+        return parsedValue.format(format);
     }
     return value !== null && value !== void 0 ? value : "";
 }
@@ -60,26 +60,28 @@ function getBoundaryDate(value) {
     return undefined;
 }
 exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const onChange = props.onChange;
     const className = (0, cx_1.cx)("uxf-date-picker-input", props.className);
+    const displayDateFormat = (_a = props.displayDateFormat) !== null && _a !== void 0 ? _a : exports.DISPLAY_DATE_FORMAT;
+    const allowedDateFormats = (_b = props.allowedDateFormats) !== null && _b !== void 0 ? _b : exports.ALLOWED_DATE_FORMAT;
     const onInputChange = (0, react_1.useCallback)((value) => {
-        const parsedValue = (0, dayjs_1.default)(value, exports.ALLOWED_DATE_FORMAT, true);
+        const parsedValue = (0, dayjs_1.default)(value, allowedDateFormats, true);
         if (value !== "" && parsedValue.isValid()) {
             onChange(parsedValue.format(exports.OUTPUT_DATE_FORMAT));
         }
         else {
             onChange(value === "" ? null : value);
         }
-    }, [onChange]);
+    }, [allowedDateFormats, onChange]);
     const onDatePickerChange = (0, react_1.useCallback)((value) => {
         const parsedValue = (0, dayjs_1.default)(value);
         onChange(value ? parsedValue.format(exports.OUTPUT_DATE_FORMAT) : null);
     }, [onChange]);
-    const value = getValue(props.value);
+    const value = getValue(props.value, displayDateFormat);
     const selectedDate = getSelectedDate(props.value);
     const parsedMinDate = getBoundaryDate(props.minDate);
     const parsedMaxDate = getBoundaryDate(props.maxDate);
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATE_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates, bottomContent: props.bottomContent }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : (0, dayjs_1.default)().format(displayDateFormat), ref: ref, value: value, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates, bottomContent: props.bottomContent }))));
 });
 exports.DatePickerInput.displayName = "UxfUiDatePickerInput";

package/date-picker-input/date-picker-input.stories.js

@@ -41,7 +41,8 @@ function Default() {
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum disabled", name: "date-disabled", onChange: onChange, value: date }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum readonly", name: "date-readonly", onChange: onChange, value: date }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum invalid", name: "date-invalid", onChange: onChange, value: date }),
-        react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, minDate: "2023-06-06", maxDate: "2023-06-12", label: "Min/max", name: "date-invalid", onChange: onChange, placeholder: "", value: date })));
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test-invalid", isClearable: true, minDate: "2023-06-06", maxDate: "2023-06-12", label: "Min/max", name: "date-invalid", onChange: onChange, placeholder: "", value: date }),
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { allowedDateFormats: ["MM/DD/YYYY", "M/D/YYYY"], displayDateFormat: "MM/DD/YYYY", id: "date-custom-format", isClearable: true, label: "Datum s vlastn\u00EDm form\u00E1tem (US)", name: "date", onChange: onChange, value: date })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
         react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));

package/dropzone/dropzone-input.d.ts

@@ -4,6 +4,7 @@ import { IconName } from "../icon/types";
 import { Accept, DropzoneFile } from "./types";
 export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | undefined> {
     accept?: Accept;
+    className?: string;
     helperText?: ReactNode;
     icon?: IconName;
     id?: string;

package/dropzone/dropzone-input.js

@@ -63,9 +63,10 @@ function fileRejectedHandler(err, dropzoneFile, onValuesChange, values, onUpload
     }
 }
 exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
-    var _a;
+    var _a, _b;
     const refValue = (0, react_1.useRef)();
     refValue.current = props.value;
+    const inputRef = (0, react_1.useRef)(null);
     const handleFileDrop = async (acceptedFiles) => {
         const files = acceptedFiles.map((file) => ({
             ...fileToFileResponse(file),
@@ -77,6 +78,11 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
         const onChange = (values) => {
             props.onChange(values);
             refValue.current = values;
+            // this ensures that the input is cleared after the upload, so there is no problem with uploading the same file again
+            const inputNode = inputRef.current;
+            if (inputNode) {
+                inputNode.value = "";
+            }
         };
         for (const file of files) {
             if (!file.originalFile) {
@@ -107,19 +113,19 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
     const labelOnCLick = (e) => {
         e.stopPropagation();
     };
-    return (react_1.default.createElement("div", { className: "uxf-dropzone" },
+    return (react_1.default.createElement("div", { className: `uxf-dropzone ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
         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"),
                 onClick: labelOnCLick,
             }), ref: (0, composeRefs_1.composeRefs)(ref, rootRef) },
-            react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone__label__icon", name: (_a = props.icon) !== null && _a !== void 0 ? _a : "cloud" }),
+            react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone__label__icon", name: (_b = props.icon) !== null && _b !== void 0 ? _b : "cloud" }),
             typeof props.label === "string" ? react_1.default.createElement("span", null, props.label) : props.label,
             react_1.default.createElement("input", { ...getInputProps({
                     className: "uxf-dropzone__input",
                     id: props.id,
                     name: props.name,
                     type: "file",
-                }) })),
+                }), ref: inputRef })),
         props.helperText && (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID) }, props.helperText))));
 });
 exports.DropzoneInput.displayName = "UxfUiDropzoneInput";

package/dropzone/dropzone-list.d.ts

@@ -2,6 +2,7 @@ import { FormControlProps } from "@uxf/ui/types";
 import { FC, ReactNode } from "react";
 import { DropzoneFile } from "./types";
 export interface DropzoneListProps extends FormControlProps<DropzoneFile[] | undefined> {
+    className?: string;
     errorText?: string;
     onAbortWarning?: string;
     onRemoveWarning?: string;

package/dropzone/dropzone-list.js

@@ -40,7 +40,7 @@ function formatBytes(bytes, decimals = 2) {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 const DropzoneList = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const context = (0, react_1.useContext)(context_1.UiContext);
     const onRemove = (file, isUploading) => () => {
         var _a;
@@ -58,7 +58,7 @@ const DropzoneList = (props) => {
     if (((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) === 0) {
         return null;
     }
-    return (react_1.default.createElement("ul", { className: "uxf-dropzone-list" }, (_b = props.value) === null || _b === void 0 ? void 0 : _b.map((file) => {
+    return (react_1.default.createElement("ul", { className: `uxf-dropzone-list ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` }, (_c = props.value) === null || _c === void 0 ? void 0 : _c.map((file) => {
         var _a, _b, _c;
         const isUploading = file.id < 0 && !file.error;
         return ((_b = (_a = props.renderItem) === null || _a === void 0 ? void 0 : _a.call(props, file)) !== null && _b !== void 0 ? _b : (react_1.default.createElement("li", { className: "uxf-dropzone-list__item-wrapper", key: file.id },

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

@@ -52,6 +52,10 @@ function handleInputKeyDownRecursion(selectedOptions, onRemove) {
         onRemove(lastSelectedOption.id);
     }
 }
+const OptionElement = (props) => {
+    return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && props.withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), value: props.option }, (optionState) => (react_3.default.createElement(react_3.default.Fragment, null, props.withCheckboxes ? (react_3.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: props.label, onChange: props.handleCheckboxChange, value: optionState.selected })) : (props.label)))));
+};
+OptionElement.displayName = "UxfUiMultiComboboxOption";
 exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isAsync = !!props.loadOptions;
@@ -120,7 +124,7 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
                 react_3.default.createElement(react_2.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredData.length > 0 ? (filteredData.map((option) => {
                     var _a, _b, _c, _d;
                     const label = (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.label;
-                    return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, value: option }, (optionState) => (react_3.default.createElement(react_3.default.Fragment, null, props.withCheckboxes ? (react_3.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: label, onChange: handleCheckboxChange(option.id), value: optionState.selected })) : (label)))));
+                    return (react_3.default.createElement(OptionElement, { option: option, key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, label: label, handleCheckboxChange: handleCheckboxChange(option.id), withCheckboxes: props.withCheckboxes, withoutPopover: withoutPopover }));
                 })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))))),
             props.helperText && withoutPopover && (react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
         return (react_3.default.createElement(react_3.default.Fragment, null, withoutPopover ? (react_3.default.createElement(react_3.default.Fragment, null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.5.2",
+  "version": "10.7.0",
   "description": "",
   "publishConfig": {
     "access": "public"