@uxf/ui 1.0.0-beta.128 → 1.0.0-beta.129

package/css/combobox.css

@@ -92,16 +92,23 @@
         &,
         &:hover,
         &:focus {
-            margin: 1px 0;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            transition: background-color 5000s ease-in-out 0s !important;
 
             :root .dark & {
+                -webkit-text-fill-color: theme("colors.gray.300");
                 -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                background-color: theme("colors.gray.800");
                 caret-color: white;
-                -webkit-text-fill-color: theme("colors.gray.300");
             }
 
             :root .light & {
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white");
+                box-shadow: inset 0 0 0 1000px theme("colors.white");
+                background-color: theme("colors.white");
             }
         }
     }

package/css/file-input.css

@@ -71,6 +71,10 @@
             &__file-name {
                 @apply truncate;
             }
+
+            &__file-name-link {
+                @apply truncate hover:underline hover:underline-offset-2;
+            }
         }
     }
 }

package/css/input.css

@@ -217,16 +217,23 @@
         &,
         &:hover,
         &:focus {
-            margin: 1px 0;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            transition: background-color 5000s ease-in-out 0s !important;
 
             :root .dark & {
+                -webkit-text-fill-color: theme("colors.gray.300");
                 -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                background-color: theme("colors.gray.800");
                 caret-color: white;
-                -webkit-text-fill-color: theme("colors.gray.300");
             }
 
             :root .light & {
                 -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white");
+                box-shadow: inset 0 0 0 1000px theme("colors.white");
+                background-color: theme("colors.white");
             }
         }
     }

package/css/textarea.css

@@ -101,16 +101,23 @@
         &,
         &:hover,
         &:focus {
-            margin: 1px 0;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            transition: background-color 5000s ease-in-out 0s !important;
 
             :root .dark & {
+                -webkit-text-fill-color: theme("colors.gray.300");
                 -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                background-color: theme("colors.gray.800");
                 caret-color: white;
-                -webkit-text-fill-color: theme("colors.gray.300");
             }
 
             :root .light & {
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white");
+                box-shadow: inset 0 0 0 1000px theme("colors.white");
+                background-color: theme("colors.white");
             }
         }
     }

package/dropzone/dropzone-list.d.ts

@@ -1,5 +1,5 @@
+import { FormControlProps } from "@uxf/ui/types";
 import { FC, ReactNode } from "react";
-import { FormControlProps } from "../types";
 import { DropzoneFile } from "./types";
 export interface DropzoneListProps extends FormControlProps<DropzoneFile[]> {
     errorText?: string;

package/dropzone/dropzone-list.js

@@ -26,10 +26,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropzoneList = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
+const context_1 = require("@uxf/ui/context");
+const icon_1 = require("@uxf/ui/icon");
+const loader_1 = require("@uxf/ui/loader/loader");
+const get_file_url_1 = require("@uxf/ui/utils/files/get-file-url");
 const react_1 = __importStar(require("react"));
-const context_1 = require("../context");
-const icon_1 = require("../icon");
-const loader_1 = require("../loader/loader");
 function formatBytes(bytes, decimals = 2) {
     const k = 1024;
     const dm = decimals < 0 ? 0 : decimals;
@@ -52,9 +53,6 @@ function getIconName(extension) {
             return "file";
     }
 }
-function getFileUrl(domain, file) {
-    return `${domain}/upload/${file.namespace || "default"}/${file.uuid[0]}/${file.uuid[1]}/${file.uuid}.${file.extension}`;
-}
 const DropzoneList = (props) => {
     const context = (0, react_1.useContext)(context_1.UiContext);
     const onRemove = (file, isUploading) => () => {
@@ -80,7 +78,7 @@ const DropzoneList = (props) => {
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropzone-list__item", !!file.error && classes_1.CLASSES.IS_INVALID) },
                 react_1.default.createElement("div", { className: "uxf-dropzone-list__item__block" },
                     react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone-list__item__block__icon", name: getIconName(file.extension) }),
-                    (context === null || context === void 0 ? void 0 : context.domain) && file.id > 0 ? (react_1.default.createElement("a", { className: "uxf-dropzone-list__item__block__file-name-link", href: getFileUrl(context.domain, file), target: "_blank", rel: "noreferrer noopenner" }, file.name)) : (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-name" }, file.name))),
+                    (context === null || context === void 0 ? void 0 : context.domain) && file.id > 0 ? (react_1.default.createElement("a", { className: "uxf-dropzone-list__item__block__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, file), target: "_blank", rel: "noreferrer noopenner" }, file.name)) : (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-name" }, file.name))),
                 react_1.default.createElement("div", { className: "uxf-dropzone-list__item__block" },
                     isUploading ? (react_1.default.createElement(loader_1.Loader, { size: "sm" })) : (!file.error &&
                         ((_c = file.originalFile) === null || _c === void 0 ? void 0 : _c.size) && (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-size" }, formatBytes(file.originalFile.size)))),

package/file-input/file-input.js

@@ -28,20 +28,24 @@ const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const context_1 = require("@uxf/ui/context");
 const form_control_1 = require("@uxf/ui/form-control");
 const input_1 = require("@uxf/ui/input");
 const loader_1 = require("@uxf/ui/loader/loader");
+const get_file_url_1 = require("@uxf/ui/utils/files/get-file-url");
 const react_1 = __importStar(require("react"));
 const file_input_base_1 = require("./file-input-base");
 // eslint-disable-next-line complexity
 exports.FileInput = (0, forwardRef_1.forwardRef)("FileInput", (props, ref) => {
     var _a, _b;
+    const context = (0, react_1.useContext)(context_1.UiContext);
     const [isUploading, setIsUploading] = (0, react_1.useState)(false);
     const generatedId = (0, react_1.useId)();
     const id = props.id || generatedId;
     const innerRef = (0, react_1.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
+    const fileName = props.value ? `${props.value.name}` : props.placeholder || "No file has been selected yet";
     const onChange = async (_, e) => {
         var _a, _b, _c;
         const file = (_a = e === null || e === void 0 ? void 0 : e.target.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -66,6 +70,6 @@ exports.FileInput = (0, forwardRef_1.forwardRef)("FileInput", (props, ref) => {
             react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), htmlFor: id },
                 react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? ("Vyberte soubor") : (react_1.default.createElement(loader_1.Loader, { className: "uxf-file-input__label__loader", size: "sm" }))),
                 react_1.default.createElement("div", { className: "uxf-file-input__label__wrapper" },
-                    react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, props.value ? `${props.value.name}` : props.placeholder || "No file has been selected yet"),
+                    (context === null || context === void 0 ? void 0 : context.domain) && props.value ? (react_1.default.createElement("a", { className: "uxf-file-input__label__wrapper__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, props.value), target: "_blank", rel: "noreferrer noopenner" }, fileName)) : (react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, fileName)),
                     props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })))))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.128",
+  "version": "1.0.0-beta.129",
   "description": "",
   "publishConfig": {
     "access": "public"

package/utils/files/get-file-url.d.ts

@@ -0,0 +1,2 @@
+import { FileResponse } from "@uxf/ui/types";
+export declare function getFileUrl(domain: string, file: FileResponse): string;

package/utils/files/get-file-url.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileUrl = void 0;
+function getFileUrl(domain, file) {
+    return `${domain}/upload/${file.namespace || "default"}/${file.uuid[0]}/${file.uuid[1]}/${file.uuid}.${file.extension}`;
+}
+exports.getFileUrl = getFileUrl;