@cerberus-design/react 0.13.1-next-e3e9e48 → 0.13.1-next-d1e87c5

package/src/context/confirm-modal.tsx

@@ -9,6 +9,7 @@ import {
   useState,
   type MouseEvent,
   type PropsWithChildren,
+  type ReactNode,
 } from 'react'
 import { Portal } from '../components/Portal'
 import { Button } from '../components/Button'
@@ -23,26 +24,18 @@ import { ModalHeader } from '../components/ModalHeader'
 import { ModalHeading } from '../components/ModalHeading'
 import { ModalDescription } from '../components/ModalDescription'
 import { Avatar } from '../components/Avatar'
+import { HStack, VStack } from '@cerberus/styled-system/jsx'
 
 /**
  * This module provides a context and hook for the confirm modal.
  * @module
  */
 
-export interface ShowConfirmModalOptions {
-  /**
-   * The kind of confirm modal to show.
-   * @default 'non-destructive'
-   */
-  kind?: 'destructive' | 'non-destructive'
+export interface BaseConfirmOptions {
   /**
    * The heading of the confirm modal.
    */
   heading: string
-  /**
-   * The description of the confirm modal.
-   */
-  description?: string
   /**
    * The text for the action button.
    */
@@ -52,6 +45,37 @@ export interface ShowConfirmModalOptions {
    */
   cancelText: string
 }
+
+export interface DestructiveConfirmOptions extends BaseConfirmOptions {
+  /**
+   * The kind of confirm modal to show.
+   */
+  kind?: 'destructive'
+  /**
+   * The description of the confirm modal. Can only be a string for destructive confirm modals.
+   */
+  description?: string
+}
+
+export interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {
+  /**
+   * The kind of confirm modal to show.
+   * @default 'non-destructive'
+   */
+  kind?: 'non-destructive'
+  /**
+   * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.
+   * @example
+   * ```tsx
+   * description: <>Use a Fragment because we put the content within a Paragraph tag.</>
+   */
+  description?: ReactNode
+}
+
+export type ShowConfirmModalOptions =
+  | NonDestructiveConfirmModalOptions
+  | DestructiveConfirmOptions
+
 export type ShowResult =
   | ((value: boolean | PromiseLike<boolean>) => void)
   | null
@@ -97,10 +121,11 @@ export function ConfirmModal(
   const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)
   const focusTrap = trapFocus(modalRef)
   const ConfirmIcon = $cerberusIcons.confirmModal
+  const kind = content?.kind ?? 'non-destructive'
 
   const palette = useMemo(
-    () => (content?.kind === 'destructive' ? 'danger' : 'action'),
-    [content],
+    () => (kind === 'destructive' ? 'danger' : 'action'),
+    [kind],
   )
 
   const handleChoice = useCallback(
@@ -118,7 +143,7 @@ export function ConfirmModal(
   const handleShow = useCallback(
     (options: ShowConfirmModalOptions) => {
       return new Promise<boolean>((resolve) => {
-        setContent({ ...options, kind: options.kind || 'non-destructive' })
+        setContent({ ...options })
         show()
         resolveRef.current = resolve
       })
@@ -139,65 +164,63 @@ export function ConfirmModal(
 
       <Portal>
         <Modal onKeyDown={focusTrap} ref={modalRef}>
-          <ModalHeader>
-            <div
-              className={hstack({
-                justify: 'center',
-                w: 'full',
-              })}
-            >
-              <Show
-                when={palette === 'danger'}
-                fallback={
+          <VStack gap="xl" w="full">
+            <ModalHeader>
+              <div
+                className={hstack({
+                  justify: 'center',
+                  w: 'full',
+                })}
+              >
+                <Show
+                  when={palette === 'danger'}
+                  fallback={
+                    <Avatar
+                      ariaLabel=""
+                      gradient="charon-light"
+                      icon={<ConfirmIcon size={24} />}
+                      src=""
+                    />
+                  }
+                >
                   <Avatar
                     ariaLabel=""
-                    gradient="charon-light"
+                    gradient="hades-dark"
                     icon={<ConfirmIcon size={24} />}
                     src=""
                   />
-                }
+                </Show>
+              </div>
+              <ModalHeading>{content?.heading}</ModalHeading>
+              <ModalDescription>{content?.description}</ModalDescription>
+            </ModalHeader>
+
+            <HStack gap="4" w="full">
+              <Button
+                autoFocus
+                className={css({
+                  w: '1/2',
+                })}
+                name="confirm"
+                onClick={handleChoice}
+                palette={palette}
+                value="true"
+              >
+                {content?.actionText}
+              </Button>
+              <Button
+                className={css({
+                  w: '1/2',
+                })}
+                name="cancel"
+                onClick={handleChoice}
+                usage="outlined"
+                value="false"
               >
-                <Avatar
-                  ariaLabel=""
-                  gradient="hades-dark"
-                  icon={<ConfirmIcon size={24} />}
-                  src=""
-                />
-              </Show>
-            </div>
-            <ModalHeading>{content?.heading}</ModalHeading>
-            <ModalDescription>{content?.description}</ModalDescription>
-          </ModalHeader>
-
-          <div
-            className={hstack({
-              gap: '4',
-            })}
-          >
-            <Button
-              autoFocus
-              className={css({
-                w: '1/2',
-              })}
-              name="confirm"
-              onClick={handleChoice}
-              palette={palette}
-              value="true"
-            >
-              {content?.actionText}
-            </Button>
-            <Button
-              className={css({
-                w: '1/2',
-              })}
-              name="cancel"
-              onClick={handleChoice}
-              usage="outlined"
-              value="false"
-            >
-              {content?.cancelText}
-            </Button>
-          </div>
+                {content?.cancelText}
+              </Button>
+            </HStack>
+          </VStack>
         </Modal>
       </Portal>
     </ConfirmModalContext.Provider>

package/src/context/cta-modal.tsx

@@ -155,46 +155,46 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
             </IconButton>
           </span>
 
-          <ModalHeader>
-            <HStack justify="center" w="full">
-              <Avatar
-                ariaLabel=""
-                gradient="charon-light"
-                icon={
-                  <Show
-                    when={Boolean(confirmIcon)}
-                    fallback={<FallbackIcon size={24} />}
+          <VStack gap="xl" w="full">
+            <ModalHeader>
+              <VStack gap="lg" w="full">
+                <Avatar
+                  ariaLabel=""
+                  gradient="charon-light"
+                  icon={
+                    <Show
+                      when={Boolean(confirmIcon)}
+                      fallback={<FallbackIcon size={24} />}
+                    >
+                      {confirmIcon}
+                    </Show>
+                  }
+                  src=""
+                />
+                <ModalHeading>{content?.heading}</ModalHeading>
+                <ModalDescription>{content?.description}</ModalDescription>
+              </VStack>
+            </ModalHeader>
+
+            <HStack gap="md" 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"
                   >
-                    {confirmIcon}
-                  </Show>
-                }
-                src=""
-              />
+                    {action.text}
+                  </Button>
+                ))}
+              </Show>
             </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>
+          </VStack>
         </Modal>
       </Portal>
     </CTAModalContext.Provider>

package/build/modern/chunk-KFGI37CO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface ShowConfirmModalOptions {\n  /**\n   * The kind of confirm modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'destructive' | 'non-destructive'\n  /**\n   * The heading of the confirm modal.\n   */\n  heading: string\n  /**\n   * The description of the confirm modal.\n   */\n  description?: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\nexport type ShowResult =\n  | ((value: boolean | PromiseLike<boolean>) => void)\n  | null\n\nexport interface ConfirmModalValue {\n  show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport interface ConfirmModalProviderProps {}\n\n/**\n * Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n *   <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await confirm.show({\n *   heading: 'Add new payment method?',\n *  description:\n *   'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n  props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n  const { modalRef, show, close } = useModal()\n  const resolveRef = useRef<ShowResult>(null)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const ConfirmIcon = $cerberusIcons.confirmModal\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(true)\n      }\n      resolveRef.current?.(false)\n      close()\n    },\n    [close],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        show()\n        resolveRef.current = resolve\n      })\n    },\n    [show],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <ConfirmModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <ModalHeader>\n            <div\n              className={hstack({\n                justify: 'center',\n                w: 'full',\n              })}\n            >\n              <Show\n                when={palette === 'danger'}\n                fallback={\n                  <Avatar\n                    ariaLabel=\"\"\n                    gradient=\"charon-light\"\n                    icon={<ConfirmIcon size={24} />}\n                    src=\"\"\n                  />\n                }\n              >\n                <Avatar\n                  ariaLabel=\"\"\n                  gradient=\"hades-dark\"\n                  icon={<ConfirmIcon size={24} />}\n                  src=\"\"\n                />\n              </Show>\n            </div>\n            <ModalHeading>{content?.heading}</ModalHeading>\n            <ModalDescription>{content?.description}</ModalDescription>\n          </ModalHeader>\n\n          <div\n            className={hstack({\n              gap: '4',\n            })}\n          >\n            <Button\n              autoFocus\n              className={css({\n                w: '1/2',\n              })}\n              name=\"confirm\"\n              onClick={handleChoice}\n              palette={palette}\n              value=\"true\"\n            >\n              {content?.actionText}\n            </Button>\n            <Button\n              className={css({\n                w: '1/2',\n              })}\n              name=\"cancel\"\n              onClick={handleChoice}\n              usage=\"outlined\"\n              value=\"false\"\n            >\n              {content?.cancelText}\n            </Button>\n          </div>\n        </Modal>\n      </Portal>\n    </ConfirmModalContext.Provider>\n  )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n  const context = useContext(ConfirmModalContext)\n  if (context === null) {\n    throw new Error(\n      'useConfirmModal must be used within a ConfirmModal Provider',\n    )\n  }\n  return context\n}\n"],"mappings":"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","names":[]}