@hzblj/kara-components 0.15.3 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @hzblj/kara-components
 
+## 0.17.0
+
+### Minor Changes
+
+- [#54](https://github.com/hzblj/kara-ui/pull/54) [`76f14b5`](https://github.com/hzblj/kara-ui/commit/76f14b5e71bdbb8fb431502a987e776243015177) Thanks [@hzblj](https://github.com/hzblj)! - `Picker` takes `pickerStyle` on iOS: `wheel`, as before and still the default, or `menu`, a button with the selection, in the accent, that opens the options as a menu. A screen with more than one picker, or a picker in a row, no longer has to give the screen to wheels. Android ignores it: its exposed dropdown is a menu already.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @hzblj/kara-theme@0.17.0
+  - @hzblj/kara-sx@0.17.0
+  - @hzblj/kara-native@0.17.0
+
+## 0.16.0
+
+### Minor Changes
+
+- [#49](https://github.com/hzblj/kara-ui/pull/49) [`1b82690`](https://github.com/hzblj/kara-ui/commit/1b826908a729399b4b9ef8038836b60539d1fa41) Thanks [@hzblj](https://github.com/hzblj)! - A tapped `ContextMenu` preview can morph into a screen that is already loaded, the way Apple's apps open a preview. Preload the detail in the new `onOpenChange` (React Navigation's `preload`) and pass its route key as `preloadedScreenId`: the screen is pushed natively in the same frame, and with `zoom` the whole preview grows into it, rounded and shadowed like the menu's platter, while the menu fades away. `pop` and `dismiss` push it as soon as UIKit's commit animation ends. Uses `@hzblj/expo-zoom-transition` 0.2.
+
+### Patch Changes
+
+- Updated dependencies [[`1b82690`](https://github.com/hzblj/kara-ui/commit/1b826908a729399b4b9ef8038836b60539d1fa41)]:
+  - @hzblj/kara-native@0.16.0
+  - @hzblj/kara-sx@0.16.0
+  - @hzblj/kara-theme@0.16.0
+
+## 0.15.4
+
+### Patch Changes
+
+- Updated dependencies [[`15aa9db`](https://github.com/hzblj/kara-ui/commit/15aa9db0b1c22dd4a55cb301982643449ad28dd0)]:
+  - @hzblj/kara-native@0.15.4
+  - @hzblj/kara-theme@0.15.4
+  - @hzblj/kara-sx@0.15.4
+
 ## 0.15.3
 
 ### Patch Changes

package/lib/module/atoms/picker/picker.ios.js

@@ -1,39 +1,51 @@
 "use strict";
 
 import { Picker as NativePicker } from '@expo/ui/community/picker';
-import { Picker as SwiftUIPicker, Text as SwiftUIText } from '@expo/ui/swift-ui';
-import { disabled as disabledModifier, foregroundStyle, pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';
+import { Host, Picker as SwiftUIPicker, Text as SwiftUIText } from '@expo/ui/swift-ui';
+import { disabled as disabledModifier, foregroundStyle, pickerStyle as pickerStyleModifier, tag, tint } from '@expo/ui/swift-ui/modifiers';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useCallback, useMemo } from 'react';
 import { useInsideHost } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * A SwiftUI wheel. On its own it is `@expo/ui`'s community picker, which brings a host of its own. Inside a `Screen` or
- * `Island` it is the same wheel rendered into that host instead (see `useInsideHost`): a host nested in the island's
- * stack is given no height there, and the wheel spills over the views around it.
+ * A SwiftUI picker: a wheel, or with `pickerStyle="menu"` a button with the selection that opens the options as a
+ * menu, in the accent. On its own the wheel is `@expo/ui`'s community picker, which brings a host of its own, and the
+ * menu sits in a host sized to its button on both axes, as the date picker's pill does, so it drops into a row the way
+ * a `Text` does. Inside a `Screen` or `Island` either renders into that host instead (see `useInsideHost`): a host
+ * nested in the island's stack is given no height there, and the wheel spills over the views around it.
  */
 export const Picker = ({
   disabled = false,
   onValueChange,
   options,
+  pickerStyle = 'wheel',
   testID,
   value
 }) => {
   const theme = useAppTheme();
   const insideHost = useInsideHost();
   const color = theme.colorString('content.primary');
+  const menu = pickerStyle === 'menu';
   const onChange = useCallback(next => onValueChange?.(String(next)), [onValueChange]);
-  const wheelModifiers = useMemo(() => [pickerStyle('wheel'), ...(disabled ? [disabledModifier(true)] : [])], [disabled]);
+  const modifiers = useMemo(() => [pickerStyleModifier(pickerStyle), ...(menu ? [tint(theme.color('fill.accent.primary'))] : []), ...(disabled ? [disabledModifier(true)] : [])], [disabled, menu, pickerStyle, theme]);
+  const picker = /*#__PURE__*/_jsx(SwiftUIPicker, {
+    modifiers: modifiers,
+    onSelectionChange: onChange,
+    selection: value,
+    testID: testID,
+    children: options.map(option => /*#__PURE__*/_jsx(SwiftUIText, {
+      modifiers: [tag(option.value), foregroundStyle(color)],
+      children: option.label
+    }, option.value))
+  });
   if (insideHost) {
-    return /*#__PURE__*/_jsx(SwiftUIPicker, {
-      modifiers: wheelModifiers,
-      onSelectionChange: onChange,
-      selection: value,
-      testID: testID,
-      children: options.map(option => /*#__PURE__*/_jsx(SwiftUIText, {
-        modifiers: [tag(option.value), foregroundStyle(color)],
-        children: option.label
-      }, option.value))
+    return picker;
+  }
+  if (menu) {
+    return /*#__PURE__*/_jsx(Host, {
+      colorScheme: theme.dark ? 'dark' : 'light',
+      matchContents: true,
+      children: picker
     });
   }
   return /*#__PURE__*/_jsx(NativePicker, {

package/lib/module/atoms/picker/picker.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Picker","NativePicker","SwiftUIPicker","Text","SwiftUIText","disabled","disabledModifier","foregroundStyle","pickerStyle","tag","useAppTheme","useCallback","useMemo","useInsideHost","jsx","_jsx","onValueChange","options","testID","value","theme","insideHost","color","colorString","onChange","next","String","wheelModifiers","modifiers","onSelectionChange","selection","children","map","option","label","enabled","selectedValue","Item"],"sourceRoot":"../../../../src","sources":["atoms/picker/picker.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,YAAY,QAAO,2BAA2B;AAChE,SAAQD,MAAM,IAAIE,aAAa,EAAEC,IAAI,IAAIC,WAAW,QAAO,mBAAmB;AAC9E,SAAQC,QAAQ,IAAIC,gBAAgB,EAAEC,eAAe,EAAEC,WAAW,EAAEC,GAAG,QAAO,6BAA6B;AAC3G,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAE1C,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMf,MAAuB,GAAGA,CAAC;EAACK,QAAQ,GAAG,KAAK;EAAEW,aAAa;EAAEC,OAAO;EAAEC,MAAM;EAAEC;AAAkB,CAAC,KAAK;EACjH,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,UAAU,GAAGR,aAAa,CAAC,CAAC;EAClC,MAAMS,KAAK,GAAGF,KAAK,CAACG,WAAW,CAAC,iBAAiB,CAAC;EAElD,MAAMC,QAAQ,GAAGb,WAAW,CAAEc,IAA4B,IAAKT,aAAa,GAAGU,MAAM,CAACD,IAAI,CAAC,CAAC,EAAE,CAACT,aAAa,CAAC,CAAC;EAC9G,MAAMW,cAAc,GAAGf,OAAO,CAC5B,MAAM,CAACJ,WAAW,CAAC,OAAO,CAAC,EAAE,IAAIH,QAAQ,GAAG,CAACC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAC3E,CAACD,QAAQ,CACX,CAAC;EAED,IAAIgB,UAAU,EAAE;IACd,oBACEN,IAAA,CAACb,aAAa;MAAC0B,SAAS,EAAED,cAAe;MAACE,iBAAiB,EAAEL,QAAS;MAACM,SAAS,EAAEX,KAAM;MAACD,MAAM,EAAEA,MAAO;MAAAa,QAAA,EACrGd,OAAO,CAACe,GAAG,CAACC,MAAM,iBACjBlB,IAAA,CAACX,WAAW;QAAoBwB,SAAS,EAAE,CAACnB,GAAG,CAACwB,MAAM,CAACd,KAAK,CAAC,EAAEZ,eAAe,CAACe,KAAK,CAAC,CAAE;QAAAS,QAAA,EACpFE,MAAM,CAACC;MAAK,GADGD,MAAM,CAACd,KAEZ,CACd;IAAC,CACW,CAAC;EAEpB;EAEA,oBACEJ,IAAA,CAACd,YAAY;IAACkC,OAAO,EAAE,CAAC9B,QAAS;IAACW,aAAa,EAAEQ,QAAS;IAACY,aAAa,EAAEjB,KAAM;IAACD,MAAM,EAAEA,MAAO;IAAAa,QAAA,EAC7Fd,OAAO,CAACe,GAAG,CAACC,MAAM,iBACjBlB,IAAA,CAACd,YAAY,CAACoC,IAAI;MAACf,KAAK,EAAEA,KAAM;MAAoBY,KAAK,EAAED,MAAM,CAACC,KAAM;MAACf,KAAK,EAAEc,MAAM,CAACd;IAAM,GAAvDc,MAAM,CAACd,KAAkD,CAChG;EAAC,CACU,CAAC;AAEnB,CAAC","ignoreList":[]}
+{"version":3,"names":["Picker","NativePicker","Host","SwiftUIPicker","Text","SwiftUIText","disabled","disabledModifier","foregroundStyle","pickerStyle","pickerStyleModifier","tag","tint","useAppTheme","useCallback","useMemo","useInsideHost","jsx","_jsx","onValueChange","options","testID","value","theme","insideHost","color","colorString","menu","onChange","next","String","modifiers","picker","onSelectionChange","selection","children","map","option","label","colorScheme","dark","matchContents","enabled","selectedValue","Item"],"sourceRoot":"../../../../src","sources":["atoms/picker/picker.ios.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -51,7 +51,8 @@ const MenuRow = ({
  * 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`, `onPreviewPress` and `previewTransition` are iOS-only.
+ * scrolled past never builds one. `preview`, `onPreviewPress`, `previewTransition`, `onOpenChange` and
+ * `preloadedScreenId` are iOS-only.
  */
 const ContextMenuRoot = ({
   actions,
@@ -60,7 +61,9 @@ const ContextMenuRoot = ({
   ...props
 }) => {
   const {
+    onOpenChange: _onOpenChange,
     onPreviewPress: _onPreviewPress,
+    preloadedScreenId: _preloadedScreenId,
     preview: _preview,
     previewTransition: _previewTransition,
     ...sx

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

@@ -1 +1 @@
-{"version":3,"names":["Text","ComposeText","DropdownMenu","DropdownMenuItem","Host","haptics","useSx","useAppTheme","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","previewTransition","_previewTransition","sx","resolved","trigger","setAnchor","expanded","setExpanded","inner","outer","ripple","highlight","backgroundColor","open","event","pageX","pageY","nativeEvent","longPress","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":[]}
+{"version":3,"names":["Text","ComposeText","DropdownMenu","DropdownMenuItem","Host","haptics","useSx","useAppTheme","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","onOpenChange","_onOpenChange","onPreviewPress","_onPreviewPress","preloadedScreenId","_preloadedScreenId","preview","_preview","previewTransition","_previewTransition","sx","resolved","trigger","setAnchor","expanded","setExpanded","inner","outer","ripple","highlight","backgroundColor","open","event","pageX","pageY","nativeEvent","longPress","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/context-menu/context-menu.ios.js

@@ -8,7 +8,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const ContextMenuRoot = ({
   actions,
   children,
+  onOpenChange,
   onPreviewPress,
+  preloadedScreenId,
   preview,
   previewTransition,
   testID,
@@ -24,10 +26,19 @@ const ContextMenuRoot = ({
     title: action.label
   })), [actions]);
   const onSelectItem = useCallback(id => actions[Number(id)]?.onPress(), [actions]);
+  const onMenuOpen = useCallback(() => onOpenChange?.(true), [onOpenChange]);
+  const onMenuClose = useCallback(isCommitted => {
+    if (!isCommitted) {
+      onOpenChange?.(false);
+    }
+  }, [onOpenChange]);
   return /*#__PURE__*/_jsx(NativeContextMenu, {
     items: items,
+    onMenuClose: onOpenChange ? onMenuClose : undefined,
+    onMenuOpen: onOpenChange ? onMenuOpen : undefined,
     onPreviewPress: onPreviewPress,
     onSelectItem: onSelectItem,
+    preloadedScreenId: preloadedScreenId,
     preview: preview,
     previewTransition: previewTransition,
     style: style,

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

@@ -1 +1 @@
-{"version":3,"names":["iconResourceName","ContextMenu","NativeContextMenu","ContextMenuExclusion","NativeContextMenuExclusion","useSx","useCallback","useMemo","jsx","_jsx","ContextMenuRoot","actions","children","onPreviewPress","preview","previewTransition","testID","sx","style","items","map","action","index","destructive","id","String","image","icon","undefined","title","label","onSelectItem","Number","onPress","Exclusion","Object","assign"],"sourceRoot":"../../../../src","sources":["organisms/context-menu/context-menu.ios.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,0BAA0B;AACzD,SAEEC,WAAW,IAAIC,iBAAiB,EAChCC,oBAAoB,IAAIC,0BAA0B,QAC7C,6BAA6B;AACpC,SAAQC,KAAK,QAAO,gBAAgB;AACpC,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG1C,MAAMC,eAAe,GAAGA,CAAC;EACvBC,OAAO;EACPC,QAAQ;EACRC,cAAc;EACdC,OAAO;EACPC,iBAAiB;EACjBC,MAAM;EACN,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,KAAK,GAAGb,KAAK,CAACY,EAAE,CAAC;;EAEvB;EACA,MAAME,KAAK,GAAGZ,OAAO,CACnB,MACEI,OAAO,CAACS,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,MAAM;IAC9BC,WAAW,EAAEF,MAAM,CAACE,WAAW;IAC/BC,EAAE,EAAEC,MAAM,CAACH,KAAK,CAAC;IACjBI,KAAK,EAAEL,MAAM,CAACM,IAAI,GAAG3B,gBAAgB,CAACqB,MAAM,CAACM,IAAI,CAAC,GAAGC,SAAS;IAC9DC,KAAK,EAAER,MAAM,CAACS;EAChB,CAAC,CAAC,CAAC,EACL,CAACnB,OAAO,CACV,CAAC;EAED,MAAMoB,YAAY,GAAGzB,WAAW,CAAEkB,EAAU,IAAKb,OAAO,CAACqB,MAAM,CAACR,EAAE,CAAC,CAAC,EAAES,OAAO,CAAC,CAAC,EAAE,CAACtB,OAAO,CAAC,CAAC;EAE3F,oBACEF,IAAA,CAACP,iBAAiB;IAChBiB,KAAK,EAAEA,KAAM;IACbN,cAAc,EAAEA,cAAe;IAC/BkB,YAAY,EAAEA,YAAa;IAC3BjB,OAAO,EAAEA,OAAQ;IACjBC,iBAAiB,EAAEA,iBAAkB;IACrCG,KAAK,EAAEA,KAAM;IACbF,MAAM,EAAEA,MAAO;IAAAJ,QAAA,EAEdA;EAAQ,CACQ,CAAC;AAExB,CAAC;AAED,MAAMsB,SAAS,GAAGA,CAAC;EAACtB;AAAmC,CAAC,kBACtDH,IAAA,CAACL,0BAA0B;EAAAQ,QAAA,EAAEA;AAAQ,CAA6B,CACnE;AAED,OAAO,MAAMX,WAAiC,GAAGkC,MAAM,CAACC,MAAM,CAAC1B,eAAe,EAAE;EAACwB;AAAS,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["iconResourceName","ContextMenu","NativeContextMenu","ContextMenuExclusion","NativeContextMenuExclusion","useSx","useCallback","useMemo","jsx","_jsx","ContextMenuRoot","actions","children","onOpenChange","onPreviewPress","preloadedScreenId","preview","previewTransition","testID","sx","style","items","map","action","index","destructive","id","String","image","icon","undefined","title","label","onSelectItem","Number","onPress","onMenuOpen","onMenuClose","isCommitted","Exclusion","Object","assign"],"sourceRoot":"../../../../src","sources":["organisms/context-menu/context-menu.ios.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,0BAA0B;AACzD,SAEEC,WAAW,IAAIC,iBAAiB,EAChCC,oBAAoB,IAAIC,0BAA0B,QAC7C,6BAA6B;AACpC,SAAQC,KAAK,QAAO,gBAAgB;AACpC,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG1C,MAAMC,eAAe,GAAGA,CAAC;EACvBC,OAAO;EACPC,QAAQ;EACRC,YAAY;EACZC,cAAc;EACdC,iBAAiB;EACjBC,OAAO;EACPC,iBAAiB;EACjBC,MAAM;EACN,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,KAAK,GAAGf,KAAK,CAACc,EAAE,CAAC;;EAEvB;EACA,MAAME,KAAK,GAAGd,OAAO,CACnB,MACEI,OAAO,CAACW,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,MAAM;IAC9BC,WAAW,EAAEF,MAAM,CAACE,WAAW;IAC/BC,EAAE,EAAEC,MAAM,CAACH,KAAK,CAAC;IACjBI,KAAK,EAAEL,MAAM,CAACM,IAAI,GAAG7B,gBAAgB,CAACuB,MAAM,CAACM,IAAI,CAAC,GAAGC,SAAS;IAC9DC,KAAK,EAAER,MAAM,CAACS;EAChB,CAAC,CAAC,CAAC,EACL,CAACrB,OAAO,CACV,CAAC;EAED,MAAMsB,YAAY,GAAG3B,WAAW,CAAEoB,EAAU,IAAKf,OAAO,CAACuB,MAAM,CAACR,EAAE,CAAC,CAAC,EAAES,OAAO,CAAC,CAAC,EAAE,CAACxB,OAAO,CAAC,CAAC;EAE3F,MAAMyB,UAAU,GAAG9B,WAAW,CAAC,MAAMO,YAAY,GAAG,IAAI,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAE1E,MAAMwB,WAAW,GAAG/B,WAAW,CAC5BgC,WAAoB,IAAK;IACxB,IAAI,CAACA,WAAW,EAAE;MAChBzB,YAAY,GAAG,KAAK,CAAC;IACvB;EACF,CAAC,EACD,CAACA,YAAY,CACf,CAAC;EAED,oBACEJ,IAAA,CAACP,iBAAiB;IAChBmB,KAAK,EAAEA,KAAM;IACbgB,WAAW,EAAExB,YAAY,GAAGwB,WAAW,GAAGP,SAAU;IACpDM,UAAU,EAAEvB,YAAY,GAAGuB,UAAU,GAAGN,SAAU;IAClDhB,cAAc,EAAEA,cAAe;IAC/BmB,YAAY,EAAEA,YAAa;IAC3BlB,iBAAiB,EAAEA,iBAAkB;IACrCC,OAAO,EAAEA,OAAQ;IACjBC,iBAAiB,EAAEA,iBAAkB;IACrCG,KAAK,EAAEA,KAAM;IACbF,MAAM,EAAEA,MAAO;IAAAN,QAAA,EAEdA;EAAQ,CACQ,CAAC;AAExB,CAAC;AAED,MAAM2B,SAAS,GAAGA,CAAC;EAAC3B;AAAmC,CAAC,kBACtDH,IAAA,CAACL,0BAA0B;EAAAQ,QAAA,EAAEA;AAAQ,CAA6B,CACnE;AAED,OAAO,MAAMX,WAAiC,GAAGuC,MAAM,CAACC,MAAM,CAAC/B,eAAe,EAAE;EAAC6B;AAAS,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/atoms/picker/picker.ios.d.ts

@@ -1,7 +1,9 @@
 import type { PickerComponent } from './picker.types';
 /**
- * A SwiftUI wheel. On its own it is `@expo/ui`'s community picker, which brings a host of its own. Inside a `Screen` or
- * `Island` it is the same wheel rendered into that host instead (see `useInsideHost`): a host nested in the island's
- * stack is given no height there, and the wheel spills over the views around it.
+ * A SwiftUI picker: a wheel, or with `pickerStyle="menu"` a button with the selection that opens the options as a
+ * menu, in the accent. On its own the wheel is `@expo/ui`'s community picker, which brings a host of its own, and the
+ * menu sits in a host sized to its button on both axes, as the date picker's pill does, so it drops into a row the way
+ * a `Text` does. Inside a `Screen` or `Island` either renders into that host instead (see `useInsideHost`): a host
+ * nested in the island's stack is given no height there, and the wheel spills over the views around it.
  */
 export declare const Picker: PickerComponent;

package/lib/typescript/atoms/picker/picker.types.d.ts

@@ -6,10 +6,12 @@ export type PickerOption = {
     /** What `onValueChange` reports. It also keys the option, so it must be unique. */
     value: string;
 };
+/** How SwiftUI shows the picker: a wheel, or a button that opens the options as a menu. */
+export type PickerStyleName = 'menu' | 'wheel';
 /**
- * A single choice from a list: a SwiftUI wheel picker on iOS, Material's exposed dropdown on Android. It brings its
- * own host, so it renders outside `Screen` and `Island` as well. Inside one it renders into that host instead, so it
- * can share a stack with other native views.
+ * A single choice from a list: a SwiftUI picker on iOS (a wheel, or a menu with `pickerStyle`), Material's exposed
+ * dropdown on Android. It brings its own host, so it renders outside `Screen` and `Island` as well. Inside one it
+ * renders into that host instead, so it can share a stack with other native views.
  */
 export type PickerProps = {
     /** Stops the user changing the selection, and dims the picker. */
@@ -18,6 +20,12 @@ export type PickerProps = {
     onValueChange?: (value: string) => void;
     /** The choices, in order. */
     options: PickerOption[];
+    /**
+     * SwiftUI's picker style. `wheel` by default: the options on a wheel, always in view. `menu` is a button with the
+     * selection, in the accent, that opens the options as a menu: what a screen with more than one picker, or a picker
+     * in a row, wants. iOS only. Android ignores it: its exposed dropdown is a menu already.
+     */
+    pickerStyle?: PickerStyleName;
     /**
      * Android: the dropdown field's test tag. iOS: the wheel's, inside a `Screen` or `Island` only; on its own,
      * `@expo/ui`'s wheel picker drops it.

package/lib/typescript/organisms/context-menu/context-menu.types.d.ts

@@ -13,8 +13,20 @@ export type ContextMenuProps = ResponsiveViewSx & {
     actions: MenuAction[];
     /** The trigger, laid out as usual. */
     children: ReactNode;
+    /**
+     * iOS: `true` when the menu appears, `false` when it ends without a tap on the preview. Preload the detail the card
+     * stands for here, and drop the preload on `false`.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
     /** iOS: the user tapped the lifted preview, committing to it. Open the detail the card stands for. */
     onPreviewPress?: () => void;
+    /**
+     * iOS: the route key of that detail, preloaded in the enclosing native stack while the menu is open (React
+     * Navigation's `preload`, Expo Router's `router.prefetch`). A tapped preview pushes it natively in the same frame
+     * and, with `zoom`, morphs the whole preview into it, the way Apple's apps open a preview. Move the route into the
+     * stack in `onPreviewPress`.
+     */
+    preloadedScreenId?: string;
     /**
      * iOS: lifted in place of the trigger while the menu is open (a larger version of the card, say). A snapshot of the
      * trigger when unset. Mounted only once a finger has rested on the trigger, so a list of cards does not pay for

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.15.3",
+  "version": "0.17.0",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -61,9 +61,9 @@
   "dependencies": {
     "@hzblj/expo-native-icons": "^0.1.0",
     "@hzblj/expo-rich-haptics": "^0.1.0",
-    "@hzblj/kara-native": "^0.15.3",
-    "@hzblj/kara-sx": "^0.15.3",
-    "@hzblj/kara-theme": "^0.15.3",
+    "@hzblj/kara-native": "^0.17.0",
+    "@hzblj/kara-sx": "^0.17.0",
+    "@hzblj/kara-theme": "^0.17.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

package/src/atoms/picker/picker.ios.tsx

@@ -1,6 +1,12 @@
 import {Picker as NativePicker} from '@expo/ui/community/picker'
-import {Picker as SwiftUIPicker, Text as SwiftUIText} from '@expo/ui/swift-ui'
-import {disabled as disabledModifier, foregroundStyle, pickerStyle, tag} from '@expo/ui/swift-ui/modifiers'
+import {Host, Picker as SwiftUIPicker, Text as SwiftUIText} from '@expo/ui/swift-ui'
+import {
+  disabled as disabledModifier,
+  foregroundStyle,
+  pickerStyle as pickerStyleModifier,
+  tag,
+  tint,
+} from '@expo/ui/swift-ui/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
 
@@ -8,30 +14,54 @@ import {useInsideHost} from '../../host-context'
 import type {PickerComponent, PickerProps} from './picker.types'
 
 /**
- * A SwiftUI wheel. On its own it is `@expo/ui`'s community picker, which brings a host of its own. Inside a `Screen` or
- * `Island` it is the same wheel rendered into that host instead (see `useInsideHost`): a host nested in the island's
- * stack is given no height there, and the wheel spills over the views around it.
+ * A SwiftUI picker: a wheel, or with `pickerStyle="menu"` a button with the selection that opens the options as a
+ * menu, in the accent. On its own the wheel is `@expo/ui`'s community picker, which brings a host of its own, and the
+ * menu sits in a host sized to its button on both axes, as the date picker's pill does, so it drops into a row the way
+ * a `Text` does. Inside a `Screen` or `Island` either renders into that host instead (see `useInsideHost`): a host
+ * nested in the island's stack is given no height there, and the wheel spills over the views around it.
  */
-export const Picker: PickerComponent = ({disabled = false, onValueChange, options, testID, value}: PickerProps) => {
+export const Picker: PickerComponent = ({
+  disabled = false,
+  onValueChange,
+  options,
+  pickerStyle = 'wheel',
+  testID,
+  value,
+}: PickerProps) => {
   const theme = useAppTheme()
   const insideHost = useInsideHost()
   const color = theme.colorString('content.primary')
+  const menu = pickerStyle === 'menu'
 
   const onChange = useCallback((next: string | number | null) => onValueChange?.(String(next)), [onValueChange])
-  const wheelModifiers = useMemo(
-    () => [pickerStyle('wheel'), ...(disabled ? [disabledModifier(true)] : [])],
-    [disabled]
+  const modifiers = useMemo(
+    () => [
+      pickerStyleModifier(pickerStyle),
+      ...(menu ? [tint(theme.color('fill.accent.primary'))] : []),
+      ...(disabled ? [disabledModifier(true)] : []),
+    ],
+    [disabled, menu, pickerStyle, theme]
+  )
+
+  const picker = (
+    <SwiftUIPicker modifiers={modifiers} onSelectionChange={onChange} selection={value} testID={testID}>
+      {options.map(option => (
+        <SwiftUIText key={option.value} modifiers={[tag(option.value), foregroundStyle(color)]}>
+          {option.label}
+        </SwiftUIText>
+      ))}
+    </SwiftUIPicker>
   )
 
   if (insideHost) {
+    return picker
+  }
+
+  if (menu) {
     return (
-      <SwiftUIPicker modifiers={wheelModifiers} onSelectionChange={onChange} selection={value} testID={testID}>
-        {options.map(option => (
-          <SwiftUIText key={option.value} modifiers={[tag(option.value), foregroundStyle(color)]}>
-            {option.label}
-          </SwiftUIText>
-        ))}
-      </SwiftUIPicker>
+      <Host colorScheme={theme.dark ? 'dark' : 'light'} matchContents>
+        {picker}
+      </Host>
     )
   }
 

package/src/atoms/picker/picker.types.ts

@@ -8,10 +8,13 @@ export type PickerOption = {
   value: string
 }
 
+/** How SwiftUI shows the picker: a wheel, or a button that opens the options as a menu. */
+export type PickerStyleName = 'menu' | 'wheel'
+
 /**
- * A single choice from a list: a SwiftUI wheel picker on iOS, Material's exposed dropdown on Android. It brings its
- * own host, so it renders outside `Screen` and `Island` as well. Inside one it renders into that host instead, so it
- * can share a stack with other native views.
+ * A single choice from a list: a SwiftUI picker on iOS (a wheel, or a menu with `pickerStyle`), Material's exposed
+ * dropdown on Android. It brings its own host, so it renders outside `Screen` and `Island` as well. Inside one it
+ * renders into that host instead, so it can share a stack with other native views.
  */
 export type PickerProps = {
   /** Stops the user changing the selection, and dims the picker. */
@@ -20,6 +23,12 @@ export type PickerProps = {
   onValueChange?: (value: string) => void
   /** The choices, in order. */
   options: PickerOption[]
+  /**
+   * SwiftUI's picker style. `wheel` by default: the options on a wheel, always in view. `menu` is a button with the
+   * selection, in the accent, that opens the options as a menu: what a screen with more than one picker, or a picker
+   * in a row, wants. iOS only. Android ignores it: its exposed dropdown is a menu already.
+   */
+  pickerStyle?: PickerStyleName
   /**
    * Android: the dropdown field's test tag. iOS: the wheel's, inside a `Screen` or `Island` only; on its own,
    * `@expo/ui`'s wheel picker drops it.

package/src/organisms/context-menu/context-menu.android.tsx

@@ -52,10 +52,18 @@ const MenuRow = ({action, onDismiss}: MenuRowProps) => {
  * 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`, `onPreviewPress` and `previewTransition` are iOS-only.
+ * scrolled past never builds one. `preview`, `onPreviewPress`, `previewTransition`, `onOpenChange` and
+ * `preloadedScreenId` are iOS-only.
  */
 const ContextMenuRoot = ({actions, children, testID, ...props}: ContextMenuProps) => {
-  const {onPreviewPress: _onPreviewPress, preview: _preview, previewTransition: _previewTransition, ...sx} = props
+  const {
+    onOpenChange: _onOpenChange,
+    onPreviewPress: _onPreviewPress,
+    preloadedScreenId: _preloadedScreenId,
+    preview: _preview,
+    previewTransition: _previewTransition,
+    ...sx
+  } = props
   const theme = useAppTheme()
   const resolved = useSx(sx)
   const trigger = useRef<View>(null)

package/src/organisms/context-menu/context-menu.ios.tsx

@@ -11,7 +11,9 @@ import type {ContextMenuComponent, ContextMenuExclusionProps, ContextMenuProps}
 const ContextMenuRoot = ({
   actions,
   children,
+  onOpenChange,
   onPreviewPress,
+  preloadedScreenId,
   preview,
   previewTransition,
   testID,
@@ -33,11 +35,25 @@ const ContextMenuRoot = ({
 
   const onSelectItem = useCallback((id: string) => actions[Number(id)]?.onPress(), [actions])
 
+  const onMenuOpen = useCallback(() => onOpenChange?.(true), [onOpenChange])
+
+  const onMenuClose = useCallback(
+    (isCommitted: boolean) => {
+      if (!isCommitted) {
+        onOpenChange?.(false)
+      }
+    },
+    [onOpenChange]
+  )
+
   return (
     <NativeContextMenu
       items={items}
+      onMenuClose={onOpenChange ? onMenuClose : undefined}
+      onMenuOpen={onOpenChange ? onMenuOpen : undefined}
       onPreviewPress={onPreviewPress}
       onSelectItem={onSelectItem}
+      preloadedScreenId={preloadedScreenId}
       preview={preview}
       previewTransition={previewTransition}
       style={style}

package/src/organisms/context-menu/context-menu.types.ts

@@ -14,8 +14,20 @@ export type ContextMenuProps = ResponsiveViewSx & {
   actions: MenuAction[]
   /** The trigger, laid out as usual. */
   children: ReactNode
+  /**
+   * iOS: `true` when the menu appears, `false` when it ends without a tap on the preview. Preload the detail the card
+   * stands for here, and drop the preload on `false`.
+   */
+  onOpenChange?: (isOpen: boolean) => void
   /** iOS: the user tapped the lifted preview, committing to it. Open the detail the card stands for. */
   onPreviewPress?: () => void
+  /**
+   * iOS: the route key of that detail, preloaded in the enclosing native stack while the menu is open (React
+   * Navigation's `preload`, Expo Router's `router.prefetch`). A tapped preview pushes it natively in the same frame
+   * and, with `zoom`, morphs the whole preview into it, the way Apple's apps open a preview. Move the route into the
+   * stack in `onPreviewPress`.
+   */
+  preloadedScreenId?: string
   /**
    * iOS: lifted in place of the trigger while the menu is open (a larger version of the card, say). A snapshot of the
    * trigger when unset. Mounted only once a finger has rested on the trigger, so a list of cards does not pay for