@tamagui/popper 1.0.0-beta.8 → 1.0.1-beta.101

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/dist/cjs/Popper.js +38 -16
  2. package/dist/cjs/Popper.js.map +2 -2
  3. package/dist/cjs/index.js +2 -4
  4. package/dist/cjs/index.js.map +2 -2
  5. package/dist/cjs/useFloating.js +2 -3
  6. package/dist/cjs/useFloating.js.map +2 -2
  7. package/dist/esm/Popper.js +101 -62
  8. package/dist/esm/Popper.js.map +2 -2
  9. package/dist/esm/index.js +2 -3
  10. package/dist/esm/index.js.map +1 -1
  11. package/dist/esm/useFloating.js +2 -4
  12. package/dist/esm/useFloating.js.map +2 -2
  13. package/dist/jsx/Popper.js +41 -21
  14. package/dist/jsx/Popper.js.map +7 -0
  15. package/dist/jsx/floating.js +1 -0
  16. package/dist/jsx/floating.js.map +7 -0
  17. package/dist/jsx/floating.native.js +1 -0
  18. package/dist/jsx/floating.native.js.map +7 -0
  19. package/dist/jsx/index.js +3 -3
  20. package/dist/jsx/index.js.map +7 -0
  21. package/dist/jsx/useFloating.js +3 -4
  22. package/dist/jsx/useFloating.js.map +7 -0
  23. package/package.json +15 -12
  24. package/src/Popper.tsx +331 -0
  25. package/src/floating.native.tsx +1 -0
  26. package/src/floating.tsx +1 -0
  27. package/src/index.tsx +2 -0
  28. package/src/useFloating.tsx +20 -0
  29. package/types/Popper.d.ts +65 -53
  30. package/types/Popper.d.ts.map +1 -1
  31. package/types/floating.d.ts +0 -0
  32. package/types/floating.d.ts.map +0 -0
  33. package/types/floating.native.d.ts +0 -0
  34. package/types/floating.native.d.ts.map +0 -0
  35. package/types/index.d.ts +1 -1
  36. package/types/index.d.ts.map +1 -1
  37. package/types/useFloating.d.ts +3 -2
  38. package/types/useFloating.d.ts.map +1 -1
  39. package/types/useFloating.native.d.ts +0 -2
  40. package/types/useFloating.native.d.ts.map +0 -1
  41. package/types/useFloating.web.d.ts +0 -2
  42. package/types/useFloating.web.d.ts.map +0 -1
package/dist/esm/index.js CHANGED
@@ -1,7 +1,6 @@
1
- import { FloatingOverrideContext, UseFloatingFn } from "./useFloating";
1
+ import { FloatingOverrideContext } from "./useFloating";
2
2
  export * from "./Popper";
3
3
  export {
4
- FloatingOverrideContext,
5
- UseFloatingFn
4
+ FloatingOverrideContext
6
5
  };
7
6
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.tsx"],
4
- "sourcesContent": ["export { FloatingOverrideContext, UseFloatingFn } from './useFloating'\nexport * from './Popper'\n"],
4
+ "sourcesContent": ["export { FloatingOverrideContext, type UseFloatingFn } from './useFloating'\nexport * from './Popper'\n"],
5
5
  "mappings": "AAAA;AACA;",
6
6
  "names": []
7
7
  }
@@ -1,13 +1,11 @@
1
- var __defProp = Object.defineProperty;
2
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
1
  import { createContext, useContext } from "react";
4
2
  import * as Floating from "./floating";
5
3
  const FloatingOverrideContext = createContext(null);
6
- const useFloating = /* @__PURE__ */ __name((props) => {
4
+ const useFloating = (props) => {
7
5
  var _a;
8
6
  const context = useContext(FloatingOverrideContext);
9
7
  return (_a = context || Floating.useFloating) == null ? void 0 : _a(props);
10
- }, "useFloating");
8
+ };
11
9
  export {
12
10
  FloatingOverrideContext,
13
11
  useFloating
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/useFloating.tsx"],
4
- "sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingResult = ReturnType<UseFloatingFn> & {\n getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingResult => {\n const context = useContext(FloatingOverrideContext)\n return (context || Floating.useFloating)?.(props)\n}\n"],
5
- "mappings": ";;AAAA;AAEA;AAWO,MAAM,0BAA0B,cAAoC,IAAI;AAExE,MAAM,cAAc,wBAAC,UAA+C;AAf3E;AAgBE,QAAM,UAAU,WAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C,GAH2B;",
4
+ "sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingReturn = Floating.UseFloatingReturn & {\n context?: any\n getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingReturn => {\n const context = useContext(FloatingOverrideContext)\n return (context || Floating.useFloating)?.(props)\n}\n"],
5
+ "mappings": "AAAA;AAEA;AAYO,MAAM,0BAA0B,cAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAhB3E;AAiBE,QAAM,UAAU,WAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
6
6
  "names": []
7
7
  }
@@ -1,14 +1,13 @@
1
- var __defProp = Object.defineProperty;
2
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
1
  import { useComposedRefs } from "@tamagui/compose-refs";
4
2
  import {
5
3
  getTokens,
6
4
  getVariableValue,
5
+ stepTokenUpOrDown,
7
6
  styled,
8
7
  useIsomorphicLayoutEffect
9
8
  } from "@tamagui/core";
10
9
  import { createContextScope } from "@tamagui/create-context";
11
- import { SizableStack, YStack } from "@tamagui/stacks";
10
+ import { ThemeableStack, YStack } from "@tamagui/stacks";
12
11
  import * as React from "react";
13
12
  import { arrow, autoUpdate, flip, offset, shift } from "./floating";
14
13
  import { useFloating } from "./useFloating";
@@ -16,8 +15,16 @@ const POPPER_NAME = "Popper";
16
15
  const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
17
16
  const createPopperScope = createScope;
18
17
  const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
19
- const Popper = /* @__PURE__ */ __name((props) => {
20
- const { __scopePopper, children, size, placement = "bottom", stayInFrame, allowFlip } = props;
18
+ const Popper = (props) => {
19
+ const {
20
+ __scopePopper,
21
+ children,
22
+ size,
23
+ strategy = "absolute",
24
+ placement = "bottom",
25
+ stayInFrame,
26
+ allowFlip
27
+ } = props;
21
28
  const [isMounted, setIsMounted] = React.useState(false);
22
29
  useIsomorphicLayoutEffect(() => {
23
30
  setIsMounted(true);
@@ -27,6 +34,7 @@ const Popper = /* @__PURE__ */ __name((props) => {
27
34
  const [arrowSize, setArrowSize] = React.useState(0);
28
35
  const arrowRef = React.useRef();
29
36
  const floating = useFloating({
37
+ strategy,
30
38
  placement,
31
39
  middleware: [
32
40
  stayInFrame ? shift(stayInFrame) : null,
@@ -50,7 +58,7 @@ const Popper = /* @__PURE__ */ __name((props) => {
50
58
  return middlewareData.arrow;
51
59
  }, [JSON.stringify(middlewareData.arrow || {})]);
52
60
  return <PopperProvider scope={__scopePopper} anchorRef={anchorRef} size={size} arrowRef={composedArrowRefs} arrowStyle={arrowStyle} onArrowSize={setArrowSize} isMounted={isMounted} {...floating}>{children}</PopperProvider>;
53
- }, "Popper");
61
+ };
54
62
  Popper.displayName = POPPER_NAME;
55
63
  const ANCHOR_NAME = "PopperAnchor";
56
64
  const PopperAnchor = React.forwardRef((props, forwardedRef) => {
@@ -69,21 +77,31 @@ const PopperAnchor = React.forwardRef((props, forwardedRef) => {
69
77
  });
70
78
  PopperAnchor.displayName = ANCHOR_NAME;
71
79
  const CONTENT_NAME = "PopperContent";
72
- const PopperContentFrame = styled(SizableStack, {
80
+ const PopperContentFrame = styled(ThemeableStack, {
73
81
  name: "PopperContent",
74
82
  backgroundColor: "$background",
75
83
  alignItems: "center",
84
+ radiused: true,
85
+ variants: {
86
+ size: {
87
+ "...size": (val, { tokens }) => {
88
+ return {
89
+ padding: tokens.space[val],
90
+ borderRadius: tokens.radius[val]
91
+ };
92
+ }
93
+ }
94
+ },
76
95
  defaultVariants: {
77
96
  size: "$4"
78
97
  }
79
98
  });
80
- const PopperContent = React.forwardRef((props, forwardedRef) => {
99
+ const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, forwardedRef) => {
81
100
  const { __scopePopper, ...contentProps } = props;
82
101
  const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
83
102
  const contentRefs = useComposedRefs(floating, forwardedRef);
84
103
  const contents = React.useMemo(() => {
85
- var _a;
86
- return <PopperContentFrame key="popper-content-frame" data-placement={placement} data-strategy={strategy} {...contentProps} size={(_a = contentProps.size) != null ? _a : size} />;
104
+ return <PopperContentFrame key="popper-content-frame" data-placement={placement} data-strategy={strategy} {...contentProps} size={contentProps.size || size} />;
87
105
  }, [placement, strategy, props]);
88
106
  if (!isMounted) {
89
107
  return null;
@@ -92,10 +110,10 @@ const PopperContent = React.forwardRef((props, forwardedRef) => {
92
110
  ref: contentRefs,
93
111
  x: x || 0,
94
112
  y: y || 0,
95
- position: "absolute"
113
+ position: strategy
96
114
  };
97
115
  return <YStack {...getFloatingProps ? getFloatingProps(frameProps) : frameProps}>{contents}</YStack>;
98
- });
116
+ }));
99
117
  PopperContent.displayName = CONTENT_NAME;
100
118
  const ARROW_NAME = "PopperArrow";
101
119
  const PopperArrowFrame = styled(YStack, {
@@ -103,7 +121,8 @@ const PopperArrowFrame = styled(YStack, {
103
121
  borderColor: "$borderColor",
104
122
  backgroundColor: "$background",
105
123
  position: "absolute",
106
- zIndex: 1
124
+ zIndex: -1,
125
+ pointerEvents: "none"
107
126
  });
108
127
  const opposites = {
109
128
  top: "bottom",
@@ -111,19 +130,18 @@ const opposites = {
111
130
  bottom: "top",
112
131
  left: "right"
113
132
  };
114
- const PopperArrow = React.forwardRef(/* @__PURE__ */ __name(function PopperArrow2(props, forwardedRef) {
115
- var _a, _b;
133
+ const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function PopperArrow2(props, forwardedRef) {
116
134
  const { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props;
117
135
  const context = usePopperContext(ARROW_NAME, __scopePopper);
118
136
  const tokens = getTokens();
119
137
  const sizeVal = sizeProp != null ? sizeProp : context.size;
120
- const sizeValResolved = getVariableValue((_b = (_a = tokens.size[sizeVal]) != null ? _a : sizeVal) != null ? _b : 12);
138
+ const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]));
121
139
  const size = +sizeValResolved;
122
140
  const { placement } = context;
123
141
  const { x, y } = context.arrowStyle || { x: 0, y: 0 };
124
142
  const refs = useComposedRefs(context.arrowRef, forwardedRef);
125
143
  const primaryPlacement = placement ? placement.split("-")[0] : "top";
126
- let arrowStyle = { x, y, width: size, height: size };
144
+ const arrowStyle = { x, y, width: size, height: size };
127
145
  if (primaryPlacement) {
128
146
  const oppSide = opposites[primaryPlacement];
129
147
  if (oppSide) {
@@ -137,8 +155,8 @@ const PopperArrow = React.forwardRef(/* @__PURE__ */ __name(function PopperArrow
137
155
  }
138
156
  }
139
157
  useIsomorphicLayoutEffect(() => {
140
- var _a2;
141
- (_a2 = context.onArrowSize) == null ? void 0 : _a2.call(context, size);
158
+ var _a;
159
+ (_a = context.onArrowSize) == null ? void 0 : _a.call(context, size);
142
160
  }, [size, context.onArrowSize]);
143
161
  return <PopperArrowFrame {...arrowProps} ref={refs} {...arrowStyle} rotate="45deg" {...primaryPlacement === "top" && {
144
162
  borderBottomWidth: borderWidth,
@@ -153,12 +171,14 @@ const PopperArrow = React.forwardRef(/* @__PURE__ */ __name(function PopperArrow
153
171
  borderBottomWidth: borderWidth,
154
172
  borderLeftWidth: borderWidth
155
173
  }} />;
156
- }, "PopperArrow"));
174
+ }));
157
175
  PopperArrow.displayName = ARROW_NAME;
158
176
  export {
159
177
  Popper,
160
178
  PopperAnchor,
161
179
  PopperArrow,
162
180
  PopperContent,
163
- createPopperScope
181
+ createPopperScope,
182
+ usePopperContext
164
183
  };
184
+ //# sourceMappingURL=Popper.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/Popper.tsx"],
4
+ "sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n StackProps,\n getTokens,\n getVariableValue,\n stepTokenUpOrDown,\n styled,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, Strategy, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingReturn, useFloating } from './useFloating'\n\ntype ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never\ntype FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper'\n\ntype ScopedProps<P> = P & { __scopePopper?: Scope }\nconst [createPopperContext, createScope] = createContextScope(POPPER_NAME)\n\nexport const createPopperScope = createScope\n\ntype PopperContextValue = UseFloatingReturn & {\n isMounted: boolean\n anchorRef: any\n size?: SizeTokens\n placement?: Placement\n arrowRef: any\n onArrowSize?: (val: number) => void\n arrowStyle?: Partial<Coords> & {\n centerOffset: number\n }\n}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n size?: SizeTokens\n children?: React.ReactNode\n placement?: Placement\n stayInFrame?: ShiftProps\n allowFlip?: FlipProps\n strategy?: Strategy\n}\n\nexport const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n const {\n __scopePopper,\n children,\n size,\n strategy = 'absolute',\n placement = 'bottom',\n stayInFrame,\n allowFlip,\n } = props\n\n const [isMounted, setIsMounted] = React.useState(false)\n useIsomorphicLayoutEffect(() => {\n setIsMounted(true)\n }, [])\n\n const anchorRef = React.useRef<any>()\n const [arrowEl, setArrow] = React.useState<HTMLSpanElement | null>(null)\n const [arrowSize, setArrowSize] = React.useState(0)\n const arrowRef = React.useRef()\n\n const floating = useFloating({\n strategy,\n placement,\n middleware: [\n stayInFrame ? shift(stayInFrame) : (null as any),\n allowFlip ? flip(allowFlip) : (null as any),\n arrowEl ? arrow({ element: arrowEl }) : (null as any),\n arrowSize ? offset(arrowSize) : (null as any),\n ].filter(Boolean),\n })\n\n const { refs, middlewareData } = floating\n\n const composedArrowRefs = useComposedRefs<any>(arrowRef, setArrow)\n\n useIsomorphicLayoutEffect(() => {\n floating.reference(anchorRef.current)\n }, [anchorRef])\n\n React.useEffect(() => {\n if (!refs.reference.current || !refs.floating.current) {\n return\n }\n // Only call this when the floating element is rendered\n return autoUpdate(refs.reference.current, refs.floating.current, floating.update)\n }, [refs.floating.current, refs.reference.current])\n\n const arrowStyle = React.useMemo(() => {\n return middlewareData.arrow\n }, [JSON.stringify(middlewareData.arrow || {})])\n\n return (\n <PopperProvider\n scope={__scopePopper}\n anchorRef={anchorRef}\n size={size}\n arrowRef={composedArrowRefs}\n arrowStyle={arrowStyle}\n onArrowSize={setArrowSize}\n isMounted={isMounted}\n {...floating}\n >\n {children}\n </PopperProvider>\n )\n}\n\nPopper.displayName = POPPER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor'\n\ntype PopperAnchorRef = HTMLElement | View\n\nexport type PopperAnchorProps = YStackProps & {\n virtualRef?: React.RefObject<any>\n}\n\nexport const PopperAnchor = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\n const { __scopePopper, virtualRef, ...anchorProps } = props\n const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper)\n const ref = React.useRef<PopperAnchorRef>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)\n if (virtualRef) {\n return null\n }\n const stackProps = {\n ref: composedRefs,\n ...anchorProps,\n }\n return <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(ThemeableStack, {\n name: 'PopperContent',\n backgroundColor: '$background',\n alignItems: 'center',\n radiused: true,\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n padding: tokens.space[val],\n borderRadius: tokens.radius[val],\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const PopperContent = PopperContentFrame.extractable(\n React.forwardRef<PopperContentElement, PopperContentProps>(\n (props: ScopedProps<PopperContentProps>, forwardedRef) => {\n const { __scopePopper, ...contentProps } = props\n const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } =\n usePopperContext(CONTENT_NAME, __scopePopper)\n const contentRefs = useComposedRefs<any>(floating, forwardedRef)\n\n const contents = React.useMemo(() => {\n return (\n <PopperContentFrame\n key=\"popper-content-frame\"\n data-placement={placement}\n data-strategy={strategy}\n {...contentProps}\n // @ts-ignore\n size={contentProps.size || size}\n />\n )\n }, [placement, strategy, props])\n\n // all poppers hidden on ssr by default\n if (!isMounted) {\n return null\n }\n\n const frameProps = {\n ref: contentRefs,\n x: x || 0,\n y: y || 0,\n position: strategy,\n }\n\n // outer frame because we explicitly dont want animation to apply to this\n return (\n <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n {contents}\n </YStack>\n )\n }\n )\n)\n\nPopperContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow'\n\ntype PopperArrowElement = HTMLElement | View\n\nexport type PopperArrowProps = YStackProps & {\n offset?: number\n size?: SizeTokens\n}\n\nconst PopperArrowFrame = styled(YStack, {\n name: 'PopperArrow',\n borderColor: '$borderColor',\n backgroundColor: '$background',\n position: 'absolute',\n zIndex: -1,\n pointerEvents: 'none',\n})\n\nconst opposites = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n}\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n props: ScopedProps<PopperArrowProps>,\n forwardedRef\n ) {\n const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n const context = usePopperContext(ARROW_NAME, __scopePopper)\n const tokens = getTokens()\n const sizeVal = sizeProp ?? context.size\n const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]))\n const size = +sizeValResolved\n const { placement } = context\n const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n const arrowStyle: StackProps = { x, y, width: size, height: size }\n if (primaryPlacement) {\n const oppSide = opposites[primaryPlacement]\n if (oppSide) {\n arrowStyle[oppSide] = -size / 2\n }\n if (oppSide === 'top' || oppSide === 'bottom') {\n arrowStyle.left = 0\n }\n if (oppSide === 'left' || oppSide === 'right') {\n arrowStyle.top = 0\n }\n }\n\n // send the Arrow's offset up to Popper\n useIsomorphicLayoutEffect(() => {\n context.onArrowSize?.(size)\n }, [size, context.onArrowSize])\n\n return (\n <PopperArrowFrame\n {...arrowProps}\n ref={refs}\n {...arrowStyle}\n rotate=\"45deg\"\n {...(primaryPlacement === 'top' && {\n borderBottomWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'bottom' && {\n borderTopWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n {...(primaryPlacement === 'left' && {\n borderTopWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'right' && {\n borderBottomWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n />\n )\n })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -1 +1,2 @@
1
1
  export * from "@floating-ui/react-dom";
2
+ //# sourceMappingURL=floating.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/floating.tsx"],
4
+ "sourcesContent": ["export * from '@floating-ui/react-dom'\n"],
5
+ "mappings": "AAAA;",
6
+ "names": []
7
+ }
@@ -1 +1,2 @@
1
1
  export * from "@floating-ui/react-native";
2
+ //# sourceMappingURL=floating.native.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/floating.native.tsx"],
4
+ "sourcesContent": ["export * from '@floating-ui/react-native'\n"],
5
+ "mappings": "AAAA;",
6
+ "names": []
7
+ }
package/dist/jsx/index.js CHANGED
@@ -1,6 +1,6 @@
1
- import { FloatingOverrideContext, UseFloatingFn } from "./useFloating";
1
+ import { FloatingOverrideContext } from "./useFloating";
2
2
  export * from "./Popper";
3
3
  export {
4
- FloatingOverrideContext,
5
- UseFloatingFn
4
+ FloatingOverrideContext
6
5
  };
6
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/index.tsx"],
4
+ "sourcesContent": ["export { FloatingOverrideContext, type UseFloatingFn } from './useFloating'\nexport * from './Popper'\n"],
5
+ "mappings": "AAAA;AACA;",
6
+ "names": []
7
+ }
@@ -1,14 +1,13 @@
1
- var __defProp = Object.defineProperty;
2
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
1
  import { createContext, useContext } from "react";
4
2
  import * as Floating from "./floating";
5
3
  const FloatingOverrideContext = createContext(null);
6
- const useFloating = /* @__PURE__ */ __name((props) => {
4
+ const useFloating = (props) => {
7
5
  var _a;
8
6
  const context = useContext(FloatingOverrideContext);
9
7
  return (_a = context || Floating.useFloating) == null ? void 0 : _a(props);
10
- }, "useFloating");
8
+ };
11
9
  export {
12
10
  FloatingOverrideContext,
13
11
  useFloating
14
12
  };
13
+ //# sourceMappingURL=useFloating.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/useFloating.tsx"],
4
+ "sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingReturn = Floating.UseFloatingReturn & {\n context?: any\n getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingReturn => {\n const context = useContext(FloatingOverrideContext)\n return (context || Floating.useFloating)?.(props)\n}\n"],
5
+ "mappings": "AAAA;AAEA;AAYO,MAAM,0BAA0B,cAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAhB3E;AAiBE,QAAM,UAAU,WAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
6
+ "names": []
7
+ }
package/package.json CHANGED
@@ -1,13 +1,16 @@
1
1
  {
2
2
  "name": "@tamagui/popper",
3
- "version": "1.0.0-beta.8",
4
- "sideEffects": true,
3
+ "version": "1.0.1-beta.101",
4
+ "sideEffects": [
5
+ "*.css"
6
+ ],
5
7
  "source": "src/index.ts",
6
- "typings": "types",
8
+ "types": "./types/index.d.ts",
7
9
  "main": "dist/cjs",
8
10
  "module": "dist/esm",
9
11
  "module:jsx": "dist/jsx",
10
12
  "files": [
13
+ "src",
11
14
  "types",
12
15
  "dist"
13
16
  ],
@@ -18,13 +21,13 @@
18
21
  "clean:build": "tamagui-build clean:build"
19
22
  },
20
23
  "dependencies": {
21
- "@floating-ui/react-dom": "^0.6.3",
22
- "@floating-ui/react-native": "^0.6.1",
23
- "@tamagui/compose-refs": "^1.0.0-beta.8",
24
- "@tamagui/core": "^1.0.0-beta.8",
25
- "@tamagui/create-context": "^1.0.0-beta.8",
26
- "@tamagui/stacks": "^1.0.0-beta.8",
27
- "@tamagui/use-controllable-state": "^1.0.0-beta.8"
24
+ "@floating-ui/react-dom": "0.7.0",
25
+ "@floating-ui/react-native": "^0.7.0",
26
+ "@tamagui/compose-refs": "^1.0.1-beta.101",
27
+ "@tamagui/core": "^1.0.1-beta.101",
28
+ "@tamagui/create-context": "^1.0.1-beta.101",
29
+ "@tamagui/stacks": "^1.0.1-beta.101",
30
+ "@tamagui/use-controllable-state": "^1.0.1-beta.101"
28
31
  },
29
32
  "peerDependencies": {
30
33
  "react": "*",
@@ -32,8 +35,8 @@
32
35
  "react-native": "*"
33
36
  },
34
37
  "devDependencies": {
35
- "@tamagui/build": "^1.0.0-beta.8",
36
- "@types/react-native": "^0.67.3",
38
+ "@tamagui/build": "^1.0.1-beta.101",
39
+ "@types/react-native": "^0.69.2",
37
40
  "react": "*",
38
41
  "react-dom": "*",
39
42
  "react-native": "*"