stream-chat-react 14.11.1 → 14.12.0

package/dist/es/a11y/hooks/useResolvedModalAriaProps.mjs

@@ -0,0 +1,32 @@
+import { useAriaIdentifiers } from "./useAriaIdentifiers.mjs";
+import { useMemo } from "react";
+//#region src/a11y/hooks/useResolvedModalAriaProps.ts
+/**
+* Resolves modal labeling/description attributes from explicit props first,
+* then from the modal dialog id convention (`${dialogId}-title|description`).
+*
+* Rules:
+* - `aria-labelledby` wins over `aria-label`.
+* - `aria-describedby` defaults to inferred id when explicit value is absent.
+*/
+var useResolvedModalAriaProps = ({ ariaDescribedby, ariaLabel, ariaLabelledby, dialogId }) => {
+	const { descriptionId, titleId } = useAriaIdentifiers(dialogId);
+	return useMemo(() => {
+		const resolvedAriaLabelledby = ariaLabel ? ariaLabelledby : ariaLabelledby ?? titleId;
+		return {
+			"aria-describedby": ariaDescribedby ?? descriptionId,
+			"aria-label": resolvedAriaLabelledby ? void 0 : ariaLabel,
+			"aria-labelledby": resolvedAriaLabelledby
+		};
+	}, [
+		ariaDescribedby,
+		ariaLabel,
+		ariaLabelledby,
+		descriptionId,
+		titleId
+	]);
+};
+//#endregion
+export { useResolvedModalAriaProps };
+
+//# sourceMappingURL=useResolvedModalAriaProps.mjs.map

package/dist/es/a11y/hooks/useResolvedModalAriaProps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResolvedModalAriaProps.mjs","names":[],"sources":["../../../../src/a11y/hooks/useResolvedModalAriaProps.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useAriaIdentifiers } from './useAriaIdentifiers';\n\nexport type ResolvedModalAriaProps = {\n  'aria-describedby'?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n};\n\ntype UseResolvedModalAriaPropsParams = {\n  ariaDescribedby?: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  dialogId?: string;\n};\n\n/**\n * Resolves modal labeling/description attributes from explicit props first,\n * then from the modal dialog id convention (`${dialogId}-title|description`).\n *\n * Rules:\n * - `aria-labelledby` wins over `aria-label`.\n * - `aria-describedby` defaults to inferred id when explicit value is absent.\n */\nexport const useResolvedModalAriaProps = ({\n  ariaDescribedby,\n  ariaLabel,\n  ariaLabelledby,\n  dialogId,\n}: UseResolvedModalAriaPropsParams): ResolvedModalAriaProps => {\n  const { descriptionId, titleId } = useAriaIdentifiers(dialogId);\n\n  return useMemo(() => {\n    const resolvedAriaLabelledby = ariaLabel\n      ? ariaLabelledby\n      : (ariaLabelledby ?? titleId);\n    const resolvedAriaDescribedby = ariaDescribedby ?? descriptionId;\n    const resolvedAriaLabel = resolvedAriaLabelledby ? undefined : ariaLabel;\n\n    return {\n      'aria-describedby': resolvedAriaDescribedby,\n      'aria-label': resolvedAriaLabel,\n      'aria-labelledby': resolvedAriaLabelledby,\n    };\n  }, [ariaDescribedby, ariaLabel, ariaLabelledby, descriptionId, titleId]);\n};\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,6BAA6B,EACxC,iBACA,WACA,gBACA,eAC6D;CAC7D,MAAM,EAAE,eAAe,YAAY,mBAAmB,QAAQ;CAE9D,OAAO,cAAc;EACnB,MAAM,yBAAyB,YAC3B,iBACC,kBAAkB;EAIvB,OAAO;GACL,oBAJ8B,mBAAmB;GAKjD,cAJwB,yBAAyB,KAAA,IAAY;GAK7D,mBAAmB;EACrB;CACF,GAAG;EAAC;EAAiB;EAAW;EAAgB;EAAe;CAAO,CAAC;AACzE"}

package/dist/es/a11y/hooks/useVirtualizedListboxKeyboardNavigation.mjs

@@ -0,0 +1,68 @@
+import { getNextRovingFocusIndex } from "../a11yUtils.mjs";
+import { useCallback, useRef } from "react";
+//#region src/a11y/hooks/useVirtualizedListboxKeyboardNavigation.ts
+var DEFAULT_OPTION_SELECTOR = "[role=\"option\"]";
+var MAX_FOCUS_ATTEMPTS_AFTER_SCROLL = 5;
+var escapeAttributeValue = (value) => value.replace(/(["\\])/g, "\\$1");
+/**
+* Vertical roving-focus keyboard navigation (ArrowUp/Down/Home/End) for a **virtualized** listbox,
+* where only a window of `role="option"` rows exists in the DOM at a time.
+*
+* A DOM-query-and-`.focus()` approach (see {@link useListboxKeyboardNavigation}) can't work here: it
+* would only ever see the rendered window, so it would cycle within those rows and never scroll the
+* rest of the list into view. This hook instead indexes into the **full** `items` array, focuses the
+* target row if it is already rendered, and otherwise asks the list to scroll it into existence
+* (`scrollIndexIntoView`) and focuses it once painted (retrying across a few frames).
+*
+* Returns an `onKeyDown` to spread onto the scroll container (the `role="listbox"` element). The
+* caller wires `scrollerRef` to that same element and provides `scrollIndexIntoView`. Stateless — the
+* active row is read live from `document.activeElement` on each key.
+*/
+var useVirtualizedListboxKeyboardNavigation = ({ getItemId, itemIdAttribute, items, optionSelector = DEFAULT_OPTION_SELECTOR, scrollerRef, scrollIndexIntoView }) => {
+	const latestFocusRequestRef = useRef(0);
+	const focusOptionAt = useCallback((index) => {
+		const item = items[index];
+		if (!item) return false;
+		const option = scrollerRef.current?.querySelector(`${optionSelector}[${itemIdAttribute}="${escapeAttributeValue(getItemId(item))}"]`);
+		if (!option) return false;
+		option.focus();
+		return true;
+	}, [
+		getItemId,
+		itemIdAttribute,
+		items,
+		optionSelector,
+		scrollerRef
+	]);
+	const focusOptionAfterRender = useCallback((index, requestId, attemptsLeft = MAX_FOCUS_ATTEMPTS_AFTER_SCROLL) => {
+		if (requestId !== latestFocusRequestRef.current) return;
+		if (focusOptionAt(index) || attemptsLeft <= 0) return;
+		requestAnimationFrame(() => focusOptionAfterRender(index, requestId, attemptsLeft - 1));
+	}, [focusOptionAt]);
+	return { onKeyDown: useCallback((event) => {
+		const active = document.activeElement;
+		const activeId = active instanceof HTMLElement ? active.closest(`[${itemIdAttribute}]`)?.getAttribute(itemIdAttribute) ?? void 0 : void 0;
+		const nextIndex = getNextRovingFocusIndex({
+			activeIndex: activeId != null ? items.findIndex((item) => getItemId(item) === activeId) : -1,
+			itemCount: items.length,
+			key: event.key
+		});
+		if (nextIndex === null) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const requestId = ++latestFocusRequestRef.current;
+		if (focusOptionAt(nextIndex)) return;
+		scrollIndexIntoView(nextIndex, () => focusOptionAfterRender(nextIndex, requestId));
+	}, [
+		focusOptionAfterRender,
+		focusOptionAt,
+		getItemId,
+		itemIdAttribute,
+		items,
+		scrollIndexIntoView
+	]) };
+};
+//#endregion
+export { useVirtualizedListboxKeyboardNavigation };
+
+//# sourceMappingURL=useVirtualizedListboxKeyboardNavigation.mjs.map

package/dist/es/a11y/hooks/useVirtualizedListboxKeyboardNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualizedListboxKeyboardNavigation.mjs","names":[],"sources":["../../../../src/a11y/hooks/useVirtualizedListboxKeyboardNavigation.ts"],"sourcesContent":["import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from 'react';\nimport { useCallback, useRef } from 'react';\n\nimport { getNextRovingFocusIndex } from '../a11yUtils';\n\nconst DEFAULT_OPTION_SELECTOR = '[role=\"option\"]';\n// After scrolling an off-window row into view, the row may not be in the DOM on the very next tick\n// (a virtual list's \"rendered\" callback can fire a frame before the row paints). Retry focusing it\n// across a few animation frames before giving up.\nconst MAX_FOCUS_ATTEMPTS_AFTER_SCROLL = 5;\n\n// Escape a value for use inside a quoted attribute selector (`[attr=\"value\"]`).\nconst escapeAttributeValue = (value: string) => value.replace(/([\"\\\\])/g, '\\\\$1');\n\nexport type VirtualizedListboxKeyboardNavigationParams<T> = {\n  /** Stable id for an item; must equal the value the item's option carries in `itemIdAttribute`. */\n  getItemId: (item: T) => string;\n  /**\n   * The attribute every option carries its id in (e.g. `'data-thread-id'`). Used both to read the id\n   * off the focused element and to locate the target option in the DOM.\n   */\n  itemIdAttribute: string;\n  /** The full, unvirtualized list — NOT just the rendered window. Roving indexes into this. */\n  items: T[];\n  /** Selector for the focusable option elements. Default `[role=\"option\"]`. */\n  optionSelector?: string;\n  /**\n   * Bring the item at `index` into the rendered window, then invoke `onRendered` once it should be in\n   * the DOM. For a virtualized list wrap the list's imperative scroll (e.g. Virtuoso's\n   * `scrollIntoView({ index, done: onRendered })`); for a non-virtualized list just call\n   * `onRendered()`.\n   */\n  scrollIndexIntoView: (index: number, onRendered: () => void) => void;\n  /** Ref to the scrollable listbox container whose subtree holds the rendered options. */\n  scrollerRef: RefObject<HTMLElement | null>;\n};\n\n/**\n * Vertical roving-focus keyboard navigation (ArrowUp/Down/Home/End) for a **virtualized** listbox,\n * where only a window of `role=\"option\"` rows exists in the DOM at a time.\n *\n * A DOM-query-and-`.focus()` approach (see {@link useListboxKeyboardNavigation}) can't work here: it\n * would only ever see the rendered window, so it would cycle within those rows and never scroll the\n * rest of the list into view. This hook instead indexes into the **full** `items` array, focuses the\n * target row if it is already rendered, and otherwise asks the list to scroll it into existence\n * (`scrollIndexIntoView`) and focuses it once painted (retrying across a few frames).\n *\n * Returns an `onKeyDown` to spread onto the scroll container (the `role=\"listbox\"` element). The\n * caller wires `scrollerRef` to that same element and provides `scrollIndexIntoView`. Stateless — the\n * active row is read live from `document.activeElement` on each key.\n */\nexport const useVirtualizedListboxKeyboardNavigation = <T>({\n  getItemId,\n  itemIdAttribute,\n  items,\n  optionSelector = DEFAULT_OPTION_SELECTOR,\n  scrollerRef,\n  scrollIndexIntoView,\n}: VirtualizedListboxKeyboardNavigationParams<T>) => {\n  // Each roving key press bumps this. A deferred (post-scroll) focus chain captures the id at\n  // schedule time and bails once it is superseded, so a slower older scroll can't steal focus back\n  // to an outdated row after the user has pressed another key.\n  const latestFocusRequestRef = useRef(0);\n\n  // Focus the option for `items[index]` if it is currently in the DOM. Returns whether it was found.\n  const focusOptionAt = useCallback(\n    (index: number) => {\n      const item = items[index];\n      if (!item) return false;\n      const option = scrollerRef.current?.querySelector<HTMLElement>(\n        `${optionSelector}[${itemIdAttribute}=\"${escapeAttributeValue(getItemId(item))}\"]`,\n      );\n      if (!option) return false;\n      option.focus();\n      return true;\n    },\n    [getItemId, itemIdAttribute, items, optionSelector, scrollerRef],\n  );\n\n  const focusOptionAfterRender = useCallback(\n    (\n      index: number,\n      requestId: number,\n      attemptsLeft = MAX_FOCUS_ATTEMPTS_AFTER_SCROLL,\n    ) => {\n      // A newer key press superseded this chain — stop so it can't steal focus back.\n      if (requestId !== latestFocusRequestRef.current) return;\n      if (focusOptionAt(index) || attemptsLeft <= 0) return;\n      requestAnimationFrame(() =>\n        focusOptionAfterRender(index, requestId, attemptsLeft - 1),\n      );\n    },\n    [focusOptionAt],\n  );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLElement>) => {\n      const active = document.activeElement;\n      const activeId =\n        active instanceof HTMLElement\n          ? (active\n              .closest<HTMLElement>(`[${itemIdAttribute}]`)\n              ?.getAttribute(itemIdAttribute) ?? undefined)\n          : undefined;\n      const activeIndex =\n        activeId != null ? items.findIndex((item) => getItemId(item) === activeId) : -1;\n      const nextIndex = getNextRovingFocusIndex({\n        activeIndex,\n        itemCount: items.length,\n        key: event.key,\n      });\n      if (nextIndex === null) return; // not a roving key — leave it alone\n\n      event.preventDefault();\n      event.stopPropagation();\n      // Supersede any still-pending off-window focus chain from a previous key press.\n      const requestId = ++latestFocusRequestRef.current;\n      // Within the rendered window: focus right away (no scroll lag; native focus brings it fully\n      // into view if it sat in the overscan). Otherwise scroll the row into existence, then focus it\n      // once the list has painted it.\n      if (focusOptionAt(nextIndex)) return;\n      scrollIndexIntoView(nextIndex, () => focusOptionAfterRender(nextIndex, requestId));\n    },\n    [\n      focusOptionAfterRender,\n      focusOptionAt,\n      getItemId,\n      itemIdAttribute,\n      items,\n      scrollIndexIntoView,\n    ],\n  );\n\n  return { onKeyDown };\n};\n"],"mappings":";;;AAKA,IAAM,0BAA0B;AAIhC,IAAM,kCAAkC;AAGxC,IAAM,wBAAwB,UAAkB,MAAM,QAAQ,YAAY,MAAM;;;;;;;;;;;;;;;AAuChF,IAAa,2CAA8C,EACzD,WACA,iBACA,OACA,iBAAiB,yBACjB,aACA,0BACmD;CAInD,MAAM,wBAAwB,OAAO,CAAC;CAGtC,MAAM,gBAAgB,aACnB,UAAkB;EACjB,MAAM,OAAO,MAAM;EACnB,IAAI,CAAC,MAAM,OAAO;EAClB,MAAM,SAAS,YAAY,SAAS,cAClC,GAAG,eAAe,GAAG,gBAAgB,IAAI,qBAAqB,UAAU,IAAI,CAAC,EAAE,GACjF;EACA,IAAI,CAAC,QAAQ,OAAO;EACpB,OAAO,MAAM;EACb,OAAO;CACT,GACA;EAAC;EAAW;EAAiB;EAAO;EAAgB;CAAW,CACjE;CAEA,MAAM,yBAAyB,aAE3B,OACA,WACA,eAAe,oCACZ;EAEH,IAAI,cAAc,sBAAsB,SAAS;EACjD,IAAI,cAAc,KAAK,KAAK,gBAAgB,GAAG;EAC/C,4BACE,uBAAuB,OAAO,WAAW,eAAe,CAAC,CAC3D;CACF,GACA,CAAC,aAAa,CAChB;CAwCA,OAAO,EAAE,WAtCS,aACf,UAA2C;EAC1C,MAAM,SAAS,SAAS;EACxB,MAAM,WACJ,kBAAkB,cACb,OACE,QAAqB,IAAI,gBAAgB,EAAE,CAAC,EAC3C,aAAa,eAAe,KAAK,KAAA,IACrC,KAAA;EAGN,MAAM,YAAY,wBAAwB;GACxC,aAFA,YAAY,OAAO,MAAM,WAAW,SAAS,UAAU,IAAI,MAAM,QAAQ,IAAI;GAG7E,WAAW,MAAM;GACjB,KAAK,MAAM;EACb,CAAC;EACD,IAAI,cAAc,MAAM;EAExB,MAAM,eAAe;EACrB,MAAM,gBAAgB;EAEtB,MAAM,YAAY,EAAE,sBAAsB;EAI1C,IAAI,cAAc,SAAS,GAAG;EAC9B,oBAAoB,iBAAiB,uBAAuB,WAAW,SAAS,CAAC;CACnF,GACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CAGO,EAAU;AACrB"}