panelui-native 0.83.0 → 0.84.0

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

@@ -78,8 +78,8 @@
  * accessibility setting on, every spring here resolves instantly to its target
  * rather than travelling.
  */
-import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Keyboard, Platform, Pressable, ScrollView, StyleSheet, TextInput, useWindowDimensions, View } from 'react-native';
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Platform, Pressable, ScrollView, StyleSheet, TextInput, useWindowDimensions, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedProps, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -87,18 +87,13 @@ import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { LinearGradient } from 'expo-linear-gradient';
 import { HugeiconsIcon } from '@hugeicons/react-native';
-import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import Menu01Icon from '@hugeicons/core-free-icons/Menu01Icon';
 import MoreHorizontalIcon from '@hugeicons/core-free-icons/MoreHorizontalIcon';
 import Search01Icon from '@hugeicons/core-free-icons/Search01Icon';
 import { IconColorProvider, useIconColor } from "../../icons/index.js";
-import { BottomSheet, bottomSheetDetentHeight } from "../bottom-sheet/index.js";
 import { Button } from "../button/index.js";
 import { Menu } from "../menu/index.js";
-import { Tabs } from "../tabs/index.js";
-import { getNativeUI } from "../../native/index.js";
 import { AnimatedPressable } from "../../primitives/animated-pressable.js";
-import { KeyboardAvoider } from "../../primitives/keyboard-avoider.js";
 import { Text, textChildren } from "../../primitives/text.js";
 import { useBackHandler } from "../../hooks/use-back-handler.js";
 import { useDirectionSign } from "../../hooks/use-direction.js";
@@ -377,8 +372,6 @@ export function usePanelside() {
     toggle,
     progress,
     docked,
-    searchOpen,
-    setSearchOpen,
     route,
     navigate
   } = usePanelsideContext('usePanelside');
@@ -395,8 +388,6 @@ export function usePanelside() {
     toggle,
     progress,
     docked,
-    searchOpen,
-    setSearchOpen,
     route,
     navigate: go
   };
@@ -438,7 +429,6 @@ function PanelsideRoot({
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
   const controlled = controlledOpen !== undefined;
   const open = controlled ? controlledOpen : uncontrolledOpen;
-  const [searchOpen, setSearchOpen] = useState(false);
   const [uncontrolledRoute, setUncontrolledRoute] = useState(defaultRoute);
   const route = controlledRoute ?? uncontrolledRoute;
 
@@ -587,11 +577,9 @@ function PanelsideRoot({
     scale,
     radius,
     dim,
-    searchOpen,
-    setSearchOpen,
     route,
     navigate
-  }), [dim, dismissible, docked, mode, navigate, open, progress, radius, route, scale, searchOpen, setOpen, toggle, width]);
+  }), [dim, dismissible, docked, mode, navigate, open, progress, radius, route, scale, setOpen, toggle, width]);
   return /*#__PURE__*/_jsx(PanelsideContext.Provider, {
     value: context,
     children: /*#__PURE__*/_jsx(View, {
@@ -1531,11 +1519,17 @@ function PanelsideTrigger({
  * ------------------------------------------------------------------ */
 
 /**
- * The button that opens the search surface. Goes in `Panelside.Header`'s
- * `action` slot.
+ * The search button. Goes in `Panelside.Header`'s `action` slot.
  *
- * It toggles the root's `searchOpen`, which `Panelside.SearchSheet` reads —
- * so the two need nothing wired between them.
+ * It draws the control and nothing else: a circle, or the platform's own
+ * button under `native`, with the magnifier already in it. What pressing it
+ * opens is `onPress`'s to decide — a page the scene navigates to, a sheet, a
+ * screen pushed onto the app's own stack.
+ *
+ * That is the same arrangement `Panelside.Trigger` has, and it is here for the
+ * same reason: where search goes is a decision about the app, and a component
+ * that answers it for you is one you have to work around the first time the
+ * answer is different.
  */
 function PanelsideSearchTrigger({
   className,
@@ -1547,15 +1541,9 @@ function PanelsideSearchTrigger({
   onPress,
   ...props
 }) {
-  const {
-    setSearchOpen
-  } = usePanelsideContext('Panelside.SearchTrigger');
   const tint = useCSSVariable('--color-foreground');
   const color = typeof tint === 'string' ? tint : undefined;
-  const open = useCallback(event => {
-    onPress?.(event);
-    setSearchOpen(true);
-  }, [onPress, setSearchOpen]);
+  const open = onPress;
   const glyph = children ?? /*#__PURE__*/_jsx(Glyph, {
     icon: Search01Icon,
     size: 18,
@@ -1589,384 +1577,6 @@ function PanelsideSearchTrigger({
     })
   });
 }
-const PanelsideSearchSheetContext = /*#__PURE__*/createContext(null);
-function usePanelsideSearchSheet(part) {
-  const value = useContext(PanelsideSearchSheetContext);
-  if (!value) throw new Error(`${part} must be used inside a <Panelside.SearchSheet>.`);
-  return value;
-}
-/**
- * The search surface: tabs, results, and a field at the bottom.
- *
- * ```tsx
- * <Panelside.SearchSheet value={query} onValueChange={setQuery} tab={tab} onTabChange={setTab}>
- *   <Panelside.SearchTabs>
- *     <Panelside.SearchTab value="all" icon={<SparklesIcon size={16} />}>All</Panelside.SearchTab>
- *     <Panelside.SearchTab value="chats" icon={<MessageCircleIcon size={16} />}>Chats</Panelside.SearchTab>
- *   </Panelside.SearchTabs>
- *
- *   <Panelside.SearchResults>
- *     {hits.map((hit) => (
- *       <Panelside.SearchResult key={hit.id} title={hit.title} description={hit.kind} />
- *     ))}
- *   </Panelside.SearchResults>
- *
- *   <Panelside.SearchField placeholder="Search chats" />
- * </Panelside.SearchSheet>
- * ```
- *
- * Put it under `<Panelside>` and outside `Panelside.Panel` — a sheet is
- * presented over the whole app, and the panel is a layer that slides.
- *
- * It reports what was typed and which tab is selected. What counts as a match,
- * and what a result is, are yours: a search that only read chat titles would
- * be wrong for the first app that indexes message bodies.
- */
-function PanelsideSearchSheet({
-  className,
-  open: openProp,
-  onOpenChange,
-  value,
-  defaultValue = '',
-  onValueChange,
-  tab,
-  defaultTab = '',
-  onTabChange,
-  native = true,
-  snapPoints,
-  keyboardGap = 10,
-  showClose = true,
-  closeLabel = 'Close search',
-  closeVariant = 'filled',
-  closeNative = false,
-  closeGlass = false,
-  children
-}) {
-  const {
-    searchOpen,
-    setSearchOpen
-  } = usePanelsideContext('Panelside.SearchSheet');
-  const insets = useSafeAreaInsets();
-  const {
-    height: screenHeight
-  } = useWindowDimensions();
-  const tint = useCSSVariable('--color-foreground');
-  const glyph = typeof tint === 'string' ? tint : undefined;
-  const [uncontrolledQuery, setUncontrolledQuery] = useState(defaultValue);
-  const [uncontrolledTab, setUncontrolledTab] = useState(defaultTab);
-  const open = openProp ?? searchOpen;
-  const query = value ?? uncontrolledQuery;
-  const activeTab = tab ?? uncontrolledTab;
-
-  /*
-   * Closing takes the keyboard with it, wherever the close came from — the
-   * button, a drag on the sheet, or the system back gesture.
-   *
-   * Leaving it to the field's own blur is too late. The field blurs when
-   * `open` goes false, but the sheet is already on its way out by then: the
-   * styled one unmounts its portal after the exit animation, and the platform
-   * one keeps its content mounted and only stops presenting it. Either way the
-   * blur lands on a field nothing can see, and the keyboard stays up until the
-   * system notices for itself, some seconds later, that nothing is focused.
-   */
-  const setOpen = useCallback(next => {
-    if (!next) Keyboard.dismiss();
-    if (openProp === undefined) setSearchOpen(next);
-    onOpenChange?.(next);
-  }, [onOpenChange, openProp, setSearchOpen]);
-  const setQuery = useCallback(next => {
-    if (value === undefined) setUncontrolledQuery(next);
-    onValueChange?.(next);
-  }, [onValueChange, value]);
-  const setTab = useCallback(next => {
-    if (tab === undefined) setUncontrolledTab(next);
-    onTabChange?.(next);
-  }, [onTabChange, tab]);
-  const close = useCallback(() => setOpen(false), [setOpen]);
-  const detents = snapPoints ?? ['full'];
-
-  /*
-   * What `BottomSheet.Content` pads the bottom of the sheet by. The field
-   * already sits that far above the screen edge, and docking travels by the
-   * keyboard's height less whatever the element has already cleared — so
-   * getting this wrong is a gap under the field, or the field over the
-   * keyboard's top row.
-   */
-  const bottomInset = Math.max(insets.bottom, SHEET_BOTTOM_PADDING) - keyboardGap;
-
-  /*
-   * A definite height for the column, not `flex-1` against the sheet's own.
-   *
-   * The platform sheet gives its hosted content a *minimum* height, and a
-   * minimum is not something `flex-1` can divide: the results list sizes to
-   * its own rows instead, grows past the sheet, and pushes the field off the
-   * bottom — which is a search surface with no way to type in it. So the
-   * column is told exactly how tall it is, and the list gets the room left
-   * between the tabs and the field.
-   *
-   * Only under the platform sheet. The styled one is laid out by us and has a
-   * real height already, so `flex-1` resolves there and a second opinion about
-   * how tall the sheet is would only be a chance to disagree with it.
-   */
-  const hosted = native && getNativeUI() !== null;
-  const columnHeight = hosted ? (bottomSheetDetentHeight(detents, screenHeight) ?? screenHeight * 0.9) - SHEET_TOP_PADDING - Math.max(insets.bottom, SHEET_BOTTOM_PADDING) : undefined;
-  const context = useMemo(() => ({
-    open,
-    query,
-    setQuery,
-    tab: activeTab,
-    setTab,
-    close,
-    bottomInset
-  }), [activeTab, bottomInset, close, open, query, setQuery, setTab]);
-  return /*#__PURE__*/_jsx(BottomSheet, {
-    native: native,
-    open: open,
-    onOpenChange: setOpen,
-    snapPoints: detents,
-    children: /*#__PURE__*/_jsx(BottomSheet.Content, {
-      size: "full",
-      showClose: false,
-      className: "gap-0 px-0 pt-3",
-      children: /*#__PURE__*/_jsx(PanelsideSearchSheetContext.Provider, {
-        value: context,
-        children: /*#__PURE__*/_jsxs(View, {
-          className: cn('gap-2', columnHeight === undefined && 'flex-1', className),
-          style: columnHeight === undefined ? undefined : {
-            height: columnHeight
-          },
-          children: [showClose ? /*#__PURE__*/_jsx(View, {
-            className: "flex-row px-4 pb-1",
-            children: closeNative ? /*#__PURE__*/_jsx(Button, {
-              native: true,
-              glass: closeGlass,
-              size: "icon",
-              variant: "ghost",
-              accessibilityLabel: closeLabel,
-              onPress: close,
-              children: /*#__PURE__*/_jsx(Glyph, {
-                icon: Cancel01Icon,
-                size: 17,
-                color: glyph
-              })
-            }) : /*#__PURE__*/_jsx(AnimatedPressable, {
-              onPress: close,
-              accessibilityRole: "button",
-              accessibilityLabel: closeLabel,
-              className: cn('h-9 w-9 items-center justify-center rounded-full', closeVariant === 'outline' ? 'border border-border' : 'bg-secondary'),
-              children: /*#__PURE__*/_jsx(Glyph, {
-                icon: Cancel01Icon,
-                size: 17,
-                color: glyph
-              })
-            })
-          }) : null, children]
-        })
-      })
-    })
-  });
-}
-/**
- * The row across the top of the search sheet, narrowing what is searched.
- *
- * The expanding variant: only the selected tab is open, and the rest are their
- * icons. A row of four full labels takes the whole width to say four words
- * nobody rereads, and this row has to leave the results the screen.
- *
- * Every `Panelside.SearchTab` therefore needs an `icon` — a closed tab has
- * nothing else to be.
- */
-function PanelsideSearchTabs({
-  className,
-  align = 'center',
-  listClassName,
-  children
-}) {
-  const {
-    tab,
-    setTab
-  } = usePanelsideSearchSheet('Panelside.SearchTabs');
-  return /*#__PURE__*/_jsx(Tabs, {
-    variant: "expanding",
-    value: tab,
-    onValueChange: setTab,
-    defaultValue: tab,
-    className: cn('px-4 pt-1', className),
-    children: /*#__PURE__*/_jsx(Tabs.List, {
-      className: cn(align === 'center' && 'justify-center', listClassName),
-      children: children
-    })
-  });
-}
-function PanelsideSearchTab({
-  className,
-  value,
-  icon,
-  children
-}) {
-  return (
-    /*#__PURE__*/
-    // A step of padding above the tab row's own. This row is the only control
-    // on a surface that is otherwise a list and a field, and a closed tab here
-    // is a glyph with nothing else to be aimed at by — so it is sized to be
-    // hit rather than to the density a row of labelled tabs can afford.
-    _jsx(Tabs.Trigger, {
-      value: value,
-      icon: icon,
-      className: cn('px-4 py-3', className),
-      children: children
-    })
-  );
-}
-/**
- * The scrolling middle of the search sheet.
- *
- * `BottomSheet.Body` rather than a `ScrollView`, so the list's scroll and the
- * sheet's dismiss drag agree on which of them a downward pull belongs to.
- */
-function PanelsideSearchResults({
-  className,
-  contentContainerClassName,
-  children,
-  ...props
-}) {
-  usePanelsideSearchSheet('Panelside.SearchResults');
-  return /*#__PURE__*/_jsx(BottomSheet.Body, {
-    className: cn('flex-1', className),
-    contentContainerClassName: cn('gap-1 px-4 pb-4 pt-1', contentContainerClassName),
-    keyboardShouldPersistTaps: "handled",
-    keyboardDismissMode: "interactive",
-    ...props,
-    children: textChildren(children)
-  });
-}
-/**
- * One hit. A leading thumbnail, a title, and a line saying what it is.
- *
- * Taller than a `Panelside.Item`, and deliberately: a navigation row is a
- * place you already know the name of, and a result is a thing you are deciding
- * about — the second line is what the decision is made on.
- */
-function PanelsideSearchResult({
-  className,
-  media,
-  title,
-  description,
-  children,
-  ...props
-}) {
-  const tint = useCSSVariable('--color-muted-foreground');
-  const color = typeof tint === 'string' ? tint : undefined;
-  return /*#__PURE__*/_jsxs(AnimatedPressable, {
-    className: cn('flex-row items-center gap-3 rounded-xl px-2 py-2', className),
-    accessibilityRole: "button",
-    accessibilityLabel: title,
-    pressScale: 0.985,
-    ...props,
-    children: [media ? /*#__PURE__*/_jsx(View, {
-      className: "h-11 w-11 items-center justify-center overflow-hidden rounded-xl bg-secondary",
-      children: /*#__PURE__*/_jsx(IconColorProvider, {
-        color: color,
-        children: media
-      })
-    }) : null, title !== undefined || description !== undefined ? /*#__PURE__*/_jsxs(View, {
-      className: "flex-1 gap-0.5",
-      children: [title !== undefined ? /*#__PURE__*/_jsx(Text, {
-        size: "base",
-        weight: "medium",
-        numberOfLines: 1,
-        children: title
-      }) : null, description !== undefined ? /*#__PURE__*/_jsx(Text, {
-        size: "sm",
-        muted: true,
-        numberOfLines: 1,
-        children: description
-      }) : null]
-    }) : null, children]
-  });
-}
-/**
- * The field, at the bottom of the sheet, riding the keyboard.
- *
- * At the bottom because that is where the thumb is and where the keyboard
- * comes up: a field at the top of a full-height sheet is at the far end of the
- * screen from both, and every character typed into it is read at the other
- * end of a list that is moving.
- *
- * The way out of the surface is not here — `Panelside.SearchSheet` draws it at
- * the leading edge of the top row, so the dismiss control does not move with
- * the keyboard and is not one mis-tap away from the field.
- */
-function PanelsideSearchField({
-  className,
-  containerClassName,
-  placeholder = 'Search',
-  value,
-  onChangeText,
-  ...props
-}) {
-  const {
-    open,
-    query,
-    setQuery,
-    bottomInset
-  } = usePanelsideSearchSheet('Panelside.SearchField');
-  const placeholderTint = useCSSVariable('--color-muted-foreground');
-  const textTint = useCSSVariable('--color-foreground');
-  const muted = typeof placeholderTint === 'string' ? placeholderTint : undefined;
-  const field = useRef(null);
-  const text = value ?? query;
-  const change = onChangeText ?? setQuery;
-
-  /*
-   * Focus on the transition rather than with `autoFocus`. Under `native` the
-   * sheet's content is mounted for the life of the screen and only
-   * `isPresented` changes, so `autoFocus` fires once — at startup, on a sheet
-   * that is not up — and the keyboard opens over whatever is.
-   */
-  useEffect(() => {
-    if (open) field.current?.focus();else field.current?.blur();
-  }, [open]);
-  return /*#__PURE__*/_jsx(KeyboardAvoider, {
-    mode: "dock",
-    active: open,
-    bottomInset: bottomInset,
-    className: "w-full px-4 pb-1",
-    children: /*#__PURE__*/_jsxs(View, {
-      className: cn('h-12 w-full flex-row items-center gap-2 rounded-full border border-border bg-surface px-4 shadow-lg', containerClassName),
-      children: [/*#__PURE__*/_jsx(Glyph, {
-        icon: Search01Icon,
-        size: 17,
-        color: muted
-      }), /*#__PURE__*/_jsx(TextInput, {
-        ref: field,
-        value: text,
-        onChangeText: change,
-        placeholder: placeholder,
-        placeholderTextColor: muted
-        /* `text-[16px]` rather than a `text-*` step — see Panelside.Search. */,
-        className: cn('h-full flex-1 font-normal text-[16px] text-foreground', className),
-        style: typeof textTint === 'string' ? {
-          color: textTint
-        } : undefined,
-        accessibilityRole: "search",
-        returnKeyType: "search",
-        ...props
-      }), text.length > 0 ? /*#__PURE__*/_jsx(AnimatedPressable, {
-        onPress: () => change(''),
-        hitSlop: 8,
-        accessibilityRole: "button",
-        accessibilityLabel: "Clear search",
-        className: "h-5 w-5 items-center justify-center rounded-full bg-muted",
-        children: /*#__PURE__*/_jsx(Glyph, {
-          icon: Cancel01Icon,
-          size: 12,
-          color: muted
-        })
-      }) : null]
-    })
-  });
-}
 PanelsidePanel.displayName = 'Panelside.Panel';
 PanelsideHeader.displayName = 'Panelside.Header';
 PanelsideSearch.displayName = 'Panelside.Search';
@@ -1986,12 +1596,6 @@ PanelsidePages.displayName = 'Panelside.Pages';
 PanelsidePage.displayName = 'Panelside.Page';
 PanelsideTrigger.displayName = 'Panelside.Trigger';
 PanelsideSearchTrigger.displayName = 'Panelside.SearchTrigger';
-PanelsideSearchSheet.displayName = 'Panelside.SearchSheet';
-PanelsideSearchTabs.displayName = 'Panelside.SearchTabs';
-PanelsideSearchTab.displayName = 'Panelside.SearchTab';
-PanelsideSearchResults.displayName = 'Panelside.SearchResults';
-PanelsideSearchResult.displayName = 'Panelside.SearchResult';
-PanelsideSearchField.displayName = 'Panelside.SearchField';
 export const Panelside = Object.assign(PanelsideRoot, {
   Panel: PanelsidePanel,
   Header: PanelsideHeader,
@@ -2011,12 +1615,6 @@ export const Panelside = Object.assign(PanelsideRoot, {
   Pages: PanelsidePages,
   Page: PanelsidePage,
   Trigger: PanelsideTrigger,
-  SearchTrigger: PanelsideSearchTrigger,
-  SearchSheet: PanelsideSearchSheet,
-  SearchTabs: PanelsideSearchTabs,
-  SearchTab: PanelsideSearchTab,
-  SearchResults: PanelsideSearchResults,
-  SearchResult: PanelsideSearchResult,
-  SearchField: PanelsideSearchField
+  SearchTrigger: PanelsideSearchTrigger
 });
 //# sourceMappingURL=index.js.map