panelui-native 0.66.1 → 0.71.0

package/lib/module/components/collapsible/index.js

@@ -0,0 +1,280 @@
+"use strict";
+
+/**
+ * Collapsible — one section of content that a header shows and hides.
+ *
+ * ```tsx
+ * <Collapsible variant="surface">
+ *   <Collapsible.Trigger>
+ *     Delivery options
+ *     <Collapsible.Indicator />
+ *   </Collapsible.Trigger>
+ *   <Collapsible.Content>
+ *     <Text>Anything, of any height.</Text>
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ *
+ * ## Why this and not a one-item Accordion
+ *
+ * The two look the same and differ in what happens to the body when it closes.
+ * An accordion unmounts it, which is right when a closed section should cost
+ * nothing and there is nothing inside worth keeping.
+ *
+ * This one keeps the body mounted and animates its height, so what is inside
+ * survives being closed — a part-filled form still has what was typed into it,
+ * a list is still scrolled to where it was, a video is still part-way through.
+ * That is the case this component exists for; reach for `Accordion` when
+ * sections are mutually exclusive or the body is expensive and rarely opened.
+ *
+ * ## The body is mounted whether or not it is open
+ *
+ * A height cannot be animated from `auto`, so the content has to be measured
+ * before it can be travelled to, and measuring it means rendering it. There is
+ * no lazy version of that: a body that has never been opened has still been
+ * rendered once. For a body heavy enough that this matters, an `Accordion` with
+ * a single item unmounts it instead.
+ *
+ * ## Reduced motion
+ *
+ * With the operating system set to reduce motion the panel snaps between its
+ * two states and the chevron turns without travelling. The disclosure still
+ * happens — it is the movement that is dropped, not the change.
+ */
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+import { ChevronDownIcon } from "../../icons/index.js";
+import { Collapse } from "../../primitives/collapse.js";
+import { Text, textChildren } from "../../primitives/text.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Matches the chevron in `Accordion`, so the two read as the same control. */
+const INDICATOR_DURATION = 200;
+const collapsibleVariants = tv({
+  slots: {
+    root: 'w-full flex-col',
+    trigger: 'flex-row items-center justify-between gap-4 py-4',
+    title: 'flex-1 text-base font-medium text-foreground',
+    indicator: 'items-center justify-center',
+    content: 'pb-4',
+    contentText: 'text-sm text-muted-foreground'
+  },
+  variants: {
+    variant: {
+      default: {
+        trigger: 'px-1',
+        content: 'px-1'
+      },
+      surface: {
+        root: 'overflow-hidden rounded-2xl border border-border bg-surface',
+        trigger: 'px-4',
+        content: 'px-4'
+      },
+      ghost: {
+        trigger: 'px-0',
+        content: 'px-0'
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
+});
+const CollapsibleContext = /*#__PURE__*/createContext(null);
+function useCollapsible(component) {
+  const context = useContext(CollapsibleContext);
+  if (!context) throw new Error(`${component} must be used within a <Collapsible>`);
+  return context;
+}
+const CollapsibleRoot = /*#__PURE__*/forwardRef(({
+  className,
+  variant = 'default',
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  isDisabled = false,
+  children,
+  ...props
+}, ref) => {
+  const [internal, setInternal] = useState(defaultOpen);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : internal;
+  const toggle = useCallback(() => {
+    const next = !isOpen;
+    if (!isControlled) setInternal(next);
+    onOpenChange?.(next);
+  }, [isOpen, isControlled, onOpenChange]);
+  const context = useMemo(() => ({
+    open: isOpen,
+    toggle,
+    isDisabled,
+    variant
+  }), [isOpen, toggle, isDisabled, variant]);
+  const {
+    root
+  } = collapsibleVariants({
+    variant
+  });
+  return /*#__PURE__*/_jsx(CollapsibleContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      className: root({
+        className
+      }),
+      ...props,
+      children: children
+    })
+  });
+});
+CollapsibleRoot.displayName = 'Collapsible';
+/** The pressable header row. Bare strings are wrapped in the title style. */
+const CollapsibleTrigger = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  const {
+    open,
+    toggle,
+    isDisabled,
+    variant
+  } = useCollapsible('Collapsible.Trigger');
+  const {
+    trigger,
+    title
+  } = collapsibleVariants({
+    variant
+  });
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    accessibilityRole: "button",
+    accessibilityState: {
+      expanded: open,
+      disabled: isDisabled
+    },
+    disabled: isDisabled,
+    onPress: toggle,
+    className: trigger({
+      className
+    }),
+    ...props,
+    children: textChildren(children, text => /*#__PURE__*/_jsx(Text, {
+      className: title(),
+      children: text
+    }))
+  });
+});
+CollapsibleTrigger.displayName = 'Collapsible.Trigger';
+const CollapsibleTitle = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const {
+    variant
+  } = useCollapsible('Collapsible.Title');
+  const {
+    title
+  } = collapsibleVariants({
+    variant
+  });
+  return /*#__PURE__*/_jsx(Text, {
+    ref: ref,
+    className: title({
+      className
+    }),
+    ...props
+  });
+});
+CollapsibleTitle.displayName = 'Collapsible.Title';
+/** Chevron that rotates 180° while the body is open. */
+const CollapsibleIndicator = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  const {
+    open,
+    variant
+  } = useCollapsible('Collapsible.Indicator');
+  const {
+    indicator
+  } = collapsibleVariants({
+    variant
+  });
+  const reducedMotion = useReducedMotion();
+  const progress = useSharedValue(open ? 1 : 0);
+  useEffect(() => {
+    progress.value = reducedMotion ? open ? 1 : 0 : withTiming(open ? 1 : 0, {
+      duration: INDICATOR_DURATION
+    });
+  }, [open, reducedMotion, progress]);
+  const style = useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${progress.value * 180}deg`
+    }]
+  }));
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: style,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      className: indicator({
+        className
+      }),
+      ...props,
+      children: children ?? /*#__PURE__*/_jsx(ChevronDownIcon, {
+        size: 18
+      })
+    })
+  });
+});
+CollapsibleIndicator.displayName = 'Collapsible.Indicator';
+/**
+ * The body, opened and closed by animating its own height.
+ *
+ * It stays mounted while closed, which is the point of the component — see the
+ * note at the top of the file. A closed body is hidden from the accessibility
+ * tree as well as from the eye, because a screen reader reading out a section
+ * that is not on screen is worse than one that skips it.
+ */
+const CollapsibleContent = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  const {
+    open,
+    variant
+  } = useCollapsible('Collapsible.Content');
+  const {
+    content,
+    contentText
+  } = collapsibleVariants({
+    variant
+  });
+  return /*#__PURE__*/_jsx(Collapse, {
+    open: open,
+    className: content({
+      className
+    }),
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      accessibilityElementsHidden: !open,
+      importantForAccessibility: open ? 'auto' : 'no-hide-descendants',
+      ...props,
+      children: textChildren(children, text => /*#__PURE__*/_jsx(Text, {
+        className: contentText(),
+        children: text
+      }))
+    })
+  });
+});
+CollapsibleContent.displayName = 'Collapsible.Content';
+export const Collapsible = Object.assign(CollapsibleRoot, {
+  Trigger: CollapsibleTrigger,
+  Title: CollapsibleTitle,
+  Indicator: CollapsibleIndicator,
+  Content: CollapsibleContent
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/collapsible/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","forwardRef","useCallback","useContext","useEffect","useMemo","useState","Pressable","View","Animated","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","tv","ChevronDownIcon","Collapse","Text","textChildren","jsx","_jsx","INDICATOR_DURATION","collapsibleVariants","slots","root","trigger","title","indicator","content","contentText","variants","variant","default","surface","ghost","defaultVariants","CollapsibleContext","useCollapsible","component","context","Error","CollapsibleRoot","className","open","defaultOpen","onOpenChange","isDisabled","children","props","ref","internal","setInternal","isControlled","undefined","isOpen","toggle","next","Provider","value","displayName","CollapsibleTrigger","accessibilityRole","accessibilityState","expanded","disabled","onPress","text","CollapsibleTitle","CollapsibleIndicator","reducedMotion","progress","duration","style","transform","rotate","size","CollapsibleContent","accessibilityElementsHidden","importantForAccessibility","Collapsible","Object","assign","Trigger","Title","Indicator","Content"],"sourceRoot":"../../../../src","sources":["components/collapsible/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/flow/index.js

@@ -33,6 +33,10 @@
  * the edges are ordinary elements and cost a render per drag frame. That is a
  * real cost and it is the right trade.
  *
+ * An `animated` edge keeps that arrangement and animates the one property the
+ * geometry does not own: the dash offset. Its `d` still arrives by re-render,
+ * so a dragged node reshapes the edge while the dashes keep marching.
+ *
  * JavaScript is told a drag has finished through `onNodeDragEnd`. Positions
  * are otherwise yours to leave alone: pass `position` once and the canvas
  * takes it from there, or keep it in state and pass it back to drive nodes
@@ -48,7 +52,7 @@ import { createContext, Fragment, useCallback, useContext, useEffect, useId, use
 import { StyleSheet, View } from 'react-native';
 import { useCSSVariable } from 'uniwind';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedProps, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, Easing } from 'react-native-reanimated';
+import Animated, { cancelAnimation, runOnJS, useAnimatedProps, useAnimatedStyle, useDerivedValue, useReducedMotion, useSharedValue, withRepeat, withTiming, Easing } from 'react-native-reanimated';
 import Svg, { Circle, Defs, Path, Pattern, Rect } from 'react-native-svg';
 import { tv } from 'tailwind-variants';
 import { LockIcon, MaximizeIcon, MinusIcon, PlusIcon, UnlockIcon } from "../../icons/index.js";
@@ -107,6 +111,15 @@ const CONNECT_RADIUS = 44;
  */
 const GROUP_EDGE_STANDOFF = 5;
 
+/** Dash and gap length for a broken edge, in graph points. */
+const EDGE_DASH = 6;
+
+/**
+ * How long an animated edge takes to travel one dash-and-gap. Slow enough to
+ * read as flow rather than flicker, fast enough to look live.
+ */
+const EDGE_MARCH_DURATION = 600;
+
 /** What `onConnect` is handed when a connection lands. */
 
 const FlowContext = /*#__PURE__*/createContext(null);
@@ -1172,6 +1185,52 @@ function FlowEdge(props) {
   return null;
 }
 
+/**
+ * A dashed edge whose dashes travel from source to target.
+ *
+ * The dash offset is the only animated property here, and the geometry is
+ * deliberately not one: `d` arrives as an ordinary prop and changes by
+ * re-render when a node moves. A path in React Native draws reliably when one
+ * property animates and the rest are plain, so splitting them this way lets a
+ * dragged node reshape the edge without ever interrupting the march.
+ *
+ * One dash and one gap of travel per cycle, which is why the loop is seamless:
+ * the end state is the start state shifted by exactly one period.
+ */
+function FlowMarchingEdge({
+  d,
+  stroke,
+  width
+}) {
+  const offset = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+  useEffect(() => {
+    if (reducedMotion) {
+      offset.value = 0;
+      return undefined;
+    }
+    // Negative, so the dashes run the way the path was drawn: source to target.
+    offset.value = withRepeat(withTiming(-EDGE_DASH * 2, {
+      duration: EDGE_MARCH_DURATION,
+      easing: Easing.linear
+    }), -1, false);
+    return () => cancelAnimation(offset);
+  }, [offset, reducedMotion]);
+  const dashProps = useAnimatedProps(() => ({
+    strokeDashoffset: offset.value
+  }));
+  return /*#__PURE__*/_jsx(AnimatedPath, {
+    animatedProps: dashProps,
+    d: d,
+    fill: "none",
+    stroke: stroke,
+    strokeWidth: width,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeDasharray: `${EDGE_DASH} ${EDGE_DASH}`
+  });
+}
+
 /** The part that actually draws an edge, inside the canvas's one `<Svg>`. */
 function FlowEdgePath({
   from,
@@ -1229,14 +1288,18 @@ function FlowEdgePath({
     y: outB.y + origin.y
   };
   const d = edgePath(variant, a, sideA, b, sideB, curvature, radius, gap);
-  const dash = dashed || animated ? 6 : 0;
+  const dash = dashed || animated ? EDGE_DASH : 0;
   const stroke = color ?? tint;
   const head = arrow ? (() => {
     const dir = arrivalDirection(variant, a, b, sideB);
     return arrowHeadPath(b, dir.x, dir.y, Math.max(width * 3.5, 7));
   })() : null;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Path, {
+    children: [animated ? /*#__PURE__*/_jsx(FlowMarchingEdge, {
+      d: d,
+      stroke: stroke,
+      width: width
+    }) : /*#__PURE__*/_jsx(Path, {
       d: d,
       fill: "none",
       stroke: stroke,