@uxf/ui 11.75.1 → 11.77.0

package/_input-with-popover/input-with-popover.d.ts

@@ -21,5 +21,7 @@ export interface InputWithPopoverProps<ValueType = string> extends FormControlPr
     rightAddon?: ReactNode;
     rightElement?: ReactNode;
     triggerElement: ReactNode;
+    "data-component"?: string;
+    "data-name"?: string;
 }
 export declare const _InputWithPopover: React.ForwardRefExoticComponent<InputWithPopoverProps<string> & React.RefAttributes<HTMLInputElement>>;

package/_input-with-popover/input-with-popover.js

@@ -73,7 +73,7 @@ exports._InputWithPopover = (0, react_3.forwardRef)((props, ref) => {
     });
     const isInteractive = !props.isDisabled && !props.isReadOnly;
     const showRemoveButton = Boolean(props.value && isInteractive && props.isClearable);
-    return (react_3.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: error.errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
+    return (react_3.default.createElement(form_component_1.FormComponent, { className: rootClassName, "data-component": props["data-component"], "data-name": props["data-name"], errorId: error.errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         react_3.default.createElement(react_2.Popover, { as: react_3.Fragment }, (renderProps) => (react_3.default.createElement(react_3.default.Fragment, null,
             react_3.default.createElement(input_1.Input, { inputFocus: input, inputGroupRef: floatingPopover.refs.setReference, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), size: props.size, variant: props.variant },
                 props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),

package/checkbox-input/checkbox-input.d.ts

@@ -11,4 +11,5 @@ export interface CheckboxInputProps extends FormControlProps<boolean | undefined
     style?: CSSProperties;
     helperText?: ReactNode;
 }
+export declare const CHECKBOX_INPUT_COMPONENT_NAME = "checkboxInput";
 export declare const CheckboxInput: React.ForwardRefExoticComponent<CheckboxInputProps & React.RefAttributes<HTMLDivElement>>;

package/checkbox-input/checkbox-input.js

@@ -24,17 +24,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxInput = void 0;
+exports.CheckboxInput = exports.CHECKBOX_INPUT_COMPONENT_NAME = void 0;
 const react_1 = require("@headlessui/react");
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
 const checkbox_1 = require("@uxf/ui/checkbox");
 const react_2 = __importStar(require("react"));
+exports.CHECKBOX_INPUT_COMPONENT_NAME = "checkboxInput";
 exports.CheckboxInput = (0, react_2.forwardRef)((props, ref) => {
-    var _a, _b;
+    var _a;
     const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     return (react_2.default.createElement(react_1.Switch.Group, null,
-        react_2.default.createElement("div", { className: `uxf-checkbox-input__wrapper ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, "data-name": props.name, style: props.style },
+        react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-checkbox-input__wrapper", props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className), "data-component": exports.CHECKBOX_INPUT_COMPONENT_NAME, "data-name": props.name, style: props.style },
             react_2.default.createElement(react_1.Switch, { as: react_2.Fragment, checked: props.value, name: props.name, onChange: props.onChange }, ({ checked }) => (react_2.default.createElement(checkbox_1.Checkbox, { className: "uxf-checkbox-input", id: props.id, indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onChange: props.onChange, ref: ref, size: props.size, value: checked }))),
             react_2.default.createElement(react_1.Switch.Label, { className: `uxf-checkbox-input__label ${props.hiddenLabel ? "uxf-checkbox-input__label--hidden" : ""}` },
                 react_2.default.createElement("span", { className: "uxf-checkbox-input__label--text" }, props.label),

package/checkbox-input/checkbox-input.stories.js

@@ -30,11 +30,10 @@ const checkbox_input_1 = require("./checkbox-input");
 function Default() {
     const [isChecked, setIsChecked] = (0, react_1.useState)(true);
     const onChange = (0, action_1.action)("onChange", () => setIsChecked((prev) => !prev));
-    return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "flex flex-col gap-4 p-20" },
-            react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu?", name: "checkbox-input", onChange: onChange, value: isChecked }),
-            react_1.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: true, label: "Opravdu?", name: "checkbox-input-disabled", onChange: onChange, value: isChecked }),
-            react_1.default.createElement(checkbox_input_1.CheckboxInput, { isInvalid: true, label: "Opravdu?", name: "checkbox-input-invalid", onChange: onChange, value: isChecked }),
-            react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu? (size lg)", name: "checkbox-input-lg", onChange: onChange, size: "lg", value: isChecked }),
-            react_1.default.createElement(checkbox_input_1.CheckboxInput, { hiddenLabel: true, label: "hidden label", name: "checkbox-input-hidden-label-lg", onChange: onChange, size: "lg", value: isChecked }))));
+    return (react_1.default.createElement("div", { className: "space-y-4 p-8" },
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Default", name: "default", onChange: onChange, value: isChecked }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: true, label: "Disabled", name: "disabled", onChange: onChange, value: isChecked }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { isInvalid: true, label: "Invalid", name: "invalid", onChange: onChange, value: isChecked }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Large", name: "large", onChange: onChange, size: "lg", value: isChecked }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { hiddenLabel: true, label: "Hidden label", name: "hidden-label", onChange: onChange, value: isChecked })));
 }

package/combobox/combobox.d.ts

@@ -45,6 +45,7 @@ export interface ComboboxProps<Id = ComboboxValueId, Option = ComboboxOption<Id>
     inputRef?: Ref<HTMLInputElement> | undefined;
     inputWrapperRef?: Ref<ComboboxTypeRef> | undefined;
 }
+export declare const COMBOBOX_COMPONENT_NAME = "combobox";
 export declare function Combobox<Id = ComboboxValueId, Option = ComboboxOption<Id>, Value = Option>(props: ComboboxProps<Id, Option, Value>): React.JSX.Element;
 export declare namespace Combobox {
     var displayName: string;

package/combobox/combobox.js

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.COMBOBOX_COMPONENT_NAME = void 0;
 exports.Combobox = Combobox;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
@@ -59,6 +60,7 @@ function Options(props) {
     })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
 }
 Options.displayName = "UxfUiComboboxOptions";
+exports.COMBOBOX_COMPONENT_NAME = "combobox";
 // eslint-disable-next-line complexity
 function Combobox(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -86,7 +88,7 @@ function Combobox(props) {
     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,
+    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-component": exports.COMBOBOX_COMPONENT_NAME, "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,
         react_3.default.createElement("div", { className: "uxf-form-component__label" },
             react_3.default.createElement(react_2.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, isRequired: props.isRequired, onClick: isNotInteractive ? undefined : input.focus }, props.label)),
         react_3.default.createElement("div", { className: "uxf-form-component__input" },

package/combobox/combobox.stories.js

@@ -38,10 +38,10 @@ function SynchronousOptions() {
     const [value, setValue] = (0, react_1.useState)(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,
+        react_1.default.createElement(index_1.Combobox, { helperText: "Helper text", isClearable: true, label: "Default", name: "default", onChange: onChange, options: OPTIONS, placeholder: "Placeholder", value: value }),
+        react_1.default.createElement(index_1.Combobox, { helperText: "Helper text", isInvalid: true, isRequired: true, label: "Invalid", name: "Invalid", onChange: onChange, options: OPTIONS, placeholder: "Placeholder", value: value }),
+        react_1.default.createElement(index_1.Combobox, { dropdownPlacement: "top", isClearable: true, label: "Dropdown top", name: "dropdown-top", onChange: onChange, options: OPTIONS, value: value }),
+        react_1.default.createElement(index_1.Combobox, { isClearable: true, label: "RenderOption", name: "render-option", onChange: onChange, options: OPTIONS, renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
                 "Option: ",
                 option.label,
                 isSelected && " (selected)")), value: value })));

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

@@ -20,4 +20,5 @@ export interface DatePickerInputProps extends Omit<InputWithPopoverProps<string
     /** @deprecated */
     unavailableDates?: Date[];
 }
+export declare const DATE_PICKER_INPUT_COMPONENT_NAME = "datePickerInput";
 export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerInput = exports.OUTPUT_DATE_FORMAT = exports.DISPLAY_DATE_FORMAT = exports.ALLOWED_DATE_FORMAT = void 0;
+exports.DatePickerInput = exports.DATE_PICKER_INPUT_COMPONENT_NAME = exports.OUTPUT_DATE_FORMAT = exports.DISPLAY_DATE_FORMAT = exports.ALLOWED_DATE_FORMAT = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
 const dayjs_1 = __importStar(require("dayjs"));
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
@@ -60,6 +60,7 @@ function getBoundaryDate(value) {
     }
     return undefined;
 }
+exports.DATE_PICKER_INPUT_COMPONENT_NAME = "datePickerInput";
 exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const onChange = props.onChange;
@@ -83,6 +84,6 @@ exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
     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: props.placeholder, ref: ref, triggerElement: (_c = props.triggerElement) !== null && _c !== void 0 ? _c : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: value }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, customButtonTitles: props.customButtonTitles, datesConfig: props.datesConfig, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onDatePickerChange, onMonthChange: props.onMonthChange, preventScroll: true, selectedDate: selectedDate, style: props.style, unavailableDates: props.unavailableDates }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, "data-component": exports.DATE_PICKER_INPUT_COMPONENT_NAME, "data-name": props.name, onChange: onInputChange, placeholder: props.placeholder, ref: ref, triggerElement: (_c = props.triggerElement) !== null && _c !== void 0 ? _c : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: value }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, customButtonTitles: props.customButtonTitles, datesConfig: props.datesConfig, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onDatePickerChange, onMonthChange: props.onMonthChange, preventScroll: true, selectedDate: selectedDate, style: props.style, unavailableDates: props.unavailableDates }))));
 });
 exports.DatePickerInput.displayName = "UxfUiDatePickerInput";

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

@@ -31,7 +31,8 @@ const date_picker_input_1 = require("./date-picker-input");
 function Default() {
     const [date, setDate] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setDate);
-    const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "space-y-4 p-8" },
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { helperText: "Helper text", isClearable: true, label: "Default", name: "default", onChange: onChange, placeholder: "Placeholder", value: date }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { customButtonTitles: {
                 selectMonth: "Select month",
                 selectYear: "Select year",
@@ -41,15 +42,14 @@ function Default() {
                 prevDecade: "Previous decade",
                 nextYear: "Next year",
                 prevYear: "Previous year",
-            }, id: "date-test", isClearable: true, label: "Datum \u010Dehokoliv, vlastn\u00ED titly", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date }),
-        react_1.default.createElement(date_picker_input_1.DatePickerInput, { id: "date-test", isClearable: true, label: "Datum \u010Dehokoliv vlastn\u00ED ikona", name: "date", onChange: onChange, triggerElement: react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }), value: date }),
-        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, label: "Min/max", maxDate: "2023-06-12", minDate: "2023-06-06", 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 }),
+            }, label: "Custom titles", name: "custom-titles", onChange: onChange, value: date }),
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { isClearable: true, label: "Triger element", name: "trigger-element", onChange: onChange, triggerElement: react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }), value: date }),
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { isDisabled: true, label: "Disabled", name: "disabled", onChange: onChange, value: date }),
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { isReadOnly: true, label: "ReadOnly", name: "readonly", onChange: onChange, value: date }),
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { isInvalid: true, label: "Invalid", name: "invalid", onChange: onChange, value: date }),
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { isClearable: true, label: "Min/Max validation", maxDate: "2023-06-12", minDate: "2023-06-06", name: "min-max-validation", onChange: onChange, value: date }),
+        react_1.default.createElement(date_picker_input_1.DatePickerInput, { allowedDateFormats: ["MM/DD/YYYY", "M/D/YYYY"], displayDateFormat: "MM/DD/YYYY", label: "Date with custom format (US)", name: "custom-date-format", onChange: onChange, value: date }),
         react_1.default.createElement(date_picker_input_1.DatePickerInput, { bottomContent: react_1.default.createElement("div", null,
                 "Bottom content",
-                react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date })));
-    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
+                react_1.default.createElement("p", null, "Here can goes anything")), label: "Bottom content", name: "bottom-content", onChange: onChange, value: date })));
 }

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

@@ -17,5 +17,6 @@ export interface DatetimePickerInputProps extends Omit<InputWithPopoverProps<str
     bottomContent?: ReactNode;
     CustomDatetimePicker?: (props: DatetimePickerProps) => ReactNode;
 }
+export declare const DATETIME_PICKER_INPUT_COMPONENT_NAME = "datetimePickerInput";
 export declare const DatetimePickerInput: React.ForwardRefExoticComponent<DatetimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/datetime-picker-input/datetime-picker-input.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatetimePickerInput = exports.BOUNDARY_DATE_FORMAT = exports.DISPLAY_DATETIME_FORMAT = exports.ALLOWED_DATETIME_FORMAT = void 0;
+exports.DatetimePickerInput = exports.DATETIME_PICKER_INPUT_COMPONENT_NAME = exports.BOUNDARY_DATE_FORMAT = exports.DISPLAY_DATETIME_FORMAT = exports.ALLOWED_DATETIME_FORMAT = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const dayjs_1 = __importStar(require("dayjs"));
@@ -64,6 +64,7 @@ function getBoundaryDate(value) {
     }
     return undefined;
 }
+exports.DATETIME_PICKER_INPUT_COMPONENT_NAME = "datetimePickerInput";
 exports.DatetimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const onChange = props.onChange;
@@ -80,6 +81,6 @@ exports.DatetimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     const value = getValue(props.value); // hodnota zobrazená v textinputu (human readable)
     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: props.placeholder, ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: value }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomDatetimePicker) ? (react_1.default.createElement(props.CustomDatetimePicker, { onChange: onChange, onClose: close, value: (0, get_datetime_string_1.getDatetimeString)(props.value) })) : (react_1.default.createElement(datetime_picker_1.DatetimePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onChange, unavailableDates: props.unavailableDates, value: props.value }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, "data-component": exports.DATETIME_PICKER_INPUT_COMPONENT_NAME, "data-name": props.name, onChange: onInputChange, placeholder: props.placeholder, ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: value }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomDatetimePicker) ? (react_1.default.createElement(props.CustomDatetimePicker, { onChange: onChange, onClose: close, value: (0, get_datetime_string_1.getDatetimeString)(props.value) })) : (react_1.default.createElement(datetime_picker_1.DatetimePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onChange, unavailableDates: props.unavailableDates, value: props.value }))));
 });
 exports.DatetimePickerInput.displayName = "UxfUiDatePickerInput";

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

@@ -31,15 +31,14 @@ const datetime_picker_input_1 = require("./datetime-picker-input");
 function Default() {
     const [date, setDate] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setDate);
-    const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test", isClearable: true, label: "Datum a \u010Das \u010Dehokoliv", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date }),
-        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test", isClearable: true, label: "Datum a \u010Das \u010Dehokoliv vlastn\u00ED ikona", name: "date", onChange: onChange, triggerElement: react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }), value: date }),
-        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-disabled", isDisabled: true, label: "Datum a \u010Das disabled", name: "date-disabled", onChange: onChange, value: date }),
-        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-readonly", isReadOnly: true, label: "Datum a \u010Das readonly", name: "date-readonly", onChange: onChange, value: date }),
-        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-invalid", isClearable: true, isInvalid: true, label: "Datum a \u010Das invalid", name: "date-invalid", onChange: onChange, value: date }),
-        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { id: "date-test-invalid", isClearable: true, label: "min/max-validate", maxDate: "2023-06-26", minDate: "2023-06-13", name: "min/max", onChange: onChange, placeholder: "", value: date }),
+    return (react_1.default.createElement("div", { className: "space-y-4 p-8" },
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isClearable: true, label: "Default", name: "default", onChange: onChange, placeholder: "Zadejte datum...", value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isClearable: true, label: "Trigger element", name: "trigger-element", onChange: onChange, triggerElement: react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }), value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isDisabled: true, label: "Disabled", name: "disabled", onChange: onChange, value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isReadOnly: true, label: "ReadOnly", name: "readonly", onChange: onChange, value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isClearable: true, isInvalid: true, label: "Invalid", name: "invalid", onChange: onChange, value: date }),
+        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { isClearable: true, label: "Min/Max validation", maxDate: "2023-06-26", minDate: "2023-06-13", name: "min-max-validation", onChange: onChange, value: date }),
         react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { bottomContent: react_1.default.createElement("div", null,
                 "Bottom content",
-                react_1.default.createElement("p", null, "Here can goes anything")), id: "date-test", isClearable: true, label: "With bottom content", name: "date", onChange: onChange, placeholder: "Zadejte datum...", value: date })));
-    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
+                react_1.default.createElement("p", null, "Here can goes anything")), isClearable: true, label: "Bottom content", name: "bottom-content", onChange: onChange, value: date })));
 }

package/dropzone/dropzone-input.d.ts

@@ -21,4 +21,5 @@ export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | un
     onUploadError?: (err: unknown) => void;
     style?: CSSProperties;
 }
+export declare const DROPZONE_COMPONENT_NAME = "dropzone";
 export declare const DropzoneInput: React.ForwardRefExoticComponent<DropzoneInputProps & React.RefAttributes<HTMLDivElement>>;

package/dropzone/dropzone-input.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropzoneInput = void 0;
+exports.DropzoneInput = exports.DROPZONE_COMPONENT_NAME = void 0;
 const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
@@ -32,6 +32,7 @@ const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importStar(require("react"));
 const react_dropzone_1 = require("react-dropzone");
 const icon_1 = require("../icon");
+const get_dropzone_state_1 = require("../utils/get-dropzone-state");
 function fileToFileResponse(file) {
     return {
         id: -Math.round(Math.random() * 100000000),
@@ -67,6 +68,7 @@ function fileRejectedHandler(err, dropzoneFile, onValuesChange, values, onUpload
     }
     return null;
 }
+exports.DROPZONE_COMPONENT_NAME = "dropzone";
 exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const refValue = (0, react_1.useRef)();
@@ -127,7 +129,8 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
     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 },
+    const dropzoneState = (0, get_dropzone_state_1.getDropzoneState)((_a = props.value) !== null && _a !== void 0 ? _a : []);
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropzone", props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className), "data-component": exports.DROPZONE_COMPONENT_NAME, "data-name": props.name, "data-state": dropzoneState.status, 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.isNotClickable && "cursor-auto"),
                 onClick: labelOnCLick,

package/dropzone/dropzone.stories.js

@@ -53,11 +53,11 @@ function Default() {
         react_1.default.createElement("div", { className: "flex items-center" },
             react_1.default.createElement(toggle_1.Toggle, { label: "Limit file size", name: "file-size-limit", onChange: () => setIsFileSizeLimited((prev) => !prev), value: isFileSizeLimited }),
             react_1.default.createElement(text_input_1.TextInput, { className: "w-28", name: "limit-file-size", onChange: (value) => setFileSizeLimit(parseInt(value, 10)), rightElement: "MB", type: "number", value: fileSizeLimit.toString() })),
-        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(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: "default", 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: "default", 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: "max-w-full bg-gray-200 p-4", name: "dropzone-list", onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { className: "max-w-full", key: file.id },
+                react_1.default.createElement(index_1.Dropzone.List, { className: "max-w-full bg-gray-200 p-4", name: "default", onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { className: "max-w-full", key: file.id },
                         react_1.default.createElement("pre", { className: "whitespace-pre-wrap break-all" }, JSON.stringify(file, null, 4)))), value: files })))));
 }

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

@@ -2,6 +2,7 @@ import React, { ReactElement, ReactNode } from "react";
 export interface FormComponentProps {
     children?: ReactElement;
     className?: string;
+    "data-component"?: string;
     errorId?: string;
     form?: string;
     helperText?: ReactNode;

package/form-component/form-component.js

@@ -31,7 +31,7 @@ const label_1 = require("../label");
 exports.FormComponent = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const helperTextClassName = (0, cx_1.cx)("uxf-helper-text", props.errorId && classes_1.CLASSES.IS_INVALID);
-    return (react_1.default.createElement("div", { className: `uxf-form-component ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, "data-name": props.name, ref: ref },
+    return (react_1.default.createElement("div", { className: `uxf-form-component ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, "data-component": props["data-component"], "data-name": props.name, ref: ref },
         react_1.default.createElement("div", { className: "uxf-form-component__label" },
             react_1.default.createElement(label_1.Label, { form: props.form, htmlFor: props.inputId, isHidden: props.hiddenLabel, isRequired: props.isRequired }, props.label)),
         react_1.default.createElement("div", { className: "uxf-form-component__input" },

package/multi-combobox/multi-combobox.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
 import { MultiComboboxOption, MultiComboboxProps, MultiComboboxValueId } from "./types";
+export declare const MULTI_COMBOBOX_COMPONENT_NAME = "multiCombobox";
 export declare const MultiCombobox: React.ForwardRefExoticComponent<MultiComboboxProps<MultiComboboxValueId, MultiComboboxOption<MultiComboboxValueId>> & React.RefAttributes<HTMLInputElement>>;

package/multi-combobox/multi-combobox.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiCombobox = void 0;
+exports.MultiCombobox = exports.MULTI_COMBOBOX_COMPONENT_NAME = void 0;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
 const show_1 = require("@uxf/core-react/components/show");
@@ -90,6 +90,7 @@ function useMultiComboboxOptions(query, props) {
         filteredOptions,
     };
 }
+exports.MULTI_COMBOBOX_COMPONENT_NAME = "multiCombobox";
 exports.MultiCombobox = (0, react_3.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const t = (0, translations_1.useUxfTranslation)();
@@ -150,7 +151,7 @@ exports.MultiCombobox = (0, react_3.forwardRef)((props, ref) => {
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
     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-multi-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, multiple: true, name: props.name, onChange: changeHandler, style: props.style, value: selectedOptions }, (renderProps) => {
+    return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-multi-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-component": exports.MULTI_COMBOBOX_COMPONENT_NAME, "data-name": props.name, disabled: isNotInteractive, form: props.form, multiple: true, name: props.name, onChange: changeHandler, style: props.style, value: selectedOptions }, (renderProps) => {
         var _a, _b;
         return (react_3.default.createElement(react_3.default.Fragment, null,
             react_3.default.createElement("div", { className: "uxf-form-component__label" },

package/multi-combobox/multi-combobox.stories.d.ts

@@ -1,4 +1,3 @@
 import React from "react";
 export declare function Default(): React.JSX.Element;
 export declare function Async(): React.JSX.Element;
-export declare function ComponentStructure(): React.JSX.Element;

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

@@ -22,16 +22,11 @@ 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;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
-const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
 const multi_combobox_1 = require("./multi-combobox");
 const options = [
     { id: "one", label: "Option red", color: "red" },
@@ -54,20 +49,15 @@ function Default() {
         console.log("Select values: ", v);
         setValue(v);
     });
-    const storyComboboxes = (react_1.default.createElement("div", { className: "space-y-8" },
-        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, { helperText: "Start typing to see options...", id: "multi-combobox-3", label: "MultiCombobox with helper text", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Error message", id: "multi-combobox-4", isInvalid: true, isRequired: true, label: "MultiCombobox invalid", name: "multi-combobox-invalid", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", id: "multi-combobox-5", label: "MultiCombobox with dropdown top", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-6", label: "MultiCombobox with renderOption", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "space-y-4 p-4" },
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Helper text", label: "Default", name: "default", onChange: onChange, options: options, placeholder: "Placeholder", value: value }),
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { label: "With checkboxes", name: "with-checkboxes", onChange: onChange, options: options, value: value, withCheckboxes: true }),
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Invalid", isInvalid: true, isRequired: true, label: "Invalid", name: "invalid", onChange: onChange, options: options, value: value }),
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", label: "Dropdown top", name: "dropdown-top", onChange: onChange, options: options, value: value }),
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { label: "RenderOptions", name: "render-options", onChange: onChange, options: options, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
                 "Option: ",
                 option.label), value: value }),
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-disabled", isDisabled: true, label: "MultiCombobox disabled", name: "multi-combobox-disabled", onChange: onChange, options: options, placeholder: "Vyberte...", renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
-                "Option: ",
-                option.label), 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)));
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { isDisabled: true, label: "Disabled", name: "Disabled", onChange: onChange, options: options, value: value })));
 }
 function Async() {
     const [value, setValue] = (0, react_1.useState)(null);
@@ -76,14 +66,7 @@ function Async() {
         console.log("Select values: ", 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" },
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-async-1", label: "MultiCombobox", loadOptions: loadOptions, name: "multi-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(multi_combobox_1.MultiCombobox, { helperText: "Start typing to see options...", id: "multi-combobox-structure", label: "MultiCombobox with helper text", name: "multi-combobox", onChange: onChange, options: options, value: value })));
+    const loadOptions = (query) => new Promise((resolve) => setTimeout(() => resolve(options.filter((option) => !query || option.label.toLowerCase().includes(query.toLowerCase()))), 500));
+    return (react_1.default.createElement("div", { className: "p-4" },
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { label: "Async", loadOptions: loadOptions, name: "async", onChange: onChange, value: value })));
 }

package/multi-select/multi-select.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
 import { MultiSelectOption, MultiSelectProps, MultiSelectValueId } from "./types";
+export declare const MULTI_SELECT_COMPONENT_NAME = "multiSelect";
 export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<MultiSelectValueId, MultiSelectOption<MultiSelectValueId>> & React.RefAttributes<HTMLDivElement>>;

package/multi-select/multi-select.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiSelect = void 0;
+exports.MultiSelect = exports.MULTI_SELECT_COMPONENT_NAME = void 0;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
 const show_1 = require("@uxf/core-react/components/show");
@@ -72,6 +72,7 @@ function Options(props) {
     })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
 }
 Options.displayName = "UxfUiMultiSelectOptions";
+exports.MULTI_SELECT_COMPONENT_NAME = "multiSelect";
 exports.MultiSelect = (0, react_3.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f;
     const t = (0, translations_1.useUxfTranslation)();
@@ -112,7 +113,7 @@ exports.MultiSelect = (0, react_3.forwardRef)((props, ref) => {
         ? ((_e = props.allOptionsSelectedMessage) !== null && _e !== void 0 ? _e : t("uxf-ui-multi-select:all-options-selected"))
         : ((_f = props.noOptionsMessage) !== null && _f !== void 0 ? _f : t("uxf-ui-multi-select:no-options-message"));
     const isNotInteractive = props.isDisabled || props.isReadOnly;
-    return (react_3.default.createElement(react_2.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-multi-select", 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, multiple: true, name: props.name, onChange: props.onChange, value: selectedOptions }, (renderProps) => {
+    return (react_3.default.createElement(react_2.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-multi-select", 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-component": exports.MULTI_SELECT_COMPONENT_NAME, "data-name": props.name, disabled: isNotInteractive, form: props.form, multiple: true, name: props.name, onChange: props.onChange, value: selectedOptions }, (renderProps) => {
         var _a, _b;
         return (react_3.default.createElement(react_3.default.Fragment, null,
             react_3.default.createElement("div", { className: "uxf-form-component__label" },

package/multi-select/multi-select.stories.d.ts

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

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

@@ -22,13 +22,8 @@ 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 react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const multi_select_1 = require("./multi-select");
@@ -53,23 +48,13 @@ function Default() {
         console.log("Select values: ", v);
         setValue(v);
     });
-    const component = (react_1.default.createElement("div", { className: "space-y-8" },
-        react_1.default.createElement(multi_select_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(multi_select_1.MultiSelect, { id: "multi-select-2", label: "MultiSelect with checkboxes", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withCheckboxes: true }),
-        react_1.default.createElement(multi_select_1.MultiSelect, { helperText: "Start typing to see options...", id: "multi-select-3", label: "MultiSelect with helper text", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(multi_select_1.MultiSelect, { helperText: "Error message", id: "multi-select-4", isInvalid: true, isRequired: true, label: "MultiSelect invalid", name: "multi-select-invalid", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(multi_select_1.MultiSelect, { dropdownPlacement: "top", id: "multi-select-5", label: "MultiSelect with dropdown top", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(multi_select_1.MultiSelect, { id: "multi-select-6", label: "MultiSelect with renderOption", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "space-y-6 p-8" },
+        react_1.default.createElement(multi_select_1.MultiSelect, { dropdownMaxHeight: 350, helperText: "Helper text", label: "Default", name: "default", onChange: onChange, options: options, placeholder: "Placeholder", value: value }),
+        react_1.default.createElement(multi_select_1.MultiSelect, { label: "With checkboxes", name: "with-checkboxes", onChange: onChange, options: options, value: value, withCheckboxes: true }),
+        react_1.default.createElement(multi_select_1.MultiSelect, { helperText: "Error message", isInvalid: true, isRequired: true, label: "Invalid", name: "invalid", onChange: onChange, options: options, value: value }),
+        react_1.default.createElement(multi_select_1.MultiSelect, { dropdownPlacement: "top", label: "Dropdown top", name: "dropdown-top", onChange: onChange, options: options, value: value }),
+        react_1.default.createElement(multi_select_1.MultiSelect, { label: "RenderOptions", name: "render-options", onChange: onChange, options: options, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
                 "Option: ",
                 option.label), value: value }),
-        react_1.default.createElement(multi_select_1.MultiSelect, { id: "multi-select-disabled", isDisabled: true, label: "MultiSelect disabled", name: "multi-select-disabled", onChange: onChange, options: options, placeholder: "Vyberte...", renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
-                "Option: ",
-                option.label), 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" }, component)));
-}
-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(multi_select_1.MultiSelect, { helperText: "Start typing to see options...", id: "multi-select-structure", label: "MultiSelect with helper text", name: "multi-select-structure", onChange: onChange, options: options, value: value })));
+        react_1.default.createElement(multi_select_1.MultiSelect, { isDisabled: true, label: "Disabled", name: "disabled", onChange: onChange, options: options, value: value })));
 }

package/package.json

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

package/radio-group/radio-group.d.ts

@@ -20,4 +20,5 @@ export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValueI
     style?: CSSProperties;
     variant?: RadioGroupVariant;
 }
+export declare const RADIO_GROUP_COMPONENT_NAME = "radioGroup";
 export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLLabelElement>>;

package/radio-group/radio-group.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioGroup = void 0;
+exports.RadioGroup = exports.RADIO_GROUP_COMPONENT_NAME = void 0;
 const react_1 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
@@ -31,6 +31,7 @@ const radio_1 = require("@uxf/ui/radio");
 const react_2 = __importStar(require("react"));
 const use_input_submit_1 = require("../hooks/use-input-submit");
 const label_1 = require("../label");
+exports.RADIO_GROUP_COMPONENT_NAME = "radioGroup";
 exports.RadioGroup = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b;
     const innerRef = (0, react_2.useRef)(null);
@@ -38,8 +39,8 @@ exports.RadioGroup = (0, react_2.forwardRef)((props, ref) => {
     const errorId = props.isInvalid ? `${props.id}--errormessage` : undefined;
     const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : "list";
     const radioSize = (_b = props.radioSize) !== null && _b !== void 0 ? _b : "default";
-    const rootClassName = (0, cx_1.cx)("uxf-form-component uxf-radio-group", `uxf-radio-group--${variant}`, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.className);
-    return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, "data-name": props.name, disabled: props.isDisabled, id: props.id, onChange: props.onChange, style: props.style, value: props.value },
+    const rootClassName = (0, cx_1.cx)("uxf-form-component uxf-radio-group", `uxf-radio-group--${variant}`, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
+    return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, "data-component": exports.RADIO_GROUP_COMPONENT_NAME, "data-name": props.name, disabled: props.isDisabled, id: props.id, onChange: props.onChange, style: props.style, value: props.value },
         react_2.default.createElement("div", { className: "uxf-form-component__label" },
             react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label", isHidden: props.hiddenLabel, isRequired: props.isRequired, ref: ref }, props.label)),
         react_2.default.createElement("div", { className: "uxf-form-component__input" },

package/select/select.d.ts

@@ -41,6 +41,7 @@ export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>>
     inputRef?: Ref<HTMLButtonElement> | undefined;
     inputWrapperRef?: Ref<SelectTypeRef> | undefined;
 }
+export declare const SELECT_COMPONENT_NAME = "select";
 export declare function Select<Value = SelectValue, Option = SelectOption<Value>>(props: SelectProps<Value, Option>): React.JSX.Element;
 export declare namespace Select {
     var displayName: string;

package/select/select.js

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SELECT_COMPONENT_NAME = void 0;
 exports.Select = Select;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
@@ -61,6 +62,7 @@ const SelectedValue = (0, react_3.forwardRef)((props, ref) => {
         react_3.default.createElement("span", { className: "uxf-input__element-text" }, props.children)));
 });
 SelectedValue.displayName = "UxUiSelectSelectedValue";
+exports.SELECT_COMPONENT_NAME = "select";
 function Select(props) {
     var _a, _b, _c, _d, _e;
     const t = (0, translations_1.useUxfTranslation)();
@@ -76,7 +78,7 @@ function Select(props) {
     const value = selectedOption;
     const emptyMessage = (_e = props.noOptionsMessage) !== null && _e !== void 0 ? _e : t("uxf-ui-select:no-options-message");
     const isNotInteractive = props.isDisabled || props.isReadOnly;
-    return (react_3.default.createElement(react_2.Listbox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-select", 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: value }, (renderProps) => {
+    return (react_3.default.createElement(react_2.Listbox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-select", 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-component": exports.SELECT_COMPONENT_NAME, "data-name": props.name, disabled: isNotInteractive, form: props.form, name: props.name, onChange: onChange, style: props.style, value: value }, (renderProps) => {
         var _a, _b, _c;
         return (react_3.default.createElement(react_3.default.Fragment, null,
             react_3.default.createElement("div", { className: "uxf-form-component__label" },

package/text-input/text-input.d.ts

@@ -29,5 +29,6 @@ export interface TextInputProps extends FormControlProps<string>, Pick<InputProp
     step?: number | string;
     style?: CSSProperties;
 }
+export declare const TEXT_INPUT_COMPONENT_NAME = "textInput";
 export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/text-input/text-input.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInput = void 0;
+exports.TextInput = exports.TEXT_INPUT_COMPONENT_NAME = void 0;
 const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
 const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 const classes_1 = require("@uxf/core/constants/classes");
@@ -32,6 +32,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const input_1 = require("@uxf/ui/input");
 const react_1 = __importStar(require("react"));
 const form_component_1 = require("../form-component");
+exports.TEXT_INPUT_COMPONENT_NAME = "textInput";
 exports.TextInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const innerRef = (0, react_1.useRef)(null);
@@ -40,7 +41,7 @@ exports.TextInput = (0, react_1.forwardRef)((props, ref) => {
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     const rootClassName = (0, cx_1.cx)("uxf-text-input", ((_b = props.isFocused) !== null && _b !== void 0 ? _b : input.focused) && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
-    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, "data-component": exports.TEXT_INPUT_COMPONENT_NAME, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         react_1.default.createElement(input_1.Input, { inputFocus: input, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), size: props.size, style: props.style, variant: props.variant },
             props.leftAddon && react_1.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
             props.leftElement && react_1.default.createElement(input_1.Input.LeftElement, null, props.leftElement),

package/textarea/textarea.d.ts

@@ -15,4 +15,5 @@ export interface TextareaProps extends FormControlProps<string, HTMLTextAreaElem
     rows?: number;
     style?: CSSProperties;
 }
+export declare const TEXTAREA_COMPONENT_NAME = "textarea";
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/textarea/textarea.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = void 0;
+exports.Textarea = exports.TEXTAREA_COMPONENT_NAME = void 0;
 const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
 const use_isomorphic_layout_effect_1 = require("@uxf/core-react/hooks/use-isomorphic-layout-effect");
 const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
@@ -33,6 +33,7 @@ const adjust_textarea_height_1 = require("@uxf/core/utils/adjust-textarea-height
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const form_component_1 = require("../form-component");
+exports.TEXTAREA_COMPONENT_NAME = "textarea";
 exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const innerRef = (0, react_1.useRef)(null);
@@ -52,7 +53,7 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
         const cleanup = (0, adjust_textarea_height_1.adjustTextareaHeight)(node, rows);
         return () => cleanup();
     }, [props.disableAutoHeight, rows]);
-    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, "data-component": exports.TEXTAREA_COMPONENT_NAME, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: focusTextareaOnWrapperClick, style: props.style },
             react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: (0, cx_1.cx)("uxf-textarea__element", !props.disableAutoHeight && rows >= 1 && "uxf-textarea__element--is-auto-height-enabled"), disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: handleChange, onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), required: props.isRequired, rows: rows, value: props.value }))));
 });

package/toggle/toggle.d.ts

@@ -10,4 +10,5 @@ export interface ToggleProps extends FormControlProps<boolean | undefined> {
     style?: CSSProperties;
     variant?: ToggleVariant;
 }
+export declare const TOGGLE_COMPONENT_NAME = "toggle";
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/toggle/toggle.js

@@ -23,15 +23,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toggle = void 0;
+exports.Toggle = exports.TOGGLE_COMPONENT_NAME = void 0;
 const react_1 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_2 = __importStar(require("react"));
+exports.TOGGLE_COMPONENT_NAME = "toggle";
 exports.Toggle = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b, _c, _d;
     return (react_2.default.createElement(react_1.Switch.Group, null,
-        react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, `uxf-toggle__wrapper--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className), "data-name": props.name },
+        react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, `uxf-toggle__wrapper--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className), "data-component": exports.TOGGLE_COMPONENT_NAME, "data-name": props.name },
             react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-toggle", `uxf-toggle--${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, `uxf-toggle--size-${(_d = props.size) !== null && _d !== void 0 ? _d : "default"}`), disabled: props.isDisabled, id: props.id, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
                 react_2.default.createElement("span", { className: "uxf-toggle__inner" })),
             react_2.default.createElement(react_1.Switch.Label, { className: "uxf-toggle__label", hidden: props.hiddenLabel }, props.label))));