@coopdigital/react 0.49.0 → 0.50.0

package/src/components/Field/Field.tsx

@@ -5,26 +5,19 @@ import React from "react"
 
 import { useId } from "../../hooks/useId"
 import { useSlots } from "../../hooks/useSlots"
+import { ReactNodeWithConfig } from "../../types"
 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"
 
 const componentSlots = {
-  Checkbox: null,
   Children: null,
   Control: null,
   FieldError: null,
   FieldHint: null,
   FieldLabel: null,
-  Radio: null,
-  Select: null,
-  Textarea: null,
-  TextInput: null,
 }
 
-const standardFields = ["Children", "FieldError", "FieldHint", "FieldLabel"]
-const inlineFields = ["Checkbox", "Radio"]
-
 interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify whether the Field should render inside a box. */
   boxed?: boolean
@@ -52,38 +45,47 @@ const Root = ({
   ...props
 }: FieldProps) => {
   const slots = { ...useSlots(componentSlots, children) }
-  const slotsArray = Object.entries(slots)
-
-  const isInlineControl = slotsArray.some((s) => s[1] !== null && inlineFields.includes(s[0]))
-  const hasFieldMarkers = !!(slots.FieldLabel ?? slots.FieldError ?? slots.FieldHint)
-  const [, control] =
-    slotsArray.find((s) => (!standardFields.includes(s[0]) && s[1] !== null ? s : null)) ?? []
+  const hasMarkers = !!(slots.FieldLabel ?? slots.FieldError ?? slots.FieldHint)
 
+  let isInline = false
+  let control: ReactNodeWithConfig
+  let controlSuffix = ""
   let controlId = useId()
   let controlDisabled = false
 
-  if (control) {
-    if (typeof control === "object" && "props" in control) {
-      const controlProps = control.props as HTMLProps<HTMLElement>
-      controlId = controlProps.id ?? controlId
-      controlDisabled = controlProps.disabled ?? false
-    }
-
-    slots.Control = React.cloneElement(control as React.ReactElement<HTMLInputElement>, {
-      id: controlId,
+  if (Array.isArray(slots.Children)) {
+    slots.Children = slots.Children.filter((child: ReactNodeWithConfig) => {
+      if (child?.type?.config?.isField) {
+        control = child
+        return false
+      }
+      return true
     })
   }
 
-  if (slots.FieldLabel && React.isValidElement(slots.FieldLabel)) {
+  if (React.isValidElement(control)) {
+    const controlProps = control.props as HTMLProps<HTMLElement>
+
+    controlId = controlProps.id ?? controlId
+    controlDisabled = controlProps.disabled ?? false
+    controlSuffix = control?.type?.config?.fieldSuffix ?? ""
+    isInline = control?.type?.config?.isInline ?? false
+
+    slots.Control = controlProps.id
+      ? control
+      : React.cloneElement(control as React.ReactElement<HTMLInputElement>, { id: controlId })
+  }
+
+  if (React.isValidElement(slots.FieldLabel) && !(slots.FieldLabel.props as LabelProps).htmlFor) {
     slots.FieldLabel = React.cloneElement(slots.FieldLabel as React.ReactElement<LabelProps>, {
-      htmlFor: (slots.FieldLabel.props as LabelProps).htmlFor ?? controlId,
+      htmlFor: controlId + controlSuffix,
     })
   }
 
   const componentProps = {
     ...props,
     "aria-disabled": controlDisabled || undefined,
-    className: clsx("coop-field", isInlineControl && "coop-field-inline", className),
+    className: clsx("coop-field", isInline && "coop-field-inline", className),
     "data-boxed": boxed || undefined,
     "data-error": error || undefined,
     "data-hide-error": hideErrorBar || undefined,
@@ -91,7 +93,7 @@ const Root = ({
 
   return (
     <div {...componentProps} ref={ref}>
-      {!isInlineControl && hasFieldMarkers && (
+      {!isInline && hasMarkers && (
         <div className="coop-field-markers">
           {slots.FieldLabel}
           {slots.FieldHint}
@@ -101,7 +103,7 @@ const Root = ({
       {slots.Control && (
         <div className="coop-field-control">
           {slots.Control}
-          {isInlineControl && hasFieldMarkers && (
+          {isInline && hasMarkers && (
             <div className="coop-field-markers">
               {slots.FieldLabel}
               {slots.FieldHint}

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,198 @@
+import type {
+  PopoverAnchorProps as RadixPopoverAnchorProps,
+  PopoverCloseProps as RadixPopoverCloseProps,
+  PopoverContentProps as RadixPopoverContentProps,
+  PopoverProps as RadixPopoverProps,
+  PopoverTriggerProps as RadixPopoverTriggerProps,
+} from "@radix-ui/react-popover"
+import type { JSX, ReactNode, Ref } from "react"
+
+import * as RadixPopover from "@radix-ui/react-popover"
+import clsx from "clsx"
+
+import { useSlots } from "../../hooks/useSlots"
+import { bgClassToColor, hasUserBg } from "../../utils"
+
+export interface PopoverProps extends RadixPopoverProps {
+  /** Content inside the Popover.
+   *
+   * This should be a `Popover.Trigger` and `Popover.Content`, with an optional `Popover.Close`. Other children will be ignored. */
+  children: string | ReactNode
+  /** **(Optional)** Callback to run when the Popover is opened or closed. */
+  onOpenChange?: RadixPopoverProps["onOpenChange"]
+  /** **(Optional)** Force the Popover state. Must be used together with `onOpenChange`. */
+  open?: RadixPopoverProps["open"]
+}
+
+interface PopoverTriggerProps extends RadixPopoverTriggerProps {
+  /** **(Optional)** When true, the element passed as a child becomes the trigger root element. */
+  asChild?: RadixPopoverTriggerProps["asChild"]
+  /** **(Optional)** Content inside the Popover Trigger. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+}
+
+interface PopoverContentProps extends RadixPopoverContentProps {
+  /** **(Optional)** Specify horizontal alignment of the Popover against the trigger. May change when collisions occur. */
+  align?: RadixPopoverContentProps["align"]
+  /** **(Optional)** Specify pixel offset from the "start" or "end" alignment. */
+  alignOffset?: RadixPopoverContentProps["alignOffset"]
+  /** **(Optional)** Specify whether the Popover should reposition itself if it falls out of the viewport. */
+  avoidCollisions?: RadixPopoverContentProps["avoidCollisions"]
+  /** **(Optional)** Content inside the Popover window. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify pixel boundary for collision safe area. */
+  collisionPadding?: RadixPopoverContentProps["collisionPadding"]
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+  /** **(Optional)** Specify placement of the Popover against the trigger. Will change when collisions occur. */
+  side?: RadixPopoverContentProps["side"]
+  /** **(Optional)** Specify pixel offset from the trigger element. */
+  sideOffset?: RadixPopoverContentProps["sideOffset"]
+}
+
+interface PopoverCloseProps extends RadixPopoverCloseProps {
+  /** **(Optional)** When true, the element passed as a child becomes the close button root element. */
+  asChild?: RadixPopoverCloseProps["asChild"]
+  /** **(Optional)** Content inside the Popover Close element. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+}
+
+interface PopoverAnchorProps extends RadixPopoverAnchorProps {
+  /** **(Optional)** When true, the element passed as a child becomes the anchor root element. */
+  asChild?: RadixPopoverAnchorProps["asChild"]
+  /** **(Optional)** Content inside the Popover Anchor element. */
+  children?: React.ReactNode
+}
+
+const componentSlots = {
+  PopoverAnchor: null,
+  PopoverContent: null,
+  PopoverTrigger: null,
+}
+
+export const Popover = ({ children, ...props }: PopoverProps): JSX.Element => {
+  const slots = useSlots(componentSlots, children)
+
+  return (
+    <RadixPopover.Root {...props}>
+      {slots.PopoverAnchor ?? slots.PopoverTrigger}
+      <RadixPopover.Portal>{slots.PopoverContent}</RadixPopover.Portal>
+    </RadixPopover.Root>
+  )
+}
+
+const PopoverContent = ({
+  align = "center",
+  alignOffset = 0,
+  asChild = false,
+  avoidCollisions = true,
+  children,
+  className,
+  collisionPadding = 16,
+  ref,
+  side = "bottom",
+  sideOffset = 4,
+  style,
+  ...props
+}: PopoverContentProps): JSX.Element => {
+  const componentProps = {
+    align,
+    alignOffset,
+    asChild,
+    avoidCollisions,
+    className: clsx("coop-popover", !hasUserBg(className) && "bg-tint-grey", className),
+    collisionPadding,
+    side,
+    sideOffset,
+    style,
+    ...props,
+  }
+
+  componentProps.style = {
+    ...style,
+    "--popover-bg": `var(--color-${bgClassToColor(componentProps.className)})`,
+  }
+
+  return (
+    <RadixPopover.Content ref={ref} {...componentProps}>
+      {children}
+      <RadixPopover.Arrow className="coop-popover-arrow" />
+    </RadixPopover.Content>
+  )
+}
+
+PopoverContent.displayName = "Popover.Content"
+
+const PopoverTrigger = ({
+  asChild = false,
+  children,
+  className,
+  ...props
+}: PopoverTriggerProps): JSX.Element => {
+  const componentProps = {
+    // There is a known issue with aria-controls being set to target
+    // elements that do not exist yet. This does not seem to affect
+    // screen readers or fail e2e avt tests, but may display in
+    // storybook as an "inconclusive" axe error.
+
+    // https://github.com/radix-ui/primitives/pull/3243
+    // https://github.com/radix-ui/primitives/issues/3242
+
+    // "aria-controls": undefined,
+    asChild,
+    className: clsx("coop-popover-trigger", className),
+    ...props,
+  }
+  return <RadixPopover.Trigger {...componentProps}>{children}</RadixPopover.Trigger>
+}
+
+PopoverTrigger.displayName = "Popover.Trigger"
+
+const PopoverClose = ({
+  asChild = false,
+  children,
+  className,
+  ...props
+}: PopoverCloseProps): JSX.Element => {
+  const componentProps = {
+    asChild,
+    className: clsx("coop-popover-close", className),
+    ...props,
+  }
+
+  return (
+    <RadixPopover.Close aria-label="Close" {...componentProps}>
+      {children}
+    </RadixPopover.Close>
+  )
+}
+
+PopoverClose.displayName = "Popover.Close"
+
+const PopoverAnchor = ({
+  asChild = false,
+  children,
+  ...props
+}: PopoverAnchorProps): JSX.Element => {
+  const componentProps = {
+    asChild,
+    ...props,
+  }
+
+  return <RadixPopover.Anchor {...componentProps}>{children}</RadixPopover.Anchor>
+}
+
+PopoverAnchor.displayName = "Popover.Anchor"
+
+Popover.Trigger = PopoverTrigger
+Popover.Content = PopoverContent
+Popover.Close = PopoverClose
+Popover.Anchor = PopoverAnchor
+
+export default Popover

package/src/components/Popover/index.ts

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

package/src/components/Radio/Radio.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx"
 import { type InputHTMLAttributes, type JSX, Ref } from "react"
 
 import { useId } from "../../hooks/useId"
-import { StandardSizes } from "../../types"
+import { ComponentConfig, StandardSizes } from "../../types"
 
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -47,4 +47,9 @@ export const Radio = ({
   return <input {...componentProps} ref={ref} />
 }
 
+Radio.config = {
+  isField: true,
+  isInline: true,
+} satisfies ComponentConfig
+
 export default Radio

package/src/components/Searchbox/Searchbox.tsx

@@ -8,6 +8,7 @@ import React, { useCallback, useState } from "react"
 import { useId } from "../../hooks/useId"
 import { StandardSizes } from "../../types"
 import { Button, type ButtonProps } from "../Button"
+import Field from "../Field"
 import { Label as FieldLabel } from "../FieldMarkers/Label"
 import { SearchIcon } from "../Icon"
 import TextInput, { TextInputProps } from "../TextInput"
@@ -132,7 +133,9 @@ export const Searchbox = ({
     <form {...formProps} ref={ref}>
       {label && <FieldLabel {...labelProps}>{label}</FieldLabel>}
       <div className="coop-searchbox--inner">
-        <TextInput {...inputProps} />
+        <Field>
+          <TextInput {...inputProps} />
+        </Field>
         <Button {...buttonProps}>{button.label}</Button>
       </div>
     </form>

package/src/components/Select/Select.tsx

@@ -9,7 +9,7 @@ import type {
 
 import clsx from "clsx"
 
-import { StandardSizes } from "../../../src/types"
+import { ComponentConfig, StandardSizes } from "../../../src/types"
 import { useId } from "../../hooks/useId"
 
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
@@ -80,6 +80,8 @@ const SelectOptionGroup = ({ children, ...props }: SelectOptionGroupProps): JSX.
   return <optgroup {...props}>{children}</optgroup>
 }
 
+SelectOptionGroup.displayName = "Select.OptionGroup"
+
 const SelectOption = ({ children, className, ...props }: SelectOptionProps): JSX.Element => {
   return (
     <option className={clsx("coop-select--option", className)} {...props}>
@@ -88,10 +90,13 @@ const SelectOption = ({ children, className, ...props }: SelectOptionProps): JSX
   )
 }
 
-SelectOptionGroup.displayName = "Select.OptionGroup"
 SelectOption.displayName = "Select.Option"
 
 Select.OptionGroup = SelectOptionGroup
 Select.Option = SelectOption
 
+Select.config = {
+  isField: true,
+} satisfies ComponentConfig
+
 export default Select

package/src/components/TextInput/TextInput.tsx

@@ -2,7 +2,7 @@ import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { StandardSizes } from "../../../src/types"
+import { ComponentConfig, StandardSizes } from "../../../src/types"
 import { useId } from "../../hooks/useId"
 
 export interface TextInputProps extends Omit<
@@ -84,4 +84,8 @@ export const TextInput = ({
   )
 }
 
+TextInput.config = {
+  isField: true,
+} satisfies ComponentConfig
+
 export default TextInput

package/src/components/Textarea/Textarea.tsx

@@ -5,7 +5,7 @@ import { useState } from "react"
 
 import { useDebounce } from "../../hooks/useDebounce"
 import { useId } from "../../hooks/useId"
-import { StandardSizes } from "../../types"
+import { ComponentConfig, StandardSizes } from "../../types"
 
 const DEBOUNCE_DELAY = 750
 
@@ -22,9 +22,7 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   counter?: boolean
   /** **(Optional)** Specify whether the Textarea should allow more characters than its `maxLength` value.
    *
-   * Defaults to `false`, meaning users can enter more characters than the maximum but will be warned if they go over the limit. When set to `true`, users will be blocked from typing once they hit the character limit. This can be an accessiblity anti-pattern, so only use this option when absolutely necessary.
-   *
-   * Remember it is still your responsibility to handle validation on submission, this is simply a hint for the user.
+   * Defaults to `false`, meaning users can enter more characters than the maximum but will be warned if they go over the limit.
    */
   cutoff?: boolean
   /** **(Optional)** Specify whether the Textarea should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
@@ -41,7 +39,7 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   placeholder?: string
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLTextAreaElement>
-  /** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
+  /** **(Optional)** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
   rows?: number
   /** **(Optional)** Specify the Textarea size. */
   size?: StandardSizes
@@ -88,19 +86,13 @@ export const Textarea = ({
     !disabled && counter && maxLength && remaining != null && debouncedRemaining != null
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    userOnChange?.(e)
     maxLength && e.target && setRemaining(maxLength - e.target.value.length)
   }
   // const formItemProps = { "aria-disabled": disabled ? true : undefined }
   return (
     <div className="coop-textarea-wrapper">
-      <textarea
-        {...componentProps}
-        onChange={(e) => {
-          userOnChange?.(e)
-          handleChange(e)
-        }}
-        ref={ref}
-      />
+      <textarea {...componentProps} onChange={handleChange} ref={ref} />
       {showCounter && (
         <>
           <small
@@ -119,4 +111,8 @@ export const Textarea = ({
   )
 }
 
+Textarea.config = {
+  isField: true,
+} satisfies ComponentConfig
+
 export default Textarea

package/src/index.ts

@@ -3,6 +3,7 @@ export * from "./components/Author"
 export * from "./components/Button"
 export * from "./components/Card"
 export * from "./components/Checkbox"
+export * from "./components/DatePicker"
 export * from "./components/Expandable"
 export * from "./components/Field"
 export * from "./components/Fieldset"
@@ -10,6 +11,7 @@ export * from "./components/Flourish"
 export * from "./components/Form"
 export * from "./components/Image"
 export * from "./components/Pill"
+export * from "./components/Popover"
 export * from "./components/Radio"
 export * from "./components/RootSVG"
 export * from "./components/Searchbox"

package/src/types/index.ts

@@ -1,3 +1,18 @@
 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
+}