@uxf/ui 10.0.0-beta.4 → 10.0.0-beta.41

package/datetime-picker/datetime-picker.js

@@ -81,13 +81,13 @@ const DatetimePicker = (props) => {
     }, [onChange, tmpDate]);
     const selectedDate = getSelectedDate(props.value);
     const selectedTime = getSelectedTime(props.value);
-    return (react_1.default.createElement("div", { className: "uxf-tabs uxf-tabs--grow2" },
+    return (react_1.default.createElement("div", { className: "uxf-tabs uxf-tabs--grow" },
         react_1.default.createElement("div", { className: "uxf-tabs__tab-list__wrapper uxf-tabs__tab-list__wrapper--segmented uxf-datetime-picker__tabs" },
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list", `uxf-tabs__tab-list--segmented`) },
                 react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__tab uxf-tabs__tab--segmented uxf-datetime-picker__tab", selectedTab === "date" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("date") }, "Datum"),
                 react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__tab uxf-tabs__tab--segmented uxf-datetime-picker__tab", selectedTab === "time" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("time") }, "\u010Cas"))),
         react_1.default.createElement("div", { className: "uxf-tabs__panels" },
-            selectedTab === "date" && (react_1.default.createElement(date_picker_1.DatePicker, { maxDate: props.maxDate, minDate: props.minDate, onChange: onDatePickerChange, selectedDate: selectedDate })),
+            selectedTab === "date" && (react_1.default.createElement(date_picker_1.DatePicker, { maxDate: props.maxDate, minDate: props.minDate, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate })),
             selectedTab === "time" && react_1.default.createElement(time_picker_1.TimePicker, { onChange: onTimePickerChange, selectedTime: selectedTime }))));
 };
 exports.DatetimePicker = DatetimePicker;

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

@@ -33,6 +33,7 @@ const _input_with_popover_1 = require("../_input-with-popover");
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 const icon_1 = require("../icon");
 const datetime_picker_1 = require("../datetime-picker");
+const cx_1 = require("@uxf/core/utils/cx");
 (0, dayjs_1.extend)(customParseFormat_1.default);
 exports.ALLOWED_DATETIME_FORMAT = [
     "D. M. YYYY H:mm",
@@ -63,6 +64,7 @@ function getBoundaryDate(value) {
 exports.DatetimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const onChange = props.onChange;
+    const className = (0, cx_1.cx)("uxf-date-time-picker-input", props.className);
     const onInputChange = (0, react_1.useCallback)((value) => {
         const parsedValue = (0, dayjs_1.default)(value, exports.ALLOWED_DATETIME_FORMAT, true);
         if (value !== "" && parsedValue.isValid()) {
@@ -76,6 +78,6 @@ exports.DatetimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     const parsedMinDate = getBoundaryDate(props.minDate);
     const parsedMaxDate = getBoundaryDate(props.maxDate);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATETIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(datetime_picker_1.DatetimePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onChange, value: props.value })))));
+        react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATETIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(datetime_picker_1.DatetimePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onChange, value: props.value })))));
 });
 exports.DatetimePickerInput.displayName = "UxfUiDatePickerInput";

package/dropzone/dropzone-input.js

@@ -39,7 +39,7 @@ function fileToFileResponse(file) {
     };
 }
 function progressHandler(progressEvent, file, onValuesChange, values) {
-    if (onValuesChange && values) {
+    if (values) {
         onValuesChange(values.map((f) => f.id === file.id
             ? {
                 ...f,
@@ -51,14 +51,14 @@ function progressHandler(progressEvent, file, onValuesChange, values) {
     }
 }
 function fileUploadedHandler(uploadedFile, dropzoneFile, onValuesChange, values) {
-    if (onValuesChange && values) {
+    if (values) {
         onValuesChange(values.map((f) => f.id === dropzoneFile.id ? { ...uploadedFile, progress: 100, originalFile: f.originalFile } : f));
     }
 }
 function fileRejectedHandler(err, dropzoneFile, onValuesChange, values, onUploadError) {
     onUploadError === null || onUploadError === void 0 ? void 0 : onUploadError(err);
     dropzoneFile.error = err;
-    if (onValuesChange && values) {
+    if (values) {
         onValuesChange(values.map((f) => (f.id === dropzoneFile.id ? { ...f, error: err } : f)));
     }
 }
@@ -74,6 +74,10 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
             progress: 0,
         }));
         props.onChange(props.value ? [...props.value, ...files] : files);
+        const onChange = (values) => {
+            props.onChange(values);
+            refValue.current = values;
+        };
         for (const file of files) {
             if (!file.originalFile) {
                 file.error = "File not found";
@@ -82,10 +86,10 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
             props
                 .onUploadFile(file.originalFile, {
                 abortController: file.abortController,
-                onUploadProgress: (e) => progressHandler(e, file, props.onChange, refValue.current),
+                onUploadProgress: (e) => progressHandler(e, file, onChange, refValue.current),
             })
-                .then((res) => fileUploadedHandler(res, file, props.onChange, refValue.current))
-                .catch((err) => fileRejectedHandler(err, file, props.onChange, refValue.current, props.onUploadError));
+                .then((res) => fileUploadedHandler(res, file, onChange, refValue.current))
+                .catch((err) => fileRejectedHandler(err, file, onChange, refValue.current, props.onUploadError));
         }
     };
     const { getRootProps, getInputProps, rootRef } = (0, react_dropzone_1.useDropzone)({

package/flash-messages/flash-message.js

@@ -29,7 +29,7 @@ const react_1 = __importStar(require("react"));
 // eslint-disable-next-line react/destructuring-assignment
 const FlashMessage = ({ notification, onClose }) => {
     (0, react_1.useEffect)(() => {
-        const { autoDismiss = true, dismissTimeout = 5000 } = notification;
+        const { autoDismiss, dismissTimeout } = notification;
         let timer;
         if (autoDismiss) {
             timer = window.setTimeout(onClose, dismissTimeout);

package/flash-messages/flash-messages.js

@@ -26,16 +26,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashMessages = void 0;
 const react_1 = __importStar(require("react"));
 const flash_message_1 = require("./flash-message");
+const react_2 = require("@headlessui/react");
 exports.FlashMessages = (0, react_1.forwardRef)((props, ref) => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
-    const open = (0, react_1.useCallback)((notification) => setNotifications((prev) => [
-        ...prev,
-        {
-            ...notification,
-            variant: notification.variant || "success",
-            id: notification.id || Math.round(Math.random() * 1000),
-        },
-    ]), []);
+    const permanentNotificationsRef = (0, react_1.useRef)(null);
+    const permanentNotifications = notifications.filter((notification) => !notification.autoDismiss);
+    const dismissableNotifications = notifications.filter((notification) => !!notification.autoDismiss);
+    const [showDivider, setShowDivider] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const dividerHandler = () => {
+            if (permanentNotificationsRef.current &&
+                permanentNotificationsRef.current.scrollHeight > permanentNotificationsRef.current.clientHeight &&
+                dismissableNotifications.length > 0) {
+                setShowDivider(true);
+            }
+            else {
+                setShowDivider(false);
+            }
+        };
+        dividerHandler();
+        window.addEventListener("resize", dividerHandler);
+        return () => window.removeEventListener("resize", dividerHandler);
+    }, [dismissableNotifications.length, notifications]);
+    const open = (0, react_1.useCallback)((notification) => setNotifications((prev) => {
+        var _a;
+        return [
+            ...prev,
+            {
+                ...notification,
+                variant: notification.variant || "success",
+                autoDismiss: (_a = notification.autoDismiss) !== null && _a !== void 0 ? _a : true,
+                dismissTimeout: notification.dismissTimeout || 5000,
+                id: notification.id || Math.round(Math.random() * 1000),
+            },
+        ];
+    }), []);
     const close = (0, react_1.useCallback)((notification) => setNotifications((prev) => prev.filter((n) => n !== notification)), []);
     const closeAll = (0, react_1.useCallback)(() => setNotifications([]), []);
     const innerRef = (0, react_1.useRef)({
@@ -48,8 +73,17 @@ exports.FlashMessages = (0, react_1.forwardRef)((props, ref) => {
         closeAll: innerRef.current.closeAll,
         open: innerRef.current.open,
     }), []);
-    const onClose = (0, react_1.useCallback)((notification) => () => setNotifications((prev) => prev.filter((n) => n !== notification)), []);
     return notifications.length > 0 ? (react_1.default.createElement("div", { className: "uxf-flash-messages" },
-        react_1.default.createElement("div", { className: "uxf-flash-messages__list-wrapper", role: "list" }, notifications.map((notification) => (react_1.default.createElement(flash_message_1.FlashMessage, { key: `${notification.id}`, notification: notification, onClose: onClose(notification) })))))) : null;
+        dismissableNotifications.length > 0 && (react_1.default.createElement("div", { className: "uxf-flash-messages__dismissable" },
+            react_1.default.createElement("div", null, dismissableNotifications.map((notification) => {
+                return (react_1.default.createElement(react_2.Transition, { key: notification.id, appear: true, show: true, enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", className: "uxf-flash-message-wrapper" },
+                    react_1.default.createElement(flash_message_1.FlashMessage, { notification: notification, onClose: () => close(notification) })));
+            })))),
+        showDivider && react_1.default.createElement("hr", { className: "uxf-flash-messages__divider" }),
+        permanentNotifications.length > 0 && (react_1.default.createElement("div", { ref: permanentNotificationsRef, className: "uxf-flash-messages__permanent" },
+            react_1.default.createElement("div", null, permanentNotifications.map((notification) => {
+                return (react_1.default.createElement(react_2.Transition, { key: notification.id, appear: true, show: true, enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", className: "uxf-flash-message-wrapper" },
+                    react_1.default.createElement(flash_message_1.FlashMessage, { notification: notification, onClose: () => close(notification) })));
+            })))))) : null;
 });
 exports.FlashMessages.displayName = "UxfUiFlashMessages";

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

@@ -20,6 +20,18 @@ function Default() {
                     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(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."))),
+                variant: "error",
+            }) }, "Click to fire Flash message, variant 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."))),
+                variant: "info",
+            }) }, "Click to fire Flash message, variant 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 }),

package/image-gallery/components/close-button.d.ts

@@ -1,7 +1,8 @@
-import { FC } from "react";
+import { FC, ReactElement } from "react";
 interface CloseButtonProps {
     text?: string;
     onClick: () => void;
+    buttonElement?: ReactElement;
 }
 export declare const CloseButton: FC<CloseButtonProps>;
 export {};

package/image-gallery/components/close-button.js

@@ -7,10 +7,9 @@ exports.CloseButton = void 0;
 const react_1 = __importDefault(require("react"));
 const icon_1 = require("../../icon");
 const CloseButton = (props) => {
-    var _a;
+    var _a, _b;
     return (react_1.default.createElement("button", { className: "uxf-image-gallery__close-button", onClick: () => props.onClick() },
-        react_1.default.createElement("span", { className: "uxf-image-gallery__close-button-text" }, (_a = props.text) !== null && _a !== void 0 ? _a : "Zavřít"),
-        react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__close-button-icon", name: "xmarkLarge" })));
+        react_1.default.createElement("span", { className: "uxf-image-gallery__close-button-text" }, (_a = props.text) !== null && _a !== void 0 ? _a : "Zavřít"), (_b = props.buttonElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__close-button-icon", name: "xmarkLarge" })));
 };
 exports.CloseButton = CloseButton;
 exports.CloseButton.displayName = "UxfUiCloseButton";

package/image-gallery/components/gallery.d.ts

@@ -1,12 +1,15 @@
-import { FC } from "react";
+import { FC, ReactElement } from "react";
 import { ImageGalleryImageProps } from "../types";
-interface GalleryProps {
+export interface GalleryProps {
     closeButtonTitle?: string;
+    disableBackdropClose?: boolean;
     onClose: () => void;
     onNext: () => void;
     onPrevious: () => void;
     imageIndex: number;
     images: ImageGalleryImageProps[];
+    prevButtonElement?: ReactElement;
+    nextButtonElement?: ReactElement;
+    closeButtonElement?: ReactElement;
 }
 export declare const Gallery: FC<GalleryProps>;
-export {};

package/image-gallery/components/gallery.js

@@ -29,7 +29,9 @@ const resizer_1 = require("@uxf/core/utils/resizer");
 const react_1 = __importStar(require("react"));
 const close_button_1 = require("./close-button");
 const dot_1 = require("./dot");
-const arrow_button_1 = require("./arrow-button");
+const prev_button_1 = require("./prev-button");
+const react_swipeable_1 = require("react-swipeable");
+const next_button_1 = require("./next-button");
 const Gallery = (props) => {
     var _a;
     (0, react_1.useEffect)(() => {
@@ -56,15 +58,21 @@ const Gallery = (props) => {
     }, []);
     const imageSrc = props.images[props.imageIndex].src;
     const customContent = props.images[props.imageIndex].customContent;
-    return (react_1.default.createElement("div", { className: "uxf-image-gallery" },
+    const handlers = (0, react_swipeable_1.useSwipeable)({
+        onSwipedLeft: () => props.onNext(),
+        onSwipedRight: () => props.onPrevious(),
+        swipeDuration: 500,
+    });
+    return (react_1.default.createElement("div", { className: "uxf-image-gallery", role: "dialog", "aria-modal": true },
+        react_1.default.createElement("div", { "aria-hidden": true, className: "uxf-image-gallery__backdrop", onClick: !props.disableBackdropClose ? props.onClose : undefined }),
         react_1.default.createElement("div", { className: "uxf-image-gallery__close-button-wrapper" },
-            react_1.default.createElement(close_button_1.CloseButton, { onClick: props.onClose, text: props.closeButtonTitle })),
-        react_1.default.createElement("div", { className: "uxf-image-gallery__content" },
+            react_1.default.createElement(close_button_1.CloseButton, { buttonElement: props.closeButtonElement, onClick: props.onClose, text: props.closeButtonTitle })),
+        props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__buttons" },
+            react_1.default.createElement(prev_button_1.PrevButton, { buttonElement: props.prevButtonElement, onClick: props.onPrevious }),
+            react_1.default.createElement(next_button_1.NextButton, { buttonElement: props.nextButtonElement, onClick: props.onNext }))),
+        react_1.default.createElement("div", { className: "uxf-image-gallery__content", ...handlers },
             react_1.default.createElement("div", { className: "uxf-image-gallery__inner" },
                 react_1.default.createElement("img", { alt: "", className: "uxf-image-gallery__image", src: typeof imageSrc === "string" ? imageSrc : (_a = (0, resizer_1.resizerImageUrl)(imageSrc)) !== null && _a !== void 0 ? _a : "" }),
-                props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__buttons" },
-                    react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onPrevious, type: "prev" }),
-                    react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onNext, type: "next" }))),
                 react_1.default.createElement("div", { className: "uxf-image-gallery__custom-content" }, customContent))),
         props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__dots" }, props.images.map((image, index) => (react_1.default.createElement(dot_1.Dot, { key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, active: index === props.imageIndex })))))));
 };

package/image-gallery/components/next-button.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from "react";
+interface NextButtonProps {
+    onClick: () => void;
+    buttonElement?: ReactElement;
+}
+export declare const NextButton: FC<NextButtonProps>;
+export {};

package/image-gallery/components/next-button.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextButton = void 0;
+const react_1 = __importDefault(require("react"));
+const icon_1 = require("../../icon");
+const NextButton = (props) => {
+    var _a;
+    return (react_1.default.createElement("button", { className: "uxf-image-gallery__button uxf-image-gallery__button--next", onClick: props.onClick }, (_a = props.buttonElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronRight" })));
+};
+exports.NextButton = NextButton;
+exports.NextButton.displayName = "UxfUiNextButton";

package/image-gallery/components/prev-button.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from "react";
+interface PrevButtonProps {
+    onClick: () => void;
+    buttonElement?: ReactElement;
+}
+export declare const PrevButton: FC<PrevButtonProps>;
+export {};

package/image-gallery/components/prev-button.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrevButton = void 0;
+const react_1 = __importDefault(require("react"));
+const icon_1 = require("../../icon");
+const PrevButton = (props) => {
+    var _a;
+    return (react_1.default.createElement("button", { className: "uxf-image-gallery__button uxf-image-gallery__button--prev", onClick: props.onClick }, (_a = props.buttonElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronLeft" })));
+};
+exports.PrevButton = PrevButton;
+exports.PrevButton.displayName = "UxfUiPrevButton";

package/image-gallery/image-gallery.d.ts

@@ -1,6 +1,11 @@
-import { FC, ReactNode } from "react";
+import { FC, ReactElement, ReactNode } from "react";
+import { GalleryProps } from "./components/gallery";
 export interface ImageGalleryProps {
     children: ReactNode;
     closeButtonTitle?: string;
+    disableBackdropClose?: GalleryProps["disableBackdropClose"];
+    prevButtonElement?: ReactElement;
+    nextButtonElement?: ReactElement;
+    closeButtonElement?: ReactElement;
 }
 export declare const ImageGallery: FC<ImageGalleryProps>;

package/image-gallery/image-gallery.js

@@ -48,7 +48,7 @@ const ImageGallery = (props) => {
     const contextValue = { registerImage, unregisterImage, openGallery };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(context_1.ImageGalleryProvider, { value: contextValue }, props.children),
-        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonTitle: props.closeButtonTitle, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, imageIndex: moduloImageIndex, images: images }))));
+        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonTitle: props.closeButtonTitle, disableBackdropClose: props.disableBackdropClose, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, imageIndex: moduloImageIndex, images: images, nextButtonElement: props.nextButtonElement, prevButtonElement: props.prevButtonElement, closeButtonElement: props.closeButtonElement }))));
 };
 exports.ImageGallery = ImageGallery;
 exports.ImageGallery.displayName = "UxfUiImageGallery";

package/image-gallery/image-gallery.stories.js

@@ -7,6 +7,7 @@ exports.Default = void 0;
 const image_1 = require("@uxf/core/utils/image");
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
+const icon_1 = require("../icon");
 exports.default = {
     title: "Lab/ImageGallery",
     component: index_1.ImageGallery,
@@ -31,8 +32,11 @@ const images = [
         title: "Obr. 5",
     },
 ];
+const nextButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronRight" });
+const prevButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronLeft" });
+const closeButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "xmarkLarge" });
 function Default() {
-    return (react_1.default.createElement(index_1.ImageGallery, null,
+    return (react_1.default.createElement(index_1.ImageGallery, { prevButtonElement: prevButtonElement, nextButtonElement: nextButtonElement, closeButtonElement: closeButtonElement },
         react_1.default.createElement("div", { className: "flex-direction flex gap-2" }, images.map((image, index) => (react_1.default.createElement(index_1.ImageGallery.Image, { key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, src: image.src, className: "h-56 w-56 cursor-pointer object-cover transition-transform hover:scale-105", customContent: image.title }))))));
 }
 exports.Default = Default;

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

@@ -91,13 +91,14 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
             : (_g = props.notFoundMessage) !== null && _g !== void 0 ? _g : "Nic nenalezeno";
     const withoutPopover = !props.withPopover;
     return (react_2.default.createElement(react_1.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)(withoutPopover && "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), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => {
+        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 }),
                 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", 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) => {
+                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)))));

package/multi-combobox/types.d.ts

@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";
+import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 export type MultiComboboxValueId = number | string;
 export type MultiComboboxValue<ValueId = MultiComboboxValueId> = {
     id: ValueId;
@@ -30,6 +31,8 @@ export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = Mul
     options?: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
+    size?: keyof InputGroupSizes;
+    variant?: keyof InputGroupVariants;
     withCheckboxes?: boolean;
     withPopover?: boolean;
 }

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

@@ -55,6 +55,7 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
     };
     const withoutPopover = !props.withPopover;
     return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)(withoutPopover && "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), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleSelectValueChange, value: selectedOptions }, (renderProps) => {
+        var _a, _b;
         const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement(react_1.Listbox.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, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef },
                 react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-multi-select__input", selectedOptions.length === 0 && "uxf-multi-select__input--is-empty") }, selectedOptions.length === 0
@@ -62,7 +63,7 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
                     : 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(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", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredOptions.map((option) => {
+                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;
                     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));

package/multi-select/types.d.ts

@@ -2,8 +2,8 @@ import { Placement, Strategy } from "@floating-ui/react";
 import { ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
-import { SelectSizes } from "../select/theme";
 import { FormControlProps } from "../types";
+import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 export type MultiSelectValueId = number | string;
 export type MultiSelectOption<T = MultiSelectValueId> = {
     color?: ChipColor;
@@ -25,7 +25,8 @@ export interface MultiSelectProps<ValueId = MultiSelectValueId, Option = MultiSe
     options: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
-    size?: keyof SelectSizes;
+    size?: keyof InputGroupSizes;
+    variant?: keyof InputGroupVariants;
     withPopover?: boolean;
 }
 export type MultiSelectTypeRef = HTMLDivElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.0.0-beta.4",
+  "version": "10.0.0-beta.41",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -15,16 +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",
-    "react-dropzone": "14.2.3"
+    "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/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";