@uxf/ui 10.0.0-beta.7 → 10.0.0-beta.74

package/message/message.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const message_1 = require("./message");
+const message_service_1 = require("./message-service");
+const storybook_config_1 = require("../utils/storybook-config");
+exports.default = {
+    title: "UI/Message",
+    component: message_1.Message,
+};
+const getConfirmForSize = (variant, colors) => {
+    const confirmTypes = colors.map((color) => (react_1.default.createElement("div", { className: "space-y-2", key: color },
+        react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => message_service_1.MessageService.openConfirm({
+                acceptLabel: "Potvrdit",
+                cancelLabel: "Zrušit",
+                title: "Title",
+                description: "Description",
+                /* eslint-disable no-console */
+                onAccept: () => console.log("accepted"),
+                onCancel: () => console.log("canceled"),
+                color,
+                variant,
+            }) },
+            "Click to open ",
+            variant,
+            " ",
+            color,
+            " confirm"),
+        react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => message_service_1.MessageService.openAlert({
+                cancelLabel: "Rozumím",
+                title: "Title",
+                description: "Description",
+                /* eslint-disable no-console */
+                onCancel: () => console.log("canceled"),
+                color,
+                variant,
+            }) },
+            "Click to open ",
+            variant,
+            " ",
+            color,
+            " alert"),
+        react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => message_service_1.MessageService.openConfirm({
+                CustomIconComponent: null,
+                acceptLabel: "Potvrdit",
+                cancelLabel: "Zrušit",
+                title: "Title",
+                description: "Description",
+                /* eslint-disable no-console */
+                onAccept: () => console.log("accepted"),
+                onCancel: () => console.log("canceled"),
+                color,
+                variant,
+            }) },
+            "Click to open ",
+            variant,
+            " ",
+            color,
+            " confirm no icon"))));
+    return (react_1.default.createElement("div", { className: "grid gap-4" },
+        react_1.default.createElement("div", { className: "flex w-full flex-col gap-2" }, confirmTypes)));
+};
+function Default() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    return (react_1.default.createElement("div", { className: "flex justify-center lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-4 rounded bg-white p-10" },
+            react_1.default.createElement("div", { className: "uxf-typo-h5" }, "default"),
+            react_1.default.createElement("div", { className: "flex flex-col space-y-4 px-5" }, getConfirmForSize("centered", config.colors)),
+            react_1.default.createElement("div", { className: "uxf-typo-h5" }, "simple"),
+            react_1.default.createElement("div", { className: "flex flex-col space-y-4 px-5" }, getConfirmForSize("simple", config.colors))),
+        react_1.default.createElement("div", { className: "dark space-y-4 rounded bg-gray-900 p-10 text-white" },
+            react_1.default.createElement("div", { className: "uxf-typo-h5" }, "default"),
+            react_1.default.createElement("div", { className: "dark flex flex-col space-y-4 px-5" }, getConfirmForSize("centered", config.colors)),
+            react_1.default.createElement("div", { className: "uxf-typo-h5" }, "simple"),
+            react_1.default.createElement("div", { className: "flex flex-col space-y-4 px-5" }, getConfirmForSize("simple", config.colors)))));
+}
+exports.Default = Default;

package/message/theme.d.ts

@@ -0,0 +1,12 @@
+export interface MessageColors {
+    default: true;
+    success: true;
+    error: true;
+    warning: true;
+}
+export type MessageColor = keyof MessageColors;
+export interface MessageVariants {
+    simple: true;
+    centered: true;
+}
+export type MessageVariant = keyof MessageVariants;

package/message/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/modal/index.d.ts

@@ -1,3 +1,4 @@
-export { closeModal, getModalRef, openModal } from "./modal-service";
 export type { ModalProps, ModalRef } from "./modal";
+export type { ModalWidth } from "./theme";
 export { Modal } from "./modal";
+export { closeModal, getModalRef, openModal } from "./modal-service";

package/modal/index.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = exports.openModal = exports.getModalRef = exports.closeModal = void 0;
+exports.openModal = exports.getModalRef = exports.closeModal = exports.Modal = void 0;
+var modal_1 = require("./modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return modal_1.Modal; } });
 var modal_service_1 = require("./modal-service");
 Object.defineProperty(exports, "closeModal", { enumerable: true, get: function () { return modal_service_1.closeModal; } });
 Object.defineProperty(exports, "getModalRef", { enumerable: true, get: function () { return modal_service_1.getModalRef; } });
 Object.defineProperty(exports, "openModal", { enumerable: true, get: function () { return modal_service_1.openModal; } });
-var modal_1 = require("./modal");
-Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return modal_1.Modal; } });

package/modal/modal.d.ts

@@ -1,11 +1,12 @@
 import React, { ReactNode } from "react";
-import type { ModalDialogProps } from "./modal-dialog";
+import type { DialogProps } from "../dialog";
+import { ModalWidth } from "./theme";
 export interface ModalProps {
     children: ReactNode;
-    className?: ModalDialogProps["className"];
-    disableBackdropClose?: ModalDialogProps["disableBackdropClose"];
+    className?: DialogProps["className"];
+    disableBackdropClose?: DialogProps["disableBackdropClose"];
     onClose?: () => void;
-    width?: ModalDialogProps["width"];
+    width?: ModalWidth;
 }
 export interface ModalRef {
     close: () => void;

package/modal/modal.js

@@ -25,11 +25,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 const react_1 = __importStar(require("react"));
-const modal_dialog_1 = require("./modal-dialog");
+const dialog_1 = require("../dialog");
 exports.Modal = (0, react_1.forwardRef)((props, ref) => {
-    const [modal, setModal] = (0, react_1.useState)();
-    const open = (0, react_1.useCallback)((newModal) => setModal(newModal), []);
-    const close = (0, react_1.useCallback)(() => setModal(null), []);
+    var _a, _b;
+    const [content, setContent] = (0, react_1.useState)();
+    const open = (0, react_1.useCallback)((newModal) => setContent(newModal), []);
+    const close = (0, react_1.useCallback)(() => setContent(null), []);
     const innerRef = (0, react_1.useRef)({
         close,
         open,
@@ -39,13 +40,12 @@ exports.Modal = (0, react_1.forwardRef)((props, ref) => {
         open: innerRef.current.open,
     }), []);
     const onClose = (0, react_1.useCallback)(() => {
-        setModal((prev) => {
-            if (prev === null || prev === void 0 ? void 0 : prev.onClose) {
-                prev.onClose();
-            }
+        setContent((prev) => {
+            var _a;
+            (_a = prev === null || prev === void 0 ? void 0 : prev.onClose) === null || _a === void 0 ? void 0 : _a.call(prev);
             return null;
         });
     }, []);
-    return modal ? (react_1.default.createElement(modal_dialog_1.ModalDialog, { className: modal.className, disableBackdropClose: modal.disableBackdropClose, onClose: onClose, open: !!modal, width: modal.width }, modal.children)) : null;
+    return content ? (react_1.default.createElement(dialog_1.Dialog, { className: `uxf-modal uxf-modal--width-${(_a = content.width) !== null && _a !== void 0 ? _a : "default"} ${(_b = content.className) !== null && _b !== void 0 ? _b : ""}`, disableBackdropClose: content.disableBackdropClose, onClose: onClose, open: !!content }, content.children)) : null;
 });
 exports.Modal.displayName = "UxfUiModal";

package/modal/modal.stories.js

@@ -19,6 +19,12 @@ function Default() {
                     react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - default size"),
                     react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
             }) }, "Click to open modal - default"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                children: (react_1.default.createElement("div", { className: "p-4" },
+                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xs size"),
+                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
+                width: "xs",
+            }) }, "Click to open modal - xs"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
                 children: (react_1.default.createElement("div", { className: "p-4" },
                     react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - sm size"),
@@ -31,6 +37,12 @@ function Default() {
                     react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
                 width: "lg",
             }) }, "Click to open modal - lg"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                children: (react_1.default.createElement("div", { className: "p-4" },
+                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xl size"),
+                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
+                width: "xl",
+            }) }, "Click to open modal - xl"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
                 children: (react_1.default.createElement("div", { className: "p-4" },
                     react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - dark"),

package/modal/theme.d.ts

@@ -1,5 +1,8 @@
 export interface ModalWidths {
+    xs: true;
     sm: true;
     default: true;
     lg: true;
+    xl: true;
 }
+export type ModalWidth = keyof ModalWidths;

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

@@ -38,6 +38,7 @@ const label_1 = require("@uxf/ui/label");
 const react_2 = __importStar(require("react"));
 const checkbox_input_1 = require("../checkbox-input");
 const react_3 = require("@floating-ui/react");
+const input_1 = require("@uxf/ui/input");
 exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isAsync = !!props.loadOptions;
@@ -94,14 +95,19 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
         var _a, _b;
         const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement(react_1.Combobox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, ref: stableRef },
-                selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
-                react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query }),
+                props.leftAddon && react_2.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
+                props.leftElement && react_2.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
+                react_2.default.createElement("div", { className: "uxf-multi-combobox__selected-options" },
+                    selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: item.disabled ? undefined : handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
+                    react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query })),
+                props.rightAddon && react_2.default.createElement(input_1.Input.RightAddon, null, props.rightAddon),
+                props.rightElement && react_2.default.createElement(input_1.Input.RightElement, null, props.rightElement),
                 react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", (props.withPopover ? props.isPopoverOpen : renderProps.open) && classes_1.CLASSES.IS_OPEN), name: iconName })),
             renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
                 react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredData.length > 0 ? (filteredData.map((option) => {
                     var _a, _b, _c, _d;
                     const label = (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.label;
-                    return (react_2.default.createElement(react_1.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, value: option }, (optionState) => (react_2.default.createElement(react_2.default.Fragment, null, props.withCheckboxes ? (react_2.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: label, onChange: handleCheckboxChange(option.id), value: optionState.selected })) : (label)))));
+                    return (react_2.default.createElement(react_1.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: option.disabled, key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, value: option }, (optionState) => (react_2.default.createElement(react_2.default.Fragment, null, props.withCheckboxes ? (react_2.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: label, onChange: handleCheckboxChange(option.id), value: optionState.selected })) : (label)))));
                 })) : (react_2.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))))),
             props.helperText && withoutPopover && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
         return (react_2.default.createElement(react_2.default.Fragment, null, withoutPopover ? (react_2.default.createElement(react_2.default.Fragment, null,

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

@@ -37,10 +37,10 @@ exports.default = {
 };
 const options = [
     { id: "one", label: "Option red", color: "red" },
-    { id: "two", label: "Option blue", color: "blue" },
+    { id: "two", label: "Option blue", color: "blue", disabled: true },
     { id: "three", label: "Option green", color: "green" },
     { id: "four", label: "Option four" },
-    { id: "five", label: "Option five" },
+    { id: "five", label: "Option five disabled" },
     { id: "six", label: "Option with diacritics (ěščřžýáíé)" },
 ];
 function Default() {
@@ -57,7 +57,10 @@ function Default() {
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { id: "multi-combobox-4", label: "MultiCombobox with popup and checkboxes", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withCheckboxes: true, withPopover: true }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { helperText: "Start typing to see options...", id: "multi-combobox-5", 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-6", isInvalid: true, isRequired: true, label: "MultiCombobox invalid", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", id: "multi-combobox-7", label: "MultiCombobox with dropdown top", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value })));
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { dropdownPlacement: "top", id: "multi-combobox-7", 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-8", label: "MultiCombobox with renderOption", name: "multi-combobox", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label) })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyComboboxes),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyComboboxes)));

package/multi-combobox/types.d.ts

@@ -25,12 +25,16 @@ export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = Mul
     id?: string;
     keyExtractor?: (option: Option) => string | number;
     label: string;
+    leftAddon?: ReactNode;
+    leftElement?: ReactNode;
     loadOptions?: (query: string) => Promise<Option[]>;
     noQueryMessage?: string;
     notFoundMessage?: string;
     options?: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
+    rightAddon?: ReactNode;
+    rightElement?: ReactNode;
     size?: keyof InputGroupSizes;
     variant?: keyof InputGroupVariants;
     withCheckboxes?: boolean;

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

@@ -64,9 +64,9 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
                 react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", renderProps.open && classes_1.CLASSES.IS_OPEN), name: iconName })),
             renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
                 react_2.default.createElement(react_1.Listbox.Options, { className: (0, cx_1.cx)("uxf-dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredOptions.map((option) => {
-                    var _a;
+                    var _a, _b, _c;
                     const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
-                    return (react_2.default.createElement(react_1.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option }, optionKey !== null && optionKey !== void 0 ? optionKey : option.label));
+                    return (react_2.default.createElement(react_1.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option, disabled: option.disabled }, (_c = (_b = props.renderOption) === null || _b === void 0 ? void 0 : _b.call(props, option)) !== null && _c !== void 0 ? _c : option.label));
                 })))),
             props.helperText && withoutPopover && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
         return (react_2.default.createElement(react_2.default.Fragment, null, withoutPopover ? (react_2.default.createElement(react_2.default.Fragment, null,

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

@@ -40,7 +40,7 @@ const options = [
     { id: "two", label: "Option blue", color: "blue" },
     { id: "three", label: "Option green", color: "green" },
     { id: "four", label: "Option four" },
-    { id: "five", label: "Option five" },
+    { id: "five", label: "Option five disabled", disabled: true },
     { id: "six", label: "Option with diacritics (ěščřžýáíé)" },
 ];
 const Default = () => {
@@ -52,7 +52,10 @@ const Default = () => {
     });
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-1", label: "MultiSelect", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", value: value }),
-        react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-2", label: "MultiSelect with popover", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withPopover: true })));
+        react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-2", label: "MultiSelect with popover", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withPopover: true }),
+        react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-3", label: "MultiSelect with renderOption", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label) })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, component),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, component)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.0.0-beta.7",
+  "version": "10.0.0-beta.74",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -15,17 +15,19 @@
   "dependencies": {
     "@floating-ui/react": "0.24.2",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "4.5.1",
-    "@uxf/datepicker": "1.2.1",
-    "@uxf/styles": "2.1.2",
-    "color2k": "^2.0.2",
+    "@uxf/core": "10.0.0-beta.37",
+    "@uxf/datepicker": "10.0.0-beta.41",
+    "@uxf/styles": "10.0.0-beta.37",
+    "color2k": "2.0.2",
     "dayjs": "^1.11.7",
-    "jump.js": "^1.0.2",
+    "jump.js": "1.0.2",
     "react-dropzone": "14.2.3",
     "react-swipeable": "7.0.1"
   },
   "devDependencies": {
-    "@types/jump.js": "^1.0.4",
-    "@uxf/icons-generator": "^1.3.0"
+    "@types/jump.js": "1.0.4",
+    "@types/react": "18.2.6",
+    "@types/react-dom": "18.2.6",
+    "@uxf/icons-generator": "10.0.0-beta.19"
   }
 }

package/radio-group/index.d.ts

@@ -1,3 +1,3 @@
-export type { RadioGroupOption, RadioGroupOptionValue, RadioGroupProps } from "./radio-group";
+export type { RadioGroupOption, RadioGroupOptionValueId, RadioGroupProps } from "./radio-group";
 export type { RadioGroupVariant } from "./theme";
 export { RadioGroup } from "./radio-group";

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

@@ -2,13 +2,13 @@ import React, { CSSProperties, ReactNode } from "react";
 import { RadioSize } from "../radio";
 import { FormControlProps } from "../types";
 import { RadioGroupVariant } from "./theme";
-export type RadioGroupOptionValue = string | number;
+export type RadioGroupOptionValueId = string | number;
 export interface RadioGroupOption {
     disabled?: boolean;
+    id: RadioGroupOptionValueId;
     label: string;
-    value: RadioGroupOptionValue;
 }
-export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValue | null> {
+export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValueId | null> {
     className?: string;
     helperText?: ReactNode;
     forceColumn?: boolean;

package/radio-group/radio-group.js

@@ -43,9 +43,9 @@ exports.RadioGroup = (0, react_2.forwardRef)((props, ref) => {
         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, ref: ref }, props.label)),
         react_2.default.createElement("div", { className: "uxf-form-component__input" },
-            react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, props.options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.value.toString(), value: option.value }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option-wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
+            react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, props.options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.id.toString(), value: option.id }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option-wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
                 react_2.default.createElement("span", { className: "uxf-radio-group__option-label" }, option.label),
-                react_2.default.createElement(radio_1.Radio, { checked: o.checked, isDisabled: props.isDisabled || o.disabled, isInvalid: props.isInvalid, ref: o.checked ? innerRef : undefined, size: radioSize, value: option.value }))))))),
+                react_2.default.createElement(radio_1.Radio, { checked: o.checked, isDisabled: props.isDisabled || o.disabled, isInvalid: props.isInvalid, ref: o.checked ? innerRef : undefined, size: radioSize, value: option.id }))))))),
             props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))));
 });
 exports.RadioGroup.displayName = "UxfUiRadioGroup";

package/radio-group/radio-group.stories.js

@@ -33,20 +33,20 @@ exports.default = {
 };
 const options = [
     {
-        value: "1",
+        id: "1",
         label: "Radio one",
     },
     {
-        value: "2",
+        id: "2",
         label: "Radio two",
     },
     {
-        value: "3",
+        id: "3",
         label: "Radio three-sixty",
     },
 ];
 function Default() {
-    const [value, setValue] = (0, react_1.useState)(options[0].value);
+    const [value, setValue] = (0, react_1.useState)(options[0].id);
     const onChange = (0, action_1.action)("onChange", setValue);
     const testRadioGroups = (react_1.default.createElement("div", { className: "space-y-10" },
         react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group", onChange: onChange, options: options, value: value }),

package/raster-image/raster-image.js

@@ -42,7 +42,7 @@ const RasterImage = (props) => {
             : props.width && props.height
                 ? Math.ceil((props.height / props.width) * w)
                 : "auto", key: `${w}-${i}`, options: props.options, quality: props.quality, src: props.src, width: w }))).reverse()) !== null && _f !== void 0 ? _f : (react_1.default.createElement(image_1.ImgSources, { height: (_g = props.height) !== null && _g !== void 0 ? _g : "auto", options: props.options, quality: props.quality, src: props.src, width: (_h = props.width) !== null && _h !== void 0 ? _h : "auto" })),
-        react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)(imgClassName), height: props.height, loading: props.loading, src: resizerSrc, width: props.width })));
+        react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)(imgClassName), height: (0, image_1.getImgElementHeight)(props.src, props.width, props.height), loading: props.loading, src: resizerSrc, width: (0, image_1.getImgElementWidth)(props.src, props.width, props.height) })));
 };
 exports.RasterImage = RasterImage;
 exports.RasterImage.displayName = "UxfUiRasterImage";

package/select/select.d.ts

@@ -13,7 +13,7 @@ export interface SelectProps<ValueId = SelectValue, Option = SelectOption<ValueI
     noQueryMessage?: string;
     notFoundMessage?: string;
     options: Option[];
-    renderOption?: (option: Option) => ReactNode;
+    renderOption?: (option: Option, isSelected: boolean) => ReactNode;
     renderSelectedOption?: (option: Option) => ReactNode;
 }
 export declare const Select: {

package/select/select.stories.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
+import { SelectOption } from "./index";
 declare const _default: {
     title: string;
     component: {
-        <ValueId = import("../_select-base").SelectBaseValueId, Option = import("./select").SelectOption<ValueId>, Value = Option>(props: import("./select").SelectProps<ValueId, Option, ValueId>): React.JSX.Element;
+        <ValueId = import("../_select-base").SelectBaseValueId, Option = SelectOption<ValueId>, Value = Option>(props: import("./select").SelectProps<ValueId, Option, ValueId>): React.JSX.Element;
         displayName: string;
     };
 };

package/select/select.stories.js

@@ -37,7 +37,7 @@ exports.default = {
 };
 const options = [
     { id: "one", label: "Option one" },
-    { id: "two", label: "Option two" },
+    { id: "two", label: "Option two disabled", disabled: true },
     { id: "three", label: "Option three" },
     { id: "four", label: "Option four" },
     { id: "five", label: "Option five" },
@@ -64,7 +64,13 @@ function Default() {
         react_1.default.createElement(index_1.Select, { helperText: "Helper text of Select with hidden label", hiddenLabel: true, label: "Hidden label", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(index_1.Select, { label: "Size sm", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "small" }),
         react_1.default.createElement(index_1.Select, { label: "Size default", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(index_1.Select, { label: "Size lg", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "large" })));
+        react_1.default.createElement(index_1.Select, { label: "Size lg", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "large" }),
+        react_1.default.createElement(index_1.Select, { label: "RenderOption & RenderSelectedOption", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label,
+                isSelected && " (selected)")), renderSelectedOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+                "Selected: ",
+                option.label) })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storySelects),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storySelects)));

package/textarea/textarea.js

@@ -33,11 +33,11 @@ const react_1 = __importStar(require("react"));
 const form_component_1 = require("../form-component");
 function autoHeightHandler(element, rows = 4) {
     element.style.height = "auto";
-    if (rows > 1) {
+    if (rows >= 1) {
         const contentHeight = element.scrollHeight;
-        const lineHeight = parseInt(window.getComputedStyle(element).getPropertyValue("line-height"), 10);
-        const fontSize = parseInt(window.getComputedStyle(element).getPropertyValue("font-size"), 10);
-        const targetHeight = rows * fontSize * (lineHeight / fontSize);
+        const lineHeight = parseFloat(window.getComputedStyle(element).getPropertyValue("line-height"));
+        const fontSize = parseFloat(window.getComputedStyle(element).getPropertyValue("font-size"));
+        const targetHeight = parseInt((rows * fontSize * (lineHeight / fontSize)).toFixed(3), 10);
         element.style.height = Math.max(targetHeight, contentHeight) + "px";
     }
 }
@@ -68,6 +68,6 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     const onWrapperClick = () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
     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 },
         react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: onWrapperClick },
-            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: (event) => props.onChange(event.target.value, event), onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
+            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: (event) => props.onChange(event.target.value, event), onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, rows: props.rows, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
 });
 exports.Textarea.displayName = "UxfUiTextarea";

package/time-picker/time-picker-hour.js

@@ -29,11 +29,10 @@ const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-cont
 const use_hour_1 = require("@uxf/datepicker/hooks/use-hour");
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
-const button_1 = require("../button");
 const TimePickerHour = (props) => {
     const hourRef = (0, react_1.useRef)(null);
     // eslint-disable-next-line react/destructuring-assignment
-    const { focusedHour, isHourFocused, isHourSelected, onHourSelect, onHourFocus } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
+    const { focusedHour, isHourFocused, isHourSelected, onHourSelect, onHourFocus, preventScroll } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
     const { onClick, onKeyDown, tabIndex, isSelected } = (0, use_hour_1.useHour)({
         hour: props.hour,
         hourRef,
@@ -42,8 +41,9 @@ const TimePickerHour = (props) => {
         isHourSelected,
         onHourSelect,
         onHourFocus,
+        preventScroll,
     });
-    return (react_1.default.createElement(button_1.Button, { variant: "text", tabIndex: tabIndex, onKeyDown: onKeyDown, onClick: onClick, className: (0, cx_1.cx)("uxf-time-picker__hour", isSelected && classes_1.CLASSES.IS_SELECTED), ref: hourRef }, props.label));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-hour", isSelected && classes_1.CLASSES.IS_SELECTED), onClick: onClick, onKeyDown: onKeyDown, ref: hourRef, tabIndex: tabIndex }, props.label));
 };
 exports.TimePickerHour = TimePickerHour;
 exports.TimePickerHour.displayName = "UxfUiTimePickerHour";

package/time-picker/time-picker-hours.js

@@ -9,7 +9,7 @@ const time_picker_hour_1 = require("./time-picker-hour");
 const use_hours_1 = require("@uxf/datepicker/hooks/use-hours");
 const TimePickerHours = () => {
     const { hours } = (0, use_hours_1.useHours)({});
-    return (react_1.default.createElement("div", { className: "uxf-time-picker__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, label: hour.label, key: hour.value })))));
+    return (react_1.default.createElement("div", { className: "uxf-time-picker__hours uxf-calendar__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, label: hour.label, key: hour.value })))));
 };
 exports.TimePickerHours = TimePickerHours;
 exports.TimePickerHours.displayName = "UxfUiTimePickerHours";

package/time-picker/time-picker-minute.js

@@ -29,11 +29,10 @@ const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-cont
 const use_minute_1 = require("@uxf/datepicker/hooks/use-minute");
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
-const button_1 = require("../button");
 const TimePickerMinute = (props) => {
     const minuteRef = (0, react_1.useRef)(null);
     // eslint-disable-next-line react/destructuring-assignment
-    const { focusedMinute, isMinuteFocused, isMinuteSelected, onMinuteSelect, onMinuteFocus } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
+    const { focusedMinute, isMinuteFocused, isMinuteSelected, onMinuteSelect, onMinuteFocus, preventScroll } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
     const { isSelected, onClick, onKeyDown, tabIndex } = (0, use_minute_1.useMinute)({
         minute: props.minute,
         minuteRef,
@@ -42,8 +41,9 @@ const TimePickerMinute = (props) => {
         isMinuteSelected,
         onMinuteFocus,
         onMinuteSelect,
+        preventScroll,
     });
-    return (react_1.default.createElement(button_1.Button, { variant: "text", tabIndex: tabIndex, onKeyDown: onKeyDown, onClick: onClick, className: (0, cx_1.cx)("uxf-time-picker__minute", isSelected && classes_1.CLASSES.IS_SELECTED), ref: minuteRef }, props.label));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-minute", isSelected && classes_1.CLASSES.IS_SELECTED), onClick: onClick, onKeyDown: onKeyDown, ref: minuteRef, tabIndex: tabIndex }, props.label));
 };
 exports.TimePickerMinute = TimePickerMinute;
 exports.TimePickerMinute.displayName = "UxfUiTimePickerMinute";

package/time-picker/time-picker-minutes.js

@@ -9,7 +9,7 @@ const time_picker_minute_1 = require("./time-picker-minute");
 const use_minutes_1 = require("@uxf/datepicker/hooks/use-minutes");
 const TimePickerMinutes = () => {
     const { minutes } = (0, use_minutes_1.useMinutes)({});
-    return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { minute: minute.value, label: minute.label, key: minute.value })))));
+    return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes uxf-calendar__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { minute: minute.value, label: minute.label, key: minute.value })))));
 };
 exports.TimePickerMinutes = TimePickerMinutes;
 exports.TimePickerMinutes.displayName = "UxfUiTimePickerMinutes";

package/time-picker/time-picker.d.ts

@@ -3,6 +3,7 @@ import { OnTimeChangeType, TimeType } from "@uxf/datepicker/hooks/use-time-picke
 export interface TimePickerProps {
     closePopoverHandler?: () => void;
     onChange: (data: OnTimeChangeType) => void;
+    preventScroll?: boolean;
     selectedTime: TimeType | null;
 }
 export declare const TimePicker: FC<TimePickerProps>;