@hzblj/kara-components 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

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":";;AAAA,SAAQA,MAAM,IAAIC,YAAY,QAAO,2BAA2B;AAChE,SAAQC,IAAI,EAAEF,MAAM,IAAIG,aAAa,EAAEC,IAAI,IAAIC,WAAW,QAAO,mBAAmB;AACpF,SACEC,QAAQ,IAAIC,gBAAgB,EAC5BC,eAAe,EACfC,WAAW,IAAIC,mBAAmB,EAClCC,GAAG,EACHC,IAAI,QACC,6BAA6B;AACpC,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;AACA;AACA,OAAO,MAAMlB,MAAuB,GAAGA,CAAC;EACtCM,QAAQ,GAAG,KAAK;EAChBa,aAAa;EACbC,OAAO;EACPX,WAAW,GAAG,OAAO;EACrBY,MAAM;EACNC;AACW,CAAC,KAAK;EACjB,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,UAAU,GAAGR,aAAa,CAAC,CAAC;EAClC,MAAMS,KAAK,GAAGF,KAAK,CAACG,WAAW,CAAC,iBAAiB,CAAC;EAClD,MAAMC,IAAI,GAAGlB,WAAW,KAAK,MAAM;EAEnC,MAAMmB,QAAQ,GAAGd,WAAW,CAAEe,IAA4B,IAAKV,aAAa,GAAGW,MAAM,CAACD,IAAI,CAAC,CAAC,EAAE,CAACV,aAAa,CAAC,CAAC;EAC9G,MAAMY,SAAS,GAAGhB,OAAO,CACvB,MAAM,CACJL,mBAAmB,CAACD,WAAW,CAAC,EAChC,IAAIkB,IAAI,GAAG,CAACf,IAAI,CAACW,KAAK,CAACE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAC3D,IAAInB,QAAQ,GAAG,CAACC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC,CAC9C,EACD,CAACD,QAAQ,EAAEqB,IAAI,EAAElB,WAAW,EAAEc,KAAK,CACrC,CAAC;EAED,MAAMS,MAAM,gBACVd,IAAA,CAACf,aAAa;IAAC4B,SAAS,EAAEA,SAAU;IAACE,iBAAiB,EAAEL,QAAS;IAACM,SAAS,EAAEZ,KAAM;IAACD,MAAM,EAAEA,MAAO;IAAAc,QAAA,EAChGf,OAAO,CAACgB,GAAG,CAACC,MAAM,iBACjBnB,IAAA,CAACb,WAAW;MAAoB0B,SAAS,EAAE,CAACpB,GAAG,CAAC0B,MAAM,CAACf,KAAK,CAAC,EAAEd,eAAe,CAACiB,KAAK,CAAC,CAAE;MAAAU,QAAA,EACpFE,MAAM,CAACC;IAAK,GADGD,MAAM,CAACf,KAEZ,CACd;EAAC,CACW,CAChB;EAED,IAAIE,UAAU,EAAE;IACd,OAAOQ,MAAM;EACf;EAEA,IAAIL,IAAI,EAAE;IACR,oBACET,IAAA,CAAChB,IAAI;MAACqC,WAAW,EAAEhB,KAAK,CAACiB,IAAI,GAAG,MAAM,GAAG,OAAQ;MAACC,aAAa;MAAAN,QAAA,EAC5DH;IAAM,CACH,CAAC;EAEX;EAEA,oBACEd,IAAA,CAACjB,YAAY;IAACyC,OAAO,EAAE,CAACpC,QAAS;IAACa,aAAa,EAAES,QAAS;IAACe,aAAa,EAAErB,KAAM;IAACD,MAAM,EAAEA,MAAO;IAAAc,QAAA,EAC7Ff,OAAO,CAACgB,GAAG,CAACC,MAAM,iBACjBnB,IAAA,CAACjB,YAAY,CAAC2C,IAAI;MAACnB,KAAK,EAAEA,KAAM;MAAoBa,KAAK,EAAED,MAAM,CAACC,KAAM;MAAChB,KAAK,EAAEe,MAAM,CAACf;IAAM,GAAvDe,MAAM,CAACf,KAAkD,CAChG;EAAC,CACU,CAAC;AAEnB,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.16.0",
+  "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.16.0",
-    "@hzblj/kara-sx": "^0.16.0",
-    "@hzblj/kara-theme": "^0.16.0",
+    "@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.