@trackunit/react-components 0.1.117 → 0.1.124

package/src/components/index.d.ts

@@ -1,30 +1,30 @@
-export * from "./Alert";
-export * from "./Badge";
-export * from "./buttons";
-export * from "./Card";
-export * from "./Collapse";
-export * from "./CopyableText";
-export * from "./DayPicker";
-export * from "./Drawer/Drawer";
-export * from "./ExternalLink/ExternalLink";
-export * from "./Heading";
-export * from "./Icon/Icon";
-export * from "./Indicator";
-export * from "./Menu";
-export * from "./Modal";
-export * from "./PageHeader";
-export * from "./Pagination/Pagination";
-export * from "./Popover";
-export * from "./Popover/Popover";
-export * from "./Prompt";
-export * from "./SectionHeader";
-export * from "./Sidebar/Sidebar";
-export * from "./SkeletonLines";
-export * from "./Spacer";
-export * from "./Spinner";
-export * from "./Tag";
-export * from "./Text";
-export * from "./Timeline/Timeline";
-export * from "./Tip";
-export * from "./Tooltip";
-export * from "./ValueBar";
+export * from "./Alert";
+export * from "./Badge";
+export * from "./buttons";
+export * from "./Card";
+export * from "./Collapse";
+export * from "./CopyableText";
+export * from "./DayPicker";
+export * from "./Drawer/Drawer";
+export * from "./ExternalLink/ExternalLink";
+export * from "./Heading";
+export * from "./Icon/Icon";
+export * from "./Indicator";
+export * from "./Menu";
+export * from "./Modal";
+export * from "./PageHeader";
+export * from "./Pagination/Pagination";
+export * from "./Popover";
+export * from "./Popover/Popover";
+export * from "./Prompt";
+export * from "./SectionHeader";
+export * from "./Sidebar/Sidebar";
+export * from "./SkeletonLines";
+export * from "./Spacer";
+export * from "./Spinner";
+export * from "./Tag";
+export * from "./Text";
+export * from "./Timeline/Timeline";
+export * from "./Tip";
+export * from "./Tooltip";
+export * from "./ValueBar";

package/src/hooks/index.d.ts

@@ -1,9 +1,9 @@
-export * from "./useClickOutside";
-export * from "./useDebounce";
-export * from "./useDevicePixelRatio";
-export * from "./useHover";
-export * from "./useIsFirstRender";
-export * from "./useLocalStorage";
-export * from "./useLocalStorageReducer";
-export * from "./useResize";
-export * from "./useTimeout";
+export * from "./localStorage/useLocalStorage";
+export * from "./localStorage/useLocalStorageReducer";
+export * from "./useClickOutside";
+export * from "./useDebounce";
+export * from "./useDevicePixelRatio";
+export * from "./useHover";
+export * from "./useIsFirstRender";
+export * from "./useResize";
+export * from "./useTimeout";

package/src/hooks/localStorage/initLocalStorageState.d.ts

@@ -0,0 +1,9 @@
+import { LocalStorageParams } from "./types";
+/**
+ * Initializes the state from local storage, parsing and validating it if a Zod schema is provided.
+ *
+ * @template State - The type of the state stored in local storage.
+ * @param {Omit<LocalStorageParams<State>, "state">} params - The parameters for initializing the local storage state.
+ * @returns {State} - The initialized state.
+ */
+export declare const initLocalStorageState: <State>({ key, defaultState, schema, }: Omit<LocalStorageParams<State>, "state">) => State;

package/src/hooks/localStorage/types.d.ts

@@ -0,0 +1,27 @@
+import { ZodType } from "zod";
+export interface LocalStorageParams<State> {
+    /**
+     * The key used to store the value in local storage.
+     */
+    key: string;
+    /**
+     * The default state value.
+     */
+    defaultState: State;
+    /**
+     * Optional schema for validating the state.
+     */
+    schema?: ZodType<State>;
+}
+export interface LocalStorageCallbacks {
+    /**
+     * Optional callback function called when validation fails.
+     *
+     * @param error - The validation error object.
+     */
+    onValidationFailed?: (error: unknown) => void;
+    /**
+     * Optional callback function called when validation succeeds.
+     */
+    onValidationSuccessful?: () => void;
+}

package/src/hooks/localStorage/useLocalStorage.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from "react";
+import { LocalStorageCallbacks, LocalStorageParams } from "./types";
+/**
+ * Works like a normal useState, but saves to local storage and has optional schema validation.
+ *
+ * @template State - The type of the value stored in local storage.
+ * @param {Omit<LocalStorageParams<State>, "state"> & LocalStorageCallbacks} options - The options for useLocalStorage.
+ * @returns {[State, Dispatch<SetStateAction<State>>, () => void]} - A tuple containing the current value, a function to update the value, and a function to remove the value from local storage.
+ */
+export declare const useLocalStorage: <State>({ key, defaultState, schema, onValidationFailed, onValidationSuccessful, }: Omit<LocalStorageParams<State>, "state"> & LocalStorageCallbacks) => [State, Dispatch<SetStateAction<State>>, () => void];

package/src/hooks/localStorage/useLocalStorageEffect.d.ts

@@ -0,0 +1,11 @@
+import { LocalStorageCallbacks, LocalStorageParams } from "./types";
+/**
+ * Custom hook for synchronizing a state variable with local storage,
+ * with optional schema validation and callbacks.
+ *
+ * @template State - The type of the state variable.
+ * @param {LocalStorageParams<State> & LocalStorageCallbacks & { state: State }} params - The parameters for the useLocalStorageEffect hook.
+ */
+export declare const useLocalStorageEffect: <State>({ key, state, defaultState, schema, onValidationFailed, onValidationSuccessful, }: LocalStorageParams<State> & LocalStorageCallbacks & {
+    state: State;
+}) => void;

package/src/hooks/localStorage/useLocalStorageReducer.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch } from "react";
+import { LocalStorageCallbacks, LocalStorageParams } from "./types";
+/**
+ * Works like a normal useReducer, but saves to local storage and has optional schema validation.
+ *
+ * @template State - The type of the state.
+ * @template Action - The type of the action.
+ * @param {LocalStorageParams<State> & LocalStorageCallbacks} params - The parameters for the useLocalStorageReducer function.
+ * @returns {[State, Dispatch<Action>]} - A tuple containing the state and the dispatch function.
+ */
+export declare const useLocalStorageReducer: <State, Action>({ key, defaultState, reducer, schema, onValidationFailed, onValidationSuccessful, }: {
+    reducer: (state: State, action: Action) => State;
+} & LocalStorageParams<State> & LocalStorageCallbacks) => [State, Dispatch<Action>];

package/src/hooks/localStorage/validateState.d.ts

@@ -0,0 +1,13 @@
+import { LocalStorageCallbacks, LocalStorageParams } from "./types";
+type ValidateStateOptions<State> = Required<Pick<LocalStorageParams<State>, "schema">> & {
+    state: State;
+} & LocalStorageCallbacks;
+/**
+ * Validates the state object using a Zod schema.
+ *
+ * @template State - The type of the state.
+ * @param {ValidateStateOptions<State>} params - The parameters for the validateState function.
+ * @returns {boolean} - `true` if the state is valid according to the schema, `false` otherwise.
+ */
+export declare const validateState: <State>({ state, schema, onValidationFailed, onValidationSuccessful, }: ValidateStateOptions<State>) => boolean;
+export {};

package/src/hooks/useClickOutside.d.ts

@@ -1,12 +1,12 @@
-import { RefObject } from "react";
-/**
- * Custom hook to handle click outside events.
- *
- * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
- * @param {Object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
- * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
- * @param {Function} [onClick] - The event handler for the click outside event.
- */
-export declare const useClickOutside: (el: RefObject<HTMLElement> | RefObject<HTMLElement>[], options?: {
-    active?: boolean | undefined;
-} | ((ev: MouseEvent) => void), onClick?: ((ev: MouseEvent) => void) | undefined) => void;
+import { RefObject } from "react";
+/**
+ * Custom hook to handle click outside events.
+ *
+ * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
+ * @param {Object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
+ * @param {Function} [onClick] - The event handler for the click outside event.
+ */
+export declare const useClickOutside: (el: RefObject<HTMLElement> | RefObject<HTMLElement>[], options?: {
+    active?: boolean | undefined;
+} | ((ev: MouseEvent) => void), onClick?: ((ev: MouseEvent) => void) | undefined) => void;

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/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,8 @@
-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 "./components/Menu/MenuItem/MenuItem.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;