@tamagui/popper 1.0.1-beta.151 → 1.0.1-beta.152
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 +117 -103
- package/dist/cjs/Popper.js.map +2 -2
- package/dist/cjs/useFloating.js +4 -1
- package/dist/cjs/useFloating.js.map +1 -1
- package/dist/esm/Popper.js +113 -102
- package/dist/esm/Popper.js.map +2 -2
- package/dist/esm/floating.js.map +1 -1
- package/dist/esm/floating.native.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/useFloating.js.map +1 -1
- package/dist/jsx/Popper.js +83 -75
- package/dist/jsx/Popper.js.map +2 -2
- package/dist/jsx/floating.js.map +1 -1
- package/dist/jsx/floating.native.js.map +1 -1
- package/dist/jsx/index.js.map +1 -1
- package/dist/jsx/useFloating.js.map +1 -1
- package/package.json +7 -7
package/dist/cjs/Popper.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var Popper_exports = {};
|
|
23
26
|
__export(Popper_exports, {
|
|
@@ -29,6 +32,7 @@ __export(Popper_exports, {
|
|
|
29
32
|
usePopperContext: () => usePopperContext
|
|
30
33
|
});
|
|
31
34
|
module.exports = __toCommonJS(Popper_exports);
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
36
|
var import_compose_refs = require("@tamagui/compose-refs");
|
|
33
37
|
var import_core = require("@tamagui/core");
|
|
34
38
|
var import_create_context = require("@tamagui/create-context");
|
|
@@ -82,7 +86,7 @@ const Popper = (props) => {
|
|
|
82
86
|
const arrowStyle = React.useMemo(() => {
|
|
83
87
|
return middlewareData.arrow;
|
|
84
88
|
}, [JSON.stringify(middlewareData.arrow || {})]);
|
|
85
|
-
return /* @__PURE__ */
|
|
89
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperProvider, {
|
|
86
90
|
scope: __scopePopper,
|
|
87
91
|
anchorRef,
|
|
88
92
|
size,
|
|
@@ -90,27 +94,30 @@ const Popper = (props) => {
|
|
|
90
94
|
arrowStyle,
|
|
91
95
|
onArrowSize: setArrowSize,
|
|
92
96
|
isMounted,
|
|
93
|
-
...floating
|
|
94
|
-
|
|
97
|
+
...floating,
|
|
98
|
+
children
|
|
99
|
+
});
|
|
95
100
|
};
|
|
96
101
|
Popper.displayName = POPPER_NAME;
|
|
97
102
|
const ANCHOR_NAME = "PopperAnchor";
|
|
98
|
-
const PopperAnchor = React.forwardRef(
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
103
|
+
const PopperAnchor = React.forwardRef(
|
|
104
|
+
(props, forwardedRef) => {
|
|
105
|
+
const { __scopePopper, virtualRef, ...anchorProps } = props;
|
|
106
|
+
const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
107
|
+
const ref = React.useRef(null);
|
|
108
|
+
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, anchorRef);
|
|
109
|
+
if (virtualRef) {
|
|
110
|
+
return null;
|
|
111
|
+
}
|
|
112
|
+
const stackProps = {
|
|
113
|
+
ref: composedRefs,
|
|
114
|
+
...anchorProps
|
|
115
|
+
};
|
|
116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
|
|
117
|
+
...getReferenceProps ? getReferenceProps(stackProps) : stackProps
|
|
118
|
+
});
|
|
105
119
|
}
|
|
106
|
-
|
|
107
|
-
ref: composedRefs,
|
|
108
|
-
...anchorProps
|
|
109
|
-
};
|
|
110
|
-
return /* @__PURE__ */ React.createElement(import_stacks.YStack, {
|
|
111
|
-
...getReferenceProps ? getReferenceProps(stackProps) : stackProps
|
|
112
|
-
});
|
|
113
|
-
});
|
|
120
|
+
);
|
|
114
121
|
PopperAnchor.displayName = ANCHOR_NAME;
|
|
115
122
|
const CONTENT_NAME = "PopperContent";
|
|
116
123
|
const PopperContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
@@ -132,32 +139,36 @@ const PopperContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack,
|
|
|
132
139
|
size: "$4"
|
|
133
140
|
}
|
|
134
141
|
});
|
|
135
|
-
const PopperContent = PopperContentFrame.extractable(
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
142
|
+
const PopperContent = PopperContentFrame.extractable(
|
|
143
|
+
React.forwardRef(
|
|
144
|
+
(props, forwardedRef) => {
|
|
145
|
+
const { __scopePopper, ...contentProps } = props;
|
|
146
|
+
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
147
|
+
const contentRefs = (0, import_compose_refs.useComposedRefs)(floating, forwardedRef);
|
|
148
|
+
const contents = React.useMemo(() => {
|
|
149
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperContentFrame, {
|
|
150
|
+
"data-placement": placement,
|
|
151
|
+
"data-strategy": strategy,
|
|
152
|
+
size: contentProps.size || size,
|
|
153
|
+
...contentProps
|
|
154
|
+
}, "popper-content-frame");
|
|
155
|
+
}, [placement, strategy, props]);
|
|
156
|
+
if (!isMounted) {
|
|
157
|
+
return null;
|
|
158
|
+
}
|
|
159
|
+
const frameProps = {
|
|
160
|
+
ref: contentRefs,
|
|
161
|
+
x: x || 0,
|
|
162
|
+
y: y || 0,
|
|
163
|
+
position: strategy
|
|
164
|
+
};
|
|
165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
|
|
166
|
+
...getFloatingProps ? getFloatingProps(frameProps) : frameProps,
|
|
167
|
+
children: contents
|
|
168
|
+
});
|
|
169
|
+
}
|
|
170
|
+
)
|
|
171
|
+
);
|
|
161
172
|
PopperContent.displayName = CONTENT_NAME;
|
|
162
173
|
const ARROW_NAME = "PopperArrow";
|
|
163
174
|
const PopperArrowFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
@@ -181,65 +192,68 @@ const opposites = {
|
|
|
181
192
|
bottom: "top",
|
|
182
193
|
left: "right"
|
|
183
194
|
};
|
|
184
|
-
const PopperArrow = PopperArrowFrame.extractable(
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
213
|
-
var _a;
|
|
214
|
-
(_a = context.onArrowSize) == null ? void 0 : _a.call(context, size);
|
|
215
|
-
}, [size, context.onArrowSize]);
|
|
216
|
-
return /* @__PURE__ */ React.createElement(PopperArrowOuterFrame, {
|
|
217
|
-
ref: refs,
|
|
218
|
-
...arrowStyle
|
|
219
|
-
}, /* @__PURE__ */ React.createElement(PopperArrowFrame, {
|
|
220
|
-
width: size,
|
|
221
|
-
height: size,
|
|
222
|
-
...arrowProps,
|
|
223
|
-
...innerArrowStyle,
|
|
224
|
-
rotate: "45deg",
|
|
225
|
-
...primaryPlacement === "bottom" && {
|
|
226
|
-
borderBottomWidth: borderWidth,
|
|
227
|
-
borderRightWidth: borderWidth
|
|
228
|
-
},
|
|
229
|
-
...primaryPlacement === "top" && {
|
|
230
|
-
borderTopWidth: borderWidth,
|
|
231
|
-
borderLeftWidth: borderWidth
|
|
232
|
-
},
|
|
233
|
-
...primaryPlacement === "right" && {
|
|
234
|
-
borderTopWidth: borderWidth,
|
|
235
|
-
borderRightWidth: borderWidth
|
|
236
|
-
},
|
|
237
|
-
...primaryPlacement === "left" && {
|
|
238
|
-
borderBottomWidth: borderWidth,
|
|
239
|
-
borderLeftWidth: borderWidth
|
|
195
|
+
const PopperArrow = PopperArrowFrame.extractable(
|
|
196
|
+
React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
197
|
+
const { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props;
|
|
198
|
+
const context = usePopperContext(ARROW_NAME, __scopePopper);
|
|
199
|
+
const tokens = (0, import_core.getTokens)();
|
|
200
|
+
const sizeVal = sizeProp ?? context.size;
|
|
201
|
+
const sizeValResolved = (0, import_core.getVariableValue)((0, import_core.stepTokenUpOrDown)(tokens.space, sizeVal, -2, [2]));
|
|
202
|
+
const size = +sizeValResolved;
|
|
203
|
+
const { placement } = context;
|
|
204
|
+
const { x, y } = context.arrowStyle || { x: 0, y: 0 };
|
|
205
|
+
const refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef);
|
|
206
|
+
const primaryPlacement = placement ? placement.split("-")[0] : "top";
|
|
207
|
+
const arrowStyle = { x, y, width: size, height: size };
|
|
208
|
+
const innerArrowStyle = {};
|
|
209
|
+
const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
|
|
210
|
+
if (primaryPlacement) {
|
|
211
|
+
arrowStyle[isVertical ? "width" : "height"] = size * 2;
|
|
212
|
+
const oppSide = opposites[primaryPlacement];
|
|
213
|
+
if (oppSide) {
|
|
214
|
+
arrowStyle[oppSide] = -size;
|
|
215
|
+
innerArrowStyle[oppSide] = size / 2;
|
|
216
|
+
}
|
|
217
|
+
if (oppSide === "top" || oppSide === "bottom") {
|
|
218
|
+
arrowStyle.left = 0;
|
|
219
|
+
}
|
|
220
|
+
if (oppSide === "left" || oppSide === "right") {
|
|
221
|
+
arrowStyle.top = 0;
|
|
222
|
+
}
|
|
240
223
|
}
|
|
241
|
-
|
|
242
|
-
|
|
224
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
225
|
+
var _a;
|
|
226
|
+
(_a = context.onArrowSize) == null ? void 0 : _a.call(context, size);
|
|
227
|
+
}, [size, context.onArrowSize]);
|
|
228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperArrowOuterFrame, {
|
|
229
|
+
ref: refs,
|
|
230
|
+
...arrowStyle,
|
|
231
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperArrowFrame, {
|
|
232
|
+
width: size,
|
|
233
|
+
height: size,
|
|
234
|
+
...arrowProps,
|
|
235
|
+
...innerArrowStyle,
|
|
236
|
+
rotate: "45deg",
|
|
237
|
+
...primaryPlacement === "bottom" && {
|
|
238
|
+
borderBottomWidth: borderWidth,
|
|
239
|
+
borderRightWidth: borderWidth
|
|
240
|
+
},
|
|
241
|
+
...primaryPlacement === "top" && {
|
|
242
|
+
borderTopWidth: borderWidth,
|
|
243
|
+
borderLeftWidth: borderWidth
|
|
244
|
+
},
|
|
245
|
+
...primaryPlacement === "right" && {
|
|
246
|
+
borderTopWidth: borderWidth,
|
|
247
|
+
borderRightWidth: borderWidth
|
|
248
|
+
},
|
|
249
|
+
...primaryPlacement === "left" && {
|
|
250
|
+
borderBottomWidth: borderWidth,
|
|
251
|
+
borderLeftWidth: borderWidth
|
|
252
|
+
}
|
|
253
|
+
})
|
|
254
|
+
});
|
|
255
|
+
})
|
|
256
|
+
);
|
|
243
257
|
PopperArrow.displayName = ARROW_NAME;
|
|
244
258
|
// Annotate the CommonJS export names for ESM import in node:
|
|
245
259
|
0 && (module.exports = {
|
package/dist/cjs/Popper.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Popper.tsx"],
|
|
4
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 }, [floating.update, refs.floating, refs.reference])\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 size={contentProps.size || size}\n {...contentProps}\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: 'relative',\n})\n\nconst PopperArrowOuterFrame = styled(YStack, {\n name: 'PopperArrowOuter',\n position: 'absolute',\n zIndex: -1,\n pointerEvents: 'none',\n overflow: 'hidden',\n alignItems: 'center',\n justifyContent: 'center',\n})\n\nconst opposites = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n} as const\n\ntype Sides = keyof typeof opposites\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') as Sides\n\n const arrowStyle: StackProps = { x, y, width: size, height: size }\n const innerArrowStyle: StackProps = {}\n const isVertical = primaryPlacement === 'bottom' || primaryPlacement === 'top'\n\n if (primaryPlacement) {\n // allows for extra diagonal size\n arrowStyle[isVertical ? 'width' : 'height'] = size * 2\n const oppSide = opposites[primaryPlacement]\n if (oppSide) {\n arrowStyle[oppSide] = -size\n innerArrowStyle[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 // outer frame to cut off for ability to have nicer shadows/borders\n return (\n <PopperArrowOuterFrame ref={refs} {...arrowStyle}>\n <PopperArrowFrame\n width={size}\n height={size}\n {...arrowProps}\n {...innerArrowStyle}\n rotate=\"45deg\"\n {...(primaryPlacement === 'bottom' && {\n borderBottomWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'top' && {\n borderTopWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n {...(primaryPlacement === 'right' && {\n borderTopWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'left' && {\n borderBottomWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n />\n </PopperArrowOuterFrame>\n )\n })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["PopperArrow", "offset"]
|
|
7
7
|
}
|
package/dist/cjs/useFloating.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var useFloating_exports = {};
|
|
23
26
|
__export(useFloating_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/useFloating.tsx"],
|
|
4
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": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAE1C,eAA0B;AAYnB,MAAM,8BAA0B,4BAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAhB3E;AAiBE,QAAM,cAAU,yBAAW,uBAAuB;AAClD,UAAQ,gBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Popper.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
1
2
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
2
3
|
import {
|
|
3
4
|
getTokens,
|
|
@@ -57,7 +58,7 @@ const Popper = (props) => {
|
|
|
57
58
|
const arrowStyle = React.useMemo(() => {
|
|
58
59
|
return middlewareData.arrow;
|
|
59
60
|
}, [JSON.stringify(middlewareData.arrow || {})]);
|
|
60
|
-
return /* @__PURE__ */
|
|
61
|
+
return /* @__PURE__ */ jsx(PopperProvider, {
|
|
61
62
|
scope: __scopePopper,
|
|
62
63
|
anchorRef,
|
|
63
64
|
size,
|
|
@@ -65,27 +66,30 @@ const Popper = (props) => {
|
|
|
65
66
|
arrowStyle,
|
|
66
67
|
onArrowSize: setArrowSize,
|
|
67
68
|
isMounted,
|
|
68
|
-
...floating
|
|
69
|
-
|
|
69
|
+
...floating,
|
|
70
|
+
children
|
|
71
|
+
});
|
|
70
72
|
};
|
|
71
73
|
Popper.displayName = POPPER_NAME;
|
|
72
74
|
const ANCHOR_NAME = "PopperAnchor";
|
|
73
|
-
const PopperAnchor = React.forwardRef(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
75
|
+
const PopperAnchor = React.forwardRef(
|
|
76
|
+
(props, forwardedRef) => {
|
|
77
|
+
const { __scopePopper, virtualRef, ...anchorProps } = props;
|
|
78
|
+
const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
79
|
+
const ref = React.useRef(null);
|
|
80
|
+
const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
|
|
81
|
+
if (virtualRef) {
|
|
82
|
+
return null;
|
|
83
|
+
}
|
|
84
|
+
const stackProps = {
|
|
85
|
+
ref: composedRefs,
|
|
86
|
+
...anchorProps
|
|
87
|
+
};
|
|
88
|
+
return /* @__PURE__ */ jsx(YStack, {
|
|
89
|
+
...getReferenceProps ? getReferenceProps(stackProps) : stackProps
|
|
90
|
+
});
|
|
80
91
|
}
|
|
81
|
-
|
|
82
|
-
ref: composedRefs,
|
|
83
|
-
...anchorProps
|
|
84
|
-
};
|
|
85
|
-
return /* @__PURE__ */ React.createElement(YStack, {
|
|
86
|
-
...getReferenceProps ? getReferenceProps(stackProps) : stackProps
|
|
87
|
-
});
|
|
88
|
-
});
|
|
92
|
+
);
|
|
89
93
|
PopperAnchor.displayName = ANCHOR_NAME;
|
|
90
94
|
const CONTENT_NAME = "PopperContent";
|
|
91
95
|
const PopperContentFrame = styled(ThemeableStack, {
|
|
@@ -107,32 +111,36 @@ const PopperContentFrame = styled(ThemeableStack, {
|
|
|
107
111
|
size: "$4"
|
|
108
112
|
}
|
|
109
113
|
});
|
|
110
|
-
const PopperContent = PopperContentFrame.extractable(
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
114
|
+
const PopperContent = PopperContentFrame.extractable(
|
|
115
|
+
React.forwardRef(
|
|
116
|
+
(props, forwardedRef) => {
|
|
117
|
+
const { __scopePopper, ...contentProps } = props;
|
|
118
|
+
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
119
|
+
const contentRefs = useComposedRefs(floating, forwardedRef);
|
|
120
|
+
const contents = React.useMemo(() => {
|
|
121
|
+
return /* @__PURE__ */ jsx(PopperContentFrame, {
|
|
122
|
+
"data-placement": placement,
|
|
123
|
+
"data-strategy": strategy,
|
|
124
|
+
size: contentProps.size || size,
|
|
125
|
+
...contentProps
|
|
126
|
+
}, "popper-content-frame");
|
|
127
|
+
}, [placement, strategy, props]);
|
|
128
|
+
if (!isMounted) {
|
|
129
|
+
return null;
|
|
130
|
+
}
|
|
131
|
+
const frameProps = {
|
|
132
|
+
ref: contentRefs,
|
|
133
|
+
x: x || 0,
|
|
134
|
+
y: y || 0,
|
|
135
|
+
position: strategy
|
|
136
|
+
};
|
|
137
|
+
return /* @__PURE__ */ jsx(YStack, {
|
|
138
|
+
...getFloatingProps ? getFloatingProps(frameProps) : frameProps,
|
|
139
|
+
children: contents
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
)
|
|
143
|
+
);
|
|
136
144
|
PopperContent.displayName = CONTENT_NAME;
|
|
137
145
|
const ARROW_NAME = "PopperArrow";
|
|
138
146
|
const PopperArrowFrame = styled(YStack, {
|
|
@@ -156,65 +164,68 @@ const opposites = {
|
|
|
156
164
|
bottom: "top",
|
|
157
165
|
left: "right"
|
|
158
166
|
};
|
|
159
|
-
const PopperArrow = PopperArrowFrame.extractable(
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
useIsomorphicLayoutEffect(() => {
|
|
188
|
-
var _a;
|
|
189
|
-
(_a = context.onArrowSize) == null ? void 0 : _a.call(context, size);
|
|
190
|
-
}, [size, context.onArrowSize]);
|
|
191
|
-
return /* @__PURE__ */ React.createElement(PopperArrowOuterFrame, {
|
|
192
|
-
ref: refs,
|
|
193
|
-
...arrowStyle
|
|
194
|
-
}, /* @__PURE__ */ React.createElement(PopperArrowFrame, {
|
|
195
|
-
width: size,
|
|
196
|
-
height: size,
|
|
197
|
-
...arrowProps,
|
|
198
|
-
...innerArrowStyle,
|
|
199
|
-
rotate: "45deg",
|
|
200
|
-
...primaryPlacement === "bottom" && {
|
|
201
|
-
borderBottomWidth: borderWidth,
|
|
202
|
-
borderRightWidth: borderWidth
|
|
203
|
-
},
|
|
204
|
-
...primaryPlacement === "top" && {
|
|
205
|
-
borderTopWidth: borderWidth,
|
|
206
|
-
borderLeftWidth: borderWidth
|
|
207
|
-
},
|
|
208
|
-
...primaryPlacement === "right" && {
|
|
209
|
-
borderTopWidth: borderWidth,
|
|
210
|
-
borderRightWidth: borderWidth
|
|
211
|
-
},
|
|
212
|
-
...primaryPlacement === "left" && {
|
|
213
|
-
borderBottomWidth: borderWidth,
|
|
214
|
-
borderLeftWidth: borderWidth
|
|
167
|
+
const PopperArrow = PopperArrowFrame.extractable(
|
|
168
|
+
React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
169
|
+
const { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props;
|
|
170
|
+
const context = usePopperContext(ARROW_NAME, __scopePopper);
|
|
171
|
+
const tokens = getTokens();
|
|
172
|
+
const sizeVal = sizeProp ?? context.size;
|
|
173
|
+
const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]));
|
|
174
|
+
const size = +sizeValResolved;
|
|
175
|
+
const { placement } = context;
|
|
176
|
+
const { x, y } = context.arrowStyle || { x: 0, y: 0 };
|
|
177
|
+
const refs = useComposedRefs(context.arrowRef, forwardedRef);
|
|
178
|
+
const primaryPlacement = placement ? placement.split("-")[0] : "top";
|
|
179
|
+
const arrowStyle = { x, y, width: size, height: size };
|
|
180
|
+
const innerArrowStyle = {};
|
|
181
|
+
const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
|
|
182
|
+
if (primaryPlacement) {
|
|
183
|
+
arrowStyle[isVertical ? "width" : "height"] = size * 2;
|
|
184
|
+
const oppSide = opposites[primaryPlacement];
|
|
185
|
+
if (oppSide) {
|
|
186
|
+
arrowStyle[oppSide] = -size;
|
|
187
|
+
innerArrowStyle[oppSide] = size / 2;
|
|
188
|
+
}
|
|
189
|
+
if (oppSide === "top" || oppSide === "bottom") {
|
|
190
|
+
arrowStyle.left = 0;
|
|
191
|
+
}
|
|
192
|
+
if (oppSide === "left" || oppSide === "right") {
|
|
193
|
+
arrowStyle.top = 0;
|
|
194
|
+
}
|
|
215
195
|
}
|
|
216
|
-
|
|
217
|
-
|
|
196
|
+
useIsomorphicLayoutEffect(() => {
|
|
197
|
+
var _a;
|
|
198
|
+
(_a = context.onArrowSize) == null ? void 0 : _a.call(context, size);
|
|
199
|
+
}, [size, context.onArrowSize]);
|
|
200
|
+
return /* @__PURE__ */ jsx(PopperArrowOuterFrame, {
|
|
201
|
+
ref: refs,
|
|
202
|
+
...arrowStyle,
|
|
203
|
+
children: /* @__PURE__ */ jsx(PopperArrowFrame, {
|
|
204
|
+
width: size,
|
|
205
|
+
height: size,
|
|
206
|
+
...arrowProps,
|
|
207
|
+
...innerArrowStyle,
|
|
208
|
+
rotate: "45deg",
|
|
209
|
+
...primaryPlacement === "bottom" && {
|
|
210
|
+
borderBottomWidth: borderWidth,
|
|
211
|
+
borderRightWidth: borderWidth
|
|
212
|
+
},
|
|
213
|
+
...primaryPlacement === "top" && {
|
|
214
|
+
borderTopWidth: borderWidth,
|
|
215
|
+
borderLeftWidth: borderWidth
|
|
216
|
+
},
|
|
217
|
+
...primaryPlacement === "right" && {
|
|
218
|
+
borderTopWidth: borderWidth,
|
|
219
|
+
borderRightWidth: borderWidth
|
|
220
|
+
},
|
|
221
|
+
...primaryPlacement === "left" && {
|
|
222
|
+
borderBottomWidth: borderWidth,
|
|
223
|
+
borderLeftWidth: borderWidth
|
|
224
|
+
}
|
|
225
|
+
})
|
|
226
|
+
});
|
|
227
|
+
})
|
|
228
|
+
);
|
|
218
229
|
PopperArrow.displayName = ARROW_NAME;
|
|
219
230
|
export {
|
|
220
231
|
Popper,
|
package/dist/esm/Popper.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Popper.tsx"],
|
|
4
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 }, [floating.update, refs.floating, refs.reference])\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 size={contentProps.size || size}\n {...contentProps}\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: 'relative',\n})\n\nconst PopperArrowOuterFrame = styled(YStack, {\n name: 'PopperArrowOuter',\n position: 'absolute',\n zIndex: -1,\n pointerEvents: 'none',\n overflow: 'hidden',\n alignItems: 'center',\n justifyContent: 'center',\n})\n\nconst opposites = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n} as const\n\ntype Sides = keyof typeof opposites\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') as Sides\n\n const arrowStyle: StackProps = { x, y, width: size, height: size }\n const innerArrowStyle: StackProps = {}\n const isVertical = primaryPlacement === 'bottom' || primaryPlacement === 'top'\n\n if (primaryPlacement) {\n // allows for extra diagonal size\n arrowStyle[isVertical ? 'width' : 'height'] = size * 2\n const oppSide = opposites[primaryPlacement]\n if (oppSide) {\n arrowStyle[oppSide] = -size\n innerArrowStyle[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 // outer frame to cut off for ability to have nicer shadows/borders\n return (\n <PopperArrowOuterFrame ref={refs} {...arrowStyle}>\n <PopperArrowFrame\n width={size}\n height={size}\n {...arrowProps}\n {...innerArrowStyle}\n rotate=\"45deg\"\n {...(primaryPlacement === 'bottom' && {\n borderBottomWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'top' && {\n borderTopWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n {...(primaryPlacement === 'right' && {\n borderTopWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'left' && {\n borderBottomWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n />\n </PopperArrowOuterFrame>\n )\n })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["PopperArrow", "offset"]
|
|
7
7
|
}
|
package/dist/esm/floating.js.map
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["export { FloatingOverrideContext, type UseFloatingFn } from './useFloating'\nexport * from './Popper'\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,SAAS,+BAAmD;AAC5D,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/useFloating.tsx"],
|
|
4
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;
|
|
5
|
+
"mappings": "AAAA,SAAS,eAAe,kBAAkB;AAE1C,YAAY,cAAc;AAYnB,MAAM,0BAA0B,cAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAhB3E;AAiBE,QAAM,UAAU,WAAW,uBAAuB;AAClD,UAAQ,gBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Popper.js
CHANGED
|
@@ -61,20 +61,22 @@ const Popper = (props) => {
|
|
|
61
61
|
};
|
|
62
62
|
Popper.displayName = POPPER_NAME;
|
|
63
63
|
const ANCHOR_NAME = "PopperAnchor";
|
|
64
|
-
const PopperAnchor = React.forwardRef(
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
64
|
+
const PopperAnchor = React.forwardRef(
|
|
65
|
+
(props, forwardedRef) => {
|
|
66
|
+
const { __scopePopper, virtualRef, ...anchorProps } = props;
|
|
67
|
+
const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
68
|
+
const ref = React.useRef(null);
|
|
69
|
+
const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
|
|
70
|
+
if (virtualRef) {
|
|
71
|
+
return null;
|
|
72
|
+
}
|
|
73
|
+
const stackProps = {
|
|
74
|
+
ref: composedRefs,
|
|
75
|
+
...anchorProps
|
|
76
|
+
};
|
|
77
|
+
return <YStack {...getReferenceProps ? getReferenceProps(stackProps) : stackProps} />;
|
|
71
78
|
}
|
|
72
|
-
|
|
73
|
-
ref: composedRefs,
|
|
74
|
-
...anchorProps
|
|
75
|
-
};
|
|
76
|
-
return <YStack {...getReferenceProps ? getReferenceProps(stackProps) : stackProps} />;
|
|
77
|
-
});
|
|
79
|
+
);
|
|
78
80
|
PopperAnchor.displayName = ANCHOR_NAME;
|
|
79
81
|
const CONTENT_NAME = "PopperContent";
|
|
80
82
|
const PopperContentFrame = styled(ThemeableStack, {
|
|
@@ -96,24 +98,28 @@ const PopperContentFrame = styled(ThemeableStack, {
|
|
|
96
98
|
size: "$4"
|
|
97
99
|
}
|
|
98
100
|
});
|
|
99
|
-
const PopperContent = PopperContentFrame.extractable(
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
}
|
|
101
|
+
const PopperContent = PopperContentFrame.extractable(
|
|
102
|
+
React.forwardRef(
|
|
103
|
+
(props, forwardedRef) => {
|
|
104
|
+
const { __scopePopper, ...contentProps } = props;
|
|
105
|
+
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
106
|
+
const contentRefs = useComposedRefs(floating, forwardedRef);
|
|
107
|
+
const contents = React.useMemo(() => {
|
|
108
|
+
return <PopperContentFrame key="popper-content-frame" data-placement={placement} data-strategy={strategy} size={contentProps.size || size} {...contentProps} />;
|
|
109
|
+
}, [placement, strategy, props]);
|
|
110
|
+
if (!isMounted) {
|
|
111
|
+
return null;
|
|
112
|
+
}
|
|
113
|
+
const frameProps = {
|
|
114
|
+
ref: contentRefs,
|
|
115
|
+
x: x || 0,
|
|
116
|
+
y: y || 0,
|
|
117
|
+
position: strategy
|
|
118
|
+
};
|
|
119
|
+
return <YStack {...getFloatingProps ? getFloatingProps(frameProps) : frameProps}>{contents}</YStack>;
|
|
120
|
+
}
|
|
121
|
+
)
|
|
122
|
+
);
|
|
117
123
|
PopperContent.displayName = CONTENT_NAME;
|
|
118
124
|
const ARROW_NAME = "PopperArrow";
|
|
119
125
|
const PopperArrowFrame = styled(YStack, {
|
|
@@ -137,51 +143,53 @@ const opposites = {
|
|
|
137
143
|
bottom: "top",
|
|
138
144
|
left: "right"
|
|
139
145
|
};
|
|
140
|
-
const PopperArrow = PopperArrowFrame.extractable(
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
146
|
+
const PopperArrow = PopperArrowFrame.extractable(
|
|
147
|
+
React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
148
|
+
const { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props;
|
|
149
|
+
const context = usePopperContext(ARROW_NAME, __scopePopper);
|
|
150
|
+
const tokens = getTokens();
|
|
151
|
+
const sizeVal = sizeProp ?? context.size;
|
|
152
|
+
const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]));
|
|
153
|
+
const size = +sizeValResolved;
|
|
154
|
+
const { placement } = context;
|
|
155
|
+
const { x, y } = context.arrowStyle || { x: 0, y: 0 };
|
|
156
|
+
const refs = useComposedRefs(context.arrowRef, forwardedRef);
|
|
157
|
+
const primaryPlacement = placement ? placement.split("-")[0] : "top";
|
|
158
|
+
const arrowStyle = { x, y, width: size, height: size };
|
|
159
|
+
const innerArrowStyle = {};
|
|
160
|
+
const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
|
|
161
|
+
if (primaryPlacement) {
|
|
162
|
+
arrowStyle[isVertical ? "width" : "height"] = size * 2;
|
|
163
|
+
const oppSide = opposites[primaryPlacement];
|
|
164
|
+
if (oppSide) {
|
|
165
|
+
arrowStyle[oppSide] = -size;
|
|
166
|
+
innerArrowStyle[oppSide] = size / 2;
|
|
167
|
+
}
|
|
168
|
+
if (oppSide === "top" || oppSide === "bottom") {
|
|
169
|
+
arrowStyle.left = 0;
|
|
170
|
+
}
|
|
171
|
+
if (oppSide === "left" || oppSide === "right") {
|
|
172
|
+
arrowStyle.top = 0;
|
|
173
|
+
}
|
|
166
174
|
}
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
context.onArrowSize
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
}
|
|
184
|
-
|
|
175
|
+
useIsomorphicLayoutEffect(() => {
|
|
176
|
+
context.onArrowSize?.(size);
|
|
177
|
+
}, [size, context.onArrowSize]);
|
|
178
|
+
return <PopperArrowOuterFrame ref={refs} {...arrowStyle}><PopperArrowFrame width={size} height={size} {...arrowProps} {...innerArrowStyle} rotate="45deg" {...primaryPlacement === "bottom" && {
|
|
179
|
+
borderBottomWidth: borderWidth,
|
|
180
|
+
borderRightWidth: borderWidth
|
|
181
|
+
}} {...primaryPlacement === "top" && {
|
|
182
|
+
borderTopWidth: borderWidth,
|
|
183
|
+
borderLeftWidth: borderWidth
|
|
184
|
+
}} {...primaryPlacement === "right" && {
|
|
185
|
+
borderTopWidth: borderWidth,
|
|
186
|
+
borderRightWidth: borderWidth
|
|
187
|
+
}} {...primaryPlacement === "left" && {
|
|
188
|
+
borderBottomWidth: borderWidth,
|
|
189
|
+
borderLeftWidth: borderWidth
|
|
190
|
+
}} /></PopperArrowOuterFrame>;
|
|
191
|
+
})
|
|
192
|
+
);
|
|
185
193
|
PopperArrow.displayName = ARROW_NAME;
|
|
186
194
|
export {
|
|
187
195
|
Popper,
|
package/dist/jsx/Popper.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Popper.tsx"],
|
|
4
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 }, [floating.update, refs.floating, refs.reference])\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 size={contentProps.size || size}\n {...contentProps}\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: 'relative',\n})\n\nconst PopperArrowOuterFrame = styled(YStack, {\n name: 'PopperArrowOuter',\n position: 'absolute',\n zIndex: -1,\n pointerEvents: 'none',\n overflow: 'hidden',\n alignItems: 'center',\n justifyContent: 'center',\n})\n\nconst opposites = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n} as const\n\ntype Sides = keyof typeof opposites\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') as Sides\n\n const arrowStyle: StackProps = { x, y, width: size, height: size }\n const innerArrowStyle: StackProps = {}\n const isVertical = primaryPlacement === 'bottom' || primaryPlacement === 'top'\n\n if (primaryPlacement) {\n // allows for extra diagonal size\n arrowStyle[isVertical ? 'width' : 'height'] = size * 2\n const oppSide = opposites[primaryPlacement]\n if (oppSide) {\n arrowStyle[oppSide] = -size\n innerArrowStyle[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 // outer frame to cut off for ability to have nicer shadows/borders\n return (\n <PopperArrowOuterFrame ref={refs} {...arrowStyle}>\n <PopperArrowFrame\n width={size}\n height={size}\n {...arrowProps}\n {...innerArrowStyle}\n rotate=\"45deg\"\n {...(primaryPlacement === 'bottom' && {\n borderBottomWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'top' && {\n borderTopWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n {...(primaryPlacement === 'right' && {\n borderTopWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'left' && {\n borderBottomWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n />\n </PopperArrowOuterFrame>\n )\n })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
|
|
5
|
-
"mappings": "AAEA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["PopperArrow", "offset"]
|
|
7
7
|
}
|
package/dist/jsx/floating.js.map
CHANGED
package/dist/jsx/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["export { FloatingOverrideContext, type UseFloatingFn } from './useFloating'\nexport * from './Popper'\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,SAAS,+BAAmD;AAC5D,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/useFloating.tsx"],
|
|
4
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;
|
|
5
|
+
"mappings": "AAAA,SAAS,eAAe,kBAAkB;AAE1C,YAAY,cAAc;AAYnB,MAAM,0BAA0B,cAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AACzE,QAAM,UAAU,WAAW,uBAAuB;AAClD,UAAQ,WAAW,SAAS,eAAe,KAAK;AAClD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/popper",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.152",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -25,11 +25,11 @@
|
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@floating-ui/react-dom": "^1.0.0",
|
|
27
27
|
"@floating-ui/react-native": "^0.8.0",
|
|
28
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
32
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
28
|
+
"@tamagui/compose-refs": "^1.0.1-beta.152",
|
|
29
|
+
"@tamagui/core": "^1.0.1-beta.152",
|
|
30
|
+
"@tamagui/create-context": "^1.0.1-beta.152",
|
|
31
|
+
"@tamagui/stacks": "^1.0.1-beta.152",
|
|
32
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.152"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": "*",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"react-native": "*"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
40
|
+
"@tamagui/build": "^1.0.1-beta.152",
|
|
41
41
|
"@types/react-native": "^0.69.2",
|
|
42
42
|
"react": "*",
|
|
43
43
|
"react-dom": "*",
|