@butternutbox/pawprint-native 1.6.3 → 2.0.1

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 (44) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +61 -0
  3. package/COMPONENT_GUIDELINES.md +57 -1
  4. package/dist/index.cjs +1459 -1380
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +81 -117
  7. package/dist/index.d.ts +81 -117
  8. package/dist/index.js +1206 -1125
  9. package/dist/index.js.map +1 -1
  10. package/package.json +3 -3
  11. package/src/__mocks__/react-native.tsx +33 -5
  12. package/src/__mocks__/rn-primitives/portal.tsx +71 -0
  13. package/src/components/atoms/Input/InputField.tsx +12 -2
  14. package/src/components/molecules/Drawer/Drawer.test.tsx +54 -2
  15. package/src/components/molecules/Drawer/DrawerBody.tsx +2 -17
  16. package/src/components/molecules/Drawer/DrawerContent.tsx +49 -2
  17. package/src/components/molecules/Drawer/DrawerOverlay.tsx +28 -16
  18. package/src/components/molecules/SelectField/AsyncSearch.test.tsx +373 -0
  19. package/src/components/molecules/SelectField/SelectDrawerField.stories.tsx +192 -0
  20. package/src/components/molecules/SelectField/SelectDrawerField.test.tsx +210 -0
  21. package/src/components/molecules/SelectField/SelectDrawerField.tsx +245 -0
  22. package/src/components/molecules/SelectField/SelectField.stories.tsx +221 -421
  23. package/src/components/molecules/SelectField/SelectField.test.tsx +214 -662
  24. package/src/components/molecules/SelectField/SelectField.tsx +269 -539
  25. package/src/components/molecules/SelectField/SelectFieldDropdown.tsx +90 -0
  26. package/src/components/molecules/SelectField/SelectFieldList.tsx +88 -0
  27. package/src/components/molecules/SelectField/SelectFieldOption.tsx +90 -0
  28. package/src/components/molecules/SelectField/core/index.ts +8 -0
  29. package/src/components/molecules/SelectField/core/listHeight.test.ts +22 -0
  30. package/src/components/molecules/SelectField/core/listHeight.ts +8 -0
  31. package/src/components/molecules/SelectField/core/options.ts +35 -0
  32. package/src/components/molecules/SelectField/core/useSelectOptions.ts +116 -0
  33. package/src/components/molecules/SelectField/index.ts +12 -9
  34. package/src/index.ts +0 -1
  35. package/src/test-utils.tsx +5 -1
  36. package/vitest.config.ts +7 -0
  37. package/src/components/molecules/SelectField/SelectFieldContent.tsx +0 -81
  38. package/src/components/molecules/SelectField/SelectFieldItem.tsx +0 -133
  39. package/src/components/molecules/SelectField/SelectFieldTrigger.tsx +0 -188
  40. package/src/components/molecules/SelectField/SelectFieldValue.tsx +0 -33
  41. package/src/components/molecules/SelectField/hooks/index.ts +0 -2
  42. package/src/components/molecules/SelectField/hooks/useSelectField.ts +0 -84
  43. package/src/hooks/index.ts +0 -1
  44. package/src/hooks/useDrawerKeyboardAvoidance.ts +0 -29
@@ -7,12 +7,12 @@
7
7
  CJS Build start
8
8
  ESM Build start
9
9
  DTS Build start
10
- CJS dist/index.cjs 575.22 KB
11
- CJS dist/index.cjs.map 1.13 MB
12
- CJS ⚡️ Build success in 8147ms
13
- ESM dist/index.js 543.22 KB
14
- ESM dist/index.js.map 1.13 MB
15
- ESM ⚡️ Build success in 8147ms
16
- DTS ⚡️ Build success in 21264ms
17
- DTS dist/index.d.cts 114.88 KB
18
- DTS dist/index.d.ts 114.88 KB
10
+ CJS dist/index.cjs 576.02 KB
11
+ CJS dist/index.cjs.map 1.12 MB
12
+ CJS ⚡️ Build success in 5883ms
13
+ ESM dist/index.js 544.36 KB
14
+ ESM dist/index.js.map 1.12 MB
15
+ ESM ⚡️ Build success in 5884ms
16
+ DTS ⚡️ Build success in 16031ms
17
+ DTS dist/index.d.cts 113.84 KB
18
+ DTS dist/index.d.ts 113.84 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,66 @@
1
1
  # @butternutbox/pawprint-native
2
2
 
3
+ ## 2.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 93d8c4f: Patch release of all packages to verify npm Trusted Publishing (OIDC) end to end.
8
+ - Updated dependencies [93d8c4f]
9
+ - @butternutbox/pawprint-fonts@2.0.2
10
+ - @butternutbox/pawprint-tokens@0.6.1
11
+
12
+ ## 2.0.0
13
+
14
+ ### Major Changes
15
+
16
+ - 2a71e7a: Rebuild the native select as two components sharing one core, and fix the
17
+ Drawer's backdrop and keyboard handling.
18
+
19
+ `SelectField` is now a combobox: the Pawprint InputField with a dropdown
20
+ rendered through a Portal and positioned from measured window coordinates,
21
+ replacing `@rn-primitives/select`. `SelectDrawerField` is new — the same field
22
+ opening a Drawer with a pinned search input, for long or searchable lists.
23
+ Both take `options` as data, use plain string ids, and support async search
24
+ via `onSearchQuery` with debouncing, a minimum query length and
25
+ stale-response handling.
26
+
27
+ `InputField` gains an optional `onPress`, which turns it into a value display
28
+ that opens something else rather than focusing its input.
29
+
30
+ `Drawer.Overlay` now renders and dismisses from anywhere outside the panel.
31
+ It mounted but painted nothing and took touches only above the panel:
32
+ `DrawerContent`'s animated wrapper spans the full width while the panel inside
33
+ is max-width centred, so it swallowed taps in the side gutters, and the
34
+ overlay's `absoluteFillObject` collapsed to zero size against a container with
35
+ no box. The wrapper is now `box-none` and the overlay is sized from the window.
36
+
37
+ The Drawer now lifts its content above the keyboard instead of padding its
38
+ scroll content by the keyboard's height, which left a block of empty space
39
+ inside the list and grew the panel a frame after the keyboard arrived. The
40
+ panel keeps its place at the bottom of the screen and carries an animated
41
+ spacer beneath its content, so the content clears the keyboard while the
42
+ panel's background still reaches the screen edge. On iOS the spacer travels
43
+ with the keyboard, using the will-show/will-hide event's own duration; Android
44
+ has no will-events and falls back to the did-events and a default duration.
45
+
46
+ `SelectDrawerField` takes an optional `listMaxHeight`. Its option list is
47
+ otherwise capped at half the window height, to 480pt, so a long list on a
48
+ tablet stops rather than filling the screen.
49
+
50
+ Breaking: `useDrawerKeyboardAvoidance` and `Drawer.Body`'s
51
+ `ignoreKeyboardAvoidance` prop are removed, along with the `hooks` barrel that
52
+ only existed to export the former. Both are redundant now the panel handles
53
+ the keyboard itself; neither has a replacement because neither is needed.
54
+
55
+ Breaking: `SelectField.Root`, `.Trigger`, `.Value`, `.Content`, `.Item` and the
56
+ `useSelectField` hook are removed. Pass `options` and use `value`/`onValueChange`
57
+ with string ids. The previous compound API threw on mount, so no working consumer
58
+ code depends on it.
59
+
60
+ Consumers must set `keyboardShouldPersistTaps` and `keyboardDismissMode` on their
61
+ outermost scroll container, and mount a `<PortalHost />` at the app root. See
62
+ COMPONENT_GUIDELINES.md section 18.
63
+
3
64
  ## 1.6.3
4
65
 
5
66
  ### Patch Changes
@@ -664,7 +664,63 @@ Native components should mirror the web API where possible:
664
664
  - Web uses `styled()` from `@mui/system` — native uses `styled()` from `@emotion/native`
665
665
  - Web has `shouldForwardProp` — native relies on prop name prefixing
666
666
 
667
- ### **18. Documentation Standards**
667
+ ### **18. Components That Render Outside Their Parent**
668
+
669
+ A dropdown, popover or sheet has to paint over whatever follows it. Two platform
670
+ rules make that harder than it looks, and both have bitten real components.
671
+
672
+ **Touches are not delivered outside a parent's bounds.** Absolutely positioning a
673
+ dropdown inside the field that owns it will paint (iOS does not clip by default)
674
+ but will not receive taps, because the rows sit outside the parent's box. Render
675
+ through `Portal` from `@rn-primitives/portal` and position from
676
+ `measureInWindow` coordinates instead.
677
+
678
+ ```tsx
679
+ // ❌ BAD: paints, but rows are untappable and later siblings cover them
680
+ ;<View>
681
+ <InputField />
682
+ {open && <Dropdown style={{ position: "absolute", top: "100%" }} />}
683
+ </View>
684
+
685
+ // ✅ GOOD: escapes the parent box, the sibling stack and any overflow: hidden
686
+ {
687
+ open && anchorRect && (
688
+ <Portal name={portalName}>
689
+ <Dropdown anchor={anchorRect} />
690
+ </Portal>
691
+ )
692
+ }
693
+ ```
694
+
695
+ **Portalled components require a `<PortalHost />` at the app root.** `Tooltip`,
696
+ `SelectField` and anything else using `Portal` render nothing without it. Say so
697
+ in the component's docs.
698
+
699
+ **Memoise portal children.** `Portal` writes its children into a global store from
700
+ an effect keyed on `children` identity, so unmemoised children rewrite that store
701
+ on every render of the host component.
702
+
703
+ #### Consumer requirements to document
704
+
705
+ Both of these live on the _consumer's_ scroll container, not the component, so
706
+ they must be stated in the component's documentation or they will be missed:
707
+
708
+ | Prop | Why |
709
+ | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
710
+ | `keyboardShouldPersistTaps="handled"` | Without it the first tap near a focused input is swallowed to dismiss the keyboard, and never reaches the row |
711
+ | `keyboardDismissMode="on-drag"` | Dismisses the keyboard on scroll, which blurs the field and closes the overlay rather than leaving it stranded at a stale position |
712
+
713
+ `keyboardShouldPersistTaps` must be set on the **outermost** scroll container.
714
+ React Native's responder capture follows the React tree root-downwards, so an
715
+ outer `ScrollView` left at the default `"never"` captures the touch before any
716
+ inner one is consulted — and a `Modal` does not isolate its contents, because the
717
+ React tree is unchanged by it.
718
+
719
+ In DirectSalesApp, `WizardScrollView` and `app/(auth)/log-in.tsx` set these.
720
+
721
+ ---
722
+
723
+ ### **19. Documentation Standards**
668
724
 
669
725
  **Add JSDoc comments for all exported components:**
670
726