@coopdigital/react 1.4.1 → 1.5.1

package/dist/index.js

@@ -1,25 +1,25 @@
-export { AlertBanner } from './components/AlertBanner/AlertBanner.js';
+export { AlertBanner, AlertBannerHeading } from './components/AlertBanner/AlertBanner.js';
 export { Author } from './components/Author/Author.js';
 export { Button } from './components/Button/Button.js';
-export { Card } from './components/Card/Card.js';
+export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel } from './components/Card/Card.js';
 export { Checkbox } from './components/Checkbox/Checkbox.js';
 export { DatePicker } from './components/DatePicker/DatePicker.js';
-export { Expandable } from './components/Expandable/Expandable.js';
-export { Field } from './components/Field/Field.js';
-export { Fieldset } from './components/Fieldset/Fieldset.js';
+export { Expandable, ExpandableContent, ExpandableSummary } from './components/Expandable/Expandable.js';
+export { Field, FieldError, FieldHint, FieldLabel } from './components/Field/Field.js';
+export { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend } from './components/Fieldset/Fieldset.js';
 export { Flourish } from './components/Flourish/Flourish.js';
 export { Form } from './components/Form/Form.js';
 export { Image } from './components/Image/Image.js';
-export { Pill } from './components/Pill/Pill.js';
-export { Popover } from './components/Popover/Popover.js';
+export { Pill, PillBadge } from './components/Pill/Pill.js';
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from './components/Popover/Popover.js';
 export { Radio } from './components/Radio/Radio.js';
 export { RootSVG } from './components/RootSVG/RootSVG.js';
-export { Searchbox } from './components/Searchbox/Searchbox.js';
-export { Select } from './components/Select/Select.js';
+export { Searchbox, SearchboxButton, SearchboxInput } from './components/Searchbox/Searchbox.js';
+export { Select, SelectOption, SelectOptionGroup } from './components/Select/Select.js';
 export { Signpost } from './components/Signpost/Signpost.js';
 export { SkipNav } from './components/SkipNav/SkipNav.js';
 export { Squircle } from './components/Squircle/Squircle.js';
 export { Tag } from './components/Tag/Tag.js';
 export { Textarea } from './components/Textarea/Textarea.js';
 export { TextInput } from './components/TextInput/TextInput.js';
-export { ValidationSummary } from './components/ValidationSummary/ValidationSummary.js';
+export { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt } from './components/ValidationSummary/ValidationSummary.js';

package/dist/types/index.d.ts

@@ -1,16 +1,16 @@
 export type StandardSizes = "sm" | "md" | "lg";
-export type FormFieldError = {
-    message?: string;
-    type?: string;
-} | boolean | null | undefined;
-export type ReactNodeWithConfig = (React.ReactNode & {
-    type?: {
-        config?: ComponentConfig;
-    };
-}) | undefined | null;
-export interface ComponentConfig {
-    fieldSuffix?: string;
-    isField?: boolean;
-    isInline?: boolean;
-    name?: string;
+export interface SlotConfig {
+    field?: boolean;
+    inline?: boolean;
+    name: string;
+    suffix?: string;
 }
+export interface LazyPayload<T> {
+    default: T;
+}
+export interface LazyComponent<T extends React.ComponentType<any>> {
+    _init: (payload: unknown) => T;
+    _payload: Promise<LazyPayload<T>> | LazyPayload<T>;
+    $$typeof: typeof REACT_LAZY_TYPE;
+}
+export declare const REACT_LAZY_TYPE: unique symbol;

package/dist/utils/index.d.ts

@@ -2,3 +2,4 @@ export declare const bgPropToClass: (color: string, userClasses?: string) => str
 export declare const hasUserBg: (userClasses?: string) => boolean;
 export declare const hasUserBorder: (userClasses?: string) => boolean;
 export declare const bgClassToColor: (userClasses: string) => string | null;
+export declare function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined;

package/dist/utils/index.js

@@ -1,3 +1,5 @@
+import { isValidElement } from 'react';
+
 const hasUserBg = (userClasses) => {
     return typeof userClasses === "string" && (userClasses === null || userClasses === void 0 ? void 0 : userClasses.includes("bg-")) ? true : false;
 };
@@ -7,12 +9,12 @@ const hasUserBorder = (userClasses) => {
 const bgClassToColor = (userClasses) => {
     var _a, _b;
     return (_b = (_a = /bg-([^\s]+)/.exec(userClasses)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null;
-    // return (
-    //   userClasses
-    //     .split(" ")
-    //     .find((c) => c.startsWith("bg"))
-    //     ?.replace("bg-", "") ?? ""
-    // )
 };
+function getSlotProp(slot, prop) {
+    if (isValidElement(slot) && prop in slot.props) {
+        return slot.props[prop];
+    }
+    return undefined;
+}
 
-export { bgClassToColor, hasUserBg, hasUserBorder };
+export { bgClassToColor, getSlotProp, hasUserBg, hasUserBorder };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -47,6 +47,7 @@
     "build": "tsx scripts build",
     "build:docs": "tsx scripts build-docs",
     "build:icons": "tsx scripts build-icons",
+    "build:manifest": "tsx scripts build-manifest",
     "build:storybook": "storybook build --disable-telemetry",
     "build:storybook:test": "storybook build --test --disable-telemetry --output-dir storybook-test",
     "serve:storybook:test": "serve -p 9000 ./storybook-test",
@@ -61,19 +62,19 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.11.3",
     "@playwright/test": "^1.60.0",
-    "@storybook/addon-a11y": "^10.4.1",
-    "@storybook/addon-docs": "^10.4.1",
-    "@storybook/addon-onboarding": "^10.4.1",
-    "@storybook/react-vite": "^10.4.1",
+    "@storybook/addon-a11y": "^10.4.4",
+    "@storybook/addon-docs": "^10.4.4",
+    "@storybook/addon-onboarding": "^10.4.4",
+    "@storybook/react-vite": "^10.4.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.4.1",
+    "storybook": "^10.4.4",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -84,11 +85,11 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.3.1",
+    "@coopdigital/styles": "^1.3.3",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.0"
   },
-  "gitHead": "653928f1dfd07fa4db9b09e897be07d191d7bb1b"
+  "gitHead": "002d135011d4864e286bc1f8e7f0e23a394e5e33"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -20,7 +20,7 @@ interface AlertBannerHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
   className?: string
 }
 
-export const AlertBanner = ({
+const AlertBanner = ({
   children,
   className,
   ref,
@@ -44,8 +44,11 @@ const AlertBannerHeading = ({ children, className }: AlertBannerHeadingProps): J
   return <h2 className={className}>{children}</h2>
 }
 
-AlertBannerHeading.config = { name: "AlertBannerHeading" }
+AlertBanner.slot = { name: "AlertBanner" }
+AlertBannerHeading.slot = { name: "AlertBannerHeading" }
 
 AlertBanner.Heading = AlertBannerHeading
 
 export default AlertBanner
+
+export { AlertBanner, AlertBannerHeading }

package/src/components/Author/Author.tsx

@@ -21,7 +21,7 @@ export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
   size?: "sm" | "md"
 }
 
-export const Author = ({
+const Author = ({
   author = "Co-op team",
   className,
   date,
@@ -58,4 +58,7 @@ export const Author = ({
   )
 }
 
+Author.slot = { name: "Author" }
+
 export default Author
+export { Author }

package/src/components/Button/Button.tsx

@@ -40,7 +40,7 @@ type OnClickHandler =
   | React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
   | ((event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => Promise<void>)
 
-export const Button = ({
+const Button = ({
   as,
   children,
   className,
@@ -102,4 +102,8 @@ export const Button = ({
 
   return React.createElement(element, { ...componentProps, ref }, finalChildren)
 }
+
+Button.slot = { name: "Button" }
+
 export default Button
+export { Button }

package/src/components/Card/Card.tsx

@@ -82,7 +82,7 @@ function getCardLinkElement(as: CardProps["hrefAs"], href?: string) {
   }
 }
 
-export const Card = ({
+const Card = ({
   chevron = false,
   children,
   className,
@@ -162,11 +162,12 @@ const CardImage = (props: CardImageProps) => {
   return <Image {...{ ...props, crop: props.crop ?? "wide" }} />
 }
 
-CardLabel.config = { name: "CardLabel" }
-CardHeading.config = { name: "CardHeading" }
-CardBadge.config = { name: "CardBadge" }
-CardBody.config = { name: "CardBody" }
-CardImage.config = { name: "CardImage" }
+Card.slot = { name: "Card" }
+CardLabel.slot = { name: "CardLabel" }
+CardHeading.slot = { name: "CardHeading" }
+CardBadge.slot = { name: "CardBadge" }
+CardBody.slot = { name: "CardBody" }
+CardImage.slot = { name: "CardImage" }
 
 Card.Label = CardLabel
 Card.Heading = CardHeading
@@ -175,3 +176,4 @@ Card.Body = CardBody
 Card.Image = CardImage
 
 export default Card
+export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel }

package/src/components/Checkbox/Checkbox.tsx

@@ -1,9 +1,10 @@
+"use client"
 import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { ComponentConfig, StandardSizes } from "../../../src/types"
-import { useId } from "../../hooks/useId"
+import { StandardSizes } from "../../../src/types"
+import { useField } from "../Field/Field.context"
 
 export interface CheckboxProps extends Omit<
   InputHTMLAttributes<HTMLInputElement>,
@@ -25,7 +26,7 @@ export interface CheckboxProps extends Omit<
   size?: StandardSizes
 }
 
-export const Checkbox = ({
+const Checkbox = ({
   className,
   disabled,
   error = false,
@@ -35,13 +36,14 @@ export const Checkbox = ({
   size,
   ...props
 }: CheckboxProps): JSX.Element => {
-  const uid = useId(id)
+  const field = useField()
+
   const componentProps = {
     className: clsx("coop-checkbox", "coop-field-element", className),
     "data-error": error || undefined,
     "data-size": size ?? undefined,
     disabled,
-    id: uid,
+    id: id ?? field?.id,
     name,
     type: "checkbox",
     ...props,
@@ -50,9 +52,11 @@ export const Checkbox = ({
   return <input {...componentProps} ref={ref} />
 }
 
-Checkbox.config = {
-  isField: true,
-  isInline: true,
-} satisfies ComponentConfig
+Checkbox.slot = {
+  field: true,
+  inline: true,
+  name: "Checkbox",
+}
 
 export default Checkbox
+export { Checkbox }

package/src/components/DatePicker/DatePicker.tsx

@@ -13,7 +13,7 @@ import clsx from "clsx"
 import { useCallback, useMemo, useReducer } from "react"
 import { DayPicker } from "react-day-picker"
 
-import type { ComponentConfig, StandardSizes } from "../../types"
+import type { StandardSizes } from "../../types"
 import type {
   DateRange,
   DateRangeStr,
@@ -23,8 +23,8 @@ import type {
   TDateSingle,
 } from "./datepicker-utils"
 
-import { useId } from "../../hooks/useId"
 import Button from "../Button"
+import { useField } from "../Field/Field.context"
 import { CalendarIcon, CrossIcon, TickIcon } from "../icons"
 import Popover from "../Popover"
 import TextInput from "../TextInput"
@@ -108,11 +108,6 @@ export interface DatePickerProps extends Omit<
 
 const now = new Date()
 
-const componentConfig: ComponentConfig = {
-  fieldSuffix: "_display",
-  isField: true,
-}
-
 const baseValueProps = {
   readOnly: true,
   type: "hidden",
@@ -162,7 +157,7 @@ const Calendar = ({
   )
 }
 
-export const DatePicker = ({
+const DatePicker = ({
   className,
   closeOnSelect = true,
   dateFormat = "dd/MM/yyyy",
@@ -183,7 +178,7 @@ export const DatePicker = ({
   startDate,
   ...props
 }: DatePickerProps): JSX.Element => {
-  const uid = useId(id)
+  const field = useField()
 
   initialDate = getInitialDate(mode, initialDate)
 
@@ -285,7 +280,7 @@ export const DatePicker = ({
 
   const valueProps = {
     ...baseValueProps,
-    id: uid,
+    id: id ?? field?.id,
     name: name,
   }
 
@@ -309,9 +304,9 @@ export const DatePicker = ({
             autoComplete="off"
             className="coop-datepicker-input"
             disabled={disabled}
-            id={uid + componentConfig.fieldSuffix}
+            id={valueProps.id + "_display"}
             //maxLength={dateFormat.length}
-            name={name + componentConfig.fieldSuffix}
+            name={name + "_display"}
             onChange={updateFromInput}
             placeholder={getPlaceholder()}
             ref={ref}
@@ -381,13 +376,13 @@ export const DatePicker = ({
         <>
           <input
             {...baseValueProps}
-            id={`${uid}_start`}
+            id={`${valueProps.id}_start`}
             name={`${name}_start`}
             value={state.range?.field?.from ?? state.range?.input ?? ""}
           />
           <input
             {...baseValueProps}
-            id={`${uid}_end`}
+            id={`${valueProps.id}_end`}
             name={`${name}_end`}
             value={state.range?.field?.to ?? state.range?.input ?? ""}
           />
@@ -397,6 +392,11 @@ export const DatePicker = ({
   )
 }
 
-DatePicker.config = componentConfig
+DatePicker.slot = {
+  field: true,
+  name: "DatePicker",
+  suffix: "_display",
+}
 
 export default DatePicker
+export { DatePicker }

package/src/components/Expandable/Expandable.tsx

@@ -34,12 +34,7 @@ const componentSlots = {
   ExpandableSummary: null,
 }
 
-export const Expandable = ({
-  children,
-  className,
-  ref,
-  ...props
-}: ExpandableProps): JSX.Element => {
+const Expandable = ({ children, className, ref, ...props }: ExpandableProps): JSX.Element => {
   const slots = useSlots(componentSlots, children)
 
   const componentProps = {
@@ -76,10 +71,12 @@ const ExpandableContent = ({ children, className, ...props }: ExpandableContentP
   )
 }
 
-ExpandableSummary.config = { name: "ExpandableSummary" }
-ExpandableContent.config = { name: "ExpandableContent" }
+Expandable.slot = { name: "Expandable" }
+ExpandableSummary.slot = { name: "ExpandableSummary" }
+ExpandableContent.slot = { name: "ExpandableContent" }
 
 Expandable.Summary = ExpandableSummary
 Expandable.Content = ExpandableContent
 
 export default Expandable
+export { Expandable, ExpandableContent, ExpandableSummary }

package/src/components/Field/Field.context.ts

@@ -0,0 +1,29 @@
+"use client"
+import { createContext, useContext } from "react"
+
+export interface FieldConfig {
+  disabled: boolean
+  id: string
+  inline?: boolean
+  suffix?: string
+}
+
+export interface FieldContextValue {
+  // register: ({ control, inline, suffix, uid }: FieldConfig) => void
+  disabled?: boolean
+  id?: string
+  inline?: boolean
+  suffix?: string
+}
+
+export const FieldContext = createContext<FieldContextValue | null>(null)
+
+export const useField = () => {
+  const context = useContext(FieldContext)
+
+  if (!context) {
+    return null
+  }
+
+  return context
+}

package/src/components/Field/Field.tsx

@@ -1,14 +1,17 @@
-import type { HTMLAttributes, HTMLProps, Ref } from "react"
+"use client"
+import type { HTMLAttributes, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
 
 import { useId } from "../../hooks/useId"
 import { useSlots } from "../../hooks/useSlots"
-import { ReactNodeWithConfig } from "../../types"
+import { SlotConfig } from "../../types"
+import { getSlotProp } from "../../utils"
 import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
 import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
 import { Label as BaseLabel, type LabelProps } from "../FieldMarkers/Label"
+import { FieldConfig, FieldContext } from "./Field.context"
 
 const componentSlots = {
   Children: null,
@@ -35,7 +38,7 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   ref?: Ref<HTMLDivElement>
 }
 
-export const Field = ({
+const Field = ({
   boxed = false,
   children,
   className,
@@ -47,85 +50,87 @@ export const Field = ({
   const slots = { ...useSlots(componentSlots, children) }
   const hasMarkers = !!(slots.FieldLabel ?? slots.FieldError ?? slots.FieldHint)
 
-  let isInline = false
-  let control: ReactNodeWithConfig
-  let controlSuffix = ""
-  let controlId = useId()
-  let controlDisabled = false
+  const internalId = useId()
 
-  if (Array.isArray(slots.Children)) {
-    slots.Children = slots.Children.filter((child: ReactNodeWithConfig) => {
-      if (child?.type?.config?.isField) {
-        control = child
-        return false
-      }
-      return true
-    })
+  const controlProps: FieldConfig = {
+    disabled: false,
+    id: internalId,
   }
 
-  if (React.isValidElement(control)) {
-    const controlProps = control.props as HTMLProps<HTMLElement>
+  if (Array.isArray(slots.Children)) {
+    slots.Children = slots.Children.filter((child: React.ReactNode) => {
+      //resolveComponentName(child)
 
-    controlId = controlProps.id ?? controlId
-    controlDisabled = controlProps.disabled ?? false
-    controlSuffix = control?.type?.config?.fieldSuffix ?? ""
-    isInline = control?.type?.config?.isInline ?? false
+      if (child && typeof child === "object" && "type" in child) {
+        if (typeof child?.type === "function" && "slot" in child.type) {
+          const { slot } = child?.type as { slot: SlotConfig }
 
-    slots.Control = controlProps.id
-      ? control
-      : React.cloneElement(control as React.ReactElement<HTMLInputElement>, { id: controlId })
-  }
+          slots.Control = child
 
-  if (React.isValidElement(slots.FieldLabel) && !(slots.FieldLabel.props as LabelProps).htmlFor) {
-    slots.FieldLabel = React.cloneElement(slots.FieldLabel as React.ReactElement<LabelProps>, {
-      htmlFor: controlId + controlSuffix,
+          if (slots.Control.props) {
+            controlProps.inline = slot.inline ?? false
+            controlProps.disabled = getSlotProp<boolean>(slots.Control, "disabled") ?? false
+            controlProps.id = getSlotProp<string>(slots.Control, "id") ?? controlProps.id
+            controlProps.suffix = slot.suffix ?? undefined
+          }
+
+          return false
+        }
+      }
+
+      return true
     })
   }
 
   const componentProps = {
     ...props,
-    "aria-disabled": controlDisabled || undefined,
-    className: clsx("coop-field", isInline && "coop-field-inline", className),
+    "aria-disabled": controlProps.disabled || undefined,
+    className: clsx("coop-field", controlProps.inline && "coop-field-inline", className),
     "data-boxed": boxed || undefined,
     "data-error": error || undefined,
     "data-hide-error": hideErrorBar || undefined,
   }
 
   return (
-    <div {...componentProps} ref={ref}>
-      {!isInline && hasMarkers && (
-        <div className="coop-field-markers">
-          {slots.FieldLabel}
-          {slots.FieldHint}
-          {slots.FieldError}
-        </div>
-      )}
-      {slots.Control && (
-        <div className="coop-field-control">
-          {slots.Control}
-          {isInline && hasMarkers && (
-            <div className="coop-field-markers">
-              {slots.FieldLabel}
-              {slots.FieldHint}
-              {slots.FieldError}
-            </div>
-          )}
-        </div>
-      )}
-      {slots.Children}
-    </div>
+    <FieldContext.Provider value={{ ...controlProps }}>
+      <div {...componentProps} ref={ref}>
+        {!controlProps?.inline && hasMarkers && (
+          <div className="coop-field-markers">
+            {slots.FieldLabel}
+            {slots.FieldHint}
+            {slots.FieldError}
+          </div>
+        )}
+        {slots.Control && (
+          <div className="coop-field-control">
+            {slots.Control}
+            {controlProps?.inline && hasMarkers && (
+              <div className="coop-field-markers">
+                {slots.FieldLabel}
+                {slots.FieldHint}
+                {slots.FieldError}
+              </div>
+            )}
+          </div>
+        )}
+        {slots.Children}
+      </div>
+    </FieldContext.Provider>
   )
 }
+
 const FieldLabel = (props: LabelProps) => <BaseLabel {...props} />
 const FieldHint = (props: HintProps) => <BaseHint {...props} />
 const FieldError = (props: ErrorProps) => <BaseError {...props} />
 
-FieldLabel.config = { name: "FieldLabel" }
-FieldHint.config = { name: "FieldHint" }
-FieldError.config = { name: "FieldError" }
+Field.slot = { name: "Field" }
+FieldLabel.slot = { name: "FieldLabel" }
+FieldHint.slot = { name: "FieldHint" }
+FieldError.slot = { name: "FieldError" }
 
 Field.Label = FieldLabel
 Field.Hint = FieldHint
 Field.Error = FieldError
 
 export default Field
+export { Field, FieldError, FieldHint, FieldLabel }

package/src/components/FieldMarkers/Label.tsx

@@ -1,6 +1,8 @@
 import clsx from "clsx"
 import { LabelHTMLAttributes, Ref } from "react"
 
+import { useField } from "../Field/Field.context"
+
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   /** **(Optional)** Main label for the form element. Accepts any valid JSX or string. */
   children?: string | React.ReactNode
@@ -13,8 +15,10 @@ export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 }
 
 export const Label = ({ children, className, isVisible = true, ref, ...props }: LabelProps) => {
+  const field = useField()
   const componentProps = {
     className: clsx("coop-field-label", !isVisible && "sr-only", className),
+    htmlFor: props.htmlFor ?? (field?.id ? field.id + (field?.suffix ?? "") : undefined),
     ...props,
   }
   return (