panelui-native 0.86.1 → 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,
@@ -543,7 +560,17 @@ export {
   type NumberInputProps,
 } from './components/number-input';
 export { OtpInput, type OtpInputProps } from './components/otp-input';
-export { SearchBar, type SearchBarProps } from './components/search-bar';
+export {
+  SearchBar,
+  type SearchBarProps,
+  type SearchBarActionProps,
+  type SearchBarItemProps,
+  type SearchBarSectionProps,
+  type SearchBarStatusProps,
+  type SearchBarTokenProps,
+  type SearchBarPanelMode,
+  type SearchBarPanelPlacement,
+} from './components/search-bar';
 export {
   Panelside,
   usePanelside,
@@ -621,6 +648,45 @@ export {
   type LiveLineMomentumColors,
   type LiveLinePoint,
 } from './components/live-line-chart';
+export {
+  BubbleChart,
+  useBubbleChart,
+  type BubbleChartProps,
+  type BubbleChartHandle,
+  type BubbleChartHeaderProps,
+  type BubbleChartGridProps,
+  type BubbleChartQuadrantsProps,
+  type BubbleChartTrendProps,
+  type BubbleChartBubblesProps,
+  type BubbleChartLabelsProps,
+  type BubbleChartSizeKeyProps,
+  type BubbleChartSkeletonProps,
+  type BubbleChartXAxisProps,
+  type BubbleChartYAxisProps,
+  type BubbleChartTooltipProps,
+  type BubbleChartLegendProps,
+  type BubbleChartDatum,
+  type BubbleChartPoint,
+  type BubbleChartStatus,
+} from './components/bubble-chart';
+export {
+  PyramidChart,
+  usePyramidChart,
+  type PyramidChartProps,
+  type PyramidChartHandle,
+  type PyramidChartHeaderProps,
+  type PyramidChartGridProps,
+  type PyramidChartBarProps,
+  type PyramidChartSkeletonProps,
+  type PyramidChartXAxisProps,
+  type PyramidChartYAxisProps,
+  type PyramidChartTooltipProps,
+  type PyramidChartLegendProps,
+  type PyramidChartDatum,
+  type PyramidChartStatus,
+  type PyramidChartSide,
+  type PyramidChartLabelPlacement,
+} from './components/pyramid-chart';
 export {
   PolarAreaChart,
   usePolarAreaChart,
@@ -974,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,

package/src/utils/chart.ts

@@ -209,6 +209,33 @@ function mantissa(value: number): string {
   return trimZeros(value.toFixed(Math.abs(value) < 10 ? 1 : 0));
 }
 
+/**
+ * A value's radius on a bubble scale, in points.
+ *
+ * The value maps to *area* and the radius is taken from it, so a bubble holding
+ * twice the value carries twice the ink. Mapping it to the radius instead
+ * quadruples the ink for a doubled value, and the reader believes the larger
+ * number by four times.
+ *
+ * `extent` is the smallest and largest value in the whole set, so one bubble's
+ * size means the same thing as another's. A degenerate extent — one row, or
+ * every value identical — puts everything at the top of the range rather than
+ * dividing by zero.
+ */
+export function bubbleRadius(
+  value: number,
+  extent: readonly [number, number],
+  range: readonly [number, number]
+): number {
+  'worklet';
+  const [min, max] = extent;
+  const [rMin, rMax] = range;
+  const ratio = max === min ? 1 : (value - min) / (max - min);
+  const clamped = ratio < 0 ? 0 : ratio > 1 ? 1 : ratio;
+  const area = rMin * rMin + clamped * (rMax * rMax - rMin * rMin);
+  return Math.sqrt(area);
+}
+
 /** `12k` rather than `12400` — a readout has one line to say it in. */
 export function compactNumber(value: number): string {
   if (!Number.isFinite(value)) return String(value);