@uxf/ui 11.76.0 → 11.77.2

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/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/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/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/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");
@@ -68,8 +68,9 @@ 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, _c;
+    var _a, _b;
     const refValue = (0, react_1.useRef)();
     refValue.current = props.value;
     const handleFileDrop = async (acceptedFiles, inputRef) => {
@@ -129,12 +130,12 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
         e.stopPropagation();
     };
     const dropzoneState = (0, get_dropzone_state_1.getDropzoneState)((_a = props.value) !== null && _a !== void 0 ? _a : []);
-    return (react_1.default.createElement("div", { className: `uxf-dropzone ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, "data-name": props.name, "data-state": dropzoneState.status, style: props.style },
+    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,
             }), ref: (0, compose_refs_1.composeRefs)(ref, rootRef) },
-            react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone__label__icon", name: (_c = props.icon) !== null && _c !== void 0 ? _c : "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",

package/flash-messages/flash-messages.d.ts

@@ -5,4 +5,5 @@ export interface FlashMessagesRef {
     closeAll: () => void;
     open: (notification: Notification) => void;
 }
+export declare const FLASH_MESSAGES_COMPONENT_NAME = "flashMessages";
 export declare const FlashMessages: React.ForwardRefExoticComponent<React.RefAttributes<FlashMessagesRef>>;

package/flash-messages/flash-messages.js

@@ -23,12 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlashMessages = void 0;
+exports.FlashMessages = exports.FLASH_MESSAGES_COMPONENT_NAME = void 0;
 const react_1 = require("@headlessui/react");
 const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_2 = __importStar(require("react"));
 const flash_message_1 = require("./flash-message");
+exports.FLASH_MESSAGES_COMPONENT_NAME = "flashMessages";
 exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
     const [notifications, setNotifications] = (0, react_2.useState)([]);
     const permanentNotificationsRef = (0, react_2.useRef)(null);
@@ -95,7 +96,7 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
             setIsCollapsed(true);
         },
     });
-    return notifications.length > 0 ? (react_2.default.createElement("div", { className: "uxf-flash-messages", style: { "--last-flash-message-height": `${lastToastHeight}px` } },
+    return notifications.length > 0 ? (react_2.default.createElement("div", { className: "uxf-flash-messages", "data-component": exports.FLASH_MESSAGES_COMPONENT_NAME, style: { "--last-flash-message-height": `${lastToastHeight}px` } },
         dismissableNotifications.length > 0 && (react_2.default.createElement("div", { ref: dismissableContainerRef, ...clickableProps },
             react_2.default.createElement("div", null, dismissableNotifications.map((notification, index) => {
                 const isLast = index === dismissableNotifications.length - 1;

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

@@ -8,63 +8,45 @@ const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 const flash_messages_service_1 = require("./flash-messages-service");
-// Random texts for flash message height testing
-const randomTexts = [
-    "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ex fuga neque. Delectus error, esse eum exercitationem iste iure maiores mollitia officia quasi reiciendis saepe voluptates voluptatum? Commodi, nulla, quo!",
-    "ulpa ex fuga neque. Delectus error",
-    "consectetur adipisicing elit. Culpa ex fuga neque. Delectus error, esse eum exercit",
-];
 function Default() {
     return (react_1.default.createElement("div", { className: "inline-flex flex-col space-y-4" },
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
-                    react_1.default.createElement("span", null, "Everything is alright."))),
-            }) }, "Click to fire Flash message, variant success"),
+                    react_1.default.createElement("span", null, "Success message"))),
+            }) }, "Success"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
-                    react_1.default.createElement("span", null, "Everything is alright."))),
+                    react_1.default.createElement("span", null, "Error message"))),
                 variant: "error",
-            }) }, "Click to fire Flash message, variant error"),
+            }) }, "Error"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
-                    react_1.default.createElement("span", null, "Everything is alright."))),
+                    react_1.default.createElement("span", null, "Info message"))),
                 variant: "info",
-            }) }, "Click to fire Flash message, variant info"),
+            }) }, "Info"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 20 }),
-                    react_1.default.createElement("span", null, "Seems like an error occurred :)"))),
+                    react_1.default.createElement("span", null, "AutoDismiss error message"))),
                 autoDismiss: false,
                 variant: "error",
-            }) }, "AutoDismiss: false Flash message, variant error"),
+            }) }, "AutoDismiss Error"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }),
-                    react_1.default.createElement("span", null, "You should better watch out :)"))),
+                    react_1.default.createElement("span", null, "Warning message"))),
                 autoDismiss: false,
                 variant: "warning",
-            }) }, "Flash message, variant warning"),
+            }) }, "Warning"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
-                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
-                    react_1.default.createElement("span", null, "Just letting you know"))),
+                message: "Small info message",
                 autoDismiss: false,
                 variant: "info",
-            }) }, "Flash message, variant info"),
+            }) }, "Small info"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
-                message: "Small",
-                autoDismiss: false,
-                variant: "info",
-            }) }, "Small flash message"),
-        react_1.default.createElement(button_1.Button, { onClick: () => {
-                const randomNumber = Math.floor(Math.random() * randomTexts.length);
-                return (0, flash_messages_service_1.flashMessage)({
-                    message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-                        react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
-                        react_1.default.createElement("span", null, randomTexts[randomNumber]))),
-                });
-            } }, "Flash message, variant success, random text")));
+                message: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ex fuga neque. Delectus error, esse eum exercitationem iste iure maiores mollitia officia quasi reiciendis saepe voluptates voluptatum? Commodi, nulla, quo!",
+            }) }, "Long text")));
 }

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-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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.76.0",
+    "version": "11.77.2",
     "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))));