@neko-os/ui 0.0.8 → 0.0.10

package/src/components/inputs/datePicker/DayPicker.js

@@ -14,20 +14,19 @@ import { useCalendarDays } from '../../calendar/_helpers/calendarDays'
 export function DayPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
   if (!!value) value = dayjs(value)
   const [localValue, setLocalValue] = React.useState(value)
+  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value || undefined).startOf('month'))
+  value = value === undefined ? localValue : value
 
   React.useEffect(() => {
     setLocalValue(value)
-  }, [value])
-
-  value = value === undefined ? localValue : value
+    if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
+  }, [value?.day?.(), value?.month?.(), value?.year?.()])
 
   const handleChange = (v) => {
     setLocalValue(v)
     onChange?.(v)
   }
 
-  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value).startOf('month'))
-
   const { cells } = useCalendarDays(currentMonth)
 
   return (

package/src/components/inputs/datePicker/MonthPicker.js

@@ -14,10 +14,12 @@ const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
 
 export function MonthPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
+  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value || undefined).startOf('year'))
   value = value === undefined ? localValue : value
 
   React.useEffect(() => {
     setLocalValue(value)
+    if (value?.isValid?.()) setCurrentYear(value.startOf('year'))
   }, [value?.month?.(), value?.year?.()])
 
   const handleChange = (v) => {
@@ -26,8 +28,6 @@ export function MonthPicker({ value, onChange, min, max, onCheckDisabled, ...pro
     onChange?.(newValue)
   }
 
-  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value).startOf('year'))
-
   return (
     <View className="neko-day-picker" width={275} {...props}>
       <CalendarNav value={currentYear} onChange={setCurrentYear} level="year" />

package/src/components/inputs/datePicker/QuarterPicker.js

@@ -17,10 +17,12 @@ const quarters = [1, 2, 3, 4]
 
 export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
+  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value || undefined).startOf('year'))
   value = value === undefined ? localValue : value
 
   React.useEffect(() => {
     setLocalValue(value)
+    if (value?.isValid?.()) setCurrentYear(value.startOf('year'))
   }, [value?.quarter?.(), value?.year?.()])
 
   const handleChange = (v) => {
@@ -29,8 +31,6 @@ export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, ...p
     onChange?.(newValue)
   }
 
-  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value).startOf('year'))
-
   return (
     <View className="neko-day-picker" width={275} {...props}>
       <CalendarNav value={currentYear} onChange={setCurrentYear} level="year" />

package/src/components/inputs/datePicker/WeekPicker.js

@@ -14,10 +14,12 @@ import { useCalendarDays } from '../../calendar/_helpers/calendarDays'
 
 export function WeekPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
+  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value || undefined).startOf('month'))
   value = value === undefined ? localValue : value
 
   React.useEffect(() => {
     setLocalValue(value)
+    if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
   }, [value?.day?.(), value?.month?.(), value?.year?.()])
 
   const handleChange = (v) => {
@@ -26,8 +28,6 @@ export function WeekPicker({ value, onChange, min, max, onCheckDisabled, ...prop
     onChange?.(newValue)
   }
 
-  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value).startOf('month'))
-
   const { cells } = useCalendarDays(currentMonth)
   const weeks = splitEvery(7, cells)
 

package/src/components/inputs/datePicker/YearPicker.js

@@ -11,12 +11,21 @@ import { Text } from '../../text/Text'
 import { View } from '../../structure/View'
 import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
 
+function getDecade(value) {
+  const year = dayjs(value || undefined).year()
+  const decadeStartYear = Math.floor(year / 10) * 10
+  return dayjs().year(decadeStartYear).startOf('year')
+}
+
 export function YearPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
+  const [currentDecade, setCurrentDecade] = React.useState(() => getDecade(value))
+
   value = value === undefined ? localValue : value
 
   React.useEffect(() => {
     setLocalValue(value)
+    if (value?.isValid?.()) setCurrentDecade(getDecade(value))
   }, [value?.year?.()])
 
   const handleChange = (v) => {
@@ -25,12 +34,6 @@ export function YearPicker({ value, onChange, min, max, onCheckDisabled, ...prop
     onChange?.(newValue)
   }
 
-  const [currentDecade, setCurrentDecade] = React.useState(() => {
-    const year = dayjs(value).year()
-    const decadeStartYear = Math.floor(year / 10) * 10
-    return dayjs().year(decadeStartYear).startOf('year')
-  })
-
   const years = range(currentDecade.year(), currentDecade.year() + 10)
 
   return (

package/src/components/inputs/index.js

@@ -3,8 +3,12 @@ export * from './Radio'
 export * from './Switch'
 export * from './InputWrapper'
 export * from './TextInput'
+export * from './NumberInput'
 export * from './LinkInput'
 export * from './MaskInput'
 export * from './DateInput'
 export * from './datePicker/DatePicker'
 export * from './Picker'
+export * from './Select'
+export * from './RateInput'
+export * from './SegmentedPicker'

package/src/components/layout/Layout.js

@@ -32,7 +32,7 @@ export function Layout({ children, ...rootProps }) {
 
   return (
     <LayoutContext.Provider value={value}>
-      <View className="neko-layout" bg="bg" flex relative {...rootProps} ref={layoutRef}>
+      <View className="neko-layout" bg="mainBG" flex relative {...rootProps} ref={layoutRef}>
         {children}
       </View>
     </LayoutContext.Provider>

package/src/components/list/FlatList.js

@@ -0,0 +1,91 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsFlatList } from '../../abstractions/FlatList'
+import { AbsStaticList } from '../../abstractions/StaticList'
+import { ConditionalLazyRender, Divider } from '../helpers'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { useOverflowModifier } from '../../modifiers/overflow'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useResponsiveValue } from '../../responsive'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([_, { horizontal }]) => {
+  const overflowKey = horizontal ? 'scrollX' : 'scrollY'
+
+  return {
+    [overflowKey]: true,
+    row: !!horizontal,
+  }
+}
+
+export function FlatList({ children, ...rootProps }) {
+  const [_, formattedProps] = pipe(
+    useThemeComponentModifier('FlatList'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  let {
+    divider,
+    dividerColor,
+    dividerProps,
+    renderSeparator,
+    renderItem,
+    lazy,
+    onlyOnScreen,
+    itemMinHeight,
+    ...props
+  } = formattedProps
+  const noScroll = useResponsiveValue(rootProps.noScroll)
+  const Wrapper = noScroll ? AbsStaticList : AbsFlatList
+
+  const formattedRenderItem = React.useCallback(
+    (...params) => (
+      <ConditionalLazyRender
+        whenVisible={lazy || onlyOnScreen}
+        destroyOffScreen={onlyOnScreen}
+        minHeight={itemMinHeight}
+      >
+        {renderItem?.(...params)}
+      </ConditionalLazyRender>
+    ),
+    [renderItem]
+  )
+
+  if (!renderSeparator && !!divider) {
+    if (divider === true) divider = 1
+    renderSeparator = () => <Divider line={divider} height={divider} color={dividerColor} {...dividerProps} />
+  }
+
+  return (
+    <Wrapper className="neko-flat-list" renderSeparator={renderSeparator} renderItem={formattedRenderItem} {...props}>
+      {children}
+    </Wrapper>
+  )
+}
+
+export const List = (props) => <FlatList noScroll {...props} />

package/src/components/list/index.js

@@ -1 +1,2 @@
 export * from './ScrollView'
+export * from './FlatList'

package/src/components/presentation/Rate.js

@@ -0,0 +1,58 @@
+import { pipe, range, is } from 'ramda'
+
+import { Icon } from '../presentation'
+import { View } from '../structure/View'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  color: 'primary',
+  inactiveColor: 'text4_op50',
+  max: 5,
+  icon: 'star-fill',
+}
+
+export function Rate({ value, ...rootProps }) {
+  let [{ size, sizeCode, color }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('Rate'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { icon, max, inactiveColor, tag, ...props } = formattedProps
+
+  return (
+    <View className="neko-rate" row gap="xxs" centerV minHeight={sizeCode} {...props}>
+      {range(1, max + 1).map((i) => {
+        const active = value >= i
+        const partial = getDecimalOrEdge(value, i)
+
+        let finalIcon = icon
+        if (is(Function, icon)) finalIcon = icon?.({ value, optionValue: i, active })
+
+        let finalColor = color
+        if (is(Function, color)) finalColor = color?.({ value, optionValue: i, active })
+
+        return (
+          <View center key={i} relative>
+            <Icon name={finalIcon} size={sizeCode} color={inactiveColor} />
+            {!!partial && (
+              <View absolute overflow="hidden" left={0} width={100 * partial + '%'}>
+                <Icon name={finalIcon} size={sizeCode} color={finalColor} />
+              </View>
+            )}
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+function getDecimalOrEdge(value, i) {
+  if (value >= i) return 1
+  if (value < i - 1) return 0
+  return value - Math.floor(value)
+}

package/src/components/presentation/RateTag.js

@@ -0,0 +1,35 @@
+import { pipe } from 'ramda'
+
+import { Tag } from './Tag'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  icon: 'star-fill', //
+  // outline: false,
+}
+
+export function RateTag({ value, ...rootProps }) {
+  let [{ size, sizeCode, color }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('RateTag'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { icon, ...props } = formattedProps
+
+  return (
+    <Tag
+      icon={icon}
+      label={value}
+      color={color}
+      textProps={{ size: moveScale(sizeCode, -1) }}
+      gap={moveScale(sizeCode, -3)}
+      {...props}
+    />
+  )
+}

package/src/components/presentation/Result.js

@@ -46,11 +46,11 @@ export function Result({
     <View className="neko-result" center padding="lg" {...props}>
       {!!icon && <Icon name={icon} color={iconColor} size={42} primary {...iconProps} />}
       {!!icon && <Divider height={10} />}
-      <Text h3 {...textProps} {...titleProps}>
+      <Text h4 {...textProps} {...titleProps}>
         {title}
       </Text>
       {!!description && (
-        <Text text3 sm {...textProps} {...descriptionProps}>
+        <Text text3 sm marginT="sm" {...textProps} {...descriptionProps}>
           {description}
         </Text>
       )}

package/src/components/presentation/Tooltip.js

@@ -21,6 +21,7 @@ export function Tooltip(rootProps) {
   return (
     <Popover
       className="neko-tooltip"
+      padding="xs"
       {...props}
       content={
         <IconLabel

package/src/components/presentation/index.js

@@ -10,3 +10,5 @@ export * from './AvatarLabel'
 export * from './Image'
 export * from './ImageBackground'
 export * from './LabelValue'
+export * from './Rate'
+export * from './RateTag'

package/src/components/state/LoadingView.js

@@ -18,7 +18,16 @@ export function LoadingView({ active, children, size, color, replaceChildren, no
   return (
     <View className="neko-loading-view" relative {...props}>
       {children}
-      <View className="neko-laoding-view-overlay" bg="bg_op90" absolute top={0} left={0} right={0} bottom={0} center>
+      <View
+        className="neko-laoding-view-overlay"
+        bg="mainBG_op90"
+        absolute
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        center
+      >
         {loader}
       </View>
     </View>

package/src/components/structure/Accordion.js

@@ -43,7 +43,7 @@ export function Accordion({ children, title, open, onChange, ...rootProps }) {
         row
         gap={moveScale(sizeCode, -2)}
         borderB={open ? props.border || true : open}
-        borderColor={props.borderColor || 'bg'}
+        borderColor={props.borderColor || 'divider_op40'}
         centerV
         {...headerProps}
         onPress={toggle}

package/src/components/structure/Row.js

@@ -2,12 +2,16 @@ import { pipe } from 'ramda'
 import React from 'react'
 
 import { AbsView } from '../../abstractions/View'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
 import { useFlexModifier } from '../../modifiers/flex'
 import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
 import { useGridModifier } from '../../modifiers/grid'
 import { useMarginModifier } from '../../modifiers/margin'
+import { usePaddingModifier } from '../../modifiers/padding'
 import { usePositionModifier } from '../../modifiers/position'
 import { useResponsiveConverter } from '../../modifiers/responsiveConverter'
+import { useShadowModifier } from '../../modifiers/shadow'
 import { useSizeModifier } from '../../modifiers/size'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
@@ -20,7 +24,11 @@ export function Row({ children, ...rootProps }) {
     usePositionModifier,
     useFlexWrapperModifier,
     useFlexModifier,
-    useMarginModifier
+    useMarginModifier,
+    usePaddingModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
   )([{}, rootProps])
 
   // Memoiza os children clonados para evitar recriação se childPaddingProps não mudar

package/src/components/structure/Segment.js

@@ -0,0 +1,51 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { View } from './View'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ sizeCode }]) => ({
+  row: true,
+  justify: 'stretch',
+  br: sizeCode,
+  // overflow: 'hidden',
+})
+
+export function Segment({ children, ...rootProps }) {
+  const [{ sizeCode }, formattedProps] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Segment'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { br, ...props } = formattedProps
+  const size = children?.length
+
+  return (
+    <View className="neko-segment" {...props}>
+      {React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) return child
+        const isFirst = index === 0
+        const isLast = size - 1 === index
+
+        const childProps = child.props || {}
+        const newProps = {
+          brL: br,
+          brR: br,
+          size: sizeCode,
+        }
+
+        if (!isLast) {
+          newProps.brR = 0
+        }
+        if (!isFirst) {
+          newProps.brL = 0
+        }
+
+        return React.cloneElement(child, newProps)
+      })}
+    </View>
+  )
+}

package/src/components/structure/View.js

@@ -4,6 +4,7 @@ import { AbsView } from '../../abstractions/View'
 import { useAnimationModifier } from '../../modifiers/animation'
 import { useBackgroundModifier } from '../../modifiers/background'
 import { useBorderModifier } from '../../modifiers/border'
+import { useCursorModifier } from '../../modifiers/cursor'
 import { useDisplayModifier } from '../../modifiers/display'
 import { useFlexModifier } from '../../modifiers/flex'
 import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
@@ -21,6 +22,7 @@ export function View({ children, ...rootProps }) {
     useThemeComponentModifier('View'),
     useFlexWrapperModifier,
     useDisplayModifier,
+    useCursorModifier,
     useAnimationModifier,
     useStateModifier,
     useSizeModifier,

package/src/components/structure/bottomDrawer/native/BottomDrawer.js

@@ -53,7 +53,10 @@ function InnerContent({
   const snapIndex = useSharedValue(0)
   const velocityY = useSharedValue(0)
 
-  const normalizedSnapPoints = React.useMemo(() => normalizeSnapPoints(snapPoints, SCREEN_HEIGHT), [snapPoints])
+  const normalizedSnapPoints = React.useMemo(
+    () => normalizeSnapPoints(snapPoints, SCREEN_HEIGHT, bottomInset),
+    [snapPoints, useSafeArea]
+  )
   const maxSnapPoint = React.useMemo(() => Math.max(...normalizedSnapPoints), [normalizedSnapPoints])
   const minSnapPoint = React.useMemo(() => Math.min(...normalizedSnapPoints), [normalizedSnapPoints])
 
@@ -189,8 +192,21 @@ function InnerContent({
 
       <DrawerProvider value={contextValue}>
         <GestureDetector gesture={panGesture}>
-          <Animated.View style={[styles.container, { height: SCREEN_HEIGHT }, animatedSheetStyle]}>
-            <View flex bg="overlayBG" shadow paddingB={useSafeArea && bottomInset} borderRadiusT="xxxl" {...props}>
+          <Animated.View
+            style={[styles.container, { height: SCREEN_HEIGHT }, animatedSheetStyle]}
+            pointerEvents="box-none"
+          >
+            <View
+              flex
+              bg="overlayBG"
+              shadow
+              paddingB={useSafeArea && bottomInset}
+              borderRadiusT="xxxl"
+              marginL="auto"
+              marginR="auto"
+              fullW
+              {...props}
+            >
               <DrawerHandle hide={hideHandle} />
               <View flex {...contentProps}>
                 {children}

package/src/components/structure/bottomDrawer/native/utils.js

@@ -1,27 +1,32 @@
-export function normalizeSnapPoints(snapPoints, screenHeight) {
+import { is } from 'ramda'
+
+export function normalizeSnapPoints(snapPoints, screenHeight, bottomInset) {
   return snapPoints.map((point) => {
     if (typeof point === 'string' && point.endsWith('%')) {
-      const percentage = parseFloat(point) / 100;
-      return screenHeight * percentage;
+      const percentage = parseFloat(point) / 100
+      return screenHeight * percentage
+    }
+    if (is(Number, point)) {
+      point = point + bottomInset
     }
-    return point;
-  });
+    return point
+  })
 }
 
 export function findClosestSnapPoint(currentPosition, snapPoints, velocity = 0) {
-  'worklet';
+  'worklet'
   // Reduced velocity impact for more stable snapping
-  const velocityImpact = velocity * 0.03;
-  const adjustedPosition = currentPosition + velocityImpact;
+  const velocityImpact = velocity * 0.03
+  const adjustedPosition = currentPosition + velocityImpact
 
-  let closestIndex = 0;
-  let minDistance = Math.abs(snapPoints[0] - adjustedPosition);
+  let closestIndex = 0
+  let minDistance = Math.abs(snapPoints[0] - adjustedPosition)
 
   for (let i = 1; i < snapPoints.length; i++) {
-    const distance = Math.abs(snapPoints[i] - adjustedPosition);
+    const distance = Math.abs(snapPoints[i] - adjustedPosition)
     if (distance < minDistance) {
-      minDistance = distance;
-      closestIndex = i;
+      minDistance = distance
+      closestIndex = i
     }
   }
 
@@ -30,29 +35,31 @@ export function findClosestSnapPoint(currentPosition, snapPoints, velocity = 0)
 
   // Bias towards opening more when swiping up very fast
   if (velocity < -1500 && closestIndex < snapPoints.length - 1) {
-    closestIndex++;
+    closestIndex++
   }
   // Bias towards closing when swiping down very fast
   else if (velocity > 1500 && closestIndex > 0) {
-    closestIndex--;
+    closestIndex--
   }
 
   // Add hysteresis: prefer staying at current position unless moved significantly
   // This prevents accidental snap point changes
   if (snapPoints.length > 1) {
-    const currentSnapDistance = minDistance;
+    const currentSnapDistance = minDistance
     // Require at least 20% of the distance between snap points to change
-    const snapPointSpacing = Math.abs(snapPoints[Math.min(closestIndex + 1, snapPoints.length - 1)] - snapPoints[closestIndex]);
+    const snapPointSpacing = Math.abs(
+      snapPoints[Math.min(closestIndex + 1, snapPoints.length - 1)] - snapPoints[closestIndex]
+    )
     if (currentSnapDistance < snapPointSpacing * 0.2) {
       // Stay at current snap point unless moved significantly
-      return closestIndex;
+      return closestIndex
     }
   }
 
-  return closestIndex;
+  return closestIndex
 }
 
 export function clamp(value, min, max) {
-  'worklet';
-  return Math.min(Math.max(value, min), max);
-}
+  'worklet'
+  return Math.min(Math.max(value, min), max)
+}

package/src/components/structure/bottomDrawer/web/BottomDrawer.js

@@ -1,3 +1,5 @@
 import { Drawer } from '../../drawer'
 
-export const BottomDrawer = (props) => <Drawer height={400} {...props} />
+export const BottomDrawer = ({ snapPoints, contentProps, ...props }) => {
+  return <Drawer height={snapPoints?.[0] || 400} contentProps={{ padding: 0, ...contentProps }} {...props} />
+}

package/src/components/structure/index.js

@@ -11,3 +11,4 @@ export * from './modal'
 export * from './drawer'
 export * from './bottomDrawer'
 export * from './popover/Popover'
+export * from './Segment'

package/src/components/structure/overlay/OverlayHandler.js

@@ -29,6 +29,11 @@ export const useRegisterOverlay = (opts = {}) => {
     mergeOverlay({ open: true, content, triggerRect, placement, ...options })
   }
 
+  const onUpdate = ({ content, options = {} }) => {
+    if (!overlay.open) return
+    mergeOverlay({ content, ...options })
+  }
+
   const onClose = () => {
     stopDelayedClosing()
     timeout.current = setTimeout(() => {
@@ -41,7 +46,7 @@ export const useRegisterOverlay = (opts = {}) => {
     !!unmountOnClose ? removeOverlay() : closeOverlay()
   }
 
-  return { onOpen, onClose, onFastClose, stopDelayedClosing }
+  return { onOpen, onClose, onUpdate, onFastClose, stopDelayedClosing }
 }
 
 export function OverlayHandler({ children }) {