@codeleap/web 6.2.3 → 6.8.0

package/src/components/List/elements.tsx

@@ -0,0 +1,173 @@
+import React, { useCallback, useImperativeHandle, useMemo } from 'react'
+import {
+  useMasonry,
+  usePositioner,
+  useResizeObserver,
+  useInfiniteLoader,
+  useScrollToIndex,
+  RenderComponentProps,
+} from 'masonic'
+import { TypeGuards } from '@codeleap/types'
+import { View, ViewProps } from '../View'
+import { useListContext } from './context'
+import { AugmentedRenderItemInfo, ListHandle, ListItem, ListItemsProps } from './types'
+
+/**
+ * Outer `View` that measures its own dimensions for the Masonic positioner via a `ResizeObserver`.
+ * Must be rendered inside `List.Provider`; forwards extra `ViewProps` to the underlying `View`.
+ */
+export const ListWrapper = ({ children, ...viewProps }: ViewProps) => {
+  const { wrapperRef, styles, padding } = useListContext()
+  return (
+    <View {...viewProps} css={[styles.wrapper, padding, (viewProps as any).css]} ref={wrapperRef as React.RefObject<HTMLDivElement>}>
+      {children}
+    </View>
+  )
+}
+
+function _ListItemsContent<T extends ListItem>({
+  data,
+  renderItem: providedRenderItem,
+  fetchNextPage: itemsFetchNextPage,
+  hasNextPage: itemsHasNextPage,
+  ref,
+}: ListItemsProps<T>) {
+  const { wrapperRef, wrapperLayout, scrollHook, styles, props, padding } = useListContext()
+
+  const fetchNextPage = itemsFetchNextPage ?? props.fetchNextPage
+  const hasNextPage = itemsHasNextPage ?? props.hasNextPage
+
+  const { scrollTop, isScrolling, height, width, scrollElement } = scrollHook(wrapperRef, wrapperLayout)
+  const innerWidth = width - padding.paddingLeft - padding.paddingRight
+
+  const stylePositioner = (styles as any).positioner ?? {}
+
+  const positionerConfig = {
+    columnCount: props.columnCount ?? stylePositioner.columnCount ?? 1,
+    columnGutter: props.columnGutter ?? stylePositioner.columnGutter,
+    columnWidth: props.columnWidth ?? stylePositioner.columnWidth,
+    maxColumnCount: props.maxColumnCount ?? stylePositioner.maxColumnCount,
+    maxColumnWidth: props.maxColumnWidth ?? stylePositioner.maxColumnWidth,
+    rowGutter: props.rowGutter ?? stylePositioner.rowGutter,
+  }
+
+  const positioner = usePositioner(
+    { width: Math.max(0, innerWidth), ...positionerConfig },
+    [data]
+  )
+
+  const resizeObserver = useResizeObserver(positioner)
+
+  const scrollToIndexFn = useScrollToIndex(positioner, {
+    element: scrollElement as any,
+    height,
+  })
+
+  useImperativeHandle(ref, () => ({
+    scrollToIndex: (index, options) => {
+      scrollToIndexFn(index)
+    },
+  }), [scrollToIndexFn])
+
+  const maybeLoadMore = useInfiniteLoader(
+    async () => {
+      if (hasNextPage) fetchNextPage?.()
+    },
+    {
+      isItemLoaded: (index, items) => !!items?.[index],
+      ...props.infiniteLoaderProps,
+    }
+  )
+
+  const separator = useMemo(() => {
+    if (!props.separators) return null
+    return props.ItemSeparatorComponent ?? null
+  }, [props.separators, props.ItemSeparatorComponent])
+
+  const dataLength = data?.length ?? 0
+
+  const wrappedRenderItem = useCallback((masonryProps: RenderComponentProps<T>) => {
+    if (!providedRenderItem) return null
+    const { index, data: item } = masonryProps
+    const isFirst = index === 0
+    const isLast = index === dataLength - 1
+    const isOnly = dataLength === 1
+
+    return <>
+      {isFirst ? null : separator}
+      {providedRenderItem({
+        ...masonryProps,
+        item,
+        isFirst,
+        isLast,
+        isOnly,
+      } as AugmentedRenderItemInfo<T>)}
+    </>
+  }, [providedRenderItem, separator, dataLength])
+
+  return useMasonry({
+    positioner,
+    resizeObserver,
+    height: Math.max(1, height),
+    scrollTop,
+    isScrolling,
+    items: data ?? [],
+  
+    render: wrappedRenderItem,
+    onRender: maybeLoadMore,
+  })
+}
+
+/**
+ * Renders the virtualized Masonic grid once the `List.Wrapper` layout is ready; returns `null` until then.
+ * Handles infinite loading via Masonic's `useInfiniteLoader`, item separators, and exposes a `scrollToIndex` imperative handle via `ref`.
+ * Must be rendered inside `List.Provider`.
+ */
+export function ListItems<T extends ListItem>(props: ListItemsProps<T>) {
+  const { ready } = useListContext()
+  if (!ready) return null
+  return <_ListItemsContent {...props} />
+}
+
+/**
+ * Styled slot rendered above `List.Items`; applies the `header` composition style from the list's style sheet.
+ * Must be rendered inside `List.Provider`.
+ */
+export const ListHeader = ({ children, ...viewProps }: ViewProps) => {
+  const { styles } = useListContext()
+  return (
+    <View {...viewProps} css={[styles.header, (viewProps as any).css]}>
+      {children}
+    </View>
+  )
+}
+
+/**
+ * Styled slot rendered below `List.Items`; falls back to `ListProviderProps.ListFooterComponent` when no `children` are given.
+ * Renders nothing when both sources are empty. Must be rendered inside `List.Provider`.
+ */
+export const ListFooter = ({ children, ...viewProps }: ViewProps) => {
+  const { styles, props } = useListContext()
+  const footer = children ?? (
+    TypeGuards.isFunction(props.ListFooterComponent)
+      ? props.ListFooterComponent()
+      : props.ListFooterComponent
+  )
+  if (!footer) return null
+  return (
+    <View {...viewProps} css={[styles.footer, (viewProps as any).css]}>
+      {footer}
+    </View>
+  )
+}
+
+/**
+ * Renders `ListProviderProps.placeholder` when it is a valid React element; otherwise renders nothing.
+ * Typically used to show an `EmptyPlaceholder` when the list has no data. Must be rendered inside `List.Provider`.
+ */
+export const ListPlaceholder = () => {
+  const { props } = useListContext()
+  const { placeholder } = props
+  if (React.isValidElement(placeholder)) return <>{placeholder}</>
+  return null
+}

package/src/components/List/index.tsx

@@ -1,91 +1,54 @@
-import React, { useCallback, useMemo } from 'react'
-import { View } from '../View'
-import { EmptyPlaceholder } from '../EmptyPlaceholder'
-import { ListItem, ListProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { RenderComponentProps, useInfiniteLoader } from 'masonic'
-import { TypeGuards } from '@codeleap/types'
-import dynamic from 'next/dynamic'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { ListProvider } from './context'
+import { ListWrapper, ListItems, ListHeader, ListFooter, ListPlaceholder } from './elements'
+import { ListItem, ListProps } from './types'
 
 export * from './styles'
 export * from './types'
-
-const Masonry = dynamic(
-  () => import('masonic').then(mod => mod.Masonry),
-  { ssr: false }
-)
-
+export * from './context'
+export * from './elements'
+export * from './scroll'
+
+/**
+ * Virtualized, optionally multi-column list with built-in infinite scroll, item separators, and a programmable scroll handle.
+ * Rendering is powered by Masonic; the list measures its container via `ResizeObserver` and will not render items until layout is ready.
+ * Uses: `List.Provider`, `List.Wrapper`, `List.Items`, `List.Footer`, `List.Placeholder`
+ */
 export function List<T extends ListItem>(props: ListProps<T>) {
   const {
-    renderItem: providedRenderItem,
-    ItemSeparatorComponent,
     data,
+    renderItem,
     fetchNextPage,
-    style,
     hasNextPage,
-    infiniteLoaderProps,
-    separators,
-    ListFooterComponent,
-    placeholder,
-    ...masonryProps
-  } = {
-    ...List.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(List.styleRegistryName, style)
-
-  const maybeLoadMore = useInfiniteLoader(
-    async (args) => {
-      if (hasNextPage) fetchNextPage?.()
-    },
-    {
-      isItemLoaded: (index, items) => !!items?.[index],
-      ...infiniteLoaderProps,
-    },
-  )
-
-  const separator = useMemo(() => {
-    if (!separators) return null
-    return ItemSeparatorComponent
-  }, [])
-
-  const renderItem = useCallback((itemMasonry: RenderComponentProps<T>) => {
-    if (!providedRenderItem) return null
-
-    const isFirst = itemMasonry?.index === 0
-
-    return <>
-      {isFirst ? null : separator}
-      {providedRenderItem({ ...itemMasonry, item: itemMasonry?.data })}
-    </>
-  }, [providedRenderItem])
-
-  const isEmpty = useMemo(() => data?.length <= 0 || !data?.length, [data?.length])
+    ...providerProps
+  } = { ...List.defaultProps, ...props } as ListProps<T>
 
   return (
-    <View style={styles.wrapper}>
-      {isEmpty ? <EmptyPlaceholder {...placeholder} /> : null}
-
-      <Masonry
-        columnCount={1}
-        overscanBy={7}
-        {...masonryProps}
-        items={data}
-        css={styles.list as any}
-        render={renderItem}
-        onRender={maybeLoadMore}
-      />
-
-      {TypeGuards.isFunction(ListFooterComponent) ? <ListFooterComponent /> : ListFooterComponent}
-    </View>
+    <ListProvider {...providerProps}>
+      <ListWrapper>
+        <ListPlaceholder />
+        <ListItems
+          data={data}
+          renderItem={renderItem}
+          fetchNextPage={fetchNextPage}
+          hasNextPage={hasNextPage}
+        />
+        <ListFooter />
+      </ListWrapper>
+    </ListProvider>
   )
 }
 
+List.Provider = ListProvider
+List.Wrapper = ListWrapper
+List.Items = ListItems
+List.Header = ListHeader
+List.Footer = ListFooter
+List.Placeholder = ListPlaceholder
+
 List.styleRegistryName = 'List'
-List.elements = ['wrapper', 'separator']
+List.elements = ['wrapper', 'list', 'header', 'footer', 'separator', 'placeholder', 'positioner']
 List.rootElement = 'wrapper'
 
 List.withVariantTypes = <S extends AnyRecord>(styles: S) => {
@@ -94,6 +57,6 @@ List.withVariantTypes = <S extends AnyRecord>(styles: S) => {
 
 List.defaultProps = {
   separators: true,
-} as Partial<ListProps>
+} as Partial<ListProps<ListItem>>
 
 WebStyleRegistry.registerComponent(List)

package/src/components/List/scroll.ts

@@ -0,0 +1,83 @@
+import { useState } from 'react'
+import React from 'react'
+import {
+  useContainerPosition,
+  useScroller as useMasonicScroller,
+} from 'masonic'
+import { useIsomorphicEffect } from '../../lib/hooks/useIsomorphicEffect'
+import { useWindowSize } from '../../lib/hooks/useWindowSize'
+import { UseListScrollHook, ListWrapperLayout } from './types'
+
+function useElementScroller(ref: React.RefObject<HTMLElement>): { scrollTop: number; isScrolling: boolean } {
+  const [isScrolling, setIsScrolling] = useState(false)
+  const [scrollTop, setScrollTop] = useState(0)
+
+  useIsomorphicEffect(() => {
+    if (typeof window === 'undefined') return
+    const { current } = ref
+    let tick: number | undefined
+
+    if (current) {
+      const handleScroll = () => {
+        if (tick) return
+        tick = window.requestAnimationFrame(() => {
+          setScrollTop(current.scrollTop)
+          tick = void 0
+        })
+      }
+
+      current.addEventListener('scroll', handleScroll)
+      return () => {
+        current.removeEventListener('scroll', handleScroll)
+        if (tick) window.cancelAnimationFrame(tick)
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref.current])
+
+  useIsomorphicEffect(() => {
+    if (typeof window === 'undefined') return
+    setIsScrolling(true)
+    const to = window.setTimeout(() => {
+      setIsScrolling(false)
+    }, 1000 / 6)
+    return () => window.clearTimeout(to)
+  }, [scrollTop])
+
+  return { scrollTop, isScrolling }
+}
+
+/**
+ * `UseListScrollHook` implementation that tracks scroll position on a specific container element.
+ * Use when the list's `List.Wrapper` is itself the scrolling surface (i.e. `overflow: auto/scroll`).
+ * This is the default scroll hook; override via `ListProviderProps.scrollHook` or set `windowScroll` to switch to `useWindowScroll`.
+ */
+export const useElementScroll: UseListScrollHook = (wrapperRef: React.RefObject<HTMLElement>, layout: ListWrapperLayout | null) => {
+  const { scrollTop, isScrolling } = useElementScroller(wrapperRef)
+  return {
+    scrollTop,
+    isScrolling,
+    height: layout?.offsetHeight ?? 0,
+    width: layout?.width ?? 0,
+    scrollElement: wrapperRef,
+  }
+}
+
+/**
+ * `UseListScrollHook` implementation that tracks the browser window scroll position.
+ * Use when the page itself is the scrolling surface (e.g. no overflow container around the list).
+ * Enable via `ListProviderProps.windowScroll` or by passing this directly to `ListProviderProps.scrollHook`.
+ */
+export const useWindowScroll: UseListScrollHook = (wrapperRef: React.RefObject<HTMLElement>, layout: ListWrapperLayout | null) => {
+  const windowSize = useWindowSize()
+  const windowHeight = windowSize[1]
+  const { offset } = useContainerPosition(wrapperRef, windowSize)
+  const { scrollTop, isScrolling } = useMasonicScroller(offset)
+  return {
+    scrollTop,
+    isScrolling,
+    height: windowHeight,
+    width: layout?.width ?? 0,
+    scrollElement: typeof window !== 'undefined' ? window : null,
+  }
+}

package/src/components/List/styles.ts

@@ -1,3 +1,3 @@
-export type ListParts = 'wrapper' | 'list'
+export type ListParts = 'wrapper' | 'list' | 'header' | 'footer' | 'separator' | 'placeholder' | 'positioner'
 
 export type ListComposition = ListParts

package/src/components/List/types.ts

@@ -1,27 +1,91 @@
-import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import React from 'react'
+import { StyleProp } from '@codeleap/styles'
+import { RenderComponentProps, UseInfiniteLoaderOptions, UsePositionerOptions } from 'masonic'
 import { ListComposition } from './styles'
-import { StyledProp } from '@codeleap/styles'
-import { MasonryProps, RenderComponentProps, UseInfiniteLoaderOptions } from 'masonic'
 
-export type AugmentedRenderItemInfo<T> = RenderComponentProps<T> & {
-  item: T
+/** Masonic positioner options that control column layout and gutters for the virtualized list grid. */
+export type ListPositionerConfig = Pick<UsePositionerOptions,
+  'columnCount' | 'columnGutter' | 'columnWidth' | 'maxColumnCount' | 'maxColumnWidth' | 'rowGutter'
+>
+
+export type ListPaddingProps = {
+  padding?: number
+  paddingHorizontal?: number
+  paddingVertical?: number
+  paddingTop?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingRight?: number
 }
 
+export interface ListStyleDef extends Partial<ListPositionerConfig>, ListPaddingProps {}
+
+/** Minimum shape required for every item passed to `List` — the `id` is used as the Masonic item key. */
 export type ListItem = {
   id: string | number
 }
 
-export type ListProps<T extends ListItem = ListItem> =
-  Omit<MasonryProps<T>, 'items' | 'render' | 'onRender'> &
-  {
-    data: T[]
-    style?: StyledProp<ListComposition>
-    placeholder?: Omit<EmptyPlaceholderProps, 'debugName'>
-    ItemSeparatorComponent?: React.ReactElement
-    fetchNextPage?: () => void
-    renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
-    ListFooterComponent?: React.ReactElement | (() => React.ReactElement)
-    infiniteLoaderProps?: UseInfiniteLoaderOptions<unknown>
-    hasNextPage?: boolean
-    separators?: boolean
-  }
+/** Masonic `RenderComponentProps` extended with convenience booleans and a typed `item` shorthand passed to `renderItem`. */
+export type AugmentedRenderItemInfo<T> = RenderComponentProps<T> & {
+  item: T
+  isFirst: boolean
+  isLast: boolean
+  isOnly: boolean
+}
+
+export type ListWrapperLayout = { width: number; offsetHeight: number }
+
+/**
+ * Contract for a scroll-state hook consumed by `ListItems`.
+ * Two built-in implementations are exported: `useElementScroll` (container scroll) and `useWindowScroll` (window scroll).
+ * Pass a custom implementation via `ListProviderProps.scrollHook` to drive an alternative scroll container.
+ */
+export type UseListScrollHook = (
+  wrapperRef: React.RefObject<HTMLElement>,
+  wrapperLayout: ListWrapperLayout | null
+) => {
+  scrollTop: number
+  isScrolling: boolean
+  height: number
+  width: number
+  scrollElement: Window | React.RefObject<HTMLElement> | null
+}
+
+/** Imperative handle exposed via `ref` on `List` / `ListItems` for programmatic scroll-to-index. */
+export type ListHandle = {
+  scrollToIndex: (index: number, options?: { align?: 'top' | 'center' | 'bottom' }) => void
+}
+
+/**
+ * Props accepted by `List.Provider` that configure layout, scrolling, infinite loading, and slot components.
+ * @field scrollHook - Custom scroll-state hook; overrides the `windowScroll` flag when provided.
+ * @field windowScroll - When `true` the list uses `useWindowScroll` instead of container scroll; ignored if `scrollHook` is set.
+ * @field infiniteLoaderProps - Forwarded directly to Masonic's `useInfiniteLoader`.
+ * @field ListFooterComponent - Rendered inside `List.Footer` when no `children` are passed to that element.
+ */
+export type ListProviderProps = Partial<ListPositionerConfig> & ListPaddingProps & {
+  scrollHook?: UseListScrollHook
+  windowScroll?: boolean
+  fetchNextPage?: () => void
+  hasNextPage?: boolean
+  infiniteLoaderProps?: UseInfiniteLoaderOptions<unknown>
+  separators?: boolean
+  ItemSeparatorComponent?: React.ReactElement
+  style?: StyleProp<ListComposition, keyof ListStyleDef>
+  placeholder?: React.ReactElement
+  ListFooterComponent?: React.ReactElement | (() => React.ReactElement)
+  onRefresh?: () => void
+  refreshing?: boolean
+  children?: React.ReactNode
+}
+
+/** Props for `List.Items` — the data + render layer that sits inside a `List.Provider`. */
+export type ListItemsProps<T extends ListItem> = {
+  data: T[]
+  renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
+  fetchNextPage?: () => void
+  hasNextPage?: boolean
+  ref?: React.Ref<ListHandle>
+}
+
+export type ListProps<T extends ListItem> = ListProviderProps & ListItemsProps<T>

package/src/components/LoadingOverlay/index.tsx

@@ -9,6 +9,12 @@ import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 export * from './styles'
 export * from './types'
 
+/**
+ * `View` wrapper that renders an `ActivityIndicator` alongside its children;
+ * use `visible` to toggle the `wrapper:visible` style variant to show or hide
+ * the spinner layer.
+ * Uses: `View`, `ActivityIndicator`, `useStylesFor`, `WebStyleRegistry`
+ */
 export const LoadingOverlay = (props: LoadingOverlayProps) => {
   const {
     visible,

package/src/components/LoadingOverlay/types.ts

@@ -3,14 +3,19 @@ import { LoadingOverlayComposition } from './styles'
 import { ViewProps } from '../View'
 import { ActivityIndicatorProps } from '../ActivityIndicator'
 import { ComponentCommonProps } from '../../types/utility'
-import { StyledProp } from '@codeleap/styles'
+import { StyleProp } from '@codeleap/styles'
 
+export interface LoadingOverlayStyleDef {}
+
+/** Props for the `LoadingOverlay` component. */
 export type LoadingOverlayProps =
   Omit<ViewProps, 'style'> &
   ComponentCommonProps &
   {
+    /** When true applies the `wrapper:visible` style variant. */
     visible?: boolean
-    style?: StyledProp<LoadingOverlayComposition>
+    style?: StyleProp<LoadingOverlayComposition, keyof LoadingOverlayStyleDef>
+    /** Forwarded to the inner `ActivityIndicator`. */
     indicatorProps?: ActivityIndicatorProps
     children?: React.ReactNode
   }

package/src/components/MaskedTextInput/index.tsx

@@ -8,6 +8,11 @@ import { TypeGuards } from '@codeleap/types'
 
 export * from './types'
 
+/**
+ * `TextInput` variant that applies a `react-imask` pattern mask via a set of named presets or a custom `react-imask` configuration.
+ * The `placeholder` defaults to the mask pattern string when none is provided.
+ * Uses: `TextInput`
+ */
 export const MaskedTextInput = (props: MaskedTextInputProps) => {
   const {
     maskType,
@@ -52,7 +57,4 @@ export const MaskedTextInput = (props: MaskedTextInputProps) => {
     />
   )
 }
-
-MaskedTextInput.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return MaskedTextInput as (props: StyledComponentProps<MaskedTextInputProps, typeof styles>) => IJSX
-}
+ 

package/src/components/MaskedTextInput/types.ts

@@ -1,6 +1,12 @@
 import { TextInputProps } from '../TextInput'
 import { ReactMaskOpts } from 'react-imask'
 
+export interface MaskedTextInputStyleDef {}
+
+/**
+ * Built-in mask presets supported by `MaskedTextInput`.
+ * Use `'custom'` together with `maskOptions` to supply any `react-imask` mask configuration.
+ */
 export type MaskedTextInputMaskType =
   | 'credit-card'
   | 'cpf'
@@ -9,6 +15,11 @@ export type MaskedTextInputMaskType =
   | 'cel-phone'
   | 'custom'
 
+/**
+ * Props for `MaskedTextInput`.
+ * `maskType` selects a built-in preset; combine with `maskOptions` for overrides, or use `maskType: 'custom'` with only `maskOptions`.
+ * `unmask` controls whether `onAccept`/`onValueChange` receives the raw (unmasked) value (`true`), the typed value (`'typed'`), or the formatted string (`false`, default).
+ */
 export type MaskedTextInputProps = Omit<TextInputProps, 'multiline'> & {
   maskType?: MaskedTextInputMaskType
   maskOptions?: ReactMaskOpts

package/src/components/Modal/context.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext } from 'react'
+import React from 'react'
+import { ModalComposition } from './styles'
+import { ModalProps } from './types'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+
+function useModalProvider({ children: _children, ...props }: ModalProps) {
+  const styles = useStylesFor('Modal', props.style)
+
+  const close = () => {
+    props.toggle?.()
+    props.onClose?.()
+  }
+
+  return {
+    props,
+    styles: styles as Record<ModalComposition, any>,
+    close,
+  }
+}
+
+export type ModalContextValue = ReturnType<typeof useModalProvider>
+
+export const ModalContext = createContext<ModalContextValue | null>(null)
+
+/**
+ * Reads the nearest `Modal.Provider` context value.
+ * Throws if called outside a `Modal.Provider` tree.
+ */
+export const useModalContext = (): ModalContextValue => {
+  const ctx = useContext(ModalContext)
+  if (!ctx) throw new Error('useModalContext must be used inside Modal.Provider')
+  return ctx
+}
+
+/**
+ * Shares resolved styles and the `close` callback with all sub-components in a custom `Modal` layout.
+ * Required by `Modal.Backdrop`, `Modal.Box`, `Modal.Header`, `Modal.Body`, and `Modal.Footer` when composed manually.
+ * Uses: `useStylesFor`
+ */
+export const ModalProvider = (props: ModalProps) => {
+  const value = useModalProvider(props)
+  return (
+    <ModalContext.Provider value={value}>
+      {props.children}
+    </ModalContext.Provider>
+  )
+}