@coopdigital/react 1.30.1 → 1.31.0

package/dist/utils/slots.d.ts

@@ -2,8 +2,8 @@ import { LazyComponent, SlotConfig } from "../types/index.js";
 import React, { ReactElement, ReactNode } from "react";
 //#region src/utils/slots.d.ts
 export declare function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined;
-export declare const forEachSlot: (children: ReactNode, fn: (slot: SlotConfig, child: ReactElement) => void) => void;
 export declare function isLazy<T extends React.ComponentType<any>>(type: unknown): type is LazyComponent<T>;
+export declare const forEachSlot: (children: ReactNode, fn: (slot: SlotConfig, child: ReactElement) => void) => void;
 export declare function resolveComponentName(child: React.ReactNode): string | null;
 export declare function getSlotName(node: React.ReactNode): string | false;
 //#endregion

package/dist/utils/slots.js

@@ -1,26 +1,34 @@
+import { REACT_LAZY_TYPE } from "../types/index.js";
 import { isValidElement } from "react";
 //#region src/utils/slots.ts
 function getSlotProp(slot, prop) {
 	if (isValidElement(slot) && prop in slot.props) return slot.props[prop];
 }
+function isLazy(type) {
+	return typeof type === "object" && type !== null && type.$$typeof === REACT_LAZY_TYPE;
+}
+const resolveType = (type) => {
+	if (!isLazy(type)) return type;
+	try {
+		return type._init(type._payload);
+	} catch {
+		return;
+	}
+};
+const getSlotConfig = (type) => {
+	const resolved = resolveType(type);
+	return typeof resolved === "function" && "slot" in resolved ? resolved.slot : void 0;
+};
 const forEachSlot = (children, fn) => {
 	Array.from([children].flat()).forEach((child) => {
-		if (isValidElement(child) && typeof child.type === "function" && "slot" in child.type) fn(child.type.slot, child);
+		if (!isValidElement(child)) return;
+		const slot = getSlotConfig(child.type);
+		if (slot) fn(slot, child);
 	});
 };
-function isLazy(type) {
-	return typeof type === "object" && type !== null && "_payload" in type && "_init" in type;
-}
 function resolveComponentName(child) {
 	if (child && typeof child === "object" && "type" in child) {
-		const type = child.type;
-		if (isLazy(type)) try {
-			const resolved = type._init(type._payload);
-			if ("slot" in resolved) return resolved.slot.name;
-			return resolved.displayName ?? resolved.name ?? null;
-		} catch {
-			return null;
-		}
+		const type = resolveType(child.type);
 		if (typeof type === "function") {
 			if ("slot" in type) return type.slot.name;
 			return type.displayName ?? type.name ?? null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.30.1",
+  "version": "1.31.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -12,9 +12,10 @@
       "default": "./dist/index.js"
     },
     "./components/*": {
-      "types": "./dist/components/*/*.d.ts",
-      "default": "./dist/components/*/*.js"
+      "types": "./dist/components/*/index.d.ts",
+      "default": "./dist/components/*/index.js"
     },
+    "./components/icons": null,
     "./icons": {
       "types": "./dist/components/icons/index.d.ts",
       "default": "./dist/components/icons/index.js"
@@ -25,7 +26,8 @@
     "dist",
     "src/**/*.{tsx,ts}",
     "!**/__{screenshots,tests}__",
-    "!**/*.{stories,test}.*"
+    "!**/*.{stories,test}.*",
+    "!**/recipes/**"
   ],
   "keywords": [
     "co-op",
@@ -52,8 +54,8 @@
     "test:behaviour:ci": "npm run test:e2e:ci -- -g behaviour",
     "build": "tsx scripts build",
     "build:docs": "tsx scripts build-docs",
-    "build:docs:all": "tsx scripts build-docs --all",
     "build:icons": "tsx scripts build-icons",
+    "build:pattern-images": "tsx scripts build-pattern-images",
     "build:manifest": "tsx scripts build-manifest",
     "build:storybook": "storybook build --disable-telemetry",
     "build:storybook:test": "storybook build --test --disable-telemetry --output-dir storybook-test",
@@ -67,23 +69,25 @@
   "license": "MIT",
   "description": "React components for the Experience Library design system",
   "devDependencies": {
-    "@axe-core/playwright": "^4.13.0",
-    "@playwright/test": "^1.64.0",
-    "@storybook/addon-a11y": "^10.6.1",
-    "@storybook/addon-docs": "^10.6.1",
-    "@storybook/addon-links": "^10.6.1",
-    "@storybook/addon-onboarding": "^10.6.1",
-    "@storybook/react-vite": "^10.6.1",
+    "@axe-core/playwright": "^4.14.0",
+    "@playwright/test": "^1.64.1",
+    "@storybook/addon-a11y": "^10.6.2",
+    "@storybook/addon-docs": "^10.6.2",
+    "@storybook/addon-links": "^10.6.2",
+    "@storybook/addon-onboarding": "^10.6.2",
+    "@storybook/react-vite": "^10.6.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@whitespace/storybook-addon-html": "^9.0.0",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "react-element-to-jsx-string": "^18.0.0",
+    "react-hook-form": "^7.90.0",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.6.1",
+    "storybook": "^10.6.2",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -107,8 +111,8 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.21.1",
-    "@radix-ui/react-popover": "^1.2.0",
+    "@coopdigital/styles": "^1.22.0",
+    "@radix-ui/react-popover": "^1.3.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "downshift": "^9.4.0",
@@ -116,5 +120,5 @@
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.2"
   },
-  "gitHead": "d563cb9482482375ae32570423d5db012c9ca3b3"
+  "gitHead": "6a649143b3381563d36754d873c1410eb307fdc4"
 }

package/src/components/Author/Author.tsx

@@ -88,4 +88,4 @@ Author.Meta = AuthorMeta
 Author.slot = { name: "Author" }
 
 export default Author
-export { Author }
+export { Author, AuthorImage, AuthorMeta }

package/src/components/Combobox/Combobox.context.ts

@@ -1,7 +1,7 @@
 "use client"
 import type { UseComboboxReturnValue } from "downshift"
 
-import { createContext, useContext } from "react"
+import { createContext, type RefObject, useContext } from "react"
 
 import type { ComboboxItem } from "@/components/Combobox/combobox-utils"
 
@@ -11,6 +11,8 @@ interface ComboboxContextValue {
   disabled: boolean
   downshift: UseComboboxReturnValue<ComboboxItem>
   error: boolean
+  // The visible input, which the form reset is looked up from
+  inputRef: RefObject<HTMLInputElement | null>
   // The options currently shown, after filtering and the maxResults cap
   items: ComboboxItem[]
   // The number of options that match the input, before the cap

package/src/components/Combobox/Combobox.tsx

@@ -1,5 +1,5 @@
 "use client"
-import type { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, Ref } from "react"
+import type { ButtonHTMLAttributes, HTMLAttributes, JSX, MouseEvent, ReactNode, Ref } from "react"
 
 import clsx from "clsx"
 import {
@@ -10,28 +10,30 @@ import {
   type UseComboboxState,
   type UseComboboxStateChange,
 } from "downshift"
+import mergeRefs from "merge-refs"
 import { useEffect, useMemo, useRef, useState } from "react"
 
+import type { ComboboxItem, ComboboxOption } from "@/components/Combobox/combobox-utils"
+
 import {
-  type ComboboxItem,
-  type ComboboxOption,
   defaultFilter,
   defaultIsItemDisabled,
   defaultItemToString,
+  defaultMaxResultsText,
   isMatchingText,
   normalizeOptions,
   resolveOption,
-} from "@/components/Combobox/combobox-utils"
+  type SelectionSnapshot,
+  shouldShowSelectionText,
+} from "@/components/Combobox/combobox-internal"
 import { ComboboxContext, useComboboxContext } from "@/components/Combobox/Combobox.context"
 import { getFieldError, useField } from "@/components/Field/Field.context"
 import { ChevronDownIcon } from "@/components/icons"
 import { TextInput, type TextInputProps } from "@/components/TextInput"
-import { useDebounce, useId, useSlots } from "@/hooks"
+import { useDebounce, useFormReset, useId, useSlots } from "@/hooks"
 import { StandardSizes } from "@/types"
 import { getSlotProp } from "@/utils"
 
-export type { ComboboxItem, ComboboxOption } from "@/components/Combobox/combobox-utils"
-
 export interface ComboboxSelectEvent {
   /** Whether the selection is a custom value, entered by users when `allowCustom` is set,
    * rather than one of the options.
@@ -189,9 +191,6 @@ type ComboboxState = UseComboboxState<ComboboxItem>
 const DEFAULT_MAX_RESULTS = 50
 const ANNOUNCEMENT_DELAY = 750
 
-const defaultMaxResultsText = (shown: number, total: number): string =>
-  `Showing ${shown} of ${total} results.`
-
 const componentSlots = {
   ComboboxControls: null,
   ComboboxOptions: null,
@@ -247,7 +246,9 @@ const Combobox = ({
   )
 
   const [initialSelectedItem] = useState(() => resolveOption(defaultSelected, items))
-  const selectedItem = selected === undefined ? undefined : resolveOption(selected, items)
+  const defaultSelectedItem = resolveOption(defaultSelected, items)
+  const controlled = selected !== undefined
+  const selectedItem = controlled ? resolveOption(selected, items) : undefined
 
   // Work out the selection from the text in the input, so the two always
   // agree. Returns null when the text does not match and custom values are
@@ -304,6 +305,13 @@ const Combobox = ({
   }
 
   const downshift = useCombobox<ComboboxItem>({
+    // reset() goes back to the current default selection and its text, as a
+    // native field goes back to its current default value when its form is
+    // reset. A controlled selection is left to the consumer.
+    ...(!controlled && {
+      defaultInputValue: toString(defaultSelectedItem),
+      defaultSelectedItem,
+    }),
     getItemId: (index) => visibleItems[index]?.id ?? `${uid}_item_${index}`,
     id: uid,
     initialSelectedItem,
@@ -343,34 +351,42 @@ const Combobox = ({
     },
   })
 
-  // Options can arrive after the selection, such as when they are fetched,
-  // so show the option text once it is known. Text that users are typing is
-  // left alone.
+  // Keep the input text in step with the selection
   const selection = resolveOption(downshift.selectedItem, items)
   const selectionText = toString(selection)
   const selectionValue = selection?.value
-  const previousSelection = useRef({ text: selectionText, value: selectionValue })
-  const { inputValue, setInputValue } = downshift
+  const previousSelection = useRef<SelectionSnapshot>({
+    text: selectionText,
+    value: selectionValue,
+  })
+  const { inputValue, reset, setInputValue } = downshift
 
   useEffect(() => {
     const previous = previousSelection.current
-    previousSelection.current = { text: selectionText, value: selectionValue }
+    const current = { text: selectionText, value: selectionValue }
+    previousSelection.current = current
 
-    if (
-      selectionValue === previous.value &&
-      selectionText !== previous.text &&
-      inputValue === previous.text
-    ) {
+    if (shouldShowSelectionText(previous, current, inputValue)) {
       setInputValue(selectionText)
     }
   }, [inputValue, selectionText, selectionValue, setInputValue])
 
+  // When the form is reset, go back to the default selection
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useFormReset(inputRef, () => {
+    if (controlled) return
+    reset()
+    setFilterText("")
+  })
+
   return (
     <ComboboxContext.Provider
       value={{
         disabled,
         downshift,
         error: hasError,
+        inputRef,
         items: visibleItems,
         matchCount: matchingItems.length,
         size,
@@ -407,7 +423,11 @@ const ComboboxInput = ({ error, name, size, ...props }: ComboboxInputProps): JSX
 
   // Pass the props through downshift, so it combines its handlers and ref
   // with those given here
-  const inputProps = combobox.downshift.getInputProps({ ...props, disabled })
+  const inputProps = combobox.downshift.getInputProps({
+    ...props,
+    disabled,
+    ref: mergeRefs(combobox.inputRef, props.ref),
+  })
 
   // The visible input shows the option text, which can be a label, so it has
   // no name. The form submits the selected value from a hidden input
@@ -469,9 +489,22 @@ const ComboboxOptions = ({
   const message = getMessage()
   const announcement = useDebounce(message, ANNOUNCEMENT_DELAY)
 
+  // downshift bug: a mouse leave after the menu closes is handled with the
+  // props from before a new controlled selection, so it is ignored
+  const onMouseLeave = (event: MouseEvent<HTMLUListElement>) => {
+    props.onMouseLeave?.(event)
+    if (!isOpen) Object.assign(event, { preventDownshiftDefault: true })
+  }
+
   return (
     <>
-      <ul {...getMenuProps({ ...props, className: clsx("coop-combobox-options", className) })}>
+      <ul
+        {...getMenuProps({
+          ...props,
+          className: clsx("coop-combobox-options", className),
+          onMouseLeave,
+        })}
+      >
         {isOpen &&
           items.map((item, index) => {
             // Keep the option fields off the element, and pass its handlers

package/src/components/Combobox/combobox-internal.ts

@@ -0,0 +1,60 @@
+import { matchSorter } from "match-sorter"
+
+import type { ComboboxItem, ComboboxOption } from "./combobox-utils"
+
+export const defaultFilter = (items: ComboboxItem[], inputValue: string): ComboboxItem[] =>
+  inputValue !== ""
+    ? matchSorter(items, inputValue, {
+        keys: [(item) => [item.label ?? item.value]],
+      })
+    : items
+
+export const defaultIsItemDisabled = (item: ComboboxItem): boolean => item.disabled ?? false
+
+export const defaultItemToString = (item: ComboboxItem | null): string =>
+  item?.label ?? item?.value ?? ""
+
+export const defaultMaxResultsText = (shown: number, total: number): string =>
+  `Showing ${shown} of ${total} results.`
+
+// Convert options given as strings or objects into a list of items
+export const normalizeOptions = (options: ComboboxOption[]): ComboboxItem[] =>
+  options
+    .filter((option) => option && typeof option !== "number")
+    .map((option) => (typeof option === "string" ? { value: option } : option))
+
+// Created once, as localeCompare with options creates a new collator on
+// every call, which is slow when checking a long list of options
+const collator = new Intl.Collator(undefined, { sensitivity: "base" })
+
+// Check whether typed text matches an option, ignoring case, accents and
+// surrounding whitespace
+export const isMatchingText = (optionText: string, text: string): boolean =>
+  collator.compare(optionText.trim(), text.trim()) === 0
+
+// Find the item for an option given as a value or an object. An option that
+// is not in the list, such as a custom value, is kept as it is.
+export const resolveOption = (
+  option: ComboboxOption | null | undefined,
+  items: ComboboxItem[]
+): ComboboxItem | null => {
+  if (option === null || option === undefined) return null
+
+  const item = typeof option === "string" ? { value: option } : option
+  return items.find(({ value }) => value === item.value) ?? item
+}
+
+export interface SelectionSnapshot {
+  text: string
+  value: string | undefined
+}
+
+// Whether the input should change to the text of the selection. Options can
+// arrive after the selection, such as when they are fetched, so show the
+// option text once it is known, unless users are typing.
+export const shouldShowSelectionText = (
+  previous: SelectionSnapshot,
+  current: SelectionSnapshot,
+  inputValue: string
+): boolean =>
+  current.value === previous.value && current.text !== previous.text && inputValue === previous.text

package/src/components/Combobox/combobox-utils.ts

@@ -1,5 +1,4 @@
-import { matchSorter } from "match-sorter"
-import { HTMLAttributes } from "react"
+import type { HTMLAttributes } from "react"
 
 export interface ComboboxItem extends HTMLAttributes<HTMLLIElement> {
   /** Specify the disabled state.
@@ -19,42 +18,3 @@ export interface ComboboxItem extends HTMLAttributes<HTMLLIElement> {
 }
 
 export type ComboboxOption = ComboboxItem | string
-
-export const defaultFilter = (items: ComboboxItem[], inputValue: string): ComboboxItem[] =>
-  inputValue !== ""
-    ? matchSorter(items, inputValue, {
-        keys: [(item) => [item.label ?? item.value]],
-      })
-    : items
-
-export const defaultIsItemDisabled = (item: ComboboxItem): boolean => item.disabled ?? false
-
-export const defaultItemToString = (item: ComboboxItem | null): string =>
-  item?.label ?? item?.value ?? ""
-
-// Convert options given as strings or objects into a list of items
-export const normalizeOptions = (options: ComboboxOption[]): ComboboxItem[] =>
-  options
-    .filter((option) => option && typeof option !== "number")
-    .map((option) => (typeof option === "string" ? { value: option } : option))
-
-// Created once, as localeCompare with options creates a new collator on
-// every call, which is slow when checking a long list of options
-const collator = new Intl.Collator(undefined, { sensitivity: "base" })
-
-// Check whether typed text matches an option, ignoring case, accents and
-// surrounding whitespace
-export const isMatchingText = (optionText: string, text: string): boolean =>
-  collator.compare(optionText.trim(), text.trim()) === 0
-
-// Find the item for an option given as a value or an object. An option that
-// is not in the list, such as a custom value, is kept as it is.
-export const resolveOption = (
-  option: ComboboxOption | null | undefined,
-  items: ComboboxItem[]
-): ComboboxItem | null => {
-  if (option === null || option === undefined) return null
-
-  const item = typeof option === "string" ? { value: option } : option
-  return items.find(({ value }) => value === item.value) ?? item
-}

package/src/components/Combobox/index.ts

@@ -3,3 +3,4 @@ import Combobox from "./Combobox"
 export default Combobox
 export { Combobox }
 export * from "./Combobox"
+export type * from "./combobox-utils"

package/src/components/DateInput/DateInput.context.ts

@@ -0,0 +1,25 @@
+"use client"
+import { createContext, type RefObject, useContext } from "react"
+
+import type { StandardSizes } from "@/types"
+
+import type { DateInputMode, DatePart, DateParts } from "./dateinput-utils"
+
+export interface DateInputContextValue {
+  changePart: (part: DatePart, value: string) => void
+  controlled: boolean
+  // The first rendered part attaches controlRef, which the form reset is
+  // looked up from
+  controlPart?: DatePart
+  controlRef: RefObject<HTMLInputElement | null>
+  defaultValue?: DateParts
+  id: string
+  mode?: DateInputMode
+  name?: string
+  parts: DateParts
+  size?: StandardSizes
+}
+
+export const DateInputContext = createContext<DateInputContextValue | null>(null)
+
+export const useDateInput = () => useContext(DateInputContext)