@trackunit/react-components 0.1.47 → 0.1.51

package/index.js

@@ -2698,6 +2698,34 @@ tu-toggle__description
 ${({ $disabled }) => $disabled && tws `tu-toggle__description--disabled`}
 `;
 
+/**
+ * A thin wrapper around the `BaseInput` component for upload input fields.
+ *
+ * NOTE: If shown with a label, please use the `UploadField` component instead.
+ */
+const UploadInput = forwardRef((_a, ref) => {
+    var { disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles } = _a, rest = __rest(_a, ["disabled", "acceptedTypes", "nonInteractive", "uploadLabel", "multipleFiles"]);
+    return (jsx(UploadInputContainer, { children: jsx(BaseInput, Object.assign({ addonBefore: uploadLabel, ref: ref, disabled: disabled, accept: acceptedTypes, multiple: multipleFiles, type: "file", nonInteractive: nonInteractive, 
+            // onClick used to work with nonInteractive option
+            onClick: event => {
+                if (nonInteractive) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            } }, rest)) }));
+});
+const UploadInputContainer = tw.label `
+tu-upload-input`;
+
+/**
+ * Upload fields enable the user to upload Files.
+ */
+const UploadField = forwardRef((_a, ref) => {
+    var { label, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
+    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, dataTestId: `${dataTestId}-FormGroup` }, { children: jsx(UploadInput, Object.assign({ ref: ref, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+});
+
 /**
  * Helper function to get normalized score in range 0-1 used by the ValueBar
  *
@@ -3136,4 +3164,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmailInput, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PhoneInput, PieChart, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, Sidebar, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };
+export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmailInput, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PhoneInput, PieChart, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, Sidebar, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, UploadField, UploadInput, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.47",
+  "version": "0.1.51",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.69",
-    "@trackunit/tailwind-styled-components": "0.0.52",
+    "@trackunit/css-core": "0.0.71",
+    "@trackunit/tailwind-styled-components": "0.0.53",
     "react": "18.2.0",
-    "@trackunit/ui-design-tokens": "0.0.56",
-    "@trackunit/react-core-contexts-test": "0.1.24",
+    "@trackunit/ui-design-tokens": "0.0.58",
+    "@trackunit/react-core-contexts-test": "0.1.26",
     "echarts": "5.4.0",
     "echarts-for-react": "3.0.2",
     "uuid": "8.3.2",
@@ -16,7 +16,7 @@
     "date-fns": "2.29.3",
     "react-day-picker": "8.3.7",
     "@floating-ui/react": "0.15.1",
-    "@trackunit/ui-icons": "0.0.57",
+    "@trackunit/ui-icons": "0.0.58",
     "react-browser-hooks": "2.2.4",
     "react-useportal": "1.0.17",
     "react-router-dom": "6.4.5",

package/src/components/UploadField/UploadField.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { UploadInputProps } from "../UploadInput/UploadInput";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface UploadFieldProps extends UploadInputProps, FormGroupExposedProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * Upload fields enable the user to upload Files.
+ */
+export declare const UploadField: import("react").ForwardRefExoticComponent<UploadFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/UploadInput/UploadInput.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common";
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder">;
+export interface UploadInputProps extends BaseInputExposedProps, CommonProps {
+    /**
+     * A flag to disable the upload input.
+     */
+    disabled?: boolean;
+    /**
+     * A string to set the file formats, for example '.pdf' or '.pdf, .jgp'.
+     */
+    acceptedTypes?: string;
+    /**
+     * Label for the file selector button,
+     */
+    uploadLabel: string;
+    /**
+     * A flag to allow the upload input to accept multiple files.
+     */
+    multipleFiles?: boolean;
+    /**
+     * A flag to disable interaction with input for example if you want to use input as a child of higher component
+     */
+    nonInteractive?: boolean;
+}
+/**
+ * A thin wrapper around the `BaseInput` component for upload input fields.
+ *
+ * NOTE: If shown with a label, please use the `UploadField` component instead.
+ */
+export declare const UploadInput: import("react").ForwardRefExoticComponent<UploadInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/index.d.ts

@@ -49,4 +49,6 @@ export * from "./Timeline/Timeline";
 export * from "./Tip";
 export * from "./Toggle";
 export * from "./Tooltip";
+export * from "./UploadField/UploadField";
+export * from "./UploadInput/UploadInput";
 export * from "./ValueBar";