@uxf/ui 10.0.0-beta.19 → 10.0.0-beta.22

package/chip/chip.js

@@ -41,10 +41,11 @@ const CloseButton = (props) => {
 };
 exports.Chip = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
-    const { children, className, onClose, ...restProps } = props;
+    const { children, className, onClose, suppressFocus, tabIndex, ...restProps } = props;
     const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-chip--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-chip--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, onClose && "has-button", className);
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
         className: (0, cx_1.cx)(chipClassName),
+        tabIndex: suppressFocus ? -1 : tabIndex,
         ...restProps,
     });
     return (react_1.default.createElement("a", { ref: ref, ...anchorProps },

package/css/image-gallery.css

@@ -38,7 +38,7 @@
     }
 
     &__close-button-wrapper {
-        @apply flex justify-end z-1;
+        @apply w-auto ml-auto z-1;
     }
 
     &__close-button {

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/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,4 +1,4 @@
-import { FC } from "react";
+import { FC, ReactElement } from "react";
 import { ImageGalleryImageProps } from "../types";
 export interface GalleryProps {
     closeButtonTitle?: string;
@@ -8,5 +8,8 @@ export interface GalleryProps {
     onPrevious: () => void;
     imageIndex: number;
     images: ImageGalleryImageProps[];
+    prevButtonElement?: ReactElement;
+    nextButtonElement?: ReactElement;
+    closeButtonElement?: ReactElement;
 }
 export declare const Gallery: FC<GalleryProps>;

package/image-gallery/components/gallery.js

@@ -29,8 +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)(() => {
@@ -65,10 +66,10 @@ const Gallery = (props) => {
     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(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(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(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 : "" }),

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,8 +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, disableBackdropClose: props.disableBackdropClose, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.0.0-beta.19",
+  "version": "10.0.0-beta.22",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -15,7 +15,7 @@
   "dependencies": {
     "@floating-ui/react": "0.24.2",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "10.0.0-beta.15",
+    "@uxf/core": "10.0.0-beta.22",
     "@uxf/datepicker": "10.0.0-beta.9",
     "@uxf/styles": "10.0.0-beta.9",
     "color2k": "^2.0.2",

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

@@ -1,7 +0,0 @@
-import { FC } from "react";
-interface NextButtonProps {
-    onClick: () => void;
-    type: "prev" | "next";
-}
-export declare const ArrowButton: FC<NextButtonProps>;
-export {};

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

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