@bspk/ui 1.3.9 → 1.3.10

package/src/components/TabList/TabList.tsx

@@ -2,7 +2,6 @@ import './tab-list.scss';
 import { Fragment, ReactNode, useMemo } from 'react';
 import { Badge, BadgeProps } from '-/components/Badge';
 import { Tooltip } from '-/components/Tooltip';
-import { Truncated } from '-/components/Truncated';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { useId } from '-/hooks/useId';
 import { ElementProps } from '-/types/common';
@@ -238,7 +237,7 @@ export function TabList({
                                     tabIndex={focusableOption.id === item.id ? 0 : -1}
                                 >
                                     {icon && <span aria-hidden="true">{icon}</span>}
-                                    {!iconsOnly && <Truncated data-label>{item.label}</Truncated>}
+                                    {!iconsOnly && <span data-label>{item.label}</span>}
                                     {item.badge && !item.disabled && (
                                         <Badge count={item.badge} size={TAB_BADGE_SIZES[size]} />
                                     )}

package/src/components/Table/Footer.tsx

@@ -1,5 +1,11 @@
 import { Pagination } from '-/components/Pagination';
 
+/**
+ * TableFooter component displays pagination controls and information for a table.
+ *
+ * @name TableFooter
+ * @parent Table
+ */
 export function TableFooter({
     pageIndex,
     pageSize,

package/src/components/TimePicker/Listbox.tsx

@@ -17,6 +17,12 @@ export type TimePickerListboxProps = {
     onTab?: (e: React.KeyboardEvent) => void;
 };
 
+/**
+ * TimePickerListbox component displays a listbox for selecting time values.
+ *
+ * @name TimePickerListbox
+ * @parent TimePicker
+ */
 export function TimePickerListbox({ options, selectedValue, type: kind, onSelect, onTab }: TimePickerListboxProps) {
     const { activeElementId, arrowKeyCallbacks } = useArrowNavigation({
         ids: options.map((option) => option.id),

package/src/components/TimePicker/Segment.tsx

@@ -19,6 +19,12 @@ export type TimePickerSegmentProps<T extends string> = {
     setRef?: (element: HTMLElement | null) => void;
 };
 
+/**
+ * TimePickerSegment component displays an individual segment of a time picker (hours, minutes, or meridiem).
+ *
+ * @name TimePickerSegment
+ * @parent TimePicker
+ */
 export function TimePickerSegment<T extends string>({
     disabled,
     name,

package/src/components/Truncated/Truncated.tsx

@@ -1,4 +1,3 @@
-import './truncated.scss';
 import { ElementType } from 'react';
 import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
 import { useTruncatedText } from '-/hooks/useTruncatedText';
@@ -45,7 +44,7 @@ export function Truncated<As extends ElementType = ElementType>({
     const span = (triggerProps: TooltipTriggerProps) => (
         <span
             {...props}
-            data-bspk-utility="truncated"
+            data-truncated
             ref={(node) => setElement(node)}
             {...triggerProps}
             role={isTruncated ? 'note' : props.role}

package/src/components/UIProvider/UIProvider.tsx

@@ -22,7 +22,6 @@ export type UIProviderProps = {
  * This provider should wrap the root of your application to ensure that all components have access to the UI context.
  *
  * @name UIProvider
- *
  * @phase Utility
  */
 export function UIProvider({ children }: UIProviderProps) {

package/src/hooks/useLongPress.ts

@@ -1,57 +1,67 @@
-import { useRef, useState, MouseEvent } from 'react';
-
+import { useRef } from 'react';
 import { useTimeout } from './useTimeout';
 
-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 type LongPressProps = {
+    /** The callback to be invoked on long press. If false is returned, the repeating will stop. */
+    callback: () => boolean;
+    /**
+     * The initial delay (in ms) before repeating starts. Default is 750ms.
+     *
+     * @default 750
+     */
+    delay?: number;
+    /**
+     * The amount (in percent) to decrement the delay after each repeat. Default is 15%.
+     *
+     * @default 15
+     */
+    delayDecrement?: number;
+    /**
+     * The minimum delay (in ms) between repeats. Default is 100ms.
+     *
+     * @default 100
+     */
+    delayMin?: number;
+};
 
-export function useLongPress(callback: () => void, disabled: boolean) {
+/**
+ * A hook that provides long press functionality. The provided callback will be invoked once immediately on press, and
+ * then repeatedly after a delay, with the delay decreasing by a specified amount after each repeat.
+ */
+export function useLongPress({
+    callback,
+    delay: initialDelay = 750,
+    delayDecrement = 15,
+    delayMin = 100,
+}: LongPressProps) {
     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 isPressing = useRef(false);
+    const delay = useRef(initialDelay);
+
+    const setPressing = (pressing: boolean) => {
+        isPressing.current = pressing;
+
+        if (pressing) {
+            if (!callback()) return setPressing(false);
+
+            timeout.set(() => {
+                if (!isPressing.current) return setPressing(false);
+
+                const decrementMs = (delay.current * delayDecrement) / 100;
+                delay.current = delay.current <= delayMin ? delayMin : delay.current - decrementMs;
+
+                setPressing(true);
+            }, delay.current);
+            return;
+        }
+
+        delay.current = initialDelay;
+        timeout.clear();
     };
 
     return {
-        onMouseDown: (event: MouseEvent) => {
-            event.preventDefault();
-            intervalRef.current = INITIAL_INTERVAL;
-            callback();
-            timeout.set(run, intervalRef.current);
-        },
-        onMouseUp: () => {
-            timeout.clear();
-        },
-        onMouseLeave: () => {
-            timeout.clear();
-        },
-        setTriggerElement,
+        onPointerDown: () => setPressing(true),
+        onPointerLeave: () => setPressing(false),
+        onPointerUp: () => setPressing(false),
     };
 }
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/styles/base.scss

@@ -179,6 +179,15 @@ body[data-bspk] {
     left: auto;
 }
 
+[data-truncated] {
+    max-width: 100%;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: transparent;
+}
+
 [data-sr-only] {
     height: 1px;
     overflow: hidden;

package/dist/components/Truncated/truncated.css

@@ -1,8 +0,0 @@
-[data-bspk-utility=truncated] {
-  max-width: 100%;
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-color: transparent;
-}

package/dist/components/Truncated/truncated.css.js

@@ -1,13 +0,0 @@
-/** * This file is generated by the build script.
-* Do not edit this file directly. */
-const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk-utility=truncated] {
-  max-width: 100%;
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-color: transparent;
-}
-`));
-document.head.appendChild(style);

package/src/components/Truncated/truncated.scss

@@ -1,8 +0,0 @@
-[data-bspk-utility='truncated'] {
-    max-width: 100%;
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    background-color: transparent;
-}