@trackunit/react-components 0.1.117 → 0.1.119

package/src/hooks/useDebounce.d.ts

@@ -1,13 +1,13 @@
-export type DebounceDirection = "in" | "out" | "both";
-/**
- * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
- *
- * @param {any} value The value to set
- * @param {number} delay The debounce time
- * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
- * @returns {any} The latest value received
- */
-/**
- *
- */
-export declare const useDebounce: <T>(value: T, delay?: number, direction?: DebounceDirection) => T;
+export type DebounceDirection = "in" | "out" | "both";
+/**
+ * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
+ *
+ * @param {any} value The value to set
+ * @param {number} delay The debounce time
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
+ * @returns {any} The latest value received
+ */
+/**
+ *
+ */
+export declare const useDebounce: <T>(value: T, delay?: number, direction?: DebounceDirection) => T;

package/src/hooks/useDevicePixelRatio.d.ts

@@ -1,37 +1,37 @@
-export interface DevicePixelRatioOptions {
-    /**
-     * Default DPR to use if browser does not support the `devicePixelRatio`
-     * property, or when rendering on server
-     *
-     * @default `1`
-     * @returns DPR
-     */
-    defaultDpr?: number;
-    /**
-     * Whether or not to round the number down to the closest integer
-     *
-     * @default `true`
-     */
-    round?: boolean;
-    /**
-     * Maximum DPR to return (set to `2` to only generate 1 and 2)
-     *
-     * @default `3`
-     */
-    maxDpr?: number;
-}
-/**
- * Get the device pixel ratio, potentially rounded and capped.
- * Will emit new values if it changes.
- *
- * @param {DevicePixelRatioOptions} options the options object
- * @returns { number } The current device pixel ratio, or the default if none can be resolved
- */
-export declare function useDevicePixelRatio(options?: DevicePixelRatioOptions): number;
-/**
- * Returns the current device pixel ratio (DPR) given the passed options
- *
- * @param { DevicePixelRatioOptions } options the options object
- * @returns { number } current device pixel ratio
- */
-export declare function getDevicePixelRatio(options?: DevicePixelRatioOptions): number;
+export interface DevicePixelRatioOptions {
+    /**
+     * Default DPR to use if browser does not support the `devicePixelRatio`
+     * property, or when rendering on server
+     *
+     * @default `1`
+     * @returns DPR
+     */
+    defaultDpr?: number;
+    /**
+     * Whether or not to round the number down to the closest integer
+     *
+     * @default `true`
+     */
+    round?: boolean;
+    /**
+     * Maximum DPR to return (set to `2` to only generate 1 and 2)
+     *
+     * @default `3`
+     */
+    maxDpr?: number;
+}
+/**
+ * Get the device pixel ratio, potentially rounded and capped.
+ * Will emit new values if it changes.
+ *
+ * @param {DevicePixelRatioOptions} options the options object
+ * @returns { number } The current device pixel ratio, or the default if none can be resolved
+ */
+export declare function useDevicePixelRatio(options?: DevicePixelRatioOptions): number;
+/**
+ * Returns the current device pixel ratio (DPR) given the passed options
+ *
+ * @param { DevicePixelRatioOptions } options the options object
+ * @returns { number } current device pixel ratio
+ */
+export declare function getDevicePixelRatio(options?: DevicePixelRatioOptions): number;

package/src/hooks/useHover.d.ts

@@ -1,24 +1,24 @@
-import { DebounceDirection } from "./useDebounce";
-type ConditionalUseHoverProps = {
-    debounced: true;
-    delay?: number;
-    direction?: DebounceDirection;
-} | {
-    debounced: false;
-    delay?: never;
-    direction?: never;
-};
-/**
- * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
- * The boolean will be true if the element is being hovered, and false if it is not.
- * Can be directionally debounced.
- *
- * @param {ConditionalUseHoverProps} param0 The options
- * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
- */
-export declare const useHover: ({ debounced, delay, direction }?: ConditionalUseHoverProps) => {
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-    hovering: boolean;
-};
-export {};
+import { DebounceDirection } from "./useDebounce";
+type ConditionalUseHoverProps = {
+    debounced: true;
+    delay?: number;
+    direction?: DebounceDirection;
+} | {
+    debounced: false;
+    delay?: never;
+    direction?: never;
+};
+/**
+ * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
+ * The boolean will be true if the element is being hovered, and false if it is not.
+ * Can be directionally debounced.
+ *
+ * @param {ConditionalUseHoverProps} param0 The options
+ * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ */
+export declare const useHover: ({ debounced, delay, direction }?: ConditionalUseHoverProps) => {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    hovering: boolean;
+};
+export {};

package/src/hooks/useIsFirstRender.d.ts

@@ -1,6 +1,6 @@
-/**
- * Differentiate between the first and subsequent renders.
- *
- * @returns {boolean} Returns true if it is the first render, false otherwise.
- */
-export declare const useIsFirstRender: () => boolean;
+/**
+ * Differentiate between the first and subsequent renders.
+ *
+ * @returns {boolean} Returns true if it is the first render, false otherwise.
+ */
+export declare const useIsFirstRender: () => boolean;

package/src/hooks/useLocalStorage.d.ts

@@ -1,9 +1,9 @@
-import { Dispatch, SetStateAction } from "react";
-/**
- * The useLocalStorage hook works like useState, but saves to localstorage.
- *
- * @param {string} key - The key the values is saved under.
- * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
- * @returns {string | null | undefined} value
- */
-export declare const useLocalStorage: <TValue = string | null | undefined>(key: string, initialValue?: TValue | undefined) => [TValue | null, Dispatch<SetStateAction<TValue | null>>, () => void];
+import { Dispatch, SetStateAction } from "react";
+/**
+ * The useLocalStorage hook works like useState, but saves to localstorage.
+ *
+ * @param {string} key - The key the values is saved under.
+ * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
+ * @returns {string | null | undefined} value
+ */
+export declare const useLocalStorage: <TValue = string | null | undefined>(key: string, initialValue?: TValue | undefined) => [TValue | null, Dispatch<SetStateAction<TValue | null>>, () => void];

package/src/hooks/useLocalStorageReducer.d.ts

@@ -1,7 +1,7 @@
-import { Dispatch } from "react";
-/**
- * Wraps a normal useReducer with local storage functionality
- *
- * @param {string} key - The key the state is saved with in local storage.
- */
-export declare const useLocalStorageReducer: <State, Action>(key: string, reducer: (state: State, action: Action) => State, initialState: State) => [State, Dispatch<Action>];
+import { Dispatch } from "react";
+/**
+ * Wraps a normal useReducer with local storage functionality
+ *
+ * @param {string} key - The key the state is saved with in local storage.
+ */
+export declare const useLocalStorageReducer: <State, Action>(key: string, reducer: (state: State, action: Action) => State, initialState: State) => [State, Dispatch<Action>];

package/src/hooks/useResize.d.ts

@@ -1,10 +1,10 @@
-export interface WindowSize {
-    height: number;
-    width: number;
-}
-/**
- * Custom hook to handle window resize events and provide the current window size.
- *
- * @returns {WindowSize} An object containing the current window height and width.
- */
-export declare const useResize: () => WindowSize;
+export interface WindowSize {
+    height: number;
+    width: number;
+}
+/**
+ * Custom hook to handle window resize events and provide the current window size.
+ *
+ * @returns {WindowSize} An object containing the current window height and width.
+ */
+export declare const useResize: () => WindowSize;

package/src/hooks/useTimeout.d.ts

@@ -1,11 +1,11 @@
-export type UseTimeoutReturn = [() => boolean | null, () => void, () => void];
-interface UseTimeoutProps {
-    onTimeout: () => void;
-    duration: number;
-}
-/**
- * @param {UseTimeoutProps} props The props
- * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
- */
-export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => UseTimeoutReturn;
-export {};
+export type UseTimeoutReturn = [() => boolean | null, () => void, () => void];
+interface UseTimeoutProps {
+    onTimeout: () => void;
+    duration: number;
+}
+/**
+ * @param {UseTimeoutProps} props The props
+ * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
+ */
+export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => UseTimeoutReturn;
+export {};

package/src/index.d.ts

@@ -1,7 +1,7 @@
-export * from "./common";
-export * from "./components";
-export * from "./components/buttons/shared/Button.variants";
-export * from "./components/Clickable/Clickable.variants";
-export * from "./components/Indicator/Indicator.variants";
-export * from "./hooks";
-export * from "./layout";
+export * from "./common";
+export * from "./components";
+export * from "./components/buttons/shared/Button.variants";
+export * from "./components/Clickable/Clickable.variants";
+export * from "./components/Indicator/Indicator.variants";
+export * from "./hooks";
+export * from "./layout";

package/src/layout/helper/MinTopFullContentLayout.d.ts

@@ -1,18 +1,18 @@
-import { ReactNode } from "react";
-import { CommonProps } from "../../common/CommonProps";
-/**
- * Pass two children. The first will be min-content and the second full height
- * Useful when toy want the second child to have 100% height and be scrollable
- * Example: FilterBar + Fleet List
- */
-interface MinTopFullContentLayoutProps extends CommonProps {
-    children: ReactNode;
-}
-/**
- * The MinTopFullContentLayout component.
- *
- * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
- * @returns {JSX.Element} MinTopFullContentLayout component
- */
-export declare const MinTopFullContentLayout: ({ children, className, dataTestId }: MinTopFullContentLayoutProps) => JSX.Element;
-export {};
+import { ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+/**
+ * Pass two children. The first will be min-content and the second full height
+ * Useful when toy want the second child to have 100% height and be scrollable
+ * Example: FilterBar + Fleet List
+ */
+interface MinTopFullContentLayoutProps extends CommonProps {
+    children: ReactNode;
+}
+/**
+ * The MinTopFullContentLayout component.
+ *
+ * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
+ * @returns {JSX.Element} MinTopFullContentLayout component
+ */
+export declare const MinTopFullContentLayout: ({ children, className, dataTestId }: MinTopFullContentLayoutProps) => JSX.Element;
+export {};

package/src/layout/index.d.ts

@@ -1,6 +1,6 @@
-export * from "./helper/MinTopFullContentLayout";
-export * from "./responsive/FilterListMapLayout";
-export * from "./responsive/FullWidthRepeatingLayout";
-export * from "./responsive/GridArea";
-export * from "./responsive/IntrinsicallyResponsiveGrid";
-export * from "./responsive/TitleNavContentLayout";
+export * from "./helper/MinTopFullContentLayout";
+export * from "./responsive/FilterListMapLayout";
+export * from "./responsive/FullWidthRepeatingLayout";
+export * from "./responsive/GridArea";
+export * from "./responsive/IntrinsicallyResponsiveGrid";
+export * from "./responsive/TitleNavContentLayout";

package/src/layout/responsive/FilterListMapLayout.d.ts

@@ -1,22 +1,15 @@
-/// <reference types="react" />
-interface FilterListMapLayoutProps {
-    children: React.ReactNode;
-}
-/**
- * Responsive layout component setting up three grid areas
- * one for filtering, (result-)list and (result-map)
- *
- * List needs to handle its own min size - and map takes up the rest.
- *
- * Will be inlined to
- *  - filter
- *  - list
- *  - map
- * on screens < mediaQuery.xxl
- *
- *
- * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
- * @returns {JSX.Element} FilterListMapLayout component
- */
-export declare const FilterListMapLayout: ({ children }: FilterListMapLayoutProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+interface FilterListMapLayoutProps {
+    children: React.ReactNode;
+}
+/**
+ * Responsive layout component setting up three grid areas
+ * one for filtering, (result-)list and (result-map)
+ *
+ * List needs to handle its own min size - and map takes up the rest.
+ *
+ * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
+ * @returns {JSX.Element} FilterListMapLayout component
+ */
+export declare const FilterListMapLayout: ({ children }: FilterListMapLayoutProps) => JSX.Element;
+export {};

package/src/layout/responsive/FullWidthRepeatingLayout.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-type RowSizing = "Equal" | "MinContent" | "Unmanaged";
-interface FullWidthRepeatingLayoutProps {
-    children: React.ReactNode;
-    rowSizing?: RowSizing;
-    rowMinHeight?: number;
-    dataTestId?: string;
-    className?: string;
-}
-/**
- * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
- * Row min height can optionally be set here or managed by children
- * Scrolling happens if/when children's a min-height is reached
- *
- * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
- * @returns {JSX.Element} FullWidthRepeatingLayout component
- */
-export declare const FullWidthRepeatingLayout: ({ children, rowSizing, rowMinHeight, dataTestId, className, }: FullWidthRepeatingLayoutProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+type RowSizing = "Equal" | "MinContent" | "Unmanaged";
+interface FullWidthRepeatingLayoutProps {
+    children: React.ReactNode;
+    rowSizing?: RowSizing;
+    rowMinHeight?: number;
+    dataTestId?: string;
+    className?: string;
+}
+/**
+ * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
+ * Row min height can optionally be set here or managed by children
+ * Scrolling happens if/when children's a min-height is reached
+ *
+ * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
+ * @returns {JSX.Element} FullWidthRepeatingLayout component
+ */
+export declare const FullWidthRepeatingLayout: ({ children, rowSizing, rowMinHeight, dataTestId, className, }: FullWidthRepeatingLayoutProps) => JSX.Element;
+export {};

package/src/layout/responsive/GridArea.d.ts

@@ -1,13 +1,13 @@
-import React from "react";
-import { CommonProps } from "../../common/CommonProps";
-export interface GridAreaProps extends CommonProps {
-    area: string;
-    children: React.ReactNode;
-}
-/**
- * Simply applies a Grid Area to the element
- *
- * @param {GridAreaProps} props - The props for the GridArea component
- * @returns {JSX.Element} GridArea component
- */
-export declare const GridArea: ({ area, dataTestId, className, children }: GridAreaProps) => JSX.Element;
+import React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface GridAreaProps extends CommonProps {
+    area: string;
+    children: React.ReactNode;
+}
+/**
+ * Simply applies a Grid Area to the element
+ *
+ * @param {GridAreaProps} props - The props for the GridArea component
+ * @returns {JSX.Element} GridArea component
+ */
+export declare const GridArea: ({ area, dataTestId, className, children }: GridAreaProps) => JSX.Element;

package/src/layout/responsive/IntrinsicallyResponsiveGrid.d.ts

@@ -1,32 +1,32 @@
-/// <reference types="react" />
-import { CommonProps } from "../../common/CommonProps";
-export type ColumnWidth = "xs" | "sm" | "md" | "lg" | "xl";
-export type RowHeight = "auto" | "1fr";
-export type Space = "inherit" | "auto" | "none" | "tiny" | "mini" | "small" | "medium" | "large" | "giant" | "enormous";
-export type Occupation = "auto-fill" | "auto-fit";
-interface IntrinsicallyResponsiveGridProps extends CommonProps {
-    /**
-     * The children to be laid out
-     */
-    children: React.ReactNode;
-    /**
-     * Default "auto-fill" stretch a little, till there's room for another column.
-     * Optionally set "auto-fit" to stretch children to fit entire container width,
-     */
-    occupation?: Occupation;
-    minColumnWidth?: ColumnWidth;
-    rowHeight?: RowHeight;
-    /**
-     * The gap size between children
-     */
-    gap?: Space;
-}
-/**
- * A grid container that has a flexible number of columns.
- * Adds more columns if constraints allow it, otherwise wraps to next row
- *
- * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
- * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
- */
-export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, rowHeight, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { CommonProps } from "../../common/CommonProps";
+export type ColumnWidth = "xs" | "sm" | "md" | "lg" | "xl";
+export type RowHeight = "auto" | "1fr";
+export type Space = "inherit" | "auto" | "none" | "tiny" | "mini" | "small" | "medium" | "large" | "giant" | "enormous";
+export type Occupation = "auto-fill" | "auto-fit";
+interface IntrinsicallyResponsiveGridProps extends CommonProps {
+    /**
+     * The children to be laid out
+     */
+    children: React.ReactNode;
+    /**
+     * Default "auto-fill" stretch a little, till there's room for another column.
+     * Optionally set "auto-fit" to stretch children to fit entire container width,
+     */
+    occupation?: Occupation;
+    minColumnWidth?: ColumnWidth;
+    rowHeight?: RowHeight;
+    /**
+     * The gap size between children
+     */
+    gap?: Space;
+}
+/**
+ * A grid container that has a flexible number of columns.
+ * Adds more columns if constraints allow it, otherwise wraps to next row
+ *
+ * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
+ * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
+ */
+export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, rowHeight, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
+export {};

package/src/layout/responsive/TitleNavContentLayout.d.ts

@@ -1,28 +1,28 @@
-/// <reference types="react" />
-import { CommonProps } from "../../common";
-interface TitleNavContentLayoutProps extends CommonProps {
-    children: React.ReactNode;
-}
-/**
- * The TitleNavContentLayout.
- * Use the `TitleGridArea`, `NavGridArea` and `ContentGridArea` components to define the layout elements.
- *
- * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
- * @returns {JSX.Element} TitleNavContentLayout component
- */
-export declare const TitleNavContentLayout: ({ children, className }: TitleNavContentLayoutProps) => JSX.Element;
-/**
- * A component to define the title area of the TitleNavContentLayout.
- */
-export declare const TitleGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"header">, {}>;
-/**
- * A component to define the navigation area of the TitleNavContentLayout.
- * Adds the needed left padding on large screens.
- */
-export declare const NavGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"aside">, {}>;
-/**
- * A component to define the content area of the TitleNavContentLayout.
- * Adds the needed right padding on large screens.
- */
-export declare const ContentGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"article">, {}>;
-export {};
+/// <reference types="react" />
+import { CommonProps } from "../../common";
+interface TitleNavContentLayoutProps extends CommonProps {
+    children: React.ReactNode;
+}
+/**
+ * The TitleNavContentLayout.
+ * Use the `TitleGridArea`, `NavGridArea` and `ContentGridArea` components to define the layout elements.
+ *
+ * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
+ * @returns {JSX.Element} TitleNavContentLayout component
+ */
+export declare const TitleNavContentLayout: ({ children, className }: TitleNavContentLayoutProps) => JSX.Element;
+/**
+ * A component to define the title area of the TitleNavContentLayout.
+ */
+export declare const TitleGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"header">, {}>;
+/**
+ * A component to define the navigation area of the TitleNavContentLayout.
+ * Adds the needed left padding on large screens.
+ */
+export declare const NavGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"aside">, {}>;
+/**
+ * A component to define the content area of the TitleNavContentLayout.
+ * Adds the needed right padding on large screens.
+ */
+export declare const ContentGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"article">, {}>;
+export {};

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

@@ -1,4 +1,4 @@
-import { RenderHookOptions } from "@testing-library/react";
-declare const customRenderHook: <T, K>(callback: (props: T) => K, options?: RenderHookOptions<T, typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement> | undefined) => import("@testing-library/react").RenderHookResult<K, T>;
-export * from "@testing-library/react";
-export { customRenderHook as renderHook };
+import { RenderHookOptions } from "@testing-library/react";
+declare const customRenderHook: <T, K>(callback: (props: T) => K, options?: RenderHookOptions<T, typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement> | undefined) => import("@testing-library/react").RenderHookResult<K, T>;
+export * from "@testing-library/react";
+export { customRenderHook as renderHook };

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

@@ -1,5 +1,5 @@
-import { RenderOptions } from "@testing-library/react";
-import * as React from "react";
-declare const customRender: (ui: React.ReactElement, options?: Omit<RenderOptions, "queries">) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
-export * from "@testing-library/react";
-export { customRender as render };
+import { RenderOptions } from "@testing-library/react";
+import * as React from "react";
+declare const customRender: (ui: React.ReactElement, options?: Omit<RenderOptions, "queries">) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export * from "@testing-library/react";
+export { customRender as render };