@tamagui/popper 1.0.1-beta.21 → 1.0.1-beta.211

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 (48) hide show
  1. package/dist/cjs/Popper.js +160 -129
  2. package/dist/cjs/Popper.js.map +3 -3
  3. package/dist/cjs/floating.js +1 -0
  4. package/dist/cjs/floating.js.map +1 -1
  5. package/dist/cjs/floating.native.js +1 -0
  6. package/dist/cjs/floating.native.js.map +1 -1
  7. package/dist/cjs/index.js +1 -0
  8. package/dist/cjs/index.js.map +1 -1
  9. package/dist/cjs/useFloating.js +7 -4
  10. package/dist/cjs/useFloating.js.map +2 -2
  11. package/dist/esm/Popper.js +154 -112
  12. package/dist/esm/Popper.js.map +3 -3
  13. package/dist/esm/floating.js +0 -0
  14. package/dist/esm/floating.js.map +1 -1
  15. package/dist/esm/floating.native.js +0 -0
  16. package/dist/esm/floating.native.js.map +1 -1
  17. package/dist/esm/index.js +0 -0
  18. package/dist/esm/index.js.map +1 -1
  19. package/dist/esm/useFloating.js +2 -4
  20. package/dist/esm/useFloating.js.map +2 -2
  21. package/dist/jsx/Popper.js +125 -90
  22. package/dist/jsx/Popper.js.map +7 -0
  23. package/dist/jsx/floating.js +1 -0
  24. package/dist/jsx/floating.js.map +7 -0
  25. package/dist/jsx/floating.native.js +1 -0
  26. package/dist/jsx/floating.native.js.map +7 -0
  27. package/dist/jsx/index.js +1 -0
  28. package/dist/jsx/index.js.map +7 -0
  29. package/dist/jsx/useFloating.js +4 -6
  30. package/dist/jsx/useFloating.js.map +7 -0
  31. package/package.json +17 -12
  32. package/src/Popper.tsx +346 -0
  33. package/src/floating.native.tsx +1 -0
  34. package/src/floating.tsx +1 -0
  35. package/src/index.tsx +2 -0
  36. package/src/useFloating.tsx +20 -0
  37. package/types/Popper.d.ts +73 -61
  38. package/types/index.d.ts +1 -1
  39. package/types/useFloating.d.ts +3 -2
  40. package/types/Popper.d.ts.map +0 -1
  41. package/types/floating.d.ts.map +0 -1
  42. package/types/floating.native.d.ts.map +0 -1
  43. package/types/index.d.ts.map +0 -1
  44. package/types/useFloating.d.ts.map +0 -1
  45. package/types/useFloating.native.d.ts +0 -2
  46. package/types/useFloating.native.d.ts.map +0 -1
  47. package/types/useFloating.web.d.ts +0 -2
  48. package/types/useFloating.web.d.ts.map +0 -1
@@ -1,39 +1,10 @@
1
+ "use strict";
1
2
  var __create = Object.create;
2
3
  var __defProp = Object.defineProperty;
3
- var __defProps = Object.defineProperties;
4
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
6
  var __getProtoOf = Object.getPrototypeOf;
9
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
10
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
- var __spreadValues = (a, b) => {
13
- for (var prop in b || (b = {}))
14
- if (__hasOwnProp.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- if (__getOwnPropSymbols)
17
- for (var prop of __getOwnPropSymbols(b)) {
18
- if (__propIsEnum.call(b, prop))
19
- __defNormalProp(a, prop, b[prop]);
20
- }
21
- return a;
22
- };
23
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
25
- var __objRest = (source, exclude) => {
26
- var target = {};
27
- for (var prop in source)
28
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
- target[prop] = source[prop];
30
- if (source != null && __getOwnPropSymbols)
31
- for (var prop of __getOwnPropSymbols(source)) {
32
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
- target[prop] = source[prop];
34
- }
35
- return target;
36
- };
37
8
  var __export = (target, all) => {
38
9
  for (var name in all)
39
10
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -46,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
46
17
  }
47
18
  return to;
48
19
  };
49
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
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
+ ));
50
24
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
51
25
  var Popper_exports = {};
52
26
  __export(Popper_exports, {
@@ -54,9 +28,11 @@ __export(Popper_exports, {
54
28
  PopperAnchor: () => PopperAnchor,
55
29
  PopperArrow: () => PopperArrow,
56
30
  PopperContent: () => PopperContent,
57
- createPopperScope: () => createPopperScope
31
+ createPopperScope: () => createPopperScope,
32
+ usePopperContext: () => usePopperContext
58
33
  });
59
34
  module.exports = __toCommonJS(Popper_exports);
35
+ var import_jsx_runtime = require("react/jsx-runtime");
60
36
  var import_compose_refs = require("@tamagui/compose-refs");
61
37
  var import_core = require("@tamagui/core");
62
38
  var import_create_context = require("@tamagui/create-context");
@@ -68,8 +44,16 @@ const POPPER_NAME = "Popper";
68
44
  const [createPopperContext, createScope] = (0, import_create_context.createContextScope)(POPPER_NAME);
69
45
  const createPopperScope = createScope;
70
46
  const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
71
- const Popper = /* @__PURE__ */ __name((props) => {
72
- const { __scopePopper, children, size, placement = "bottom", stayInFrame, allowFlip } = props;
47
+ const Popper = (props) => {
48
+ const {
49
+ __scopePopper,
50
+ children,
51
+ size,
52
+ strategy = "absolute",
53
+ placement = "bottom",
54
+ stayInFrame,
55
+ allowFlip
56
+ } = props;
73
57
  const [isMounted, setIsMounted] = React.useState(false);
74
58
  (0, import_core.useIsomorphicLayoutEffect)(() => {
75
59
  setIsMounted(true);
@@ -79,10 +63,11 @@ const Popper = /* @__PURE__ */ __name((props) => {
79
63
  const [arrowSize, setArrowSize] = React.useState(0);
80
64
  const arrowRef = React.useRef();
81
65
  const floating = (0, import_useFloating.useFloating)({
66
+ strategy,
82
67
  placement,
83
68
  middleware: [
84
- stayInFrame ? (0, import_floating.shift)(stayInFrame) : null,
85
- allowFlip ? (0, import_floating.flip)(allowFlip) : null,
69
+ stayInFrame ? (0, import_floating.shift)(typeof stayInFrame === "boolean" ? {} : stayInFrame) : null,
70
+ allowFlip ? (0, import_floating.flip)(typeof allowFlip === "boolean" ? {} : allowFlip) : null,
86
71
  arrowEl ? (0, import_floating.arrow)({ element: arrowEl }) : null,
87
72
  arrowSize ? (0, import_floating.offset)(arrowSize) : null
88
73
  ].filter(Boolean)
@@ -97,77 +82,106 @@ const Popper = /* @__PURE__ */ __name((props) => {
97
82
  return;
98
83
  }
99
84
  return (0, import_floating.autoUpdate)(refs.reference.current, refs.floating.current, floating.update);
100
- }, [refs.floating.current, refs.reference.current]);
101
- const arrowStyle = React.useMemo(() => {
102
- return middlewareData.arrow;
103
- }, [JSON.stringify(middlewareData.arrow || {})]);
104
- return /* @__PURE__ */ React.createElement(PopperProvider, __spreadValues({
85
+ }, [floating.update, refs.floating, refs.reference]);
86
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperProvider, {
105
87
  scope: __scopePopper,
106
88
  anchorRef,
107
89
  size,
108
90
  arrowRef: composedArrowRefs,
109
- arrowStyle,
91
+ arrowStyle: middlewareData.arrow,
110
92
  onArrowSize: setArrowSize,
111
- isMounted
112
- }, floating), children);
113
- }, "Popper");
93
+ isMounted,
94
+ ...floating,
95
+ children
96
+ });
97
+ };
114
98
  Popper.displayName = POPPER_NAME;
115
99
  const ANCHOR_NAME = "PopperAnchor";
116
- const PopperAnchor = React.forwardRef((props, forwardedRef) => {
117
- const _a = props, { __scopePopper, virtualRef } = _a, anchorProps = __objRest(_a, ["__scopePopper", "virtualRef"]);
118
- const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
119
- const ref = React.useRef(null);
120
- const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, anchorRef);
121
- if (virtualRef) {
122
- return null;
100
+ const PopperAnchor = React.forwardRef(
101
+ (props, forwardedRef) => {
102
+ const { __scopePopper, virtualRef, ...anchorProps } = props;
103
+ const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
104
+ const ref = React.useRef(null);
105
+ const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, anchorRef);
106
+ if (virtualRef) {
107
+ return null;
108
+ }
109
+ const stackProps = {
110
+ ref: composedRefs,
111
+ ...anchorProps
112
+ };
113
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
114
+ ...getReferenceProps ? getReferenceProps(stackProps) : stackProps
115
+ });
123
116
  }
124
- const stackProps = __spreadValues({
125
- ref: composedRefs
126
- }, anchorProps);
127
- return /* @__PURE__ */ React.createElement(import_stacks.YStack, __spreadValues({}, getReferenceProps ? getReferenceProps(stackProps) : stackProps));
128
- });
117
+ );
129
118
  PopperAnchor.displayName = ANCHOR_NAME;
130
119
  const CONTENT_NAME = "PopperContent";
131
- const PopperContentFrame = (0, import_core.styled)(import_stacks.SizableStack, {
120
+ const PopperContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
132
121
  name: "PopperContent",
133
122
  backgroundColor: "$background",
134
123
  alignItems: "center",
124
+ radiused: true,
125
+ variants: {
126
+ size: {
127
+ "...size": (val, { tokens }) => {
128
+ return {
129
+ padding: tokens.space[val],
130
+ borderRadius: tokens.radius[val]
131
+ };
132
+ }
133
+ }
134
+ },
135
135
  defaultVariants: {
136
136
  size: "$4"
137
137
  }
138
138
  });
139
- const PopperContent = React.forwardRef((props, forwardedRef) => {
140
- const _a = props, { __scopePopper } = _a, contentProps = __objRest(_a, ["__scopePopper"]);
141
- const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
142
- const contentRefs = (0, import_compose_refs.useComposedRefs)(floating, forwardedRef);
143
- const contents = React.useMemo(() => {
144
- return /* @__PURE__ */ React.createElement(PopperContentFrame, __spreadProps(__spreadValues({
145
- key: "popper-content-frame",
146
- "data-placement": placement,
147
- "data-strategy": strategy
148
- }, contentProps), {
149
- size: contentProps.size ?? size
150
- }));
151
- }, [placement, strategy, props]);
152
- if (!isMounted) {
153
- return null;
154
- }
155
- const frameProps = {
156
- ref: contentRefs,
157
- x: x || 0,
158
- y: y || 0,
159
- position: "absolute"
160
- };
161
- return /* @__PURE__ */ React.createElement(import_stacks.YStack, __spreadValues({}, getFloatingProps ? getFloatingProps(frameProps) : frameProps), contents);
162
- });
139
+ const PopperContent = PopperContentFrame.extractable(
140
+ React.forwardRef(
141
+ (props, forwardedRef) => {
142
+ const { __scopePopper, ...contentProps } = props;
143
+ const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
144
+ const contentRefs = (0, import_compose_refs.useComposedRefs)(floating, forwardedRef);
145
+ const contents = React.useMemo(() => {
146
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperContentFrame, {
147
+ "data-placement": placement,
148
+ "data-strategy": strategy,
149
+ size: contentProps.size || size,
150
+ ...contentProps
151
+ }, "popper-content-frame");
152
+ }, [placement, strategy, props]);
153
+ if (!isMounted) {
154
+ return null;
155
+ }
156
+ const frameProps = {
157
+ ref: contentRefs,
158
+ x: x || 0,
159
+ y: y || 0,
160
+ position: strategy
161
+ };
162
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
163
+ ...getFloatingProps ? getFloatingProps(frameProps) : frameProps,
164
+ children: contents
165
+ });
166
+ }
167
+ )
168
+ );
163
169
  PopperContent.displayName = CONTENT_NAME;
164
170
  const ARROW_NAME = "PopperArrow";
165
171
  const PopperArrowFrame = (0, import_core.styled)(import_stacks.YStack, {
166
172
  name: "PopperArrow",
167
173
  borderColor: "$borderColor",
168
174
  backgroundColor: "$background",
175
+ position: "relative"
176
+ });
177
+ const PopperArrowOuterFrame = (0, import_core.styled)(import_stacks.YStack, {
178
+ name: "PopperArrowOuter",
169
179
  position: "absolute",
170
- zIndex: 1
180
+ zIndex: -1,
181
+ pointerEvents: "none",
182
+ overflow: "hidden",
183
+ alignItems: "center",
184
+ justifyContent: "center"
171
185
  });
172
186
  const opposites = {
173
187
  top: "bottom",
@@ -175,52 +189,68 @@ const opposites = {
175
189
  bottom: "top",
176
190
  left: "right"
177
191
  };
178
- const PopperArrow = React.forwardRef(/* @__PURE__ */ __name(function PopperArrow2(props, forwardedRef) {
179
- const _a = props, { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0 } = _a, arrowProps = __objRest(_a, ["__scopePopper", "offset", "size", "borderWidth"]);
180
- const context = usePopperContext(ARROW_NAME, __scopePopper);
181
- const tokens = (0, import_core.getTokens)();
182
- const sizeVal = sizeProp ?? context.size;
183
- const sizeValResolved = (0, import_core.getVariableValue)(tokens.size[sizeVal] ?? sizeVal ?? 12);
184
- const size = +sizeValResolved;
185
- const { placement } = context;
186
- const { x, y } = context.arrowStyle || { x: 0, y: 0 };
187
- const refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef);
188
- const primaryPlacement = placement ? placement.split("-")[0] : "top";
189
- let arrowStyle = { x, y, width: size, height: size };
190
- if (primaryPlacement) {
191
- const oppSide = opposites[primaryPlacement];
192
- if (oppSide) {
193
- arrowStyle[oppSide] = -size / 2;
192
+ const PopperArrow = PopperArrowFrame.extractable(
193
+ React.forwardRef(function PopperArrow2(props, forwardedRef) {
194
+ const { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props;
195
+ const context = usePopperContext(ARROW_NAME, __scopePopper);
196
+ const tokens = (0, import_core.getTokens)();
197
+ const sizeVal = sizeProp ?? context.size;
198
+ const sizeValResolved = (0, import_core.getVariableValue)((0, import_core.stepTokenUpOrDown)(tokens.space, sizeVal, -2, [2]));
199
+ const size = +sizeValResolved;
200
+ const { placement } = context;
201
+ const { x, y } = context.arrowStyle || { x: 0, y: 0 };
202
+ const refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef);
203
+ const primaryPlacement = placement ? placement.split("-")[0] : "top";
204
+ const arrowStyle = { x, y, width: size, height: size };
205
+ const innerArrowStyle = {};
206
+ const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
207
+ if (primaryPlacement) {
208
+ arrowStyle[isVertical ? "width" : "height"] = size * 2;
209
+ const oppSide = opposites[primaryPlacement];
210
+ if (oppSide) {
211
+ arrowStyle[oppSide] = -size;
212
+ innerArrowStyle[oppSide] = size / 2;
213
+ }
214
+ if (oppSide === "top" || oppSide === "bottom") {
215
+ arrowStyle.left = 0;
216
+ }
217
+ if (oppSide === "left" || oppSide === "right") {
218
+ arrowStyle.top = 0;
219
+ }
194
220
  }
195
- if (oppSide === "top" || oppSide === "bottom") {
196
- arrowStyle.left = 0;
197
- }
198
- if (oppSide === "left" || oppSide === "right") {
199
- arrowStyle.top = 0;
200
- }
201
- }
202
- (0, import_core.useIsomorphicLayoutEffect)(() => {
203
- var _a2;
204
- (_a2 = context.onArrowSize) == null ? void 0 : _a2.call(context, size);
205
- }, [size, context.onArrowSize]);
206
- return /* @__PURE__ */ React.createElement(PopperArrowFrame, __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, arrowProps), {
207
- ref: refs
208
- }), arrowStyle), {
209
- rotate: "45deg"
210
- }), primaryPlacement === "top" && {
211
- borderBottomWidth: borderWidth,
212
- borderRightWidth: borderWidth
213
- }), primaryPlacement === "bottom" && {
214
- borderTopWidth: borderWidth,
215
- borderLeftWidth: borderWidth
216
- }), primaryPlacement === "left" && {
217
- borderTopWidth: borderWidth,
218
- borderRightWidth: borderWidth
219
- }), primaryPlacement === "right" && {
220
- borderBottomWidth: borderWidth,
221
- borderLeftWidth: borderWidth
222
- }));
223
- }, "PopperArrow"));
221
+ (0, import_core.useIsomorphicLayoutEffect)(() => {
222
+ var _a;
223
+ (_a = context.onArrowSize) == null ? void 0 : _a.call(context, size);
224
+ }, [size, context.onArrowSize]);
225
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperArrowOuterFrame, {
226
+ ref: refs,
227
+ ...arrowStyle,
228
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperArrowFrame, {
229
+ width: size,
230
+ height: size,
231
+ ...arrowProps,
232
+ ...innerArrowStyle,
233
+ rotate: "45deg",
234
+ ...primaryPlacement === "bottom" && {
235
+ borderBottomWidth: borderWidth,
236
+ borderRightWidth: borderWidth
237
+ },
238
+ ...primaryPlacement === "top" && {
239
+ borderTopWidth: borderWidth,
240
+ borderLeftWidth: borderWidth
241
+ },
242
+ ...primaryPlacement === "right" && {
243
+ borderTopWidth: borderWidth,
244
+ borderRightWidth: borderWidth
245
+ },
246
+ ...primaryPlacement === "left" && {
247
+ borderBottomWidth: borderWidth,
248
+ borderLeftWidth: borderWidth
249
+ }
250
+ })
251
+ });
252
+ })
253
+ );
224
254
  PopperArrow.displayName = ARROW_NAME;
225
255
  // Annotate the CommonJS export names for ESM import in node:
226
256
  0 && (module.exports = {
@@ -228,6 +258,7 @@ PopperArrow.displayName = ARROW_NAME;
228
258
  PopperAnchor,
229
259
  PopperArrow,
230
260
  PopperContent,
231
- createPopperScope
261
+ createPopperScope,
262
+ usePopperContext
232
263
  });
233
264
  //# sourceMappingURL=Popper.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
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 styled,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStack, SizableStackProps, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingResult, 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 = UseFloatingResult & {\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}\n\nexport const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n const { __scopePopper, children, size, placement = 'bottom', stayInFrame, allowFlip } = 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 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(SizableStack, {\n name: 'PopperContent',\n backgroundColor: '$background',\n alignItems: 'center',\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const PopperContent = 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 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 as any) || 0,\n y: (y as any) || 0,\n position: 'absolute',\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\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 // TODO bug not applying\n // rotate: '45deg',\n})\n\nconst opposites = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n}\n\nexport const PopperArrow = React.forwardRef<PopperArrowElement, PopperArrowProps>(\n function PopperArrow(props: ScopedProps<PopperArrowProps>, forwardedRef) {\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(tokens.size[sizeVal as any] ?? sizeVal ?? 12)\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 let 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 // left={0}\n // top={0}\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAAgC;AAChC,kBAOO;AACP,4BAA0C;AAC1C,oBAAqE;AACrE,YAAuB;AAGvB,sBAA0E;AAC1E,yBAA+C;AAS/C,MAAM,cAAc;AAGpB,MAAM,CAAC,qBAAqB,eAAe,8CAAmB,WAAW;AAElE,MAAM,oBAAoB;AAajC,MAAM,CAAC,gBAAgB,oBAAoB,oBAAwC,WAAW;AAUvF,MAAM,SAAgC,wBAAC,UAAoC;AAChF,QAAM,EAAE,eAAe,UAAU,MAAM,YAAY,UAAU,aAAa,cAAc;AAExF,QAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,KAAK;AACtD,6CAA0B,MAAM;AAC9B,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,MAAM,OAAY;AACpC,QAAM,CAAC,SAAS,YAAY,MAAM,SAAiC,IAAI;AACvE,QAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,CAAC;AAClD,QAAM,WAAW,MAAM,OAAO;AAE9B,QAAM,WAAW,oCAAY;AAAA,IAC3B;AAAA,IACA,YAAY;AAAA,MACV,cAAc,2BAAM,WAAW,IAAK;AAAA,MACpC,YAAY,0BAAK,SAAS,IAAK;AAAA,MAC/B,UAAU,2BAAM,EAAE,SAAS,QAAQ,CAAC,IAAK;AAAA,MACzC,YAAY,4BAAO,SAAS,IAAK;AAAA,IACnC,EAAE,OAAO,OAAO;AAAA,EAClB,CAAC;AAED,QAAM,EAAE,MAAM,mBAAmB;AAEjC,QAAM,oBAAoB,yCAAqB,UAAU,QAAQ;AAEjE,6CAA0B,MAAM;AAC9B,aAAS,UAAU,UAAU,OAAO;AAAA,EACtC,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAK,UAAU,WAAW,CAAC,KAAK,SAAS,SAAS;AACrD;AAAA,IACF;AAEA,WAAO,gCAAW,KAAK,UAAU,SAAS,KAAK,SAAS,SAAS,SAAS,MAAM;AAAA,EAClF,GAAG,CAAC,KAAK,SAAS,SAAS,KAAK,UAAU,OAAO,CAAC;AAElD,QAAM,aAAa,MAAM,QAAQ,MAAM;AACrC,WAAO,eAAe;AAAA,EACxB,GAAG,CAAC,KAAK,UAAU,eAAe,SAAS,CAAC,CAAC,CAAC,CAAC;AAE/C,SACE,oCAAC;AAAA,IACC,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,aAAa;AAAA,IACb;AAAA,KACI,WAEH,QACH;AAEJ,GAzD6C;AA2D7C,OAAO,cAAc;AAMrB,MAAM,cAAc;AAQb,MAAM,eAAe,MAAM,WAChC,CAAC,OAAuC,iBAAiB;AACvD,QAAsD,YAA9C,iBAAe,eAA+B,IAAhB,wBAAgB,IAAhB,CAA9B,iBAAe;AACvB,QAAM,EAAE,WAAW,sBAAsB,iBAAiB,aAAa,aAAa;AACpF,QAAM,MAAM,MAAM,OAAwB,IAAI;AAC9C,QAAM,eAAe,yCAAgB,cAAc,KAAK,SAAS;AACjE,MAAI,YAAY;AACd,WAAO;AAAA,EACT;AACA,QAAM,aAAa;AAAA,IACjB,KAAK;AAAA,KACF;AAEL,SAAO,oCAAC,yCAAY,oBAAoB,kBAAkB,UAAU,IAAI,WAAa;AACvF,CACF;AAEA,aAAa,cAAc;AAM3B,MAAM,eAAe;AAMrB,MAAM,qBAAqB,wBAAO,4BAAc;AAAA,EAC9C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,YAAY;AAAA,EAEZ,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,gBAAgB,MAAM,WACjC,CAAC,OAAwC,iBAAiB;AACxD,QAA2C,YAAnC,oBAAmC,IAAjB,yBAAiB,IAAjB,CAAlB;AACR,QAAM,EAAE,UAAU,WAAW,UAAU,GAAG,GAAG,kBAAkB,MAAM,cACnE,iBAAiB,cAAc,aAAa;AAC9C,QAAM,cAAc,yCAAqB,UAAU,YAAY;AAE/D,QAAM,WAAW,MAAM,QAAQ,MAAM;AACnC,WACE,oCAAC;AAAA,MACC,KAAI;AAAA,MACJ,kBAAgB;AAAA,MAChB,iBAAe;AAAA,OACX,eAJL;AAAA,MAKC,MAAM,aAAa,QAAQ;AAAA,MAC7B;AAAA,EAEJ,GAAG,CAAC,WAAW,UAAU,KAAK,CAAC;AAG/B,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAEA,QAAM,aAAa;AAAA,IACjB,KAAK;AAAA,IACL,GAAI,KAAa;AAAA,IACjB,GAAI,KAAa;AAAA,IACjB,UAAU;AAAA,EACZ;AAGA,SACE,oCAAC,yCAAY,mBAAmB,iBAAiB,UAAU,IAAI,aAC5D,QACH;AAEJ,CACF;AAEA,cAAc,cAAc;AAM5B,MAAM,aAAa;AASnB,MAAM,mBAAmB,wBAAO,sBAAQ;AAAA,EACtC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAGV,CAAC;AAED,MAAM,YAAY;AAAA,EAChB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,MAAM,cAAc,MAAM,WAC/B,6CAAqB,OAAsC,cAAc;AACvE,QAAkF,YAA1E,iBAAe,iBAAQ,MAAM,UAAU,cAAc,MAAqB,IAAf,uBAAe,IAAf,CAA3D,iBAAe,UAAQ,QAAgB;AAC/C,QAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,QAAM,SAAS,2BAAU;AACzB,QAAM,UAAU,YAAY,QAAQ;AACpC,QAAM,kBAAkB,kCAAiB,OAAO,KAAK,YAAmB,WAAW,EAAE;AACrF,QAAM,OAAO,CAAC;AACd,QAAM,EAAE,cAAc;AACtB,QAAM,EAAE,GAAG,MAAM,QAAQ,cAAc,EAAE,GAAG,GAAG,GAAG,EAAE;AACpD,QAAM,OAAO,yCAAgB,QAAQ,UAAU,YAAY;AAE3D,QAAM,mBAAmB,YAAY,UAAU,MAAM,GAAG,EAAE,KAAK;AAE/D,MAAI,aAAyB,EAAE,GAAG,GAAG,OAAO,MAAM,QAAQ,KAAK;AAC/D,MAAI,kBAAkB;AACpB,UAAM,UAAU,UAAU;AAC1B,QAAI,SAAS;AACX,iBAAW,WAAW,CAAC,OAAO;AAAA,IAChC;AACA,QAAI,YAAY,SAAS,YAAY,UAAU;AAC7C,iBAAW,OAAO;AAAA,IACpB;AACA,QAAI,YAAY,UAAU,YAAY,SAAS;AAC7C,iBAAW,MAAM;AAAA,IACnB;AAAA,EACF;AAGA,6CAA0B,MAAM;AA3QpC;AA4QM,mBAAQ,gBAAR,kCAAsB;AAAA,EACxB,GAAG,CAAC,MAAM,QAAQ,WAAW,CAAC;AAE9B,SACE,oCAAC,4IACK,aADL;AAAA,IAEC,KAAK;AAAA,MACD,aAHL;AAAA,IAIC,QAAO;AAAA,MAGF,qBAAqB,SAAS;AAAA,IACjC,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,EACpB,IACK,qBAAqB,YAAY;AAAA,IACpC,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,EACnB,IACK,qBAAqB,UAAU;AAAA,IAClC,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,EACpB,IACK,qBAAqB,WAAW;AAAA,IACnC,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,EACnB,EACF;AAEJ,GA1DA,cA2DF;AAEA,YAAY,cAAc;",
6
- "names": []
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 | boolean\n allowFlip?: FlipProps | boolean\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(typeof stayInFrame === 'boolean' ? {} : stayInFrame) : (null as any),\n allowFlip ? flip(typeof allowFlip === 'boolean' ? {} : 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 return (\n <PopperProvider\n scope={__scopePopper}\n anchorRef={anchorRef}\n size={size}\n arrowRef={composedArrowRefs}\n arrowStyle={middlewareData.arrow}\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 } as const,\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": "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",
6
+ "names": ["PopperArrow", "offset"]
7
7
  }
@@ -1,3 +1,4 @@
1
+ "use strict";
1
2
  var __defProp = Object.defineProperty;
2
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/floating.tsx"],
4
4
  "sourcesContent": ["export * from '@floating-ui/react-dom'\n"],
5
- "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAc,mCAAd;",
5
+ "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAc,mCAAd;",
6
6
  "names": []
7
7
  }
@@ -1,3 +1,4 @@
1
+ "use strict";
1
2
  var __defProp = Object.defineProperty;
2
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/floating.native.tsx"],
4
4
  "sourcesContent": ["export * from '@floating-ui/react-native'\n"],
5
- "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,oCAAc,sCAAd;",
5
+ "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,oCAAc,sCAAd;",
6
6
  "names": []
7
7
  }
package/dist/cjs/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ "use strict";
1
2
  var __defProp = Object.defineProperty;
2
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -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;AAAA;AAAA;AAAA;AAAA;AAAA,yBAA4D;AAC5D,wBAAc,qBADd;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAA4D;AAC5D,wBAAc,qBADd;",
6
6
  "names": []
7
7
  }
@@ -1,10 +1,10 @@
1
+ "use strict";
1
2
  var __create = Object.create;
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
6
  var __getProtoOf = Object.getPrototypeOf;
6
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
8
8
  var __export = (target, all) => {
9
9
  for (var name in all)
10
10
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -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(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
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, {
@@ -28,11 +31,11 @@ module.exports = __toCommonJS(useFloating_exports);
28
31
  var import_react = require("react");
29
32
  var Floating = __toESM(require("./floating"));
30
33
  const FloatingOverrideContext = (0, import_react.createContext)(null);
31
- const useFloating = /* @__PURE__ */ __name((props) => {
34
+ const useFloating = (props) => {
32
35
  var _a;
33
36
  const context = (0, import_react.useContext)(FloatingOverrideContext);
34
37
  return (_a = context || Floating.useFloating) == null ? void 0 : _a(props);
35
- }, "useFloating");
38
+ };
36
39
  // Annotate the CommonJS export names for ESM import in node:
37
40
  0 && (module.exports = {
38
41
  FloatingOverrideContext,
@@ -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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAE1C,eAA0B;AAWnB,MAAM,0BAA0B,gCAAoC,IAAI;AAExE,MAAM,cAAc,wBAAC,UAA+C;AAf3E;AAgBE,QAAM,UAAU,6BAAW,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;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
  }