@hzblj/kara-components 0.14.0 → 0.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/lib/module/atoms/activity-indicator/activity-indicator.android.js +14 -7
  3. package/lib/module/atoms/activity-indicator/activity-indicator.android.js.map +1 -1
  4. package/lib/module/atoms/activity-indicator/activity-indicator.ios.js +12 -2
  5. package/lib/module/atoms/activity-indicator/activity-indicator.ios.js.map +1 -1
  6. package/lib/module/atoms/date-picker/date-picker.android.js +13 -1
  7. package/lib/module/atoms/date-picker/date-picker.android.js.map +1 -1
  8. package/lib/module/atoms/date-picker/date-picker.ios.js +19 -12
  9. package/lib/module/atoms/date-picker/date-picker.ios.js.map +1 -1
  10. package/lib/module/atoms/picker/picker.android.js +48 -41
  11. package/lib/module/atoms/picker/picker.android.js.map +1 -1
  12. package/lib/module/atoms/picker/picker.ios.js +25 -2
  13. package/lib/module/atoms/picker/picker.ios.js.map +1 -1
  14. package/lib/module/atoms/segmented-control/segmented-control.android.js +25 -18
  15. package/lib/module/atoms/segmented-control/segmented-control.android.js.map +1 -1
  16. package/lib/module/atoms/segmented-control/segmented-control.ios.js +15 -2
  17. package/lib/module/atoms/segmented-control/segmented-control.ios.js.map +1 -1
  18. package/lib/module/host-context.js +8 -0
  19. package/lib/module/host-context.js.map +1 -1
  20. package/lib/typescript/atoms/activity-indicator/activity-indicator.ios.d.ts +4 -1
  21. package/lib/typescript/atoms/activity-indicator/activity-indicator.types.d.ts +2 -1
  22. package/lib/typescript/atoms/date-picker/date-picker.ios.d.ts +2 -1
  23. package/lib/typescript/atoms/date-picker/date-picker.types.d.ts +1 -1
  24. package/lib/typescript/atoms/picker/picker.ios.d.ts +5 -0
  25. package/lib/typescript/atoms/picker/picker.types.d.ts +6 -2
  26. package/lib/typescript/atoms/segmented-control/segmented-control.ios.d.ts +2 -1
  27. package/lib/typescript/atoms/segmented-control/segmented-control.types.d.ts +2 -1
  28. package/lib/typescript/host-context.d.ts +7 -0
  29. package/package.json +4 -4
  30. package/src/atoms/activity-indicator/activity-indicator.android.tsx +18 -5
  31. package/src/atoms/activity-indicator/activity-indicator.ios.tsx +10 -2
  32. package/src/atoms/activity-indicator/activity-indicator.types.ts +2 -1
  33. package/src/atoms/date-picker/date-picker.android.tsx +15 -1
  34. package/src/atoms/date-picker/date-picker.ios.tsx +20 -9
  35. package/src/atoms/date-picker/date-picker.types.ts +1 -1
  36. package/src/atoms/picker/picker.android.tsx +53 -44
  37. package/src/atoms/picker/picker.ios.tsx +28 -7
  38. package/src/atoms/picker/picker.types.ts +6 -2
  39. package/src/atoms/segmented-control/segmented-control.android.tsx +29 -18
  40. package/src/atoms/segmented-control/segmented-control.ios.tsx +10 -2
  41. package/src/atoms/segmented-control/segmented-control.types.ts +2 -1
  42. package/src/host-context.tsx +8 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @hzblj/kara-components
2
2
 
3
+ ## 0.14.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies []:
8
+ - @hzblj/kara-theme@0.14.2
9
+ - @hzblj/kara-sx@0.14.2
10
+ - @hzblj/kara-native@0.14.2
11
+
12
+ ## 0.14.1
13
+
14
+ ### Patch Changes
15
+
16
+ - [#40](https://github.com/hzblj/kara-ui/pull/40) [`7c06e82`](https://github.com/hzblj/kara-ui/commit/7c06e82e6380bd52388237c9fa2b49455f971aee) Thanks [@hzblj](https://github.com/hzblj)! - `SegmentedControl`, `ActivityIndicator` and `DatePicker` work inside a `Screen` or `Island`, next to other native views, the way `Picker` now does. Each is made to drop into React Native layout on its own, so it brought a host of its own or was a plain React Native view, and inside an island that broke the island. On Android a `SegmentedControl` left the views beside it no width (a multiline `TextField` vanished and the island ran past the screen), an `ActivityIndicator` emptied the island, and a `DatePicker` field did not show. On iOS the segmented control swelled and squashed the field above it, the spinner drifted off its row, and the date pill came loose from its label. Inside a host each now renders into that host; on its own nothing changes.
17
+
18
+ - [#40](https://github.com/hzblj/kara-ui/pull/40) [`7c06e82`](https://github.com/hzblj/kara-ui/commit/7c06e82e6380bd52388237c9fa2b49455f971aee) Thanks [@hzblj](https://github.com/hzblj)! - `Picker` works inside a `Screen` or `Island`, next to other native views. It brought a host of its own even there, and a host nested in another one broke the island around it: on Android the nested host took the island's whole width, so the views beside the picker disappeared (a multiline `TextField` was measured a letter wide and pushed the island far past the screen), and on iOS the wheel got no height and spilled over them. Inside a host the picker now renders into that host; on its own it still brings one.
19
+
20
+ - Updated dependencies []:
21
+ - @hzblj/kara-theme@0.14.1
22
+ - @hzblj/kara-sx@0.14.1
23
+ - @hzblj/kara-native@0.14.1
24
+
3
25
  ## 0.14.0
4
26
 
5
27
  ### Minor Changes
@@ -1,11 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  import { Host, LoadingIndicator } from '@expo/ui/jetpack-compose';
4
- import { fillMaxSize, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
4
+ import { fillMaxSize, size as sizeModifier, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
5
5
  import { useAccessibilityModifiers } from '@hzblj/kara-sx';
6
6
  import { useAppTheme } from '@hzblj/kara-theme';
7
7
  import { useMemo } from 'react';
8
8
  import { StyleSheet } from 'react-native';
9
+ import { useInsideHost } from "../../host-context.js";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  /** Material's 48dp for a screen; half of it in a row, about where React Native's small spinner sat. */
11
12
  const styles = StyleSheet.create({
@@ -21,7 +22,8 @@ const styles = StyleSheet.create({
21
22
 
22
23
  /**
23
24
  * Material 3's expressive `LoadingIndicator` in a host of its own, sized here rather than measured, so it renders
24
- * anywhere and takes its place in the first frame.
25
+ * anywhere and takes its place in the first frame. Inside a `Screen` or `Island` it renders into that host instead (see
26
+ * `useInsideHost`), the same size.
25
27
  */
26
28
  export const ActivityIndicator = ({
27
29
  accessibilityLabel,
@@ -30,18 +32,23 @@ export const ActivityIndicator = ({
30
32
  testID
31
33
  }) => {
32
34
  const theme = useAppTheme();
35
+ const insideHost = useInsideHost();
33
36
  const accessibilityModifiers = useAccessibilityModifiers({
34
37
  accessibilityLabel
35
38
  });
36
- const modifiers = useMemo(() => [fillMaxSize(), ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers], [accessibilityModifiers, testID]);
39
+ const modifiers = useMemo(() => [insideHost ? sizeModifier(styles[size].width, styles[size].height) : fillMaxSize(), ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers], [accessibilityModifiers, insideHost, size, testID]);
40
+ const indicator = /*#__PURE__*/_jsx(LoadingIndicator, {
41
+ color: theme.color(color),
42
+ modifiers: modifiers
43
+ });
44
+ if (insideHost) {
45
+ return indicator;
46
+ }
37
47
  return /*#__PURE__*/_jsx(Host, {
38
48
  colorScheme: theme.dark ? 'dark' : 'light',
39
49
  seedColor: theme.materialSeed,
40
50
  style: styles[size],
41
- children: /*#__PURE__*/_jsx(LoadingIndicator, {
42
- color: theme.color(color),
43
- modifiers: modifiers
44
- })
51
+ children: indicator
45
52
  });
46
53
  };
47
54
  //# sourceMappingURL=activity-indicator.android.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["Host","LoadingIndicator","fillMaxSize","testID","testIdModifier","useAccessibilityModifiers","useAppTheme","useMemo","StyleSheet","jsx","_jsx","styles","create","large","height","width","small","ActivityIndicator","accessibilityLabel","color","size","theme","accessibilityModifiers","modifiers","colorScheme","dark","seedColor","materialSeed","style","children"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,gBAAgB,QAAO,0BAA0B;AAC/D,SAAQC,WAAW,EAAEC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AACxF,SAAQC,yBAAyB,QAAO,gBAAgB;AACxD,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,UAAU,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIvC;AACA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAM,CAAC;EAC/BC,KAAK,EAAE;IAACC,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAE,CAAC;EAC9BC,KAAK,EAAE;IAACF,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAE;AAC/B,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA,OAAO,MAAME,iBAA6C,GAAGA,CAAC;EAC5DC,kBAAkB;EAClBC,KAAK,GAAG,qBAAqB;EAC7BC,IAAI,GAAG,OAAO;EACdjB;AACsB,CAAC,KAAK;EAC5B,MAAMkB,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,sBAAsB,GAAGjB,yBAAyB,CAAC;IAACa;EAAkB,CAAC,CAAC;EAC9E,MAAMK,SAAS,GAAGhB,OAAO,CACvB,MAAM,CAACL,WAAW,CAAC,CAAC,EAAE,IAAIC,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAGmB,sBAAsB,CAAC,EAC7F,CAACA,sBAAsB,EAAEnB,MAAM,CACjC,CAAC;EAED,oBACEO,IAAA,CAACV,IAAI;IAACwB,WAAW,EAAEH,KAAK,CAACI,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,SAAS,EAAEL,KAAK,CAACM,YAAa;IAACC,KAAK,EAAEjB,MAAM,CAACS,IAAI,CAAE;IAAAS,QAAA,eACnGnB,IAAA,CAACT,gBAAgB;MAACkB,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACA,KAAK,CAAE;MAACI,SAAS,EAAEA;IAAU,CAAE;EAAC,CACjE,CAAC;AAEX,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["Host","LoadingIndicator","fillMaxSize","size","sizeModifier","testID","testIdModifier","useAccessibilityModifiers","useAppTheme","useMemo","StyleSheet","useInsideHost","jsx","_jsx","styles","create","large","height","width","small","ActivityIndicator","accessibilityLabel","color","theme","insideHost","accessibilityModifiers","modifiers","indicator","colorScheme","dark","seedColor","materialSeed","style","children"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,gBAAgB,QAAO,0BAA0B;AAC/D,SAAQC,WAAW,EAAEC,IAAI,IAAIC,YAAY,EAAEC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC9G,SAAQC,yBAAyB,QAAO,gBAAgB;AACxD,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,UAAU,QAAO,cAAc;AAEvC,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD;AACA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAM,CAAC;EAC/BC,KAAK,EAAE;IAACC,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAE,CAAC;EAC9BC,KAAK,EAAE;IAACF,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAE;AAC/B,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,iBAA6C,GAAGA,CAAC;EAC5DC,kBAAkB;EAClBC,KAAK,GAAG,qBAAqB;EAC7BnB,IAAI,GAAG,OAAO;EACdE;AACsB,CAAC,KAAK;EAC5B,MAAMkB,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,UAAU,GAAGb,aAAa,CAAC,CAAC;EAClC,MAAMc,sBAAsB,GAAGlB,yBAAyB,CAAC;IAACc;EAAkB,CAAC,CAAC;EAC9E,MAAMK,SAAS,GAAGjB,OAAO,CACvB,MAAM,CACJe,UAAU,GAAGpB,YAAY,CAACU,MAAM,CAACX,IAAI,CAAC,CAACe,KAAK,EAAEJ,MAAM,CAACX,IAAI,CAAC,CAACc,MAAM,CAAC,GAAGf,WAAW,CAAC,CAAC,EAClF,IAAIG,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAC3C,GAAGoB,sBAAsB,CAC1B,EACD,CAACA,sBAAsB,EAAED,UAAU,EAAErB,IAAI,EAAEE,MAAM,CACnD,CAAC;EAED,MAAMsB,SAAS,gBAAGd,IAAA,CAACZ,gBAAgB;IAACqB,KAAK,EAAEC,KAAK,CAACD,KAAK,CAACA,KAAK,CAAE;IAACI,SAAS,EAAEA;EAAU,CAAE,CAAC;EAEvF,IAAIF,UAAU,EAAE;IACd,OAAOG,SAAS;EAClB;EAEA,oBACEd,IAAA,CAACb,IAAI;IAAC4B,WAAW,EAAEL,KAAK,CAACM,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,SAAS,EAAEP,KAAK,CAACQ,YAAa;IAACC,KAAK,EAAElB,MAAM,CAACX,IAAI,CAAE;IAAA8B,QAAA,EAClGN;EAAS,CACN,CAAC;AAEX,CAAC","ignoreList":[]}
@@ -1,9 +1,14 @@
1
1
  "use strict";
2
2
 
3
+ import { RNHostView } from '@expo/ui/swift-ui';
3
4
  import { useAppTheme } from '@hzblj/kara-theme';
4
5
  import { ActivityIndicator as RNActivityIndicator } from 'react-native';
6
+ import { useInsideHost } from "../../host-context.js";
5
7
  import { jsx as _jsx } from "react/jsx-runtime";
6
- /** React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. */
8
+ /**
9
+ * React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. Inside a `Screen` or `Island` it is
10
+ * carried into that host by `RNHostView`, sized to the spinner (see `useInsideHost`).
11
+ */
7
12
  export const ActivityIndicator = ({
8
13
  accessibilityLabel,
9
14
  color = 'fill.accent.primary',
@@ -11,11 +16,16 @@ export const ActivityIndicator = ({
11
16
  testID
12
17
  }) => {
13
18
  const theme = useAppTheme();
14
- return /*#__PURE__*/_jsx(RNActivityIndicator, {
19
+ const insideHost = useInsideHost();
20
+ const spinner = /*#__PURE__*/_jsx(RNActivityIndicator, {
15
21
  accessibilityLabel: accessibilityLabel,
16
22
  color: theme.color(color),
17
23
  size: size,
18
24
  testID: testID
19
25
  });
26
+ return insideHost ? /*#__PURE__*/_jsx(RNHostView, {
27
+ matchContents: true,
28
+ children: spinner
29
+ }) : spinner;
20
30
  };
21
31
  //# sourceMappingURL=activity-indicator.ios.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["useAppTheme","ActivityIndicator","RNActivityIndicator","jsx","_jsx","accessibilityLabel","color","size","testID","theme"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.ios.tsx"],"mappings":";;AAAA,SAAQA,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,iBAAiB,IAAIC,mBAAmB,QAAO,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIrE;AACA,OAAO,MAAMH,iBAA6C,GAAGA,CAAC;EAC5DI,kBAAkB;EAClBC,KAAK,GAAG,qBAAqB;EAC7BC,IAAI,GAAG,OAAO;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAMC,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,oBACEI,IAAA,CAACF,mBAAmB;IAClBG,kBAAkB,EAAEA,kBAAmB;IACvCC,KAAK,EAAEG,KAAK,CAACH,KAAK,CAACA,KAAK,CAAE;IAC1BC,IAAI,EAAEA,IAAK;IACXC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["RNHostView","useAppTheme","ActivityIndicator","RNActivityIndicator","useInsideHost","jsx","_jsx","accessibilityLabel","color","size","testID","theme","insideHost","spinner","matchContents","children"],"sourceRoot":"../../../../src","sources":["atoms/activity-indicator/activity-indicator.ios.tsx"],"mappings":";;AAAA,SAAQA,UAAU,QAAO,mBAAmB;AAC5C,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,iBAAiB,IAAIC,mBAAmB,QAAO,cAAc;AAErE,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD;AACA;AACA;AACA;AACA,OAAO,MAAMJ,iBAA6C,GAAGA,CAAC;EAC5DK,kBAAkB;EAClBC,KAAK,GAAG,qBAAqB;EAC7BC,IAAI,GAAG,OAAO;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,UAAU,GAAGR,aAAa,CAAC,CAAC;EAElC,MAAMS,OAAO,gBACXP,IAAA,CAACH,mBAAmB;IAClBI,kBAAkB,EAAEA,kBAAmB;IACvCC,KAAK,EAAEG,KAAK,CAACH,KAAK,CAACA,KAAK,CAAE;IAC1BC,IAAI,EAAEA,IAAK;IACXC,MAAM,EAAEA;EAAO,CAChB,CACF;EAED,OAAOE,UAAU,gBAAGN,IAAA,CAACN,UAAU;IAACc,aAAa;IAAAC,QAAA,EAAEF;EAAO,CAAa,CAAC,GAAGA,OAAO;AAChF,CAAC","ignoreList":[]}
@@ -1,8 +1,11 @@
1
1
  "use strict";
2
2
 
3
3
  import { DateTimePicker } from '@expo/ui/community/datetime-picker';
4
+ import { RNHostView } from '@expo/ui/jetpack-compose';
4
5
  import { useAppTheme } from '@hzblj/kara-theme';
5
6
  import { useCallback, useState } from 'react';
7
+ import { useInsideHost } from "../../host-context.js";
8
+ import { Box } from "../box/index.js";
6
9
  import { Pressable } from "../pressable/index.js";
7
10
  import { RnText } from "../rn-text/index.js";
8
11
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,6 +30,8 @@ const formatted = (value, mode) => {
27
30
  /**
28
31
  * The value as a field that opens Material's date picker dialog on a tap. Android's picker *is* a dialog — mounted, it
29
32
  * opens — so it is mounted only while open, and unmounted on confirm or dismiss, as the component asks its caller to.
33
+ * Both are React Native views; inside a `Screen` or `Island` `RNHostView` carries them into that host, sized to the
34
+ * field (see `useInsideHost`).
30
35
  */
31
36
  export const DatePicker = ({
32
37
  max,
@@ -37,6 +42,7 @@ export const DatePicker = ({
37
42
  value
38
43
  }) => {
39
44
  const theme = useAppTheme();
45
+ const insideHost = useInsideHost();
40
46
  const [open, setOpen] = useState(false);
41
47
  const show = useCallback(() => setOpen(true), []);
42
48
  const hide = useCallback(() => setOpen(false), []);
@@ -44,7 +50,7 @@ export const DatePicker = ({
44
50
  setOpen(false);
45
51
  onValueChange?.(date);
46
52
  }, [onValueChange]);
47
- return /*#__PURE__*/_jsxs(_Fragment, {
53
+ const field = /*#__PURE__*/_jsxs(_Fragment, {
48
54
  children: [/*#__PURE__*/_jsx(Pressable, {
49
55
  alignSelf: "flex-start",
50
56
  bg: "fill.tertiary",
@@ -68,5 +74,11 @@ export const DatePicker = ({
68
74
  value: value
69
75
  }) : null]
70
76
  });
77
+ return insideHost ? /*#__PURE__*/_jsx(RNHostView, {
78
+ matchContents: true,
79
+ children: /*#__PURE__*/_jsx(Box, {
80
+ children: field
81
+ })
82
+ }) : field;
71
83
  };
72
84
  //# sourceMappingURL=date-picker.android.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["DateTimePicker","useAppTheme","useCallback","useState","Pressable","RnText","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","formatted","value","mode","toLocaleTimeString","undefined","hour","minute","date","toLocaleDateString","day","month","year","DatePicker","max","min","onValueChange","testID","theme","open","setOpen","show","hide","onChange","_event","children","alignSelf","bg","borderRadius","onPress","px","py","variant","accentColor","colorString","maximumDate","minimumDate","onDismiss","presentation"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.android.tsx"],"mappings":";;AAAA,SAAQA,cAAc,QAAO,oCAAoC;AACjE,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,QAAQ,QAAO,OAAO;AAE3C,SAAQC,SAAS,QAAO,uBAAc;AACtC,SAAQC,MAAM,QAAO,qBAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAGjC,MAAMC,SAAS,GAAGA,CAACC,KAAW,EAAEC,IAAoB,KAAa;EAC/D,IAAIA,IAAI,KAAK,MAAM,EAAE;IACnB,OAAOD,KAAK,CAACE,kBAAkB,CAACC,SAAS,EAAE;MAACC,IAAI,EAAE,SAAS;MAAEC,MAAM,EAAE;IAAS,CAAC,CAAC;EAClF;EAEA,MAAMC,IAAI,GAAGN,KAAK,CAACO,kBAAkB,CAACJ,SAAS,EAAE;IAACK,GAAG,EAAE,SAAS;IAAEC,KAAK,EAAE,OAAO;IAAEC,IAAI,EAAE;EAAS,CAAC,CAAC;EAEnG,OAAOT,IAAI,KAAK,UAAU,GACtB,GAAGK,IAAI,IAAIN,KAAK,CAACE,kBAAkB,CAACC,SAAS,EAAE;IAACC,IAAI,EAAE,SAAS;IAAEC,MAAM,EAAE;EAAS,CAAC,CAAC,EAAE,GACtFC,IAAI;AACV,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,MAAMK,UAA+B,GAAGA,CAAC;EAC9CC,GAAG;EACHC,GAAG;EACHZ,IAAI,GAAG,MAAM;EACba,aAAa;EACbC,MAAM;EACNf;AACe,CAAC,KAAK;EACrB,MAAMgB,KAAK,GAAG5B,WAAW,CAAC,CAAC;EAC3B,MAAM,CAAC6B,IAAI,EAAEC,OAAO,CAAC,GAAG5B,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAM6B,IAAI,GAAG9B,WAAW,CAAC,MAAM6B,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EACjD,MAAME,IAAI,GAAG/B,WAAW,CAAC,MAAM6B,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;EAElD,MAAMG,QAAQ,GAAGhC,WAAW,CAC1B,CAACiC,MAAe,EAAEhB,IAAU,KAAK;IAC/BY,OAAO,CAAC,KAAK,CAAC;IACdJ,aAAa,GAAGR,IAAI,CAAC;EACvB,CAAC,EACD,CAACQ,aAAa,CAChB,CAAC;EAED,oBACEhB,KAAA,CAAAF,SAAA;IAAA2B,QAAA,gBACE7B,IAAA,CAACH,SAAS;MACRiC,SAAS,EAAC,YAAY;MACtBC,EAAE,EAAC,eAAe;MAClBC,YAAY,EAAC,QAAQ;MACrBC,OAAO,EAAER,IAAK;MACdS,EAAE,EAAC,KAAK;MACRC,EAAE,EAAC,IAAI;MACPd,MAAM,EAAEA,MAAO;MAAAQ,QAAA,eAEf7B,IAAA,CAACF,MAAM;QAACsC,OAAO,EAAC,MAAM;QAAAP,QAAA,EAAExB,SAAS,CAACC,KAAK,EAAEC,IAAI;MAAC,CAAS;IAAC,CAC/C,CAAC,EACXgB,IAAI,gBACHvB,IAAA,CAACP,cAAc;MACb4C,WAAW,EAAEf,KAAK,CAACgB,WAAW,CAAC,qBAAqB,CAAE;MACtDC,WAAW,EAAErB,GAAI;MACjBsB,WAAW,EAAErB,GAAI;MACjBZ,IAAI,EAAEA,IAAK;MACXkC,SAAS,EAAEf,IAAK;MAChBN,aAAa,EAAEO,QAAS;MACxBe,YAAY,EAAC,QAAQ;MACrBpC,KAAK,EAAEA;IAAM,CACd,CAAC,GACA,IAAI;EAAA,CACR,CAAC;AAEP,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["DateTimePicker","RNHostView","useAppTheme","useCallback","useState","useInsideHost","Box","Pressable","RnText","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","formatted","value","mode","toLocaleTimeString","undefined","hour","minute","date","toLocaleDateString","day","month","year","DatePicker","max","min","onValueChange","testID","theme","insideHost","open","setOpen","show","hide","onChange","_event","field","children","alignSelf","bg","borderRadius","onPress","px","py","variant","accentColor","colorString","maximumDate","minimumDate","onDismiss","presentation","matchContents"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.android.tsx"],"mappings":"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","ignoreList":[]}
@@ -4,6 +4,7 @@ import { Host, DatePicker as SwiftUIDatePicker } from '@expo/ui/swift-ui';
4
4
  import { datePickerStyle, labelsHidden, tint } from '@expo/ui/swift-ui/modifiers';
5
5
  import { useAppTheme } from '@hzblj/kara-theme';
6
6
  import { useMemo } from 'react';
7
+ import { useInsideHost } from "../../host-context.js";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  const COMPONENTS = {
9
10
  date: ['date'],
@@ -15,7 +16,8 @@ const COMPONENTS = {
15
16
  * The system's compact date picker: the value in a pill, and a tap on it opens the calendar popover UIKit owns. Its own
16
17
  * host, sized to the pill on both axes — a host that took the width it was given would lay the pill out against the
17
18
  * far edge of it, or past its container's — so it drops into a row the way a `Text` does. The label is the caller's,
18
- * beside it; the calendar is in the accent.
19
+ * beside it; the calendar is in the accent. Inside a `Screen` or `Island` it renders into that host instead (see
20
+ * `useInsideHost`).
19
21
  */
20
22
  export const DatePicker = ({
21
23
  max,
@@ -26,21 +28,26 @@ export const DatePicker = ({
26
28
  value
27
29
  }) => {
28
30
  const theme = useAppTheme();
31
+ const insideHost = useInsideHost();
29
32
  const modifiers = useMemo(() => [datePickerStyle('compact'), labelsHidden(), tint(theme.color('fill.accent.primary'))], [theme]);
33
+ const picker = /*#__PURE__*/_jsx(SwiftUIDatePicker, {
34
+ displayedComponents: [...COMPONENTS[mode]],
35
+ modifiers: modifiers,
36
+ onDateChange: onValueChange,
37
+ range: min || max ? {
38
+ end: max,
39
+ start: min
40
+ } : undefined,
41
+ selection: value,
42
+ testID: testID
43
+ });
44
+ if (insideHost) {
45
+ return picker;
46
+ }
30
47
  return /*#__PURE__*/_jsx(Host, {
31
48
  colorScheme: theme.dark ? 'dark' : 'light',
32
49
  matchContents: true,
33
- children: /*#__PURE__*/_jsx(SwiftUIDatePicker, {
34
- displayedComponents: [...COMPONENTS[mode]],
35
- modifiers: modifiers,
36
- onDateChange: onValueChange,
37
- range: min || max ? {
38
- end: max,
39
- start: min
40
- } : undefined,
41
- selection: value,
42
- testID: testID
43
- })
50
+ children: picker
44
51
  });
45
52
  };
46
53
  //# sourceMappingURL=date-picker.ios.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["Host","DatePicker","SwiftUIDatePicker","datePickerStyle","labelsHidden","tint","useAppTheme","useMemo","jsx","_jsx","COMPONENTS","date","datetime","time","max","min","mode","onValueChange","testID","value","theme","modifiers","color","colorScheme","dark","matchContents","children","displayedComponents","onDateChange","range","end","start","undefined","selection"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,UAAU,IAAIC,iBAAiB,QAAO,mBAAmB;AACvE,SAAQC,eAAe,EAAEC,YAAY,EAAEC,IAAI,QAAO,6BAA6B;AAC/E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI7B,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE,CAAC,MAAM,CAAC;EACdC,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC;EACnCC,IAAI,EAAE,CAAC,eAAe;AACxB,CAAyE;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMZ,UAA+B,GAAGA,CAAC;EAC9Ca,GAAG;EACHC,GAAG;EACHC,IAAI,GAAG,MAAM;EACbC,aAAa;EACbC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAMC,KAAK,GAAGd,WAAW,CAAC,CAAC;EAE3B,MAAMe,SAAS,GAAGd,OAAO,CACvB,MAAM,CAACJ,eAAe,CAAC,SAAS,CAAC,EAAEC,YAAY,CAAC,CAAC,EAAEC,IAAI,CAACe,KAAK,CAACE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAC5F,CAACF,KAAK,CACR,CAAC;EAED,oBACEX,IAAA,CAACT,IAAI;IAACuB,WAAW,EAAEH,KAAK,CAACI,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,aAAa;IAAAC,QAAA,eAC7DjB,IAAA,CAACP,iBAAiB;MAChByB,mBAAmB,EAAE,CAAC,GAAGjB,UAAU,CAACM,IAAI,CAAC,CAAE;MAC3CK,SAAS,EAAEA,SAAU;MACrBO,YAAY,EAAEX,aAAc;MAC5BY,KAAK,EAAEd,GAAG,IAAID,GAAG,GAAG;QAACgB,GAAG,EAAEhB,GAAG;QAAEiB,KAAK,EAAEhB;MAAG,CAAC,GAAGiB,SAAU;MACvDC,SAAS,EAAEd,KAAM;MACjBD,MAAM,EAAEA;IAAO,CAChB;EAAC,CACE,CAAC;AAEX,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["Host","DatePicker","SwiftUIDatePicker","datePickerStyle","labelsHidden","tint","useAppTheme","useMemo","useInsideHost","jsx","_jsx","COMPONENTS","date","datetime","time","max","min","mode","onValueChange","testID","value","theme","insideHost","modifiers","color","picker","displayedComponents","onDateChange","range","end","start","undefined","selection","colorScheme","dark","matchContents","children"],"sourceRoot":"../../../../src","sources":["atoms/date-picker/date-picker.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,UAAU,IAAIC,iBAAiB,QAAO,mBAAmB;AACvE,SAAQC,eAAe,EAAEC,YAAY,EAAEC,IAAI,QAAO,6BAA6B;AAC/E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE,CAAC,MAAM,CAAC;EACdC,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC;EACnCC,IAAI,EAAE,CAAC,eAAe;AACxB,CAAyE;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMb,UAA+B,GAAGA,CAAC;EAC9Cc,GAAG;EACHC,GAAG;EACHC,IAAI,GAAG,MAAM;EACbC,aAAa;EACbC,MAAM;EACNC;AACe,CAAC,KAAK;EACrB,MAAMC,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAMgB,UAAU,GAAGd,aAAa,CAAC,CAAC;EAElC,MAAMe,SAAS,GAAGhB,OAAO,CACvB,MAAM,CAACJ,eAAe,CAAC,SAAS,CAAC,EAAEC,YAAY,CAAC,CAAC,EAAEC,IAAI,CAACgB,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAC5F,CAACH,KAAK,CACR,CAAC;EAED,MAAMI,MAAM,gBACVf,IAAA,CAACR,iBAAiB;IAChBwB,mBAAmB,EAAE,CAAC,GAAGf,UAAU,CAACM,IAAI,CAAC,CAAE;IAC3CM,SAAS,EAAEA,SAAU;IACrBI,YAAY,EAAET,aAAc;IAC5BU,KAAK,EAAEZ,GAAG,IAAID,GAAG,GAAG;MAACc,GAAG,EAAEd,GAAG;MAAEe,KAAK,EAAEd;IAAG,CAAC,GAAGe,SAAU;IACvDC,SAAS,EAAEZ,KAAM;IACjBD,MAAM,EAAEA;EAAO,CAChB,CACF;EAED,IAAIG,UAAU,EAAE;IACd,OAAOG,MAAM;EACf;EAEA,oBACEf,IAAA,CAACV,IAAI;IAACiC,WAAW,EAAEZ,KAAK,CAACa,IAAI,GAAG,MAAM,GAAG,OAAQ;IAACC,aAAa;IAAAC,QAAA,EAC5DX;EAAM,CACH,CAAC;AAEX,CAAC","ignoreList":[]}
@@ -5,7 +5,7 @@ import { fillMaxWidth, menuAnchor, testID as testIdModifier } from '@expo/ui/jet
5
5
  import { useAppTheme } from '@hzblj/kara-theme';
6
6
  import { useEffect, useMemo, useState } from 'react';
7
7
  import { Glyph } from "../../glyph/index.js";
8
- import { HostBoundary } from "../../host-context.js";
8
+ import { HostBoundary, useInsideHost } from "../../host-context.js";
9
9
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
10
10
  const MATCH_HEIGHT_ONLY = {
11
11
  horizontal: false,
@@ -15,6 +15,8 @@ const MATCH_HEIGHT_ONLY = {
15
15
  /**
16
16
  * Material's exposed dropdown: a read-only outlined field the width of its container, opening a menu of the options
17
17
  * under it. Its own host, themed like an `Island`, so it drops into React Native layout like the iOS picker does.
18
+ * Inside a `Screen` or `Island` it renders into that host instead (see `useInsideHost`): a host of its own there
19
+ * would leave the outer one no width, and the native views beside it would disappear.
18
20
  */
19
21
  export const Picker = ({
20
22
  disabled = false,
@@ -24,6 +26,7 @@ export const Picker = ({
24
26
  value
25
27
  }) => {
26
28
  const theme = useAppTheme();
29
+ const insideHost = useInsideHost();
27
30
  const [expanded, setExpanded] = useState(false);
28
31
  const selectedLabel = options.find(option => option.value === value)?.label ?? '';
29
32
  const label = useNativeState(selectedLabel);
@@ -36,51 +39,55 @@ export const Picker = ({
36
39
  useEffect(() => {
37
40
  label.set(selectedLabel);
38
41
  }, [label, selectedLabel]);
42
+ const menu = /*#__PURE__*/_jsxs(ExposedDropdownMenuBox, {
43
+ expanded: expanded,
44
+ onExpandedChange: disabled ? undefined : setExpanded,
45
+ children: [/*#__PURE__*/_jsx(OutlinedTextField, {
46
+ enabled: !disabled,
47
+ modifiers: fieldModifiers,
48
+ readOnly: true,
49
+ singleLine: true,
50
+ textStyle: {
51
+ color: theme.colorString('content.primary'),
52
+ fontFamily: theme.typography.body.fontFamily,
53
+ fontWeight: theme.typography.body.fontWeight
54
+ },
55
+ value: label,
56
+ children: /*#__PURE__*/_jsx(OutlinedTextField.TrailingIcon, {
57
+ children: /*#__PURE__*/_jsx(Glyph, {
58
+ color: "content.secondary",
59
+ name: "chevronDown",
60
+ size: "s20"
61
+ })
62
+ })
63
+ }), /*#__PURE__*/_jsx(ExposedDropdownMenu, {
64
+ containerColor: theme.color('surface.primary'),
65
+ expanded: expanded,
66
+ onDismissRequest: () => setExpanded(false),
67
+ children: options.map(option => /*#__PURE__*/_jsx(DropdownMenuItem, {
68
+ onClick: () => {
69
+ setExpanded(false);
70
+ onValueChange?.(option.value);
71
+ },
72
+ children: /*#__PURE__*/_jsx(DropdownMenuItem.Text, {
73
+ children: /*#__PURE__*/_jsx(ComposeText, {
74
+ color: theme.colorString(option.value === value ? 'content.accent' : 'content.primary'),
75
+ style: theme.typography.body,
76
+ children: option.label
77
+ })
78
+ })
79
+ }, option.value))
80
+ })]
81
+ });
82
+ if (insideHost) {
83
+ return menu;
84
+ }
39
85
  return /*#__PURE__*/_jsx(Host, {
40
86
  colorScheme: theme.dark ? 'dark' : 'light',
41
87
  matchContents: MATCH_HEIGHT_ONLY,
42
88
  seedColor: theme.materialSeed,
43
89
  children: /*#__PURE__*/_jsx(HostBoundary, {
44
- children: /*#__PURE__*/_jsxs(ExposedDropdownMenuBox, {
45
- expanded: expanded,
46
- onExpandedChange: disabled ? undefined : setExpanded,
47
- children: [/*#__PURE__*/_jsx(OutlinedTextField, {
48
- enabled: !disabled,
49
- modifiers: fieldModifiers,
50
- readOnly: true,
51
- singleLine: true,
52
- textStyle: {
53
- color: theme.colorString('content.primary'),
54
- fontFamily: theme.typography.body.fontFamily,
55
- fontWeight: theme.typography.body.fontWeight
56
- },
57
- value: label,
58
- children: /*#__PURE__*/_jsx(OutlinedTextField.TrailingIcon, {
59
- children: /*#__PURE__*/_jsx(Glyph, {
60
- color: "content.secondary",
61
- name: "chevronDown",
62
- size: "s20"
63
- })
64
- })
65
- }), /*#__PURE__*/_jsx(ExposedDropdownMenu, {
66
- containerColor: theme.color('surface.primary'),
67
- expanded: expanded,
68
- onDismissRequest: () => setExpanded(false),
69
- children: options.map(option => /*#__PURE__*/_jsx(DropdownMenuItem, {
70
- onClick: () => {
71
- setExpanded(false);
72
- onValueChange?.(option.value);
73
- },
74
- children: /*#__PURE__*/_jsx(DropdownMenuItem.Text, {
75
- children: /*#__PURE__*/_jsx(ComposeText, {
76
- color: theme.colorString(option.value === value ? 'content.accent' : 'content.primary'),
77
- style: theme.typography.body,
78
- children: option.label
79
- })
80
- })
81
- }, option.value))
82
- })]
83
- })
90
+ children: menu
84
91
  })
85
92
  });
86
93
  };
@@ -1 +1 @@
1
- {"version":3,"names":["Text","ComposeText","DropdownMenuItem","ExposedDropdownMenu","ExposedDropdownMenuBox","Host","OutlinedTextField","useNativeState","fillMaxWidth","menuAnchor","testID","testIdModifier","useAppTheme","useEffect","useMemo","useState","Glyph","HostBoundary","jsx","_jsx","jsxs","_jsxs","MATCH_HEIGHT_ONLY","horizontal","vertical","Picker","disabled","onValueChange","options","value","theme","expanded","setExpanded","selectedLabel","find","option","label","fieldModifiers","list","set","colorScheme","dark","matchContents","seedColor","materialSeed","children","onExpandedChange","undefined","enabled","modifiers","readOnly","singleLine","textStyle","color","colorString","fontFamily","typography","body","fontWeight","TrailingIcon","name","size","containerColor","onDismissRequest","map","onClick","style"],"sourceRoot":"../../../../src","sources":["atoms/picker/picker.android.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["Text","ComposeText","DropdownMenuItem","ExposedDropdownMenu","ExposedDropdownMenuBox","Host","OutlinedTextField","useNativeState","fillMaxWidth","menuAnchor","testID","testIdModifier","useAppTheme","useEffect","useMemo","useState","Glyph","HostBoundary","useInsideHost","jsx","_jsx","jsxs","_jsxs","MATCH_HEIGHT_ONLY","horizontal","vertical","Picker","disabled","onValueChange","options","value","theme","insideHost","expanded","setExpanded","selectedLabel","find","option","label","fieldModifiers","list","set","menu","onExpandedChange","undefined","children","enabled","modifiers","readOnly","singleLine","textStyle","color","colorString","fontFamily","typography","body","fontWeight","TrailingIcon","name","size","containerColor","onDismissRequest","map","onClick","style","colorScheme","dark","matchContents","seedColor","materialSeed"],"sourceRoot":"../../../../src","sources":["atoms/picker/picker.android.tsx"],"mappings":"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","ignoreList":[]}
@@ -1,9 +1,17 @@
1
1
  "use strict";
2
2
 
3
3
  import { Picker as NativePicker } from '@expo/ui/community/picker';
4
+ import { Picker as SwiftUIPicker, Text as SwiftUIText } from '@expo/ui/swift-ui';
5
+ import { disabled as disabledModifier, foregroundStyle, pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';
4
6
  import { useAppTheme } from '@hzblj/kara-theme';
5
- import { useCallback } from 'react';
7
+ import { useCallback, useMemo } from 'react';
8
+ import { useInsideHost } from "../../host-context.js";
6
9
  import { jsx as _jsx } from "react/jsx-runtime";
10
+ /**
11
+ * A SwiftUI wheel. On its own it is `@expo/ui`'s community picker, which brings a host of its own. Inside a `Screen` or
12
+ * `Island` it is the same wheel rendered into that host instead (see `useInsideHost`): a host nested in the island's
13
+ * stack is given no height there, and the wheel spills over the views around it.
14
+ */
7
15
  export const Picker = ({
8
16
  disabled = false,
9
17
  onValueChange,
@@ -12,14 +20,29 @@ export const Picker = ({
12
20
  value
13
21
  }) => {
14
22
  const theme = useAppTheme();
23
+ const insideHost = useInsideHost();
24
+ const color = theme.colorString('content.primary');
15
25
  const onChange = useCallback(next => onValueChange?.(String(next)), [onValueChange]);
26
+ const wheelModifiers = useMemo(() => [pickerStyle('wheel'), ...(disabled ? [disabledModifier(true)] : [])], [disabled]);
27
+ if (insideHost) {
28
+ return /*#__PURE__*/_jsx(SwiftUIPicker, {
29
+ modifiers: wheelModifiers,
30
+ onSelectionChange: onChange,
31
+ selection: value,
32
+ testID: testID,
33
+ children: options.map(option => /*#__PURE__*/_jsx(SwiftUIText, {
34
+ modifiers: [tag(option.value), foregroundStyle(color)],
35
+ children: option.label
36
+ }, option.value))
37
+ });
38
+ }
16
39
  return /*#__PURE__*/_jsx(NativePicker, {
17
40
  enabled: !disabled,
18
41
  onValueChange: onChange,
19
42
  selectedValue: value,
20
43
  testID: testID,
21
44
  children: options.map(option => /*#__PURE__*/_jsx(NativePicker.Item, {
22
- color: theme.colorString('content.primary'),
45
+ color: color,
23
46
  label: option.label,
24
47
  value: option.value
25
48
  }, option.value))
@@ -1 +1 @@
1
- {"version":3,"names":["Picker","NativePicker","useAppTheme","useCallback","jsx","_jsx","disabled","onValueChange","options","testID","value","theme","onChange","next","String","enabled","selectedValue","children","map","option","Item","color","colorString","label"],"sourceRoot":"../../../../src","sources":["atoms/picker/picker.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,YAAY,QAAO,2BAA2B;AAChE,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIjC,OAAO,MAAML,MAAuB,GAAGA,CAAC;EAACM,QAAQ,GAAG,KAAK;EAAEC,aAAa;EAAEC,OAAO;EAAEC,MAAM;EAAEC;AAAkB,CAAC,KAAK;EACjH,MAAMC,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,MAAMU,QAAQ,GAAGT,WAAW,CAAEU,IAA4B,IAAKN,aAAa,GAAGO,MAAM,CAACD,IAAI,CAAC,CAAC,EAAE,CAACN,aAAa,CAAC,CAAC;EAE9G,oBACEF,IAAA,CAACJ,YAAY;IAACc,OAAO,EAAE,CAACT,QAAS;IAACC,aAAa,EAAEK,QAAS;IAACI,aAAa,EAAEN,KAAM;IAACD,MAAM,EAAEA,MAAO;IAAAQ,QAAA,EAC7FT,OAAO,CAACU,GAAG,CAACC,MAAM,iBACjBd,IAAA,CAACJ,YAAY,CAACmB,IAAI;MAChBC,KAAK,EAAEV,KAAK,CAACW,WAAW,CAAC,iBAAiB,CAAE;MAE5CC,KAAK,EAAEJ,MAAM,CAACI,KAAM;MACpBb,KAAK,EAAES,MAAM,CAACT;IAAM,GAFfS,MAAM,CAACT,KAGb,CACF;EAAC,CACU,CAAC;AAEnB,CAAC","ignoreList":[]}
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":[]}
@@ -5,6 +5,7 @@ import { fillMaxWidth, testID as testIdModifier, weight } from '@expo/ui/jetpack
5
5
  import { haptics } from '@hzblj/expo-rich-haptics';
6
6
  import { useAppTheme } from '@hzblj/kara-theme';
7
7
  import { useCallback, useMemo } from 'react';
8
+ import { useInsideHost } from "../../host-context.js";
8
9
  import { jsx as _jsx } from "react/jsx-runtime";
9
10
  const MATCH_HEIGHT_ONLY = {
10
11
  horizontal: false,
@@ -16,8 +17,9 @@ const SEGMENT = [weight(1)];
16
17
 
17
18
  /**
18
19
  * Material's single-choice segmented buttons, the selected one filled with the accent like a checked `Switch`. Its own
19
- * host, themed like an `Island`, so it drops into React Native layout the way the iOS control does. Material plays
20
- * nothing on a new segment, so this plays `selection`.
20
+ * host, themed like an `Island`, so it drops into React Native layout the way the iOS control does. Inside a `Screen`
21
+ * or `Island` it renders into that host instead (see `useInsideHost`). Material plays nothing on a new segment, so this
22
+ * plays `selection`.
21
23
  */
22
24
  export const SegmentedControl = ({
23
25
  disabled = false,
@@ -27,6 +29,7 @@ export const SegmentedControl = ({
27
29
  values
28
30
  }) => {
29
31
  const theme = useAppTheme();
32
+ const insideHost = useInsideHost();
30
33
 
31
34
  // Every segment keeps the same outline, the selected one too: an accent border would run its fill out over the line
32
35
  // the others draw inside, and make it look taller than its neighbours.
@@ -52,26 +55,30 @@ export const SegmentedControl = ({
52
55
  haptics.selection();
53
56
  onChange?.(index, values[index] ?? '');
54
57
  }, [onChange, selectedIndex, values]);
58
+ const row = /*#__PURE__*/_jsx(SingleChoiceSegmentedButtonRow, {
59
+ modifiers: rowModifiers,
60
+ children: values.map((label, index) => /*#__PURE__*/_jsx(SegmentedButton, {
61
+ colors: colors,
62
+ enabled: !disabled,
63
+ modifiers: SEGMENT,
64
+ onClick: () => select(index),
65
+ selected: index === selectedIndex,
66
+ children: /*#__PURE__*/_jsx(SegmentedButton.Label, {
67
+ children: /*#__PURE__*/_jsx(Text, {
68
+ style: theme.typography.subheadlineMedium,
69
+ children: label
70
+ })
71
+ })
72
+ }, index))
73
+ });
74
+ if (insideHost) {
75
+ return row;
76
+ }
55
77
  return /*#__PURE__*/_jsx(Host, {
56
78
  colorScheme: theme.dark ? 'dark' : 'light',
57
79
  matchContents: MATCH_HEIGHT_ONLY,
58
80
  seedColor: theme.materialSeed,
59
- children: /*#__PURE__*/_jsx(SingleChoiceSegmentedButtonRow, {
60
- modifiers: rowModifiers,
61
- children: values.map((label, index) => /*#__PURE__*/_jsx(SegmentedButton, {
62
- colors: colors,
63
- enabled: !disabled,
64
- modifiers: SEGMENT,
65
- onClick: () => select(index),
66
- selected: index === selectedIndex,
67
- children: /*#__PURE__*/_jsx(SegmentedButton.Label, {
68
- children: /*#__PURE__*/_jsx(Text, {
69
- style: theme.typography.subheadlineMedium,
70
- children: label
71
- })
72
- })
73
- }, index))
74
- })
81
+ children: row
75
82
  });
76
83
  };
77
84
  //# sourceMappingURL=segmented-control.android.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["Host","SegmentedButton","SingleChoiceSegmentedButtonRow","Text","fillMaxWidth","testID","testIdModifier","weight","haptics","useAppTheme","useCallback","useMemo","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","SEGMENT","SegmentedControl","disabled","onChange","selectedIndex","values","theme","colors","activeBorderColor","color","activeContainerColor","activeContentColor","disabledActiveBorderColor","disabledActiveContainerColor","disabledActiveContentColor","disabledInactiveBorderColor","disabledInactiveContentColor","inactiveBorderColor","inactiveContentColor","rowModifiers","select","index","selection","colorScheme","dark","matchContents","seedColor","materialSeed","children","modifiers","map","label","enabled","onClick","selected","Label","style","typography","subheadlineMedium"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.android.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["Host","SegmentedButton","SingleChoiceSegmentedButtonRow","Text","fillMaxWidth","testID","testIdModifier","weight","haptics","useAppTheme","useCallback","useMemo","useInsideHost","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","SEGMENT","SegmentedControl","disabled","onChange","selectedIndex","values","theme","insideHost","colors","activeBorderColor","color","activeContainerColor","activeContentColor","disabledActiveBorderColor","disabledActiveContainerColor","disabledActiveContentColor","disabledInactiveBorderColor","disabledInactiveContentColor","inactiveBorderColor","inactiveContentColor","rowModifiers","select","index","selection","row","modifiers","children","map","label","enabled","onClick","selected","Label","style","typography","subheadlineMedium","colorScheme","dark","matchContents","seedColor","materialSeed"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.android.tsx"],"mappings":"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","ignoreList":[]}