@trackunit/react-components 0.1.57 → 0.1.59

package/index.js

@@ -293,7 +293,7 @@ const Root$9 = tw.span `
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-const ActionButton = ({ type, value, dataTestId, iconSize }) => {
+const ActionButton = ({ type, value, dataTestId, iconSize, disabled }) => {
     const getIconName = () => {
         switch (type) {
             case "PHONE_NUMBER":
@@ -319,7 +319,7 @@ const ActionButton = ({ type, value, dataTestId, iconSize }) => {
                 return window.open(`tel:${value}`);
         }
     };
-    return (jsx(ActionContainer, { children: jsx(StyledIconButton, { "$fieldSize": iconSize, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
+    return (jsx(ActionContainer, { children: jsx(StyledIconButton, { "$fieldSize": iconSize, disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
 };
 const ActionContainer = tw.div `
   tu-action-container
@@ -1268,12 +1268,29 @@ const Overlay = tw.div `
  * For specific input types make sure to use the corresponding input component.
  */
 const EmailInput = React.forwardRef((_a, ref) => {
-    var { fieldSize = "medium", disableAction = false, dataTestId } = _a, rest = __rest(_a, ["fieldSize", "disableAction", "dataTestId"]);
+    var { fieldSize = "medium", disabled = false, dataTestId } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId"]);
     const [email, setEmail] = React.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
     };
-    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId, fieldSize: fieldSize, ref: ref, type: "email", placeholder: rest.placeholder || "mail@example.com", onChange: e => setEmail(e.target.value) }, rest, { actions: !disableAction && (jsx(ActionButton, { value: email, type: "EMAIL", onClick: sendEmail, dataTestId: dataTestId && `${dataTestId}-emailIcon`, iconSize: fieldSize })) })));
+    return (jsx(BaseInput, Object.assign({ dataTestId: dataTestId, fieldSize: fieldSize, ref: ref, type: "email", placeholder: rest.placeholder || "mail@example.com", onChange: e => setEmail(e.target.value) }, rest, { actions: jsx(ActionButton, { disabled: disabled, value: email, type: "EMAIL", onClick: sendEmail, dataTestId: dataTestId && `${dataTestId}-emailIcon`, iconSize: fieldSize }) })));
+});
+
+/**
+ * The EmailField component is used to enter email.
+ * EmailField validates that user enters a valid email address.
+ *
+ */
+const EmailField = forwardRef((_a, ref) => {
+    var { label, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    const [value, setValue] = useState(defaultValue);
+    // Type guard to check if value is a string
+    function isString(inputValue) {
+        return typeof inputValue === "string";
+    }
+    // Check the regular expression only if value is a string
+    const renderAsInvalid = !!errorMessage || (isString(value) && !/^\S+@\S+\.\S+$/.test(value));
+    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(EmailInput, Object.assign({ ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -3162,4 +3179,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, UploadField, UploadInput, 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, EmailField, 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,20 +1,20 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.72",
-    "@trackunit/tailwind-styled-components": "0.0.53",
+    "@trackunit/css-core": "0.0.73",
+    "@trackunit/tailwind-styled-components": "0.0.54",
     "react": "18.2.0",
-    "@trackunit/ui-design-tokens": "0.0.59",
+    "@trackunit/ui-design-tokens": "0.0.60",
     "echarts": "5.4.0",
     "echarts-for-react": "3.0.2",
     "react-use": "17.4.0",
     "date-fns": "2.29.3",
     "react-day-picker": "8.3.7",
     "@floating-ui/react": "0.15.1",
-    "@trackunit/ui-icons": "0.0.59",
+    "@trackunit/ui-icons": "0.0.60",
     "react-browser-hooks": "2.2.4",
     "react-useportal": "1.0.17",
     "react-router-dom": "6.4.5",

package/src/components/ActionButton/ActionButton.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { CommonProps } from "../../common";
+import { ButtonCommonProps } from "../buttons";
 type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
 type FieldSize = "small" | "medium";
-interface ActionButtonProps extends CommonProps {
+interface ActionButtonProps extends ButtonCommonProps, CommonProps {
     /**
      * The type of action performed when clicking the button.
      */
@@ -26,5 +27,5 @@ interface ActionButtonProps extends CommonProps {
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-export declare const ActionButton: ({ type, value, dataTestId, iconSize }: ActionButtonProps) => JSX.Element;
+export declare const ActionButton: ({ type, value, dataTestId, iconSize, disabled }: ActionButtonProps) => JSX.Element;
 export {};

package/src/components/EmailField/EmailField.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface EmailFieldProps extends FormGroupExposedProps, BaseInputProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The EmailField component is used to enter email.
+ * EmailField validates that user enters a valid email address.
+ *
+ */
+export declare const EmailField: import("react").ForwardRefExoticComponent<EmailFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/EmailInput/EmailInput.d.ts

@@ -1,12 +1,5 @@
 import * as React from "react";
-import { CommonProps } from "../../common";
 import { BaseInputProps } from "../BaseInput";
-export interface EmailInputProps extends BaseInputProps, CommonProps {
-    /**
-     * A flag to disable the email button.
-     */
-    disableAction?: boolean;
-}
 /**
  * A Email Input component is used for input of the type Email.
  *
@@ -17,4 +10,4 @@ export interface EmailInputProps extends BaseInputProps, CommonProps {
  * A reference to the input element is provided as the `ref` prop.
  * For specific input types make sure to use the corresponding input component.
  */
-export declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const EmailInput: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLInputElement>>;

package/src/components/index.d.ts

@@ -12,6 +12,7 @@ export * from "./DateField/DateField";
 export * from "./DateInput/DateInput";
 export * from "./DayPicker";
 export * from "./Drawer/Drawer";
+export * from "./EmailField/EmailField";
 export * from "./EmailInput";
 export * from "./ExternalLink/ExternalLink";
 export * from "./FormGroup/FormGroup";