@react-native-reusables/cli 0.0.17 → 0.0.18

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 (22) hide show
  1. package/__generated/components/primitives/context-menu/context-menu.tsx +50 -28
  2. package/__generated/components/primitives/context-menu/context-menu.web.tsx +39 -10
  3. package/__generated/components/primitives/context-menu/types.ts +17 -9
  4. package/__generated/components/primitives/dropdown-menu/dropdown-menu.tsx +73 -49
  5. package/__generated/components/primitives/dropdown-menu/dropdown-menu.web.tsx +49 -20
  6. package/__generated/components/primitives/dropdown-menu/types.ts +10 -9
  7. package/__generated/components/primitives/hover-card/hover-card.tsx +40 -32
  8. package/__generated/components/primitives/hover-card/hover-card.web.tsx +28 -23
  9. package/__generated/components/primitives/hover-card/types.ts +14 -5
  10. package/__generated/components/primitives/menubar/menubar.tsx +22 -24
  11. package/__generated/components/primitives/menubar/menubar.web.tsx +10 -5
  12. package/__generated/components/primitives/menubar/types.ts +3 -2
  13. package/__generated/components/primitives/popover/popover.tsx +61 -57
  14. package/__generated/components/primitives/popover/popover.web.tsx +44 -32
  15. package/__generated/components/primitives/popover/types.ts +7 -13
  16. package/__generated/components/primitives/select/select.tsx +32 -21
  17. package/__generated/components/primitives/select/select.web.tsx +26 -13
  18. package/__generated/components/primitives/select/types.ts +8 -6
  19. package/__generated/components/primitives/tooltip/tooltip.tsx +38 -32
  20. package/__generated/components/primitives/tooltip/tooltip.web.tsx +29 -15
  21. package/__generated/components/primitives/tooltip/types.ts +8 -10
  22. package/package.json +14 -14
@@ -1,5 +1,5 @@
1
1
  import * as Popover from '@radix-ui/react-popover';
2
- import { useAugmentedRef, useControllableState } from '@rnr/hooks';
2
+ import { useAugmentedRef } from '@rnr/hooks';
3
3
  import * as Slot from '@rnr/slot';
4
4
  import type {
5
5
  PositionedContentProps,
@@ -10,36 +10,36 @@ import type {
10
10
  } from '@rnr/types';
11
11
  import * as React from 'react';
12
12
  import { Pressable, View, type GestureResponderEvent } from 'react-native';
13
- import type {
14
- PopoverOverlayProps,
15
- PopoverPortalProps,
16
- PopoverRootProps,
17
- RootContext,
18
- } from './types';
19
-
20
- const RootContext = React.createContext<RootContext | null>(null);
21
-
22
- const Root = React.forwardRef<ViewRef, SlottableViewProps & PopoverRootProps>(
23
- ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
24
- const [open = false, onOpenChange] = useControllableState({
25
- prop: openProp,
26
- defaultProp: defaultOpen,
27
- onChange: onOpenChangeProp,
28
- });
29
- const Component = asChild ? Slot.View : View;
30
- return (
31
- <RootContext.Provider value={{ open, onOpenChange }}>
32
- <Popover.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
33
- <Component ref={ref} {...viewProps} />
34
- </Popover.Root>
35
- </RootContext.Provider>
36
- );
13
+ import type { PopoverOverlayProps, PopoverPortalProps, PopoverTriggerRef } from './types';
14
+
15
+ const RootContext = React.createContext<{
16
+ open: boolean;
17
+ onOpenChange: (open: boolean) => void;
18
+ } | null>(null);
19
+
20
+ const Root = React.forwardRef<
21
+ ViewRef,
22
+ SlottableViewProps & { onOpenChange?: (open: boolean) => void }
23
+ >(({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
24
+ const [open, setOpen] = React.useState(false);
25
+
26
+ function onOpenChange(value: boolean) {
27
+ setOpen(value);
28
+ onOpenChangeProp?.(value);
37
29
  }
38
- );
30
+ const Component = asChild ? Slot.View : View;
31
+ return (
32
+ <RootContext.Provider value={{ open, onOpenChange }}>
33
+ <Popover.Root open={open} onOpenChange={onOpenChange}>
34
+ <Component ref={ref} {...viewProps} />
35
+ </Popover.Root>
36
+ </RootContext.Provider>
37
+ );
38
+ });
39
39
 
40
40
  Root.displayName = 'RootWebPopover';
41
41
 
42
- function usePopoverContext() {
42
+ function useRootContext() {
43
43
  const context = React.useContext(RootContext);
44
44
  if (!context) {
45
45
  throw new Error('Popover compound components cannot be rendered outside the Popover component');
@@ -47,10 +47,20 @@ function usePopoverContext() {
47
47
  return context;
48
48
  }
49
49
 
50
- const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
50
+ const Trigger = React.forwardRef<PopoverTriggerRef, SlottablePressableProps>(
51
51
  ({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
52
- const augmentedRef = useAugmentedRef({ ref });
53
- const { onOpenChange, open } = usePopoverContext();
52
+ const { onOpenChange, open } = useRootContext();
53
+ const augmentedRef = useAugmentedRef({
54
+ ref,
55
+ methods: {
56
+ open() {
57
+ onOpenChange(true);
58
+ },
59
+ close() {
60
+ onOpenChange(false);
61
+ },
62
+ },
63
+ });
54
64
  function onPress(ev: GestureResponderEvent) {
55
65
  if (onPressProp) {
56
66
  onPressProp(ev);
@@ -141,7 +151,7 @@ Content.displayName = 'ContentWebPopover';
141
151
  const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
142
152
  ({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
143
153
  const augmentedRef = useAugmentedRef({ ref });
144
- const { onOpenChange, open } = usePopoverContext();
154
+ const { onOpenChange, open } = useRootContext();
145
155
 
146
156
  function onPress(ev: GestureResponderEvent) {
147
157
  if (onPressProp) {
@@ -176,4 +186,6 @@ const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
176
186
 
177
187
  Close.displayName = 'CloseWebPopover';
178
188
 
179
- export { Close, Content, Overlay, Portal, Root, Trigger, usePopoverContext };
189
+ export { Close, Content, Overlay, Portal, Root, Trigger, useRootContext };
190
+
191
+ export type { PopoverTriggerRef };
@@ -1,15 +1,4 @@
1
- import type { ForceMountable } from '@rnr/types';
2
-
3
- interface RootContext {
4
- open: boolean;
5
- onOpenChange: (value: boolean) => void;
6
- }
7
-
8
- interface PopoverRootProps {
9
- open?: boolean;
10
- defaultOpen?: boolean;
11
- onOpenChange?: (value: boolean) => void;
12
- }
1
+ import type { ForceMountable, PressableRef } from '@rnr/types';
13
2
 
14
3
  interface PopoverPortalProps extends ForceMountable {
15
4
  children: React.ReactNode;
@@ -27,4 +16,9 @@ interface PopoverOverlayProps extends ForceMountable {
27
16
  closeOnPress?: boolean;
28
17
  }
29
18
 
30
- export type { PopoverRootProps, PopoverPortalProps, PopoverOverlayProps, RootContext };
19
+ interface PopoverTriggerRef extends PressableRef {
20
+ open: () => void;
21
+ close: () => void;
22
+ }
23
+
24
+ export type { PopoverOverlayProps, PopoverPortalProps, PopoverTriggerRef };
@@ -1,4 +1,9 @@
1
- import { useControllableState, useRelativePosition, type LayoutPosition } from '@rnr/hooks';
1
+ import {
2
+ useAugmentedRef,
3
+ useControllableState,
4
+ useRelativePosition,
5
+ type LayoutPosition,
6
+ } from '@rnr/hooks';
2
7
  import { Portal as RNPPortal } from '@rnr/portal';
3
8
  import * as Slot from '@rnr/slot';
4
9
  import type {
@@ -29,10 +34,13 @@ import type {
29
34
  SelectPortalProps,
30
35
  SelectRootProps,
31
36
  SelectSeparatorProps,
37
+ SelectTriggerRef,
32
38
  SelectValueProps,
33
39
  } from './types';
34
40
 
35
41
  interface IRootContext extends RootContext {
42
+ open: boolean;
43
+ onOpenChange: (open: boolean) => void;
36
44
  triggerPosition: LayoutPosition | null;
37
45
  setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
38
46
  contentLayout: LayoutRectangle | null;
@@ -49,8 +57,6 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
49
57
  value: valueProp,
50
58
  defaultValue,
51
59
  onValueChange: onValueChangeProp,
52
- open: openProp,
53
- defaultOpen,
54
60
  onOpenChange: onOpenChangeProp,
55
61
  disabled,
56
62
  ...viewProps
@@ -58,11 +64,6 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
58
64
  ref
59
65
  ) => {
60
66
  const nativeID = React.useId();
61
- const [open = false, onOpenChange] = useControllableState({
62
- prop: openProp,
63
- defaultProp: defaultOpen,
64
- onChange: onOpenChangeProp,
65
- });
66
67
  const [value, onValueChange] = useControllableState({
67
68
  prop: valueProp,
68
69
  defaultProp: defaultValue,
@@ -70,6 +71,12 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
70
71
  });
71
72
  const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
72
73
  const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
74
+ const [open, setOpen] = React.useState(false);
75
+
76
+ function onOpenChange(value: boolean) {
77
+ setOpen(value);
78
+ onOpenChangeProp?.(value);
79
+ }
73
80
 
74
81
  const Component = asChild ? Slot.View : View;
75
82
  return (
@@ -103,25 +110,29 @@ function useRootContext() {
103
110
  return context;
104
111
  }
105
112
 
106
- const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
113
+ const Trigger = React.forwardRef<SelectTriggerRef, SlottablePressableProps>(
107
114
  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
108
- const triggerRef = React.useRef<View>(null);
109
115
  const { open, onOpenChange, disabled: disabledRoot, setTriggerPosition } = useRootContext();
110
116
 
111
- React.useImperativeHandle(
117
+ const augmentedRef = useAugmentedRef({
112
118
  ref,
113
- () => {
114
- if (!triggerRef.current) {
115
- return new View({});
116
- }
117
- return triggerRef.current;
119
+ methods: {
120
+ open: () => {
121
+ onOpenChange(true);
122
+ augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
123
+ setTriggerPosition({ width, pageX, pageY: pageY, height });
124
+ });
125
+ },
126
+ close: () => {
127
+ setTriggerPosition(null);
128
+ onOpenChange(false);
129
+ },
118
130
  },
119
- [triggerRef.current]
120
- );
131
+ });
121
132
 
122
133
  function onPress(ev: GestureResponderEvent) {
123
134
  if (disabled) return;
124
- triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
135
+ augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
125
136
  setTriggerPosition({ width, pageX, pageY: pageY, height });
126
137
  });
127
138
  onOpenChange(!open);
@@ -131,7 +142,7 @@ const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
131
142
  const Component = asChild ? Slot.Pressable : Pressable;
132
143
  return (
133
144
  <Component
134
- ref={triggerRef}
145
+ ref={augmentedRef}
135
146
  aria-disabled={disabled ?? undefined}
136
147
  role='combobox'
137
148
  onPress={onPress}
@@ -448,7 +459,7 @@ export {
448
459
  useRootContext,
449
460
  };
450
461
 
451
- export type { Option } from './types';
462
+ export type { Option, SelectTriggerRef } from './types';
452
463
 
453
464
  function onStartShouldSetResponder() {
454
465
  return true;
@@ -24,7 +24,13 @@ import type {
24
24
  SelectValueProps,
25
25
  } from './types';
26
26
 
27
- const SelectContext = React.createContext<RootContext | null>(null);
27
+ const SelectContext = React.createContext<
28
+ | (RootContext & {
29
+ open: boolean;
30
+ onOpenChange: (open: boolean) => void;
31
+ })
32
+ | null
33
+ >(null);
28
34
 
29
35
  /**
30
36
  * @web Parameter of `onValueChange` has the value of `value` for the `value` and the `label` of the selected Option
@@ -37,24 +43,22 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
37
43
  value: valueProp,
38
44
  defaultValue,
39
45
  onValueChange: onValueChangeProp,
40
- open: openProp,
41
- defaultOpen,
42
46
  onOpenChange: onOpenChangeProp,
43
47
  ...viewProps
44
48
  },
45
49
  ref
46
50
  ) => {
47
- const [open = false, onOpenChange] = useControllableState({
48
- prop: openProp,
49
- defaultProp: defaultOpen,
50
- onChange: onOpenChangeProp,
51
- });
52
-
53
51
  const [value, onValueChange] = useControllableState({
54
52
  prop: valueProp,
55
53
  defaultProp: defaultValue,
56
54
  onChange: onValueChangeProp,
57
55
  });
56
+ const [open, setOpen] = React.useState(false);
57
+
58
+ function onOpenChange(value: boolean) {
59
+ setOpen(value);
60
+ onOpenChangeProp?.(value);
61
+ }
58
62
 
59
63
  function onStrValueChange(val: string) {
60
64
  onValueChange({ value: val, label: val });
@@ -75,7 +79,6 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
75
79
  defaultValue={defaultValue?.value}
76
80
  onValueChange={onStrValueChange}
77
81
  open={open}
78
- defaultOpen={defaultOpen}
79
82
  onOpenChange={onOpenChange}
80
83
  >
81
84
  <Component ref={ref} {...viewProps} />
@@ -97,8 +100,18 @@ function useRootContext() {
97
100
 
98
101
  const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
99
102
  ({ asChild, role: _role, disabled, ...props }, ref) => {
100
- const augmentedRef = useAugmentedRef({ ref });
101
- const { open } = useRootContext();
103
+ const { open, onOpenChange } = useRootContext();
104
+ const augmentedRef = useAugmentedRef({
105
+ ref,
106
+ methods: {
107
+ open() {
108
+ onOpenChange(true);
109
+ },
110
+ close() {
111
+ onOpenChange(false);
112
+ },
113
+ },
114
+ });
102
115
 
103
116
  React.useLayoutEffect(() => {
104
117
  if (augmentedRef.current) {
@@ -316,4 +329,4 @@ export {
316
329
  useRootContext,
317
330
  };
318
331
 
319
- export type { Option } from './types';
332
+ export type { Option, SelectTriggerRef } from './types';
@@ -1,4 +1,4 @@
1
- import type { ForceMountable } from '@rnr/types';
1
+ import type { ForceMountable, PressableRef } from '@rnr/types';
2
2
 
3
3
  type Option =
4
4
  | {
@@ -10,8 +10,6 @@ type Option =
10
10
  interface RootContext {
11
11
  value: Option;
12
12
  onValueChange: (option: Option) => void;
13
- open: boolean;
14
- onOpenChange: (value: boolean) => void;
15
13
  disabled?: boolean;
16
14
  }
17
15
 
@@ -19,9 +17,7 @@ interface SelectRootProps {
19
17
  value?: Option;
20
18
  defaultValue?: Option;
21
19
  onValueChange?: (option: Option) => void;
22
- open?: boolean;
23
- defaultOpen?: boolean;
24
- onOpenChange?: (value: boolean) => void;
20
+ onOpenChange?: (open: boolean) => void;
25
21
  disabled?: boolean;
26
22
  /**
27
23
  * Platform: WEB ONLY
@@ -74,6 +70,11 @@ interface SelectSeparatorProps {
74
70
  decorative?: boolean;
75
71
  }
76
72
 
73
+ interface SelectTriggerRef extends PressableRef {
74
+ open: () => void;
75
+ close: () => void;
76
+ }
77
+
77
78
  export type {
78
79
  Option,
79
80
  RootContext,
@@ -83,5 +84,6 @@ export type {
83
84
  SelectPortalProps,
84
85
  SelectRootProps,
85
86
  SelectSeparatorProps,
87
+ SelectTriggerRef,
86
88
  SelectValueProps,
87
89
  };
@@ -1,13 +1,4 @@
1
- import * as React from 'react';
2
- import {
3
- BackHandler,
4
- Pressable,
5
- View,
6
- type GestureResponderEvent,
7
- type LayoutChangeEvent,
8
- type LayoutRectangle,
9
- } from 'react-native';
10
- import { useControllableState, useRelativePosition, type LayoutPosition } from '@rnr/hooks';
1
+ import { useAugmentedRef, useRelativePosition, type LayoutPosition } from '@rnr/hooks';
11
2
  import { Portal as RNPPortal } from '@rnr/portal';
12
3
  import * as Slot from '@rnr/slot';
13
4
  import type {
@@ -17,14 +8,25 @@ import type {
17
8
  SlottableViewProps,
18
9
  ViewRef,
19
10
  } from '@rnr/types';
11
+ import * as React from 'react';
12
+ import {
13
+ BackHandler,
14
+ Pressable,
15
+ View,
16
+ type GestureResponderEvent,
17
+ type LayoutChangeEvent,
18
+ type LayoutRectangle,
19
+ } from 'react-native';
20
20
  import type {
21
- RootContext,
22
21
  TooltipOverlayProps,
23
22
  TooltipPortalProps,
24
23
  TooltipRootProps,
24
+ TooltipTriggerRef,
25
25
  } from './types';
26
26
 
27
- interface IRootContext extends RootContext {
27
+ interface IRootContext {
28
+ open: boolean;
29
+ onOpenChange: (open: boolean) => void;
28
30
  triggerPosition: LayoutPosition | null;
29
31
  setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
30
32
  contentLayout: LayoutRectangle | null;
@@ -38,12 +40,10 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & TooltipRootProps>(
38
40
  (
39
41
  {
40
42
  asChild,
41
- defaultOpen,
42
- open: openProp,
43
- onOpenChange: onOpenChangeProp,
44
43
  delayDuration: _delayDuration,
45
44
  skipDelayDuration: _skipDelayDuration,
46
45
  disableHoverableContent: _disableHoverableContent,
46
+ onOpenChange: onOpenChangeProp,
47
47
  ...viewProps
48
48
  },
49
49
  ref
@@ -51,12 +51,12 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & TooltipRootProps>(
51
51
  const nativeID = React.useId();
52
52
  const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
53
53
  const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
54
+ const [open, setOpen] = React.useState(false);
54
55
 
55
- const [open = false, onOpenChange] = useControllableState({
56
- prop: openProp,
57
- defaultProp: defaultOpen,
58
- onChange: onOpenChangeProp,
59
- });
56
+ function onOpenChange(value: boolean) {
57
+ setOpen(value);
58
+ onOpenChangeProp?.(value);
59
+ }
60
60
 
61
61
  const Component = asChild ? Slot.View : View;
62
62
  return (
@@ -87,25 +87,29 @@ function useTooltipContext() {
87
87
  return context;
88
88
  }
89
89
 
90
- const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
90
+ const Trigger = React.forwardRef<TooltipTriggerRef, SlottablePressableProps>(
91
91
  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
92
- const triggerRef = React.useRef<View>(null);
93
92
  const { open, onOpenChange, setTriggerPosition } = useTooltipContext();
94
93
 
95
- React.useImperativeHandle(
94
+ const augmentedRef = useAugmentedRef({
96
95
  ref,
97
- () => {
98
- if (!triggerRef.current) {
99
- return new View({});
100
- }
101
- return triggerRef.current;
96
+ methods: {
97
+ open: () => {
98
+ onOpenChange(true);
99
+ augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
100
+ setTriggerPosition({ width, pageX, pageY: pageY, height });
101
+ });
102
+ },
103
+ close: () => {
104
+ setTriggerPosition(null);
105
+ onOpenChange(false);
106
+ },
102
107
  },
103
- [triggerRef.current]
104
- );
108
+ });
105
109
 
106
110
  function onPress(ev: GestureResponderEvent) {
107
111
  if (disabled) return;
108
- triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
112
+ augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
109
113
  setTriggerPosition({ width, pageX, pageY: pageY, height });
110
114
  });
111
115
  const newValue = !open;
@@ -116,7 +120,7 @@ const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
116
120
  const Component = asChild ? Slot.Pressable : Pressable;
117
121
  return (
118
122
  <Component
119
- ref={triggerRef}
123
+ ref={augmentedRef}
120
124
  aria-disabled={disabled ?? undefined}
121
125
  role='button'
122
126
  onPress={onPress}
@@ -266,6 +270,8 @@ Content.displayName = 'ContentNativeTooltip';
266
270
 
267
271
  export { Content, Overlay, Portal, Root, Trigger };
268
272
 
273
+ export type { TooltipTriggerRef };
274
+
269
275
  function onStartShouldSetResponder() {
270
276
  return true;
271
277
  }
@@ -1,7 +1,5 @@
1
1
  import * as Tooltip from '@radix-ui/react-tooltip';
2
- import * as React from 'react';
3
- import { Pressable, View, type GestureResponderEvent } from 'react-native';
4
- import { useAugmentedRef, useControllableState } from '@rnr/hooks';
2
+ import { useAugmentedRef } from '@rnr/hooks';
5
3
  import * as Slot from '@rnr/slot';
6
4
  import type {
7
5
  PositionedContentProps,
@@ -10,34 +8,38 @@ import type {
10
8
  SlottableViewProps,
11
9
  ViewRef,
12
10
  } from '@rnr/types';
11
+ import * as React from 'react';
12
+ import { Pressable, View, type GestureResponderEvent } from 'react-native';
13
13
  import type {
14
- RootContext,
15
14
  TooltipOverlayProps,
16
15
  TooltipPortalProps,
17
16
  TooltipRootProps,
17
+ TooltipTriggerRef,
18
18
  } from './types';
19
19
 
20
- const RootContext = React.createContext<RootContext | null>(null);
20
+ const RootContext = React.createContext<{
21
+ open: boolean;
22
+ onOpenChange: (open: boolean) => void;
23
+ } | null>(null);
21
24
 
22
25
  const Root = React.forwardRef<ViewRef, SlottableViewProps & TooltipRootProps>(
23
26
  (
24
27
  {
25
28
  asChild,
26
- defaultOpen,
27
- open: openProp,
28
- onOpenChange: onOpenChangeProp,
29
29
  delayDuration,
30
30
  skipDelayDuration,
31
31
  disableHoverableContent,
32
+ onOpenChange: onOpenChangeProp,
32
33
  ...viewProps
33
34
  },
34
35
  ref
35
36
  ) => {
36
- const [open = false, onOpenChange] = useControllableState({
37
- prop: openProp,
38
- defaultProp: defaultOpen,
39
- onChange: onOpenChangeProp,
40
- });
37
+ const [open, setOpen] = React.useState(false);
38
+
39
+ function onOpenChange(value: boolean) {
40
+ setOpen(value);
41
+ onOpenChangeProp?.(value);
42
+ }
41
43
 
42
44
  const Component = asChild ? Slot.View : View;
43
45
  return (
@@ -71,10 +73,20 @@ function useTooltipContext() {
71
73
  return context;
72
74
  }
73
75
 
74
- const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
76
+ const Trigger = React.forwardRef<TooltipTriggerRef, SlottablePressableProps>(
75
77
  ({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
76
- const augmentedRef = useAugmentedRef({ ref });
77
78
  const { onOpenChange, open } = useTooltipContext();
79
+ const augmentedRef = useAugmentedRef({
80
+ ref,
81
+ methods: {
82
+ open() {
83
+ onOpenChange(true);
84
+ },
85
+ close() {
86
+ onOpenChange(false);
87
+ },
88
+ },
89
+ });
78
90
  function onPress(ev: GestureResponderEvent) {
79
91
  if (onPressProp) {
80
92
  onPressProp(ev);
@@ -165,3 +177,5 @@ const Content = React.forwardRef<ViewRef, SlottableViewProps & PositionedContent
165
177
  Content.displayName = 'ContentWebTooltip';
166
178
 
167
179
  export { Content, Overlay, Portal, Root, Trigger };
180
+
181
+ export type { TooltipTriggerRef };
@@ -1,14 +1,7 @@
1
- import type { ForceMountable } from '@rnr/types';
2
-
3
- interface RootContext extends TooltipRootProps {
4
- open: boolean;
5
- onOpenChange: (value: boolean) => void;
6
- }
1
+ import type { ForceMountable, PressableRef } from '@rnr/types';
7
2
 
8
3
  interface TooltipRootProps {
9
- defaultOpen?: boolean;
10
- open?: boolean;
11
- onOpenChange?: (value: boolean) => void;
4
+ onOpenChange?: (open: boolean) => void;
12
5
  /**
13
6
  * Platform: WEB ONLY
14
7
  * @default 700
@@ -41,4 +34,9 @@ interface TooltipOverlayProps extends ForceMountable {
41
34
  closeOnPress?: boolean;
42
35
  }
43
36
 
44
- export type { RootContext, TooltipOverlayProps, TooltipPortalProps, TooltipRootProps };
37
+ interface TooltipTriggerRef extends PressableRef {
38
+ open: () => void;
39
+ close: () => void;
40
+ }
41
+
42
+ export type { TooltipOverlayProps, TooltipPortalProps, TooltipRootProps, TooltipTriggerRef };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-native-reusables/cli",
3
- "version": "0.0.17",
3
+ "version": "0.0.18",
4
4
  "description": "Add Universal components and primitives to your React-Native project.",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -66,37 +66,37 @@
66
66
  "type-fest": "^3.8.0",
67
67
  "typescript": "^5.3.3",
68
68
  "@rnr/alert-dialog": "0.0.0",
69
- "@rnr/accordion": "0.0.0",
70
69
  "@rnr/aspect-ratio": "0.0.0",
71
- "@rnr/checkbox": "0.0.0",
70
+ "@rnr/accordion": "0.0.0",
72
71
  "@rnr/avatar": "0.0.0",
72
+ "@rnr/checkbox": "0.0.0",
73
73
  "@rnr/collapsible": "0.0.0",
74
- "@rnr/context-menu": "0.0.0",
75
- "@rnr/dialog": "0.0.0",
76
74
  "@rnr/dropdown-menu": "0.0.0",
75
+ "@rnr/context-menu": "0.0.0",
77
76
  "@rnr/hooks": "0.0.0",
77
+ "@rnr/dialog": "0.0.0",
78
78
  "@rnr/hover-card": "0.0.0",
79
- "@rnr/label": "0.0.0",
79
+ "@rnr/portal": "0.0.0",
80
80
  "@rnr/menubar": "0.0.0",
81
+ "@rnr/label": "0.0.0",
81
82
  "@rnr/navigation-menu": "0.0.0",
82
- "@rnr/popover": "0.0.0",
83
- "@rnr/progress": "0.0.0",
84
83
  "@rnr/radio-group": "0.0.0",
84
+ "@rnr/progress": "0.0.0",
85
85
  "@rnr/select": "0.0.0",
86
86
  "@rnr/separator": "0.0.0",
87
- "@rnr/slider": "0.0.0",
88
87
  "@rnr/slot": "0.0.0",
89
- "@rnr/switch": "0.0.0",
90
- "@rnr/tabs": "0.0.0",
88
+ "@rnr/slider": "0.0.0",
89
+ "@rnr/popover": "0.0.0",
91
90
  "@rnr/table": "0.0.0",
91
+ "@rnr/switch": "0.0.0",
92
92
  "@rnr/toast": "0.0.0",
93
93
  "@rnr/reusables": "0.0.0",
94
- "@rnr/portal": "0.0.0",
95
- "@rnr/toolbar": "0.0.0",
96
94
  "@rnr/toggle-group": "0.0.0",
97
- "@rnr/toggle": "0.0.0",
98
95
  "@rnr/types": "0.0.0",
99
96
  "@rnr/utils": "0.0.0",
97
+ "@rnr/toggle": "0.0.0",
98
+ "@rnr/toolbar": "0.0.0",
99
+ "@rnr/tabs": "0.0.0",
100
100
  "@rnr/tooltip": "0.0.0"
101
101
  },
102
102
  "scripts": {