@trackunit/react-components 1.10.5 → 1.10.7

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

@@ -30,23 +30,19 @@ export type PageHeaderPrimaryActionType = PageHeaderActionType & {
 };
 interface BasePageHeaderProps extends CommonProps {
     /**
-     * Text to be displayed in the header.
+     * Main title of the page.
      */
     title: string | ReactNode;
     /**
-     * The description to be displayed inside the tip.
+     * The description to be displayed inside the tooltip for the title.
      */
     description?: string | ReactNode;
     /**
-     * The action to be displayed on the right side of the header.
-     */
-    primaryAction?: PageHeaderPrimaryActionType;
-    /**
-     * A tag that is displayed on the side of the header.
+     * A tag that can be displayed next to the title.
      */
     tagLabel?: string;
     /**
-     * A theme color value can be used for tag component
+     * The color value of the tag component.
      */
     tagColor?: TagColors;
     /**
@@ -58,12 +54,12 @@ interface BasePageHeaderProps extends CommonProps {
      */
     showLoading?: boolean;
     /**
-     * The link to the previous page which will be rendered inside
-     * an IconButton component to the left of the heading.
+     * The link to the previous page that will be rendered inside
+     * an IconButton component to the left of the title. Allows the user to navigate back to the previous page.
      */
     backTo?: string;
     /**
-     * The icon to be used in the description.
+     * The icon of the tooltip besides the title. Can be used to display a tooltip with more information about the page.
      */
     descriptionIcon?: IconName;
     /**
@@ -71,13 +67,40 @@ interface BasePageHeaderProps extends CommonProps {
      */
     tabsList?: ReactElement<TabListProps>;
 }
-interface WithActions {
+type WithActions = {
+    /**
+     * Whether the page header should display KPI metrics, actions or nothing.
+     * You can only display one of the two.
+     */
+    accessoryType: "actions";
+    /**
+     * The main action of the page.
+     */
+    primaryAction?: PageHeaderPrimaryActionType;
+    /**
+     * Any additional actions to be displayed in the header. If there are more than two actions, they are automatically grouped within a `<MoreMenu />` component.
+     */
     secondaryActions?: Array<PageHeaderSecondaryActionType> | ReactNode;
-    kpiMetrics?: never;
-}
-interface WithKpiMetrics {
-    secondaryActions?: never;
-    kpiMetrics?: Array<PageHeaderKpiMetricsType>;
-}
-export type PageHeaderProps = BasePageHeaderProps & (WithActions | WithKpiMetrics);
+    /**
+     * Groups secondary actions in a More Menu regardless of count.
+     */
+    groupSecondaryActions?: boolean;
+};
+type WithKpiMetrics = {
+    /**
+     * Whether the page header should display KPI metrics, actions or nothing.
+     */
+    accessoryType: "kpi-metrics";
+    /**
+     * The KPI metrics to display in the header. Cannot be used in combination with secondaryActions.
+     */
+    kpiMetrics: Array<PageHeaderKpiMetricsType>;
+};
+type WithNothing = {
+    /**
+     * Whether the page header should display KPI metrics, actions or nothing.
+     */
+    accessoryType: "none";
+};
+export type PageHeaderProps = BasePageHeaderProps & (WithActions | WithKpiMetrics | WithNothing);
 export {};

package/src/hooks/useContainerBreakpoints.d.ts

@@ -1,5 +1,8 @@
 import { type RefObject } from "react";
 import { type BreakpointState } from "./breakpoint-utils";
+type UseContainerBreakpointsOptions = {
+    skip?: boolean;
+};
 /**
  * A custom React hook that provides real-time information about a container's size.
  *
@@ -7,6 +10,8 @@ import { type BreakpointState } from "./breakpoint-utils";
  * an object with boolean values indicating which breakpoints are currently active.
  *
  * @param {RefObject<HTMLElement>} ref - Reference to the container element to observe
+ * @param {object} [options] - Configuration options
+ * @param {boolean} [options.skip] - Whether to skip observing for breakpoint changes (default: false)
  * @returns {BreakpointState} An object containing boolean values for each container size breakpoint.
  * @example
  * const MyComponent = () => {
@@ -26,4 +31,5 @@ import { type BreakpointState } from "./breakpoint-utils";
  *   );
  * }
  */
-export declare const useContainerBreakpoints: (ref: RefObject<HTMLElement | null>) => BreakpointState;
+export declare const useContainerBreakpoints: (ref: RefObject<HTMLElement | null>, options?: UseContainerBreakpointsOptions) => BreakpointState;
+export {};

package/src/hooks/useContinuousTimeout.d.ts

@@ -13,7 +13,7 @@ interface UseContinuousTimeoutProps extends UseTimeoutProps {
  * @param {number} options.maxRetries - Maximum number of retry attempts.
  * @returns {object} An object containing functions to start and stop the timeout, current retry count, and the timeout status.
  */
-export declare const useContinuousTimeout: ({ onTimeout, onMaxRetries, duration, maxRetries }: UseContinuousTimeoutProps) => {
+export declare const useContinuousTimeout: ({ onTimeout, onMaxRetries, duration, maxRetries, }: UseContinuousTimeoutProps) => {
     startTimeouts: () => void;
     stopTimeouts: () => void;
     isRunning: boolean;

package/src/hooks/useDevicePixelRatio.d.ts

@@ -19,6 +19,12 @@ export interface DevicePixelRatioOptions {
      * @default `3`
      */
     maxDpr?: number;
+    /**
+     * Whether to skip observing for device pixel ratio changes
+     *
+     * @default `false`
+     */
+    skip?: boolean;
 }
 /**
  * Get the device pixel ratio, potentially rounded and capped.

package/src/hooks/useGeometry.d.ts

@@ -1,12 +1,5 @@
 import { RefObject } from "react";
-interface UseGeometryOptions {
-    skip?: boolean;
-}
-/**
- * Custom hook to get the geometry of an element.
- * Size and position of the element relative to the viewport.
- */
-export declare const useGeometry: (ref: RefObject<HTMLElement | null>, { skip }?: UseGeometryOptions) => {
+type Geometry = {
     width: number;
     height: number;
     top: number;
@@ -16,4 +9,13 @@ export declare const useGeometry: (ref: RefObject<HTMLElement | null>, { skip }?
     x: number;
     y: number;
 };
+interface UseGeometryOptions {
+    skip?: boolean;
+    onChange?: (geometry: Geometry) => void;
+}
+/**
+ * Custom hook to get the geometry of an element.
+ * Size and position of the element relative to the viewport.
+ */
+export declare const useGeometry: (ref: RefObject<HTMLElement | null>, { skip, onChange }?: UseGeometryOptions) => Geometry;
 export {};

package/src/hooks/useInfiniteScroll.d.ts

@@ -8,6 +8,7 @@ interface InfiniteScrollProps<TScrollElement extends Element, TItemElement exten
     estimateSize?: (index: number) => number;
     overscan?: number;
     onChange?: (virtualizer: Virtualizer<TScrollElement, TItemElement>) => void;
+    skip?: boolean;
 }
 /**
  * Custom hook for implementing infinite scrolling in a table using TanStack Virtual.
@@ -19,6 +20,7 @@ interface InfiniteScrollProps<TScrollElement extends Element, TItemElement exten
  * @param props.estimateSize - Optional function to estimate item height.
  * @param props.overscan - Optional number of items to render outside the visible area.
  * @param props.onChange - Optional callback when virtualizer changes.
+ * @param props.skip - Whether to skip automatic loading of more data (default: false).
  * @returns {Virtualizer} The virtualizer instance with all its properties and methods.
  * @description
  * This hook is used to implement infinite scrolling in a table. It uses TanStack Virtual's
@@ -32,5 +34,5 @@ interface InfiniteScrollProps<TScrollElement extends Element, TItemElement exten
  *   estimateSize: () => 35,
  * });
  */
-export declare const useInfiniteScroll: <TScrollElement extends Element, TItemElement extends Element>({ pagination, scrollElementRef, count, estimateSize, overscan, onChange, }: InfiniteScrollProps<TScrollElement, TItemElement>) => Virtualizer<TScrollElement, TItemElement>;
+export declare const useInfiniteScroll: <TScrollElement extends Element, TItemElement extends Element>({ pagination, scrollElementRef, count, estimateSize, overscan, onChange, skip, }: InfiniteScrollProps<TScrollElement, TItemElement>) => Virtualizer<TScrollElement, TItemElement>;
 export {};

package/src/hooks/useIsTextTruncated.d.ts

@@ -1,4 +1,7 @@
 import { Ref } from "react";
+type UseIsTextTruncatedOptions = {
+    skip?: boolean;
+};
 /**
  * A custom hook that determines if text within an element is truncated
  * (i.e., the text overflows the container).
@@ -6,6 +9,8 @@ import { Ref } from "react";
  * @template TElement - The type of the HTML element being observed (e.g., HTMLDivElement).
  * @param {string} [text] - (Optional) Text used to trigger a re-check of truncation,
  *                          especially if the text is dynamic (such as an input's value).
+ * @param {object} [options] - Configuration options
+ * @param {boolean} [options.skip] - Whether to skip observing for truncation (default: false)
  * @returns {{
  *   ref: Ref<TElement | null>;
  *   isTooltipVisible: boolean;
@@ -13,7 +18,8 @@ import { Ref } from "react";
  * - `ref`: a ref to attach to the element you want to observe for truncation.
  * - `isTextTruncated`: a boolean indicating if the text is truncated.
  */
-export declare const useIsTextTruncated: <TElement extends HTMLElement>(text?: string) => {
+export declare const useIsTextTruncated: <TElement extends HTMLElement>(text?: string, { skip }?: UseIsTextTruncatedOptions) => {
     ref: Ref<TElement>;
     isTextTruncated: boolean;
 };
+export {};

package/src/hooks/useIsTextWrapping.d.ts

@@ -1,8 +1,13 @@
 import { RefObject } from "react";
+type UseIsTextWrappingOptions = {
+    skip?: boolean;
+};
 /**
  * Hook to detect if text content is wrapping to multiple lines
  *
  * @template TElement - The type of the HTML element being observed (e.g., HTMLDivElement).
+ * @param {object} [options] - Configuration options
+ * @param {boolean} [options.skip] - Whether to skip observing for wrapping (default: false)
  * @returns {{
  *   ref: RefObject<TElement | null>;
  *   isTooltipVisible: boolean;
@@ -10,7 +15,8 @@ import { RefObject } from "react";
  * - `ref`: a ref to attach to the element you want to observe for truncation.
  * - `isTextWrapping`: a boolean indicating if the text is wrapping.
  */
-export declare const useIsTextWrapping: <TElement extends HTMLElement>() => {
+export declare const useIsTextWrapping: <TElement extends HTMLElement>(options?: UseIsTextWrappingOptions) => {
     ref: RefObject<TElement | null>;
     isTextWrapping: boolean;
 };
+export {};

package/src/hooks/useScrollDetection.d.ts

@@ -12,12 +12,13 @@ type ScrollState = {
 type UseScrollDetectionOptions = {
     direction?: ScrollDirection;
     onScrollStateChange?: (state: ScrollState) => void;
+    skip?: boolean;
 };
 /**
  * Hook for detecting scroll values in horizontal or vertical direction.
  *
  * @param {useRef} elementRef - Ref hook holding the element that needs to be observed during scrolling
- * @param {object} options - Options object containing direction and onScrollStateChange callback
+ * @param {object} options - Options object containing direction, onScrollStateChange callback, and skip
  * @returns {object} An object containing if the element is scrollable, is at the beginning, is at the end, and its current scroll position.
  */
 export declare const useScrollDetection: (elementRef?: RefObject<HTMLElement | null>, options?: UseScrollDetectionOptions) => ScrollState;

package/src/hooks/useTimeout.d.ts

@@ -10,7 +10,7 @@ export interface UseTimeoutProps {
  * @param {number} options.duration - Duration of the timeout in milliseconds.
  * @returns {object} An object containing functions to start and stop the timeout.
  */
-export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => {
+export declare const useTimeout: ({ onTimeout, duration, }: UseTimeoutProps) => {
     startTimeout: () => void;
     stopTimeout: () => void;
 };

package/src/hooks/useViewportBreakpoints.d.ts

@@ -1,4 +1,7 @@
 import { type BreakpointState } from "./breakpoint-utils";
+type UseViewportBreakpointsOptions = {
+    skip?: boolean;
+};
 /**
  * A custom React hook that provides real-time information about the current viewport size.
  * ! Consider using `useContainerBreakpoints` instead, and only use this when you need to actually react to the viewport size, not the container size.
@@ -6,6 +9,8 @@ import { type BreakpointState } from "./breakpoint-utils";
  * This hook listens to changes in the viewport size and returns an object with boolean values
  * indicating which breakpoints are currently active.
  *
+ * @param {object} [options] - Configuration options
+ * @param {boolean} [options.skip] - Whether to skip observing for viewport changes (default: false)
  * @returns {BreakpointState} An object containing boolean values for each viewport size breakpoint.
  * @example
  * const MyComponent = () => {
@@ -18,4 +23,5 @@ import { type BreakpointState } from "./breakpoint-utils";
  *   return viewportSize.isMd ? <MediumScreenLayout /> : <SmallLayout />;
  * }
  */
-export declare const useViewportBreakpoints: () => BreakpointState;
+export declare const useViewportBreakpoints: (options?: UseViewportBreakpointsOptions) => BreakpointState;
+export {};

package/src/hooks/useWindowActivity.d.ts

@@ -1,11 +1,12 @@
 type UseWindowActivityProps = {
     onFocus?: () => void;
     onBlur?: () => void;
+    skip?: boolean;
 };
 /**
  * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events
  */
-export declare const useWindowActivity: ({ onFocus, onBlur }?: UseWindowActivityProps) => {
+export declare const useWindowActivity: ({ onFocus, onBlur, skip }?: UseWindowActivityProps) => {
     focused: boolean;
 };
 export {};