@trackunit/react-components 1.10.64 → 1.10.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.10.64",
+  "version": "1.10.67",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.89",
-    "@trackunit/css-class-variance-utilities": "1.7.89",
-    "@trackunit/shared-utils": "1.9.89",
-    "@trackunit/ui-icons": "1.7.90",
+    "@trackunit/ui-design-tokens": "1.7.92",
+    "@trackunit/css-class-variance-utilities": "1.7.92",
+    "@trackunit/shared-utils": "1.9.92",
+    "@trackunit/ui-icons": "1.7.93",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

package/src/common/Styleable.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 export type Styleable = {
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 };

package/src/components/Breadcrumb/utils/types.d.ts

@@ -1,4 +1,5 @@
 import { CommonProps } from "../../../common/CommonProps";
+import { ReactElement } from "react";
 export interface BreadcrumbItemProps {
     label: string;
     to: string;
@@ -8,8 +9,8 @@ export interface BreadcrumbProps extends CommonProps {
     back: () => void;
 }
 export interface BreadcrumbContainerProps extends CommonProps {
-    breadcrumbItems: Array<React.ReactElement<BreadcrumbItemProps>>;
+    breadcrumbItems: Array<ReactElement<BreadcrumbItemProps>>;
 }
 export interface BreadcrumbItemRenderProps extends CommonProps {
-    item: React.ReactElement<BreadcrumbItemProps>;
+    item: ReactElement<BreadcrumbItemProps>;
 }

package/src/components/Breadcrumb/utils/useBreadcrumbItemsToRender.d.ts

@@ -1,5 +1,6 @@
+import { ReactElement } from "react";
 import { BreadcrumbItemProps } from "./types";
 /**
  * useBreadcrumbItemsToRender is a custom hook that takes an array of BreadcrumbItemProps and returns an array of React.ReactElement
  */
-export declare const useBreadcrumbItemsToRender: (breadcrumbItems: Array<BreadcrumbItemProps>) => Array<React.ReactElement<BreadcrumbItemProps>>;
+export declare const useBreadcrumbItemsToRender: (breadcrumbItems: Array<BreadcrumbItemProps>) => Array<ReactElement<BreadcrumbItemProps>>;

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Density } from "../../common/Density";
 import { HeadingVariant } from "../Heading/Heading";
@@ -29,7 +29,7 @@ export interface CardHeaderProps extends CommonProps {
      */
     hideSeparator?: boolean;
     /** Function to call when the close button is clicked */
-    onClose?: () => void;
+    onClose?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Children to render in the header
      */

package/src/components/EmptyState/EmptyState.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 type EmptyStateImage = "WORKER_WITH_SIGN" | "ROAD_BLOCK" | "BUILDING_ERROR" | "WALL_CONSTRUCTION" | "PHONE_LOCK_SECURITY" | "SEARCH_DOCUMENT";
 type EmptyStateButtonAction = {
@@ -15,7 +15,7 @@ export interface EmptyStateProps extends CommonProps {
     description?: string;
     altText?: string;
     image?: EmptyStateImage;
-    customImageSrc?: string | React.ReactNode;
+    customImageSrc?: string | ReactNode;
     primaryAction?: EmptyStateButtonAction;
     secondaryAction?: EmptyStateButtonAction;
     additionalHelpAction?: EmptyStateButtonAction;

package/src/components/ExternalLink/ExternalLink.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactElement, ReactNode } from "react";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface ExternalLinkProps extends CommonProps {
     /**
@@ -25,7 +25,7 @@ export interface ExternalLinkProps extends CommonProps {
      * Used to specify the relationship between the link and the current document. Defaults to "noreferrer".
      */
     rel?: string;
-    onClick?: (event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => void;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
 }
 /**
  *  Link is an interactive element that allows users to navigate between different parts of an application or to external resources. Links are used to indicate clickable text.

package/src/components/HorizontalOverflowScroller/OverflowIndicator.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { MouseEvent, ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 type OverflowDirection = "left" | "right";
 export interface OverflowIndicatorProps extends CommonProps {
@@ -9,7 +9,7 @@ export interface OverflowIndicatorProps extends CommonProps {
     /**
      * Callback function to handle scroll action
      */
-    onClickScroll?: (event: React.MouseEvent<HTMLElement>) => void;
+    onClickScroll?: (event: MouseEvent<HTMLElement>) => void;
 }
 /**
  * Overflow indicator component that shows visual cues when content extends beyond visible area

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

@@ -1,6 +1,6 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
-import { CSSProperties, ReactElement } from "react";
+import { CSSProperties, MouseEvent, ReactElement, RefObject } from "react";
 import { AriaProps } from "../../common/AriaProps";
 import { CommonProps } from "../../common/CommonProps";
 import { Size } from "../../common/Size";
@@ -278,13 +278,13 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
      * The type value depends on the size prop, the small and medium size are always solid, the large size is either solid or outline.
      */
     type?: "solid" | "outline" | "mini";
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
     /**
      * Ref forwarded to the span element
      *
      * @memberof IconProps
      */
-    forwardedRef?: React.RefObject<HTMLSpanElement>;
+    forwardedRef?: RefObject<HTMLSpanElement>;
     /**
      * Custom styles object used to override existing styles or add some extra styling
      *

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

@@ -1,5 +1,5 @@
 import { IconName } from "@trackunit/ui-icons";
-import { ReactElement, ReactNode } from "react";
+import { MouseEvent, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { ButtonVariant } from "../buttons";
 import { TabListProps } from "../Tabs/TabList";
@@ -12,7 +12,7 @@ export type PageHeaderKpiMetricsType = {
     hidden?: boolean;
 };
 export type PageHeaderActionType = CommonProps & {
-    actionCallback?: (e?: React.MouseEvent) => void;
+    actionCallback?: (e?: MouseEvent) => void;
     actionText: string;
     prefixIconName?: IconName;
     disabled?: boolean;

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

@@ -1,11 +1,11 @@
-import { HTMLAttributes } from "react";
+import { HTMLAttributes, ReactElement, RefObject } from "react";
 import { SidebarItemProps } from "./Sidebar";
 export interface OverflowItemsOptions {
     /**
      * If the child elements of the container are not available at the time of the hook initialization,
      * you can pass the children as a prop, and the hook will initialize the observer when the children are available.
      */
-    children?: Array<React.ReactElement<SidebarItemProps>> | React.ReactElement<SidebarItemProps>;
+    children?: Array<ReactElement<SidebarItemProps>> | ReactElement<SidebarItemProps>;
     /**
      * The threshold for the intersection observer.
      * Learn more: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
@@ -34,6 +34,6 @@ export type OverflowMap = {
  * @returns {object} The overflow items and the ref to the container.
  */
 export declare const useOverflowItems: ({ threshold, childUniqueIdentifierAttribute, children, }: OverflowItemsOptions) => {
-    overflowContainerRef: React.RefObject<HTMLDivElement | null>;
+    overflowContainerRef: RefObject<HTMLDivElement | null>;
     itemOverflowMap: OverflowMap;
 };

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

@@ -1,7 +1,7 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
-import { Dispatch, ReactElement, SetStateAction } from "react";
+import { Dispatch, MouseEvent, ReactElement, SetStateAction } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { TooltipPlacement } from "../Tooltip/Tooltip";
 import { cvaToggleGroup } from "./ToggleGroup.variants";
@@ -73,7 +73,7 @@ export interface ToggleItemProps extends CommonProps, MappedOmit<BasicToggleGrou
         content?: string;
         placement?: TooltipPlacement;
     };
-    onClick: (event?: React.MouseEvent<HTMLElement>) => void;
+    onClick: (event?: MouseEvent<HTMLElement>) => void;
     selected: boolean;
     disabled: boolean;
     size: "small" | "medium" | "large";

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

@@ -1,8 +1,7 @@
-import { MouseEvent, ReactElement, ReactNode, Ref } from "react";
+import { ReactElement, ReactNode, Ref } from "react";
 import { Size } from "../../../common/Size";
 import { ButtonCommonProps, ButtonType } from "../shared/ButtonProps";
 export interface ButtonProps extends Omit<ButtonCommonProps, "size"> {
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
     /**
      * Child nodes. Can be used to pass in text to be displayed on the button.
      */

package/src/components/buttons/shared/ButtonProps.d.ts

@@ -1,3 +1,4 @@
+import { MouseEventHandler } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 import { Size } from "../../../common/Size";
 export type ButtonVariant = "primary" | "secondary" | "primary-danger" | "secondary-danger" | "ghost" | "ghost-neutral" | "filled";
@@ -6,15 +7,15 @@ export interface ButtonCommonProps extends CommonProps {
     /**
      * An onClick handler
      */
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * A MouseEnter handler function
      */
-    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseEnter?: MouseEventHandler<HTMLButtonElement>;
     /**
      * A MouseLeave handler function
      */
-    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseLeave?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Whether the button is loading.
      */

package/src/hooks/useSelfUpdatingRef.d.ts

@@ -1,6 +1,7 @@
+import { RefObject } from "react";
 /**
  * A useRef that updates its given value whenever it changes.
  *
  * @returns {boolean} Returns true if it is the first render, false otherwise.
  */
-export declare const useSelfUpdatingRef: <TState>(initialState: TState) => React.RefObject<TState>;
+export declare const useSelfUpdatingRef: <TState>(initialState: TState) => RefObject<TState>;