@coopdigital/react 0.52.3 → 0.53.0

package/src/components/Expandable/Expandable.tsx

@@ -4,10 +4,10 @@ import { clsx } from "clsx"
 
 import { useSlots } from "../../hooks/useSlots"
 import { bgClassToColor, hasUserBg } from "../../utils"
-import { ChevronDownIcon } from "../Icon"
+import { ChevronDownIcon } from "../icons"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
-  /** Main content inside the component, only visible when it is open. It can be any valid JSX or string. */
+  /** Main content inside the component. This should be an `Expandable.Summary` and `Expandable.Content`. */
   children: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
@@ -22,8 +22,15 @@ interface ExpandableSummaryProps extends HTMLAttributes<HTMLElement> {
   className?: string
 }
 
+interface ExpandableContentProps extends HTMLAttributes<HTMLElement> {
+  /** **(Optional)** Content inside the Expandable. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the content wrapper. */
+  className?: string
+}
+
 const componentSlots = {
-  Children: null,
+  ExpandableContent: null,
   ExpandableSummary: null,
 }
 
@@ -47,7 +54,7 @@ export const Expandable = ({
   return (
     <details {...componentProps} ref={ref}>
       {slots.ExpandableSummary}
-      <div className="coop-expandable--content">{slots.Children}</div>
+      {slots.ExpandableContent}
     </details>
   )
 }
@@ -66,8 +73,18 @@ const ExpandableSummary = ({ children, className, ...props }: ExpandableSummaryP
   )
 }
 
-ExpandableSummary.displayName = "Expandable.Summary"
+const ExpandableContent = ({ children, className, ...props }: ExpandableContentProps) => {
+  return (
+    <div className={clsx("coop-expandable--content", className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+ExpandableSummary.config = { name: "ExpandableSummary" }
+ExpandableContent.config = { name: "ExpandableContent" }
 
 Expandable.Summary = ExpandableSummary
+Expandable.Content = ExpandableContent
 
 export default Expandable

package/src/components/Field/Field.tsx

@@ -132,19 +132,14 @@ export const FieldControl = ({ children, className, ...props }: ControlProps): J
   )
 }
 
-FieldControl.displayName = "Field.Control"
-
 const FieldLabel = (props: LabelProps) => <BaseLabel {...props} />
-
-FieldLabel.displayName = "Field.Label"
-
 const FieldHint = (props: HintProps) => <BaseHint {...props} />
-
-FieldHint.displayName = "Field.Hint"
-
 const FieldError = (props: ErrorProps) => <BaseError {...props} />
 
-FieldError.displayName = "Field.Error"
+FieldControl.config = { name: "FieldControl" }
+FieldLabel.config = { name: "FieldLabel" }
+FieldHint.config = { name: "FieldHint" }
+FieldError.config = { name: "FieldError" }
 
 export const Field = Object.assign(Root, {
   Control: FieldControl,

package/src/components/Fieldset/Fieldset.tsx

@@ -79,19 +79,14 @@ export const FieldsetFields = ({
   return <div {...componentProps}>{children}</div>
 }
 
-FieldsetFields.displayName = "Fieldset.Fields"
-
 const FieldsetLegend = (props: LegendProps) => <BaseLegend {...props} />
-
-FieldsetLegend.displayName = "Fieldset.Legend"
-
 const FieldsetHint = (props: HintProps) => <BaseHint {...props} />
-
-FieldsetHint.displayName = "Fieldset.Hint"
-
 const FieldsetError = (props: ErrorProps) => <BaseError {...props} />
 
-FieldsetError.displayName = "Fieldset.Error"
+FieldsetFields.config = { name: "FieldsetField" }
+FieldsetLegend.config = { name: "FieldsetLegend" }
+FieldsetHint.config = { name: "FieldsetHint" }
+FieldsetError.config = { name: "FieldsetError" }
 
 export const Fieldset = Object.assign(Root, {
   Error: FieldsetError,

package/src/components/Pill/Pill.tsx

@@ -68,7 +68,7 @@ const PillBadge = ({ children, className }: PillBadgeProps) => {
   )
 }
 
-PillBadge.displayName = "Pill.Badge"
+PillBadge.config = { name: "PillBadge" }
 
 Pill.Badge = PillBadge
 

package/src/components/Popover/Popover.tsx

@@ -127,8 +127,6 @@ const PopoverContent = ({
   )
 }
 
-PopoverContent.displayName = "Popover.Content"
-
 const PopoverTrigger = ({
   asChild = false,
   children,
@@ -152,8 +150,6 @@ const PopoverTrigger = ({
   return <RadixPopover.Trigger {...componentProps}>{children}</RadixPopover.Trigger>
 }
 
-PopoverTrigger.displayName = "Popover.Trigger"
-
 const PopoverClose = ({
   asChild = false,
   children,
@@ -173,8 +169,6 @@ const PopoverClose = ({
   )
 }
 
-PopoverClose.displayName = "Popover.Close"
-
 const PopoverAnchor = ({
   asChild = false,
   children,
@@ -188,7 +182,10 @@ const PopoverAnchor = ({
   return <RadixPopover.Anchor {...componentProps}>{children}</RadixPopover.Anchor>
 }
 
-PopoverAnchor.displayName = "Popover.Anchor"
+PopoverTrigger.config = { name: "PopoverTrigger" }
+PopoverContent.config = { name: "PopoverContent" }
+PopoverClose.config = { name: "PopoverClose" }
+PopoverAnchor.config = { name: "PopoverAnchor" }
 
 Popover.Trigger = PopoverTrigger
 Popover.Content = PopoverContent

package/src/components/Searchbox/Searchbox.tsx

@@ -10,7 +10,7 @@ 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 { SearchIcon } from "../icons"
 import TextInput, { TextInputProps } from "../TextInput"
 
 export interface SearchboxProps extends Omit<

package/src/components/Select/Select.tsx

@@ -80,8 +80,6 @@ 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}>
@@ -90,7 +88,8 @@ const SelectOption = ({ children, className, ...props }: SelectOptionProps): JSX
   )
 }
 
-SelectOption.displayName = "Select.Option"
+SelectOption.config = { name: "SelectOption" }
+SelectOptionGroup.config = { name: "SelectOptionGroup" }
 
 Select.OptionGroup = SelectOptionGroup
 Select.Option = SelectOption

package/src/components/Signpost/Signpost.tsx

@@ -3,7 +3,7 @@ import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { ChevronRightIcon } from "../Icon"
+import { ChevronRightIcon } from "../icons"
 import { Image, ImageProps } from "../Image"
 
 export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {

package/src/hooks/useSlots.ts

@@ -1,4 +1,5 @@
 import React from "react"
+import { ReactNodeWithConfig } from "src/types"
 
 type Slots<T> = Record<keyof T, React.ReactNode>
 
@@ -6,10 +7,17 @@ export function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T {
   return k in x
 }
 
-export function getSlotName(node: React.ReactNode): string | false {
-  return React.isValidElement(node) && node.type && typeof node.type !== "string"
-    ? node.type.name
-    : false
+export function getSlotName(node: ReactNodeWithConfig): string | false {
+  if (
+    React.isValidElement(node) &&
+    node.type &&
+    typeof node.type !== "string" &&
+    typeof node.type !== "symbol"
+  ) {
+    return node.type?.config?.name ?? node.type.name
+  }
+
+  return false
 }
 
 export function useSlots<T>(

package/src/types/index.ts

@@ -15,4 +15,5 @@ export interface ComponentConfig {
   fieldSuffix?: string
   isField?: boolean
   isInline?: boolean
+  name?: string
 }