@trackunit/react-form-components 0.0.343-alpha-869e1cbc10.0 → 0.0.343

package/index.cjs.js

@@ -49,6 +49,8 @@ var ReactAsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactAsyncSel
 
 var defaultTranslations = {
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
+	"dropzone.input.title": "Drag-and-drop file input",
+	"dropzone.label.default": "<clickable>Browse</clickable> or drag files here...",
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
 	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
 	"phoneField.error.INVALID_NUMBER": "The phone number is not valid",
@@ -95,6 +97,10 @@ const translations = {
  *  Local useTranslation for this specific library
  */
 const useTranslation = () => i18nLibraryTranslation.useNamespaceTranslation(namespace);
+/**
+ * Trans for this specific library.
+ */
+const Trans = (props) => (jsxRuntime.jsx(i18nLibraryTranslation.NamespaceTrans, Object.assign({}, props, { namespace: namespace })));
 /**
  * Registers the translations for this library
  */
@@ -630,17 +636,32 @@ const cvaDropZoneLabel = cssClassVarianceUtilities.cvaMerge([
     "flex",
     "justify-center",
 ]);
+const cvaDropZoneIconBackground = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "items-center", "justify-center", "rounded-full", "p-3"], {
+    variants: {
+        invalid: { true: ["bg-red-100"], false: ["bg-slate-200"] },
+    },
+});
+
+/**
+ *
+ * Default UX-intuitive label for the DropZone - can be overwritten by the label prop
+ */
+const DropZoneDefaultLabel = () => (jsxRuntime.jsx(Trans, { components: {
+        clickable: jsxRuntime.jsx("span", { className: "text-primary-600 hover:text-primary-700 cursor-pointer underline" }),
+    }, i18nKey: "dropzone.label.default", values: {} }));
 
 /**
- * The Drop Zone can be used to drag and drop files
+ * The Drop Zone can be used to drag and drop files or to browse and select files from the file system.
  *
  * @param {DropZoneProps} props - The props for the DropZone component
  * @returns {JSX.Element} DropZone component
  */
 const DropZone = (_a) => {
-    var { className, dataTestId, filesSelected, label, size = "large", isInvalid = false, disabled = false } = _a, rest = __rest(_a, ["className", "dataTestId", "filesSelected", "label", "size", "isInvalid", "disabled"]);
-    const [dragActive, setDragActive] = React__default["default"].useState(false);
-    const [fileDropped, setFileDropped] = React__default["default"].useState(false);
+    var { className, dataTestId, filesSelected, label = jsxRuntime.jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept } = _a, rest = __rest(_a, ["className", "dataTestId", "filesSelected", "label", "size", "isInvalid", "disabled", "accept"]);
+    const [dragActive, setDragActive] = React.useState(false);
+    const [fileDropped, setFileDropped] = React.useState(false);
+    const [t] = useTranslation();
+    const inputLabelRef = React.useRef(null);
     // function that handles drag enter, drag leave and drag over
     const handleDrag = (e) => {
         e.preventDefault();
@@ -660,7 +681,7 @@ const DropZone = (_a) => {
             filesSelected(e.target.files);
         }
     };
-    //funtion to handle drop
+    //function to handle drop
     const handleDrop = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -670,12 +691,22 @@ const DropZone = (_a) => {
             setFileDropped(true);
         }
     };
+    //function to handle focusable button click (for accessibility)
+    const handleButtonClick = (e) => {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled) {
+            return;
+        }
+        (_a = inputLabelRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
     return (jsxRuntime.jsxs("div", Object.assign({ className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
             if (disabled) {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }, rest, { children: [jsxRuntime.jsx("input", { className: "hidden", id: "input-file-upload", onChange: handleChange, title: "Hidden File Input", type: "file" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId && `${dataTestId}-label`, htmlFor: "input-file-upload", children: [jsxRuntime.jsx(reactComponents.Icon, { color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", style: !isInvalid ? { color: "rgb(156 163 175)" } : {}, type: "solid" }), jsxRuntime.jsx("span", { children: label })] })] })));
+        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }, rest, { children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", id: "input-file-upload", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId && `${dataTestId}-label`, htmlFor: "input-file-upload", ref: inputLabelRef, children: [jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] })] })));
 };
 
 // Doing the same check as we do on the backend

package/index.esm.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
+import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
 import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
 import { useCopyToClipboard } from 'react-use';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
-import React__default, { useMemo, forwardRef, useCallback, cloneElement, useState, useRef, useEffect, useImperativeHandle } from 'react';
+import React__default, { useMemo, forwardRef, useState, useRef, useCallback, cloneElement, useEffect, useImperativeHandle } from 'react';
 import { v4 } from 'uuid';
 import { format } from 'date-fns';
 import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, AsYouType, parseIncompletePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
@@ -19,6 +19,8 @@ import { z } from 'zod';
 
 var defaultTranslations = {
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
+	"dropzone.input.title": "Drag-and-drop file input",
+	"dropzone.label.default": "<clickable>Browse</clickable> or drag files here...",
 	"phoneField.error.INVALID_COUNTRY": "The country code is not valid",
 	"phoneField.error.INVALID_LENGTH": "The phone number is not valid",
 	"phoneField.error.INVALID_NUMBER": "The phone number is not valid",
@@ -65,6 +67,10 @@ const translations = {
  *  Local useTranslation for this specific library
  */
 const useTranslation = () => useNamespaceTranslation(namespace);
+/**
+ * Trans for this specific library.
+ */
+const Trans = (props) => (jsx(NamespaceTrans, Object.assign({}, props, { namespace: namespace })));
 /**
  * Registers the translations for this library
  */
@@ -600,17 +606,32 @@ const cvaDropZoneLabel = cvaMerge([
     "flex",
     "justify-center",
 ]);
+const cvaDropZoneIconBackground = cvaMerge(["relative", "flex", "items-center", "justify-center", "rounded-full", "p-3"], {
+    variants: {
+        invalid: { true: ["bg-red-100"], false: ["bg-slate-200"] },
+    },
+});
+
+/**
+ *
+ * Default UX-intuitive label for the DropZone - can be overwritten by the label prop
+ */
+const DropZoneDefaultLabel = () => (jsx(Trans, { components: {
+        clickable: jsx("span", { className: "text-primary-600 hover:text-primary-700 cursor-pointer underline" }),
+    }, i18nKey: "dropzone.label.default", values: {} }));
 
 /**
- * The Drop Zone can be used to drag and drop files
+ * The Drop Zone can be used to drag and drop files or to browse and select files from the file system.
  *
  * @param {DropZoneProps} props - The props for the DropZone component
  * @returns {JSX.Element} DropZone component
  */
 const DropZone = (_a) => {
-    var { className, dataTestId, filesSelected, label, size = "large", isInvalid = false, disabled = false } = _a, rest = __rest(_a, ["className", "dataTestId", "filesSelected", "label", "size", "isInvalid", "disabled"]);
-    const [dragActive, setDragActive] = React__default.useState(false);
-    const [fileDropped, setFileDropped] = React__default.useState(false);
+    var { className, dataTestId, filesSelected, label = jsx(DropZoneDefaultLabel, {}), size = "large", isInvalid = false, disabled = false, accept } = _a, rest = __rest(_a, ["className", "dataTestId", "filesSelected", "label", "size", "isInvalid", "disabled", "accept"]);
+    const [dragActive, setDragActive] = useState(false);
+    const [fileDropped, setFileDropped] = useState(false);
+    const [t] = useTranslation();
+    const inputLabelRef = useRef(null);
     // function that handles drag enter, drag leave and drag over
     const handleDrag = (e) => {
         e.preventDefault();
@@ -630,7 +651,7 @@ const DropZone = (_a) => {
             filesSelected(e.target.files);
         }
     };
-    //funtion to handle drop
+    //function to handle drop
     const handleDrop = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -640,12 +661,22 @@ const DropZone = (_a) => {
             setFileDropped(true);
         }
     };
+    //function to handle focusable button click (for accessibility)
+    const handleButtonClick = (e) => {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled) {
+            return;
+        }
+        (_a = inputLabelRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
     return (jsxs("div", Object.assign({ className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
             if (disabled) {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }, rest, { children: [jsx("input", { className: "hidden", id: "input-file-upload", onChange: handleChange, title: "Hidden File Input", type: "file" }), jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId && `${dataTestId}-label`, htmlFor: "input-file-upload", children: [jsx(Icon, { color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", style: !isInvalid ? { color: "rgb(156 163 175)" } : {}, type: "solid" }), jsx("span", { children: label })] })] })));
+        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }, rest, { children: [jsx("input", { accept: accept, className: "hidden", id: "input-file-upload", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId && `${dataTestId}-label`, htmlFor: "input-file-upload", ref: inputLabelRef, children: [jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsx(Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] })] })));
 };
 
 // Doing the same check as we do on the backend

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.343-alpha-869e1cbc10.0",
+  "version": "0.0.343",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/DropZone/DropZone.d.ts

@@ -4,9 +4,9 @@ import { BaseInputProps } from "../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder" | "fieldSize" | "size" | "nonInteractive">;
 export interface DropZoneProps extends BaseInputExposedProps, CommonProps {
     /**
-     * A string to set the label in Drop Zone.
+     * A JSX element or a string to set a focusable label in Drop Zone. If not provided, the default label will be used.
      */
-    label: string;
+    label?: JSX.Element | string;
     /**
      * A flag to disable the drop zone.
      */
@@ -25,10 +25,10 @@ export interface DropZoneProps extends BaseInputExposedProps, CommonProps {
     filesSelected: (file: FileList) => void;
 }
 /**
- * The Drop Zone can be used to drag and drop files
+ * The Drop Zone can be used to drag and drop files or to browse and select files from the file system.
  *
  * @param {DropZoneProps} props - The props for the DropZone component
  * @returns {JSX.Element} DropZone component
  */
-export declare const DropZone: ({ className, dataTestId, filesSelected, label, size, isInvalid, disabled, ...rest }: DropZoneProps) => JSX.Element;
+export declare const DropZone: ({ className, dataTestId, filesSelected, label, size, isInvalid, disabled, accept, ...rest }: DropZoneProps) => JSX.Element;
 export {};

package/src/components/DropZone/DropZone.variants.d.ts

@@ -6,3 +6,6 @@ export declare const cvaDropZone: (props?: ({
     invalid?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaDropZoneLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaDropZoneIconBackground: (props?: ({
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/DropZone/DropZoneDefaultLabel.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ *
+ * Default UX-intuitive label for the DropZone - can be overwritten by the label prop
+ */
+export declare const DropZoneDefaultLabel: () => JSX.Element;

package/src/translation.d.ts

@@ -15,8 +15,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">;
+export declare const useTranslation: () => [TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "dropzone.input.title" | "dropzone.label.default" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"clearIndicator.icon.tooltip.clearAll" | "dropzone.input.title" | "dropzone.label.default" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };