@codeleap/web 6.2.3 → 6.8.0

package/src/components/Drawer/index.tsx

@@ -1,181 +1,69 @@
-import { TypeGuards } from '@codeleap/types'
-import { useMemo } from '@codeleap/hooks'
-import { Overlay } from '../Overlay'
-import { View } from '../View'
-import { Text } from '../Text'
-import { ActionIcon } from '../ActionIcon'
-import ReactDOM from 'react-dom'
-import { useAnimatedStyle, usePopState } from '../../lib'
+import React from 'react'
+import { Modal as RACModal, Dialog } from 'react-aria-components'
+import { ModalContext, useModalContext } from '../Modal/context'
+import { ModalBackdrop, ModalBody, ModalFooter, ModalHeader } from '../Modal/elements'
+import { ModalComposition } from '../Modal/styles'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { DrawerProps } from './types'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
 
 export * from './styles'
 export * from './types'
 
-const axisMap = {
-  'left': ['top', 'left'],
-  'right': ['top', 'right'],
-  'top': ['top', 'right', 'left'],
-  'bottom': ['bottom', 'right', 'left']
-}
-
-const getInsetPath = (position: DrawerProps['position'], value: number) => {
-  let inset = ''
-
-  switch (position) {
-    case 'left':
-      inset = `inset(0 ${value}% 0 0)`
-      break
-    case 'right':
-      inset = `inset(0 0 0 ${value}%)`
-      break
-    case 'top':
-      inset = `inset(0 0 ${value}% 0)`
-      break
-    case 'bottom':
-      inset = `inset(${value}% 0 0 0)`
-      break
+const DrawerProvider = ({ children, position: _position, ...props }: DrawerProps) => {
+  const styles = useStylesFor(Drawer.styleRegistryName, props.style)
+  const close = () => {
+    props.toggle?.()
+    props.onClose?.()
   }
-
-  return inset
-}
-
-export const Drawer = (props: DrawerProps) => {
-  const {
-    open,
-    toggle,
-    children,
-    size,
-    title,
-    footer,
-    darkenBackground,
-    showCloseButton,
-    closeButtonProps,
-    position,
-    style,
-    debugName,
-    closeIcon,
-  } = {
-    ...Drawer.defaultProps,
-    ...props,
+  const value = {
+    props,
+    styles: styles as Record<ModalComposition, any>,
+    close,
   }
-
-  usePopState(open, toggle)
-
-  const styles = useStylesFor(Drawer.styleRegistryName, style)
-
-  const closeButtonStyles = useNestedStylesByKey('closeButton', styles)
-
-  const pose = useMemo(() => {
-    const pose = {}
-
-    for (const p of axisMap[position]) {
-      pose[p] = 0
-    }
-
-    return pose
-  }, [])
-
-  const expansionProperty = ['left', 'right'].includes(position) ? 'width': 'height'
-  const fixedProperty = expansionProperty == 'width' ? 'height' : 'width'
-  const fixedValue = fixedProperty == 'width' ? '100vw' : '100vh'
-  const measureProperty = expansionProperty == 'width' ? 'svw' : 'svh'
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const value = open ? 0 : 100
-
-    return {
-      clipPath: getInsetPath(position, value),
-      transition: {
-        duration: 0.25,
-      }
-    }
-  }, [open])
-
-  const wrapperAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: open ? 1 : 0,
-    pointerEvents: open ? 'auto' : 'none',
-    transition: {
-      duration: open ? 0.2 : 1.5,
-    }
-  }), [open])
-
-  const boxStyles = [
-    styles.box,
-    pose,
-    {
-      zIndex: 999,
-      position: 'fixed',
-      [fixedProperty]: fixedValue,
-      [expansionProperty]: `${size}${measureProperty}`
-    }
-  ]
-
-  const showHeader = (!TypeGuards.isNil(title) || showCloseButton)
-
-  const content = (
-    <View 
-      debugName={debugName} 
-      animated
-      animatedProps={wrapperAnimatedStyle}
-      style={styles.wrapper}
-    >
-      {darkenBackground ? (
-        <Overlay
-          debugName={debugName}
-          visible={open}
-          style={[
-            styles.overlay,
-            open ? styles['overlay:visible'] : styles['overlay:hidden'],
-          ]}
-          onPress={toggle}
-        />
-      ) : null}
-
-      <View animated animatedProps={animatedStyle} style={boxStyles}>
-        {
-          showHeader ? (
-            <View component='header' style={styles.header}>
-              {TypeGuards.isString(title) ? <Text style={styles.title} text={title} /> : title}
-              
-              {showCloseButton ? (
-                <ActionIcon
-                  debugName={debugName}
-                  icon={closeIcon as AppIcon}
-                  onPress={toggle}
-                  propagate={false}
-                  {...closeButtonProps}
-                  style={closeButtonStyles}
-                />
-              ) : null}
-            </View>
-          ) : null
-        }
-
-        <View style={styles.body}>{children}</View>
-
-        {footer ? (
-          <View component='footer' style={styles.footer}>
-            {footer}
-          </View>
-        ) : null}
-      </View>
-    </View>
+  return (
+    <ModalContext.Provider value={value}>
+      {children}
+    </ModalContext.Provider>
   )
+}
 
-  if (typeof window === 'undefined') return content
+const DrawerBox = ({ children, position }: React.PropsWithChildren<{ position?: DrawerProps['position'] }>) => {
+  const { styles, props } = useModalContext()
+  const resolvedAriaLabel = !props.title ? (props.debugName ?? 'Dialog') : undefined
+  return (
+    <RACModal css={(styles as any).box} data-position={position}>
+      <Dialog aria-label={resolvedAriaLabel}>
+        {children}
+      </Dialog>
+    </RACModal>
+  )
+}
 
-  return ReactDOM.createPortal(
-    content,
-    document.body,
+/**
+ * Side-panel overlay that slides in from a configurable edge of the viewport.
+ * Shares the same dismiss mechanics as `Modal` (backdrop click, Escape key), controlled by `closable` et al.
+ * Uses: `ModalBackdrop`, `ModalBody`, `ModalFooter`, `ModalHeader`
+ */
+export const Drawer = (props: DrawerProps) => {
+  const { children, position, ...rest } = { ...Drawer.defaultProps, ...props }
+  return (
+    <DrawerProvider {...rest} position={position}>
+      <ModalBackdrop>
+        <DrawerBox position={position}>
+          <ModalHeader />
+          <ModalBody>{children}</ModalBody>
+          <ModalFooter />
+        </DrawerBox>
+      </ModalBackdrop>
+    </DrawerProvider>
   )
 }
 
 Drawer.styleRegistryName = 'Drawer'
-Drawer.elements = ['wrapper', 'overlay', 'header', 'footer', 'closeButton', 'body', 'box', 'title']
-Drawer.rootElement = 'wrapper'
+Drawer.elements = ['backdrop', 'box', 'header', 'body', 'footer', 'title', 'description']
+Drawer.rootElement = 'backdrop'
 
 Drawer.withVariantTypes = <S extends AnyRecord>(styles: S) => {
   return Drawer as (props: StyledComponentProps<DrawerProps, typeof styles>) => IJSX
@@ -183,10 +71,10 @@ Drawer.withVariantTypes = <S extends AnyRecord>(styles: S) => {
 
 Drawer.defaultProps = {
   position: 'left',
-  showCloseButton: false,
-  darkenBackground: true,
-  size: 75,
-  closeIcon: 'x' as AppIcon,
+  closable: true,
+  showClose: false,
+  dismissOnBackdrop: true,
+  closeOnEscape: true,
 } as Partial<DrawerProps>
 
 WebStyleRegistry.registerComponent(Drawer)

package/src/components/Drawer/styles.ts

@@ -1,11 +1,8 @@
-import { ActionIconComposition } from '../ActionIcon'
-
 export type DrawerComposition =
-  | 'wrapper'
-  | 'overlay'
+  | 'backdrop'
+  | 'box'
   | 'header'
-  | 'footer'
-  | `closeButton${Capitalize<ActionIconComposition>}`
   | 'body'
-  | 'box'
+  | 'footer'
   | 'title'
+  | 'description'

package/src/components/Drawer/types.ts

@@ -1,23 +1,11 @@
-import { AnyFunction } from '@codeleap/types'
-import React from 'react'
-import { ComponentCommonProps } from '../../types/utility'
 import { DrawerComposition } from './styles'
-import { ActionIconProps } from '../ActionIcon'
-import { AppIcon, StyledProp } from '@codeleap/styles'
+import { ModalProps } from '../Modal/types'
+import { StyleProp } from '@codeleap/styles'
 
-export type DrawerProps =
-  ComponentCommonProps &
-  {
-    open: boolean
-    toggle: AnyFunction
-    darkenBackground?: boolean
-    size?: number
-    showCloseButton?: boolean
-    title?: React.ReactNode | string
-    footer?: React.ReactNode
-    position?: 'left' | 'right' | 'top' | 'bottom'
-    style?: StyledProp<DrawerComposition>
-    closeButtonProps?: Partial<ActionIconProps>
-    closeIcon?: AppIcon
-    children?: React.ReactNode
-  }
+export interface DrawerStyleDef {}
+
+export type DrawerProps = Omit<ModalProps, 'style'> & {
+  /** Edge from which the drawer slides in. Defaults to `"left"`. */
+  position?: 'left' | 'right' | 'top' | 'bottom'
+  style?: StyleProp<DrawerComposition, keyof DrawerStyleDef>
+}

package/src/components/Dropzone/context.tsx

@@ -0,0 +1,52 @@
+import { createContext, useContext } from 'react'
+import React from 'react'
+import { DropzoneComposition } from './styles'
+import { DropzoneContextValue, DropzonePropsAugmentation, DropzoneProviderProps } from './types'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { useDropzone } from './useDropzone'
+
+function useDropzoneProvider(props: DropzoneProviderProps): DropzoneContextValue {
+  const { handle: externalHandle, style, children: _children, extensionProps = {} as DropzonePropsAugmentation, ...dropzoneOptions } = props
+
+  // Always call the hook — satisfies Rules of Hooks.
+  // When an external handle is provided its result is discarded.
+  const internalHandle = useDropzone(dropzoneOptions)
+  const handle = externalHandle ?? internalHandle
+
+  const styles = useStylesFor('Dropzone', style)
+
+  return {
+    handle,
+    styles: styles as Record<DropzoneComposition, any>,
+    extensionProps,
+  }
+}
+
+export type { DropzoneContextValue }
+
+export const DropzoneContext = createContext<DropzoneContextValue | null>(null)
+
+/**
+ * Reads the nearest `Dropzone.Provider` context value.
+ * Throws if called outside a `Dropzone.Provider` tree.
+ */
+export const useDropzoneContext = (): DropzoneContextValue => {
+  const ctx = useContext(DropzoneContext)
+  if (!ctx) throw new Error('useDropzoneContext must be used inside Dropzone.Provider')
+  return ctx
+}
+
+/**
+ * Wires a `DropzoneHandle` and resolved styles into React context for all
+ * Dropzone sub-components. Accepts either a pre-built `handle` prop (external
+ * control) or raw `UseDropzoneOptions` to have the Provider create a handle
+ * internally.
+ */
+export const DropzoneProvider = (props: DropzoneProviderProps) => {
+  const value = useDropzoneProvider(props)
+  return (
+    <DropzoneContext.Provider value={value}>
+      {props.children}
+    </DropzoneContext.Provider>
+  )
+}

package/src/components/Dropzone/elements.tsx

@@ -0,0 +1,79 @@
+import React, { HTMLProps } from 'react'
+import { createPortal } from 'react-dom'
+import { PropsOf } from '@codeleap/types'
+import { View, ViewProps } from '../View'
+import { useDropzoneContext } from './context'
+import {
+  DropzoneFullscreenOverlayProps,
+  DropzoneOverlayProps,
+  DropzoneWrapperProps,
+} from './types'
+
+/**
+ * Droppable zone element. Applies `getRootProps` and `getInputProps` from the
+ * nearest `Dropzone.Provider` handle to a root `View` and a hidden `<input>`.
+ *
+ * Must be rendered inside `Dropzone.Provider`.
+ */
+export const DropzoneWrapper = ({ children }: DropzoneWrapperProps) => {
+  const { handle, styles } = useDropzoneContext()
+  return (
+    <View {...(handle.dropzone.getRootProps() as PropsOf<ViewProps>)} style={styles.dropzone}>
+      {children}
+      <input {...(handle.dropzone.getInputProps() as HTMLProps<HTMLInputElement>)} />
+    </View>
+  )
+}
+
+/**
+ * Overlay rendered on top of `Dropzone.Wrapper` while a file is being dragged
+ * over this specific zone (`isDragActive`). Place it as a child of
+ * `Dropzone.Wrapper` so it inherits the wrapper's positioning context.
+ *
+ * For a page-wide overlay that activates when dragging anywhere on the
+ * document, use `Dropzone.FullscreenOverlay` instead.
+ *
+ * Must be rendered inside `Dropzone.Provider`.
+ */
+export const DropzoneOverlay = ({ children }: DropzoneOverlayProps) => {
+  const { handle, styles } = useDropzoneContext()
+
+  if (!handle.dropzone.isDragActive) return null
+
+  return (
+    <View style={styles.overlay}>
+      <View style={styles.overlayInner}>
+        {children}
+      </View>
+    </View>
+  )
+}
+
+/**
+ * Full-page overlay rendered via a React portal into `document.body` while
+ * a file is being dragged anywhere on the document (`isDragGlobal`).
+ *
+ * Unlike `Dropzone.Overlay`, this component is not scoped to the wrapper zone —
+ * it activates the moment a drag enters the browser window. Position it with
+ * `position: fixed; inset: 0` in the `overlay` style key.
+ *
+ * Must be rendered inside `Dropzone.Provider`.
+ */
+export const DropzoneFullscreenOverlay = ({ children }: DropzoneFullscreenOverlayProps) => {
+  const { handle, styles } = useDropzoneContext()
+
+  if (!handle.dropzone.isDragGlobal) return null
+  if (typeof document === 'undefined') return null
+
+  // Spread getRootProps (minus ref) so drops on the fullscreen overlay are captured by this dropzone.
+  const { ref: _ref, ...rootProps } = handle.dropzone.getRootProps()
+
+  return createPortal(
+    <View {...(rootProps as PropsOf<ViewProps>)} style={styles.fullscreenOverlay}>
+      <View style={styles.fullscreenOverlayInner}>
+        {children}
+      </View>
+    </View>,
+    document.body,
+  )
+}