@trackunit/react-components 0.1.51 → 0.1.53

package/index.js

@@ -298,12 +298,12 @@ const ActionButton = ({ type, value, dataTestId, iconSize }) => {
     const getIconName = () => {
         switch (type) {
             case "PHONE_NUMBER":
-                return "PhoneOutgoingIcon";
+                return "PhoneArrowUpRightIcon";
             case "WEB_ADDRESS":
-                return "ExternalLinkIcon";
+                return "ArrowTopRightOnSquareIcon";
             case "EMAIL":
             default:
-                return "MailIcon";
+                return "EnvelopeIcon";
         }
     };
     const ButtonAction = () => {
@@ -416,7 +416,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     const getIconFromColor = () => {
         switch (color) {
             case "danger":
-                return jsx(Icon, { name: "ExclamationIcon", color: "danger" });
+                return jsx(Icon, { name: "ExclamationTriangleIcon", color: "danger" });
             case "warning":
                 return jsx(Icon, { name: "ExclamationCircleIcon", color: "warning" });
             case "success":
@@ -441,7 +441,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
         }
     }, [ref, autoScroll]);
-    return (jsxs(Container$8, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxs(ContentDetails, { children: [jsx(ContentBody, { children: body }), onClose && !inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
+    return (jsxs(Container$8, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxs(ContentDetails, { children: [jsx(ContentBody, { children: body }), onClose && !inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
 };
 const CloseButtonContainer = tw.div `
   ${p => (p.$inline ? tws `tu-alert__close-button-container--inline` : tws `tu-alert__close-button-container`)}
@@ -705,7 +705,7 @@ const StyledHeading = tw.div `
  * @returns {JSX.Element} CardHeader component
  */
 const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
-    return (jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxs(Container$6, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XIcon", size: "small" }), className: "!h-min" }))] }) })));
+    return (jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxs(Container$6, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] }) })));
 };
 const Root$8 = twx(DensityContainer) `
   tu-card__header-density-container 
@@ -1477,7 +1477,7 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     color: "tertiary",
 }, children, }) => {
     const [actionMenuIsOpen, setActionMenuIsOpen] = useState(false);
-    const dotsName = dotsDirection === "horizontal" ? "DotsHorizontalIcon" : "DotsVerticalIcon";
+    const dotsName = dotsDirection === "horizontal" ? "EllipsisHorizontalIcon" : "EllipsisVerticalIcon";
     const actionMenuRef = useRef(null);
     useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
@@ -1970,9 +1970,9 @@ const TextInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref
  */
 const Search = (_a) => {
     var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", ref } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete", "ref"]);
-    return (jsx(StyledTextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsx(Icon, { name: "SearchIcon", size: "medium" }), suffix: onClear ? (jsx("button", Object.assign({ "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    return (jsx(StyledTextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlassIcon", size: "medium" }), suffix: onClear ? (jsx("button", Object.assign({ "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
-            } }, { children: jsx(Icon, { name: "XIcon", size: "small" }) }))) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
+            } }, { children: jsx(Icon, { name: "XMarkIcon", size: "small" }) }))) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
 };
 const StyledTextInput = twx(TextInput) `
   tu-search
@@ -2258,7 +2258,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 if (disabled) {
                     return null;
                 }
-                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx(XIcon, Object.assign({ onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XIcon` }, { children: jsx(Icon, { name: "XCircleIcon", size: "medium" }) })) })));
+                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx(XMarkIcon, Object.assign({ onClick: props.clearValue, "data-testid": dataTestId && `${dataTestId}-XMarkIcon` }, { children: jsx(Icon, { name: "XCircleIcon", size: "medium" }) })) })));
             }, Control: props => {
                 return (jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__control--disabled` : "" })));
             }, SingleValue: props => {
@@ -2283,7 +2283,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
 const StyledIcon = tw.div `
 tu-select--icon
 `;
-const XIcon = tw.div `
+const XMarkIcon = tw.div `
 tu-select--icon
 tu-select__x-icon
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -8,7 +8,7 @@
     "@trackunit/tailwind-styled-components": "0.0.53",
     "react": "18.2.0",
     "@trackunit/ui-design-tokens": "0.0.58",
-    "@trackunit/react-core-contexts-test": "0.1.26",
+    "@trackunit/react-core-contexts-test": "0.1.27",
     "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.58",
+    "@trackunit/ui-icons": "0.0.59",
     "react-browser-hooks": "2.2.4",
     "react-useportal": "1.0.17",
     "react-router-dom": "6.4.5",