@codeleap/web 6.3.0 → 7.0.0

package/src/components/Modal/elements.tsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import {
+  ModalOverlay,
+  Modal as RACModal,
+  Dialog,
+  Heading,
+} from 'react-aria-components'
+import { TypeGuards } from '@codeleap/types'
+import { View } from '../View'
+import { Text } from '../Text'
+import { useModalContext } from './context'
+import { ModalProps } from './types'
+
+/**
+ * Full-screen overlay that controls open/close state and dismiss gestures for the modal.
+ * Backdrop click dismissal and Escape-key dismissal are each gated by `closable` + their respective props.
+ * Must be rendered inside `Modal.Provider`.
+ */
+export const ModalBackdrop = ({ children }: React.PropsWithChildren) => {
+  const { styles, close, props } = useModalContext()
+
+  return (
+    <ModalOverlay
+      isOpen={!!props.visible}
+      onOpenChange={(open) => { if (!open) close() }}
+      isDismissable={!!(props.closable && props.dismissOnBackdrop)}
+      isKeyboardDismissDisabled={!props.closeOnEscape}
+      css={(styles as any).backdrop}
+    >
+      {children}
+    </ModalOverlay>
+  )
+}
+
+type BoxProps = React.PropsWithChildren<{
+  'aria-label'?: string
+}>
+
+/**
+ * Scoped dialog container that wraps children in a react-aria `Modal` + `Dialog` pair.
+ * Falls back to `debugName` or `"Dialog"` as the accessible label when no `title` is provided.
+ * Must be rendered inside `Modal.Backdrop`.
+ */
+export const ModalBox = ({ children, 'aria-label': ariaLabel }: BoxProps) => {
+  const { styles, props } = useModalContext()
+  const resolvedAriaLabel = ariaLabel ?? (!props.title ? (props.debugName ?? 'Dialog') : undefined)
+
+  return (
+    <RACModal css={(styles as any).box}>
+      <Dialog aria-label={resolvedAriaLabel}>
+        {children}
+      </Dialog>
+    </RACModal>
+  )
+}
+
+type HeaderProps = Partial<Pick<ModalProps, 'title' | 'description' | 'showClose' | 'renderClose'>>
+
+/**
+ * Renders the modal title, description, and optional close button; returns `null` when none of those are present.
+ * Props passed directly override values inherited from `Modal.Provider` context.
+ * Uses: `Text`, `View`
+ */
+export const ModalHeader = ({ title, description, showClose, renderClose }: HeaderProps = {}) => {
+  const { styles, close, props: ctxProps } = useModalContext()
+
+  const resolvedTitle = title ?? ctxProps.title
+  const resolvedDescription = description ?? ctxProps.description
+  const resolvedShowClose = showClose ?? ctxProps.showClose
+  const resolvedRenderClose = renderClose ?? ctxProps.renderClose
+
+  
+  const showCloseButton = resolvedShowClose !== false && TypeGuards.isFunction(resolvedRenderClose)
+ 
+  const hasHeader = !!resolvedTitle || !!resolvedDescription || showCloseButton
+
+  if (!hasHeader) return null
+  
+  const titleElement  = TypeGuards.isString(resolvedTitle) ? (
+          <Text component={Heading} text={resolvedTitle} slot='title' css={styles.title}></Text>          
+      ) : (resolvedTitle ?? null)
+ 
+
+  return (
+    <>
+      <View component='header' style={styles.header}>
+        {titleElement}
+        {resolvedRenderClose?.({close}) ?? null}
+      </View>
+      {resolvedDescription && (
+        TypeGuards.isString(resolvedDescription) ? (
+          <Text text={resolvedDescription} style={styles.description} />
+        ) : resolvedDescription
+      )}
+    </>
+  )
+}
+
+/**
+ * Scrollable content area of the modal.
+ * Must be rendered inside `Modal.Provider`.
+ * Uses: `View`
+ */
+export const ModalBody = ({ children }: React.PropsWithChildren) => {
+  const { styles } = useModalContext()
+  return <View style={styles.body}>{children}</View>
+}
+
+/**
+ * Sticky action area rendered below `Modal.Body`; falls back to the `footer` prop from context when no `children` are supplied.
+ * Returns `null` when no content is available.
+ * Uses: `View`
+ */
+export const ModalFooter = ({ children }: React.PropsWithChildren) => {
+  const { styles, props } = useModalContext()
+  const content = children ?? props.footer
+  if (!content) return null
+  return <View component='footer' style={styles.footer}>{content}</View>
+}

package/src/components/Modal/index.tsx

@@ -1,344 +1,57 @@
-import { TypeGuards } from '@codeleap/types'
-import { onMount, onUpdate } from '@codeleap/hooks'
-import React, { useCallback, useId, useRef } from 'react'
-import ReactDOM from 'react-dom'
-import { v4 } from 'uuid'
-import { View } from '../View'
-import { Text } from '../Text'
-import { Overlay } from '../Overlay'
-import { ActionIcon } from '../ActionIcon'
-import { Touchable } from '../Touchable'
-import { modalScrollLock, modalInferIndexes, modalsState } from '../../lib/tools/modal'
-import { ModalHeaderProps, ModalProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import React from 'react'
+import { ModalProps } from './types'
+import { ModalProvider } from './context'
+import {
+  ModalBackdrop,
+  ModalBox,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from './elements'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
-import { useIsomorphicEffect } from '../../lib'
 
 export * from './styles'
 export * from './types'
-
-function focusModal(event: FocusEvent, id: string) {
-  event?.preventDefault()
-  const modal = document.getElementById(id)
-  if (modal) modal.focus()
-}
-
-const ModalDefaultHeader = (props: ModalHeaderProps) => {
-  const {
-    id,
-    styles,
-    title,
-    showClose,
-    closable,
-    closeIconName,
-    onPressClose,
-    closeButtonProps = {},
-    description,
-    debugName,
-  } = props
-
-  const closeButtonStyles = useNestedStylesByKey('closeButton', styles)
-
-  const showCloseButton = showClose && closable
-
-  const hasHeader = !!title || !!description || showCloseButton
-
-  if (!hasHeader) return null
-
-  return (
-    <View
-      id={`${id}-header`}
-      component='header'
-      style={styles.header}
-      className='modal-header header'
-    >
-      <View id={`${id}-title`} style={styles.titleWrapper}>
-        {TypeGuards.isString(title) ? (
-          <Text debugName={debugName} text={title} style={styles.title} />
-        ) : title}
-
-        {showCloseButton ? (
-          <ActionIcon
-            debugName={debugName}
-            icon={closeIconName as AppIcon}
-            onPress={onPressClose}
-            {...closeButtonProps}
-            style={closeButtonStyles}
-          />
-        ) : null}
-      </View>
-
-      {TypeGuards.isString(description) ? (
-        <Text debugName={debugName} text={description} style={styles.description} />
-      ) : description}
-    </View>
-  )
-}
-
-const ModalWrapper = ({ styles, visible, modalId, autoIndex, children, closeOnEscPress }) => {
-  const index = modalsState.use(state => state.indexes?.[modalId] ?? 0)
-
-  const modalRef = useRef(null)
-
-  const handleTabKeyPress = useCallback((e: React.KeyboardEvent<HTMLDivElement>, { firstElement, lastElement }: Record<'firstElement' | 'lastElement', HTMLDivElement>) => {
-    if (e.key === 'Tab' || e?.keyCode === 9) {
-      if (e.shiftKey && document.activeElement === firstElement) {
-        e.preventDefault()
-        lastElement.focus()
-      } else if (
-        !e.shiftKey &&
-        document.activeElement === lastElement
-      ) {
-        e.preventDefault()
-        firstElement.focus()
-      }
-    }
-  }, [])
-
-  onUpdate(() => {
-    if (visible) {
-      const modalElement = modalRef.current
-
-      const focusableElements = modalElement.querySelectorAll('[tabindex]:not([tabindex="-1"])') as NodeListOf<HTMLDivElement>
-      const firstElement = focusableElements[0]
-      const lastElement = focusableElements[focusableElements.length - 1]
-
-      modalElement.addEventListener('keydown', (e) => handleTabKeyPress(e, { firstElement, lastElement }))
-      modalElement.addEventListener('keydown', closeOnEscPress)
-
-      return () => {
-        modalElement.removeEventListener('keydown', (e) => handleTabKeyPress(e, { firstElement, lastElement }))
-        modalElement.removeEventListener('keydown', closeOnEscPress)
-      }
-    }
-  }, [visible])
-
-  return <View
-    ref={modalRef}
-    aria-hidden={!visible}
-    style={[
-      styles.wrapper,
-      visible ? styles['wrapper:visible'] : styles['wrapper:hidden'],
-      autoIndex ? { zIndex: index } : null,
-    ]}
-  >
-    {children}
-  </View>
-}
-
-const ModalContent = (modalProps: ModalProps & { id: string }) => {
-  const {
-    children,
-    visible,
-    title,
-    toggle,
-    footer,
-    style,
-    renderHeader: ModalHeader,
-    closable,
-    withOverlay,
-    showClose,
-    closeIconName,
-    renderModalBody: ModalBody,
-    closeOnEscape,
-    onClose,
-    overlayProps,
-    dismissOnBackdrop,
-    debugName,
-    backdropProps,
-    alterHistory,
-    id: modalId,
-    autoIndex,
-    ...props
-  } = modalProps
-
-  const styles = useStylesFor(Modal.styleRegistryName, style)
-
-  const id = useId()
-
-  const toggleAndReturn = () => {
-    toggle?.()
-
-    if (alterHistory) {
-      window.history.back()
-    }
-
-    if (TypeGuards.isFunction(onClose)) onClose()
-  }
-
-  const closeOnEscPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (!closeOnEscape) return null
-
-    if (e?.key === 'Escape' || e?.keyCode === 27) {
-      toggleAndReturn()
-    }
-  }
-
-  const close = (closable && dismissOnBackdrop) ? toggleAndReturn : () => null
-
-  useIsomorphicEffect(() => {
-    const modal = document.getElementById(id)
-    if (modal) modal.focus()
-  }, [id])
+export * from './context'
+export * from './elements'
+
+/**
+ * Accessible dialog that blocks page interaction while open, with backdrop-click and Escape-key dismissal.
+ * Controlled via `visible` / `toggle`; defaults to `closable`, `dismissOnBackdrop`, and `closeOnEscape` all `true`.
+ * Uses: `Modal.Provider`, `Modal.Backdrop`, `Modal.Box`, `Modal.Header`, `Modal.Body`, `Modal.Footer`
+ */
+export const Modal = (props: ModalProps) => {
+  const { children, ...providerProps } = { ...Modal.defaultProps, ...props }
 
   return (
-    <ModalWrapper
-      styles={styles}
-      modalId={modalId}
-      autoIndex={autoIndex}
-      visible={visible}
-      closeOnEscPress={closeOnEscPress}
-    >
-      <Overlay
-        debugName={debugName}
-        visible={withOverlay ? visible : false}
-        {...overlayProps}
-        style={[
-          styles.backdrop,
-          visible ? styles['backdrop:visible'] : styles['backdrop:hidden'],
-        ]}
-      />
-
-      <View style={styles.innerWrapper}>
-        <Touchable
-          onPress={close}
-          debounce={1000}
-          debugName='modal backdrop'
-          {...backdropProps}
-          style={styles.backdropPressable}
-        />
-
-        <View
-          component='section'
-          className='content'
-          tabIndex={0}
-          id={id}
-          aria-modal={true}
-          role='dialog'
-          aria-describedby={`${id}-title`}
-          aria-label='Close the modal by pressing Escape key'
-          {...props}
-          style={[
-            styles.box,
-            visible ? styles['box:visible'] : styles['box:hidden'],
-          ]}
-        >
-          <ModalHeader
-            {...modalProps}
-            styles={styles}
-            id={id}
-            onPressClose={toggleAndReturn}
-            debugName={debugName}
-          />
-
-          <ModalBody style={styles.body} id={id}>
-            {children}
-          </ModalBody>
-
-          {footer ? (
-            <View component='footer' style={styles.footer}>
-              {footer}
-            </View>
-          ) : null}
-        </View>
-      </View>
-    </ModalWrapper>
+    <ModalProvider {...providerProps}>
+      <ModalBackdrop>
+        <ModalBox>
+          <ModalHeader />
+          <ModalBody>{children}</ModalBody>
+          <ModalFooter />
+        </ModalBox>
+      </ModalBackdrop>
+    </ModalProvider>
   )
 }
 
-export const Modal = (props: ModalProps) => {
-  const allProps = {
-    ...Modal.defaultProps,
-    ...props,
-  }
-
-  const {
-    accessible,
-    visible,
-    scrollLock,
-    modalId: _modalId,
-    autoIndex,
-    toggle,
-  } = allProps
-
-  const modalId = useRef(_modalId ?? v4())
-
-  onMount(() => {
-    if (accessible) {
-      const appRoot = document.body
-      appRoot.addEventListener('focusin', (e) => focusModal(e, modalId.current))
-      return () => appRoot.removeEventListener('focusin', (e) => focusModal(e, modalId.current))
-    }
-  })
-
-  onUpdate(() => {
-    if (accessible) {
-      const appRoot = document.body
-      appRoot.setAttribute('aria-hidden', `${visible}`)
-      appRoot.setAttribute('tabindex', `${-1}`)
-    }
-
-    if (scrollLock) modalScrollLock(visible, modalId.current)
-
-    if (autoIndex) {
-      setTimeout(() => {
-        modalInferIndexes(visible, modalId.current)
-      }, visible ? 0 : 500)
-    }
-
-    return () => {
-      if (scrollLock) modalScrollLock(false, modalId.current)
-    }
-  }, [visible])
-
-  const content = <ModalContent {...allProps} visible={visible} toggle={toggle} id={modalId.current} />
-
-  if (typeof window === 'undefined') return content
-
-  return ReactDOM.createPortal(
-    content,
-    document.body,
-  )
-}
+Modal.Provider = ModalProvider
+Modal.Backdrop = ModalBackdrop
+Modal.Box = ModalBox
+Modal.Header = ModalHeader
+Modal.Body = ModalBody
+Modal.Footer = ModalFooter
 
 Modal.styleRegistryName = 'Modal'
-
-Modal.elements = [
-  'wrapper',
-  'box',
-  'backdrop',
-  'body',
-  'footer',
-  'header',
-  'title',
-  'innerWrapper',
-  'backdropPressable',
-  'description',
-  'titleWrapper',
-  `closeButton`,
-]
-
-Modal.rootElement = 'wrapper'
-
-Modal.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Modal as (props: StyledComponentProps<ModalProps, typeof styles>) => IJSX
-}
+Modal.elements = ['backdrop', 'box', 'header', 'body', 'footer', 'title', 'description']
+Modal.rootElement = 'backdrop'
 
 Modal.defaultProps = {
-  title: '',
-  closeIconName: 'x' as AppIcon,
   closable: true,
-  withOverlay: true,
   showClose: true,
-  closeOnEscape: true,
-  renderHeader: ModalDefaultHeader,
-  renderModalBody: View,
   dismissOnBackdrop: true,
-  description: null,
-  scrollLock: false,
-  autoIndex: false,
-  alterHistory: false,
+  closeOnEscape: true,
 } as Partial<ModalProps>
 
 WebStyleRegistry.registerComponent(Modal)

package/src/components/Modal/styles.ts

@@ -1,20 +1,10 @@
-import { ActionIconComposition } from '../ActionIcon'
-
-export type AnimatableParts = 'box' | 'backdrop' | 'wrapper'
-
 export type ModalParts =
-  | AnimatableParts
+  | 'backdrop'
+  | 'box'
+  | 'header'
   | 'body'
   | 'footer'
-  | 'header'
   | 'title'
-  | 'innerWrapper'
-  | 'backdropPressable'
   | 'description'
-  | 'titleWrapper'
-  | `closeButton${Capitalize<ActionIconComposition>}`
 
-export type ModalComposition =
-  | ModalParts
-  | `${AnimatableParts}:visible`
-  | `${AnimatableParts}:hidden`
+export type ModalComposition = ModalParts

package/src/components/Modal/types.ts

@@ -1,51 +1,29 @@
-import { AnyFunction, PropsOf } from '@codeleap/types'
 import React from 'react'
-import { OverlayProps } from '../Overlay'
 import { ModalComposition } from './styles'
-import { ActionIconProps } from '../ActionIcon'
-import { TouchableProps } from '../Touchable'
-import { AppIcon, ICSS, StyledProp } from '@codeleap/styles'
+import { ICSS, StyleProp } from '@codeleap/styles'
 
-export type ModalProps =
-  {
-    visible?: boolean
-    children?: React.ReactNode
-    title?: React.ReactNode | string
-    description?: React.ReactNode | string
-    renderModalBody?: (props: ModalBodyProps) => React.ReactElement
-    toggle?: AnyFunction
-    style?: StyledProp<ModalComposition>
-    accessible?: boolean
-    showClose?: boolean
-    closable?: boolean
-    dismissOnBackdrop?: boolean
-    header?: React.ReactElement
-    footer?: React.ReactNode
-    withOverlay?: boolean
-    closeIconName?: AppIcon
-    renderHeader?: (props: ModalHeaderProps) => React.ReactElement
-    debugName?: string
-    closeButtonProps?: Partial<ActionIconProps>
-    closeOnEscape?: boolean
-    onClose?: () => void
-    overlayProps?: Partial<OverlayProps>
-    scrollLock?: boolean
-    backdropProps?: Partial<TouchableProps>
-    alterHistory?: boolean
-    modalId?: string
-    autoIndex?: boolean
-  }
+export interface ModalStyleDef {
+  __internal: Record<ModalComposition, ICSS>
+}
 
-export type ModalBodyProps = {
-  id: string
-  style: ICSS
+export type ModalProps = {
+  visible?: boolean
+  toggle?: () => void
+  onClose?: () => void
+  style?: StyleProp<ModalComposition, keyof ModalStyleDef>
+  /** When `false`, all dismiss gestures (backdrop click, Escape key) are blocked regardless of `dismissOnBackdrop` or `closeOnEscape`. Defaults to `true`. */
+  closable?: boolean
+  /** Close when clicking the backdrop overlay. Only active when `closable` is also `true`. Defaults to `true`. */
+  dismissOnBackdrop?: boolean
+  /** Close when pressing the Escape key. Only active when `closable` is also `true`. Defaults to `true`. */
+  closeOnEscape?: boolean
   children?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  footer?: React.ReactNode
+  /** Whether to render the close button produced by `renderClose`. Defaults to `true`. */
+  showClose?: boolean
+  /** Factory for a custom close button; receives a `close` callback. `showClose` must be `true` for it to render. */
+  renderClose?: (props: { close: () => void }) => React.ReactNode
+  debugName?: string
 }
-
-export type ModalHeaderProps =
-  Partial<Omit<ModalProps, 'children'>> &
-  {
-    id: string
-    styles: PropsOf<ModalComposition>
-    onPressClose: () => void
-  }