@tamagui/popper 1.0.0-beta.7 → 1.0.1-beta.100
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Popper.js +38 -16
- package/dist/cjs/Popper.js.map +2 -2
- package/dist/cjs/index.js +2 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/useFloating.js +2 -3
- package/dist/cjs/useFloating.js.map +2 -2
- package/dist/esm/Popper.js +101 -62
- package/dist/esm/Popper.js.map +2 -2
- package/dist/esm/index.js +2 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/useFloating.js +2 -4
- package/dist/esm/useFloating.js.map +2 -2
- package/dist/jsx/Popper.js +41 -21
- package/dist/jsx/Popper.js.map +7 -0
- package/dist/jsx/floating.js +1 -0
- package/dist/jsx/floating.js.map +7 -0
- package/dist/jsx/floating.native.js +1 -0
- package/dist/jsx/floating.native.js.map +7 -0
- package/dist/jsx/index.js +3 -3
- package/dist/jsx/index.js.map +7 -0
- package/dist/jsx/useFloating.js +3 -4
- package/dist/jsx/useFloating.js.map +7 -0
- package/package.json +14 -11
- package/src/Popper.tsx +331 -0
- package/src/floating.native.tsx +1 -0
- package/src/floating.tsx +1 -0
- package/src/index.tsx +2 -0
- package/src/useFloating.tsx +20 -0
- package/types/Popper.d.ts +65 -53
- package/types/Popper.d.ts.map +1 -1
- package/types/index.d.ts +1 -1
- package/types/index.d.ts.map +1 -1
- package/types/useFloating.d.ts +3 -2
- package/types/useFloating.d.ts.map +1 -1
- package/types/floating.d.ts +0 -2
- package/types/floating.d.ts.map +0 -1
- package/types/floating.native.d.ts +0 -2
- package/types/floating.native.d.ts.map +0 -1
- package/types/useFloating.native.d.ts +0 -2
- package/types/useFloating.native.d.ts.map +0 -1
- package/types/useFloating.web.d.ts +0 -2
- package/types/useFloating.web.d.ts.map +0 -1
package/dist/cjs/Popper.js
CHANGED
|
@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
|
|
|
21
21
|
return a;
|
|
22
22
|
};
|
|
23
23
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
25
24
|
var __objRest = (source, exclude) => {
|
|
26
25
|
var target = {};
|
|
27
26
|
for (var prop in source)
|
|
@@ -54,7 +53,8 @@ __export(Popper_exports, {
|
|
|
54
53
|
PopperAnchor: () => PopperAnchor,
|
|
55
54
|
PopperArrow: () => PopperArrow,
|
|
56
55
|
PopperContent: () => PopperContent,
|
|
57
|
-
createPopperScope: () => createPopperScope
|
|
56
|
+
createPopperScope: () => createPopperScope,
|
|
57
|
+
usePopperContext: () => usePopperContext
|
|
58
58
|
});
|
|
59
59
|
module.exports = __toCommonJS(Popper_exports);
|
|
60
60
|
var import_compose_refs = require("@tamagui/compose-refs");
|
|
@@ -68,8 +68,16 @@ const POPPER_NAME = "Popper";
|
|
|
68
68
|
const [createPopperContext, createScope] = (0, import_create_context.createContextScope)(POPPER_NAME);
|
|
69
69
|
const createPopperScope = createScope;
|
|
70
70
|
const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
|
|
71
|
-
const Popper =
|
|
72
|
-
const {
|
|
71
|
+
const Popper = (props) => {
|
|
72
|
+
const {
|
|
73
|
+
__scopePopper,
|
|
74
|
+
children,
|
|
75
|
+
size,
|
|
76
|
+
strategy = "absolute",
|
|
77
|
+
placement = "bottom",
|
|
78
|
+
stayInFrame,
|
|
79
|
+
allowFlip
|
|
80
|
+
} = props;
|
|
73
81
|
const [isMounted, setIsMounted] = React.useState(false);
|
|
74
82
|
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
75
83
|
setIsMounted(true);
|
|
@@ -79,6 +87,7 @@ const Popper = /* @__PURE__ */ __name((props) => {
|
|
|
79
87
|
const [arrowSize, setArrowSize] = React.useState(0);
|
|
80
88
|
const arrowRef = React.useRef();
|
|
81
89
|
const floating = (0, import_useFloating.useFloating)({
|
|
90
|
+
strategy,
|
|
82
91
|
placement,
|
|
83
92
|
middleware: [
|
|
84
93
|
stayInFrame ? (0, import_floating.shift)(stayInFrame) : null,
|
|
@@ -110,7 +119,7 @@ const Popper = /* @__PURE__ */ __name((props) => {
|
|
|
110
119
|
onArrowSize: setArrowSize,
|
|
111
120
|
isMounted
|
|
112
121
|
}, floating), children);
|
|
113
|
-
}
|
|
122
|
+
};
|
|
114
123
|
Popper.displayName = POPPER_NAME;
|
|
115
124
|
const ANCHOR_NAME = "PopperAnchor";
|
|
116
125
|
const PopperAnchor = React.forwardRef((props, forwardedRef) => {
|
|
@@ -128,15 +137,26 @@ const PopperAnchor = React.forwardRef((props, forwardedRef) => {
|
|
|
128
137
|
});
|
|
129
138
|
PopperAnchor.displayName = ANCHOR_NAME;
|
|
130
139
|
const CONTENT_NAME = "PopperContent";
|
|
131
|
-
const PopperContentFrame = (0, import_core.styled)(import_stacks.
|
|
140
|
+
const PopperContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
132
141
|
name: "PopperContent",
|
|
133
142
|
backgroundColor: "$background",
|
|
134
143
|
alignItems: "center",
|
|
144
|
+
radiused: true,
|
|
145
|
+
variants: {
|
|
146
|
+
size: {
|
|
147
|
+
"...size": (val, { tokens }) => {
|
|
148
|
+
return {
|
|
149
|
+
padding: tokens.space[val],
|
|
150
|
+
borderRadius: tokens.radius[val]
|
|
151
|
+
};
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
},
|
|
135
155
|
defaultVariants: {
|
|
136
156
|
size: "$4"
|
|
137
157
|
}
|
|
138
158
|
});
|
|
139
|
-
const PopperContent = React.forwardRef((props, forwardedRef) => {
|
|
159
|
+
const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
140
160
|
const _a = props, { __scopePopper } = _a, contentProps = __objRest(_a, ["__scopePopper"]);
|
|
141
161
|
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
142
162
|
const contentRefs = (0, import_compose_refs.useComposedRefs)(floating, forwardedRef);
|
|
@@ -146,7 +166,7 @@ const PopperContent = React.forwardRef((props, forwardedRef) => {
|
|
|
146
166
|
"data-placement": placement,
|
|
147
167
|
"data-strategy": strategy
|
|
148
168
|
}, contentProps), {
|
|
149
|
-
size: contentProps.size
|
|
169
|
+
size: contentProps.size || size
|
|
150
170
|
}));
|
|
151
171
|
}, [placement, strategy, props]);
|
|
152
172
|
if (!isMounted) {
|
|
@@ -156,10 +176,10 @@ const PopperContent = React.forwardRef((props, forwardedRef) => {
|
|
|
156
176
|
ref: contentRefs,
|
|
157
177
|
x: x || 0,
|
|
158
178
|
y: y || 0,
|
|
159
|
-
position:
|
|
179
|
+
position: strategy
|
|
160
180
|
};
|
|
161
181
|
return /* @__PURE__ */ React.createElement(import_stacks.YStack, __spreadValues({}, getFloatingProps ? getFloatingProps(frameProps) : frameProps), contents);
|
|
162
|
-
});
|
|
182
|
+
}));
|
|
163
183
|
PopperContent.displayName = CONTENT_NAME;
|
|
164
184
|
const ARROW_NAME = "PopperArrow";
|
|
165
185
|
const PopperArrowFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
@@ -167,7 +187,8 @@ const PopperArrowFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
|
167
187
|
borderColor: "$borderColor",
|
|
168
188
|
backgroundColor: "$background",
|
|
169
189
|
position: "absolute",
|
|
170
|
-
zIndex: 1
|
|
190
|
+
zIndex: -1,
|
|
191
|
+
pointerEvents: "none"
|
|
171
192
|
});
|
|
172
193
|
const opposites = {
|
|
173
194
|
top: "bottom",
|
|
@@ -175,18 +196,18 @@ const opposites = {
|
|
|
175
196
|
bottom: "top",
|
|
176
197
|
left: "right"
|
|
177
198
|
};
|
|
178
|
-
const PopperArrow = React.forwardRef(
|
|
199
|
+
const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
179
200
|
const _a = props, { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0 } = _a, arrowProps = __objRest(_a, ["__scopePopper", "offset", "size", "borderWidth"]);
|
|
180
201
|
const context = usePopperContext(ARROW_NAME, __scopePopper);
|
|
181
202
|
const tokens = (0, import_core.getTokens)();
|
|
182
203
|
const sizeVal = sizeProp ?? context.size;
|
|
183
|
-
const sizeValResolved = (0, import_core.getVariableValue)(tokens.
|
|
204
|
+
const sizeValResolved = (0, import_core.getVariableValue)((0, import_core.stepTokenUpOrDown)(tokens.space, sizeVal, -2, [2]));
|
|
184
205
|
const size = +sizeValResolved;
|
|
185
206
|
const { placement } = context;
|
|
186
207
|
const { x, y } = context.arrowStyle || { x: 0, y: 0 };
|
|
187
208
|
const refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef);
|
|
188
209
|
const primaryPlacement = placement ? placement.split("-")[0] : "top";
|
|
189
|
-
|
|
210
|
+
const arrowStyle = { x, y, width: size, height: size };
|
|
190
211
|
if (primaryPlacement) {
|
|
191
212
|
const oppSide = opposites[primaryPlacement];
|
|
192
213
|
if (oppSide) {
|
|
@@ -220,7 +241,7 @@ const PopperArrow = React.forwardRef(/* @__PURE__ */ __name(function PopperArrow
|
|
|
220
241
|
borderBottomWidth: borderWidth,
|
|
221
242
|
borderLeftWidth: borderWidth
|
|
222
243
|
}));
|
|
223
|
-
}
|
|
244
|
+
}));
|
|
224
245
|
PopperArrow.displayName = ARROW_NAME;
|
|
225
246
|
// Annotate the CommonJS export names for ESM import in node:
|
|
226
247
|
0 && (module.exports = {
|
|
@@ -228,6 +249,7 @@ PopperArrow.displayName = ARROW_NAME;
|
|
|
228
249
|
PopperAnchor,
|
|
229
250
|
PopperArrow,
|
|
230
251
|
PopperContent,
|
|
231
|
-
createPopperScope
|
|
252
|
+
createPopperScope,
|
|
253
|
+
usePopperContext
|
|
232
254
|
});
|
|
233
255
|
//# sourceMappingURL=Popper.js.map
|
package/dist/cjs/Popper.js.map
CHANGED
|
@@ -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": "
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n StackProps,\n getTokens,\n getVariableValue,\n stepTokenUpOrDown,\n styled,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, Strategy, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingReturn, useFloating } from './useFloating'\n\ntype ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never\ntype FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper'\n\ntype ScopedProps<P> = P & { __scopePopper?: Scope }\nconst [createPopperContext, createScope] = createContextScope(POPPER_NAME)\n\nexport const createPopperScope = createScope\n\ntype PopperContextValue = UseFloatingReturn & {\n isMounted: boolean\n anchorRef: any\n size?: SizeTokens\n placement?: Placement\n arrowRef: any\n onArrowSize?: (val: number) => void\n arrowStyle?: Partial<Coords> & {\n centerOffset: number\n }\n}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n size?: SizeTokens\n children?: React.ReactNode\n placement?: Placement\n stayInFrame?: ShiftProps\n allowFlip?: FlipProps\n strategy?: Strategy\n}\n\nexport const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n const {\n __scopePopper,\n children,\n size,\n strategy = 'absolute',\n placement = 'bottom',\n stayInFrame,\n allowFlip,\n } = props\n\n const [isMounted, setIsMounted] = React.useState(false)\n useIsomorphicLayoutEffect(() => {\n setIsMounted(true)\n }, [])\n\n const anchorRef = React.useRef<any>()\n const [arrowEl, setArrow] = React.useState<HTMLSpanElement | null>(null)\n const [arrowSize, setArrowSize] = React.useState(0)\n const arrowRef = React.useRef()\n\n const floating = useFloating({\n strategy,\n placement,\n middleware: [\n stayInFrame ? shift(stayInFrame) : (null as any),\n allowFlip ? flip(allowFlip) : (null as any),\n arrowEl ? arrow({ element: arrowEl }) : (null as any),\n arrowSize ? offset(arrowSize) : (null as any),\n ].filter(Boolean),\n })\n\n const { refs, middlewareData } = floating\n\n const composedArrowRefs = useComposedRefs<any>(arrowRef, setArrow)\n\n useIsomorphicLayoutEffect(() => {\n floating.reference(anchorRef.current)\n }, [anchorRef])\n\n React.useEffect(() => {\n if (!refs.reference.current || !refs.floating.current) {\n return\n }\n // Only call this when the floating element is rendered\n return autoUpdate(refs.reference.current, refs.floating.current, floating.update)\n }, [refs.floating.current, refs.reference.current])\n\n const arrowStyle = React.useMemo(() => {\n return middlewareData.arrow\n }, [JSON.stringify(middlewareData.arrow || {})])\n\n return (\n <PopperProvider\n scope={__scopePopper}\n anchorRef={anchorRef}\n size={size}\n arrowRef={composedArrowRefs}\n arrowStyle={arrowStyle}\n onArrowSize={setArrowSize}\n isMounted={isMounted}\n {...floating}\n >\n {children}\n </PopperProvider>\n )\n}\n\nPopper.displayName = POPPER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor'\n\ntype PopperAnchorRef = HTMLElement | View\n\nexport type PopperAnchorProps = YStackProps & {\n virtualRef?: React.RefObject<any>\n}\n\nexport const PopperAnchor = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\n const { __scopePopper, virtualRef, ...anchorProps } = props\n const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper)\n const ref = React.useRef<PopperAnchorRef>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)\n if (virtualRef) {\n return null\n }\n const stackProps = {\n ref: composedRefs,\n ...anchorProps,\n }\n return <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(ThemeableStack, {\n name: 'PopperContent',\n backgroundColor: '$background',\n alignItems: 'center',\n radiused: true,\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n padding: tokens.space[val],\n borderRadius: tokens.radius[val],\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const PopperContent = PopperContentFrame.extractable(\n React.forwardRef<PopperContentElement, PopperContentProps>(\n (props: ScopedProps<PopperContentProps>, forwardedRef) => {\n const { __scopePopper, ...contentProps } = props\n const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } =\n usePopperContext(CONTENT_NAME, __scopePopper)\n const contentRefs = useComposedRefs<any>(floating, forwardedRef)\n\n const contents = React.useMemo(() => {\n return (\n <PopperContentFrame\n key=\"popper-content-frame\"\n data-placement={placement}\n data-strategy={strategy}\n {...contentProps}\n // @ts-ignore\n size={contentProps.size || size}\n />\n )\n }, [placement, strategy, props])\n\n // all poppers hidden on ssr by default\n if (!isMounted) {\n return null\n }\n\n const frameProps = {\n ref: contentRefs,\n x: x || 0,\n y: y || 0,\n position: strategy,\n }\n\n // outer frame because we explicitly dont want animation to apply to this\n return (\n <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n {contents}\n </YStack>\n )\n }\n )\n)\n\nPopperContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow'\n\ntype PopperArrowElement = HTMLElement | View\n\nexport type PopperArrowProps = YStackProps & {\n offset?: number\n size?: SizeTokens\n}\n\nconst PopperArrowFrame = styled(YStack, {\n name: 'PopperArrow',\n borderColor: '$borderColor',\n backgroundColor: '$background',\n position: 'absolute',\n zIndex: -1,\n pointerEvents: 'none',\n})\n\nconst opposites = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n}\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n props: ScopedProps<PopperArrowProps>,\n forwardedRef\n ) {\n const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n const context = usePopperContext(ARROW_NAME, __scopePopper)\n const tokens = getTokens()\n const sizeVal = sizeProp ?? context.size\n const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]))\n const size = +sizeValResolved\n const { placement } = context\n const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n const arrowStyle: StackProps = { x, y, width: size, height: size }\n if (primaryPlacement) {\n const oppSide = opposites[primaryPlacement]\n if (oppSide) {\n arrowStyle[oppSide] = -size / 2\n }\n if (oppSide === 'top' || oppSide === 'bottom') {\n arrowStyle.left = 0\n }\n if (oppSide === 'left' || oppSide === 'right') {\n arrowStyle.top = 0\n }\n }\n\n // send the Arrow's offset up to Popper\n useIsomorphicLayoutEffect(() => {\n context.onArrowSize?.(size)\n }, [size, context.onArrowSize])\n\n return (\n <PopperArrowFrame\n {...arrowProps}\n ref={refs}\n {...arrowStyle}\n rotate=\"45deg\"\n {...(primaryPlacement === 'top' && {\n borderBottomWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'bottom' && {\n borderTopWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n {...(primaryPlacement === 'left' && {\n borderTopWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'right' && {\n borderBottomWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n />\n )\n })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -18,15 +18,13 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
|
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
var src_exports = {};
|
|
20
20
|
__export(src_exports, {
|
|
21
|
-
FloatingOverrideContext: () => import_useFloating.FloatingOverrideContext
|
|
22
|
-
UseFloatingFn: () => import_useFloating.UseFloatingFn
|
|
21
|
+
FloatingOverrideContext: () => import_useFloating.FloatingOverrideContext
|
|
23
22
|
});
|
|
24
23
|
module.exports = __toCommonJS(src_exports);
|
|
25
24
|
var import_useFloating = require("./useFloating");
|
|
26
25
|
__reExport(src_exports, require("./Popper"), module.exports);
|
|
27
26
|
// Annotate the CommonJS export names for ESM import in node:
|
|
28
27
|
0 && (module.exports = {
|
|
29
|
-
FloatingOverrideContext
|
|
30
|
-
UseFloatingFn
|
|
28
|
+
FloatingOverrideContext
|
|
31
29
|
});
|
|
32
30
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["export { FloatingOverrideContext, UseFloatingFn } from './useFloating'\nexport * from './Popper'\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["export { FloatingOverrideContext, type UseFloatingFn } from './useFloating'\nexport * from './Popper'\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAA4D;AAC5D,wBAAc,qBADd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/useFloating.js
CHANGED
|
@@ -4,7 +4,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
8
7
|
var __export = (target, all) => {
|
|
9
8
|
for (var name in all)
|
|
10
9
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -28,11 +27,11 @@ module.exports = __toCommonJS(useFloating_exports);
|
|
|
28
27
|
var import_react = require("react");
|
|
29
28
|
var Floating = __toESM(require("./floating"));
|
|
30
29
|
const FloatingOverrideContext = (0, import_react.createContext)(null);
|
|
31
|
-
const useFloating =
|
|
30
|
+
const useFloating = (props) => {
|
|
32
31
|
var _a;
|
|
33
32
|
const context = (0, import_react.useContext)(FloatingOverrideContext);
|
|
34
33
|
return (_a = context || Floating.useFloating) == null ? void 0 : _a(props);
|
|
35
|
-
}
|
|
34
|
+
};
|
|
36
35
|
// Annotate the CommonJS export names for ESM import in node:
|
|
37
36
|
0 && (module.exports = {
|
|
38
37
|
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
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingReturn = Floating.UseFloatingReturn & {\n context?: any\n getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingReturn => {\n const context = useContext(FloatingOverrideContext)\n return (context || Floating.useFloating)?.(props)\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAE1C,eAA0B;AAYnB,MAAM,0BAA0B,gCAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAhB3E;AAiBE,QAAM,UAAU,6BAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Popper.js
CHANGED
|
@@ -1,14 +1,44 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
-
var
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
3
32
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
4
33
|
import {
|
|
5
34
|
getTokens,
|
|
6
35
|
getVariableValue,
|
|
36
|
+
stepTokenUpOrDown,
|
|
7
37
|
styled,
|
|
8
38
|
useIsomorphicLayoutEffect
|
|
9
39
|
} from "@tamagui/core";
|
|
10
40
|
import { createContextScope } from "@tamagui/create-context";
|
|
11
|
-
import {
|
|
41
|
+
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
12
42
|
import * as React from "react";
|
|
13
43
|
import { arrow, autoUpdate, flip, offset, shift } from "./floating";
|
|
14
44
|
import { useFloating } from "./useFloating";
|
|
@@ -16,8 +46,16 @@ const POPPER_NAME = "Popper";
|
|
|
16
46
|
const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
|
|
17
47
|
const createPopperScope = createScope;
|
|
18
48
|
const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
|
|
19
|
-
const Popper =
|
|
20
|
-
const {
|
|
49
|
+
const Popper = (props) => {
|
|
50
|
+
const {
|
|
51
|
+
__scopePopper,
|
|
52
|
+
children,
|
|
53
|
+
size,
|
|
54
|
+
strategy = "absolute",
|
|
55
|
+
placement = "bottom",
|
|
56
|
+
stayInFrame,
|
|
57
|
+
allowFlip
|
|
58
|
+
} = props;
|
|
21
59
|
const [isMounted, setIsMounted] = React.useState(false);
|
|
22
60
|
useIsomorphicLayoutEffect(() => {
|
|
23
61
|
setIsMounted(true);
|
|
@@ -27,6 +65,7 @@ const Popper = /* @__PURE__ */ __name((props) => {
|
|
|
27
65
|
const [arrowSize, setArrowSize] = React.useState(0);
|
|
28
66
|
const arrowRef = React.useRef();
|
|
29
67
|
const floating = useFloating({
|
|
68
|
+
strategy,
|
|
30
69
|
placement,
|
|
31
70
|
middleware: [
|
|
32
71
|
stayInFrame ? shift(stayInFrame) : null,
|
|
@@ -49,58 +88,64 @@ const Popper = /* @__PURE__ */ __name((props) => {
|
|
|
49
88
|
const arrowStyle = React.useMemo(() => {
|
|
50
89
|
return middlewareData.arrow;
|
|
51
90
|
}, [JSON.stringify(middlewareData.arrow || {})]);
|
|
52
|
-
return /* @__PURE__ */ React.createElement(PopperProvider, {
|
|
91
|
+
return /* @__PURE__ */ React.createElement(PopperProvider, __spreadValues({
|
|
53
92
|
scope: __scopePopper,
|
|
54
93
|
anchorRef,
|
|
55
94
|
size,
|
|
56
95
|
arrowRef: composedArrowRefs,
|
|
57
96
|
arrowStyle,
|
|
58
97
|
onArrowSize: setArrowSize,
|
|
59
|
-
isMounted
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}, "Popper");
|
|
98
|
+
isMounted
|
|
99
|
+
}, floating), children);
|
|
100
|
+
};
|
|
63
101
|
Popper.displayName = POPPER_NAME;
|
|
64
102
|
const ANCHOR_NAME = "PopperAnchor";
|
|
65
103
|
const PopperAnchor = React.forwardRef((props, forwardedRef) => {
|
|
66
|
-
const { __scopePopper, virtualRef,
|
|
104
|
+
const _a = props, { __scopePopper, virtualRef } = _a, anchorProps = __objRest(_a, ["__scopePopper", "virtualRef"]);
|
|
67
105
|
const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
68
106
|
const ref = React.useRef(null);
|
|
69
107
|
const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
|
|
70
108
|
if (virtualRef) {
|
|
71
109
|
return null;
|
|
72
110
|
}
|
|
73
|
-
const stackProps = {
|
|
74
|
-
ref: composedRefs
|
|
75
|
-
|
|
76
|
-
};
|
|
77
|
-
return /* @__PURE__ */ React.createElement(YStack, {
|
|
78
|
-
...getReferenceProps ? getReferenceProps(stackProps) : stackProps
|
|
79
|
-
});
|
|
111
|
+
const stackProps = __spreadValues({
|
|
112
|
+
ref: composedRefs
|
|
113
|
+
}, anchorProps);
|
|
114
|
+
return /* @__PURE__ */ React.createElement(YStack, __spreadValues({}, getReferenceProps ? getReferenceProps(stackProps) : stackProps));
|
|
80
115
|
});
|
|
81
116
|
PopperAnchor.displayName = ANCHOR_NAME;
|
|
82
117
|
const CONTENT_NAME = "PopperContent";
|
|
83
|
-
const PopperContentFrame = styled(
|
|
118
|
+
const PopperContentFrame = styled(ThemeableStack, {
|
|
84
119
|
name: "PopperContent",
|
|
85
120
|
backgroundColor: "$background",
|
|
86
121
|
alignItems: "center",
|
|
122
|
+
radiused: true,
|
|
123
|
+
variants: {
|
|
124
|
+
size: {
|
|
125
|
+
"...size": (val, { tokens }) => {
|
|
126
|
+
return {
|
|
127
|
+
padding: tokens.space[val],
|
|
128
|
+
borderRadius: tokens.radius[val]
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
},
|
|
87
133
|
defaultVariants: {
|
|
88
134
|
size: "$4"
|
|
89
135
|
}
|
|
90
136
|
});
|
|
91
|
-
const PopperContent = React.forwardRef((props, forwardedRef) => {
|
|
92
|
-
const { __scopePopper,
|
|
137
|
+
const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
138
|
+
const _a = props, { __scopePopper } = _a, contentProps = __objRest(_a, ["__scopePopper"]);
|
|
93
139
|
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
94
140
|
const contentRefs = useComposedRefs(floating, forwardedRef);
|
|
95
141
|
const contents = React.useMemo(() => {
|
|
96
|
-
|
|
97
|
-
return /* @__PURE__ */ React.createElement(PopperContentFrame, {
|
|
142
|
+
return /* @__PURE__ */ React.createElement(PopperContentFrame, __spreadProps(__spreadValues({
|
|
98
143
|
key: "popper-content-frame",
|
|
99
144
|
"data-placement": placement,
|
|
100
|
-
"data-strategy": strategy
|
|
101
|
-
|
|
102
|
-
size:
|
|
103
|
-
});
|
|
145
|
+
"data-strategy": strategy
|
|
146
|
+
}, contentProps), {
|
|
147
|
+
size: contentProps.size || size
|
|
148
|
+
}));
|
|
104
149
|
}, [placement, strategy, props]);
|
|
105
150
|
if (!isMounted) {
|
|
106
151
|
return null;
|
|
@@ -109,12 +154,10 @@ const PopperContent = React.forwardRef((props, forwardedRef) => {
|
|
|
109
154
|
ref: contentRefs,
|
|
110
155
|
x: x || 0,
|
|
111
156
|
y: y || 0,
|
|
112
|
-
position:
|
|
157
|
+
position: strategy
|
|
113
158
|
};
|
|
114
|
-
return /* @__PURE__ */ React.createElement(YStack, {
|
|
115
|
-
|
|
116
|
-
}, contents);
|
|
117
|
-
});
|
|
159
|
+
return /* @__PURE__ */ React.createElement(YStack, __spreadValues({}, getFloatingProps ? getFloatingProps(frameProps) : frameProps), contents);
|
|
160
|
+
}));
|
|
118
161
|
PopperContent.displayName = CONTENT_NAME;
|
|
119
162
|
const ARROW_NAME = "PopperArrow";
|
|
120
163
|
const PopperArrowFrame = styled(YStack, {
|
|
@@ -122,7 +165,8 @@ const PopperArrowFrame = styled(YStack, {
|
|
|
122
165
|
borderColor: "$borderColor",
|
|
123
166
|
backgroundColor: "$background",
|
|
124
167
|
position: "absolute",
|
|
125
|
-
zIndex: 1
|
|
168
|
+
zIndex: -1,
|
|
169
|
+
pointerEvents: "none"
|
|
126
170
|
});
|
|
127
171
|
const opposites = {
|
|
128
172
|
top: "bottom",
|
|
@@ -130,19 +174,18 @@ const opposites = {
|
|
|
130
174
|
bottom: "top",
|
|
131
175
|
left: "right"
|
|
132
176
|
};
|
|
133
|
-
const PopperArrow = React.forwardRef(
|
|
134
|
-
|
|
135
|
-
const { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props;
|
|
177
|
+
const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
178
|
+
const _a = props, { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0 } = _a, arrowProps = __objRest(_a, ["__scopePopper", "offset", "size", "borderWidth"]);
|
|
136
179
|
const context = usePopperContext(ARROW_NAME, __scopePopper);
|
|
137
180
|
const tokens = getTokens();
|
|
138
|
-
const sizeVal = sizeProp
|
|
139
|
-
const sizeValResolved = getVariableValue((
|
|
181
|
+
const sizeVal = sizeProp ?? context.size;
|
|
182
|
+
const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]));
|
|
140
183
|
const size = +sizeValResolved;
|
|
141
184
|
const { placement } = context;
|
|
142
185
|
const { x, y } = context.arrowStyle || { x: 0, y: 0 };
|
|
143
186
|
const refs = useComposedRefs(context.arrowRef, forwardedRef);
|
|
144
187
|
const primaryPlacement = placement ? placement.split("-")[0] : "top";
|
|
145
|
-
|
|
188
|
+
const arrowStyle = { x, y, width: size, height: size };
|
|
146
189
|
if (primaryPlacement) {
|
|
147
190
|
const oppSide = opposites[primaryPlacement];
|
|
148
191
|
if (oppSide) {
|
|
@@ -159,35 +202,31 @@ const PopperArrow = React.forwardRef(/* @__PURE__ */ __name(function PopperArrow
|
|
|
159
202
|
var _a2;
|
|
160
203
|
(_a2 = context.onArrowSize) == null ? void 0 : _a2.call(context, size);
|
|
161
204
|
}, [size, context.onArrowSize]);
|
|
162
|
-
return /* @__PURE__ */ React.createElement(PopperArrowFrame, {
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
borderBottomWidth: borderWidth,
|
|
181
|
-
borderLeftWidth: borderWidth
|
|
182
|
-
}
|
|
183
|
-
});
|
|
184
|
-
}, "PopperArrow"));
|
|
205
|
+
return /* @__PURE__ */ React.createElement(PopperArrowFrame, __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, arrowProps), {
|
|
206
|
+
ref: refs
|
|
207
|
+
}), arrowStyle), {
|
|
208
|
+
rotate: "45deg"
|
|
209
|
+
}), primaryPlacement === "top" && {
|
|
210
|
+
borderBottomWidth: borderWidth,
|
|
211
|
+
borderRightWidth: borderWidth
|
|
212
|
+
}), primaryPlacement === "bottom" && {
|
|
213
|
+
borderTopWidth: borderWidth,
|
|
214
|
+
borderLeftWidth: borderWidth
|
|
215
|
+
}), primaryPlacement === "left" && {
|
|
216
|
+
borderTopWidth: borderWidth,
|
|
217
|
+
borderRightWidth: borderWidth
|
|
218
|
+
}), primaryPlacement === "right" && {
|
|
219
|
+
borderBottomWidth: borderWidth,
|
|
220
|
+
borderLeftWidth: borderWidth
|
|
221
|
+
}));
|
|
222
|
+
}));
|
|
185
223
|
PopperArrow.displayName = ARROW_NAME;
|
|
186
224
|
export {
|
|
187
225
|
Popper,
|
|
188
226
|
PopperAnchor,
|
|
189
227
|
PopperArrow,
|
|
190
228
|
PopperContent,
|
|
191
|
-
createPopperScope
|
|
229
|
+
createPopperScope,
|
|
230
|
+
usePopperContext
|
|
192
231
|
};
|
|
193
232
|
//# sourceMappingURL=Popper.js.map
|
package/dist/esm/Popper.js.map
CHANGED
|
@@ -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": "
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n StackProps,\n getTokens,\n getVariableValue,\n stepTokenUpOrDown,\n styled,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, Strategy, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingReturn, useFloating } from './useFloating'\n\ntype ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never\ntype FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper'\n\ntype ScopedProps<P> = P & { __scopePopper?: Scope }\nconst [createPopperContext, createScope] = createContextScope(POPPER_NAME)\n\nexport const createPopperScope = createScope\n\ntype PopperContextValue = UseFloatingReturn & {\n isMounted: boolean\n anchorRef: any\n size?: SizeTokens\n placement?: Placement\n arrowRef: any\n onArrowSize?: (val: number) => void\n arrowStyle?: Partial<Coords> & {\n centerOffset: number\n }\n}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n size?: SizeTokens\n children?: React.ReactNode\n placement?: Placement\n stayInFrame?: ShiftProps\n allowFlip?: FlipProps\n strategy?: Strategy\n}\n\nexport const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n const {\n __scopePopper,\n children,\n size,\n strategy = 'absolute',\n placement = 'bottom',\n stayInFrame,\n allowFlip,\n } = props\n\n const [isMounted, setIsMounted] = React.useState(false)\n useIsomorphicLayoutEffect(() => {\n setIsMounted(true)\n }, [])\n\n const anchorRef = React.useRef<any>()\n const [arrowEl, setArrow] = React.useState<HTMLSpanElement | null>(null)\n const [arrowSize, setArrowSize] = React.useState(0)\n const arrowRef = React.useRef()\n\n const floating = useFloating({\n strategy,\n placement,\n middleware: [\n stayInFrame ? shift(stayInFrame) : (null as any),\n allowFlip ? flip(allowFlip) : (null as any),\n arrowEl ? arrow({ element: arrowEl }) : (null as any),\n arrowSize ? offset(arrowSize) : (null as any),\n ].filter(Boolean),\n })\n\n const { refs, middlewareData } = floating\n\n const composedArrowRefs = useComposedRefs<any>(arrowRef, setArrow)\n\n useIsomorphicLayoutEffect(() => {\n floating.reference(anchorRef.current)\n }, [anchorRef])\n\n React.useEffect(() => {\n if (!refs.reference.current || !refs.floating.current) {\n return\n }\n // Only call this when the floating element is rendered\n return autoUpdate(refs.reference.current, refs.floating.current, floating.update)\n }, [refs.floating.current, refs.reference.current])\n\n const arrowStyle = React.useMemo(() => {\n return middlewareData.arrow\n }, [JSON.stringify(middlewareData.arrow || {})])\n\n return (\n <PopperProvider\n scope={__scopePopper}\n anchorRef={anchorRef}\n size={size}\n arrowRef={composedArrowRefs}\n arrowStyle={arrowStyle}\n onArrowSize={setArrowSize}\n isMounted={isMounted}\n {...floating}\n >\n {children}\n </PopperProvider>\n )\n}\n\nPopper.displayName = POPPER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor'\n\ntype PopperAnchorRef = HTMLElement | View\n\nexport type PopperAnchorProps = YStackProps & {\n virtualRef?: React.RefObject<any>\n}\n\nexport const PopperAnchor = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\n const { __scopePopper, virtualRef, ...anchorProps } = props\n const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper)\n const ref = React.useRef<PopperAnchorRef>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)\n if (virtualRef) {\n return null\n }\n const stackProps = {\n ref: composedRefs,\n ...anchorProps,\n }\n return <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(ThemeableStack, {\n name: 'PopperContent',\n backgroundColor: '$background',\n alignItems: 'center',\n radiused: true,\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n padding: tokens.space[val],\n borderRadius: tokens.radius[val],\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const PopperContent = PopperContentFrame.extractable(\n React.forwardRef<PopperContentElement, PopperContentProps>(\n (props: ScopedProps<PopperContentProps>, forwardedRef) => {\n const { __scopePopper, ...contentProps } = props\n const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } =\n usePopperContext(CONTENT_NAME, __scopePopper)\n const contentRefs = useComposedRefs<any>(floating, forwardedRef)\n\n const contents = React.useMemo(() => {\n return (\n <PopperContentFrame\n key=\"popper-content-frame\"\n data-placement={placement}\n data-strategy={strategy}\n {...contentProps}\n // @ts-ignore\n size={contentProps.size || size}\n />\n )\n }, [placement, strategy, props])\n\n // all poppers hidden on ssr by default\n if (!isMounted) {\n return null\n }\n\n const frameProps = {\n ref: contentRefs,\n x: x || 0,\n y: y || 0,\n position: strategy,\n }\n\n // outer frame because we explicitly dont want animation to apply to this\n return (\n <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n {contents}\n </YStack>\n )\n }\n )\n)\n\nPopperContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow'\n\ntype PopperArrowElement = HTMLElement | View\n\nexport type PopperArrowProps = YStackProps & {\n offset?: number\n size?: SizeTokens\n}\n\nconst PopperArrowFrame = styled(YStack, {\n name: 'PopperArrow',\n borderColor: '$borderColor',\n backgroundColor: '$background',\n position: 'absolute',\n zIndex: -1,\n pointerEvents: 'none',\n})\n\nconst opposites = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n}\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n props: ScopedProps<PopperArrowProps>,\n forwardedRef\n ) {\n const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n const context = usePopperContext(ARROW_NAME, __scopePopper)\n const tokens = getTokens()\n const sizeVal = sizeProp ?? context.size\n const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]))\n const size = +sizeValResolved\n const { placement } = context\n const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n const arrowStyle: StackProps = { x, y, width: size, height: size }\n if (primaryPlacement) {\n const oppSide = opposites[primaryPlacement]\n if (oppSide) {\n arrowStyle[oppSide] = -size / 2\n }\n if (oppSide === 'top' || oppSide === 'bottom') {\n arrowStyle.left = 0\n }\n if (oppSide === 'left' || oppSide === 'right') {\n arrowStyle.top = 0\n }\n }\n\n // send the Arrow's offset up to Popper\n useIsomorphicLayoutEffect(() => {\n context.onArrowSize?.(size)\n }, [size, context.onArrowSize])\n\n return (\n <PopperArrowFrame\n {...arrowProps}\n ref={refs}\n {...arrowStyle}\n rotate=\"45deg\"\n {...(primaryPlacement === 'top' && {\n borderBottomWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'bottom' && {\n borderTopWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n {...(primaryPlacement === 'left' && {\n borderTopWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'right' && {\n borderBottomWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n />\n )\n })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AACA;AAGA;AACA;AASA,MAAM,cAAc;AAGpB,MAAM,CAAC,qBAAqB,eAAe,mBAAmB,WAAW;AAElE,MAAM,oBAAoB;AAajC,MAAM,CAAC,gBAAgB,oBAAoB,oBAAwC,WAAW;AAWvF,MAAM,SAAgC,CAAC,UAAoC;AAChF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,KAAK;AACtD,4BAA0B,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,YAAY;AAAA,IAC3B;AAAA,IACA;AAAA,IACA,YAAY;AAAA,MACV,cAAc,MAAM,WAAW,IAAK;AAAA,MACpC,YAAY,KAAK,SAAS,IAAK;AAAA,MAC/B,UAAU,MAAM,EAAE,SAAS,QAAQ,CAAC,IAAK;AAAA,MACzC,YAAY,OAAO,SAAS,IAAK;AAAA,IACnC,EAAE,OAAO,OAAO;AAAA,EAClB,CAAC;AAED,QAAM,EAAE,MAAM,mBAAmB;AAEjC,QAAM,oBAAoB,gBAAqB,UAAU,QAAQ;AAEjE,4BAA0B,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,WAAW,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;AAEA,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,gBAAgB,cAAc,KAAK,SAAS;AACjE,MAAI,YAAY;AACd,WAAO;AAAA,EACT;AACA,QAAM,aAAa;AAAA,IACjB,KAAK;AAAA,KACF;AAEL,SAAO,oCAAC,2BAAY,oBAAoB,kBAAkB,UAAU,IAAI,WAAa;AACvF,CACF;AAEA,aAAa,cAAc;AAM3B,MAAM,eAAe;AAMrB,MAAM,qBAAqB,OAAO,gBAAgB;AAAA,EAChD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,SAAS,OAAO,MAAM;AAAA,UACtB,cAAc,OAAO,OAAO;AAAA,QAC9B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,gBAAgB,mBAAmB,YAC9C,MAAM,WACJ,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,gBAAqB,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,MAMC,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,GAAG,KAAK;AAAA,IACR,GAAG,KAAK;AAAA,IACR,UAAU;AAAA,EACZ;AAGA,SACE,oCAAC,2BAAY,mBAAmB,iBAAiB,UAAU,IAAI,aAC5D,QACH;AAEJ,CACF,CACF;AAEA,cAAc,cAAc;AAM5B,MAAM,aAAa;AASnB,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EACtC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AACjB,CAAC;AAED,MAAM,YAAY;AAAA,EAChB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,MAAM,cAAc,iBAAiB,YAC1C,MAAM,WAAiD,sBACrD,OACA,cACA;AACA,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,UAAU;AACzB,QAAM,UAAU,YAAY,QAAQ;AACpC,QAAM,kBAAkB,iBAAiB,kBAAkB,OAAO,OAAO,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC;AAC1F,QAAM,OAAO,CAAC;AACd,QAAM,EAAE,cAAc;AACtB,QAAM,EAAE,GAAG,MAAM,QAAQ,cAAc,EAAE,GAAG,GAAG,GAAG,EAAE;AACpD,QAAM,OAAO,gBAAgB,QAAQ,UAAU,YAAY;AAE3D,QAAM,mBAAmB,YAAY,UAAU,MAAM,GAAG,EAAE,KAAK;AAE/D,QAAM,aAAyB,EAAE,GAAG,GAAG,OAAO,MAAM,QAAQ,KAAK;AACjE,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,4BAA0B,MAAM;AAvSpC;AAwSM,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,MACF,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,CAAC,CACH;AAEA,YAAY,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|