@cerberus-design/react 0.11.1 → 0.12.0

package/src/components/Menu.tsx

@@ -0,0 +1,244 @@
+import { Menu as ArkMenu } from '@ark-ui/react'
+import { menu } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+
+/**
+ * This module contains the Menu component family.
+ * @module Menu
+ */
+
+const menuStyles = menu()
+
+/**
+ * The root Menu component which controls the menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>Trigger</MenuTrigger>
+ * </Menu>
+ */
+export const Menu = ArkMenu.Root
+
+/**
+ * The MenuTrigger component opens/closes the Menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ * </Menu>
+ */
+export function MenuTrigger(props: ArkMenu.TriggerProps) {
+  return <ArkMenu.Trigger {...props} asChild />
+}
+
+/**
+ * The MenuContent component is the container for the menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItem value="item_1">Item 1</MenuItem>
+ *   <MenuItem value="item_2">Item 2</MenuItem>
+ *  </MenuContent>
+ * </Menu>
+ */
+export function MenuContent(props: ArkMenu.ContentProps) {
+  return (
+    <ArkMenu.Positioner>
+      <ArkMenu.Content
+        {...props}
+        className={cx(props.className, menuStyles.content)}
+      />
+    </ArkMenu.Positioner>
+  )
+}
+
+/**
+ * The MenuItem component is a single item in the menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItem value="item_1">Item 1</MenuItem>
+ *   <MenuItem value="item_2">Item 2</MenuItem>
+ *  </MenuContent>
+ * </Menu>
+ */
+export function MenuItem(props: ArkMenu.ItemProps) {
+  return (
+    <ArkMenu.Item {...props} className={cx(props.className, menuStyles.item)} />
+  )
+}
+
+/**
+ * The MenuItemGroup component is a group of menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItemGroup>
+ *    <MenuItem value="item_1">Item 1</MenuItem>
+ *    <MenuItem value="item_2">Item 2</MenuItem>
+ *   </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+export const MenuItemGroup = ArkMenu.ItemGroup
+
+/**
+ * The MenuItemGroupLabel component is the label for a group of menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItemGroup>
+ *    <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>
+ *    <MenuItem value="item_1">Item 1</MenuItem>
+ *    <MenuItem value="item_2">Item 2</MenuItem>
+ *   </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+export function MenuGroupLabel(props: ArkMenu.ItemGroupLabelProps) {
+  return (
+    <ArkMenu.ItemGroupLabel
+      {...props}
+      className={cx(props.className, menuStyles.itemGroupLabel)}
+    />
+  )
+}
+
+/**
+ * The MenuSeparator component is a visual divider between menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *    <MenuItemGroup>
+ *      <MenuGroupLabel>Group Label</MenuGroupLabel>
+ *      <MenuSeparator />
+ *      <MenuItem value="item_1">Item 1</MenuItem>
+ *      <MenuItem value="item_2">Item 2</MenuItem>
+ *    </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+export function MenuSeparator(props: ArkMenu.SeparatorProps) {
+  return (
+    <ArkMenu.Separator
+      {...props}
+      className={cx(props.className, menuStyles.separator)}
+    />
+  )
+}
+
+/**
+ * The MenuCheckboxItem component is a menu item with a checkbox.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuCheckboxItem
+ *     checked={checked}
+ *     onCheckedChange={setChecked}
+ *     value="checked"
+ *   >
+ *    <MenuItemIndicator>✅</MenuItemIndicator>
+ *    <MenuItemText>Check me</MenuItemText>
+ *   </MenuCheckboxItem>
+ * </MenuContent>
+ */
+// export function MenuCheckboxItem(props: ArkMenu.CheckboxItemProps) {
+//   return (
+//     <ArkMenu.CheckboxItem
+//       {...props}
+//       className={cx(props.className, menuStyles.item)}
+//     />
+//   )
+// }
+
+/**
+ * The MenuItemText component is the text for a grouped menu item.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuCheckboxItem
+ *     checked={checked}
+ *     onCheckedChange={setChecked}
+ *     value="checked"
+ *   >
+ *    <MenuItemText>Item 1</MenuItemText>
+ *   </MenuCheckboxItem>
+ *  </MenuContent>
+ * </Menu>
+ */
+// export function MenuItemText(props: ArkMenu.ItemTextProps) {
+//   return (
+//     <ArkMenu.ItemText
+//       {...props}
+//       className={cx(props.className, menuStyles.itemText)}
+//     />
+//   )
+// }
+
+/**
+ * The MenuItemIndicator component is the indicator for a grouped menu item.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuCheckboxItem
+ *    checked={checked}
+ *    onCheckedChange={setChecked}
+ *    value="checked"
+ *   >
+ *    <MenuItemIndicator>✅</MenuItemIndicator>
+ *    <MenuItemText>Check me</MenuItemText>
+ *   </MenuCheckboxItem>
+ *  </MenuContent>
+ */
+// export function MenuItemIndicator(props: ArkMenu.ItemIndicatorProps) {
+//   return (
+//     <ArkMenu.ItemIndicator
+//       {...props}
+//       className={cx(props.className, menuStyles.itemIndicator)}
+//     />
+//   )
+// }

package/src/components/ModalHeader.tsx

@@ -31,6 +31,7 @@ export function ModalHeader(props: ModalHeaderProps) {
           alignItems: 'flex-start',
           gap: 'md',
           mb: 'md',
+          position: 'relative',
         }),
       )}
     />

package/src/components/NavMenuLink.tsx

@@ -17,17 +17,7 @@ export interface NavMenuLinkProps
 }
 
 /**
- * The NavMenuLink component is a link element that is used within the NavMenu.
- * @see https://cerberus.digitalu.design/react/nav-menu
- * @example
- * ```tsx
- * <NavMenu>
- *  <NavMenuList id="nav-menu-list" position="bottom">
- *   <NavMenuLink href="/home">Home</NavMenuLink>
- *   <NavMenuLink href="/about">About</NavMenuLink>
- *  </NavMenuList>
- * </NavMenu>
- * ```
+ * @deprecated use the {@link Menu} family instead
  */
 export function NavMenuLink(props: NavMenuLinkProps): JSX.Element {
   const { as, ...nativeProps } = props

package/src/components/NavMenuList.tsx

@@ -32,9 +32,7 @@ interface GetPositionResult {
 }
 
 /**
- * Returns the position of the NavMenuList based on the position prop.
- * @param position - The position of the NavMenuList.
- * @returns The position of the NavMenuList.
+ * @deprecated use the {@link Menu} family instead
  */
 export function getPosition(position: Positions): GetPositionResult {
   const defaultPositions = {

package/src/components/NavMenuTrigger.tsx

@@ -37,16 +37,7 @@ export interface NavMenuTriggerProps
 }
 
 /**
- * A component that allows the user to trigger a navigation menu.
- * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)
- * @example
- * ```tsx
- * <NavMenu>
- *   <NavMenuTrigger controls="nav-menu-list">
- *     Menu
- *   </NavMenuTrigger>
- * </NavMenu>
- * ```
+ * @deprecated use the {@link Menu} family instead
  */
 export function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {
   const {

package/src/components/Notification.tsx

@@ -12,7 +12,6 @@ import {
   type PropsWithChildren,
   type MouseEvent,
 } from 'react'
-import { Close } from '@cerberus/icons'
 import { $cerberusIcons } from '../config/defineIcons'
 import type { IconType } from '../config/cerbIcons'
 import { trapFocus } from '../aria-helpers/trap-focus.aria'
@@ -62,6 +61,7 @@ export function Notification(props: PropsWithChildren<NotificationProps>) {
   const ref = useRef<HTMLDialogElement>(null)
   const onKeyDown = trapFocus(ref)
   const styles = notification({ palette })
+  const { close: CloseIcon } = $cerberusIcons
 
   return (
     <dialog
@@ -97,7 +97,7 @@ export function Notification(props: PropsWithChildren<NotificationProps>) {
         onClick={onClose}
         value={props.id}
       >
-        <Close />
+        <CloseIcon />
       </button>
     </dialog>
   )

package/src/components/Tag.tsx

@@ -1,4 +1,8 @@
-import type { HTMLAttributes, PropsWithChildren } from 'react'
+import type {
+  HTMLAttributes,
+  MouseEventHandler,
+  PropsWithChildren,
+} from 'react'
 import { Show } from './Show'
 import { css, cx } from '@cerberus/styled-system/css'
 import {
@@ -36,19 +40,19 @@ export type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
   /**
    * The action to be performed when the tag is clicked.
    */
-  onClick: () => void
+  onClick: MouseEventHandler<HTMLSpanElement>
   /**
    * The shape of the tag. Not available when the onClick prop is provided.
    * @type 'pill' | 'rounded'
    * @default 'pill'
    */
-  shape: 'pill'
+  shape?: never
   /**
    * The usage of the tag. Not available when the onClick prop is provided.
    * @type 'filled' | 'outlined'
    * @default 'filled'
    */
-  usage: 'filled'
+  usage?: never
 }
 
 export type TagProps = StaticTagProps | ClickableTagProps

package/src/components/Tbody.tsx

@@ -1,13 +1,12 @@
 import { tbody, type TbodyVariantProps } from '@cerberus/styled-system/recipes'
 import { cx } from '@cerberus/styled-system/css'
-import type { TableHTMLAttributes } from 'react'
 
 /**
  * This module provides a TBody component.
  * @module
  */
 
-export type TbodyBaseProps = TableHTMLAttributes<HTMLTableSectionElement>
+export type TbodyBaseProps = JSX.IntrinsicElements['tbody']
 export type TbodyProps = TbodyBaseProps & TbodyVariantProps
 
 /**

package/src/components/Td.tsx

@@ -1,13 +1,12 @@
 import { cx } from '@cerberus/styled-system/css'
 import { td, type TdVariantProps } from '@cerberus/styled-system/recipes'
-import type { TableHTMLAttributes } from 'react'
 
 /**
  * Th component for the Td component
  * @module
  */
 
-export type TdBaseProps = TableHTMLAttributes<HTMLTableCellElement>
+export type TdBaseProps = JSX.IntrinsicElements['td']
 export type TdProps = TdBaseProps & TdVariantProps
 
 /**

package/src/components/Th.tsx

@@ -1,6 +1,8 @@
+'use client'
+
 import { css, cx } from '@cerberus/styled-system/css'
 import { th, type ThVariantProps } from '@cerberus/styled-system/recipes'
-import type { MouseEvent, TableHTMLAttributes } from 'react'
+import type { MouseEvent } from 'react'
 import { Show } from './Show'
 
 /**
@@ -8,7 +10,7 @@ import { Show } from './Show'
  * @module
  */
 
-export type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {
+export type ThBaseProps = JSX.IntrinsicElements['th'] & {
   /**
    * Converts the Th into a actionable button. Called when the user clicks on
    * the Th.

package/src/components/Thead.tsx

@@ -1,13 +1,12 @@
 import { cx } from '@cerberus/styled-system/css'
 import { thead } from '@cerberus/styled-system/recipes'
-import type { TableHTMLAttributes } from 'react'
 
 /**
  * This module contains the Thead component.
  * @module
  */
 
-export type TheadProps = TableHTMLAttributes<HTMLTableSectionElement>
+export type TheadProps = JSX.IntrinsicElements['thead']
 
 /**
  * The Thead component is used to render a table header.

package/src/config/cerbIcons.ts

@@ -2,7 +2,7 @@ import {
   Checkmark,
   CheckmarkOutline,
   ChevronDown,
-  CloseFilled,
+  Close,
   CloudUpload,
   Information,
   Restart,
@@ -43,7 +43,7 @@ export interface DefinedIcons {
 export const defaultIcons: DefinedIcons = {
   avatar: UserFilled,
   checkbox: CheckmarkIcon,
-  close: CloseFilled,
+  close: Close,
   confirmModal: Information,
   delete: TrashCan,
   promptModal: Information,

package/src/context/cta-modal.tsx

@@ -0,0 +1,210 @@
+'use client'
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ButtonHTMLAttributes,
+  type MouseEvent,
+  type PropsWithChildren,
+  type ReactNode,
+} from 'react'
+import { Portal } from '../components/Portal'
+import { Button } from '../components/Button'
+import { $cerberusIcons } from '../config/defineIcons'
+import { trapFocus } from '../aria-helpers/trap-focus.aria'
+import { Show } from '../components/Show'
+import { Modal } from '../components/Modal'
+import { useModal } from '../hooks/useModal'
+import { ModalHeader } from '../components/ModalHeader'
+import { ModalHeading } from '../components/ModalHeading'
+import { ModalDescription } from '../components/ModalDescription'
+import { Avatar } from '../components/Avatar'
+import { HStack } from '@cerberus/styled-system/jsx'
+import { IconButton } from '../components/IconButton'
+import { css } from '@cerberus/styled-system/css'
+import { VStack } from '@cerberus/styled-system/jsx'
+
+/**
+ * This module provides a context and hook for the cta modal.
+ * @module
+ */
+
+export interface ShowCTAModalOptions {
+  /**
+   * The heading of the cta modal.
+   */
+  heading: string
+  /**
+   * The description of the cta modal.
+   */
+  description?: string
+  /**
+   * The icon used for the modal Avatar.
+   */
+  icon?: ReactNode
+  /**
+   * The actions for the cta modal. Max of 2 actions.
+   */
+  actions: {
+    text: string
+    onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>
+  }[]
+}
+
+export interface CTAModalValue {
+  show: (options: ShowCTAModalOptions) => void
+}
+
+const CTAModalContext = createContext<CTAModalValue | null>(null)
+
+export interface CTAModalProviderProps {}
+
+/**
+ * Provides a CTA modal to the app.
+ * @see https://cerberus.digitalu.design/react/cta-modal
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <CTAModal>
+ *   <SomeFeatureSection />
+ * </CTAModal>
+ *
+ * // Use the hook to show the cta modal.
+ * const cta = useCTAModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const userConsent = await cta.show({
+ *   heading: 'Create or copy a Cohort',
+ *  description:
+ *   'Create a new cohort or copy and existing one.',
+ *  icon: <Copy size={24} />,
+ *  actions: [
+ *  {
+ *   text: 'Create Cohort',
+ *   onClick: () => {},
+ *  {
+ *   text: 'Copy Cohort',
+ *   onClick: () => {}
+ *  }
+ * })
+ * setConsent(userConsent)
+ * }, [cta])
+ * ```
+ */
+export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
+  const { modalRef, show, close } = useModal()
+  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)
+  const focusTrap = trapFocus(modalRef)
+  const FallbackIcon = $cerberusIcons.confirmModal
+  const confirmIcon = content?.icon as ReactNode
+  const { close: CloseIcon } = $cerberusIcons
+
+  const handleShow = useCallback(
+    (options: ShowCTAModalOptions) => {
+      const maxActions = 2
+      if (options.actions.length > maxActions) {
+        throw new Error(
+          `CTA Modal only supports a maximum of ${maxActions} actions.`,
+        )
+      }
+      setContent({ ...options })
+      show()
+    },
+    [show],
+  )
+
+  const handleActionClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      const index = event.currentTarget.getAttribute('data-index')
+      const action = content?.actions[Number(index)]
+      if (typeof action?.onClick === 'function') {
+        action.onClick(event)
+      }
+      close()
+    },
+    [content, close],
+  )
+
+  const value = useMemo(
+    () => ({
+      show: handleShow,
+    }),
+    [handleShow],
+  )
+
+  return (
+    <CTAModalContext.Provider value={value}>
+      {props.children}
+
+      <Portal>
+        <Modal onKeyDown={focusTrap} ref={modalRef}>
+          <span
+            className={css({
+              padding: 'md',
+              position: 'absolute',
+              right: 0,
+              top: 0,
+              zIndex: 'decorator',
+            })}
+          >
+            <IconButton ariaLabel="Close modal" onClick={close}>
+              <CloseIcon />
+            </IconButton>
+          </span>
+
+          <ModalHeader>
+            <HStack justify="center" w="full">
+              <Avatar
+                ariaLabel=""
+                gradient="charon-light"
+                icon={
+                  <Show
+                    when={Boolean(confirmIcon)}
+                    fallback={<FallbackIcon size={24} />}
+                  >
+                    {confirmIcon}
+                  </Show>
+                }
+                src=""
+              />
+            </HStack>
+            <VStack gap="lg" w="full">
+              <ModalHeading>{content?.heading}</ModalHeading>
+              <ModalDescription>{content?.description}</ModalDescription>
+            </VStack>
+          </ModalHeader>
+
+          <HStack gap="md" pt="sm" w="full">
+            <Show when={Boolean(content?.actions?.length)}>
+              {content?.actions?.map((action, index) => (
+                <Button
+                  data-index={index}
+                  className={css({
+                    w: '1/2',
+                  })}
+                  key={index}
+                  onClick={handleActionClick}
+                  shape="rounded"
+                  usage="outlined"
+                >
+                  {action.text}
+                </Button>
+              ))}
+            </Show>
+          </HStack>
+        </Modal>
+      </Portal>
+    </CTAModalContext.Provider>
+  )
+}
+
+export function useCTAModal(): CTAModalValue {
+  const context = useContext(CTAModalContext)
+  if (context === null) {
+    throw new Error('useCTAModal must be used within a CTAModal Provider')
+  }
+  return context
+}

package/src/context/navMenu.tsx

@@ -42,8 +42,7 @@ export interface NavMenuContextValue {
 const NavMenuContext = createContext<NavMenuContextValue | null>(null)
 
 /**
- * Provides the nav menu state for all the NavMenu family components.
- * @see https://cerberus.digitalu.design/react/nav-menu
+ * @deprecated use the {@link Menu} family instead
  */
 export function NavMenu(props: PropsWithChildren): JSX.Element {
   const triggerRef = useRef<HTMLButtonElement>(null)

package/src/index.ts

@@ -21,6 +21,7 @@ export * from './components/IconButton'
 export * from './components/Input'
 export * from './components/Label'
 export * from './components/Legend'
+export * from './components/Menu'
 export * from './components/Modal'
 export * from './components/ModalHeader'
 export * from './components/ModalHeading'
@@ -52,6 +53,7 @@ export * from './components/Show'
 // context
 
 export * from './context/confirm-modal'
+export * from './context/cta-modal'
 export * from './context/feature-flags'
 export * from './context/field'
 export * from './context/navMenu'
@@ -75,6 +77,7 @@ export * from './aria-helpers/trap-focus.aria'
 // utils
 
 export * from './config/defineIcons'
+export * from './utils/index'
 
 // shared types