@trackunit/react-components 0.1.35 → 0.1.39

package/index.css

@@ -258,7 +258,8 @@
 
   &__wrapper {
     @apply flex  
-      gap-2;
+      gap-2
+      items-center;
   }
 
   &--checked {
@@ -309,7 +310,6 @@
     @apply bg-white;
   }
 
-
   &__label-container {
     @apply gap-y-1
       grid;

package/index.js

@@ -7,7 +7,7 @@ import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
 import { useMeasure, useCopyToClipboard } from 'react-use';
 import { format, formatDistance } from 'date-fns';
-import { useFloating, offset, shift, flip, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useFloating, offset, flip, shift, size, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
@@ -955,7 +955,20 @@ const Popover = ({ children, render, placement, activation = { click: true, hove
     const { x, y, reference, floating, strategy, context } = useFloating({
         open,
         onOpenChange: setOpen,
-        middleware: [offset(8), shift(), flip({ crossAxis: true, fallbackPlacements: ["top", "bottom", "left", "right"] })],
+        middleware: [
+            offset(8),
+            flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
+            shift(),
+            size({
+                padding: 8,
+                apply({ availableWidth, availableHeight, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxWidth: `${availableWidth}px`,
+                        maxHeight: `${availableHeight}px`,
+                    });
+                },
+            }),
+        ],
         placement,
         whileElementsMounted: autoUpdate,
     });
@@ -972,6 +985,7 @@ const Popover = ({ children, render, placement, activation = { click: true, hove
                             position: strategy,
                             top: y !== null && y !== void 0 ? y : 0,
                             left: x !== null && x !== void 0 ? x : 0,
+                            display: "flex",
                         } }, getFloatingProps(), { children: render({
                             close: () => {
                                 setOpen(false);
@@ -1258,6 +1272,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 +1814,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 +3186,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.35",
+  "version": "0.1.39",
   "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.22",
+    "@trackunit/react-core-contexts-test": "0.1.23",
     "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";