@trackunit/react-components 0.1.237 → 0.1.239

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.237",
+  "version": "0.1.239",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
+import { CSSProperties } from "react";
 import { CommonProps, Size } from "../../common/CommonProps";
 export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
 export declare const iconPalette: {
@@ -205,7 +205,11 @@ export declare const iconPalette: {
         readonly 50: "239 246 255";
         readonly 100: "219 234 254";
         readonly 200: "191 219 254";
-        readonly 300: "147 197 253";
+        readonly 300: "147 197 253"; /**
+         * Select if the icon should be rendered as solid or outline.
+         * Default value depends on the Size prop, mini == solid, medium == solid, large == outline.
+         * Trackunit icons might not support both outline and Solid.
+         */
         readonly 400: "96 165 250";
         readonly 500: "59 130 246";
         readonly 600: "37 99 235";
@@ -305,7 +309,7 @@ export type IconProps = DiscriminatedIconProps & CommonProps & {
      *
      * @memberof IconProps
      */
-    style?: Record<string, string>;
+    style?: CSSProperties;
 };
 /**
  * - The Icon component is used to display an Icon.
@@ -315,5 +319,5 @@ export type IconProps = DiscriminatedIconProps & CommonProps & {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, }: IconProps) => JSX.Element | null;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, }: IconProps) => JSX.Element;
 export {};

package/src/components/PageHeader/PageHeader.d.ts

@@ -15,6 +15,10 @@ export interface PageHeaderProps extends CommonProps {
      * The link to which user is redirected to if user clicks on the tip.
      */
     link?: string;
+    /**
+     * Display text of the specified link
+     */
+    linkText?: string;
     /**
      * Additional actions to be rendered along with the header.
      */
@@ -51,4 +55,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, link, title, tag, backTo, tagColor, children, tabsList, }: PageHeaderProps) => JSX.Element;
+export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText, }: PageHeaderProps) => JSX.Element;

package/src/components/PageHeader/PageHeader.variants.d.ts

@@ -6,3 +6,5 @@ export declare const cvaPageHeaderHeading: (props?: import("class-variance-autho
 export declare const cvaPageHeaderHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaPageHeaderHeadingAccessoriesContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaPageHeaderChildContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPageHeaderDescriptionAndLinkContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaPageHeaderLink: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/SkeletonLines/SkeletonLines.d.ts

@@ -20,7 +20,5 @@ export interface SkeletonLinesProps extends CommonProps {
 }
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
- 
  */
 export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: SkeletonLinesProps) => JSX.Element>;
-export default SkeletonLines;

package/src/components/Tooltip/Tooltip.d.ts

@@ -1,7 +1,10 @@
+import { Placement } from "@floating-ui/react";
 import * as React from "react";
 import { CommonProps } from "../../common";
-import { PopoverPlacement } from "../Popover";
+import { IconProps } from "../Icon/Icon";
 import { TextType } from "../Text";
+export type ToolTipVariant = "icon" | "none";
+export type TooltipPlacement = Placement | "auto";
 export interface TooltipProps extends CommonProps {
     /**
      * The text to be displayed in the tooltip.
@@ -10,7 +13,7 @@ export interface TooltipProps extends CommonProps {
     /**
      * Where the tooltip should preferentially be placed.
      */
-    placement?: PopoverPlacement;
+    placement?: TooltipPlacement;
     /**
      * Child nodes
      */
@@ -27,11 +30,21 @@ export interface TooltipProps extends CommonProps {
      * Type of content.
      */
     contentTextType?: TextType;
+    /**
+     * The props for setting the icon on this tip.
+     */
+    iconProps?: Omit<IconProps, "type">;
 }
 /**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
+ * Tooltips display additional information upon hover. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
+ *
+ * Tooltips should be used sparingly and contain succinct, supplementary information, and they should contain read-only text. **❗️Do not include interactive elements in tooltips ** (no links, buttons, etc). Interactive elements in tooltips are inaccessible since tooltips do not receive focus.
+ *
+ * **Do use** tooltips to expose names of icon buttons that lack visual labels, when more information is useful in helping a user understand the context, when an element needs additional explanation, or use when defining a term or inline item.
+ *
+ * **Do not use** tooltips to include information that is necessary for the user to complete their task. Use helper text that is always visible and accessible for vital information.
  
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {JSX.Element} Tooltip component
  */
-export declare const Tooltip: ({ children, dataTestId, disabled, className, ...rest }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, dataTestId, disabled, className, label, placement, mode, contentTextType, iconProps, }: TooltipProps) => JSX.Element;

package/src/components/Tooltip/Tooltip.variants.d.ts

@@ -1,6 +1,14 @@
 export declare const cvaTooltipFlexContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipIcon: (props?: ({
+    color?: "light" | "dark" | null | undefined;
+    defaultVariants?: "color" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaTooltipPopover: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTooltipContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTooltipContent: (props?: ({
+export declare const cvaTooltipPopoverTail: (props?: ({
+    placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null | undefined;
+    mode?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTooltipPopoverContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipPopoverContent: (props?: ({
     color?: "light" | "dark" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/buttons/shared/Button.variants.d.ts

@@ -7,7 +7,3 @@ export declare const cvaButton: (props?: ({
     disabled?: boolean | null | undefined;
     variant?: "transparent" | "filled" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaButtonSpinner: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaIconButtonContainer: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/index.d.ts

@@ -30,7 +30,6 @@ export * from "./Tabs/Tabs";
 export * from "./Tag";
 export * from "./Text";
 export * from "./Timeline/Timeline";
-export * from "./Tip";
 export * from "./Tooltip";
 export * from "./ValueBar";
 export * from "./Widget";

package/src/components/Tip/Tip.d.ts

@@ -1,27 +0,0 @@
-import { MakePropertyOptional, MappedOmit } from "@trackunit/shared-utils";
-import * as React from "react";
-import { CommonProps } from "../../common";
-import { IconProps } from "../Icon/Icon";
-import { TooltipProps } from "../Tooltip";
-export interface TipProps extends CommonProps, Pick<TooltipProps, "placement" | "mode"> {
-    /**
-     * Child nodes to render inside the tip.
-     */
-    children: React.ReactNode | string;
-    /**
-     * The props for setting the icon on this tip.
-     */
-    iconProps?: MakePropertyOptional<MappedOmit<IconProps, "size" | "type">, "name">;
-    /**
-     * Shows an icon with link as the href attribute inside the tip.
-     */
-    link?: string;
-}
-/**
- * The Tip component is used to show helpful tips or contextual information to the users.
- * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
- 
- * @param {TipProps} props - The props for the Tip component
- * @returns {JSX.Element} Tip component
- */
-export declare const Tip: ({ children, iconProps, dataTestId, className, placement, mode, link, }: TipProps) => JSX.Element;

package/src/components/Tip/Tip.variants.d.ts

@@ -1,4 +0,0 @@
-export declare const cvaTip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTipContent: (props?: ({
-    color?: "light" | "dark" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

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