etudes 6.3.0 → 7.0.1

package/components/Accordion.d.ts

@@ -14,7 +14,7 @@ export type AccordionSelection = Record<number, number[]>;
  */
 export type AccordionSection<T> = Pick<CollectionProps<T>, 'isSelectionTogglable' | 'itemLength' | 'itemPadding' | 'items' | 'layout' | 'numSegments'> & {
     /**
-     * Padding (in pixels) between the sectionheader and the internal collection.
+     * Padding (in pixels) between the section header and the internal collection.
      */
     collectionPadding?: number;
     /**

package/components/Accordion.js

@@ -118,7 +118,7 @@ export const Accordion = forwardRef(({ children, style, autoCollapseSections = f
     const selection = sanitizeSelection(externalSelection ?? {});
     const expandedSectionIndices = sanitizeExpandedSectionIndices(externalExpandedSectionIndices ?? []);
     const fixedStyles = getFixedStyles({ orientation });
-    const prevSelectionRef = useRef();
+    const prevSelectionRef = useRef(undefined);
     const prevSelection = prevSelectionRef.current;
     const components = asComponentDict(children, {
         collapseIcon: AccordionCollapseIcon,

package/components/Button.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 export function Button({ children, className, href, isDisabled = false, label, opensInNewTab, to, type, ...props }) {
     if (href) {
         return (_jsx("a", { ...props, "aria-disabled": isDisabled, "aria-label": label, className: clsx(className, { disabled: isDisabled }), href: href, rel: opensInNewTab ? 'noopener,noreferrer' : undefined, target: opensInNewTab ? '_blank' : undefined, children: children ?? label }));

package/components/Carousel.js

@@ -30,11 +30,20 @@ export const Carousel = forwardRef(({ autoAdvanceInterval = 0, index = 0, isDrag
         pointerDownPositionRef.current = undefined;
         pointerUpPositionRef.current = undefined;
     };
-    const normalizeScrollPosition = () => scrollToIndex(viewportRef, index, orientation);
-    const prevIndexRef = useRef();
+    const normalizeScrollPosition = () => {
+        scrollToIndex(viewportRef, index, orientation);
+        clearTimeout(autoScrollTimeoutRef.current);
+        autoScrollTimeoutRef.current = setTimeout(() => {
+            clearTimeout(autoScrollTimeoutRef.current);
+            autoScrollTimeoutRef.current = undefined;
+        }, autoScrollTimeoutMs);
+    };
+    const prevIndexRef = useRef(undefined);
     const viewportRef = useRef(null);
-    const pointerDownPositionRef = useRef();
-    const pointerUpPositionRef = useRef();
+    const pointerDownPositionRef = useRef(undefined);
+    const pointerUpPositionRef = useRef(undefined);
+    const autoScrollTimeoutRef = useRef(undefined);
+    const autoScrollTimeoutMs = 1000;
     const [exposures, setExposures] = useState(getItemExposures(viewportRef, orientation));
     const [isPointerDown, setIsPointerDown] = useState(false);
     const fixedStyles = getFixedStyles({ scrollSnapEnabled: !isPointerDown, orientation });
@@ -49,6 +58,8 @@ export const Carousel = forwardRef(({ autoAdvanceInterval = 0, index = 0, isDrag
             if (tracksItemExposure) {
                 setExposures(getItemExposures(viewportRef, orientation));
             }
+            if (autoScrollTimeoutRef.current !== undefined)
+                return;
             const newIndex = orientation === 'horizontal'
                 ? Math.round(viewport.scrollLeft / viewport.clientWidth)
                 : Math.round(viewport.scrollTop / viewport.clientHeight);
@@ -114,7 +125,7 @@ export const Carousel = forwardRef(({ autoAdvanceInterval = 0, index = 0, isDrag
     return (_jsx("div", { ...props, ref: ref, role: 'region', onClick: event => handleClick(event), onPointerCancel: event => handlePointerUp(event), onPointerDown: event => handlePointerDown(event), onPointerLeave: event => handlePointerUp(event), onPointerUp: event => handlePointerUp(event), children: _jsx("div", { ref: viewportRef, style: styles(fixedStyles.viewport), children: _jsx(Each, { in: items, children: ({ style: itemStyle, ...itemProps }, idx) => (_jsx("div", { style: styles(fixedStyles.itemContainer), children: _jsx(ItemComponent, { "aria-hidden": idx !== index, exposure: tracksItemExposure ? exposures?.[idx] : undefined, style: styles(itemStyle, fixedStyles.item), ...itemProps }) })) }) }) }));
 });
 function scrollToIndex(ref, index, orientation) {
-    const viewport = ref.current;
+    const viewport = ref?.current;
     if (!viewport)
         return;
     const top = orientation === 'horizontal' ? 0 : viewport.clientHeight * index;
@@ -124,7 +135,7 @@ function scrollToIndex(ref, index, orientation) {
     viewport.scrollTo({ top, left, behavior: 'smooth' });
 }
 function getItemExposures(ref, orientation) {
-    const viewport = ref.current;
+    const viewport = ref?.current;
     if (!viewport)
         return undefined;
     const exposures = [];
@@ -134,7 +145,7 @@ function getItemExposures(ref, orientation) {
     return exposures;
 }
 function getItemExposureAt(idx, ref, orientation) {
-    const viewport = ref.current;
+    const viewport = ref?.current;
     const child = viewport?.children[idx];
     if (!child)
         return 0;

package/components/Collection.js

@@ -79,7 +79,7 @@ export const Collection = forwardRef(({ className, style, isSelectionTogglable =
     };
     const selection = sanitizeSelection(externalSelection ?? []);
     const fixedStyles = getFixedStyles({ itemLength, itemPadding, layout, numSegments, orientation });
-    const prevSelectionRef = useRef();
+    const prevSelectionRef = useRef(undefined);
     const prevSelection = prevSelectionRef.current;
     useEffect(() => {
         prevSelectionRef.current = selection;

package/components/Dropdown.d.ts

@@ -61,7 +61,7 @@ export type DropdownProps<T extends DropdownItemData = DropdownItemData> = HTMLA
      */
     isInverted?: boolean;
     /**
-     * Maximum number of items that are viside when the component expands. When a
+     * Maximum number of items that are visible when the component expands. When a
      * value greater than or equal to 0 is specified, only that number of items
      * will be visible at a time and a scrollbar will appear to enable scrolling
      * to remaining items. Any value less than 0 indicates that all items will be

package/components/WithTooltip.js

@@ -34,7 +34,7 @@ export function WithTooltip({ children, className, style, alignment: externalAli
         dialogRef.current.ariaHidden = 'true';
     };
     const targetRef = useRef(null);
-    const dialogRef = useRef();
+    const dialogRef = useRef(undefined);
     const targetRect = useRect(targetRef);
     useEffect(() => {
         const dialogNode = createDialog();

package/hooks/useClickOutsideEffect.d.ts

@@ -1,2 +1,2 @@
 import { type DependencyList, type RefObject } from 'react';
-export declare function useClickOutsideEffect(targetRef: RefObject<HTMLElement>, handler: () => void, deps?: DependencyList): void;
+export declare function useClickOutsideEffect(targetRef: RefObject<HTMLElement> | RefObject<HTMLElement | undefined> | RefObject<HTMLElement | null>, handler: () => void, deps?: DependencyList): void;

package/hooks/useDragEffect.d.ts

@@ -44,5 +44,5 @@ type Options = {
  *
  * @returns The states created for this effect.
  */
-export declare function useDragEffect(targetRef: RefObject<HTMLElement>, { isEnabled, updatesCursor, onDragStart, onDragMove, onDragEnd, }: Options, deps?: DependencyList): void;
+export declare function useDragEffect(targetRef: RefObject<HTMLElement> | RefObject<HTMLElement | undefined> | RefObject<HTMLElement | null>, { isEnabled, updatesCursor, onDragStart, onDragMove, onDragEnd, }: Options, deps?: DependencyList): void;
 export {};

package/hooks/useDragEffect.js

@@ -13,8 +13,8 @@ import { Point } from 'spase';
  */
 export function useDragEffect(targetRef, { isEnabled = true, updatesCursor = true, onDragStart, onDragMove, onDragEnd, }, deps = []) {
     const element = targetRef.current;
-    const startPositionRef = useRef();
-    const dragPositionRef = useRef();
+    const startPositionRef = useRef(undefined);
+    const dragPositionRef = useRef(undefined);
     if (updatesCursor && element)
         element.style.cursor = 'grab';
     useEffect(() => {

package/hooks/useDragValueEffect.d.ts

@@ -52,5 +52,5 @@ type Options<T> = Omit<InteractDraggableOptions, 'onstart' | 'onmove' | 'onend'>
  *
  * @returns The states created for this effect.
  */
-export declare function useDragValueEffect<T = [number, number]>(targetRef: RefObject<HTMLElement>, { initialValue, transform, onDragStart, onDragMove, onDragEnd, ...options }: Options<T>, deps?: DependencyList): ReturnedStates<T>;
+export declare function useDragValueEffect<T = [number, number]>(targetRef: RefObject<HTMLElement> | RefObject<HTMLElement | undefined> | RefObject<HTMLElement | null>, { initialValue, transform, onDragStart, onDragMove, onDragEnd, ...options }: Options<T>, deps?: DependencyList): ReturnedStates<T>;
 export {};

package/hooks/useInterval.d.ts

@@ -7,7 +7,7 @@ type Options = {
     shouldInvokeInitially?: boolean;
 };
 /**
- * Hoook for invoking a method repeatedly on every set interval.
+ * Hook for invoking a method repeatedly on every set interval.
  *
  * @param handler The method to invoke on every interval.
  * @param interval Time (in milliseconds) between each invocation.

package/hooks/useInterval.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 /**
- * Hoook for invoking a method repeatedly on every set interval.
+ * Hook for invoking a method repeatedly on every set interval.
  *
  * @param handler The method to invoke on every interval.
  * @param interval Time (in milliseconds) between each invocation.
@@ -8,7 +8,7 @@ import { useEffect, useRef } from 'react';
  * @param deps Dependencies that trigger this effect.
  */
 export function useInterval(handler, interval, { shouldInvokeInitially = false } = {}, deps = []) {
-    const handlerRef = useRef();
+    const handlerRef = useRef(undefined);
     useEffect(() => {
         handlerRef.current = handler;
     }, [handler]);

package/hooks/usePrevious.js

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react';
  * @param options See {@link Options}.
  */
 export function usePrevious(value, { sanitizeDependency = t => t } = {}) {
-    const ref = useRef();
+    const ref = useRef(undefined);
     useEffect(() => {
         ref.current = value;
     }, [sanitizeDependency(value)]);

package/hooks/useRect.d.ts

@@ -8,4 +8,4 @@ import { Rect } from 'spase';
  *
  * @returns The most current {@link Rect} of the target element.
  */
-export declare function useRect(targetRef: RefObject<HTMLElement>): Rect;
+export declare function useRect(targetRef: RefObject<HTMLElement> | RefObject<HTMLElement | undefined> | RefObject<HTMLElement | null>): Rect;

package/hooks/useResizeEffect.d.ts

@@ -14,4 +14,4 @@ export type UseResizeEffectOptions = {
  * @param options See {@link Options}.
  * @param deps Additional dependencies.
  */
-export declare function useResizeEffect(targetRef: RefObject<HTMLElement>, { onResize }?: UseResizeEffectOptions, deps?: DependencyList): void;
+export declare function useResizeEffect(targetRef: RefObject<HTMLElement> | RefObject<HTMLElement | undefined> | RefObject<HTMLElement | null>, { onResize }?: UseResizeEffectOptions, deps?: DependencyList): void;

package/hooks/useScrollPositionEffect.js

@@ -23,7 +23,7 @@ export function useScrollPositionEffect({ onChange }, deps = []) {
             step,
         };
     };
-    const prevInfo = useRef();
+    const prevInfo = useRef(undefined);
     useEffect(() => {
         window.addEventListener('scroll', handleScrollPositionChange);
         window.addEventListener('resize', handleScrollPositionChange);

package/hooks/useSearchParamState.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 /**
  * Hook for mapping a search param to a state. Whenever the value of the target
  * search param changes, the mapped state will change as well, and vice versa.

package/hooks/useSize.d.ts

@@ -7,4 +7,4 @@ import { type Size } from 'spase';
  *
  * @returns The most current {@link Size} of the target element.
  */
-export declare function useSize(targetRef: RefObject<HTMLElement>): Size;
+export declare function useSize(targetRef: RefObject<HTMLElement> | RefObject<HTMLElement | undefined> | RefObject<HTMLElement | null>): Size;

package/hooks/useTimeout.d.ts

@@ -6,7 +6,7 @@ type Options = {
 type ReturnValue = {
     start: () => void;
     stop: () => void;
-    ref: RefObject<NodeJS.Timeout | undefined>;
+    ref: RefObject<NodeJS.Timeout> | RefObject<NodeJS.Timeout | undefined> | RefObject<NodeJS.Timeout | null>;
 };
 export declare function useTimeout(timeout?: number, { autoStart, onTimeout }?: Options, deps?: DependencyList): ReturnValue;
 export {};

package/hooks/useTimeout.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 export function useTimeout(timeout = 0, { autoStart = true, onTimeout } = {}, deps = []) {
-    const timeoutRef = useRef();
-    const handlerRef = useRef();
+    const timeoutRef = useRef(undefined);
+    const handlerRef = useRef(undefined);
     const start = useCallback(() => {
         stop();
         if (timeout < 0)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "6.3.0",
+  "version": "7.0.1",
   "description": "A study of headless React components",
   "type": "module",
   "scripts": {
@@ -35,48 +35,47 @@
     "utils"
   ],
   "devDependencies": {
-    "@eslint/js": "^9.13.0",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/js": "^9.17.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@stylistic/eslint-plugin": "^2.9.0",
-    "@types/node": "^22.7.9",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/coverage-v8": "^2.1.3",
+    "@stylistic/eslint-plugin": "^2.12.1",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.8",
     "autoprefixer": "^10.4.20",
-    "concurrently": "^9.0.1",
-    "eslint": "^9.13.0",
+    "concurrently": "^9.1.0",
+    "eslint": "^9.17.0",
     "eslint-plugin-tailwindcss": "^3.17.5",
-    "postcss": "^8.4.47",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router": "^6.27.0",
-    "react-router-dom": "^6.27.0",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.0.2",
     "rimraf": "^6.0.1",
-    "semantic-release": "^24.1.3",
-    "tailwindcss": "^3.4.14",
+    "semantic-release": "^24.2.0",
+    "tailwindcss": "^3.4.17",
     "tailwindcss-safe-area": "^0.6.0",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10",
-    "vitest": "^2.1.3",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1",
+    "vite": "^6.0.4",
+    "vitest": "^2.1.8",
     "wait-on": "^8.0.1"
   },
   "dependencies": {
     "clsx": "^2.1.1",
     "fast-deep-equal": "^3.1.3",
-    "fast-xml-parser": "^4.5.0",
+    "fast-xml-parser": "^4.5.1",
     "interactjs": "^1.10.27",
     "resize-observer-polyfill": "^1.5.1",
-    "spase": "^9.0.1"
+    "spase": "^9.1.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^19.0.0"
   },
   "optionalDependencies": {
-    "react-router": "^6.27.0",
-    "react-router-dom": "^6.27.0"
+    "react-router": "^7.0.2"
   },
-  "packageManager": "pnpm@9.7.0+sha512.dc09430156b427f5ecfc79888899e1c39d2d690f004be70e05230b72cb173d96839587545d09429b55ac3c429c801b4dc3c0e002f653830a420fa2dd4e3cf9cf"
+  "packageManager": "pnpm@9.15.0"
 }

package/providers/ScrollPositionProvider.d.ts

@@ -11,5 +11,5 @@ type ScrollPositionContextValue = ScrollPosition & {
 type ScrollPositionProviderProps = PropsWithChildren;
 export declare const ScrollPositionContext: import("react").Context<ScrollPositionContextValue | undefined>;
 export declare function ScrollPositionProvider({ children, }: Readonly<ScrollPositionProviderProps>): import("react/jsx-runtime").JSX.Element;
-export declare function useScrollPosition(targetRef?: RefObject<Element>): ScrollPosition;
+export declare function useScrollPosition(targetRef?: RefObject<Element> | RefObject<Element | undefined> | RefObject<Element | null>): ScrollPosition;
 export {};

package/utils/asComponentDict.d.ts

@@ -1,4 +1,4 @@
-import { type JSXElementConstructor, type ReactNode } from 'react';
+import { type JSX, type JSXElementConstructor, type ReactNode } from 'react';
 type ComponentTypeDict = Record<string, JSXElementConstructor<any>>;
 type ComponentElementDict<T extends ComponentTypeDict> = Record<keyof T, JSX.Element>;
 export declare function asComponentDict<T extends ComponentTypeDict>(children?: ReactNode, typeDict?: T): Partial<ComponentElementDict<T>>;

package/utils/cloneStyledElement.d.ts

@@ -1,4 +1,4 @@
-import { type Attributes, type CElement, type ClassAttributes, type Component, type ComponentState, type FunctionComponentElement, type ReactElement, type ReactNode } from 'react';
+import { type Attributes, type ClassAttributes, type Component, type ComponentState, type ReactElement, type ReactNode } from 'react';
 /**
  * Wrapper for {@link cloneElement} but instead of overwriting `className` and
  * `style` of the cloned element with the values specified in the `props`
@@ -12,6 +12,6 @@ import { type Attributes, type CElement, type ClassAttributes, type Component, t
  *
  * @returns The cloned element.
  */
-export declare function cloneStyledElement<P>(element: FunctionComponentElement<P>, props?: Partial<P> & Attributes, ...children: ReactNode[]): FunctionComponentElement<P>;
-export declare function cloneStyledElement<P, T extends Component<P, ComponentState>>(element: CElement<P, T>, props?: Partial<P> & ClassAttributes<T>, ...children: ReactNode[]): CElement<P, T>;
+export declare function cloneStyledElement<P>(element: ReactElement<P, React.FunctionComponent<P>>, props?: Partial<P> & Attributes, ...children: ReactNode[]): ReactElement<P, React.FunctionComponent<P>>;
+export declare function cloneStyledElement<P, T extends Component<P, ComponentState>>(element: ReactElement<P, React.ComponentClass<T>>, props?: Partial<P> & ClassAttributes<T>, ...children: ReactNode[]): ReactElement<P, React.ComponentClass<T>>;
 export declare function cloneStyledElement<P>(element: ReactElement<P>, props?: Partial<P> & Attributes, ...children: ReactNode[]): ReactElement<P>;