panelui-native 0.87.0 → 0.88.0

package/src/hooks/use-keyboard-avoidance.ts

@@ -200,6 +200,27 @@ export function useKeyboardAvoidance({
   /** The translation currently applied, in pixels. Zero or negative. */
   const translation = useSharedValue(0);
 
+  /*
+   * Whether the element has been laid out at least once and is still mounted.
+   *
+   * `measure` warns when it is handed a view the layout engine has no metrics
+   * for — every frame between a mount and its first layout, and every frame
+   * after an unmount that the callback has not been stopped for yet. Neither
+   * is a fault, and neither can be answered by the `null` it returns, because
+   * the warning is printed before that null comes back. Running once a frame,
+   * one of these fills the log on its own.
+   *
+   * So the layout pass is what says the view can be measured, and the unmount
+   * is what takes it back.
+   */
+  const laidOut = useSharedValue(false);
+  useEffect(
+    () => () => {
+      laidOut.value = false;
+    },
+    [laidOut]
+  );
+
   // `active` is a plain prop and the worklets below cannot read props, so it is
   // mirrored — written in an effect, because touching a shared value during
   // render is a Reanimated strict-mode violation.
@@ -226,6 +247,7 @@ export function useKeyboardAvoidance({
     'worklet';
     const keyboardHeight = Math.abs(rawHeight.value);
     if (keyboardHeight === 0) return;
+    if (!laidOut.value) return;
 
     const frame = measure(ref);
     if (!frame || frame.height <= 0) return;
@@ -267,12 +289,13 @@ export function useKeyboardAvoidance({
 
   const onLayout = useCallback(
     (_event: LayoutChangeEvent) => {
+      laidOut.value = true;
       // A layout pass while the element is at rest means its slot moved for
       // some reason other than the keyboard. Anything left over from the last
       // lift belongs to the old slot.
       if (!tracking && translation.value !== 0) translation.value = 0;
     },
-    [tracking, translation]
+    [laidOut, tracking, translation]
   );
 
   const animatedStyle = useAnimatedStyle(() => {

package/src/hooks/use-reveal-progress.ts

@@ -25,11 +25,13 @@
  * anything above it resizes; every frame is a measurement pass for a value that
  * only changes when the scroller moves.
  */
+import { useCallback, useEffect } from 'react';
 import { useWindowDimensions, type View } from 'react-native';
 import {
   measure,
   useAnimatedRef,
   useDerivedValue,
+  useSharedValue,
   type AnimatedRef,
   type SharedValue,
 } from 'react-native-reanimated';
@@ -58,6 +60,12 @@ export interface UseRevealProgressOptions {
 export interface UseRevealProgressResult {
   /** Attach to the element whose travel drives the effect. */
   ref: AnimatedRef<View>;
+  /**
+   * Attach to the same element. It is what says the element can be measured —
+   * without it the effect still works, at the cost of a warning per frame for
+   * every element that is mounted but not yet laid out.
+   */
+  onLayout: () => void;
   /** `0` before, `1` after, scrubbed between. */
   progress: SharedValue<number>;
 }
@@ -72,6 +80,26 @@ export function useRevealProgress({
   const scroll = useScrollProgress();
   const { height: windowHeight } = useWindowDimensions();
 
+  /*
+   * Whether the element has been laid out at least once and is still mounted.
+   *
+   * `measure` warns when it is handed a view the layout engine has no metrics
+   * for, and the warning is printed before the `null` that would let a caller
+   * notice. A list of these runs its measurement on every scroll frame, so one
+   * element that has mounted but not laid out fills the log on its own — which
+   * is the case the warning itself names, and the one it is least useful for.
+   */
+  const laidOut = useSharedValue(false);
+  const onLayout = useCallback(() => {
+    laidOut.value = true;
+  }, [laidOut]);
+  useEffect(
+    () => () => {
+      laidOut.value = false;
+    },
+    [laidOut]
+  );
+
   const offset = scroll?.offset;
   const viewportValue = scroll?.viewport;
   const topValue = scroll?.top;
@@ -86,6 +114,7 @@ export function useRevealProgress({
     const viewport = viewportValue?.value || windowHeight;
     const viewportTop = topValue?.value ?? 0;
     if (viewport <= 0 || Number.isNaN(scrolled)) return 0;
+    if (!laidOut.value) return 0;
 
     const frame = measure(ref);
     if (!frame || frame.height <= 0) return 0;
@@ -102,5 +131,5 @@ export function useRevealProgress({
 
   // An external value is passed straight through, so a caller driving the
   // effect by hand never pays for the measurement.
-  return { ref, progress: external ?? derived };
+  return { ref, onLayout, progress: external ?? derived };
 }

package/src/index.ts

@@ -93,6 +93,12 @@ export {
   type AreaChartDatum,
   type AreaChartStatus,
 } from './components/area-chart';
+export {
+  AnimatedBadge,
+  type AnimatedBadgeProps,
+  type AnimatedBadgeSize,
+  type AnimatedBadgeStatus,
+} from './components/animated-badge';
 export { Badge, type BadgeProps } from './components/badge';
 export {
   BarChart,
@@ -180,6 +186,17 @@ export {
   type DialogProps,
   type DialogContentProps,
 } from './components/dialog';
+export {
+  FeedbackDialog,
+  type FeedbackDialogProps,
+  type FeedbackDialogContentProps,
+  type FeedbackDialogPanelProps,
+  type FeedbackDialogCloseProps,
+  type FeedbackDialogFieldProps,
+  type FeedbackDialogFooterProps,
+  type FeedbackDialogActionProps,
+  type FeedbackDialogSubmitProps,
+} from './components/feedback-dialog';
 export {
   Soundwave,
   type SoundwaveProps,
@@ -546,9 +563,11 @@ export { OtpInput, type OtpInputProps } from './components/otp-input';
 export {
   SearchBar,
   type SearchBarProps,
+  type SearchBarActionProps,
   type SearchBarItemProps,
   type SearchBarSectionProps,
   type SearchBarStatusProps,
+  type SearchBarTokenProps,
   type SearchBarPanelMode,
   type SearchBarPanelPlacement,
 } from './components/search-bar';
@@ -636,8 +655,11 @@ export {
   type BubbleChartHandle,
   type BubbleChartHeaderProps,
   type BubbleChartGridProps,
+  type BubbleChartQuadrantsProps,
+  type BubbleChartTrendProps,
   type BubbleChartBubblesProps,
   type BubbleChartLabelsProps,
+  type BubbleChartSizeKeyProps,
   type BubbleChartSkeletonProps,
   type BubbleChartXAxisProps,
   type BubbleChartYAxisProps,
@@ -1018,6 +1040,11 @@ export {
   type ScatterChartPoint,
   type ScatterChartStatus,
 } from './components/scatter-chart';
+export {
+  ScrollBlur,
+  type ScrollBlurProps,
+  type ScrollBlurTint,
+} from './components/scroll-blur';
 export {
   ScrollFade,
   type ScrollFadeProps,