@uxf/ui 11.53.2 → 11.55.0

package/avatar/avatar.d.ts

@@ -1,5 +1,6 @@
-import React, { HTMLAttributes } from "react";
+import React, { HTMLAttributes, ReactNode } from "react";
 export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
     src?: string;
+    placeholder?: ReactNode;
 }
 export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;

package/avatar/avatar.js

@@ -28,7 +28,8 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 exports.Avatar = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
     const avatarClassName = (0, cx_1.cx)("uxf-avatar", props.className);
-    return (react_1.default.createElement("div", { className: avatarClassName, ref: ref }, props.src ? react_1.default.createElement("img", { alt: "", className: "uxf-avatar__image", src: props.src }) : react_1.default.createElement(icon_1.Icon, { name: "user", size: 16 })));
+    return (react_1.default.createElement("div", { className: avatarClassName, ref: ref }, props.src ? (react_1.default.createElement("img", { alt: "", className: "uxf-avatar__image", src: props.src })) : (((_a = props.placeholder) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "user", size: 16 })))));
 });
 exports.Avatar.displayName = "UxfUiAvatar";

package/avatar-file-input/avatar-file-input.js

@@ -55,7 +55,7 @@ exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
             inputNode.value = "";
         }
     };
-    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, label: props.label, name: props.name },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         react_1.default.createElement("div", { className: "uxf-avatar-file-input__inner-wrapper" },
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input__input", stateClassName), onClick: onSelectFile },
                 react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: (_c = props.accept) !== null && _c !== void 0 ? _c : "image/*", "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: props.onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), value: props.value }),

package/css/tooltip.css

@@ -1,7 +1,15 @@
 .uxf-tooltip {
-    @apply z-tooltip bg-lightHigh w-max max-w-[calc(100vw-20px)] rounded-lg p-3 text-white;
+    background-color: theme("colors.lightHigh");
+    border-radius: theme("borderRadius.lg");
+    color: theme("colors.white");
+    max-width: calc(100vw - 20px);
+    padding: theme("spacing.3");
+    width: max-content;
+    z-index: theme("zIndex.tooltip");
 
     &__arrow {
-        @apply z-tooltip bg-lightHigh rounded-sm;
+        background-color: theme("colors.lightHigh");
+        border-radius: theme("borderRadius.sm");
+        z-index: theme("zIndex.tooltip");
     }
 }

package/dropzone/dropzone.stories.js

@@ -28,6 +28,7 @@ const show_1 = require("@uxf/core-react/components/show");
 const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
 const handle_rejected_files_1 = require("@uxf/ui/dropzone/handle-rejected-files");
 const react_1 = __importStar(require("react"));
+const text_input_1 = require("../text-input");
 const toggle_1 = require("../toggle");
 const action_1 = require("../utils/action");
 const upload_file_mock_1 = require("../utils/mocks/upload-file.mock");
@@ -48,11 +49,10 @@ function Default() {
         react_1.default.createElement(toggle_1.Toggle, { label: "Only images upload", name: "toggle", onChange: () => setHasOnlyImagesAllowed((prev) => !prev), value: hasOnlyImagesAllowed }),
         react_1.default.createElement("div", { className: "flex items-center" },
             react_1.default.createElement(toggle_1.Toggle, { label: "Limit file count", name: "toggle", onChange: () => setIsFileCountLimited((prev) => !prev), value: isFileCountLimited }),
-            react_1.default.createElement("input", { className: "w-20", onChange: (event) => setFileCountLimit(parseInt(event.target.value, 10)), type: "number", value: fileCountLimit })),
+            react_1.default.createElement(text_input_1.TextInput, { className: "w-20", name: "limit-file-count", onChange: (value) => setFileCountLimit(parseInt(value, 10)), type: "number", value: fileCountLimit.toString() })),
         react_1.default.createElement("div", { className: "flex items-center" },
             react_1.default.createElement(toggle_1.Toggle, { label: "Limit file size", name: "toggle", onChange: () => setIsFileSizeLimited((prev) => !prev), value: isFileSizeLimited }),
-            react_1.default.createElement("input", { className: "w-20", onChange: (event) => setFileSizeLimit(parseInt(event.target.value, 10)), type: "number", value: fileSizeLimit }),
-            "MB"),
+            react_1.default.createElement(text_input_1.TextInput, { className: "w-28", name: "limit-file-size", onChange: (value) => setFileSizeLimit(parseInt(value, 10)), rightElement: "MB", type: "number", value: fileSizeLimit.toString() })),
         react_1.default.createElement(index_1.Dropzone, { accept: hasOnlyImagesAllowed ? { "image/*": [] } : undefined, isDisabled: isDisabled, label: "Use drag and drop or click to upload", maxFileSize: isFileSizeLimited ? fileSizeLimit * MB_SIZE : undefined, maxFilesCount: isFileCountLimited ? fileCountLimit : undefined, name: "dropzone-disabled-drag-and-drop", onChange: onChange, onDropRejected: (fileRejections) => (0, handle_rejected_files_1.handleRejectedFiles)(fileRejections, fileCountLimit), onUploadFile: upload_file_mock_1.uploadFile, value: files }),
         react_1.default.createElement(index_1.Dropzone.List, { className: "mt-6", errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", isDisabled: isDisabled, name: "dropzone-error-message", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files }),
         react_1.default.createElement(show_1.Show, { when: (0, is_not_empty_1.isNotEmpty)(files) },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.53.2",
+    "version": "11.55.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -23,10 +23,10 @@
     "dependencies": {
         "@floating-ui/react": "0.26.28",
         "@headlessui/react": "1.7.19",
-        "@uxf/core": "11.53.2",
-        "@uxf/core-react": "11.53.2",
+        "@uxf/core": "11.54.0",
+        "@uxf/core-react": "11.54.0",
         "@uxf/datepicker": "11.50.0",
-        "@uxf/styles": "11.53.2",
+        "@uxf/styles": "11.54.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.13",
         "jump.js": "1.0.2",

package/tooltip/tooltip.stories.js

@@ -1,14 +1,38 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
+const checkbox_input_1 = require("../checkbox-input");
 const chip_1 = require("../chip");
 const tooltip_1 = require("./tooltip");
 function Default() {
     const sides = ["top", "bottom", "bottom-start", "left", "right"];
-    return (react_1.default.createElement("div", { className: "grid h-96 place-items-center" }, sides.map((placement) => (react_1.default.createElement(tooltip_1.Tooltip, { content: "My tooltip content", key: placement, placement: placement },
-        react_1.default.createElement(chip_1.Chip, { color: "green" }, placement))))));
+    const [isPointingDisabled, setIsPointingDisabled] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", { className: "grid h-96 place-items-center" },
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Disable pointing inside tooltip?", name: "isPointingDisabled", onChange: (value) => setIsPointingDisabled(Boolean(value)), value: isPointingDisabled }),
+        sides.map((placement) => (react_1.default.createElement(tooltip_1.Tooltip, { content: "My tooltip content", isPointingDisabled: isPointingDisabled, key: placement, placement: placement },
+            react_1.default.createElement(chip_1.Chip, { color: "green" }, placement))))));
 }

package/tooltip/use-tooltip.d.ts

@@ -2,6 +2,7 @@ import { Placement } from "@floating-ui/react";
 import { MutableRefObject } from "react";
 export interface TooltipOptions {
     arrowRef: MutableRefObject<null>;
+    isPointingDisabled?: boolean;
     offset?: number;
     placement?: Placement;
     shiftPadding?: number;

package/tooltip/use-tooltip.js

@@ -5,7 +5,7 @@ const react_1 = require("@floating-ui/react");
 const react_2 = require("react");
 function useTooltip(options) {
     var _a, _b;
-    const [open, setOpen] = (0, react_2.useState)(false);
+    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
     const data = (0, react_1.useFloating)({
         middleware: [
             (0, react_1.offset)((_a = options.offset) !== null && _a !== void 0 ? _a : 16),
@@ -13,23 +13,27 @@ function useTooltip(options) {
             (0, react_1.shift)({ padding: (_b = options.shiftPadding) !== null && _b !== void 0 ? _b : 8 }),
             (0, react_1.arrow)({ element: options.arrowRef }),
         ],
-        open,
-        onOpenChange: setOpen,
+        open: isOpen,
+        onOpenChange: setIsOpen,
         placement: options.placement,
         whileElementsMounted: (reference, floating, update) => (0, react_1.autoUpdate)(reference, floating, update, {
             elementResize: typeof ResizeObserver !== "undefined",
         }),
     });
     const context = data.context;
-    const hover = (0, react_1.useHover)(context, { delay: 200, handleClose: (0, react_1.safePolygon)(), move: false });
+    const hover = (0, react_1.useHover)(context, {
+        delay: options.isPointingDisabled ? undefined : 200,
+        handleClose: options.isPointingDisabled ? null : (0, react_1.safePolygon)(),
+        move: false,
+    });
     const focus = (0, react_1.useFocus)(context);
     const role = (0, react_1.useRole)(context, { role: "tooltip" });
     const dismiss = (0, react_1.useDismiss)(context);
     const interactions = (0, react_1.useInteractions)([hover, focus, dismiss, role]);
     return (0, react_2.useMemo)(() => ({
-        open,
-        setOpen,
+        open: isOpen,
+        setOpen: setIsOpen,
         ...interactions,
         ...data,
-    }), [open, setOpen, interactions, data]);
+    }), [isOpen, setIsOpen, interactions, data]);
 }