@nulogy/components 14.8.2 → 15.0.1

package/dist/src/utils/testing/useConditionalAutoClick.d.ts

@@ -1,60 +1,60 @@
-interface ConditionConfig {
-    /**
-     * Query parameter to check for in the URL
-     * @default "autoClick"
-     */
-    queryParam?: string;
-    /**
-     * When to trigger the auto-click
-     * @default "present"
-     */
-    when?: "present" | "absent";
-}
-interface UseConditionalAutoClickProps {
-    /**
-     * CSS selector for the element to click
-     */
-    selector: string;
-    /**
-     * Condition configuration for when to auto-click
-     */
-    condition?: ConditionConfig;
-    /**
-     * Delay in milliseconds before attempting to click the element
-     * @default 100
-     */
-    delay?: number;
-    /**
-     * Whether to log the action to the console
-     * @default true
-     */
-    logging?: boolean;
-    /**
-     * Callback to execute when the element is found and clicked
-     */
-    onSuccess?: () => void;
-    /**
-     * Callback to execute when the element is not found
-     */
-    onNotFound?: () => void;
-    /**
-     * Callback to execute when an error occurs
-     */
-    onError?: (error: Error) => void;
-}
-/**
- * Hook that conditionally auto-clicks an element based on URL query parameters.
- * Useful for preventing double-clicks during automated testing.
- *
- * @example
- * // Only auto-click when NOT in Cypress testing
- * useConditionalAutoClick({
- *   selector: 'button[aria-label="Menu"]',
- *   condition: {
- *     queryParam: "cypressTest",
- *     when: "absent"
- *   }
- * });
- */
-export default function useConditionalAutoClick({ selector, condition, delay, logging, onSuccess, onNotFound, onError, }: UseConditionalAutoClickProps): void;
-export {};
+interface ConditionConfig {
+    /**
+     * Query parameter to check for in the URL
+     * @default "autoClick"
+     */
+    queryParam?: string;
+    /**
+     * When to trigger the auto-click
+     * @default "present"
+     */
+    when?: "present" | "absent";
+}
+interface UseConditionalAutoClickProps {
+    /**
+     * CSS selector for the element to click
+     */
+    selector: string;
+    /**
+     * Condition configuration for when to auto-click
+     */
+    condition?: ConditionConfig;
+    /**
+     * Delay in milliseconds before attempting to click the element
+     * @default 100
+     */
+    delay?: number;
+    /**
+     * Whether to log the action to the console
+     * @default true
+     */
+    logging?: boolean;
+    /**
+     * Callback to execute when the element is found and clicked
+     */
+    onSuccess?: () => void;
+    /**
+     * Callback to execute when the element is not found
+     */
+    onNotFound?: () => void;
+    /**
+     * Callback to execute when an error occurs
+     */
+    onError?: (error: Error) => void;
+}
+/**
+ * Hook that conditionally auto-clicks an element based on URL query parameters.
+ * Useful for preventing double-clicks during automated testing.
+ *
+ * @example
+ * // Only auto-click when NOT in Cypress testing
+ * useConditionalAutoClick({
+ *   selector: 'button[aria-label="Menu"]',
+ *   condition: {
+ *     queryParam: "cypressTest",
+ *     when: "absent"
+ *   }
+ * });
+ */
+export default function useConditionalAutoClick({ selector, condition, delay, logging, onSuccess, onNotFound, onError, }: UseConditionalAutoClickProps): void;
+export {};

package/dist/src/utils/testing/useConditionalAutoClick.js

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+/**
+ * Hook that conditionally auto-clicks an element based on URL query parameters.
+ * Useful for preventing double-clicks during automated testing.
+ *
+ * @example
+ * // Only auto-click when NOT in Cypress testing
+ * useConditionalAutoClick({
+ *   selector: 'button[aria-label="Menu"]',
+ *   condition: {
+ *     queryParam: "cypressTest",
+ *     when: "absent"
+ *   }
+ * });
+ */
+export default function useConditionalAutoClick({ selector, condition = {}, delay = 100, logging = true, onSuccess, onNotFound, onError, }) {
+    const { queryParam = "autoClick", when = "present" } = condition;
+    // Check if the condition is met
+    const urlParams = new URLSearchParams(window.location.search);
+    const paramExists = urlParams.has(queryParam);
+    // Auto-click when param exists and when="present", or when param doesn't exist and when="absent"
+    const shouldAutoClick = (paramExists && when === "present") || (!paramExists && when === "absent");
+    useEffect(() => {
+        if (!shouldAutoClick)
+            return;
+        const timeoutId = setTimeout(() => {
+            try {
+                const element = document.querySelector(selector);
+                if (element) {
+                    if (logging) {
+                        console.log(`Clicking element matching selector: ${selector}`);
+                    }
+                    element.click();
+                    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+                }
+                else {
+                    if (logging) {
+                        console.warn(`Element with selector "${selector}" not found`);
+                    }
+                    onNotFound === null || onNotFound === void 0 ? void 0 : onNotFound();
+                }
+            }
+            catch (error) {
+                if (logging) {
+                    console.error(`Error clicking element with selector "${selector}":`, error);
+                }
+                onError === null || onError === void 0 ? void 0 : onError(error instanceof Error ? error : new Error(String(error)));
+            }
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [selector, delay, logging, onSuccess, onNotFound, onError, shouldAutoClick]);
+}

package/dist/src/utils/testing/useUrlProps.d.ts

@@ -1,6 +1,6 @@
-/**
- * useUrlProps is a hook that reads URL search parameters and returns them as an object.
- * It is meant to be used in Storybook stories to allow for easy URL-based configuration from Cypress specs.
- *
- */
-export declare function useUrlProps<T extends Record<string, unknown>>(defaultProps?: T): T;
+/**
+ * useUrlProps is a hook that reads URL search parameters and returns them as an object.
+ * It is meant to be used in Storybook stories to allow for easy URL-based configuration from Cypress specs.
+ *
+ */
+export declare function useUrlProps<T extends Record<string, unknown>>(defaultProps?: T): T;

package/dist/src/utils/testing/useUrlProps.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+/**
+ * useUrlProps is a hook that reads URL search parameters and returns them as an object.
+ * It is meant to be used in Storybook stories to allow for easy URL-based configuration from Cypress specs.
+ *
+ */
+export function useUrlProps(defaultProps) {
+    const [props, setProps] = useState(defaultProps || {});
+    useEffect(() => {
+        try {
+            const searchParams = new URLSearchParams(window.location.search);
+            const encodedArgs = searchParams.get("args");
+            if (encodedArgs) {
+                const decodedProps = JSON.parse(decodeURIComponent(encodedArgs));
+                setProps((prev) => (Object.assign(Object.assign({}, prev), decodedProps)));
+            }
+        }
+        catch (error) {
+            console.warn("Failed to parse URL props:", error);
+        }
+    }, []);
+    return props;
+}

package/dist/src/utils/ts/FocusManager.d.ts

@@ -1,17 +1,17 @@
-import React, { ReactNode } from "react";
-type Reference = {
-    current?: JSX.Element;
-    focus?: (...args: any[]) => any;
-};
-type ChildrenHandlers = {
-    focusedIndex: number;
-    handleArrowNavigation: Function;
-    setFocusedIndex: Function;
-};
-type FocusManagerProps = {
-    refs?: Array<Reference>;
-    defaultFocusedIndex: number | null;
-    children: (handlers: ChildrenHandlers) => ReactNode;
-};
-declare const FocusManager: React.FC<React.PropsWithChildren<FocusManagerProps>>;
-export default FocusManager;
+import React, { ReactNode } from "react";
+type Reference = {
+    current?: JSX.Element;
+    focus?: (...args: any[]) => any;
+};
+type ChildrenHandlers = {
+    focusedIndex: number;
+    handleArrowNavigation: Function;
+    setFocusedIndex: Function;
+};
+type FocusManagerProps = {
+    refs?: Array<Reference>;
+    defaultFocusedIndex: number | null;
+    children: (handlers: ChildrenHandlers) => ReactNode;
+};
+declare const FocusManager: React.FC<React.PropsWithChildren<FocusManagerProps>>;
+export default FocusManager;

package/dist/src/utils/ts/FocusManager.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useRef, useState } from "react";
+const FocusManager = ({ children, refs = undefined, defaultFocusedIndex, }) => {
+    const [focusedIndex, setFocusedIndex] = useState(defaultFocusedIndex !== null && defaultFocusedIndex !== void 0 ? defaultFocusedIndex : 0);
+    const prevFocusedIndex = useRef(focusedIndex);
+    const focusPrevious = () => {
+        setFocusedIndex((prevFocusedIndex) => (prevFocusedIndex - 1 + refs.length) % refs.length);
+    };
+    const focusNext = () => {
+        setFocusedIndex((prevFocusedIndex) => (prevFocusedIndex + 1) % refs.length);
+    };
+    const handleArrowNavigation = (e) => {
+        switch (e.key) {
+            case "ArrowLeft":
+                e.preventDefault();
+                focusPrevious();
+                break;
+            case "ArrowRight":
+                e.preventDefault();
+                focusNext();
+                break;
+            default:
+                break;
+        }
+    };
+    useEffect(() => {
+        const updateFocused = () => {
+            refs[focusedIndex].focus();
+        };
+        if (prevFocusedIndex.current !== focusedIndex) {
+            updateFocused();
+            prevFocusedIndex.current = focusedIndex;
+        }
+    }, [focusedIndex, refs]);
+    return (React.createElement(React.Fragment, null, children({
+        focusedIndex,
+        setFocusedIndex,
+        handleArrowNavigation,
+    })));
+};
+export default FocusManager;

package/dist/src/utils/ts/recursivePartial.d.ts

@@ -1,3 +1,3 @@
-export type RecursivePartial<T> = {
-    [P in keyof T]?: RecursivePartial<T[P]>;
-};
+export type RecursivePartial<T> = {
+    [P in keyof T]?: RecursivePartial<T[P]>;
+};

package/dist/src/utils/ts/recursivePartial.js

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/useScrollLock.d.ts

@@ -1,55 +1,55 @@
-import { useLayoutEffect } from "react";
-export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
-/** Hook options. */
-type UseScrollLockOptions = {
-    /**
-     * Whether to lock the scroll initially.
-     * @default true
-     */
-    autoLock?: boolean;
-    /**
-     * The target element to lock the scroll (default is the body element).
-     * @default document.body
-     */
-    lockTarget?: HTMLElement | string;
-    /**
-     * Whether to prevent width reflow when locking the scroll.
-     * @default true
-     */
-    widthReflow?: boolean;
-};
-/** Hook return type. */
-type UseScrollLockReturn = {
-    /** Whether the scroll is locked. */
-    isLocked: boolean;
-    /** Lock the scroll. */
-    lock: () => void;
-    /** Unlock the scroll. */
-    unlock: () => void;
-};
-/**
- * A custom hook that locks and unlocks scroll.
- * @param {UseScrollLockOptions} [options] - Options to configure the hook, by default it will lock the scroll automatically.
- * @returns {UseScrollLockReturn} - An object containing the lock and unlock functions.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-scroll-lock)
- * @example
- * ```tsx
- * // Lock the scroll when the modal is mounted, and unlock it when it's unmounted
- * useScrollLock()
- * ```
- * @example
- * ```tsx
- * // Manually lock and unlock the scroll
- * const { lock, unlock } = useScrollLock({ autoLock: false })
- *
- * return (
- *  <div>
- *   <button onClick={lock}>Lock</button>
- *   <button onClick={unlock}>Unlock</button>
- *  </div>
- * )
- * ```
- */
-export declare function useScrollLock(options?: UseScrollLockOptions): UseScrollLockReturn;
-export {};
+import { useEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+/** Hook options. */
+type UseScrollLockOptions = {
+    /**
+     * Whether to lock the scroll initially.
+     * @default true
+     */
+    autoLock?: boolean;
+    /**
+     * The target element to lock the scroll (default is the body element).
+     * @default document.body
+     */
+    lockTarget?: HTMLElement | string;
+    /**
+     * Whether to prevent width reflow when locking the scroll.
+     * @default true
+     */
+    widthReflow?: boolean;
+};
+/** Hook return type. */
+type UseScrollLockReturn = {
+    /** Whether the scroll is locked. */
+    isLocked: boolean;
+    /** Lock the scroll. */
+    lock: () => void;
+    /** Unlock the scroll. */
+    unlock: () => void;
+};
+/**
+ * A custom hook that locks and unlocks scroll.
+ * @param {UseScrollLockOptions} [options] - Options to configure the hook, by default it will lock the scroll automatically.
+ * @returns {UseScrollLockReturn} - An object containing the lock and unlock functions.
+ * @public
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-scroll-lock)
+ * @example
+ * ```tsx
+ * // Lock the scroll when the modal is mounted, and unlock it when it's unmounted
+ * useScrollLock()
+ * ```
+ * @example
+ * ```tsx
+ * // Manually lock and unlock the scroll
+ * const { lock, unlock } = useScrollLock({ autoLock: false })
+ *
+ * return (
+ *  <div>
+ *   <button onClick={lock}>Lock</button>
+ *   <button onClick={unlock}>Unlock</button>
+ *  </div>
+ * )
+ * ```
+ */
+export declare function useScrollLock(options?: UseScrollLockOptions): UseScrollLockReturn;
+export {};

package/dist/src/utils/useScrollLock.js

@@ -0,0 +1,81 @@
+import { useRef, useState } from "react";
+import { useEffect, useLayoutEffect } from "react";
+export const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const IS_SERVER = typeof window === "undefined";
+/**
+ * A custom hook that locks and unlocks scroll.
+ * @param {UseScrollLockOptions} [options] - Options to configure the hook, by default it will lock the scroll automatically.
+ * @returns {UseScrollLockReturn} - An object containing the lock and unlock functions.
+ * @public
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-scroll-lock)
+ * @example
+ * ```tsx
+ * // Lock the scroll when the modal is mounted, and unlock it when it's unmounted
+ * useScrollLock()
+ * ```
+ * @example
+ * ```tsx
+ * // Manually lock and unlock the scroll
+ * const { lock, unlock } = useScrollLock({ autoLock: false })
+ *
+ * return (
+ *  <div>
+ *   <button onClick={lock}>Lock</button>
+ *   <button onClick={unlock}>Unlock</button>
+ *  </div>
+ * )
+ * ```
+ */
+export function useScrollLock(options = {}) {
+    const { autoLock = true, lockTarget, widthReflow = true } = options;
+    const [isLocked, setIsLocked] = useState(false);
+    const target = useRef(null);
+    const originalStyle = useRef(null);
+    const lock = () => {
+        if (target.current) {
+            const { overflow, paddingRight } = target.current.style;
+            // Save the original styles
+            originalStyle.current = { overflow, paddingRight };
+            // Prevent width reflow
+            if (widthReflow) {
+                // Use window inner width if body is the target as global scrollbar isn't part of the document
+                const offsetWidth = target.current === document.body ? window.innerWidth : target.current.offsetWidth;
+                // Get current computed padding right in pixels
+                const currentPaddingRight = parseInt(window.getComputedStyle(target.current).paddingRight, 10) || 0;
+                const scrollbarWidth = offsetWidth - target.current.scrollWidth;
+                target.current.style.paddingRight = `${scrollbarWidth + currentPaddingRight}px`;
+            }
+            // Lock the scroll
+            target.current.style.overflow = "hidden";
+            setIsLocked(true);
+        }
+    };
+    const unlock = () => {
+        if (target.current && originalStyle.current) {
+            target.current.style.overflow = originalStyle.current.overflow;
+            // Only reset padding right if we changed it
+            if (widthReflow) {
+                target.current.style.paddingRight = originalStyle.current.paddingRight;
+            }
+        }
+        setIsLocked(false);
+    };
+    useIsomorphicLayoutEffect(() => {
+        if (IS_SERVER)
+            return;
+        if (lockTarget) {
+            target.current = typeof lockTarget === "string" ? document.querySelector(lockTarget) : lockTarget;
+        }
+        if (!target.current) {
+            target.current = document.body;
+        }
+        if (autoLock) {
+            lock();
+        }
+        return () => {
+            unlock();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autoLock, lockTarget, widthReflow]);
+    return { isLocked, lock, unlock };
+}

package/dist/src/utils/useWindowDimension.story.d.ts

@@ -0,0 +1,6 @@
+declare namespace _default {
+    const title: string;
+}
+export default _default;
+export function _UseWindowDimensions(): React.JSX.Element;
+import React from "react";

package/dist/src/utils/useWindowDimension.story.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Heading4, Text } from "../Type";
+import useWindowDimensions from "./useWindowDimensions";
+export default {
+    title: "utils/useWindowDimensions",
+};
+export const _UseWindowDimensions = () => {
+    const { width, height, widthBreakpoints } = useWindowDimensions();
+    return (React.createElement(Box, { width: "400px" },
+        React.createElement(Heading4, null, "Current window dimensions:"),
+        React.createElement(Flex, { fontSize: "large", justifyContent: "space-between", my: "half" },
+            React.createElement(Text, null, "width:"),
+            React.createElement(Text, null, String(width))),
+        React.createElement(Flex, { fontSize: "large", justifyContent: "space-between", my: "half" },
+            React.createElement(Text, null, "height:"),
+            React.createElement(Text, null, String(height))),
+        React.createElement("hr", null),
+        React.createElement(Box, { mt: "x1" }, Object.keys(widthBreakpoints).map((key) => (React.createElement(Flex, { justifyContent: "space-between", my: "half", key: key },
+            React.createElement(Text, null,
+                key,
+                ":"),
+            React.createElement(Text, null, String(widthBreakpoints[key]))))))));
+};

package/dist/src/utils/useWindowDimensions.d.ts

@@ -0,0 +1,39 @@
+export function getWindowDimensionInfo(width: any, height: any, theme: any): {
+    width: any;
+    height: any;
+    widthBreakpoints: {
+        xlargeBreakpoint: number;
+        largeBreakpoint: number;
+        mediumBreakpoint: number;
+        smallBreakpoint: number;
+        xSmallBreakpoint: number;
+        isXlargeScreen: boolean;
+        isLargeScreen: boolean;
+        isMediumScreen: boolean;
+        isSmallScreen: boolean;
+        isSmallestScreen: boolean;
+        isGreaterThanLargeScreen: boolean;
+        isGreaterThanMediumScreen: boolean;
+        isGreaterThanSmallScreen: boolean;
+    };
+};
+export default useWindowDimensions;
+declare function useWindowDimensions(): {
+    width: any;
+    height: any;
+    widthBreakpoints: {
+        xlargeBreakpoint: number;
+        largeBreakpoint: number;
+        mediumBreakpoint: number;
+        smallBreakpoint: number;
+        xSmallBreakpoint: number;
+        isXlargeScreen: boolean;
+        isLargeScreen: boolean;
+        isMediumScreen: boolean;
+        isSmallScreen: boolean;
+        isSmallestScreen: boolean;
+        isGreaterThanLargeScreen: boolean;
+        isGreaterThanMediumScreen: boolean;
+        isGreaterThanSmallScreen: boolean;
+    };
+};

package/dist/src/utils/useWindowDimensions.js

@@ -0,0 +1,48 @@
+import { useState, useEffect } from "react";
+import convertPxToNumber from "./convertPxToNumber";
+import { useTheme } from "styled-components";
+const xlargeBreakpoint = (theme) => convertPxToNumber(theme.breakpoints.extraLarge);
+const largeBreakpoint = (theme) => convertPxToNumber(theme.breakpoints.large);
+const mediumBreakpoint = (theme) => convertPxToNumber(theme.breakpoints.medium);
+const smallBreakpoint = (theme) => convertPxToNumber(theme.breakpoints.small);
+const xSmallBreakpoint = (theme) => convertPxToNumber(theme.breakpoints.extraSmall);
+export const getWindowDimensionInfo = (width, height, theme) => ({
+    width,
+    height,
+    widthBreakpoints: {
+        xlargeBreakpoint: xlargeBreakpoint(theme),
+        largeBreakpoint: largeBreakpoint(theme),
+        mediumBreakpoint: mediumBreakpoint(theme),
+        smallBreakpoint: smallBreakpoint(theme),
+        xSmallBreakpoint: xSmallBreakpoint(theme),
+        isXlargeScreen: width >= xlargeBreakpoint(theme),
+        isLargeScreen: width >= largeBreakpoint(theme) && width < xlargeBreakpoint(theme),
+        isMediumScreen: width >= mediumBreakpoint(theme) && width < largeBreakpoint(theme),
+        isSmallScreen: width >= smallBreakpoint(theme) && width < mediumBreakpoint(theme),
+        isSmallestScreen: width >= xSmallBreakpoint(theme) && width < smallBreakpoint(theme),
+        isGreaterThanLargeScreen: width >= largeBreakpoint(theme),
+        isGreaterThanMediumScreen: width >= mediumBreakpoint(theme),
+        isGreaterThanSmallScreen: width >= smallBreakpoint(theme),
+    },
+});
+const useWindowDimensions = () => {
+    const hasWindow = typeof window !== "undefined";
+    const theme = useTheme();
+    const getWindowDimensions = () => {
+        const width = hasWindow ? window.innerWidth : null;
+        const height = hasWindow ? window.innerHeight : null;
+        return getWindowDimensionInfo(width, height, theme);
+    };
+    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+    useEffect(() => {
+        if (hasWindow) {
+            const handleResize = () => {
+                setWindowDimensions(getWindowDimensions());
+            };
+            window.addEventListener("resize", handleResize);
+            return () => window.removeEventListener("resize", handleResize);
+        }
+    });
+    return windowDimensions;
+};
+export default useWindowDimensions;

package/dist/src/utils/withMenuState.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-export type WithMenuStateProps = {
-    children?: any;
-    showDelay?: string | number;
-    hideDelay?: string | number;
-    defaultOpen?: boolean;
-};
-export type AcceptsMenuStateProps = {
-    menuState?: any;
-};
-declare function withMenuState<P extends AcceptsMenuStateProps>(MenuComponent: React.JSXElementConstructor<P>): React.JSXElementConstructor<P & WithMenuStateProps>;
-export default withMenuState;
+import React from "react";
+export type WithMenuStateProps = {
+    children?: any;
+    showDelay?: string | number;
+    hideDelay?: string | number;
+    defaultOpen?: boolean;
+};
+export type AcceptsMenuStateProps = {
+    menuState?: any;
+};
+declare function withMenuState<P extends AcceptsMenuStateProps>(MenuComponent: React.JSXElementConstructor<P>): React.JSXElementConstructor<P & WithMenuStateProps>;
+export default withMenuState;