@hzblj/kara-components 0.2.1 → 0.4.0

package/lib/module/organisms/context-menu/context-menu.android.js

@@ -3,18 +3,17 @@
 import { Text as ComposeText, DropdownMenu, DropdownMenuItem, Host } from '@expo/ui/jetpack-compose';
 import { useSx } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
-import { useCallback, useState } from 'react';
+import * as Haptics from 'expo-haptics';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
+import { Icon } from "../../atoms/icon/index.js";
+import { HostBoundary } from "../../host-context.js";
+import { splitForRipple } from "../../ripple-clip.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * The menu's anchor: a point at the trigger's bottom start, so the dropdown opens just under it. The host lies outside
- * the touch path — the dropdown is a popup window of its own, which takes its touches regardless.
- */
 const styles = StyleSheet.create({
+  /** A point under the finger: the dropdown opens from it. The menu is a popup window, so nothing clips it. */
   anchor: {
-    bottom: 0,
     height: 1,
-    left: 0,
     position: 'absolute',
     width: 1
   }
@@ -25,26 +24,34 @@ const MenuRow = ({
   onDismiss
 }) => {
   const theme = useAppTheme();
+  const color = action.destructive ? 'content.destructive' : 'content.primary';
   const onClick = useCallback(() => {
     onDismiss();
     action.onPress();
   }, [action, onDismiss]);
-  return /*#__PURE__*/_jsx(DropdownMenuItem, {
+  return /*#__PURE__*/_jsxs(DropdownMenuItem, {
     onClick: onClick,
-    children: /*#__PURE__*/_jsx(DropdownMenuItem.Text, {
+    children: [/*#__PURE__*/_jsx(DropdownMenuItem.Text, {
       children: /*#__PURE__*/_jsx(ComposeText, {
-        color: theme.colorString(action.destructive ? 'content.destructive' : 'content.primary'),
+        color: theme.colorString(color),
         style: theme.typography.body,
         children: action.label
       })
-    })
+    }), action.icon ? /*#__PURE__*/_jsx(DropdownMenuItem.LeadingIcon, {
+      children: /*#__PURE__*/_jsx(Icon, {
+        color: color,
+        name: action.icon,
+        size: "s20"
+      })
+    }) : null]
   });
 };
 
 /**
- * The trigger stays a plain React Native subtree; a long press on it expands a Compose `DropdownMenu` anchored under
- * it. The host behind the menu mounts on the first long press and stays — a list of triggers that are only scrolled
- * past never builds one. `preview` and `onPreviewPress` are iOS-only: Material has no lifted preview.
+ * Android's own take on a context menu, since Material has no lifted preview: a long press ripples the trigger, ticks
+ * the long-press haptic, and opens a Material dropdown where the finger is — the trigger stays highlighted while the
+ * menu is up. The host behind the menu mounts on the first long press and stays, so a list of triggers that are only
+ * scrolled past never builds one. `preview` and `onPreviewPress` are iOS-only.
  */
 const ContextMenuRoot = ({
   actions,
@@ -58,34 +65,72 @@ const ContextMenuRoot = ({
     ...sx
   } = props;
   const theme = useAppTheme();
-  const style = useSx(sx);
-  const [isHostMounted, setIsHostMounted] = useState(false);
+  const resolved = useSx(sx);
+  const trigger = useRef(null);
+  const [anchor, setAnchor] = useState(null);
   const [expanded, setExpanded] = useState(false);
-  const open = useCallback(() => {
-    setIsHostMounted(true);
-    setExpanded(true);
+
+  // The shape clips on an outer view, so the ripple and the highlight follow the trigger's rounded corners.
+  const {
+    inner,
+    outer
+  } = useMemo(() => splitForRipple(resolved), [resolved]);
+  const ripple = useMemo(() => ({
+    color: theme.color('fill.tertiary')
+  }), [theme]);
+  const highlight = useMemo(() => ({
+    backgroundColor: theme.color('fill.tertiary')
+  }), [theme]);
+  const open = useCallback(event => {
+    const {
+      pageX,
+      pageY
+    } = event.nativeEvent;
+    Haptics.performAndroidHapticsAsync(Haptics.AndroidHaptics.Long_Press).catch(() => undefined);
+    // The touch in the trigger's own coordinates: `locationX/Y` are relative to whichever child was touched.
+    trigger.current?.measure((_x, _y, _width, _height, left, top) => {
+      setAnchor({
+        x: pageX - left,
+        y: pageY - top
+      });
+      setExpanded(true);
+    });
   }, []);
   const dismiss = useCallback(() => setExpanded(false), []);
-  return /*#__PURE__*/_jsxs(Pressable, {
-    onLongPress: open,
-    style: style,
-    testID: testID,
-    children: [children, isHostMounted ? /*#__PURE__*/_jsx(Host, {
-      colorScheme: theme.dark ? 'dark' : 'light',
-      pointerEvents: "none",
-      seedColor: theme.materialSeed,
-      style: styles.anchor,
-      children: /*#__PURE__*/_jsx(DropdownMenu, {
-        expanded: expanded,
-        onDismissRequest: dismiss,
-        children: /*#__PURE__*/_jsx(DropdownMenu.Items, {
-          children: actions.map(action => /*#__PURE__*/_jsx(MenuRow, {
-            action: action,
-            onDismiss: dismiss
-          }, action.label))
+  return /*#__PURE__*/_jsx(View, {
+    style: outer,
+    children: /*#__PURE__*/_jsxs(Pressable, {
+      android_ripple: ripple,
+      onLongPress: open,
+      ref: trigger,
+      style: inner,
+      testID: testID,
+      children: [expanded ? /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: [StyleSheet.absoluteFill, highlight]
+      }) : null, children, anchor ? /*#__PURE__*/_jsx(Host, {
+        colorScheme: theme.dark ? 'dark' : 'light',
+        pointerEvents: "none",
+        seedColor: theme.materialSeed,
+        style: [styles.anchor, {
+          left: anchor.x,
+          top: anchor.y
+        }],
+        children: /*#__PURE__*/_jsx(HostBoundary, {
+          children: /*#__PURE__*/_jsx(DropdownMenu, {
+            color: theme.color('surface.primary'),
+            expanded: expanded,
+            onDismissRequest: dismiss,
+            children: /*#__PURE__*/_jsx(DropdownMenu.Items, {
+              children: actions.map(action => /*#__PURE__*/_jsx(MenuRow, {
+                action: action,
+                onDismiss: dismiss
+              }, action.label))
+            })
+          })
         })
-      })
-    }) : null]
+      }) : null]
+    })
   });
 };
 

package/lib/module/organisms/context-menu/context-menu.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Text","ComposeText","DropdownMenu","DropdownMenuItem","Host","useSx","useAppTheme","useCallback","useState","Pressable","StyleSheet","View","jsx","_jsx","jsxs","_jsxs","styles","create","anchor","bottom","height","left","position","width","MenuRow","action","onDismiss","theme","onClick","onPress","children","color","colorString","destructive","style","typography","body","label","ContextMenuRoot","actions","testID","props","onPreviewPress","_onPreviewPress","preview","_preview","sx","isHostMounted","setIsHostMounted","expanded","setExpanded","open","dismiss","onLongPress","colorScheme","dark","pointerEvents","seedColor","materialSeed","onDismissRequest","Items","map","Exclusion","ContextMenu","Object","assign"],"sourceRoot":"../../../../src","sources":["organisms/context-menu/context-menu.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Text","ComposeText","DropdownMenu","DropdownMenuItem","Host","useSx","useAppTheme","Haptics","useCallback","useMemo","useRef","useState","Pressable","StyleSheet","View","Icon","HostBoundary","splitForRipple","jsx","_jsx","jsxs","_jsxs","styles","create","anchor","height","position","width","MenuRow","action","onDismiss","theme","color","destructive","onClick","onPress","children","colorString","style","typography","body","label","icon","LeadingIcon","name","size","ContextMenuRoot","actions","testID","props","onPreviewPress","_onPreviewPress","preview","_preview","sx","resolved","trigger","setAnchor","expanded","setExpanded","inner","outer","ripple","highlight","backgroundColor","open","event","pageX","pageY","nativeEvent","performAndroidHapticsAsync","AndroidHaptics","Long_Press","catch","undefined","current","measure","_x","_y","_width","_height","left","top","x","y","dismiss","android_ripple","onLongPress","ref","pointerEvents","absoluteFill","colorScheme","dark","seedColor","materialSeed","onDismissRequest","Items","map","Exclusion","ContextMenu","Object","assign"],"sourceRoot":"../../../../src","sources":["organisms/context-menu/context-menu.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/organisms/sheet/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
-export * from './sheet';
+export * from "./sheet.js";
 export * from "./sheet.types.js";
+export { useSheetScroll } from "./sheet-scroll.js";
 //# sourceMappingURL=index.js.map

package/lib/module/organisms/sheet/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["organisms/sheet/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,kBAAe","ignoreList":[]}
+{"version":3,"names":["useSheetScroll"],"sourceRoot":"../../../../src","sources":["organisms/sheet/index.ts"],"mappings":";;AAAA,cAAc,YAAS;AACvB,cAAc,kBAAe;AAC7B,SAAQA,cAAc,QAAO,mBAAgB","ignoreList":[]}

package/lib/module/organisms/sheet/sheet-header.js

@@ -0,0 +1,7 @@
+"use strict";
+
+/** A slot, never rendered: `Sheet` reads its props and builds the header into the native sheet's own header area. */
+export const SheetHeader = _props => {
+  throw new Error('[kara-ui] <Sheet.Header> must be a direct child of <Sheet>.');
+};
+//# sourceMappingURL=sheet-header.js.map

package/lib/module/organisms/sheet/sheet-header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SheetHeader","_props","Error"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet-header.tsx"],"mappings":";;AAEA;AACA,OAAO,MAAMA,WAAW,GAAIC,MAAwB,IAAY;EAC9D,MAAM,IAAIC,KAAK,CAAC,6DAA6D,CAAC;AAChF,CAAC","ignoreList":[]}

package/lib/module/organisms/sheet/sheet-scroll.js

@@ -0,0 +1,62 @@
+"use strict";
+
+import { useSx } from '@hzblj/kara-sx';
+import { createContext, useCallback, useContext, useMemo } from 'react';
+import { ScrollView } from 'react-native';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const SheetScrollContext = /*#__PURE__*/createContext(null);
+
+/**
+ * For a scroll view of your own inside a sheet (a `RnFlatList`, say): pad its content by `topInset`, render
+ * `largeTitle` first, and forward `onScroll` — which is what `<Sheet.ScrollView>` does.
+ */
+export const useSheetScroll = () => {
+  const context = useContext(SheetScrollContext);
+  if (context === null) {
+    throw new Error('[kara-ui] useSheetScroll and <Sheet.ScrollView> must be used inside <Sheet>.');
+  }
+  return context;
+};
+const NO_SX = {};
+
+/** The sheet's scrolling body: starts below the header on iOS 26, carries a large title, and reports its scroll. */
+export const SheetScrollView = ({
+  children,
+  content,
+  keyboardShouldPersistTaps,
+  onScroll,
+  testID
+}) => {
+  const {
+    largeTitle,
+    onScroll: onSheetScroll,
+    topInset
+  } = useSheetScroll();
+  const contentStyle = useSx(content ?? NO_SX);
+  // The header's room goes on top of the content's own top padding, not in place of it.
+  const containerStyle = useMemo(() => {
+    if (topInset === 0) {
+      return contentStyle;
+    }
+    const ownTop = typeof contentStyle.paddingTop === 'number' ? contentStyle.paddingTop : 0;
+    return [contentStyle, {
+      paddingTop: topInset + ownTop
+    }];
+  }, [contentStyle, topInset]);
+  const handleScroll = useCallback(event => {
+    onSheetScroll?.(event);
+    onScroll?.(event);
+  }, [onScroll, onSheetScroll]);
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    contentContainerStyle: containerStyle,
+    contentInsetAdjustmentBehavior: "never",
+    keyboardShouldPersistTaps: keyboardShouldPersistTaps,
+    nestedScrollEnabled: true,
+    onScroll: onSheetScroll || onScroll ? handleScroll : undefined,
+    overScrollMode: "always",
+    scrollEventThrottle: 16,
+    testID: testID,
+    children: [largeTitle, children]
+  });
+};
+//# sourceMappingURL=sheet-scroll.js.map

package/lib/module/organisms/sheet/sheet-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSx","createContext","useCallback","useContext","useMemo","ScrollView","jsxs","_jsxs","SheetScrollContext","useSheetScroll","context","Error","NO_SX","SheetScrollView","children","content","keyboardShouldPersistTaps","onScroll","testID","largeTitle","onSheetScroll","topInset","contentStyle","containerStyle","ownTop","paddingTop","handleScroll","event","contentContainerStyle","contentInsetAdjustmentBehavior","nestedScrollEnabled","undefined","overScrollMode","scrollEventThrottle"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet-scroll.tsx"],"mappings":";;AAAA,SAAQA,KAAK,QAAO,gBAAgB;AACpC,SAAQC,aAAa,EAAEC,WAAW,EAAEC,UAAU,EAAEC,OAAO,QAAO,OAAO;AACrE,SAAQC,UAAU,QAAO,cAAc;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIvC,OAAO,MAAMC,kBAAkB,gBAAGP,aAAa,CAAiC,IAAI,CAAC;;AAErF;AACA;AACA;AACA;AACA,OAAO,MAAMQ,cAAc,GAAGA,CAAA,KAA+B;EAC3D,MAAMC,OAAO,GAAGP,UAAU,CAACK,kBAAkB,CAAC;EAE9C,IAAIE,OAAO,KAAK,IAAI,EAAE;IACpB,MAAM,IAAIC,KAAK,CAAC,8EAA8E,CAAC;EACjG;EAEA,OAAOD,OAAO;AAChB,CAAC;AAED,MAAME,KAAK,GAAG,CAAC,CAAC;;AAEhB;AACA,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAC9BC,QAAQ;EACRC,OAAO;EACPC,yBAAyB;EACzBC,QAAQ;EACRC;AACoB,CAAC,KAAK;EAC1B,MAAM;IAACC,UAAU;IAAEF,QAAQ,EAAEG,aAAa;IAAEC;EAAQ,CAAC,GAAGZ,cAAc,CAAC,CAAC;EACxE,MAAMa,YAAY,GAAGtB,KAAK,CAACe,OAAO,IAAIH,KAAK,CAAC;EAC5C;EACA,MAAMW,cAAc,GAAGnB,OAAO,CAAC,MAAM;IACnC,IAAIiB,QAAQ,KAAK,CAAC,EAAE;MAClB,OAAOC,YAAY;IACrB;IAEA,MAAME,MAAM,GAAG,OAAOF,YAAY,CAACG,UAAU,KAAK,QAAQ,GAAGH,YAAY,CAACG,UAAU,GAAG,CAAC;IAExF,OAAO,CAACH,YAAY,EAAE;MAACG,UAAU,EAAEJ,QAAQ,GAAGG;IAAM,CAAC,CAAC;EACxD,CAAC,EAAE,CAACF,YAAY,EAAED,QAAQ,CAAC,CAAC;EAE5B,MAAMK,YAAY,GAAGxB,WAAW,CAC9ByB,KAAK,IAAI;IACPP,aAAa,GAAGO,KAAK,CAAC;IACtBV,QAAQ,GAAGU,KAAK,CAAC;EACnB,CAAC,EACD,CAACV,QAAQ,EAAEG,aAAa,CAC1B,CAAC;EAED,oBACEb,KAAA,CAACF,UAAU;IACTuB,qBAAqB,EAAEL,cAAe;IACtCM,8BAA8B,EAAC,OAAO;IACtCb,yBAAyB,EAAEA,yBAA0B;IACrDc,mBAAmB;IACnBb,QAAQ,EAAEG,aAAa,IAAIH,QAAQ,GAAGS,YAAY,GAAGK,SAAU;IAC/DC,cAAc,EAAC,QAAQ;IACvBC,mBAAmB,EAAE,EAAG;IACxBf,MAAM,EAAEA,MAAO;IAAAJ,QAAA,GAEdK,UAAU,EACVL,QAAQ;EAAA,CACC,CAAC;AAEjB,CAAC","ignoreList":[]}

package/lib/module/organisms/sheet/sheet.js

@@ -0,0 +1,136 @@
+"use strict";
+
+import { useAppTheme } from '@hzblj/kara-theme';
+import { TrueSheet } from '@lodev09/react-native-true-sheet';
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { SheetHeader } from "./sheet-header.js";
+import { SheetScrollContext, SheetScrollView } from "./sheet-scroll.js";
+import { splitSheetChildren } from "./split-sheet-children.js";
+import { useSheetHeader } from "./use-sheet-header.js";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const FIT_CONTENT = ['auto'];
+
+/** Material's extra-large shape for a bottom sheet; iOS keeps the system's own, which follows the device's corners. */
+const CORNER_RADIUS = Platform.OS === 'android' ? 28 : undefined;
+
+/** Keeps the sheet's own native view out of the layout it is declared in. */
+const styles = StyleSheet.create({
+  host: {
+    position: 'absolute'
+  }
+});
+const SheetRoot = ({
+  bg = 'surface.primary',
+  children,
+  detents = FIT_CONTENT,
+  dimmed = true,
+  dismissible = true,
+  draggable = true,
+  footer,
+  grabber = true,
+  onDetentChange,
+  onDismiss,
+  onPresent,
+  ref,
+  scrollable = false,
+  testID,
+  visible
+}) => {
+  const theme = useAppTheme();
+  const {
+    content,
+    header: headerProps
+  } = useMemo(() => splitSheetChildren(children), [children]);
+  const sheetHeader = useSheetHeader({
+    header: headerProps,
+    scrollable
+  });
+  const sheetRef = useRef(null);
+  const presented = useRef(false);
+  /** A dismissal we asked for: `onDismiss` reports the user's, never ours. */
+  const programmaticDismiss = useRef(false);
+  useImperativeHandle(ref, () => ({
+    dismiss: () => {
+      presented.current = false;
+      programmaticDismiss.current = true;
+      return sheetRef.current?.dismiss() ?? Promise.resolve();
+    },
+    present: detentIndex => {
+      presented.current = true;
+      return sheetRef.current?.present(detentIndex) ?? Promise.resolve();
+    },
+    resize: detentIndex => sheetRef.current?.resize(detentIndex) ?? Promise.resolve()
+  }), []);
+  useEffect(() => {
+    if (visible && !presented.current) {
+      presented.current = true;
+      void sheetRef.current?.present();
+    } else if (!visible && presented.current) {
+      presented.current = false;
+      programmaticDismiss.current = true;
+      void sheetRef.current?.dismiss();
+    }
+  }, [visible]);
+
+  // A sheet unmounted while presented would otherwise stay on screen, blocking everything under it.
+  useLayoutEffect(() => {
+    const sheet = sheetRef.current;
+    return () => {
+      if (!presented.current) {
+        return;
+      }
+      presented.current = false;
+      programmaticDismiss.current = true;
+      void sheet?.dismiss();
+    };
+  }, []);
+  const handleDidDismiss = useCallback(() => {
+    presented.current = false;
+    if (programmaticDismiss.current) {
+      programmaticDismiss.current = false;
+      return;
+    }
+    onDismiss();
+  }, [onDismiss]);
+  const handleDetentChange = useCallback(event => onDetentChange?.(event.nativeEvent.index), [onDetentChange]);
+  return /*#__PURE__*/_jsx(View, {
+    collapsable: false,
+    pointerEvents: "box-none",
+    style: styles.host,
+    children: /*#__PURE__*/_jsx(TrueSheet, {
+      backgroundColor: theme.color(bg),
+      cornerRadius: CORNER_RADIUS,
+      detents: detents,
+      dimmed: dimmed,
+      dismissible: dismissible,
+      draggable: draggable,
+      footer: footer,
+      grabber: grabber,
+      header: sheetHeader.header,
+      headerStyle: sheetHeader.headerStyle,
+      onDetentChange: handleDetentChange,
+      onDidDismiss: handleDidDismiss,
+      onDidPresent: onPresent,
+      ref: sheetRef,
+      scrollable: scrollable,
+      scrollableOptions: sheetHeader.scrollableOptions,
+      testID: testID,
+      children: /*#__PURE__*/_jsxs(SheetScrollContext.Provider, {
+        value: sheetHeader.scrollContext,
+        children: [sheetHeader.staticLargeTitle, content]
+      })
+    })
+  });
+};
+
+/**
+ * A native sheet with an optional native header. `visible` presents and dismisses it; a swipe or a tap outside calls
+ * `onDismiss`, which should set `visible` back. `<Sheet.Header>` (a direct child) gives it a bar with a title and
+ * items; `<Sheet.ScrollView>` is the body of a `scrollable` sheet.
+ */
+export const Sheet = Object.assign(SheetRoot, {
+  Header: SheetHeader,
+  ScrollView: SheetScrollView
+});
+//# sourceMappingURL=sheet.js.map

package/lib/module/organisms/sheet/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useAppTheme","TrueSheet","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","Platform","StyleSheet","View","SheetHeader","SheetScrollContext","SheetScrollView","splitSheetChildren","useSheetHeader","jsxs","_jsxs","jsx","_jsx","FIT_CONTENT","CORNER_RADIUS","OS","undefined","styles","create","host","position","SheetRoot","bg","children","detents","dimmed","dismissible","draggable","footer","grabber","onDetentChange","onDismiss","onPresent","ref","scrollable","testID","visible","theme","content","header","headerProps","sheetHeader","sheetRef","presented","programmaticDismiss","dismiss","current","Promise","resolve","present","detentIndex","resize","sheet","handleDidDismiss","handleDetentChange","event","nativeEvent","index","collapsable","pointerEvents","style","backgroundColor","color","cornerRadius","headerStyle","onDidDismiss","onDidPresent","scrollableOptions","Provider","value","scrollContext","staticLargeTitle","Sheet","Object","assign","Header","ScrollView"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/organisms/sheet/split-sheet-children.js

@@ -0,0 +1,21 @@
+"use strict";
+
+import { Children, isValidElement } from 'react';
+import { SheetHeader } from "./sheet-header.js";
+const isSheetHeader = child => /*#__PURE__*/isValidElement(child) && child.type === SheetHeader;
+
+/** Takes `<Sheet.Header>` out of the children: its props become the native header, the rest is the content. */
+export const splitSheetChildren = children => {
+  const nodes = Children.toArray(children);
+  const header = nodes.find(isSheetHeader);
+  if (!header) {
+    return {
+      content: children
+    };
+  }
+  return {
+    content: nodes.filter(node => node !== header),
+    header: header.props
+  };
+};
+//# sourceMappingURL=split-sheet-children.js.map

package/lib/module/organisms/sheet/split-sheet-children.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","isValidElement","SheetHeader","isSheetHeader","child","type","splitSheetChildren","children","nodes","toArray","header","find","content","filter","node","props"],"sourceRoot":"../../../../src","sources":["organisms/sheet/split-sheet-children.ts"],"mappings":";;AAAA,SAAQA,QAAQ,EAAEC,cAAc,QAA0C,OAAO;AAEjF,SAAQC,WAAW,QAAO,mBAAgB;AAO1C,MAAMC,aAAa,GAAIC,KAAgB,IACrC,aAAAH,cAAc,CAACG,KAAK,CAAC,IAAIA,KAAK,CAACC,IAAI,KAAKH,WAAW;;AAErD;AACA,OAAO,MAAMI,kBAAkB,GAAIC,QAAmB,IAAoB;EACxE,MAAMC,KAAK,GAAGR,QAAQ,CAACS,OAAO,CAACF,QAAQ,CAAC;EACxC,MAAMG,MAAM,GAAGF,KAAK,CAACG,IAAI,CAACR,aAAa,CAAC;EAExC,IAAI,CAACO,MAAM,EAAE;IACX,OAAO;MAACE,OAAO,EAAEL;IAAQ,CAAC;EAC5B;EAEA,OAAO;IAACK,OAAO,EAAEJ,KAAK,CAACK,MAAM,CAACC,IAAI,IAAIA,IAAI,KAAKJ,MAAM,CAAC;IAAEA,MAAM,EAAEA,MAAM,CAACK;EAAK,CAAC;AAC/E,CAAC","ignoreList":[]}

package/lib/module/organisms/sheet/use-sheet-header.js

@@ -0,0 +1,118 @@
+"use strict";
+
+import { isScrollEdgeEffectAvailable } from '@hzblj/kara-native';
+import { spacing } from '@hzblj/kara-theme';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Platform } from 'react-native';
+import { Box } from "../../atoms/box/index.js";
+import { RnText } from "../../atoms/rn-text/index.js";
+import { NavigationBar } from "../../molecules/navigation-bar/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The bar's own height (`NavigationBar`) plus the room above it, before the header has been measured. */
+const ESTIMATED_HEADER_HEIGHT = (Platform.OS === 'ios' ? 56 : 64) + spacing.s16;
+
+/** Where a large title's bar title appears once it has scrolled away: the platform's own place for it. */
+const COLLAPSED_TITLE_ALIGNMENT = Platform.OS === 'ios' ? 'center' : 'leading';
+
+/** Lays the header over the content so the content can scroll under it — the edge effect needs it there. */
+const OVERLAY_HEADER_STYLE = {
+  left: 0,
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  zIndex: 1
+};
+const SOFT_EDGE_EFFECTS = {
+  bottomScrollEdgeEffect: 'soft',
+  topScrollEdgeEffect: 'soft'
+};
+const SheetLargeTitle = ({
+  onLayout,
+  title
+}) => /*#__PURE__*/_jsx(Box, {
+  onLayout: onLayout,
+  pb: "s8",
+  pt: "s8",
+  px: "s16",
+  children: /*#__PURE__*/_jsx(RnText, {
+    accessibilityRole: "header",
+    variant: "headingM",
+    children: title
+  })
+});
+
+/**
+ * Turns `<Sheet.Header>`'s props into what the native sheet takes: its header element, how that is laid out, the scroll
+ * edge effects, and the context a `<Sheet.ScrollView>` reads. On iOS 26 a scrollable sheet's header is laid over the
+ * content (which is then inset by the header's measured height) so the system's soft edge blurs what scrolls under it;
+ * everywhere else the header simply sits above the content.
+ */
+export const useSheetHeader = ({
+  header: headerProps,
+  scrollable
+}) => {
+  const title = headerProps?.title;
+  const titleStyle = headerProps?.titleStyle ?? 'center';
+  const leadingItems = headerProps?.leadingItems;
+  const trailingItems = headerProps?.trailingItems;
+  const inverted = headerProps?.inverted;
+  const search = headerProps?.search;
+  const accessory = headerProps?.children;
+  const hasBar = title !== undefined || !!leadingItems?.length || !!trailingItems?.length || !!search;
+  const hasHeader = hasBar || !!accessory;
+  const isOverlay = isScrollEdgeEffectAvailable() && hasHeader && scrollable;
+  const isLargeTitle = titleStyle === 'large' && !!title;
+  const [headerHeight, setHeaderHeight] = useState(hasBar ? ESTIMATED_HEADER_HEIGHT : 0);
+  const [largeTitleScrolledAway, setLargeTitleScrolledAway] = useState(false);
+  const largeTitleHeight = useRef(0);
+  const handleHeaderLayout = useCallback(event => {
+    setHeaderHeight(event.nativeEvent.layout.height);
+  }, []);
+  const handleLargeTitleLayout = useCallback(event => {
+    largeTitleHeight.current = event.nativeEvent.layout.height;
+  }, []);
+  const handleScroll = useCallback(event => {
+    if (largeTitleHeight.current === 0) {
+      return;
+    }
+    setLargeTitleScrolledAway(event.nativeEvent.contentOffset.y >= largeTitleHeight.current);
+  }, []);
+  const titleAlignment = titleStyle === 'large' ? COLLAPSED_TITLE_ALIGNMENT : titleStyle;
+  const titleVisible = !isLargeTitle || scrollable && largeTitleScrolledAway;
+  const headerElement = useMemo(() => {
+    if (!hasHeader) {
+      return undefined;
+    }
+    return /*#__PURE__*/_jsxs(Box, {
+      onLayout: isOverlay ? handleHeaderLayout : undefined,
+      pt: "s16",
+      children: [hasBar ? /*#__PURE__*/_jsx(NavigationBar, {
+        inverted: inverted,
+        leadingItems: leadingItems,
+        search: search,
+        title: title,
+        titleAlignment: titleAlignment,
+        titleVisible: titleVisible,
+        trailingItems: trailingItems
+      }) : null, accessory]
+    });
+  }, [accessory, handleHeaderLayout, hasBar, hasHeader, inverted, isOverlay, leadingItems, search, title, titleAlignment, titleVisible, trailingItems]);
+  const largeTitle = useMemo(() => title && isLargeTitle ? /*#__PURE__*/_jsx(SheetLargeTitle, {
+    onLayout: handleLargeTitleLayout,
+    title: title
+  }) : null, [handleLargeTitleLayout, isLargeTitle, title]);
+  const scrollContext = useMemo(() => ({
+    largeTitle: scrollable ? largeTitle : null,
+    onScroll: scrollable && isLargeTitle ? handleScroll : undefined,
+    topInset: isOverlay ? headerHeight : 0
+  }), [handleScroll, headerHeight, isLargeTitle, isOverlay, largeTitle, scrollable]);
+  return {
+    header: headerElement,
+    headerStyle: isOverlay ? OVERLAY_HEADER_STYLE : undefined,
+    scrollableOptions: isOverlay ? SOFT_EDGE_EFFECTS : undefined,
+    scrollContext,
+    /** Without a scroll view to carry it, a large title simply leads the content. */
+    staticLargeTitle: scrollable ? null : largeTitle
+  };
+};
+//# sourceMappingURL=use-sheet-header.js.map

package/lib/module/organisms/sheet/use-sheet-header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isScrollEdgeEffectAvailable","spacing","useCallback","useMemo","useRef","useState","Platform","Box","RnText","NavigationBar","jsx","_jsx","jsxs","_jsxs","ESTIMATED_HEADER_HEIGHT","OS","s16","COLLAPSED_TITLE_ALIGNMENT","OVERLAY_HEADER_STYLE","left","position","right","top","zIndex","SOFT_EDGE_EFFECTS","bottomScrollEdgeEffect","topScrollEdgeEffect","SheetLargeTitle","onLayout","title","pb","pt","px","children","accessibilityRole","variant","useSheetHeader","header","headerProps","scrollable","titleStyle","leadingItems","trailingItems","inverted","search","accessory","hasBar","undefined","length","hasHeader","isOverlay","isLargeTitle","headerHeight","setHeaderHeight","largeTitleScrolledAway","setLargeTitleScrolledAway","largeTitleHeight","handleHeaderLayout","event","nativeEvent","layout","height","handleLargeTitleLayout","current","handleScroll","contentOffset","y","titleAlignment","titleVisible","headerElement","largeTitle","scrollContext","onScroll","topInset","headerStyle","scrollableOptions","staticLargeTitle"],"sourceRoot":"../../../../src","sources":["organisms/sheet/use-sheet-header.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ripple-clip.js

@@ -0,0 +1,36 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+
+/** What lays out a view's children — it goes on the pressable inside, so the content sits where the caller put it. */
+const CONTENT_KEYS = new Set(['alignContent', 'alignItems', 'columnGap', 'flexDirection', 'flexWrap', 'gap', 'justifyContent', 'padding', 'paddingBottom', 'paddingEnd', 'paddingHorizontal', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'paddingVertical', 'rowGap']);
+const FILL = {
+  flexGrow: 1
+};
+
+/**
+ * Splits a resolved style for a pressable with an Android ripple. The ripple is drawn as the pressable's foreground,
+ * which its own `overflow: hidden` does not clip — so it would spill past rounded corners. A parent clips its
+ * children's foregrounds, though: the outer view takes the shape, background, border and outer layout and clips; the
+ * pressable inside takes the padding and the content layout and fills it, so the ripple covers the whole card and
+ * stops at its corners.
+ */
+export const splitForRipple = style => {
+  const flat = StyleSheet.flatten(style) ?? {};
+  const outer = {
+    overflow: 'hidden'
+  };
+  const inner = {};
+  for (const [key, value] of Object.entries(flat)) {
+    if (CONTENT_KEYS.has(key)) {
+      inner[key] = value;
+    } else if (key !== 'overflow') {
+      outer[key] = value;
+    }
+  }
+  return {
+    inner: [FILL, inner],
+    outer: outer
+  };
+};
+//# sourceMappingURL=ripple-clip.js.map

package/lib/module/ripple-clip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","CONTENT_KEYS","Set","FILL","flexGrow","splitForRipple","style","flat","flatten","outer","overflow","inner","key","value","Object","entries","has"],"sourceRoot":"../../src","sources":["ripple-clip.ts"],"mappings":";;AAAA,SAAQA,UAAU,QAAuB,cAAc;;AAEvD;AACA,MAAMC,YAAY,GAAG,IAAIC,GAAG,CAAS,CACnC,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,QAAQ,CACT,CAAC;AAEF,MAAMC,IAAe,GAAG;EAACC,QAAQ,EAAE;AAAC,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAIC,KAA4B,IAA6C;EACtG,MAAMC,IAAI,GAAGP,UAAU,CAACQ,OAAO,CAACF,KAAK,CAAC,IAAI,CAAC,CAAC;EAC5C,MAAMG,KAA8B,GAAG;IAACC,QAAQ,EAAE;EAAQ,CAAC;EAC3D,MAAMC,KAA8B,GAAG,CAAC,CAAC;EAEzC,KAAK,MAAM,CAACC,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACR,IAAI,CAAC,EAAE;IAC/C,IAAIN,YAAY,CAACe,GAAG,CAACJ,GAAG,CAAC,EAAE;MACzBD,KAAK,CAACC,GAAG,CAAC,GAAGC,KAAK;IACpB,CAAC,MAAM,IAAID,GAAG,KAAK,UAAU,EAAE;MAC7BH,KAAK,CAACG,GAAG,CAAC,GAAGC,KAAK;IACpB;EACF;EAEA,OAAO;IAACF,KAAK,EAAE,CAACR,IAAI,EAAEQ,KAAK,CAAc;IAAEF,KAAK,EAAEA;EAAkB,CAAC;AACvE,CAAC","ignoreList":[]}