@coopdigital/react 1.22.5 → 1.23.0

package/dist/components/Combobox/Combobox.context.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext, useContext } from "react";
+//#region src/components/Combobox/Combobox.context.ts
+const ComboboxContext = createContext({});
+const useComboboxContext = () => {
+	const context = useContext(ComboboxContext);
+	if (!context) throw new Error("Combobox components must be used inside <Combobox>");
+	return context;
+};
+//#endregion
+export { ComboboxContext, useComboboxContext };

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,124 @@
+import { ComboboxItem, ComboboxOption } from "./combobox-utils.js";
+import { TextInputProps } from "../TextInput/TextInput.js";
+import "../TextInput/index.js";
+import { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, Ref } from "react";
+import { UseComboboxHighlightedIndexChange, UseComboboxInputValueChange, UseComboboxIsOpenChange, UseComboboxSelectedItemChange, UseComboboxStateChange } from "downshift";
+//#region src/components/Combobox/Combobox.d.ts
+export interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onSelect" | "onToggle"> {
+  /** Specify whether custom values are accepted.
+   *
+   * Default: `false`
+   */
+  allowCustom?: boolean;
+  /** Content inside the component.
+   *
+   * This should be a set of `<Combobox.Controls>` and `<Combobox.Options>`.
+   */
+  children?: string | ReactNode;
+  /** Specify additional CSS classes. */
+  className?: string;
+  /** Specify the disabled state. */
+  disabled?: boolean;
+  /** Specify the component error state. */
+  error?: boolean;
+  /** Specify the component id. Will be auto-generated if not set. */
+  id?: string;
+  /** Custom function to filter the list of options.
+   *
+   * Takes a `ComboboxItem` array and an input string, and returns a filtered array.
+   *
+   * Default: Filters on item label or value: `item.label ?? item.value`.
+   */
+  inputFilter?: (items: ComboboxItem[], value: string) => ComboboxItem[];
+  /** Custom function to mark item as disabled.
+   *
+   * Default: `disabled` prop on `.ComboboxOption`
+   */
+  isItemDisabled?: (item: ComboboxItem) => boolean;
+  /** Custom function to render text in the input field after selecting a value.
+   *
+   * Default: Uses item label or value: `item.label ?? item.value`.
+   */
+  itemToString?: (item: ComboboxItem | null) => string;
+  /** Callback fired when the input value changes.
+   *
+   * This is a `downshift` event.
+   */
+  onChange?: (event: UseComboboxInputValueChange<ComboboxItem>) => void;
+  /** Callback fired when users highlight an option in the list using the mouse or keyboard.
+   *
+   * This is a `downshift` event.
+   */
+  onHighlight?: (event: UseComboboxHighlightedIndexChange<ComboboxItem>) => void;
+  /** Callback fired when users select an option from the list.
+   *
+   * This is a `downshift` event.
+   */
+  onSelect?: (event: UseComboboxSelectedItemChange<ComboboxItem>) => void;
+  /** Callback fired whenever the state changes.
+   *
+   * This is a `downshift` event.
+   */
+  onStateChange?: (event: UseComboboxStateChange<ComboboxItem>) => void;
+  /** Callback fired when the menu opens or closes.
+   *
+   * This is a `downshift` event.
+   */
+  onToggle?: (changes: UseComboboxIsOpenChange<ComboboxItem>) => void;
+  /** Specify whether the menu should appear immediately when clicking the input field.
+   *
+   * Default: `true`.
+   */
+  openOnClick?: boolean;
+  /** Specify placeholder text. Do not use in place of a form label. */
+  placeholder?: string;
+  /** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+  /** Specify the component size. */
+  size?: "sm" | "md" | "lg";
+}
+export interface ComboboxControlsProps extends HTMLAttributes<HTMLDivElement> {
+  /** Content inside the component.
+   *
+   * This should be a set of `<Combobox.Input>` and `<Combobox.Button>`.
+   */
+  children?: React.ReactNode;
+  /** Specify additional CSS classes. */
+  className?: string;
+}
+export interface ComboboxOptionsProps extends HTMLAttributes<HTMLUListElement> {
+  /** Specify additional CSS classes. */
+  className?: string;
+  /** Specify text to display when there are no matching options. */
+  noResultsText?: string;
+  /** Specify array of options to choose from.
+   *
+   * Can be either a simple string array or a complex `ComboboxOption` array.
+   */
+  options: ComboboxOption[];
+}
+export type ComboboxInputProps = TextInputProps;
+export declare const Combobox: {
+  ({ allowCustom, children, className, disabled, error, id, inputFilter, isItemDisabled, itemToString, onChange, onHighlight, onSelect, onStateChange, onToggle, openOnClick, ref, size, ...props }: ComboboxProps): JSX.Element | null;
+  slot: {
+    field: boolean;
+    name: string;
+    suffix: string;
+  };
+  Controls: {
+    ({ children, className, ...props }: ComboboxControlsProps): JSX.Element;
+    slot: {
+      name: string;
+    };
+  };
+  Input: ({ className, placeholder, ...props }: ComboboxInputProps) => JSX.Element;
+  Button: ({ children, className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+  Options: {
+    ({ className, noResultsText, options, ...props }: ComboboxOptionsProps): JSX.Element | null;
+    slot: {
+      name: string;
+    };
+  };
+};
+//#endregion
+export { Combobox as default };

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,166 @@
+"use client";
+import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
+import { getSlotProp } from "../../utils/index.js";
+import { useSlots } from "../../hooks/useSlots.js";
+import { useField } from "../Field/Field.context.js";
+import { defaultFilter, defaultIsItemDisabled, defaultItemToString, normalizeOptions } from "./combobox-utils.js";
+import { ComboboxContext, useComboboxContext } from "./Combobox.context.js";
+import { TextInput } from "../TextInput/TextInput.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useCombobox } from "downshift";
+//#region src/components/Combobox/Combobox.tsx
+const componentSlots = {
+	ComboboxControls: null,
+	ComboboxOptions: null
+};
+const Combobox = ({ allowCustom = false, children, className, disabled, error, id, inputFilter, isItemDisabled, itemToString, onChange, onHighlight, onSelect, onStateChange, onToggle, openOnClick = true, ref, size, ...props }) => {
+	const field = useField();
+	const uid = id ?? field?.id;
+	const slots = useSlots(componentSlots, children);
+	const userOptions = getSlotProp(slots.ComboboxOptions, "options") ?? [];
+	const items = normalizeOptions(userOptions);
+	const [inputItems, setInputItems] = useState(items);
+	const componentProps = {
+		className: clsx("coop-combobox", className),
+		"data-error": error ?? void 0,
+		"data-size": size ?? void 0,
+		id: uid,
+		...props
+	};
+	const inputFilterActual = inputFilter ?? defaultFilter;
+	const itemToStringActual = itemToString ?? defaultItemToString;
+	const comboboxProps = useCombobox({
+		id: uid,
+		inputId: uid + "_input",
+		isItemDisabled: isItemDisabled ?? defaultIsItemDisabled,
+		items: inputItems,
+		itemToString: itemToStringActual,
+		labelId: uid + "_label",
+		menuId: uid + "_menu",
+		onHighlightedIndexChange: onHighlight,
+		onInputValueChange: (event) => {
+			setInputItems(inputFilterActual(items, event.inputValue));
+			onChange?.(event);
+		},
+		onIsOpenChange: onToggle,
+		onSelectedItemChange: (event) => {
+			onSelect?.(event);
+		},
+		onStateChange,
+		stateReducer(_, actionAndChanges) {
+			const { InputBlur, InputClick, InputKeyDownEnter } = useCombobox.stateChangeTypes;
+			const { changes: state, type } = actionAndChanges;
+			const currentInput = state.inputValue ?? "";
+			const hasMatch = items.some((item) => itemToStringActual(item) === currentInput);
+			switch (type) {
+				case openOnClick === false && InputClick: return {
+					...state,
+					isOpen: false
+				};
+				case allowCustom === false && InputBlur: return hasMatch ? state : {
+					...state,
+					inputValue: ""
+				};
+				case allowCustom === false && InputKeyDownEnter: return hasMatch ? state : {
+					...state,
+					isOpen: true
+				};
+				default: return state;
+			}
+		}
+	});
+	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
+		value: {
+			disabled,
+			items: inputItems,
+			props: comboboxProps,
+			size
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			...componentProps,
+			ref,
+			children: [slots.ComboboxControls, slots.ComboboxOptions]
+		})
+	});
+};
+const ComboboxInput = ({ className, placeholder, ...props }) => {
+	const combobox = useComboboxContext();
+	const componentProps = {
+		className,
+		disabled: combobox.disabled,
+		placeholder,
+		size: combobox.size,
+		...props
+	};
+	return /* @__PURE__ */ jsx(TextInput, {
+		...componentProps,
+		...combobox.props?.getInputProps({})
+	});
+};
+const ComboboxButton = ({ children, className, ...props }) => {
+	const combobox = useComboboxContext();
+	const componentProps = {
+		"aria-label": props["aria-label"] ?? "Toggle menu",
+		className,
+		disabled: combobox.disabled,
+		...props
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...componentProps,
+		...combobox.props?.getToggleButtonProps(),
+		children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {
+			stroke: "black",
+			strokeWidth: 1,
+			width: "1.25rem"
+		})
+	});
+};
+const ComboboxControls = ({ children, className, ...props }) => {
+	const componentProps = {
+		className: clsx("coop-combobox-controls", className),
+		...props
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
+		children
+	});
+};
+const ComboboxOptions = ({ className, noResultsText = "No results", options, ...props }) => {
+	const combobox = useComboboxContext();
+	const componentProps = {
+		className: clsx("coop-combobox-options", className),
+		...props
+	};
+	if (!options) return null;
+	return /* @__PURE__ */ jsxs("ul", {
+		...componentProps,
+		...combobox.props?.getMenuProps(),
+		children: [combobox.props?.isOpen && combobox.items?.length ? combobox.items.map((item, index) => {
+			const itemProps = { ...combobox.props?.getItemProps({
+				index,
+				item
+			}) };
+			return /* @__PURE__ */ jsxs("li", {
+				...itemProps,
+				...item,
+				children: [item?.icon, item.children ?? item.label ?? item.value]
+			}, item.value);
+		}) : null, combobox.props?.isOpen && !combobox.items?.length && /* @__PURE__ */ jsx("li", { children: noResultsText })]
+	});
+};
+Combobox.slot = {
+	field: true,
+	name: "Combobox",
+	suffix: "_input"
+};
+ComboboxControls.slot = { name: "ComboboxControls" };
+ComboboxOptions.slot = { name: "ComboboxOptions" };
+Combobox.Controls = ComboboxControls;
+Combobox.Input = ComboboxInput;
+Combobox.Button = ComboboxButton;
+Combobox.Options = ComboboxOptions;
+//#endregion
+export { Combobox, Combobox as default };

package/dist/components/Combobox/combobox-utils.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from "react";
+//#region src/components/Combobox/combobox-utils.d.ts
+export interface ComboboxItem extends HTMLAttributes<HTMLLIElement> {
+  /** Specify the disabled state.
+   *
+   * Options that are disabled still appear in the list but cannot be selected.
+   */
+  disabled?: boolean;
+  /** Specify an icon to render before the item text. */
+  icon?: React.ReactNode;
+  /** Specify text to display to users if the underlying value needs to be different.
+   *
+   * If this value is provided, this is the string that gets filtered when the user types.
+   */
+  label?: string;
+  /** Specify the option value. */
+  value: string;
+}
+export type ComboboxOption = ComboboxItem | string;
+//#endregion

package/dist/components/Combobox/combobox-utils.js

@@ -0,0 +1,10 @@
+import { matchSorter } from "match-sorter";
+//#region src/components/Combobox/combobox-utils.ts
+const defaultFilter = (items, inputValue) => {
+	return inputValue !== "" ? matchSorter(items, inputValue, { keys: [(item) => [item.label ?? item.value]] }) : items;
+};
+const defaultIsItemDisabled = (item) => item.disabled ?? false;
+const defaultItemToString = (item) => item?.label ?? item?.value ?? "";
+const normalizeOptions = (options) => options.filter((option) => option && typeof option !== "number").map((option) => typeof option === "string" ? { value: option } : option);
+//#endregion
+export { defaultFilter, defaultIsItemDisabled, defaultItemToString, normalizeOptions };

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

@@ -0,0 +1,2 @@
+import { Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps } from "./Combobox.js";
+export { Combobox, Combobox as default, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps };

package/dist/components/Combobox/index.js

@@ -0,0 +1,5 @@
+import { Combobox } from "./Combobox.js";
+//#region src/components/Combobox/index.ts
+var Combobox_default = Combobox;
+//#endregion
+export { Combobox, Combobox_default as default };

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,12 +1,9 @@
 import { StandardSizes } from "../../types/index.js";
-import { DateRange } from "./datepicker-utils.js";
+import { DateRange, DateType, DateTypeStr } from "./datepicker-utils.js";
 import { InputHTMLAttributes, JSX, Ref } from "react";
 import { DayPickerProps, Mode } from "react-day-picker";
 //#region src/components/DatePicker/DatePicker.d.ts
-type OnDateSelectHandler = (selected: string | string[] | {
-  from?: string;
-  to?: string;
-} | undefined) => void;
+type OnDateSelectHandler = (selected: DateTypeStr) => void;
 export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onSelect" | "onChange" | "onChangeCapture" | "size" | "type"> {
   /** Specify additional CSS classes. */
   className?: string;
@@ -65,4 +62,4 @@ declare const DatePicker: {
   };
 };
 //#endregion
-export { DatePicker, DatePicker as default };
+export { DatePicker, DatePicker as default, type DateType, type DateTypeStr };

package/dist/components/DatePicker/DatePicker.js

@@ -4,8 +4,8 @@ import { CrossIcon } from "../icons/CrossIcon.js";
 import { TickIcon } from "../icons/TickIcon.js";
 import { Button } from "../Button/Button.js";
 import { useField } from "../Field/Field.context.js";
-import { Popover } from "../Popover/Popover.js";
 import { TextInput } from "../TextInput/TextInput.js";
+import { Popover } from "../Popover/Popover.js";
 import { getDateValues, getDefaultMonth, getEndDate, getInitialDate, getStartDate, shouldClose, shouldSkipParsing } from "./datepicker-utils.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/DatePicker/datepicker-utils.d.ts

@@ -1,7 +1,13 @@
 import { Mode } from "react-day-picker";
 //#region src/components/DatePicker/datepicker-utils.d.ts
+export interface DateRangeStr {
+  from?: string;
+  to?: string;
+}
 export interface DateRange {
   from: Date | undefined;
   to?: Date | undefined;
 }
+export type DateType = Date | Date[] | DateRange | string | undefined;
+export type DateTypeStr = string | string[] | DateRangeStr | undefined;
 //#endregion

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

@@ -1,2 +1,3 @@
+import { DateType, DateTypeStr } from "./datepicker-utils.js";
 import { DatePicker, DatePickerProps } from "./DatePicker.js";
-export { DatePicker, DatePicker as default, DatePickerProps };
+export { DatePicker, DatePicker as default, DatePickerProps, type DateType, type DateTypeStr };

package/dist/index.d.ts

@@ -8,6 +8,10 @@ import { Picture, PictureProps } from "./components/Picture/Picture.js";
 import "./components/Picture/index.js";
 import { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps } from "./components/Card/Card.js";
 import { Checkbox, CheckboxProps } from "./components/Checkbox/Checkbox.js";
+import { TextInput, TextInputProps } from "./components/TextInput/TextInput.js";
+import { Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps } from "./components/Combobox/Combobox.js";
+import "./components/Combobox/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";
 import { Expandable, ExpandableContent, ExpandableProps, ExpandableSummary } from "./components/Expandable/Expandable.js";
@@ -17,7 +21,6 @@ import { Flourish, FlourishProps } from "./components/Flourish/Flourish.js";
 import { Form, FormProps } from "./components/Form/Form.js";
 import { LoadingSpinner, LoadingSpinnerProps } from "./components/LoadingSpinner/LoadingSpinner.js";
 import { Logo, LogoProps } from "./components/Logo/Logo.js";
-import { TextInput, TextInputProps } from "./components/TextInput/TextInput.js";
 import { PasswordInput, PasswordInputProps } from "./components/PasswordInput/PasswordInput.js";
 import { Pill, PillBadge, PillProps } from "./components/Pill/Pill.js";
 import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger } from "./components/Popover/Popover.js";
@@ -31,4 +34,4 @@ import { Squircle, SquircleProps, SquircleSvgProps } from "./components/Squircle
 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";
-export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, DatePicker, DatePickerProps, 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, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };
+export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps, 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, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };

package/dist/index.js

@@ -7,8 +7,9 @@ import { Button } from "./components/Button/Button.js";
 import { Picture } from "./components/Picture/Picture.js";
 import { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture } from "./components/Card/Card.js";
 import { Checkbox } from "./components/Checkbox/Checkbox.js";
-import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./components/Popover/Popover.js";
 import { TextInput } from "./components/TextInput/TextInput.js";
+import { Combobox } from "./components/Combobox/Combobox.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";
@@ -29,4 +30,4 @@ import { Squircle } 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";
-export { AlertBanner, AlertBannerHeading, Author, Box, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, 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, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt };
+export { AlertBanner, AlertBannerHeading, Author, Box, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, Combobox, 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, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.22.5",
+  "version": "1.23.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -41,12 +41,15 @@
     "test:coverage": "vitest run --coverage",
     "test:behaviour": "./test-utils/run-playwright-tests.sh -g behaviour",
     "test:behaviour:ui": "npm run test:behaviour -- --ui",
-    "test:avt": "./test-utils/run-playwright-tests.sh -g avt",
+    "test:avt": "./test-utils/run-playwright-tests.sh -g avt --project=chromium",
     "test:avt:ui": "npm run test:avt -- --ui",
     "test:vrt": "ENVIRONMENT=docker ./test-utils/run-playwright-tests.sh -g vrt --workers 4 --timeout 5000 --fully-parallel",
     "test:vrt:ui": "npm run test:vrt -- --ui",
     "test:e2e": "./test-utils/run-e2e-tests.sh",
     "test:e2e:ci": "npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL",
+    "test:avt:ci": "npm run test:e2e:ci -- -g avt --project=chromium",
+    "test:vrt:ci": "npm run test:e2e:ci -- -g vrt",
+    "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",
@@ -103,12 +106,14 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.16.0",
+    "@coopdigital/styles": "^1.17.0",
     "@radix-ui/react-popover": "^1.1.23",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
+    "downshift": "^9.4.0",
+    "match-sorter": "^8.3.0",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "bbdf07997fcf805aa2603062e190b6eaacc3f3f6"
+  "gitHead": "c8458928ecfa27cda6cb6293952a31f68c00eed3"
 }

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

@@ -0,0 +1,27 @@
+"use client"
+import { createContext, useContext } from "react"
+
+import type { ComboboxItem } from "@/components/Combobox/combobox-utils"
+
+import { StandardSizes } from "@/types"
+
+interface ComboboxContextValue {
+  disabled?: boolean
+  items?: ComboboxItem[]
+  props?: {
+    getInputProps: Function
+    getItemProps: Function
+    getMenuProps: Function
+    getToggleButtonProps: Function
+    isOpen: boolean
+  }
+  size?: StandardSizes
+}
+
+export const ComboboxContext = createContext<ComboboxContextValue>({})
+
+export const useComboboxContext = () => {
+  const context = useContext(ComboboxContext)
+  if (!context) throw new Error("Combobox components must be used inside <Combobox>")
+  return context
+}

package/src/components/Combobox/Combobox.tsx

@@ -0,0 +1,323 @@
+"use client"
+import type { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+import {
+  useCombobox,
+  UseComboboxHighlightedIndexChange,
+  UseComboboxInputValueChange,
+  UseComboboxIsOpenChange,
+  UseComboboxSelectedItemChange,
+  UseComboboxStateChange,
+} from "downshift"
+import { useState } from "react"
+
+import {
+  type ComboboxItem,
+  type ComboboxOption,
+  defaultFilter,
+  defaultIsItemDisabled,
+  defaultItemToString,
+  normalizeOptions,
+} from "@/components/Combobox/combobox-utils"
+import { ComboboxContext, useComboboxContext } from "@/components/Combobox/Combobox.context"
+import { useField } from "@/components/Field/Field.context"
+import { ChevronDownIcon } from "@/components/icons"
+import { TextInput, TextInputProps } from "@/components/TextInput"
+import { useSlots } from "@/hooks"
+import { getSlotProp } from "@/utils"
+
+export interface ComboboxProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange" | "onSelect" | "onToggle"
+> {
+  /** Specify whether custom values are accepted.
+   *
+   * Default: `false`
+   */
+  allowCustom?: boolean
+  /** Content inside the component.
+   *
+   * This should be a set of `<Combobox.Controls>` and `<Combobox.Options>`.
+   */
+  children?: string | ReactNode
+  /** Specify additional CSS classes. */
+  className?: string
+  /** Specify the disabled state. */
+  disabled?: boolean
+  /** Specify the component error state. */
+  error?: boolean
+  /** Specify the component id. Will be auto-generated if not set. */
+  id?: string
+  /** Custom function to filter the list of options.
+   *
+   * Takes a `ComboboxItem` array and an input string, and returns a filtered array.
+   *
+   * Default: Filters on item label or value: `item.label ?? item.value`.
+   */
+  inputFilter?: (items: ComboboxItem[], value: string) => ComboboxItem[]
+  /** Custom function to mark item as disabled.
+   *
+   * Default: `disabled` prop on `.ComboboxOption`
+   */
+  isItemDisabled?: (item: ComboboxItem) => boolean
+  /** Custom function to render text in the input field after selecting a value.
+   *
+   * Default: Uses item label or value: `item.label ?? item.value`.
+   */
+  itemToString?: (item: ComboboxItem | null) => string
+  /** Callback fired when the input value changes.
+   *
+   * This is a `downshift` event.
+   */
+  onChange?: (event: UseComboboxInputValueChange<ComboboxItem>) => void
+  /** Callback fired when users highlight an option in the list using the mouse or keyboard.
+   *
+   * This is a `downshift` event.
+   */
+  onHighlight?: (event: UseComboboxHighlightedIndexChange<ComboboxItem>) => void
+  /** Callback fired when users select an option from the list.
+   *
+   * This is a `downshift` event.
+   */
+  onSelect?: (event: UseComboboxSelectedItemChange<ComboboxItem>) => void
+  /** Callback fired whenever the state changes.
+   *
+   * This is a `downshift` event.
+   */
+  onStateChange?: (event: UseComboboxStateChange<ComboboxItem>) => void
+  /** Callback fired when the menu opens or closes.
+   *
+   * This is a `downshift` event.
+   */
+  onToggle?: (changes: UseComboboxIsOpenChange<ComboboxItem>) => void
+  /** Specify whether the menu should appear immediately when clicking the input field.
+   *
+   * Default: `true`.
+   */
+  openOnClick?: boolean
+  /** Specify placeholder text. Do not use in place of a form label. */
+  placeholder?: string
+  /** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+  /** Specify the component size. */
+  size?: "sm" | "md" | "lg"
+}
+
+export interface ComboboxControlsProps extends HTMLAttributes<HTMLDivElement> {
+  /** Content inside the component.
+   *
+   * This should be a set of `<Combobox.Input>` and `<Combobox.Button>`.
+   */
+  children?: React.ReactNode
+  /** Specify additional CSS classes. */
+  className?: string
+}
+
+export interface ComboboxOptionsProps extends HTMLAttributes<HTMLUListElement> {
+  /** Specify additional CSS classes. */
+  className?: string
+  /** Specify text to display when there are no matching options. */
+  noResultsText?: string
+  /** Specify array of options to choose from.
+   *
+   * Can be either a simple string array or a complex `ComboboxOption` array.
+   */
+  options: ComboboxOption[]
+}
+
+export type ComboboxInputProps = TextInputProps
+
+const componentSlots = {
+  ComboboxControls: null,
+  ComboboxOptions: null,
+}
+
+export const Combobox = ({
+  allowCustom = false,
+  children,
+  className,
+  disabled,
+  error,
+  id,
+  inputFilter,
+  isItemDisabled,
+  itemToString,
+  onChange,
+  onHighlight,
+  onSelect,
+  onStateChange,
+  onToggle,
+  openOnClick = true,
+  ref,
+  size,
+  ...props
+}: ComboboxProps): JSX.Element | null => {
+  const field = useField()
+  const uid = id ?? field?.id
+
+  const slots = useSlots(componentSlots, children)
+
+  const userOptions = getSlotProp<ComboboxOption[]>(slots.ComboboxOptions, "options") ?? []
+  const items = normalizeOptions(userOptions)
+
+  const [inputItems, setInputItems] = useState(items)
+
+  const componentProps = {
+    className: clsx("coop-combobox", className),
+    "data-error": error ?? undefined,
+    "data-size": size ?? undefined,
+    id: uid,
+    ...props,
+  }
+
+  const inputFilterActual = inputFilter ?? defaultFilter
+  const itemToStringActual = itemToString ?? defaultItemToString
+
+  const comboboxProps = useCombobox<ComboboxItem>({
+    id: uid,
+    inputId: uid + "_input",
+    isItemDisabled: isItemDisabled ?? defaultIsItemDisabled,
+    items: inputItems,
+    itemToString: itemToStringActual,
+    labelId: uid + "_label",
+    menuId: uid + "_menu",
+    onHighlightedIndexChange: onHighlight,
+    onInputValueChange: (event) => {
+      setInputItems(inputFilterActual(items, event.inputValue))
+      onChange?.(event)
+    },
+    onIsOpenChange: onToggle,
+    onSelectedItemChange: (event) => {
+      onSelect?.(event) // This might need to broadcast just the value to work with RHF - need to check
+    },
+    onStateChange,
+    stateReducer(_, actionAndChanges) {
+      const { InputBlur, InputClick, InputKeyDownEnter } = useCombobox.stateChangeTypes
+
+      const { changes: state, type } = actionAndChanges
+      const currentInput = state.inputValue ?? ""
+      const hasMatch = items.some((item) => itemToStringActual(item) === currentInput)
+
+      switch (type) {
+        case openOnClick === false && InputClick:
+          return { ...state, isOpen: false }
+        case allowCustom === false && InputBlur:
+          return hasMatch ? state : { ...state, inputValue: "" }
+        case allowCustom === false && InputKeyDownEnter:
+          return hasMatch ? state : { ...state, isOpen: true }
+        default:
+          return state
+      }
+    },
+  })
+
+  // if (!slots.ComboboxControls || !slots.ComboboxOptions) {
+  //   console.warn("Combobox must contain Combobox.Controls and Combobox.Options")
+  //   return null
+  // }
+
+  return (
+    <ComboboxContext.Provider value={{ disabled, items: inputItems, props: comboboxProps, size }}>
+      <div {...componentProps} ref={ref}>
+        {slots.ComboboxControls}
+        {slots.ComboboxOptions}
+      </div>
+    </ComboboxContext.Provider>
+  )
+}
+
+const ComboboxInput = ({ className, placeholder, ...props }: ComboboxInputProps): JSX.Element => {
+  const combobox = useComboboxContext()
+  const componentProps = {
+    className,
+    disabled: combobox.disabled,
+    placeholder,
+    size: combobox.size,
+    ...props,
+  }
+  return <TextInput {...componentProps} {...combobox.props?.getInputProps({})} />
+}
+
+const ComboboxButton = ({
+  children,
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element => {
+  const combobox = useComboboxContext()
+  const componentProps = {
+    "aria-label": props["aria-label"] ?? "Toggle menu",
+    className,
+    disabled: combobox.disabled,
+    ...props,
+  }
+
+  return (
+    <button type="button" {...componentProps} {...combobox.props?.getToggleButtonProps()}>
+      {children ?? <ChevronDownIcon stroke="black" strokeWidth={1} width={"1.25rem"} />}
+    </button>
+  )
+}
+
+const ComboboxControls = ({
+  children,
+  className,
+  ...props
+}: ComboboxControlsProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-combobox-controls", className),
+    ...props,
+  }
+  return <div {...componentProps}>{children}</div>
+}
+
+const ComboboxOptions = ({
+  className,
+  noResultsText = "No results",
+  options,
+  ...props
+}: ComboboxOptionsProps): JSX.Element | null => {
+  const combobox = useComboboxContext()
+
+  const componentProps = {
+    className: clsx("coop-combobox-options", className),
+    ...props,
+  }
+
+  if (!options) {
+    return null
+  }
+
+  return (
+    <ul {...componentProps} {...combobox.props?.getMenuProps()}>
+      {combobox.props?.isOpen && combobox.items?.length
+        ? combobox.items.map((item, index) => {
+            const itemProps = { ...combobox.props?.getItemProps({ index, item }) }
+            return (
+              <li key={item.value} {...itemProps} {...item}>
+                {item?.icon}
+                {item.children ?? item.label ?? item.value}
+              </li>
+            )
+          })
+        : null}
+      {combobox.props?.isOpen && !combobox.items?.length && <li>{noResultsText}</li>}
+    </ul>
+  )
+}
+
+Combobox.slot = {
+  field: true,
+  name: "Combobox",
+  suffix: "_input",
+}
+
+ComboboxControls.slot = { name: "ComboboxControls" }
+ComboboxOptions.slot = { name: "ComboboxOptions" }
+
+Combobox.Controls = ComboboxControls
+Combobox.Input = ComboboxInput
+Combobox.Button = ComboboxButton
+Combobox.Options = ComboboxOptions
+
+export default Combobox

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

@@ -0,0 +1,39 @@
+import { matchSorter } from "match-sorter"
+import { HTMLAttributes } from "react"
+
+export interface ComboboxItem extends HTMLAttributes<HTMLLIElement> {
+  /** Specify the disabled state.
+   *
+   * Options that are disabled still appear in the list but cannot be selected.
+   */
+  disabled?: boolean
+  /** Specify an icon to render before the item text. */
+  icon?: React.ReactNode
+  /** Specify text to display to users if the underlying value needs to be different.
+   *
+   * If this value is provided, this is the string that gets filtered when the user types.
+   */
+  label?: string
+  /** Specify the option value. */
+  value: string
+}
+
+export type ComboboxOption = ComboboxItem | string
+
+export const defaultFilter = (items: ComboboxItem[], inputValue: string): ComboboxItem[] => {
+  return 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 normalizeOptions = (options: ComboboxOption[]): ComboboxItem[] =>
+  options
+    .filter((option) => option && typeof option !== "number")
+    .map((option) => (typeof option === "string" ? { value: option } : option))

package/src/components/Combobox/index.ts

@@ -0,0 +1,5 @@
+import Combobox from "./Combobox"
+
+export default Combobox
+export { Combobox }
+export * from "./Combobox"

package/src/components/DatePicker/DatePicker.tsx

@@ -25,6 +25,7 @@ import type {
   DateRange,
   DateRangeStr,
   DateType,
+  DateTypeStr,
   TDateMultiple,
   TDateRange,
   TDateSingle,
@@ -40,9 +41,7 @@ import {
   shouldSkipParsing,
 } from "./datepicker-utils"
 
-type OnDateSelectHandler = (
-  selected: string | string[] | { from?: string; to?: string } | undefined
-) => void
+type OnDateSelectHandler = (selected: DateTypeStr) => void
 
 interface PickerState {
   message?: string
@@ -402,3 +401,5 @@ DatePicker.slot = {
 
 export default DatePicker
 export { DatePicker }
+
+export type { DateType, DateTypeStr }

package/src/components/DatePicker/datepicker-utils.ts

@@ -19,6 +19,7 @@ interface DateReturn {
 
 export type DateBase = string | undefined
 export type DateType = Date | Date[] | DateRange | string | undefined
+export type DateTypeStr = string | string[] | DateRangeStr | undefined
 
 export interface TDateSingle {
   event?: string

package/src/index.ts

@@ -4,6 +4,7 @@ export * from "./components/Box"
 export * from "./components/Button/Button"
 export * from "./components/Card/Card"
 export * from "./components/Checkbox/Checkbox"
+export * from "./components/Combobox"
 export * from "./components/DatePicker/DatePicker"
 export * from "./components/Dialog/Dialog"
 export * from "./components/Expandable/Expandable"