@bspk/ui 1.1.32 → 1.1.34

package/src/hooks/useFloating.ts

@@ -1,6 +1,9 @@
 /**
  * Custom hook to manage the positioning of a floating element relative to a reference element.
  *
+ * This hook uses the Floating UI library to compute the position of the floating element based on the reference
+ * element's position and the specified placement, strategy, and offset options.
+ *
  * @template ReferenceType - The type of the reference element, extending HTMLElement.
  * @param {Object} params - The parameters for the hook.
  * @param {Placement} params.placement - The preferred placement of the floating element.
@@ -38,9 +41,9 @@ export type UseFloatingProps = {
      *
      * This determines where the floating element will be positioned relative to the reference element.
      *
-     * @default bottom
+     * @default bottom-start
      */
-    placement: Placement;
+    placement?: Placement;
     /** A ref object for the arrow element. */
     arrowRef?: React.MutableRefObject<HTMLElement | null>;
     /**
@@ -71,20 +74,31 @@ export type UseFloatingProps = {
     hide?: boolean;
 };
 
+export type UseFloatingElements<ReferenceElementType extends HTMLElement = HTMLElement> = {
+    reference: ReferenceElementType | null;
+    floating: HTMLElement | null;
+    setReference: (element: ReferenceElementType | null) => void;
+    setFloating: (element: HTMLElement | null) => void;
+};
+
 /**
  *
  *
  * @param param0
  * @returns
  */
-export function useFloating<TriggerElementType extends HTMLElement>({
-    placement = 'bottom',
+export function useFloating<ReferenceElementType extends HTMLElement = HTMLElement>({
+    placement = 'bottom-start',
     arrowRef,
     strategy = 'fixed',
     offsetOptions = 0,
     refWidth = true,
     hide = false,
-}: UseFloatingProps) {
+}: UseFloatingProps): {
+    elements: UseFloatingElements<ReferenceElementType>;
+    floatingStyles: React.CSSProperties;
+    middlewareData: MiddlewareData;
+} {
     const [floatingStyles, setFloatingStylesState] = useState<React.CSSProperties>({
         opacity: 0,
         pointerEvents: 'none',
@@ -100,7 +114,7 @@ export function useFloating<TriggerElementType extends HTMLElement>({
 
     const [middlewareData, setMiddlewareData] = useState<MiddlewareData>({});
 
-    const [triggerElement, setTriggerElement] = useState<TriggerElementType | null>(null);
+    const [referenceElement, setReferenceElement] = useState<ReferenceElementType | null>(null);
 
     const [floatingElement, setFloatingElement] = useState<HTMLElement | null>(null);
 
@@ -112,7 +126,7 @@ export function useFloating<TriggerElementType extends HTMLElement>({
         transitionDelay.clear();
 
         // check if the reference or floating element is null
-        if (triggerElement === null || floatingElement === null) return;
+        if (referenceElement === null || floatingElement === null) return;
 
         if (hide) {
             if (floatingElement?.style.top)
@@ -136,9 +150,9 @@ export function useFloating<TriggerElementType extends HTMLElement>({
 
         computeDebounce.set(() => {
             // check again if the reference or floating element is null
-            if (hide || triggerElement === null || floatingElement === null) return;
+            if (hide || referenceElement === null || floatingElement === null) return;
 
-            computePosition(triggerElement, floatingElement, {
+            computePosition(referenceElement, floatingElement, {
                 placement: placement,
                 strategy,
                 middleware: [
@@ -180,7 +194,7 @@ export function useFloating<TriggerElementType extends HTMLElement>({
     }, [
         computeDebounce,
         transitionDelay,
-        triggerElement,
+        referenceElement,
         floatingElement,
         hide,
         placement,
@@ -199,20 +213,20 @@ export function useFloating<TriggerElementType extends HTMLElement>({
     }, [compute, computeDebounce, hide, transitionDelay]);
 
     useEffect(() => {
-        if (hide || triggerElement === null || floatingElement === null) return;
+        if (hide || referenceElement === null || floatingElement === null) return;
 
-        const cleanup = autoUpdate(triggerElement, floatingElement, compute);
+        const cleanup = autoUpdate(referenceElement, floatingElement, compute);
 
         return () => {
             cleanup();
         };
-    }, [compute, hide, floatingElement, triggerElement]);
+    }, [compute, hide, floatingElement, referenceElement]);
 
     return {
         elements: {
-            trigger: triggerElement,
+            reference: referenceElement,
             floating: floatingElement,
-            setTrigger: setTriggerElement,
+            setReference: setReferenceElement,
             setFloating: setFloatingElement,
         },
         floatingStyles,

package/src/hooks/useIsomorphicEffect.ts

@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/src/hooks/useLongPress.ts

@@ -1,52 +1,55 @@
-import { ComponentProps, useRef } from 'react';
+import { useRef, useState } from 'react';
 
 import { useTimeout } from './useTimeout';
 
-export function useLongPress(callback: (pressCount: number) => void, ms: number = 2000, isDisabled = false) {
-    const longPressTimeout = useTimeout();
-    const longPressCount = useRef(1);
-    const duration = useRef(ms);
-
-    const stop = () => {
-        longPressCount.current = 1;
-        duration.current = ms;
-        longPressTimeout.clear();
-    };
-
-    const start = () => {
-        duration.current /= 2;
-        longPressTimeout.set(
-            () => {
-                callback(longPressCount.current);
-                longPressCount.current += 1;
-                start();
-            },
-            //
-            Math.max(duration.current, 100),
-        );
+export const MIN_INTERVAL = 250; // Minimum interval in milliseconds
+export const INTERVAL_DECREASE_FACTOR = 0.75; // Percent by which the interval decreases each time
+export const INITIAL_INTERVAL = 1000; // Initial interval in milliseconds
+
+const isTriggerElementDisabled = (element: HTMLElement | null) =>
+    !element ||
+    (element as HTMLButtonElement).disabled ||
+    element.getAttribute('disabled') === 'true' ||
+    element.getAttribute('aria-disabled') === 'true' ||
+    element.getAttribute('data-disabled') === 'true' ||
+    !element.isConnected ||
+    !element.offsetParent;
+
+export function useLongPress(callback: () => void, disabled: boolean) {
+    const timeout = useTimeout();
+    const intervalRef = useRef(INITIAL_INTERVAL);
+
+    const [triggerElement, setTriggerElement] = useState<HTMLButtonElement | null>(null);
+
+    if (disabled)
+        return {
+            onMouseDown: () => {},
+            onMouseUp: () => {},
+            setTriggerElement: () => {},
+        };
+
+    const run = () => {
+        // If the element is not connected or disabled, clear the timeout, and prevent the callback
+        if (isTriggerElementDisabled(triggerElement)) return;
+        callback();
+        // Decrease the interval for the next call, but not below MIN_INTERVAL
+        if (intervalRef.current > MIN_INTERVAL) intervalRef.current = intervalRef.current * INTERVAL_DECREASE_FACTOR;
+        timeout.set(run, intervalRef.current);
     };
 
-    const buttonProps: ComponentProps<'button'> = {
-        onMouseDown: (event) => {
-            event.preventDefault();
-            if (isDisabled) return;
-
-            callback(longPressCount.current);
-            start();
+    return {
+        onMouseDown: () => {
+            intervalRef.current = INITIAL_INTERVAL;
+            callback();
+            timeout.set(run, intervalRef.current);
         },
-        onMouseMove: (event) => {
-            event.preventDefault();
-            if (event.movementX > 100 || event.movementY > 100) stop();
+        onMouseUp: () => {
+            timeout.clear();
         },
-        onMouseLeave: () => stop(),
-        onMouseUp: () => stop(),
-    };
-
-    return {
-        start,
-        stop,
-        buttonProps,
-        timeout: longPressTimeout,
+        onMouseLeave: () => {
+            timeout.clear();
+        },
+        setTriggerElement,
     };
 }
 

package/src/hooks/useMutationObserver.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+/**
+ * This hook allows you to observe mutations on a target element using the MutationObserver API.
+ *
+ * @param target {HTMLElement | null} The target element to observe for mutations.
+ * @param callback {MutationCallback} The callback function to execute when mutations are observed.
+ * @param options {MutationObserverInit} The options for the mutation observer.
+ */
+export function useMutationObserver(
+    target: HTMLElement | null,
+    callback: MutationCallback,
+    options: MutationObserverInit = {
+        attributes: true,
+        characterData: true,
+        childList: true,
+        subtree: true,
+    },
+) {
+    useEffect(() => {
+        if (target) {
+            const observer = new MutationObserver(callback);
+            observer.observe(target, options);
+            callback([], observer); // Initial call to set state based on current target state
+            return () => observer.disconnect();
+        }
+        return () => null;
+    }, [callback, options, target]);
+}

package/src/hooks/useOptionIconsInvalid.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
-import { isValidIcon } from '../utils/children';
-import { useErrorLogger } from '../utils/errors';
+import { isValidIcon } from '-/utils/children';
+import { useErrorLogger } from '-/utils/errors';
 
 /**
  * A utility hook used within navigation components. Returns true if the icons are invalid.

package/src/hooks/useOutsideClick.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+
 /**
  * A hook which calls a method when a click occurs outside of the provided ref. Used inside the DropDown and Modal
  * components.
@@ -29,12 +30,12 @@ import { useEffect } from 'react';
  * @param disabled - Whether the hook should be disabled. Defaults to false.
  */
 export function useOutsideClick(
-    elements: (HTMLElement | null)[],
+    elements: (HTMLElement | null)[] | null,
     callback: (event?: MouseEvent) => void,
     disabled?: boolean,
 ) {
     useEffect(() => {
-        if (!elements.length || disabled) return;
+        if (!elements?.length || disabled) return;
 
         const handleClickOutside = (event: MouseEvent) => {
             if (disabled || elements?.some?.((element) => element?.contains?.(event.target as Node))) return;

package/src/hooks/useRadioState.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { RadioProps } from '../Radio';
+import { RadioProps } from '-/components/Radio';
 
 /**
  * A hook to manage the state of a single radio. Used alongside the Radio component.

package/src/hooks/useTimeout.ts

@@ -7,15 +7,14 @@ import { useRef, useEffect, useMemo } from 'react';
  *     import { useTimeout } from '@bspk/ui/hooks/useTimeout';
  *     import { useEffect } from 'react';
  *
- *     function MyComponent() {
- *     const timeoutRef = useTimeout();
+ *     export function MyComponent() {
+ *     const timeout = useTimeout();
  *
- *     useEffect(() => {
- *     timeoutRef.current = setTimeout(() => {
- *     console.log('Timeout triggered');
- *     }, 1000);
- *     }, []);
- *     return <div>Check the console after 1 second</div>;
+ *     const handleClick = () => {
+ *     timeout.set(() => console.log('Timeout triggered'), 1000);
+ *     };
+ *
+ *     return <Button onClick={handleClick}>Click here then check the console.</Button>;
  *     }
  *
  * @returns A ref object that can be used to store a timeout id.

package/src/hooks/useTruncatedText.ts

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+import { useMutationObserver } from './useMutationObserver';
+
+/**
+ * Custom hook to determine if a text element is truncated.
+ *
+ * @returns {{ isTruncated: boolean; setElement: (element: HTMLElement | null) => void }} -- An object containing
+ *   `isTruncated` boolean and a function to set the element to observe.
+ */
+export function useTruncatedText(): { isTruncated: boolean; setElement: (element: HTMLElement | null) => void } {
+    const [element, setElement] = useState<HTMLElement | null>(null);
+    const [isTruncated, setIsTruncated] = useState<boolean>(false);
+
+    useMutationObserver(element, () => {
+        setIsTruncated(!!element && element.scrollWidth > element.clientWidth);
+    });
+
+    return { isTruncated, setElement };
+}

package/src/hooks/useUIContext.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+
+import { UIContext } from '-/utils/uiContext';
+
+export const useUIContext = () => {
+    const context = useContext(UIContext);
+    if (!context) {
+        throw new Error('useUIContext must be used within a UIProvider');
+    }
+    return context;
+};

package/src/hooks/useValidChildren.ts

@@ -1,7 +1,7 @@
 import { ReactNode, useMemo } from 'react';
 
-import { getChildrenElements } from '../utils/children';
-import { useErrorLogger } from '../utils/errors';
+import { getChildrenElements } from '-/utils/children';
+import { useErrorLogger } from '-/utils/errors';
 
 const VALID_CHILDREN = ['Icon', 'string'];
 

package/src/index.ts

@@ -6,7 +6,51 @@
  * @bspk/ui/Txt".
  */
 
-import { ComponentProps, JSXElementConstructor, ReactNode } from 'react';
+import { JSXElementConstructor, ReactNode, ComponentPropsWithoutRef } from 'react';
+
+export const BRANDS: {
+    /** The title of the brand. */
+    title: string;
+    /** The slug of the brand, used in URLs and identifiers. */
+    slug: Brand;
+}[] = [
+    {
+        title: 'Anywhere',
+        slug: 'anywhere',
+    },
+    {
+        title: 'Better Homes & Gardens',
+        slug: 'better-homes-gardens',
+    },
+    {
+        title: 'Cartus',
+        slug: 'cartus',
+    },
+    {
+        title: 'Century 21',
+        slug: 'century-21',
+    },
+    {
+        title: 'Coldwell Banker',
+        slug: 'coldwell-banker',
+    },
+    {
+        title: 'Corcoran',
+        slug: 'corcoran',
+    },
+    {
+        title: 'Denali Boss',
+        slug: 'denali-boss',
+    },
+    {
+        title: 'ERA',
+        slug: 'era',
+    },
+    {
+        title: "Sotheby's",
+        slug: 'sothebys',
+    },
+] as const;
 
 export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
 
@@ -16,7 +60,12 @@ export type ElementProps<
     P extends Record<string, unknown>,
     E extends JSXElementConstructor<unknown> | keyof JSX.IntrinsicElements,
     O extends string = '',
-> = Omit<ComponentProps<E>, O | keyof P> & P;
+> = Omit<ComponentPropsWithoutRef<E>, O | keyof P> & P;
+
+export type ElementConstructorProps<
+    E extends JSXElementConstructor<unknown> | keyof JSX.IntrinsicElements,
+    O extends string = '',
+> = Omit<ComponentPropsWithoutRef<E>, O>;
 
 export type ButtonSize = 'large' | 'medium' | 'small' | 'x-small';
 
@@ -37,8 +86,6 @@ export type CallToActionButton = {
     size?: ButtonSize;
 };
 
-export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;
-
 /**
  * The props that are common to input elements.
  *
@@ -61,6 +108,8 @@ export type InvalidPropsLibrary = {
     errorMessage?: string;
 };
 
+export type InvalidProps<K extends keyof InvalidPropsLibrary> = Pick<InvalidPropsLibrary, K>;
+
 export type CommonPropsLibrary = {
     /** The id of the element. If not provided one will be generated. */
     id?: string;
@@ -118,8 +167,16 @@ export type CommonPropsLibrary = {
      * @required
      */
     'aria-label': string;
+    /**
+     * This is a utility attribute used to identify the owning component of another component.
+     *
+     * This is used to identify the component in the UI library and is not intended for public use.
+     */
+    'data-bspk-owner'?: string;
 };
 
+export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;
+
 export type Brand =
     | 'anywhere'
     | 'better-homes-gardens'
@@ -131,16 +188,4 @@ export type Brand =
     | 'era'
     | 'sothebys';
 
-export const BRANDS: { title: string; slug: Brand }[] = [
-    { title: 'Anywhere', slug: 'anywhere' },
-    { title: 'Better Homes & Gardens', slug: 'better-homes-gardens' },
-    { title: 'Cartus', slug: 'cartus' },
-    { title: 'Century 21', slug: 'century-21' },
-    { title: 'Coldwell Banker', slug: 'coldwell-banker' },
-    { title: 'Corcoran', slug: 'corcoran' },
-    { title: 'Denali Boss', slug: 'denali-boss' },
-    { title: 'ERA', slug: 'era' },
-    { title: "Sotheby's", slug: 'sothebys' },
-] as const;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/utils/colorVariants.ts

@@ -1,5 +1,5 @@
 /**
- * This file is generated by the build-css script. Do not edit this file directly. Instead, edit the script and run it
+ * This file is generated by the update-css script. Do not edit this file directly. Instead, edit the script and run it
  * again.
  */
 export const COLOR_VARIANTS = [