@trackunit/react-components 0.1.33 → 0.1.36

package/index.js

@@ -1258,6 +1258,25 @@ const Overlay = tw.div `
   ${({ $open }) => $open && tws `tu-drawer__overlay--open`}
 `;
 
+/**
+ * A Email Input component is used for input of the type Email.
+ *
+ * It has an ActionButton which sends an email to the specified address using "mailto:" link.
+ *
+ * Extends props of BaseInput.
+ *
+ * A reference to the input element is provided as the `ref` prop.
+ * 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"]);
+    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 })) })));
+});
+
 /**
  *  The external link component is used to link to an external page outside the Trackunit Manager.
  *
@@ -1781,6 +1800,25 @@ const PageInput = tw.input `
  [-moz-appearance:textfield]
 `;
 
+/**
+ * A Phone Input component is used for input of the type tel.
+ *
+ * It has an ActionButton which sends an phone call to the specified number using "tel:" link.
+ *
+ * Extends props of BaseInput.
+ *
+ * A reference to the input element is provided as the `ref` prop.
+ * For specific input types make sure to use the corresponding input component.
+ */
+const PhoneInput = React.forwardRef((_a, ref) => {
+    var { dataTestId, fieldSize = "medium", disableAction = false } = _a, rest = __rest(_a, ["dataTestId", "fieldSize", "disableAction"]);
+    const [phoneNumber, setPhoneNumber] = React.useState("");
+    const callNumber = () => {
+        return window.open(`tel:${phoneNumber}`);
+    };
+    return (jsx(BaseInput, Object.assign({ ref: ref, dataTestId: dataTestId, fieldSize: fieldSize, type: "tel", onChange: e => setPhoneNumber(e.target.value), actions: !disableAction && (jsx(ActionButton, { value: phoneNumber, type: "PHONE_NUMBER", onClick: callNumber, dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest)));
+});
+
 /**
  * Create a PieChart with legends based on our current Chart component
  *
@@ -3134,4 +3172,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, 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, 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, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.33",
+  "version": "0.1.36",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -8,7 +8,7 @@
     "@trackunit/tailwind-styled-components": "0.0.51",
     "react": "18.2.0",
     "@trackunit/ui-design-tokens": "0.0.53",
-    "@trackunit/react-core-contexts-test": "0.1.21",
+    "@trackunit/react-core-contexts-test": "0.1.22",
     "echarts": "5.4.0",
     "echarts-for-react": "3.0.2",
     "uuid": "8.3.2",

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

@@ -0,0 +1 @@
+export * from "./EmailInput";

package/src/components/PhoneInput/index.d.ts

@@ -0,0 +1 @@
+export * from "./PhoneInput";

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 "./EmailInput";
 export * from "./ExternalLink/ExternalLink";
 export * from "./FormGroup/FormGroup";
 export * from "./Heading";
@@ -25,6 +26,7 @@ export * from "./NumberField/NumberField";
 export * from "./NumberInput/NumberInput";
 export * from "./PageHeader";
 export * from "./Pagination/Pagination";
+export * from "./PhoneInput";
 export * from "./PieChart";
 export * from "./Popover";
 export * from "./Popover/Popover";