@trackunit/react-components 1.0.13 → 1.1.0

package/src/components/Card/CardFooter.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { ReactNode } from "react";
 import { CommonProps, Density } from "../../common";
 export interface CardFooterProps extends CommonProps {
     /**
@@ -8,7 +8,7 @@ export interface CardFooterProps extends CommonProps {
     /**
      * Element to render in the footer
      */
-    children?: React.ReactNode | null;
+    children?: ReactNode | null;
     /**
      * Wether or not a seperator line should be rendered
      */

package/src/components/Card/CardHeader.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { ReactNode } from "react";
 import { CommonProps, Density } from "../../common";
 import { HeadingVariant } from "../Heading/Heading";
 export interface CardHeaderProps extends CommonProps {
@@ -14,11 +14,11 @@ export interface CardHeaderProps extends CommonProps {
      */
     headingVariant?: HeadingVariant;
     /** Adds an extra heading below the main heading. */
-    subHeading?: string | React.ReactNode;
+    subHeading?: string | ReactNode;
     /**
      * Items to render next to the heading
      */
-    accessories?: React.ReactNode;
+    accessories?: ReactNode;
     /**
      * Sets gap, padding and margin.
      */
@@ -32,11 +32,11 @@ export interface CardHeaderProps extends CommonProps {
     /**
      * Children to render in the header
      */
-    children?: React.ReactNode | null;
+    children?: ReactNode | null;
     /**
      * For buttons or other actions to render in the header
      */
-    actions?: React.ReactNode | null;
+    actions?: ReactNode | null;
 }
 /**
  * Header for Cards and Modals.

package/src/components/Collapse/Collapse.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { MouseEvent, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface CollapseProps extends CommonProps {
     id: string;
@@ -13,19 +13,19 @@ export interface CollapseProps extends CommonProps {
     /**
      * onToggle event.
      */
-    onToggle?: (event: React.MouseEvent<HTMLDivElement>, expanded: boolean) => void;
+    onToggle?: (event: MouseEvent<HTMLDivElement>, expanded: boolean) => void;
     /**
      * Child nodes.
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Label to be displayed.
      */
-    label: React.ReactNode;
+    label: ReactNode;
     /**
      * An addon to add to the header. This can be used for a status indicator or similar.
      */
-    headerAddon?: React.ReactNode;
+    headerAddon?: ReactNode;
     /**
      * Without animation children wont be rendered until expanded, which improves performance
      *  for high volume data

package/src/components/Heading/Heading.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
+import { ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export type HeadingVariant = "primary" | "secondary" | "tertiary" | "subtitle";
 export interface HeadingProps extends CommonProps {
     /**
      * Child Nodes.
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Size of heading.
      */

package/src/components/Page/Page.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
-import * as React from "react";
+import { ReactNode } from "react";
 import { CommonProps } from "../../common";
 import { cvaPage } from "./Page.variants";
 /**
@@ -11,7 +11,7 @@ export type Layout = VariantProps<typeof cvaPage>["layout"];
  */
 export interface PageProps extends CommonProps {
     layout: Layout;
-    children?: React.ReactNode;
+    children?: ReactNode;
     dataTestId?: string;
 }
 /**

package/src/components/Page/PageContent.d.ts

@@ -1,18 +1,18 @@
-import * as React from "react";
+import { ReactNode } from "react";
 import { CommonProps } from "../../common";
 /**
  * The props for the page content component.
  */
 interface PageContentProps extends CommonProps {
     layout: "content" | "h-min-fr" | "v-min-fr";
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 /**
  * Renders the content of a page.
  * Applies padding to content. To be used within a <Page/>
  *
  * @param {PageContentProps} props - The component props.
- * @returns {React.ReactNode} - The rendered component.
+ * @returns {ReactNode} - The rendered component.
  */
 export declare const PageContent: ({ className, children, dataTestId, layout }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import { IconName } from "@trackunit/ui-icons";
-import React, { ReactElement, ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { TabListProps } from "../Tabs/TabList";
 import { TagColors } from "../Tag";
@@ -8,11 +8,11 @@ export interface PageHeaderProps extends CommonProps {
     /**
      * Text to be displayed in the header.
      */
-    title: string | React.ReactNode;
+    title: string | ReactNode;
     /**
      * The description to be displayed inside the tip.
      */
-    description?: string | React.ReactNode;
+    description?: string | ReactNode;
     /**
      * The link to which user is redirected to if user clicks on the tip.
      */
@@ -24,7 +24,7 @@ export interface PageHeaderProps extends CommonProps {
     /**
      * Additional actions to be rendered along with the header.
      */
-    action?: React.ReactNode;
+    action?: ReactNode;
     /**
      * Enables the actions to be pushed to the right in the available space - the default is left side.
      */
@@ -46,7 +46,7 @@ export interface PageHeaderProps extends CommonProps {
     /**
      * Child nodes to be displayed inside the page header.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * The link to the previous page which will be rendered inside an IconButton component to the left of the heading.
      */

package/src/components/Popover/PopoverContent.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
+import { HTMLProps, ReactNode } from "react";
 import { CommonProps } from "../../common";
-export type PopoverContentChildren = ((close: () => void) => React.ReactNode) | React.ReactNode;
-export interface PopoverContentProps extends Omit<React.HTMLProps<HTMLDivElement>, "children">, CommonProps {
+export type PopoverContentChildren = ((close: () => void) => ReactNode) | ReactNode;
+export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "children">, CommonProps {
     children: PopoverContentChildren;
     /**
      * Custom dom id to use for portalling the popover content
      */
     portalId?: string;
 }
-export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/src/components/Popover/PopoverTitle.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import { ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface PopoverTitleProps extends CommonProps {
-    action?: React.ReactNode;
+    action?: ReactNode;
     /**
      * Whether there should be a divider between the title and the content.
      */
@@ -9,7 +9,7 @@ export interface PopoverTitleProps extends CommonProps {
     /**
      * The child nodes.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 /**
  * The PopoverTitle component.

package/src/components/Sidebar/Sidebar.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { ComponentProps, ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { MenuList, MoreMenu } from "../Menu";
 export interface SidebarItemProps extends CommonProps {
@@ -28,7 +28,7 @@ export interface SidebarProps extends CommonProps {
      *
      *  **For the overflow functionality to take effect use _"min-w-[*]"_ or _"flex-shrink-0"_ on the elements.**
      */
-    children: React.ReactElement<SidebarItemProps>[] | React.ReactElement<SidebarItemProps>;
+    children: ReactElement<SidebarItemProps>[] | ReactElement<SidebarItemProps>;
     /**
      * The childContainerClassName is applied to the element that contains the children.
      * This can be used to change gap or similar styling.
@@ -37,11 +37,11 @@ export interface SidebarProps extends CommonProps {
     /**
      * Pass custom props to the MoreMenu component used to render overflow items
      */
-    moreMenuProps?: Omit<React.ComponentProps<typeof MoreMenu>, "children">;
+    moreMenuProps?: Omit<ComponentProps<typeof MoreMenu>, "children">;
     /**
      * Pass custom props to the MenuList component used to render overflow items
      */
-    menuListProps?: Omit<React.ComponentProps<typeof MenuList>, "children">;
+    menuListProps?: Omit<ComponentProps<typeof MenuList>, "children">;
 }
 /**
  * The sidebar components is used to render a responsive sidebar.

package/src/components/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
-import * as React from "react";
+import { MouseEventHandler, ReactNode } from "react";
 import { CommonProps, Size } from "../../common";
 export type TagSize = Extract<Size, "small" | "medium">;
 export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors;
@@ -14,12 +14,12 @@ export interface TagProps extends CommonProps {
      * If not passed then x icon won't be visible.
      *
      */
-    onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onClose?: MouseEventHandler<HTMLDivElement>;
     /**
      * Child nodes of the tag.
      *
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Size of the tag.
      */
@@ -41,4 +41,4 @@ export interface TagProps extends CommonProps {
  * @param {TagProps} props - The props for the tag component
  * @returns {JSX.Element} tag component
  */
-export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;
+export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLElement>>;

package/src/components/Text/Text.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { ReactNode } from "react";
 import { CommonProps, Size } from "../../common";
 export type TextType = "p" | "span" | "div";
 export type TextAlign = "left" | "center" | "right";
@@ -7,7 +7,7 @@ export interface TextProps extends CommonProps {
     /**
      * Child nodes.
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Type of element. Element can be of types "p", "span", or "div".
      */
@@ -52,6 +52,10 @@ export interface TextProps extends CommonProps {
      * Ihe id of the html element
      */
     id?: string;
+    /**
+     * The title of the html element
+     */
+    title?: string;
 }
 /**
  *  The Text component is used to apply Trackunit default typography styles to text.
@@ -63,4 +67,4 @@ export interface TextProps extends CommonProps {
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,5 +1,5 @@
 import { Placement } from "@floating-ui/react";
-import * as React from "react";
+import { ReactNode } from "react";
 import { CommonProps } from "../../common";
 import { IconProps } from "../Icon/Icon";
 export type TooltipPlacement = Placement | "auto";
@@ -7,7 +7,7 @@ export interface TooltipProps extends CommonProps {
     /**
      * The text to be displayed in the tooltip.
      */
-    label: string | React.ReactNode;
+    label: string | ReactNode;
     /**
      * Where the tooltip should preferentially be placed.
      */
@@ -15,7 +15,7 @@ export interface TooltipProps extends CommonProps {
     /**
      * Child nodes
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Whether the tooltip is disabled or not.
      */

package/src/components/Widget/WidgetBody.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { ReactNode } from "react";
 import { CommonProps, Density } from "../../common";
 export interface WidgetBodyProps extends CommonProps {
     /**
@@ -12,7 +12,7 @@ export interface WidgetBodyProps extends CommonProps {
     /**
      * Child elements to render in the body
      */
-    children: React.ReactNode | null;
+    children: ReactNode | null;
 }
 /**
  * The WidgetBody component should be used to inform the user of important information.

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

@@ -1,11 +1,11 @@
-import * as React from "react";
+import { MouseEvent, ReactNode } from "react";
 import { ButtonCommonProps, ButtonType } from "../shared/ButtonProps";
 export interface ButtonProps extends ButtonCommonProps {
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
     /**
      * Child nodes. Can be used to pass in text to be displayed on the button.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Whether button is fullWidth or not.
      */
@@ -13,11 +13,11 @@ export interface ButtonProps extends ButtonCommonProps {
     /**
      * The button prefix.
      */
-    prefix?: React.ReactNode;
+    prefix?: ReactNode;
     /**
      * The button suffix.
      */
-    suffix?: React.ReactNode;
+    suffix?: ReactNode;
     /**
      * The type of the button. Values can be "submit" or "button".
      */
@@ -47,4 +47,4 @@ export interface ButtonProps extends ButtonCommonProps {
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} Button component
  */
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/src/components/buttons/IconButton/IconButton.d.ts

@@ -1,17 +1,17 @@
-import * as React from "react";
+import { ComponentType, ReactNode } from "react";
 import { Size } from "../../../common";
 import { ButtonCommonProps } from "../shared/ButtonProps";
 export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The icon to display.
      */
-    icon: React.ReactNode;
+    icon: ReactNode;
     /**
      * The element type the button will be rendered as.
      *
      * @memberof IconButtonProps
      */
-    renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    renderAs?: keyof JSX.IntrinsicElements | ComponentType<any>;
     /**
      * The size of the button. Defaults to "medium".
      */
@@ -20,4 +20,4 @@ export interface IconButtonProps extends ButtonCommonProps {
 /**
  * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. The Icon Button is a version of the standard Button component without the text label.
  */
-export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/src/components/buttons/StarButton/StarButton.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import { MouseEvent } from "react";
 interface StarButtonProps {
     starred: boolean;
-    onClick: (e: React.MouseEvent) => void;
+    onClick: (e: MouseEvent) => void;
 }
 /**
  * The StarButton component is used for favorite actions or similar.

package/src/test-utils/test-utils.d.ts

@@ -1,5 +1,5 @@
 import { RenderOptions, RenderResult } from "@testing-library/react";
-import * as React from "react";
+import { ReactElement } from "react";
 /**
  * Enhanced render with providers
  *
@@ -7,6 +7,6 @@ import * as React from "react";
  * @param options - The options for the render
  * @returns {RenderResult} The rendered UI
  */
-declare const customRender: (ui: React.ReactElement, options?: Omit<RenderOptions, "wrapper">) => RenderResult;
+declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, "wrapper">) => RenderResult;
 export * from "@testing-library/react";
 export { customRender as render };