panelui-native 0.73.0 → 0.75.1

package/src/components/otp-input/index.tsx

@@ -38,6 +38,7 @@ import Animated, {
 import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { resolveOtpEditable } from './otp-input-state';
 
 /** Long enough to read as a transition, short enough not to lag a fast type. */
 const FOCUS_DURATION = 150;
@@ -245,6 +246,7 @@ export const OtpInput = forwardRef<TextInput, OtpInputProps>(
       groupEvery = 0,
       size,
       disabled,
+      editable,
       isInvalid,
       errorMessage,
       accessibilityLabel,
@@ -351,7 +353,7 @@ export const OtpInput = forwardRef<TextInput, OtpInputProps>(
             ref={setRef}
             value={value}
             onChangeText={handleChange}
-            editable={!disabled}
+            editable={resolveOtpEditable(editable, disabled)}
             keyboardType={type === 'numeric' ? 'number-pad' : 'default'}
             // The OS one-time-code affordances: iOS surfaces the SMS code above
             // the keyboard, Android offers to autofill it.

package/src/components/otp-input/otp-input-state.ts

@@ -0,0 +1,7 @@
+/** Resolve the native editing state without allowing `disabled` to be bypassed. */
+export function resolveOtpEditable(
+  editable: boolean | undefined,
+  disabled: boolean | undefined
+): boolean {
+  return editable !== false && !disabled;
+}

package/src/components/planner/index.tsx

@@ -115,6 +115,7 @@ import {
   usePlannerMonthLifecycle,
   usePlannerSelectionLifecycle,
 } from './planner-lifecycle';
+import { millisecondsUntilNextLocalDay } from './planner-today';
 
 /** How many of a day's entries a cell draws before it stops and counts. */
 const DEFAULT_ENTRY_LIMIT = 2;
@@ -249,21 +250,38 @@ function usePlanner(component: string): PlannerContextValue {
   return context;
 }
 
-/** Today, recomputed when the app comes back rather than only at mount. */
+/** Today, recomputed at local midnight and whenever the app comes back. */
 function useToday(): Date {
   const [today, setToday] = useState(() => startOfDay(new Date()));
 
   useEffect(() => {
-    const refresh = () => {
-      const now = startOfDay(new Date());
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
+    const clearTimer = () => {
+      if (timer === null) return;
+      clearTimeout(timer);
+      timer = null;
+    };
+
+    const refreshAndSchedule = () => {
+      const current = new Date();
+      const now = startOfDay(current);
       // A new object every resume would invalidate every memo below it for a
       // date that has not changed.
-      setToday((current) => (current.getTime() === now.getTime() ? current : now));
+      setToday((previous) => (previous.getTime() === now.getTime() ? previous : now));
+      clearTimer();
+      timer = setTimeout(refreshAndSchedule, millisecondsUntilNextLocalDay(current));
     };
+
+    refreshAndSchedule();
     const subscription = AppState.addEventListener('change', (state) => {
-      if (state === 'active') refresh();
+      if (state === 'active') refreshAndSchedule();
+      else clearTimer();
     });
-    return () => subscription.remove();
+    return () => {
+      clearTimer();
+      subscription.remove();
+    };
   }, []);
 
   return today;

package/src/components/planner/planner-today.ts

@@ -0,0 +1,5 @@
+export function millisecondsUntilNextLocalDay(now: Date): number {
+  const next = new Date(now);
+  next.setHours(24, 0, 0, 0);
+  return Math.max(next.getTime() - now.getTime(), 1);
+}

package/src/components/plot/index.tsx

@@ -112,6 +112,12 @@ import {
   type Plot as PlotBox,
 } from '../../utils/chart';
 import { cn } from '../../utils/cn';
+import {
+  registerPlotSeries,
+  unregisterPlotSeries,
+  visiblePlotSeries,
+  type PlotSeriesRegistration,
+} from './plot-series-registry';
 
 /*
  * The scale functions, re-exported so a mark written outside this file can sit
@@ -214,7 +220,7 @@ export interface PlotGeometry {
   /** Every mark that registered itself, as `[dataKey, colour]`. */
   series: [string, string][];
   registerSeries: (key: string, color: string) => void;
-  unregisterSeries: (key: string) => void;
+  unregisterSeries: (key: string, color?: string) => void;
   /** Row under the cursor, or `-1`. On the UI thread. */
   activeIndex: SharedValue<number>;
   /** The same index on the JS thread, for anything that has to re-render. */
@@ -340,7 +346,7 @@ const PlotRoot = forwardRef<PlotHandle, PlotProps>(function PlotRoot(
   ref
 ) {
   const [size, setSize] = useState({ width: 0, height: 0 });
-  const [series, setSeries] = useState<[string, string][]>([]);
+  const [registrations, setRegistrations] = useState<PlotSeriesRegistration[]>([]);
   const [activeIndexJS, setActiveIndexJS] = useState(-1);
   const clipId = `panelui-plot-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
@@ -352,19 +358,18 @@ const PlotRoot = forwardRef<PlotHandle, PlotProps>(function PlotRoot(
 
   const registerSeries = useMemo(
     () => (key: string, color: string) =>
-      setSeries((current) => {
-        const existing = current.find(([k]) => k === key);
-        if (existing?.[1] === color) return current;
-        return [...current.filter(([k]) => k !== key), [key, color]];
-      }),
+      setRegistrations((current) => registerPlotSeries(current, key, color)),
     []
   );
 
   const unregisterSeries = useMemo(
-    () => (key: string) => setSeries((current) => current.filter(([k]) => k !== key)),
+    () => (key: string, color?: string) =>
+      setRegistrations((current) => unregisterPlotSeries(current, key, color)),
     []
   );
 
+  const series = useMemo(() => visiblePlotSeries(registrations), [registrations]);
+
   /*
    * What the children need decided before anything is laid out.
    *
@@ -404,7 +409,7 @@ const PlotRoot = forwardRef<PlotHandle, PlotProps>(function PlotRoot(
    * magnitude apart look alike, which is the chart lying rather than the chart
    * being convenient.
    */
-  const seriesKeys = series.map(([key]) => key).join('|');
+  const seriesKeys = useMemo(() => series.map(([key]) => key), [series]);
   const extent = useMemo<[number, number]>(() => {
     const lowPin = yDomain?.[0];
     const highPin = yDomain?.[1];
@@ -412,11 +417,10 @@ const PlotRoot = forwardRef<PlotHandle, PlotProps>(function PlotRoot(
       return [lowPin, highPin];
     }
 
-    const keys = seriesKeys ? seriesKeys.split('|') : [];
     let min = Infinity;
     let max = -Infinity;
     for (const row of data) {
-      for (const key of keys) {
+      for (const key of seriesKeys) {
         const value = row[key];
         if (typeof value !== 'number' || Number.isNaN(value)) continue;
         if (value < min) min = value;
@@ -692,7 +696,7 @@ function useMark(dataKey: string, color: string | undefined, colorIndex: number)
 
   useEffect(() => {
     registerSeries(dataKey, resolved);
-    return () => unregisterSeries(dataKey);
+    return () => unregisterSeries(dataKey, resolved);
   }, [dataKey, resolved, registerSeries, unregisterSeries]);
 
   return resolved;

package/src/components/plot/plot-series-registry.ts

@@ -0,0 +1,41 @@
+export interface PlotSeriesRegistration {
+  key: string;
+  colors: readonly string[];
+}
+
+export function registerPlotSeries(
+  current: readonly PlotSeriesRegistration[],
+  key: string,
+  color: string
+): PlotSeriesRegistration[] {
+  const existing = current.find((entry) => entry.key === key);
+  if (!existing) return [...current, { key, colors: [color] }];
+
+  return current.map((entry) =>
+    entry === existing ? { ...entry, colors: [...entry.colors, color] } : entry
+  );
+}
+
+export function unregisterPlotSeries(
+  current: readonly PlotSeriesRegistration[],
+  key: string,
+  color?: string
+): PlotSeriesRegistration[] {
+  const existing = current.find((entry) => entry.key === key);
+  if (!existing) return current as PlotSeriesRegistration[];
+
+  const index =
+    color === undefined ? existing.colors.length - 1 : existing.colors.lastIndexOf(color);
+  if (index < 0) return current as PlotSeriesRegistration[];
+
+  const colors = existing.colors.filter((_, candidate) => candidate !== index);
+  if (colors.length === 0) return current.filter((entry) => entry !== existing);
+
+  return current.map((entry) => (entry === existing ? { ...entry, colors } : entry));
+}
+
+export function visiblePlotSeries(
+  registrations: readonly PlotSeriesRegistration[]
+): [string, string][] {
+  return registrations.map(({ key, colors }) => [key, colors[colors.length - 1]!]);
+}

package/src/components/radio-group/index.tsx

@@ -36,6 +36,7 @@ import Animated, {
 import { tv, type VariantProps } from 'tailwind-variants';
 import { cn } from '../../utils/cn';
 import { Text, textChildren } from '../../primitives/text';
+import { requestRadioValueChange } from './radio-group-value';
 
 type RadioVariant = 'dot' | 'card';
 type RadioOrientation = 'vertical' | 'horizontal';
@@ -247,7 +248,9 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
         accessibilityState={{ selected, disabled: !!disabled }}
         accessibilityLabel={label}
         disabled={disabled}
-        onPress={() => context.onValueChange(value)}
+        onPress={() =>
+          requestRadioValueChange(context.value, value, context.onValueChange)
+        }
         className={slots.row({ className })}
       >
         {body}

package/src/components/radio-group/radio-group-value.ts

@@ -0,0 +1,9 @@
+export function requestRadioValueChange(
+  currentValue: string | undefined,
+  nextValue: string,
+  onValueChange: (value: string) => void
+) {
+  if (currentValue !== nextValue) {
+    onValueChange(nextValue);
+  }
+}

package/src/components/rating/index.tsx

@@ -43,6 +43,11 @@ import { StarIcon } from '../../icons';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { selectionTick } from '../../utils/haptics';
+import {
+  normalizeRatingMax,
+  normalizeRatingPrecision,
+  normalizeRatingValue,
+} from './rating-inputs';
 
 /** Springs the fill onto its resting value after a tap or the end of a drag. */
 const SPRING = { damping: 18, stiffness: 220, mass: 0.6 } as const;
@@ -197,8 +202,8 @@ export const Rating = forwardRef<View, RatingProps>(
       rowClassName,
       value: valueProp,
       defaultValue = 0,
-      max = 5,
-      precision = 1,
+      max: maxProp = 5,
+      precision: precisionProp = 1,
       onValueChange,
       onValueCommit,
       readOnly = false,
@@ -213,9 +218,11 @@ export const Rating = forwardRef<View, RatingProps>(
     },
     ref
   ) => {
+    const max = normalizeRatingMax(maxProp);
+    const precision = normalizeRatingPrecision(precisionProp);
     const isControlled = valueProp !== undefined;
-    const [internal, setInternal] = useState(defaultValue);
-    const value = clampJS(isControlled ? valueProp! : internal, 0, max);
+    const [internal, setInternal] = useState(() => normalizeRatingValue(defaultValue, max));
+    const value = normalizeRatingValue(isControlled ? valueProp : internal, max);
 
     const interactive = !readOnly && !disabled;
     const slots = ratingVariants({ size, disabled });

package/src/components/rating/rating-inputs.ts

@@ -0,0 +1,19 @@
+const DEFAULT_MAX = 5;
+const DEFAULT_PRECISION = 1;
+
+export function normalizeRatingMax(max: number | undefined): number {
+  return typeof max === 'number' && Number.isFinite(max) && max >= 1
+    ? Math.floor(max)
+    : DEFAULT_MAX;
+}
+
+export function normalizeRatingPrecision(precision: number | undefined): number {
+  return typeof precision === 'number' && Number.isFinite(precision) && precision > 0
+    ? precision
+    : DEFAULT_PRECISION;
+}
+
+export function normalizeRatingValue(value: number | undefined, max: number): number {
+  if (typeof value !== 'number' || !Number.isFinite(value)) return 0;
+  return Math.min(Math.max(value, 0), max);
+}

package/src/components/search-bar/index.tsx

@@ -70,6 +70,12 @@ import { AnimatedPressable } from '../../primitives/animated-pressable';
 import { Text } from '../../primitives/text';
 import { Input, type InputProps } from '../input';
 import { Spinner } from '../spinner';
+import {
+  cancelSearchBarDebounce,
+  flushSearchBarDebounce,
+  scheduleSearchBarDebounce,
+  type SearchBarDebounceTimer,
+} from './search-bar-debounce';
 
 /** Matches the field's own focus crossfade, so the row settles as one thing. */
 const CANCEL_DURATION = 180;
@@ -251,6 +257,7 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(
      * render and push the pause out forever.
      */
     const debouncedRef = useRef(onDebouncedChange);
+    const debounceTimerRef = useRef<SearchBarDebounceTimer['current']>(null);
     useEffect(() => {
       debouncedRef.current = onDebouncedChange;
     });
@@ -263,12 +270,10 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(
         settled.current = true;
         return;
       }
-      if (debounce <= 0) {
-        debouncedRef.current?.(text);
-        return;
-      }
-      const timer = setTimeout(() => debouncedRef.current?.(text), debounce);
-      return () => clearTimeout(timer);
+      scheduleSearchBarDebounce(debounceTimerRef, debouncedRef.current, text, debounce);
+      return () => {
+        cancelSearchBarDebounce(debounceTimerRef);
+      };
     }, [text, debounce]);
 
     const handleFocus = useCallback<NonNullable<InputProps['onFocus']>>(
@@ -291,7 +296,7 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(
       (event: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
         // A return key is somebody saying they are done waiting, so the
         // pending pause is spent rather than waited out.
-        debouncedRef.current?.(text);
+        flushSearchBarDebounce(debounceTimerRef, debouncedRef.current, text);
         onSubmit?.(text);
         onSubmitEditing?.(event);
       },

package/src/components/search-bar/search-bar-debounce.ts

@@ -0,0 +1,35 @@
+export interface SearchBarDebounceTimer {
+  current: ReturnType<typeof setTimeout> | null;
+}
+
+export function cancelSearchBarDebounce(timer: SearchBarDebounceTimer): void {
+  if (timer.current === null) return;
+  clearTimeout(timer.current);
+  timer.current = null;
+}
+
+export function scheduleSearchBarDebounce(
+  timer: SearchBarDebounceTimer,
+  callback: ((value: string) => void) | undefined,
+  value: string,
+  delay: number
+): void {
+  cancelSearchBarDebounce(timer);
+  if (!Number.isFinite(delay) || delay <= 0) {
+    callback?.(value);
+    return;
+  }
+  timer.current = setTimeout(() => {
+    timer.current = null;
+    callback?.(value);
+  }, delay);
+}
+
+export function flushSearchBarDebounce(
+  timer: SearchBarDebounceTimer,
+  callback: ((value: string) => void) | undefined,
+  value: string
+): void {
+  cancelSearchBarDebounce(timer);
+  callback?.(value);
+}

package/src/components/select/index.tsx

@@ -70,6 +70,7 @@ import { useBackHandler } from '../../hooks/use-back-handler';
 import { cn } from '../../utils/cn';
 import { BottomSheet } from '../bottom-sheet';
 import { InputGroup } from '../input-group';
+import { nativeSelectSupportsOptions } from './native-select-contract';
 
 const selectVariants = tv({
   slots: {
@@ -339,7 +340,6 @@ function SelectRoot({
   const triggerRef = useRef<View>(null);
   const chevron = useSharedValue(0);
   const { height: screenHeight } = useWindowDimensions();
-  const nativeUI = native ? getNativeUI() : null;
 
   const options = useMemo(() => {
     const collected: SelectItemProps[] = [];
@@ -347,6 +347,15 @@ function SelectRoot({
     return collected;
   }, [children]);
 
+  /*
+   * @expo/ui's portable Picker only has a control-wide `enabled` flag. Its
+   * items accept label and value, but no disabled state, so handing it a
+   * disabled Select.Item would make that option selectable again. Preserve
+   * the public item contract by using the styled Select for that list.
+   */
+  const nativeUI =
+    native && nativeSelectSupportsOptions(options) ? getNativeUI() : null;
+
   const selectedLabel = useMemo(
     () => options.find((option) => option.value === value)?.label,
     [options, value]

package/src/components/select/native-select-contract.ts

@@ -0,0 +1,12 @@
+interface NativeSelectOption {
+  disabled?: boolean;
+}
+
+/**
+ * The portable @expo/ui picker can disable the whole control, but not one
+ * option. Keep the styled Select when an item needs that distinction rather
+ * than silently turning a disabled choice back into a selectable one.
+ */
+export function nativeSelectSupportsOptions(options: NativeSelectOption[]): boolean {
+  return options.every((option) => !option.disabled);
+}