@trackunit/react-components 0.0.172 → 0.0.173

package/components/PageHeader/PageHeader.d.ts

@@ -9,6 +9,10 @@ export interface PageHeaderProps extends CommonProps {
      * The description to be displayed inside the tip.
      */
     description?: string | React.ReactNode;
+    /**
+     * The link to which user is redirected to if user clicks on the tip.
+     */
+    link?: string;
     /**
      * Additional actions to be rendered along with the header.
      */
@@ -40,4 +44,4 @@ export interface PageHeaderProps extends CommonProps {
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, title, tag, backTo, children, }: PageHeaderProps) => JSX.Element;
+export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }: PageHeaderProps) => JSX.Element;

package/components/Tip/Tip.d.ts

@@ -22,7 +22,7 @@ export interface TipProps extends CommonProps {
     /**
      * The href attribute if the tip is rendered as an anchor tag.
      */
-    link?: string | React.ReactNode;
+    link?: string;
 }
 /**
  * The Tip component is used to show helpful tips or contextual information to the users.

package/index.css

@@ -20,6 +20,7 @@
     px-2.5
     h-min
     w-min
+    max-h-8
     focus:ring
     focus:ring-offset-1
     focus:outline-none
@@ -46,15 +47,20 @@
   }
 
   &--full-width {
-    @apply w-full flex-auto;
+    @apply w-full
+      flex-auto;
   }
 
   &--small {
-    @apply py-1 px-2;
+    @apply py-1
+      px-2
+      max-h-7;
   }
 
   &--large {
-    @apply py-2 px-4;
+    @apply py-2
+      px-4
+      max-h-9;
   }
 
   &--primary {

package/index.js

@@ -2229,7 +2229,7 @@ const Tip = ({
   return jsx(TipContainer, Object.assign({
     "data-testid": dataTestId,
     "$as": renderAs,
-    href: ifAnchorTag() ? link === null || link === void 0 ? void 0 : link.toString() : undefined,
+    href: ifAnchorTag() ? link : undefined,
     target: ifAnchorTag() ? "_blank" : undefined,
     className: className
   }, {
@@ -3163,6 +3163,7 @@ const PageHeader = ({
   action,
   showLoading,
   description,
+  link,
   title,
   tag,
   backTo,
@@ -3189,14 +3190,14 @@ const PageHeader = ({
         }, {
           children: title
         })), description && jsx(StyledTip, Object.assign({
-          link: description,
+          link: isValidHttpUrl(link) ? link : undefined,
           dataTestId: `${dataTestId}-tip`,
           iconProps: {
             name: "QuestionMarkCircleIcon"
           },
-          renderAs: isValidHttpUrl(description) ? "a" : "span"
+          renderAs: link ? "a" : "span"
         }, {
-          children: isValidHttpUrl(description) ? "Learn more" : description
+          children: description
         }))]
       }), tag && jsx(Tag, Object.assign({
         dataTestId: dataTestId
@@ -3212,21 +3213,21 @@ const PageHeader = ({
   }));
 };
 
-const isValidHttpUrl = description => {
-  if (!description || typeof description !== "string") {
+function isValidHttpUrl(link) {
+  if (!link) {
     return false;
   }
 
   let url;
 
   try {
-    url = new URL(description);
+    url = new URL(link);
   } catch (_) {
     return false;
   }
 
   return url.protocol === "http:" || url.protocol === "https:";
-};
+}
 
 const StyledPageHeader = tw.div`
   tu-page-header
@@ -3244,7 +3245,7 @@ const ChildContainer = tw.div`
   tu-page-header__child-container
 `;
 const StyledTip = twx(Tip)`
-  ${p => isValidHttpUrl(p.link) ? tws`tu-page-header__tip` : null}
+  ${p => p.link ? tws`tu-page-header__tip` : null}
 `;
 
 function useConfirmExit(confirmExit, when = true) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.172",
+  "version": "0.0.173",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -15,8 +15,8 @@
     "date-fns": "^2.29.3",
     "react-day-picker": "^8.3.0",
     "@trackunit/ui-icons": "0.0.48",
-    "react-useportal": "1.0.16",
-    "@react-spring/web": "9.5.2",
+    "react-useportal": "1.0.17",
+    "@react-spring/web": "9.5.4",
     "react-router-dom": "6.4.1",
     "@popperjs/core": "^2.11.6",
     "react-helmet": "^6.1.0",