react-restyle-components 0.3.47 → 0.3.48

package/lib/src/core-components/src/utils/helpers/index.js

@@ -0,0 +1,5 @@
+export * from './attachSubComponents';
+export * from './getChildByType';
+export * from './flattenChildren';
+export * from './isComponentType';
+export * from './separateChildrenByType';

package/lib/src/core-components/src/utils/helpers/isComponentType.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+/**
+ * Checks if a ReactNode is an Element of some component.
+ * Supports components that are styled using styled-components.
+ * Returns false if element is not a ReactElement.
+ *
+ * @param element a react node to check
+ * @param componentType the component type to check
+ * @returns true if element is an element with type == componentType
+ */
+export declare const isComponentType: (element: React.ReactNode, componentType: React.ComponentType) => boolean;
+//# sourceMappingURL=isComponentType.d.ts.map

package/lib/src/core-components/src/utils/helpers/isComponentType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isComponentType.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/helpers/isComponentType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,YACjB,MAAM,SAAS,iBACT,MAAM,aAAa,KACjC,OAMF,CAAC"}

package/lib/src/core-components/src/utils/helpers/isComponentType.js

@@ -0,0 +1,16 @@
+import React from 'react';
+/**
+ * Checks if a ReactNode is an Element of some component.
+ * Supports components that are styled using styled-components.
+ * Returns false if element is not a ReactElement.
+ *
+ * @param element a react node to check
+ * @param componentType the component type to check
+ * @returns true if element is an element with type == componentType
+ */
+export const isComponentType = (element, componentType) => {
+    if (!React.isValidElement(element))
+        return false;
+    return (element.type === componentType ||
+        element.type.target === componentType);
+};

package/lib/src/core-components/src/utils/helpers/separateChildrenByType.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const separateChildrenByType: (children: React.ReactNode, ...componentTypes: React.ComponentType[]) => React.ReactNode[][];
+//# sourceMappingURL=separateChildrenByType.d.ts.map

package/lib/src/core-components/src/utils/helpers/separateChildrenByType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separateChildrenByType.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/helpers/separateChildrenByType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,sBAAsB,aACvB,MAAM,SAAS,qBACN,MAAM,aAAa,EAAE,KACvC,MAAM,SAAS,EAAE,EAgBM,CAAC"}

package/lib/src/core-components/src/utils/helpers/separateChildrenByType.js

@@ -0,0 +1,12 @@
+import { isComponentType } from './isComponentType';
+import { flattenChildren } from './flattenChildren';
+export const separateChildrenByType = (children, ...componentTypes) => flattenChildren(children).reduce((acc, element) => {
+    const typeIndex = componentTypes.findIndex((componentType) => isComponentType(element, componentType));
+    if (typeIndex !== -1) {
+        acc[typeIndex].push(element);
+    }
+    else {
+        acc[componentTypes.length].push(element);
+    }
+    return acc;
+}, [...componentTypes.map(() => []), []]);

package/lib/src/core-components/src/utils/helpers/separateChildrenByType.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=separateChildrenByType.test.d.ts.map

package/lib/src/core-components/src/utils/helpers/separateChildrenByType.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separateChildrenByType.test.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/helpers/separateChildrenByType.test.tsx"],"names":[],"mappings":""}

package/lib/src/core-components/src/utils/helpers/separateChildrenByType.test.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from 'styled-components';
+import { separateChildrenByType } from './separateChildrenByType';
+const Component1 = () => _jsx("div", { children: "Component1" });
+const Component2 = () => _jsx("div", { children: "Component2" });
+const Component3 = () => _jsx("div", { children: "Component3" });
+const Component4 = styled.div ``;
+const randomId = () => Math.random().toString(36).substring(7);
+const make = (...types) => types.map((C, i) => _jsx(C, { "data-testid": randomId }, i));
+const expectComponentsToMatch = (actual, expected) => {
+    if (Array.isArray(expected)) {
+        expect(actual.length).toBe(expected.length);
+        actual.forEach((actualComponent, index) => {
+            expectComponentsToMatch(actualComponent, expected[index]);
+        });
+    }
+    else {
+        expect(actual.props['data-testid']).toBe(expected.props['data-testid']);
+    }
+};
+// Write unit tests for separateChildrenByType
+describe('separateChildrenByType', () => {
+    it('should work with 1 component type', () => {
+        const children = make(Component1, Component2, Component3, Component4);
+        const [component1s, others] = separateChildrenByType(children, Component1);
+        expectComponentsToMatch(component1s, [children[0]]);
+        expectComponentsToMatch(others, children.slice(1));
+    });
+    it('should work with 2 component type', () => {
+        const children = make(Component1, Component2, Component3, Component4);
+        const [component2s, component3s, others] = separateChildrenByType(children, Component2, Component3);
+        expectComponentsToMatch(component2s, [children[1]]);
+        expectComponentsToMatch(component3s, [children[2]]);
+        expectComponentsToMatch(others, [children[0], children[3]]);
+    });
+    it('should work with styled-components', () => {
+        const MyComponent = styled(Component3) ``;
+        const children = make(Component1, Component2, Component3, Component4, MyComponent);
+        const [component3s, component4s, others] = separateChildrenByType(children, Component3, Component4);
+        expectComponentsToMatch(component3s, [children[2], children[4]]);
+        expectComponentsToMatch(component4s, [children[3]]);
+        expectComponentsToMatch(others, [children[0], children[1]]);
+    });
+    it('should work with duplicates', () => {
+        const children = make(Component1, Component2, Component1, Component2, Component1);
+        const [component1s, others] = separateChildrenByType(children, Component1);
+        expectComponentsToMatch(component1s, [
+            children[0],
+            children[2],
+            children[4],
+        ]);
+        expectComponentsToMatch(others, [children[1], children[3]]);
+    });
+    it('should work with fragments', () => {
+        const outerChildren = make(Component1, Component2, Component3);
+        const innerChildren = make(Component3, Component4);
+        const children = (_jsxs(_Fragment, { children: [outerChildren, _jsx(_Fragment, { children: innerChildren })] }));
+        const [component3s, others] = separateChildrenByType(children, Component3);
+        expectComponentsToMatch(component3s, [outerChildren[2], innerChildren[0]]);
+        expectComponentsToMatch(others, [
+            outerChildren[0],
+            outerChildren[1],
+            innerChildren[1],
+        ]);
+    });
+});

package/lib/src/core-components/src/utils/hooks/index.d.ts

@@ -0,0 +1,18 @@
+export * from './useClickOutside';
+export * from './useCombinedRefs';
+export * from './useDebouncedCallback';
+export * from './useDebouncedValue';
+export * from './useDeprecation';
+export * from './useDeviceDetect';
+export * from './useDeviceForm';
+export * from './useDisableBodyScroll';
+export * from './useHoverState';
+export * from './useId';
+export * from './useIsBrowser';
+export * from './useMediaQuery';
+export * from './useOverflow';
+export * from './useSafeLayoutEffect';
+export * from './useScrollingUp';
+export * from './useTrapFocus';
+export * from './useWindowDimensions';
+//# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/utils/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/index.ts"],"names":[],"mappings":"AAEA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC"}

package/lib/src/core-components/src/utils/hooks/index.js

@@ -0,0 +1,18 @@
+'use client';
+export * from './useClickOutside';
+export * from './useCombinedRefs';
+export * from './useDebouncedCallback';
+export * from './useDebouncedValue';
+export * from './useDeprecation';
+export * from './useDeviceDetect';
+export * from './useDeviceForm';
+export * from './useDisableBodyScroll';
+export * from './useHoverState';
+export * from './useId';
+export * from './useIsBrowser';
+export * from './useMediaQuery';
+export * from './useOverflow';
+export * from './useSafeLayoutEffect';
+export * from './useScrollingUp';
+export * from './useTrapFocus';
+export * from './useWindowDimensions';

package/lib/src/core-components/src/utils/hooks/useClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+export declare function useClickOutside<T extends HTMLElement = any>(handler: () => void, targetRef?: RefObject<T>): RefObject<T>;
+//# sourceMappingURL=useClickOutside.d.ts.map

package/lib/src/core-components/src/utils/hooks/useClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAmB,MAAM,OAAO,CAAC;AAIrE,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,EACzD,OAAO,EAAE,MAAM,IAAI,EACnB,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,GACvB,SAAS,CAAC,CAAC,CAAC,CAmBd"}

package/lib/src/core-components/src/utils/hooks/useClickOutside.js

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+const CLICK_EVENTS = ['mousedown', 'touchstart'];
+export function useClickOutside(handler, targetRef) {
+    const defaultRef = useRef(null);
+    const ref = targetRef ?? defaultRef;
+    useEffect(() => {
+        const listener = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                handler();
+            }
+        };
+        CLICK_EVENTS.forEach((fn) => document.addEventListener(fn, listener));
+        return () => {
+            CLICK_EVENTS.forEach((fn) => document.removeEventListener(fn, listener));
+        };
+    }, [ref, handler]);
+    return ref;
+}

package/lib/src/core-components/src/utils/hooks/useCombinedRefs.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function useCombinedRefs<T>(...refs: Array<React.MutableRefObject<T> | ((instance: T) => void) | null>): React.RefCallback<T>;
+//# sourceMappingURL=useCombinedRefs.d.ts.map

package/lib/src/core-components/src/utils/hooks/useCombinedRefs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCombinedRefs.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useCombinedRefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,wBAAgB,eAAe,CAAC,CAAC,EAE/B,GAAG,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,GACzE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAYtB"}

package/lib/src/core-components/src/utils/hooks/useCombinedRefs.js

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+export function useCombinedRefs(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+...refs) {
+    return useCallback((value) => {
+        refs.forEach((ref) => {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else {
+                ref.current = value;
+            }
+        });
+    }, []);
+}

package/lib/src/core-components/src/utils/hooks/useDebouncedCallback.d.ts

@@ -0,0 +1,3 @@
+import { DependencyList } from 'react';
+export declare function useDebouncedCallback(func: (...args: any) => void, deps: DependencyList, wait: number): (...args: any[]) => void;
+//# sourceMappingURL=useDebouncedCallback.d.ts.map

package/lib/src/core-components/src/utils/hooks/useDebouncedCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedCallback.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useDebouncedCallback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5D,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAC5B,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,MAAM,aAKA,GAAG,EAAE,UAWlB"}

package/lib/src/core-components/src/utils/hooks/useDebouncedCallback.js

@@ -0,0 +1,12 @@
+import { useRef, useCallback } from 'react';
+export function useDebouncedCallback(func, deps, wait) {
+    const timeout = useRef();
+    return useCallback((...args) => {
+        const later = () => {
+            clearTimeout(timeout.current);
+            func(...args);
+        };
+        clearTimeout(timeout.current);
+        timeout.current = setTimeout(later, wait);
+    }, [func, wait, ...deps]);
+}

package/lib/src/core-components/src/utils/hooks/useDebouncedValue.d.ts

@@ -0,0 +1,4 @@
+export declare function useDebouncedValue<T = any>(value: T, options?: {
+    wait: number;
+}): readonly [T, () => void];
+//# sourceMappingURL=useDebouncedValue.d.ts.map

package/lib/src/core-components/src/utils/hooks/useDebouncedValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedValue.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useDebouncedValue.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO;;CAAc,4BAsBzE"}

package/lib/src/core-components/src/utils/hooks/useDebouncedValue.js

@@ -0,0 +1,20 @@
+import { useEffect, useState, useRef } from 'react';
+export function useDebouncedValue(value, options = { wait: 300 }) {
+    const [debouncedValue, setValue] = useState(value);
+    const mountedRef = useRef(false);
+    const timeoutRef = useRef(null);
+    const cancel = () => window.clearTimeout(timeoutRef.current);
+    useEffect(() => {
+        if (mountedRef.current) {
+            cancel();
+            timeoutRef.current = window.setTimeout(() => {
+                setValue(value);
+            }, options.wait);
+        }
+    }, [value]);
+    useEffect(() => {
+        mountedRef.current = true;
+        return cancel;
+    }, []);
+    return [debouncedValue, cancel];
+}

package/lib/src/core-components/src/utils/hooks/useDeprecation.d.ts

@@ -0,0 +1,30 @@
+export declare const isReactDevelopment: () => boolean;
+type DeprecateArgs = {
+    name: string;
+    version: string;
+    message: string;
+};
+export declare const useDeprecation: ({ name, message, version }: DeprecateArgs) => void;
+type ComponentDeprecationArgs = {
+    name: string;
+    version: string;
+    alternative?: string;
+};
+export declare const useComponentDeprecation: ({ name, version, alternative, }: ComponentDeprecationArgs) => void;
+type PropDeprecationArgs = {
+    name: string;
+    version: string;
+    alternative?: string;
+    value?: any;
+};
+export declare const usePropDeprecation: ({ name, value, version, alternative, }: PropDeprecationArgs) => void;
+type PropValueDeprecationArgs<T> = {
+    component: string;
+    prop: string;
+    currentValue: T;
+    deprecatedValues: T[];
+    version: string;
+};
+export declare const usePropValueDeprecation: <T>({ component, prop, currentValue, deprecatedValues, version, }: PropValueDeprecationArgs<T>) => void;
+export {};
+//# sourceMappingURL=useDeprecation.d.ts.map

package/lib/src/core-components/src/utils/hooks/useDeprecation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDeprecation.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useDeprecation.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,eAA8C,CAAC;AAE9E,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,cAAc,+BAAgC,aAAa,SAQvE,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,oCAIjC,wBAAwB,SAQ1B,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,kBAAkB,2CAK5B,mBAAmB,SAUrB,CAAC;AAEF,KAAK,wBAAwB,CAAC,CAAC,IAAI;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,CAAC,CAAC;IAChB,gBAAgB,EAAE,CAAC,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAenC,CAAC"}

package/lib/src/core-components/src/utils/hooks/useDeprecation.js

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useEffect } from 'react';
+// Since we have no module bundler it's the only way to detect dev env
+export const isReactDevelopment = () => '_self' in React.createElement('div');
+export const useDeprecation = ({ name, message, version }) => {
+    if (!isReactDevelopment())
+        return;
+    useEffect(() => {
+        console.warn(`DEPRECATED: ${name} is deprecated and will be removed in version ${version}. ${message}`);
+    }, []);
+};
+export const useComponentDeprecation = ({ name, version, alternative, }) => {
+    useDeprecation({
+        name,
+        version,
+        message: alternative
+            ? `Please use ${alternative} component instead.`
+            : `Please remove it carefully.`,
+    });
+};
+export const usePropDeprecation = ({ name, value, version, alternative, }) => {
+    if (value) {
+        useDeprecation({
+            name,
+            version,
+            message: alternative
+                ? `Please use ${alternative} prop instead.`
+                : `Please remove it carefully.`,
+        });
+    }
+};
+export const usePropValueDeprecation = ({ component, prop, currentValue, deprecatedValues, version, }) => {
+    useEffect(() => {
+        if (!isReactDevelopment())
+            return;
+        if (deprecatedValues.includes(currentValue)) {
+            console.warn(`DEPRECATED: The ${currentValue} value for the ${prop} prop on the ${component} component is deprecated and will be removed in version ${version}.`);
+        }
+    }, [currentValue]);
+};

package/lib/src/core-components/src/utils/hooks/useDeviceDetect.d.ts

@@ -0,0 +1,5 @@
+export declare const useDeviceDetect: () => {
+    isMobile: boolean;
+    isFirefox: boolean;
+};
+//# sourceMappingURL=useDeviceDetect.d.ts.map

package/lib/src/core-components/src/utils/hooks/useDeviceDetect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDeviceDetect.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useDeviceDetect.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;CAWpB,CAAC"}

package/lib/src/core-components/src/utils/hooks/useDeviceDetect.js

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+export const useDeviceDetect = () => useMemo(() => {
+    if (typeof window !== 'undefined') {
+        return {
+            isMobile: !!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i),
+            isFirefox: !!navigator.userAgent.toLowerCase().includes('firefox'),
+        };
+    }
+    return { isMobile: false, isFirefox: false };
+}, []);

package/lib/src/core-components/src/utils/hooks/useDeviceForm.d.ts

@@ -0,0 +1,8 @@
+export declare enum DeviceFormFactor {
+    Mobile = "mobile",
+    Tablet = "tablet",
+    Laptop = "laptop",
+    Desktop = "desktop"
+}
+export declare function useDeviceForm(): DeviceFormFactor;
+//# sourceMappingURL=useDeviceForm.d.ts.map

package/lib/src/core-components/src/utils/hooks/useDeviceForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDeviceForm.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useDeviceForm.ts"],"names":[],"mappings":"AAGA,oBAAY,gBAAgB;IAC1B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB;AAED,wBAAgB,aAAa,qBAW5B"}

package/lib/src/core-components/src/utils/hooks/useDeviceForm.js

@@ -0,0 +1,24 @@
+import { useWindowDimensions } from './useWindowDimensions';
+import { Size } from '../abstracts';
+export var DeviceFormFactor;
+(function (DeviceFormFactor) {
+    DeviceFormFactor["Mobile"] = "mobile";
+    DeviceFormFactor["Tablet"] = "tablet";
+    DeviceFormFactor["Laptop"] = "laptop";
+    DeviceFormFactor["Desktop"] = "desktop";
+})(DeviceFormFactor || (DeviceFormFactor = {}));
+export function useDeviceForm() {
+    const { width } = useWindowDimensions();
+    if (width < Size.MD) {
+        return DeviceFormFactor.Mobile;
+    }
+    else if (width < Size.MD2) {
+        return DeviceFormFactor.Tablet;
+    }
+    else if (width < Size.XL) {
+        return DeviceFormFactor.Laptop;
+    }
+    else {
+        return DeviceFormFactor.Desktop;
+    }
+}

package/lib/src/core-components/src/utils/hooks/useDisableBodyScroll.d.ts

@@ -0,0 +1,4 @@
+export declare const useDisableBackgroundScroll: (shouldDisableScroll: boolean, backgroundElement?: HTMLElement) => void;
+/** @deprecated Prefer `useDisableBackgroundScroll` instead */
+export declare const useDisableBodyScroll: (shouldDisableScroll: boolean, backgroundElement?: HTMLElement) => void;
+//# sourceMappingURL=useDisableBodyScroll.d.ts.map

package/lib/src/core-components/src/utils/hooks/useDisableBodyScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useDisableBodyScroll.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B,wBAChB,OAAO,sBACR,WAAW,SAahC,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,oBAAoB,wBAjBV,OAAO,sBACR,WAAW,SAgB6B,CAAC"}

package/lib/src/core-components/src/utils/hooks/useDisableBodyScroll.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useId } from './useId';
+export const useDisableBackgroundScroll = (shouldDisableScroll, backgroundElement) => {
+    const className = useId('disable-scroll');
+    useEffect(() => {
+        if (!shouldDisableScroll)
+            return;
+        backgroundElement ??= document.body;
+        backgroundElement.classList.add(className);
+        return () => {
+            backgroundElement?.classList.remove(className);
+        };
+    }, [shouldDisableScroll, backgroundElement]);
+};
+/** @deprecated Prefer `useDisableBackgroundScroll` instead */
+export const useDisableBodyScroll = useDisableBackgroundScroll;

package/lib/src/core-components/src/utils/hooks/useHoverState.d.ts

@@ -0,0 +1,11 @@
+export type HoverState = 'default' | 'hover' | 'active' | 'disabled';
+type UseHoverStateReturnValue = {
+    hoverState: HoverState;
+    onMouseOver: () => void;
+    onMouseOut: () => void;
+    onMouseDown: () => void;
+    onMouseUp: () => void;
+};
+export declare const useHoverState: (disabled?: boolean) => UseHoverStateReturnValue;
+export {};
+//# sourceMappingURL=useHoverState.d.ts.map

package/lib/src/core-components/src/utils/hooks/useHoverState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHoverState.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useHoverState.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErE,KAAK,wBAAwB,GAAG;IAC9B,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,aAAa,0BAAuB,wBAuChD,CAAC"}

package/lib/src/core-components/src/utils/hooks/useHoverState.js

@@ -0,0 +1,36 @@
+import { useState, useCallback, useEffect } from 'react';
+export const useHoverState = (disabled = false) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const [isActive, setIsActive] = useState(false);
+    const onMouseOver = useCallback(() => {
+        setIsHovered(true);
+    }, []);
+    const onMouseOut = useCallback(() => {
+        setIsHovered(false);
+    }, []);
+    const onMouseDown = useCallback(() => {
+        setIsActive(true);
+    }, []);
+    const onMouseUp = useCallback(() => {
+        setIsActive(false);
+    }, []);
+    useEffect(() => {
+        const event = () => {
+            if (isActive) {
+                onMouseUp();
+            }
+        };
+        document.addEventListener('mouseup', event);
+        return () => {
+            document.removeEventListener('mouseup', event);
+        };
+    }, [isActive, onMouseUp]);
+    const hoverState = disabled
+        ? 'disabled'
+        : isActive
+            ? 'active'
+            : isHovered
+                ? 'hover'
+                : 'default';
+    return { hoverState, onMouseOver, onMouseOut, onMouseDown, onMouseUp };
+};

package/lib/src/core-components/src/utils/hooks/useId.d.ts

@@ -0,0 +1,2 @@
+export declare const useId: (prefix: string, id?: string) => string;
+//# sourceMappingURL=useId.d.ts.map

package/lib/src/core-components/src/utils/hooks/useId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useId.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useId.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK,WAAY,MAAM,OAAO,MAAM,WAIhD,CAAC"}

package/lib/src/core-components/src/utils/hooks/useId.js

@@ -0,0 +1,7 @@
+// import { useId as useReachId } from '@reach/auto-id';
+import { useId as useReactId } from 'react';
+const PREFIX = 'tech-abl-ui';
+export const useId = (prefix, id) => {
+    const randId = `${PREFIX}-${prefix}-${useReactId()}`;
+    return id ?? randId;
+};

package/lib/src/core-components/src/utils/hooks/useIsBrowser.d.ts

@@ -0,0 +1,2 @@
+export declare const useIsBrowser: () => boolean;
+//# sourceMappingURL=useIsBrowser.d.ts.map

package/lib/src/core-components/src/utils/hooks/useIsBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsBrowser.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useIsBrowser.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,eAQxB,CAAC"}

package/lib/src/core-components/src/utils/hooks/useIsBrowser.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+// sometimes components cannot be rendered on the server.
+// so using `useEffect` ensures that the code is only rendered on the client side
+// use this hook to avoid hydration errors
+export const useIsBrowser = () => {
+    const [isBrowser, setIsBrowser] = useState(false);
+    useEffect(() => {
+        setIsBrowser(true);
+    }, []);
+    return isBrowser;
+};

package/lib/src/core-components/src/utils/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+export declare const useMediaQuery: (query: string) => boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/lib/src/core-components/src/utils/hooks/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,UAAW,MAAM,YAgB1C,CAAC"}

package/lib/src/core-components/src/utils/hooks/useMediaQuery.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+export const useMediaQuery = (query) => {
+    if (typeof window === 'undefined')
+        return false;
+    const [matches, setMatches] = useState(false);
+    useEffect(() => {
+        const media = window.matchMedia(query);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = () => setMatches(media.matches);
+        window.addEventListener('resize', listener);
+        return () => window.removeEventListener('resize', listener);
+    }, [matches, query]);
+    return matches;
+};

package/lib/src/core-components/src/utils/hooks/useOverflow.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+export declare const useOverflow: (ref: RefObject<HTMLElement>) => boolean;
+//# sourceMappingURL=useOverflow.d.ts.map

package/lib/src/core-components/src/utils/hooks/useOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflow.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,SAAS,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,WAAW,QAAS,UAAU,WAAW,CAAC,YAqBtD,CAAC"}

package/lib/src/core-components/src/utils/hooks/useOverflow.js

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import { useSafeLayoutEffect } from './useSafeLayoutEffect';
+export const useOverflow = (ref) => {
+    const [isOverflow, setIsOverflow] = useState(false);
+    useSafeLayoutEffect(() => {
+        const { current } = ref;
+        const trigger = () => {
+            if (!current)
+                return;
+            const hasOverflow = current.scrollHeight > current.clientHeight;
+            setIsOverflow(hasOverflow);
+        };
+        let observer;
+        if (current) {
+            observer = new ResizeObserver(trigger);
+            observer.observe(current);
+            trigger();
+        }
+        return () => observer?.disconnect();
+    });
+    return isOverflow;
+};

package/lib/src/core-components/src/utils/hooks/useSafeLayoutEffect.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Version of useLayoutEffect that doesn't throw errors in SSR.
+ */
+export declare const useSafeLayoutEffect: typeof React.useEffect;
+//# sourceMappingURL=useSafeLayoutEffect.d.ts.map

package/lib/src/core-components/src/utils/hooks/useSafeLayoutEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSafeLayoutEffect.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/utils/hooks/useSafeLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,eAAO,MAAM,mBAAmB,wBACyC,CAAC"}

package/lib/src/core-components/src/utils/hooks/useSafeLayoutEffect.js

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Version of useLayoutEffect that doesn't throw errors in SSR.
+ */
+export const useSafeLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;