@octane-xplat/picker 0.11.1 → 0.13.0

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 (5) hide show
  1. package/README.md +28 -35
  2. package/dist/native/octane-client-build.json +1 -1
  3. package/dist/web/Select.web.tsrx.js +30 -28
  4. package/dist/web/octane-client-build.json +1 -1
  5. package/package.json +3 -3
package/README.md CHANGED
@@ -1,31 +1,46 @@
1
1
  # `@octane-xplat/picker`
2
2
 
3
- An install boundary for platform-specific selection controls: a SwiftUI `Picker`
4
- on iOS, a Material 3 dropdown built with Jetpack Compose on Android, and an
5
- HTML `<select>` on web.
6
- Install the package in the app that renders a control. Import `SwiftUIPicker`
7
- from `@octane-xplat/picker/ios`, `MaterialDropdown` from
8
- `@octane-xplat/picker/android`, or `Select` from `@octane-xplat/picker/web` in
9
- the matching platform-suffixed file. Each entry exports its own component and
10
- types; there is no shared picker API at the package root.
3
+ Platform-native selection controls: a SwiftUI `Picker` on iOS, a Material 3
4
+ dropdown built with Jetpack Compose on Android, and an HTML `<select>` on web.
5
+ Use it when you want the OS-authentic control rather than a shared look.
6
+
7
+ ```sh
8
+ pnpm add @octane-xplat/picker
9
+ ```
10
+
11
+ There is no shared picker API at the package root. Each platform entry exports
12
+ its own component and types; import it from the platform subpath in a matching
13
+ platform-suffixed file:
14
+
15
+ | File suffix | Import | Component |
16
+ | --- | --- | --- |
17
+ | `*.ios.tsx` | `@octane-xplat/picker/ios` | `SwiftUIPicker` |
18
+ | `*.android.tsx` | `@octane-xplat/picker/android` | `MaterialDropdown` |
19
+ | `*.web.tsx` | `@octane-xplat/picker/web` | `Select` |
11
20
 
12
21
  ```tsx
13
22
  /** @jsxImportSource @nativescript-community/octane */
14
- // SwiftUIPickerExample.ios.tsx
23
+ // BagPicker.ios.tsx
24
+ import { useState } from 'octane'
15
25
  import { SwiftUIPicker } from '@octane-xplat/picker/ios'
16
26
 
17
- export function Picker() {
27
+ export function BagPicker() {
28
+ const [selection, setSelection] = useState('carry')
18
29
  return (
19
30
  <SwiftUIPicker
20
31
  label="Bag"
32
+ selection={selection}
33
+ onSelectionChange={setSelection}
21
34
  options={[{ id: 'carry', title: 'Carry-on' }]}
22
- defaultSelection="carry"
23
- onSelectionChange={console.log}
24
35
  />
25
36
  )
26
37
  }
27
38
  ```
28
39
 
40
+ Each entry's props follow its own platform's selection vocabulary and option
41
+ shapes: iOS uses SwiftUI selection IDs, Android uses Material dropdown keys and
42
+ enabled states, and web follows browser select values.
43
+
29
44
  ```tsx
30
45
  /** @jsxImportSource @nativescript-community/octane */
31
46
  // MaterialDropdownExample.android.tsx
@@ -59,27 +74,5 @@ export function Picker() {
59
74
  }
60
75
  ```
61
76
 
62
- The platform APIs use their own selection vocabulary and option shapes. The iOS
63
- entry uses SwiftUI selection IDs, the Android entry uses Material dropdown keys
64
- and enabled states, and the web entry follows browser select values. See the
65
- framework guide for details and maintained examples:
77
+ See the framework guide for details and maintained examples:
66
78
  [`docs/platform/native-picker.md`](../../docs/platform/native-picker.md).
67
-
68
- ```tsx
69
- /** @jsxImportSource @nativescript-community/octane */
70
- // BagPicker.ios.tsx
71
- import { useState } from 'octane'
72
- import { SwiftUIPicker } from '@octane-xplat/picker/ios'
73
-
74
- export function BagPicker() {
75
- const [selection, setSelection] = useState('carry')
76
- return (
77
- <SwiftUIPicker
78
- label="Bag"
79
- selection={selection}
80
- onSelectionChange={setSelection}
81
- options={[{ id: 'carry', title: 'Carry-on' }]}
82
- />
83
- )
84
- }
85
- ```
package/dist/native/octane-client-build.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 1,
3
- "buildId": "eb0fe49f-62ef-49e2-addf-379ce3ea2514",
3
+ "buildId": "9b2ddcdd-119c-4b67-a265-0026cd14470a",
4
4
  "mode": "production",
5
5
  "capabilities": {
6
6
  "independentHydration": false
package/dist/web/Select.web.tsrx.js CHANGED
@@ -1,23 +1,24 @@
1
- import { __s, bag14, bag5, child, clone, createScopedElement, delegateEvents, hookSlots, mapSlot, setAriaAttribute, setAttribute, setBooleanAttribute, setEventHandler, setStyle, sibling, template, useState } from "octane";
2
- import { bindSignalAttribute, bindSignalChild, bindSignalValue, compilerMemoRegion, enableSignalBindings, hookMemoEqual, setPlainAttribute } from "octane/internal/client";
1
+ import { __s, bag13, bag5, child, clone, createScopedElement, delegateEvents, hookSlots, mapSlot, setEventHandler, setSelectValue, setStyle, sibling, template, useState } from "octane";
2
+ import { childTextHoleUpdate, compilerMemoRegion, hookMemoEqual, setAriaAttributeIfChanged, setAttributeIfChanged, setBooleanAttributeIfChanged, setClassNameIfChanged, setPlainAttributeIfChanged } from "octane/internal/client";
3
3
  //#region src/Select.web.tsrx
4
- enableSignalBindings(1, true);
5
4
  delegateEvents(["change"]);
6
5
  var _t$0 = /* @__PURE__ */ template("<option></option>");
7
- var _t$1 = /* @__PURE__ */ template("<label><span></span><select data-octane-input=\"i:d2ddab07\"><!></select></label>");
6
+ var _t$1 = /* @__PURE__ */ template("<label><span></span><select><!></select></label>");
8
7
  var _hs$ = /* @__PURE__ */ hookSlots(2);
9
8
  var _key$1 = (option) => option.value;
10
9
  function __item$2(option, __s, __extra) {
11
10
  let _b = __s.slots[0];
12
11
  if (_b === void 0) {
13
- let _m1;
14
12
  const _root = clone(_t$0);
15
- _m1 = _root;
16
- _b = bag5(__s, _root, void 0, _m1, void 0, null, void 0);
13
+ _b = bag5(__s, _root, void 0, _root, void 0, null, __s);
14
+ }
15
+ _b.a = setAttributeIfChanged(option.value, _b.a, _b.b, "value");
16
+ _b.c = setBooleanAttributeIfChanged(option.disabled, _b.c, _b.b, "disabled");
17
+ {
18
+ const _v = option.label;
19
+ _b.d = childTextHoleUpdate(__s, 1, _b.b, _v, _b.d, _b.e);
20
+ _b.e = _v;
17
21
  }
18
- _b.a = bindSignalAttribute(__s, _b.a, _b.b, "value", option.value, "b:f8ba3234", setAttribute);
19
- _b.c = bindSignalAttribute(__s, _b.c, _b.b, "disabled", option.disabled, "b:97cc1a6e", setBooleanAttribute);
20
- _b.f = bindSignalChild(__s, _b.f, 1, _b.b, option.label, "b:f207a308", null, void 0, void 0, void 0, true);
21
22
  }
22
23
  var Select = /* @__PURE__ */ __s(function Select(props, __s, __extra) {
23
24
  const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
@@ -32,30 +33,27 @@ var Select = /* @__PURE__ */ __s(function Select(props, __s, __extra) {
32
33
  if (__s.block.pending && !__s.block.crossRenderUpdate) return;
33
34
  let _b = __s.slots[0];
34
35
  if (_b === void 0) {
35
- let _m1, _m4, _m6, _m9, _m11;
36
+ let _m10;
36
37
  const _root = clone(_t$1);
37
- _m1 = _root;
38
38
  const _el0 = child(_root);
39
- _m4 = _el0;
40
39
  const _el1 = sibling(_el0, 1);
41
- _m6 = _el1;
42
- _m9 = bindSignalValue(__s, void 0, _el1, value, "i:d2ddab07");
43
- setEventHandler(_el1, "$$change", (event) => {
40
+ setSelectValue(_el1, value);
41
+ setEventHandler(_el1, "$ochange", (event) => {
44
42
  const nextValue = event.target.value;
45
43
  if (!controlled) setInternalValue(nextValue);
46
44
  props.onChange?.(nextValue);
47
45
  });
48
- _m11 = child(_el1);
49
- _b = bag14(__s, _root, void 0, _m1, void 0, void 0, _m4, void 0, _m6, void 0, void 0, _m9, void 0, _m11, null, void 0);
46
+ _m10 = child(_el1);
47
+ _b = bag13(__s, _root, void 0, _root, void 0, void 0, _el0, void 0, _el1, void 0, void 0, void 0, _m10, null, __s);
50
48
  } else {
51
- _b.j = bindSignalValue(__s, _b.j, _b.g, value, "i:d2ddab07");
52
- setEventHandler(_b.g, "$$change", (event) => {
49
+ setSelectValue(_b.g, value);
50
+ setEventHandler(_b.g, "$ochange", (event) => {
53
51
  const nextValue = event.target.value;
54
52
  if (!controlled) setInternalValue(nextValue);
55
53
  props.onChange?.(nextValue);
56
54
  });
57
55
  }
58
- _b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:1fc7f020", "class");
56
+ _b.a = setClassNameIfChanged(props.className, _b.a, _b.b);
59
57
  {
60
58
  const _v = props.style;
61
59
  if (_b.c !== _v) {
@@ -63,12 +61,16 @@ var Select = /* @__PURE__ */ __s(function Select(props, __s, __extra) {
63
61
  _b.c = _v;
64
62
  }
65
63
  }
66
- _b.d = bindSignalAttribute(__s, _b.d, _b.e, "id", labelId, "b:9b7dc37e", setPlainAttribute);
67
- _b.f = bindSignalAttribute(__s, _b.f, _b.g, "id", props.id, "b:0291033d", setPlainAttribute);
68
- _b.h = bindSignalAttribute(__s, _b.h, _b.g, "aria-label", props.accessibilityLabel ?? props.label, "b:fc00c409", setAriaAttribute);
69
- _b.i = bindSignalAttribute(__s, _b.i, _b.g, "aria-labelledby", labelId, "b:adebc444", setAriaAttribute);
70
- _b.k = bindSignalAttribute(__s, _b.k, _b.g, "disabled", props.disabled, "b:1f344a18", setBooleanAttribute);
71
- _b.o = bindSignalChild(__s, _b.o, 1, _b.e, props.label, "b:7206b4a3", null, void 0, void 0, void 0, true);
64
+ _b.d = setPlainAttributeIfChanged(labelId, _b.d, _b.e, "id");
65
+ _b.f = setPlainAttributeIfChanged(props.id, _b.f, _b.g, "id");
66
+ _b.h = setAriaAttributeIfChanged(props.accessibilityLabel ?? props.label, _b.h, _b.g, "aria-label");
67
+ _b.i = setAriaAttributeIfChanged(labelId, _b.i, _b.g, "aria-labelledby");
68
+ _b.j = setBooleanAttributeIfChanged(props.disabled, _b.j, _b.g, "disabled");
69
+ {
70
+ const _v = props.label;
71
+ _b.l = childTextHoleUpdate(__s, 1, _b.e, _v, _b.l, _b.m);
72
+ _b.m = _v;
73
+ }
72
74
  {
73
75
  const _v = (__mapItems = props.options, __mapMethod = __mapItems.map, __mapItems);
74
76
  const __mapNative = mapSlot(_v, __mapMethod);
@@ -79,7 +81,7 @@ var Select = /* @__PURE__ */ __s(function Select(props, __s, __extra) {
79
81
  key: option.value,
80
82
  value: option.value,
81
83
  disabled: option.disabled
82
- }, () => option.label), _key$1, __item$2, 27, void 0, _b.l, 1);
84
+ }, () => option.label), _key$1, __item$2, 27, void 0, _b.k, 1);
83
85
  if (__memoCache === __memoCommitted) __memoCache = __memoCache.slice();
84
86
  __memoCache[0] = __memoDep;
85
87
  __memoCache[1] = __mapNative;
package/dist/web/octane-client-build.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 1,
3
- "buildId": "5eb861f0-d32c-4d36-98b8-8554dd250a19",
3
+ "buildId": "8679d795-c48b-472f-9c07-c4d34fd66238",
4
4
  "mode": "production",
5
5
  "capabilities": {
6
6
  "independentHydration": false
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@octane-xplat/picker",
3
- "version": "0.11.1",
3
+ "version": "0.13.0",
4
4
  "description": "Select control for Octane xplat — web select + SwiftUI picker (iOS) / Material dropdown (Android)",
5
5
  "keywords": [
6
6
  "android",
@@ -58,9 +58,9 @@
58
58
  },
59
59
  "devDependencies": {
60
60
  "@nativescript-community/octane": "0.2.4",
61
- "@nativescript/core": "9.1.2",
61
+ "@nativescript/core": "9.1.3",
62
62
  "@octanejs/vite-plugin": "0.1.61",
63
- "octane": "0.6.3",
63
+ "octane": "0.11.0",
64
64
  "tsrx-typegen": "0.2.2",
65
65
  "typescript": "5.9.3",
66
66
  "vite": "8.3.0"