@trackunit/react-components 1.17.17 → 1.17.21

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

@@ -1,6 +1,7 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../../common/CommonProps";
-interface PageHeaderTitleProps extends CommonProps {
+import { Refable } from "../../../common/Refable";
+interface PageHeaderTitleProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The title of the page header
      */
@@ -13,7 +14,8 @@ interface PageHeaderTitleProps extends CommonProps {
  * @param {string} props.title - The title of the page header
  * @param {string} props.className - The class name of the page header title
  * @param {string} [props."data-testid"] - The data test id of the page header title
+ * @param [props.ref] - Ref forwarded to the root element
  * @returns {ReactElement} PageHeaderTitle component
  */
-export declare const PageHeaderTitle: ({ title, "data-testid": dataTestId, className, }: PageHeaderTitleProps) => ReactElement;
+export declare const PageHeaderTitle: ({ title, "data-testid": dataTestId, className, ref: forwardedRef, }: PageHeaderTitleProps) => ReactElement;
 export {};

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

@@ -1,6 +1,7 @@
 import { IconName } from "@trackunit/ui-icons";
 import { MouseEvent, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { ButtonVariant } from "../buttons/shared/ButtonProps";
 import { TabListProps } from "../Tabs/TabList";
 import { TagColors } from "../Tag/Tag";
@@ -28,7 +29,7 @@ export type PageHeaderSecondaryActionType = PageHeaderActionType & {
 export type PageHeaderPrimaryActionType = PageHeaderActionType & {
     variant: Extract<ButtonVariant, "primary" | "primary-danger" | "secondary">;
 };
-interface BasePageHeaderProps extends CommonProps {
+interface BasePageHeaderProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * Main title of the page.
      */

package/src/components/Pagination/Pagination.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
-export interface PaginationProps {
+import { Refable } from "../../common/Refable";
+export interface PaginationProps extends Refable<HTMLDivElement> {
     /**
      * A go to previous page handler
      */
@@ -59,4 +60,4 @@ export interface PaginationProps {
  * @param {PaginationProps} props - The props for the Pagination component
  * @returns {ReactElement} Pagination component
  */
-export declare const Pagination: ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, "data-testid": dataTestId, getTranslatedCount, onPageChange, cursorBase, }: PaginationProps) => ReactElement;
+export declare const Pagination: ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, "data-testid": dataTestId, getTranslatedCount, onPageChange, cursorBase, ref, }: PaginationProps) => ReactElement;

package/src/components/Polygon/Polygon.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 type Point = [number, number];
-export interface PolygonProps extends CommonProps {
+export interface PolygonProps extends CommonProps, Refable<SVGSVGElement> {
     points: Array<Point>;
     size: number;
     color?: "white" | "black";
@@ -13,5 +14,5 @@ export interface PolygonProps extends CommonProps {
  * @param { PolygonProps} props - The props for the  Polygon component
  * @returns {ReactElement}  Polygon component
  */
-export declare const Polygon: ({ points, size, color, opaque, className, "data-testid": dataTestId, }: PolygonProps) => ReactElement;
+export declare const Polygon: ({ points, size, color, opaque, className, "data-testid": dataTestId, ref, }: PolygonProps) => ReactElement;
 export {};

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

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export interface PopoverTitleProps extends CommonProps {
+import { Refable } from "../../common/Refable";
+export interface PopoverTitleProps extends CommonProps, Refable<HTMLDivElement> {
     action?: ReactNode;
     /**
      * Whether there should be a divider between the title and the content.
@@ -17,4 +18,4 @@ export interface PopoverTitleProps extends CommonProps {
  * @param {PopoverTitleProps} props - The props for the PopoverTitle component
  * @returns {ReactElement} PopoverTitle component
  */
-export declare const PopoverTitle: ({ children, action, divider, className, "data-testid": dataTestId, }: PopoverTitleProps) => ReactElement;
+export declare const PopoverTitle: ({ children, action, divider, className, "data-testid": dataTestId, ref, }: PopoverTitleProps) => ReactElement;

package/src/components/PreferenceCard/PreferenceCard.d.ts

@@ -3,6 +3,7 @@ import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { TagProps } from "../Tag/Tag";
 import { cvaPreferenceCard } from "./PreferenceCard.variants";
 /**
@@ -21,7 +22,7 @@ type ImageDetails = {
     alt: string;
     containerClassName?: string;
 };
-export interface PreferenceCardProps extends CommonProps, MappedOmit<VariantProps<typeof cvaPreferenceCard>, "className"> {
+export interface PreferenceCardProps extends CommonProps, Refable<HTMLDivElement>, MappedOmit<VariantProps<typeof cvaPreferenceCard>, "className"> {
     /**
      * The title of the preference card
      */
@@ -66,5 +67,5 @@ export interface PreferenceCardProps extends CommonProps, MappedOmit<VariantProp
  * with various states and visual treatments.
  * It is recommended to be primarily used as an input component, as it supports checkboxes, radio buttons and toggles.
  */
-export declare const PreferenceCard: ({ title, description, icon, input, titleTag, cardTag, disabled, className, "data-testid": dataTestId, children, }: PreferenceCardProps) => ReactNode;
+export declare const PreferenceCard: ({ title, description, icon, input, titleTag, cardTag, disabled, className, "data-testid": dataTestId, children, ref: forwardedRef, }: PreferenceCardProps) => ReactNode;
 export {};

package/src/components/PreferenceCard/PreferenceCardSkeleton.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from "react";
+import { Refable } from "../../common/Refable";
 /**
  * Default property values for PreferenceCardSkeleton component.
  */
@@ -8,7 +9,7 @@ export declare const DEFAULT_SKELETON_PREFERENCE_CARD_PROPS: {
     readonly hasCardTag: false;
     readonly hasInput: false;
 };
-export interface PreferenceCardSkeletonProps {
+export interface PreferenceCardSkeletonProps extends Refable<HTMLDivElement> {
     /** Whether to show an icon skeleton */
     hasIcon?: boolean;
     /** Whether to show a title tag skeleton (inline with title) */
@@ -22,4 +23,4 @@ export interface PreferenceCardSkeletonProps {
  * Skeleton loading indicator that mimics the PreferenceCard component structure.
  * Uses the same grid layout, spacing, and visual hierarchy as PreferenceCard.
  */
-export declare const PreferenceCardSkeleton: ({ hasIcon, hasTitleTag, hasCardTag, hasInput, }: PreferenceCardSkeletonProps) => ReactElement;
+export declare const PreferenceCardSkeleton: ({ hasIcon, hasTitleTag, hasCardTag, hasInput, ref, }: PreferenceCardSkeletonProps) => ReactElement;

package/src/components/SectionHeader/SectionHeader.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export interface SectionHeaderProps extends CommonProps {
+import { Refable } from "../../common/Refable";
+export interface SectionHeaderProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The title of the section.
      */
@@ -20,4 +21,4 @@ export interface SectionHeaderProps extends CommonProps {
  * @param {SectionHeaderProps} props - The props for the section header component
  * @returns {ReactElement} SectionHeader component
  */
-export declare const SectionHeader: ({ title, subtitle, "data-testid": dataTestId, addons, }: SectionHeaderProps) => ReactElement;
+export declare const SectionHeader: ({ title, subtitle, "data-testid": dataTestId, addons, ref, }: SectionHeaderProps) => ReactElement;

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

@@ -1,5 +1,6 @@
 import { ComponentProps, MouseEventHandler, ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { MenuList } from "../Menu/MenuList/MenuList";
 import { MoreMenu } from "../Menu/MoreMenu/MoreMenu";
 export interface SidebarItemProps extends CommonProps {
@@ -12,7 +13,7 @@ export interface SidebarItemProps extends CommonProps {
     onClick?: MouseEventHandler<HTMLElement>;
 }
 export type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-export interface SidebarProps extends CommonProps {
+export interface SidebarProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The breakpoint at which the menu will go from Horizontal to vertical stacked
      *
@@ -76,4 +77,4 @@ export interface SidebarProps extends CommonProps {
  * @param {SidebarProps} props - The props for the Sidebar component
  * @returns {ReactElement} Sidebar component
  */
-export declare const Sidebar: ({ childContainerClassName, children, breakpoint, className, "data-testid": dataTestId, moreMenuProps, menuListProps, overflowThreshold, }: SidebarProps) => ReactElement;
+export declare const Sidebar: ({ childContainerClassName, children, breakpoint, className, "data-testid": dataTestId, moreMenuProps, menuListProps, overflowThreshold, ref, }: SidebarProps) => ReactElement;

package/src/components/Skeleton/SkeletonBlock/SkeletonBlock.d.ts

@@ -1,8 +1,9 @@
 import { StringWithAutocompleteOptions } from "@trackunit/shared-utils";
 import { ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
+import { Refable } from "../../../common/Refable";
 import { CSSLength } from "../Skeleton.helpers";
-export type SkeletonBlockProps = CommonProps & {
+export type SkeletonBlockProps = CommonProps & Refable<HTMLDivElement> & {
     /**
      * The height of the skeleton.
      *

package/src/components/Skeleton/SkeletonLabel/SkeletonLabel.d.ts

@@ -1,8 +1,9 @@
 import { StringWithAutocompleteOptions } from "@trackunit/shared-utils";
 import { ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
+import { Refable } from "../../../common/Refable";
 import { CSSLength, TextSizeKey } from "../Skeleton.helpers";
-export type SkeletonLabelProps = CommonProps & {
+export type SkeletonLabelProps = CommonProps & Refable<HTMLDivElement> & {
     /**
      * The text size to match, using text size keys.
      *

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

@@ -1,5 +1,6 @@
 import { StringWithAutocompleteOptions } from "@trackunit/shared-utils";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { CSSLength, TextSizeKey } from "../Skeleton/Skeleton.helpers";
 /**
  * Preset configurations for common skeleton patterns.
@@ -50,7 +51,7 @@ export type SkeletonLineConfig = BaseSkeletonLineConfig & {
  *
  * Use this for displaying multiple identical skeleton lines.
  */
-export type UniformSkeletonLinesProps = CommonProps & BaseSkeletonLineConfig & {
+export type UniformSkeletonLinesProps = CommonProps & Refable<HTMLDivElement> & BaseSkeletonLineConfig & {
     /**
      * Visual variant: "uniform" (default)
      *
@@ -73,7 +74,7 @@ export type UniformSkeletonLinesProps = CommonProps & BaseSkeletonLineConfig & {
  *
  * Use this for displaying skeleton lines with per-line configuration (varying widths, textSize (height), etc.).
  */
-type CustomSkeletonLinesProps = CommonProps & {
+type CustomSkeletonLinesProps = CommonProps & Refable<HTMLDivElement> & {
     /**
      * Visual variant: "custom"
      *
@@ -92,7 +93,7 @@ type CustomSkeletonLinesProps = CommonProps & {
  *
  * Use this for common skeleton patterns with predefined configurations.
  */
-type PresetSkeletonLinesProps = CommonProps & {
+type PresetSkeletonLinesProps = CommonProps & Refable<HTMLDivElement> & {
     /**
      * Visual variant: "preset"
      *

package/src/components/Spacer/Spacer.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
-export interface SpacerProps extends CommonProps {
+export interface SpacerProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The minimum height of the spacer. Defaults to 1px.
      * Possible values are "normal"(8px), and "large" (32px).
@@ -29,4 +30,4 @@ export interface SpacerProps extends CommonProps {
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {ReactElement} Spacer component
  */
-export declare const Spacer: ({ size, border, "data-testid": dataTestId, className, }: SpacerProps) => ReactElement;
+export declare const Spacer: ({ size, border, "data-testid": dataTestId, className, ref, }: SpacerProps) => ReactElement;

package/src/components/Spinner/Spinner.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
 type Centering = "horizontally" | "vertically" | "centered";
-export interface SpinnerProps extends CommonProps {
+export interface SpinnerProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * Defines the size of the spinner.
      */
@@ -40,5 +41,5 @@ export interface SpinnerProps extends CommonProps {
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {ReactElement} Spinner component
  */
-export declare const Spinner: ({ mode, size, centering, className, containerClassName, "data-testid": dataTestId, label, }: SpinnerProps) => ReactElement;
+export declare const Spinner: ({ mode, size, centering, className, containerClassName, "data-testid": dataTestId, label, ref, }: SpinnerProps) => ReactElement;
 export {};

package/src/components/Tabs/Tab.d.ts

@@ -1,11 +1,12 @@
 import { TabsTriggerProps } from "@radix-ui/react-tabs";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
+import { Refable } from "../../common/Refable";
 export interface TabChildProps {
     children?: ReactNode;
     className?: string;
 }
-export interface TabProps extends TabsTriggerProps {
+export interface TabProps extends TabsTriggerProps, Refable<HTMLButtonElement> {
     /**
      * Specifies whether the tab should occupy the full width of its container.
      */
@@ -43,4 +44,4 @@ export interface TabProps extends TabsTriggerProps {
  * Wrapper for radix tab component.
  * We add a custom implementation of the asChild prop to make it easy to make the child element look like other tabs.
  */
-export declare const Tab: ({ value, isFullWidth, iconName, "data-testid": dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild, ...rest }: TabProps) => ReactElement;
+export declare const Tab: ({ value, isFullWidth, iconName, "data-testid": dataTestId, className, children, suffix, asChild, appendTabStylesToChildIfAsChild, ref, ...rest }: TabProps) => ReactElement;

package/src/components/Tabs/TabContent.d.ts

@@ -1,7 +1,8 @@
 import { TabsContentProps } from "@radix-ui/react-tabs";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
-export interface TabContentProps extends TabsContentProps {
+import { Refable } from "../../common/Refable";
+export interface TabContentProps extends TabsContentProps, Refable<HTMLDivElement> {
     className?: string;
     "data-testid"?: string;
     children?: ReactNode;
@@ -11,4 +12,4 @@ export interface TabContentProps extends TabsContentProps {
 /**
  * Wrapper for radix tab content component.
  */
-export declare const TabContent: ({ className, "data-testid": dataTestId, children, ...rest }: TabContentProps) => ReactElement;
+export declare const TabContent: ({ className, "data-testid": dataTestId, children, ref, ...rest }: TabContentProps) => ReactElement;

package/src/components/Tabs/TabList.d.ts

@@ -1,7 +1,8 @@
 import { TabsListProps } from "@radix-ui/react-tabs";
 import { ReactElement } from "react";
+import { Refable } from "../../common/Refable";
 import { TabContentProps } from "./TabContent";
-export interface TabListProps extends TabsListProps {
+export interface TabListProps extends TabsListProps, Refable<HTMLDivElement> {
     /**
      * The child elements to be displayed within the Tabs component.
      */
@@ -24,4 +25,4 @@ export interface TabListProps extends TabsListProps {
 /**
  * Wrapper for radix tab list component.
  */
-export declare const TabList: ({ className, "data-testid": dataTestId, children, autoScrollToActive, ...rest }: TabListProps) => ReactElement;
+export declare const TabList: ({ className, "data-testid": dataTestId, children, autoScrollToActive, ref, ...rest }: TabListProps) => ReactElement;

package/src/components/Tabs/Tabs.d.ts

@@ -1,6 +1,7 @@
 import { TabsProps as TabsRootProps } from "@radix-ui/react-tabs";
 import { ReactElement, ReactNode } from "react";
-export interface TabsProps extends TabsRootProps {
+import { Refable } from "../../common/Refable";
+export interface TabsProps extends TabsRootProps, Refable<HTMLDivElement> {
     /**
      * If set to true, forces the content of all tabs to render even if not selected.
      */
@@ -58,4 +59,4 @@ export interface TabsProps extends TabsRootProps {
  * );
  * ```
  */
-export declare const Tabs: ({ children, forceRender, className, "data-testid": dataTestId, fullWidth, ...rest }: TabsProps) => ReactElement;
+export declare const Tabs: ({ children, forceRender, className, "data-testid": dataTestId, fullWidth, ref, ...rest }: TabsProps) => ReactElement;

package/src/components/ToggleGroup/ToggleGroup.d.ts

@@ -3,6 +3,7 @@ import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
 import { Dispatch, MouseEventHandler, ReactElement, SetStateAction } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { TooltipPlacement } from "../Tooltip/Tooltip";
 import { cvaToggleGroup } from "./ToggleGroup.variants";
 export interface BasicToggleGroupListProps<TSelectedId extends string = string> extends CommonProps {
@@ -38,7 +39,7 @@ export interface BasicToggleGroupListProps<TSelectedId extends string = string>
         placement?: TooltipPlacement;
     };
 }
-export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps & MappedOmit<VariantProps<typeof cvaToggleGroup>, "className"> & {
+export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps & Refable<HTMLDivElement> & MappedOmit<VariantProps<typeof cvaToggleGroup>, "className"> & {
     list: ReadonlyArray<BasicToggleGroupListProps<TSelectedId>>;
     /**
      * Instead of onClick, we now use onChange to return the selected value
@@ -62,7 +63,7 @@ export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps
  * @param {ToggleGroupProps} props - The props for the ToggleGroup component
  * @returns {ReactElement} ToggleGroup component
  */
-export declare const ToggleGroup: <TSelectedId extends string = string>({ list, selected, setSelected, onChange, disabled, size, isIconOnly, className, "data-testid": dataTestId, }: ToggleGroupProps<TSelectedId>) => ReactElement;
+export declare const ToggleGroup: <TSelectedId extends string = string>({ list, selected, setSelected, onChange, disabled, size, isIconOnly, className, "data-testid": dataTestId, ref, }: ToggleGroupProps<TSelectedId>) => ReactElement;
 export interface ToggleItemProps extends CommonProps, MappedOmit<BasicToggleGroupListProps<string>, "id"> {
     title: string;
     text?: {

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

@@ -16,7 +16,7 @@ export interface TooltipProps extends CommonProps, Styleable {
     /**
      * Child nodes
      */
-    children?: ReactNode;
+    children?: ReactElement;
     /**
      * Whether the tooltip is disabled or not.
      */

package/src/components/ValueBar/ValueBar.d.ts

@@ -1,9 +1,10 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
 import { LevelColors } from "./ValueBarTypes";
 type ValueBarSize = Extract<Size, "small" | "large"> | "extraSmall";
-export interface ValueBarProps extends CommonProps {
+export interface ValueBarProps extends CommonProps, Refable<HTMLSpanElement> {
     /**
      * Value to display.
      */
@@ -49,5 +50,5 @@ export interface ValueBarProps extends CommonProps {
  * @param {ValueBarProps} props - The props for the ValueBar component
  * @returns {ReactElement} ValueBar component
  */
-export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, "data-testid": dataTestId, zeroScoreAllowed, }: ValueBarProps) => ReactElement;
+export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, "data-testid": dataTestId, zeroScoreAllowed, ref, }: ValueBarProps) => ReactElement;
 export {};

package/src/components/ZStack/ZStack.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export type ZStackProps = CommonProps & {
+import { Refable } from "../../common/Refable";
+export type ZStackProps = CommonProps & Refable<HTMLDivElement> & {
     children: ReactNode;
 };
 /**
@@ -10,4 +11,4 @@ export type ZStackProps = CommonProps & {
  * @param { ZStackProps} props - The props for the  ZStack component
  * @returns {Element}  ZStack component
  */
-export declare const ZStack: ({ children, className, "data-testid": dataTestId }: ZStackProps) => ReactElement;
+export declare const ZStack: ({ children, className, "data-testid": dataTestId, ref }: ZStackProps) => ReactElement;

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

@@ -1,5 +1,6 @@
 import { MouseEventHandler, ReactElement } from "react";
-interface StarButtonProps {
+import { Refable } from "../../../common/Refable";
+interface StarButtonProps extends Refable<HTMLDivElement> {
     starred: boolean;
     onClick: MouseEventHandler<HTMLDivElement>;
 }
@@ -9,5 +10,5 @@ interface StarButtonProps {
  * @param {StarButtonProps} props - The props for the StarButton component
  * @returns {ReactElement} StarButton component
  */
-export declare const StarButton: ({ starred, onClick }: StarButtonProps) => ReactElement;
+export declare const StarButton: ({ starred, onClick, ref }: StarButtonProps) => ReactElement;
 export {};

package/src/index.d.ts

@@ -2,6 +2,7 @@ export * from "./common/AllOrNone";
 export * from "./common/AriaProps";
 export * from "./common/CommonProps";
 export * from "./common/PackageNameStoryComponent";
+export * from "./common/Refable";
 export * from "./common/Size";
 export * from "./common/StorybookProps";
 export * from "./common/Styleable";