@coopdigital/react 1.30.2 → 1.31.0

package/dist/components/Form/Form.d.ts

@@ -1,3 +1,4 @@
+import { StandardSizes } from "../../types/index.js";
 import { FormHTMLAttributes, JSX, ReactNode, Ref } from "react";
 //#region src/components/Form/Form.d.ts
 export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
@@ -7,9 +8,14 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
   className?: string;
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLFormElement>;
+  /** Specify the spacing.
+   *
+   * Default: `md`
+   */
+  spacing?: StandardSizes;
 }
 declare const Form: {
-  ({ children, className, ref, ...props }: FormProps): JSX.Element;
+  ({ children, className, ref, spacing, ...props }: FormProps): JSX.Element;
   slot: {
     name: string;
   };

package/dist/components/Form/Form.js

@@ -1,9 +1,10 @@
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Form/Form.tsx
-const Form = ({ children, className, ref, ...props }) => {
+const Form = ({ children, className, ref, spacing, ...props }) => {
 	const componentProps = {
 		className: clsx("coop-form", className),
+		"data-spacing": spacing ?? void 0,
 		...props
 	};
 	return /* @__PURE__ */ jsx("form", {

package/dist/components/Squircle/Squircle.d.ts

@@ -22,5 +22,7 @@ declare const Squircle: {
     name: string;
   };
 };
+declare const SquircleSvg: ({ size, ...props }: SquircleSvgProps) => JSX.Element;
+declare const SquircleText: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
 //#endregion
-export { Squircle, Squircle as default };
+export { Squircle, Squircle as default, SquircleSvg, SquircleText };

package/dist/components/Squircle/Squircle.js

@@ -46,4 +46,4 @@ Squircle.Svg = SquircleSvg;
 Squircle.Text = SquircleText;
 Squircle.slot = { name: "Squircle" };
 //#endregion
-export { Squircle, Squircle as default };
+export { Squircle, Squircle as default, SquircleSvg, SquircleText };

package/dist/components/Squircle/index.d.ts

@@ -1,2 +1,2 @@
-import { Squircle, SquircleProps, SquircleSvgProps } from "./Squircle.js";
-export { Squircle, Squircle as default, SquircleProps, SquircleSvgProps };
+import { Squircle, SquircleProps, SquircleSvg, SquircleSvgProps, SquircleText } from "./Squircle.js";
+export { Squircle, Squircle as default, SquircleProps, SquircleSvg, SquircleSvgProps, SquircleText };

package/dist/components/Squircle/index.js

@@ -1,5 +1,5 @@
-import { Squircle } from "./Squircle.js";
+import { Squircle, SquircleSvg, SquircleText } from "./Squircle.js";
 //#region src/components/Squircle/index.ts
 var Squircle_default = Squircle;
 //#endregion
-export { Squircle, Squircle_default as default };
+export { Squircle, SquircleSvg, SquircleText, Squircle_default as default };

package/dist/components/ValidationSummary/ValidationSummary.d.ts

@@ -1,4 +1,4 @@
-import { FieldError } from "./validationsummary-utils.js";
+import { FieldError } from "./validationsummary-internal.js";
 import React, { HTMLAttributes, JSX, ReactNode, Ref, RefObject } from "react";
 //#region src/components/ValidationSummary/ValidationSummary.d.ts
 export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -1,7 +1,7 @@
 "use client";
 import { getSlotProp } from "../../utils/slots.js";
 import { useSlots } from "../../hooks/useSlots.js";
-import { getFieldElement, getFieldOrder, getForm, sanitizeFieldId, sortErrorsByFieldOrder } from "./validationsummary-utils.js";
+import { getFieldElement, getFieldOrder, getForm, sanitizeFieldId, sortErrorsByFieldOrder } from "./validationsummary-internal.js";
 import { ValidationSummaryContext, useValidationSummary } from "./ValidationSummary.context.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ValidationSummary/{validationsummary-utils.d.ts → validationsummary-internal.d.ts}

@@ -1,5 +1,5 @@
 import { RefObject } from "react";
-//#region src/components/ValidationSummary/validationsummary-utils.d.ts
+//#region src/components/ValidationSummary/validationsummary-internal.d.ts
 export interface FieldError {
   message?: string | number;
   ref?: {

package/dist/components/ValidationSummary/{validationsummary-utils.js → validationsummary-internal.js}

@@ -1,4 +1,4 @@
-//#region src/components/ValidationSummary/validationsummary-utils.ts
+//#region src/components/ValidationSummary/validationsummary-internal.ts
 const sanitizeFieldId = (id) => id?.startsWith("#") ? id.slice(1) : id;
 const getFieldKeys = (field, id) => [
 	...id ? [sanitizeFieldId(id)] : [],
@@ -6,11 +6,12 @@ const getFieldKeys = (field, id) => [
 	field
 ];
 const VISIBLE_CONTROL = "input:not([type=\"hidden\"]), select, textarea";
+const INVALID_CONTROL = `:is(${VISIBLE_CONTROL})[aria-invalid="true"]`;
 const isHiddenInput = (el) => el instanceof HTMLInputElement && el.type === "hidden";
 const getVisibleControl = (form, el) => {
 	for (let node = el.parentElement; node && node !== form; node = node.parentElement) {
 		const control = node.querySelector(VISIBLE_CONTROL);
-		if (control) return control;
+		if (control) return node.querySelector(INVALID_CONTROL) ?? control;
 	}
 	return el;
 };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { AlertBanner, AlertBannerHeading, AlertBannerProps } from "./components/AlertBanner/AlertBanner.js";
 import { Image, ImageProps } from "./components/Image/Image.js";
-import { Author, AuthorImageProps, AuthorMetaProps, AuthorProps } from "./components/Author/Author.js";
+import { Author, AuthorImage, AuthorImageProps, AuthorMeta, AuthorMetaProps, AuthorProps } from "./components/Author/Author.js";
 import { Box, BoxProps } from "./components/Box/Box.js";
 import "./components/Box/index.js";
 import { Button, ButtonProps } from "./components/Button/Button.js";
@@ -12,6 +12,9 @@ import { ComboboxItem, ComboboxOption } from "./components/Combobox/combobox-uti
 import { TextInput, TextInputProps } from "./components/TextInput/TextInput.js";
 import { Combobox, ComboboxButton, ComboboxButtonProps, ComboboxControls, ComboboxControlsProps, ComboboxInput, ComboboxInputProps, ComboboxOptions, ComboboxOptionsProps, ComboboxProps, ComboboxSelectEvent } from "./components/Combobox/Combobox.js";
 import "./components/Combobox/index.js";
+import { DATE_ERROR_MESSAGES, DATE_PARTS, DateErrorCode, DateErrorMessage, DateInputMode, DatePart, DateParts, DateValidation, DateValidationError, DateValidationOptions, DateValidationSuccess, getAutoComplete, validateDate, validateDateParts, validateDob } from "./components/DateInput/dateinput-utils.js";
+import { DateInput, DateInputChangeEvent, DateInputDay, DateInputMonth, DateInputPartProps, DateInputProps, DateInputYear } from "./components/DateInput/DateInput.js";
+import "./components/DateInput/index.js";
 import { DateType, DateTypeStr } from "./components/DatePicker/datepicker-utils.js";
 import { DatePicker, DatePickerProps } from "./components/DatePicker/DatePicker.js";
 import { Dialog, DialogBody, DialogHeader, DialogProps } from "./components/Dialog/Dialog.js";
@@ -33,10 +36,10 @@ import "./components/Section/index.js";
 import { Select, SelectOption, SelectOptionGroup, SelectProps } from "./components/Select/Select.js";
 import { Signpost, SignpostProps } from "./components/Signpost/Signpost.js";
 import { SkipNav, SkipNavProps } from "./components/SkipNav/SkipNav.js";
-import { Squircle, SquircleProps, SquircleSvgProps } from "./components/Squircle/Squircle.js";
+import { Squircle, SquircleProps, SquircleSvg, SquircleSvgProps, SquircleText } from "./components/Squircle/Squircle.js";
 import { Tag, TagProps } from "./components/Tag/Tag.js";
 import { Textarea, TextareaProps } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps } from "./components/ValidationSummary/ValidationSummary.js";
 import { Wrapper, WrapperProps } from "./components/Wrapper/Wrapper.js";
 import "./components/Wrapper/index.js";
-export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorImageProps, AuthorMetaProps, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, Combobox, ComboboxButton, ComboboxButtonProps, ComboboxControls, ComboboxControlsProps, ComboboxInput, ComboboxInputProps, type ComboboxItem, type ComboboxOption, ComboboxOptions, ComboboxOptionsProps, ComboboxProps, ComboboxSelectEvent, DatePicker, DatePickerProps, type DateType, type DateTypeStr, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Picture, PictureProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Section, SectionProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps, Wrapper, WrapperProps };
+export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorImage, AuthorImageProps, AuthorMeta, AuthorMetaProps, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, Combobox, ComboboxButton, ComboboxButtonProps, ComboboxControls, ComboboxControlsProps, ComboboxInput, ComboboxInputProps, type ComboboxItem, type ComboboxOption, ComboboxOptions, ComboboxOptionsProps, ComboboxProps, ComboboxSelectEvent, DATE_ERROR_MESSAGES, DATE_PARTS, DateErrorCode, DateErrorMessage, DateInput, DateInputChangeEvent, DateInputDay, DateInputMode, DateInputMonth, DateInputPartProps, DateInputProps, DateInputYear, DatePart, DateParts, DatePicker, DatePickerProps, type DateType, type DateTypeStr, DateValidation, DateValidationError, DateValidationOptions, DateValidationSuccess, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Picture, PictureProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Section, SectionProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvg, SquircleSvgProps, SquircleText, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps, Wrapper, WrapperProps, getAutoComplete, validateDate, validateDateParts, validateDob };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { AlertBanner, AlertBannerHeading } from "./components/AlertBanner/AlertBanner.js";
 import { Image } from "./components/Image/Image.js";
-import { Author } from "./components/Author/Author.js";
+import { Author, AuthorImage, AuthorMeta } from "./components/Author/Author.js";
 import { Box } from "./components/Box/Box.js";
 import { LoadingSpinner } from "./components/LoadingSpinner/LoadingSpinner.js";
 import { Button } from "./components/Button/Button.js";
@@ -9,11 +9,13 @@ import { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLin
 import { Checkbox } from "./components/Checkbox/Checkbox.js";
 import { TextInput } from "./components/TextInput/TextInput.js";
 import { Combobox, ComboboxButton, ComboboxControls, ComboboxInput, ComboboxOptions } from "./components/Combobox/Combobox.js";
+import { Field, FieldError, FieldHint, FieldLabel } from "./components/Field/Field.js";
+import { DATE_ERROR_MESSAGES, DATE_PARTS, getAutoComplete, validateDate, validateDateParts, validateDob } from "./components/DateInput/dateinput-utils.js";
+import { DateInput, DateInputDay, DateInputMonth, DateInputYear } from "./components/DateInput/DateInput.js";
 import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./components/Popover/Popover.js";
 import { DatePicker } from "./components/DatePicker/DatePicker.js";
 import { Dialog, DialogBody, DialogHeader } from "./components/Dialog/Dialog.js";
 import { Expandable, ExpandableContent, ExpandableSummary } from "./components/Expandable/Expandable.js";
-import { Field, FieldError, FieldHint, FieldLabel } from "./components/Field/Field.js";
 import { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend } from "./components/Fieldset/Fieldset.js";
 import { Flourish } from "./components/Flourish/Flourish.js";
 import { Form } from "./components/Form/Form.js";
@@ -27,9 +29,9 @@ import { Section } from "./components/Section/Section.js";
 import { Select, SelectOption, SelectOptionGroup } from "./components/Select/Select.js";
 import { Signpost } from "./components/Signpost/Signpost.js";
 import { SkipNav } from "./components/SkipNav/SkipNav.js";
-import { Squircle } from "./components/Squircle/Squircle.js";
+import { Squircle, SquircleSvg, SquircleText } from "./components/Squircle/Squircle.js";
 import { Tag } from "./components/Tag/Tag.js";
 import { Textarea } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt } from "./components/ValidationSummary/ValidationSummary.js";
 import { Wrapper } from "./components/Wrapper/Wrapper.js";
-export { AlertBanner, AlertBannerHeading, Author, Box, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, Combobox, ComboboxButton, ComboboxControls, ComboboxInput, ComboboxOptions, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Logo, PasswordInput, Picture, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Section, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, Wrapper };
+export { AlertBanner, AlertBannerHeading, Author, AuthorImage, AuthorMeta, Box, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, Combobox, ComboboxButton, ComboboxControls, ComboboxInput, ComboboxOptions, DATE_ERROR_MESSAGES, DATE_PARTS, DateInput, DateInputDay, DateInputMonth, DateInputYear, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Logo, PasswordInput, Picture, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Section, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, SquircleSvg, SquircleText, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, Wrapper, getAutoComplete, validateDate, validateDateParts, validateDob };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.30.2",
+  "version": "1.31.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,8 @@
     "dist",
     "src/**/*.{tsx,ts}",
     "!**/__{screenshots,tests}__",
-    "!**/*.{stories,test}.*"
+    "!**/*.{stories,test}.*",
+    "!**/recipes/**"
   ],
   "keywords": [
     "co-op",
@@ -53,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",
@@ -110,7 +111,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.21.1",
+    "@coopdigital/styles": "^1.22.0",
     "@radix-ui/react-popover": "^1.3.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
@@ -119,5 +120,5 @@
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.2"
   },
-  "gitHead": "eb06ec9a3ea4bb441c5b6738949da6dfdd9f0ce2"
+  "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.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 {
@@ -13,16 +13,19 @@ import {
 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"
@@ -31,8 +34,6 @@ 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.
@@ -190,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,
@@ -353,24 +351,22 @@ 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 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])
@@ -493,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)