@tamagui/popper 1.0.0-beta.9 → 1.0.1-beta.102
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.
- package/dist/cjs/Popper.js +38 -16
- package/dist/cjs/Popper.js.map +2 -2
- package/dist/cjs/index.js +2 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/useFloating.js +2 -3
- package/dist/cjs/useFloating.js.map +2 -2
- package/dist/esm/Popper.js +101 -62
- package/dist/esm/Popper.js.map +2 -2
- package/dist/esm/index.js +2 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/useFloating.js +2 -4
- package/dist/esm/useFloating.js.map +2 -2
- package/dist/jsx/Popper.js +41 -21
- package/dist/jsx/Popper.js.map +7 -0
- package/dist/jsx/floating.js +1 -0
- package/dist/jsx/floating.js.map +7 -0
- package/dist/jsx/floating.native.js +1 -0
- package/dist/jsx/floating.native.js.map +7 -0
- package/dist/jsx/index.js +3 -3
- package/dist/jsx/index.js.map +7 -0
- package/dist/jsx/useFloating.js +3 -4
- package/dist/jsx/useFloating.js.map +7 -0
- package/package.json +15 -12
- package/src/Popper.tsx +331 -0
- package/src/floating.native.tsx +1 -0
- package/src/floating.tsx +1 -0
- package/src/index.tsx +2 -0
- package/src/useFloating.tsx +20 -0
- package/types/Popper.d.ts +65 -53
- package/types/Popper.d.ts.map +1 -1
- package/types/floating.d.ts +0 -0
- package/types/floating.d.ts.map +0 -0
- package/types/floating.native.d.ts +0 -0
- package/types/floating.native.d.ts.map +0 -0
- package/types/index.d.ts +1 -1
- package/types/index.d.ts.map +1 -1
- package/types/useFloating.d.ts +3 -2
- package/types/useFloating.d.ts.map +1 -1
- package/types/useFloating.native.d.ts +0 -2
- package/types/useFloating.native.d.ts.map +0 -1
- package/types/useFloating.web.d.ts +0 -2
- package/types/useFloating.web.d.ts.map +0 -1
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { FloatingOverrideContext
|
|
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
|
package/dist/esm/index.js.map
CHANGED
|
@@ -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
|
}
|
package/dist/esm/useFloating.js
CHANGED
|
@@ -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 =
|
|
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
|
-
}
|
|
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
|
|
5
|
-
"mappings": "
|
|
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
|
}
|
package/dist/jsx/Popper.js
CHANGED
|
@@ -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 {
|
|
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 =
|
|
20
|
-
const {
|
|
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
|
-
}
|
|
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(
|
|
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
|
-
|
|
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:
|
|
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(
|
|
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((
|
|
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
|
-
|
|
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
|
|
141
|
-
(
|
|
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
|
-
}
|
|
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
|
+
}
|
package/dist/jsx/floating.js
CHANGED
package/dist/jsx/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { FloatingOverrideContext
|
|
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
|
package/dist/jsx/useFloating.js
CHANGED
|
@@ -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 =
|
|
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
|
-
}
|
|
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.
|
|
4
|
-
"sideEffects":
|
|
3
|
+
"version": "1.0.1-beta.102",
|
|
4
|
+
"sideEffects": [
|
|
5
|
+
"*.css"
|
|
6
|
+
],
|
|
5
7
|
"source": "src/index.ts",
|
|
6
|
-
"
|
|
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": "
|
|
22
|
-
"@floating-ui/react-native": "^0.
|
|
23
|
-
"@tamagui/compose-refs": "^1.0.
|
|
24
|
-
"@tamagui/core": "^1.0.
|
|
25
|
-
"@tamagui/create-context": "^1.0.
|
|
26
|
-
"@tamagui/stacks": "^1.0.
|
|
27
|
-
"@tamagui/use-controllable-state": "^1.0.
|
|
24
|
+
"@floating-ui/react-dom": "0.7.0",
|
|
25
|
+
"@floating-ui/react-native": "^0.7.0",
|
|
26
|
+
"@tamagui/compose-refs": "^1.0.1-beta.102",
|
|
27
|
+
"@tamagui/core": "^1.0.1-beta.102",
|
|
28
|
+
"@tamagui/create-context": "^1.0.1-beta.102",
|
|
29
|
+
"@tamagui/stacks": "^1.0.1-beta.102",
|
|
30
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.102"
|
|
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.
|
|
36
|
-
"@types/react-native": "^0.
|
|
38
|
+
"@tamagui/build": "^1.0.1-beta.102",
|
|
39
|
+
"@types/react-native": "^0.69.2",
|
|
37
40
|
"react": "*",
|
|
38
41
|
"react-dom": "*",
|
|
39
42
|
"react-native": "*"
|