@trackunit/react-components 1.4.23 → 1.4.27

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

@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode } from "react";
+import { ComponentType, JSX, ReactNode, Ref } from "react";
 import { Size } from "../../../common";
 import { ButtonCommonProps } from "../shared/ButtonProps";
 export interface IconButtonProps extends ButtonCommonProps {
@@ -16,8 +16,18 @@ export interface IconButtonProps extends ButtonCommonProps {
      * The size of the button. Defaults to "medium".
      */
     size?: Size;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLButtonElement>;
 }
 /**
  * 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: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ *
+ */
+export declare const IconButton: {
+    ({ icon, size, square, loading, disabled, className, ref, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -5,9 +5,9 @@ interface StarButtonProps {
 }
 /**
  * The StarButton component is used for favorite actions or similar.
- 
+ *
  * @param {StarButtonProps} props - The props for the StarButton component
- * @returns {JSX.Element} StarButton component
+ * @returns {ReactElement} StarButton component
  */
 export declare const StarButton: ({ starred, onClick }: StarButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/hooks/useClickOutside.d.ts

@@ -7,7 +7,7 @@ import { RefObject } from "react";
  * @param {Function} [options.onClick] - The event handler for the click outside event.
  * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
  */
-export declare const useClickOutside: (el: RefObject<HTMLElement> | RefObject<HTMLElement>[], options: {
+export declare const useClickOutside: (el: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[], options: {
     onClick: (ev: MouseEvent) => void;
     active?: boolean;
 }) => void;

package/src/hooks/useContainerBreakpoints.d.ts

@@ -26,4 +26,4 @@ import { type BreakpointState } from "./breakpoint-utils";
  *   );
  * }
  */
-export declare const useContainerBreakpoints: (ref: RefObject<HTMLElement>) => BreakpointState;
+export declare const useContainerBreakpoints: (ref: RefObject<HTMLElement | null>) => BreakpointState;

package/src/hooks/useElevatedReducer.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, Reducer } from "react";
+import { ActionDispatch, AnyActionArg } from "react";
 /**
  * Use this hook if you want to optionally elevate the reducer state of a component.
  * Useful when you _want_ to be able to control the reducer state of a component
@@ -9,4 +9,4 @@ import { Dispatch, Reducer } from "react";
  * @example
  * const [state, dispatch] = useElevatedReducer(reducer, initialState, elevatedReducerState);
  */
-export declare const useElevatedReducer: <TState, TAction>(reducer: Reducer<TState, TAction>, initialState: TState, customState?: [TState, Dispatch<TAction>]) => [TState, Dispatch<TAction>];
+export declare const useElevatedReducer: <TState, TAction extends AnyActionArg>(reducer: (prevState: TState, ...args: TAction) => TState, initialState: TState, customState?: [TState, ActionDispatch<TAction>]) => [TState, ActionDispatch<TAction>];

package/src/hooks/useGeometry.d.ts

@@ -3,7 +3,7 @@ import { RefObject } from "react";
  * 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>) => {
+export declare const useGeometry: (ref: RefObject<HTMLElement | null>) => {
     width: number;
     height: number;
     top: number;

package/src/hooks/useIsTextTruncated.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import { Ref } from "react";
 /**
  * A custom hook that determines if text within an element is truncated
  * (i.e., the text overflows the container).
@@ -7,13 +7,13 @@ import { RefObject } from "react";
  * @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).
  * @returns {{
- *   ref: RefObject<TElement | null>;
+ *   ref: Ref<TElement | null>;
  *   isTooltipVisible: boolean;
  * }} An object with:
  * - `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) => {
-    ref: RefObject<TElement>;
+    ref: Ref<TElement>;
     isTextTruncated: boolean;
 };

package/src/hooks/useIsTextWrapping.d.ts

@@ -11,6 +11,6 @@ import { RefObject } from "react";
  * - `isTextWrapping`: a boolean indicating if the text is wrapping.
  */
 export declare const useIsTextWrapping: <TElement extends HTMLElement>() => {
-    ref: RefObject<TElement>;
+    ref: RefObject<TElement | null>;
     isTextWrapping: boolean;
 };

package/src/hooks/useScrollDetection.d.ts

@@ -5,7 +5,7 @@ import { type RefObject } from "react";
  * @param {useRef} elementRef - Ref hook holding the element that needs to be observed during scrolling
  * @returns {object} An object containing if the element is scrollable, is at the top, is at the bottom, and its current scroll position.
  */
-export declare const useScrollDetection: (elementRef: RefObject<HTMLElement>) => {
+export declare const useScrollDetection: (elementRef?: RefObject<HTMLElement | null>) => {
     isScrollable: boolean;
     isAtTop: boolean;
     isAtBottom: boolean;

package/src/hooks/useSelfUpdatingRef.d.ts

@@ -3,4 +3,4 @@
  *
  * @returns {boolean} Returns true if it is the first render, false otherwise.
  */
-export declare const useSelfUpdatingRef: <TState>(initialState: TState) => import("react").MutableRefObject<TState>;
+export declare const useSelfUpdatingRef: <TState>(initialState: TState) => import("react").RefObject<TState>;