@tamagui/popper 1.0.1-beta.121 → 1.0.1-beta.124

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 (14) hide show
  1. package/dist/cjs/Popper.js +27 -12
  2. package/dist/cjs/Popper.js.map +2 -2
  3. package/dist/esm/Popper.js +27 -12
  4. package/dist/esm/Popper.js.map +2 -2
  5. package/dist/jsx/Popper.js +19 -8
  6. package/dist/jsx/Popper.js.map +2 -2
  7. package/package.json +7 -7
  8. package/src/Popper.tsx +46 -27
  9. package/types/Popper.d.ts +9 -9
  10. package/types/Popper.d.ts.map +0 -1
  11. package/types/floating.d.ts.map +0 -1
  12. package/types/floating.native.d.ts.map +0 -1
  13. package/types/index.d.ts.map +0 -1
  14. package/types/useFloating.d.ts.map +0 -1
package/dist/cjs/Popper.js CHANGED
@@ -141,8 +141,8 @@ const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, fo
141
141
  key: "popper-content-frame",
142
142
  "data-placement": placement,
143
143
  "data-strategy": strategy,
144
- ...contentProps,
145
- size: contentProps.size || size
144
+ size: contentProps.size || size,
145
+ ...contentProps
146
146
  });
147
147
  }, [placement, strategy, props]);
148
148
  if (!isMounted) {
@@ -164,9 +164,16 @@ const PopperArrowFrame = (0, import_core.styled)(import_stacks.YStack, {
164
164
  name: "PopperArrow",
165
165
  borderColor: "$borderColor",
166
166
  backgroundColor: "$background",
167
+ position: "relative"
168
+ });
169
+ const PopperArrowOuterFrame = (0, import_core.styled)(import_stacks.YStack, {
170
+ name: "PopperArrowOuter",
167
171
  position: "absolute",
168
172
  zIndex: -1,
169
- pointerEvents: "none"
173
+ pointerEvents: "none",
174
+ overflow: "hidden",
175
+ alignItems: "center",
176
+ justifyContent: "center"
170
177
  });
171
178
  const opposites = {
172
179
  top: "bottom",
@@ -186,10 +193,14 @@ const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function Poppe
186
193
  const refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef);
187
194
  const primaryPlacement = placement ? placement.split("-")[0] : "top";
188
195
  const arrowStyle = { x, y, width: size, height: size };
196
+ const innerArrowStyle = {};
197
+ const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
189
198
  if (primaryPlacement) {
199
+ arrowStyle[isVertical ? "width" : "height"] = size * 2;
190
200
  const oppSide = opposites[primaryPlacement];
191
201
  if (oppSide) {
192
- arrowStyle[oppSide] = -size / 2;
202
+ arrowStyle[oppSide] = -size;
203
+ innerArrowStyle[oppSide] = size / 2;
193
204
  }
194
205
  if (oppSide === "top" || oppSide === "bottom") {
195
206
  arrowStyle.left = 0;
@@ -202,28 +213,32 @@ const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function Poppe
202
213
  var _a;
203
214
  (_a = context.onArrowSize) == null ? void 0 : _a.call(context, size);
204
215
  }, [size, context.onArrowSize]);
205
- return /* @__PURE__ */ React.createElement(PopperArrowFrame, {
206
- ...arrowProps,
216
+ return /* @__PURE__ */ React.createElement(PopperArrowOuterFrame, {
207
217
  ref: refs,
208
- ...arrowStyle,
218
+ ...arrowStyle
219
+ }, /* @__PURE__ */ React.createElement(PopperArrowFrame, {
220
+ width: size,
221
+ height: size,
222
+ ...arrowProps,
223
+ ...innerArrowStyle,
209
224
  rotate: "45deg",
210
- ...primaryPlacement === "top" && {
225
+ ...primaryPlacement === "bottom" && {
211
226
  borderBottomWidth: borderWidth,
212
227
  borderRightWidth: borderWidth
213
228
  },
214
- ...primaryPlacement === "bottom" && {
229
+ ...primaryPlacement === "top" && {
215
230
  borderTopWidth: borderWidth,
216
231
  borderLeftWidth: borderWidth
217
232
  },
218
- ...primaryPlacement === "left" && {
233
+ ...primaryPlacement === "right" && {
219
234
  borderTopWidth: borderWidth,
220
235
  borderRightWidth: borderWidth
221
236
  },
222
- ...primaryPlacement === "right" && {
237
+ ...primaryPlacement === "left" && {
223
238
  borderBottomWidth: borderWidth,
224
239
  borderLeftWidth: borderWidth
225
240
  }
226
- });
241
+ }));
227
242
  }));
228
243
  PopperArrow.displayName = ARROW_NAME;
229
244
  // Annotate the CommonJS export names for ESM import in node:
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 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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",
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 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
6
  "names": []
7
7
  }
package/dist/esm/Popper.js CHANGED
@@ -116,8 +116,8 @@ const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, fo
116
116
  key: "popper-content-frame",
117
117
  "data-placement": placement,
118
118
  "data-strategy": strategy,
119
- ...contentProps,
120
- size: contentProps.size || size
119
+ size: contentProps.size || size,
120
+ ...contentProps
121
121
  });
122
122
  }, [placement, strategy, props]);
123
123
  if (!isMounted) {
@@ -139,9 +139,16 @@ const PopperArrowFrame = styled(YStack, {
139
139
  name: "PopperArrow",
140
140
  borderColor: "$borderColor",
141
141
  backgroundColor: "$background",
142
+ position: "relative"
143
+ });
144
+ const PopperArrowOuterFrame = styled(YStack, {
145
+ name: "PopperArrowOuter",
142
146
  position: "absolute",
143
147
  zIndex: -1,
144
- pointerEvents: "none"
148
+ pointerEvents: "none",
149
+ overflow: "hidden",
150
+ alignItems: "center",
151
+ justifyContent: "center"
145
152
  });
146
153
  const opposites = {
147
154
  top: "bottom",
@@ -161,10 +168,14 @@ const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function Poppe
161
168
  const refs = useComposedRefs(context.arrowRef, forwardedRef);
162
169
  const primaryPlacement = placement ? placement.split("-")[0] : "top";
163
170
  const arrowStyle = { x, y, width: size, height: size };
171
+ const innerArrowStyle = {};
172
+ const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
164
173
  if (primaryPlacement) {
174
+ arrowStyle[isVertical ? "width" : "height"] = size * 2;
165
175
  const oppSide = opposites[primaryPlacement];
166
176
  if (oppSide) {
167
- arrowStyle[oppSide] = -size / 2;
177
+ arrowStyle[oppSide] = -size;
178
+ innerArrowStyle[oppSide] = size / 2;
168
179
  }
169
180
  if (oppSide === "top" || oppSide === "bottom") {
170
181
  arrowStyle.left = 0;
@@ -177,28 +188,32 @@ const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function Poppe
177
188
  var _a;
178
189
  (_a = context.onArrowSize) == null ? void 0 : _a.call(context, size);
179
190
  }, [size, context.onArrowSize]);
180
- return /* @__PURE__ */ React.createElement(PopperArrowFrame, {
181
- ...arrowProps,
191
+ return /* @__PURE__ */ React.createElement(PopperArrowOuterFrame, {
182
192
  ref: refs,
183
- ...arrowStyle,
193
+ ...arrowStyle
194
+ }, /* @__PURE__ */ React.createElement(PopperArrowFrame, {
195
+ width: size,
196
+ height: size,
197
+ ...arrowProps,
198
+ ...innerArrowStyle,
184
199
  rotate: "45deg",
185
- ...primaryPlacement === "top" && {
200
+ ...primaryPlacement === "bottom" && {
186
201
  borderBottomWidth: borderWidth,
187
202
  borderRightWidth: borderWidth
188
203
  },
189
- ...primaryPlacement === "bottom" && {
204
+ ...primaryPlacement === "top" && {
190
205
  borderTopWidth: borderWidth,
191
206
  borderLeftWidth: borderWidth
192
207
  },
193
- ...primaryPlacement === "left" && {
208
+ ...primaryPlacement === "right" && {
194
209
  borderTopWidth: borderWidth,
195
210
  borderRightWidth: borderWidth
196
211
  },
197
- ...primaryPlacement === "right" && {
212
+ ...primaryPlacement === "left" && {
198
213
  borderBottomWidth: borderWidth,
199
214
  borderLeftWidth: borderWidth
200
215
  }
201
- });
216
+ }));
202
217
  }));
203
218
  PopperArrow.displayName = ARROW_NAME;
204
219
  export {
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 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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",
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 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
6
  "names": []
7
7
  }
package/dist/jsx/Popper.js CHANGED
@@ -101,7 +101,7 @@ const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, fo
101
101
  const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
102
102
  const contentRefs = useComposedRefs(floating, forwardedRef);
103
103
  const contents = React.useMemo(() => {
104
- return <PopperContentFrame key="popper-content-frame" data-placement={placement} data-strategy={strategy} {...contentProps} size={contentProps.size || size} />;
104
+ return <PopperContentFrame key="popper-content-frame" data-placement={placement} data-strategy={strategy} size={contentProps.size || size} {...contentProps} />;
105
105
  }, [placement, strategy, props]);
106
106
  if (!isMounted) {
107
107
  return null;
@@ -120,9 +120,16 @@ const PopperArrowFrame = styled(YStack, {
120
120
  name: "PopperArrow",
121
121
  borderColor: "$borderColor",
122
122
  backgroundColor: "$background",
123
+ position: "relative"
124
+ });
125
+ const PopperArrowOuterFrame = styled(YStack, {
126
+ name: "PopperArrowOuter",
123
127
  position: "absolute",
124
128
  zIndex: -1,
125
- pointerEvents: "none"
129
+ pointerEvents: "none",
130
+ overflow: "hidden",
131
+ alignItems: "center",
132
+ justifyContent: "center"
126
133
  });
127
134
  const opposites = {
128
135
  top: "bottom",
@@ -142,10 +149,14 @@ const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function Poppe
142
149
  const refs = useComposedRefs(context.arrowRef, forwardedRef);
143
150
  const primaryPlacement = placement ? placement.split("-")[0] : "top";
144
151
  const arrowStyle = { x, y, width: size, height: size };
152
+ const innerArrowStyle = {};
153
+ const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
145
154
  if (primaryPlacement) {
155
+ arrowStyle[isVertical ? "width" : "height"] = size * 2;
146
156
  const oppSide = opposites[primaryPlacement];
147
157
  if (oppSide) {
148
- arrowStyle[oppSide] = -size / 2;
158
+ arrowStyle[oppSide] = -size;
159
+ innerArrowStyle[oppSide] = size / 2;
149
160
  }
150
161
  if (oppSide === "top" || oppSide === "bottom") {
151
162
  arrowStyle.left = 0;
@@ -158,19 +169,19 @@ const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function Poppe
158
169
  var _a;
159
170
  (_a = context.onArrowSize) == null ? void 0 : _a.call(context, size);
160
171
  }, [size, context.onArrowSize]);
161
- return <PopperArrowFrame {...arrowProps} ref={refs} {...arrowStyle} rotate="45deg" {...primaryPlacement === "top" && {
172
+ return <PopperArrowOuterFrame ref={refs} {...arrowStyle}><PopperArrowFrame width={size} height={size} {...arrowProps} {...innerArrowStyle} rotate="45deg" {...primaryPlacement === "bottom" && {
162
173
  borderBottomWidth: borderWidth,
163
174
  borderRightWidth: borderWidth
164
- }} {...primaryPlacement === "bottom" && {
175
+ }} {...primaryPlacement === "top" && {
165
176
  borderTopWidth: borderWidth,
166
177
  borderLeftWidth: borderWidth
167
- }} {...primaryPlacement === "left" && {
178
+ }} {...primaryPlacement === "right" && {
168
179
  borderTopWidth: borderWidth,
169
180
  borderRightWidth: borderWidth
170
- }} {...primaryPlacement === "right" && {
181
+ }} {...primaryPlacement === "left" && {
171
182
  borderBottomWidth: borderWidth,
172
183
  borderLeftWidth: borderWidth
173
- }} />;
184
+ }} /></PopperArrowOuterFrame>;
174
185
  }));
175
186
  PopperArrow.displayName = ARROW_NAME;
176
187
  export {
package/dist/jsx/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 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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",
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 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
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/popper",
3
- "version": "1.0.1-beta.121",
3
+ "version": "1.0.1-beta.124",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -23,11 +23,11 @@
23
23
  "dependencies": {
24
24
  "@floating-ui/react-dom": "^1.0.0",
25
25
  "@floating-ui/react-native": "^0.8.0",
26
- "@tamagui/compose-refs": "^1.0.1-beta.121",
27
- "@tamagui/core": "^1.0.1-beta.121",
28
- "@tamagui/create-context": "^1.0.1-beta.121",
29
- "@tamagui/stacks": "^1.0.1-beta.121",
30
- "@tamagui/use-controllable-state": "^1.0.1-beta.121"
26
+ "@tamagui/compose-refs": "^1.0.1-beta.124",
27
+ "@tamagui/core": "^1.0.1-beta.124",
28
+ "@tamagui/create-context": "^1.0.1-beta.124",
29
+ "@tamagui/stacks": "^1.0.1-beta.124",
30
+ "@tamagui/use-controllable-state": "^1.0.1-beta.124"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "react": "*",
@@ -35,7 +35,7 @@
35
35
  "react-native": "*"
36
36
  },
37
37
  "devDependencies": {
38
- "@tamagui/build": "^1.0.1-beta.121",
38
+ "@tamagui/build": "^1.0.1-beta.124",
39
39
  "@types/react-native": "^0.69.2",
40
40
  "react": "*",
41
41
  "react-dom": "*",
package/src/Popper.tsx CHANGED
@@ -201,9 +201,8 @@ export const PopperContent = PopperContentFrame.extractable(
201
201
  key="popper-content-frame"
202
202
  data-placement={placement}
203
203
  data-strategy={strategy}
204
- {...contentProps}
205
- // @ts-ignore
206
204
  size={contentProps.size || size}
205
+ {...contentProps}
207
206
  />
208
207
  )
209
208
  }, [placement, strategy, props])
@@ -249,9 +248,17 @@ const PopperArrowFrame = styled(YStack, {
249
248
  name: 'PopperArrow',
250
249
  borderColor: '$borderColor',
251
250
  backgroundColor: '$background',
251
+ position: 'relative',
252
+ })
253
+
254
+ const PopperArrowOuterFrame = styled(YStack, {
255
+ name: 'PopperArrowOuter',
252
256
  position: 'absolute',
253
257
  zIndex: -1,
254
258
  pointerEvents: 'none',
259
+ overflow: 'hidden',
260
+ alignItems: 'center',
261
+ justifyContent: 'center',
255
262
  })
256
263
 
257
264
  const opposites = {
@@ -259,7 +266,9 @@ const opposites = {
259
266
  right: 'left',
260
267
  bottom: 'top',
261
268
  left: 'right',
262
- }
269
+ } as const
270
+
271
+ type Sides = keyof typeof opposites
263
272
 
264
273
  export const PopperArrow = PopperArrowFrame.extractable(
265
274
  React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(
@@ -276,13 +285,19 @@ export const PopperArrow = PopperArrowFrame.extractable(
276
285
  const { x, y } = context.arrowStyle || { x: 0, y: 0 }
277
286
  const refs = useComposedRefs(context.arrowRef, forwardedRef)
278
287
 
279
- const primaryPlacement = placement ? placement.split('-')[0] : 'top'
288
+ const primaryPlacement = (placement ? placement.split('-')[0] : 'top') as Sides
280
289
 
281
290
  const arrowStyle: StackProps = { x, y, width: size, height: size }
291
+ const innerArrowStyle: StackProps = {}
292
+ const isVertical = primaryPlacement === 'bottom' || primaryPlacement === 'top'
293
+
282
294
  if (primaryPlacement) {
295
+ // allows for extra diagonal size
296
+ arrowStyle[isVertical ? 'width' : 'height'] = size * 2
283
297
  const oppSide = opposites[primaryPlacement]
284
298
  if (oppSide) {
285
- arrowStyle[oppSide] = -size / 2
299
+ arrowStyle[oppSide] = -size
300
+ innerArrowStyle[oppSide] = size / 2
286
301
  }
287
302
  if (oppSide === 'top' || oppSide === 'bottom') {
288
303
  arrowStyle.left = 0
@@ -297,29 +312,33 @@ export const PopperArrow = PopperArrowFrame.extractable(
297
312
  context.onArrowSize?.(size)
298
313
  }, [size, context.onArrowSize])
299
314
 
315
+ // outer frame to cut off for ability to have nicer shadows/borders
300
316
  return (
301
- <PopperArrowFrame
302
- {...arrowProps}
303
- ref={refs}
304
- {...arrowStyle}
305
- rotate="45deg"
306
- {...(primaryPlacement === 'top' && {
307
- borderBottomWidth: borderWidth,
308
- borderRightWidth: borderWidth,
309
- })}
310
- {...(primaryPlacement === 'bottom' && {
311
- borderTopWidth: borderWidth,
312
- borderLeftWidth: borderWidth,
313
- })}
314
- {...(primaryPlacement === 'left' && {
315
- borderTopWidth: borderWidth,
316
- borderRightWidth: borderWidth,
317
- })}
318
- {...(primaryPlacement === 'right' && {
319
- borderBottomWidth: borderWidth,
320
- borderLeftWidth: borderWidth,
321
- })}
322
- />
317
+ <PopperArrowOuterFrame ref={refs} {...arrowStyle}>
318
+ <PopperArrowFrame
319
+ width={size}
320
+ height={size}
321
+ {...arrowProps}
322
+ {...innerArrowStyle}
323
+ rotate="45deg"
324
+ {...(primaryPlacement === 'bottom' && {
325
+ borderBottomWidth: borderWidth,
326
+ borderRightWidth: borderWidth,
327
+ })}
328
+ {...(primaryPlacement === 'top' && {
329
+ borderTopWidth: borderWidth,
330
+ borderLeftWidth: borderWidth,
331
+ })}
332
+ {...(primaryPlacement === 'right' && {
333
+ borderTopWidth: borderWidth,
334
+ borderRightWidth: borderWidth,
335
+ })}
336
+ {...(primaryPlacement === 'left' && {
337
+ borderBottomWidth: borderWidth,
338
+ borderLeftWidth: borderWidth,
339
+ })}
340
+ />
341
+ </PopperArrowOuterFrame>
323
342
  )
324
343
  })
325
344
  )
package/types/Popper.d.ts CHANGED
@@ -33,13 +33,13 @@ declare type PopperAnchorRef = HTMLElement | View;
33
33
  export declare type PopperAnchorProps = YStackProps & {
34
34
  virtualRef?: React.RefObject<any>;
35
35
  };
36
- export declare const PopperAnchor: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
36
+ export declare const PopperAnchor: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
37
37
  readonly fullscreen?: boolean | undefined;
38
38
  readonly elevation?: SizeTokens | undefined;
39
- } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
39
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
40
40
  readonly fullscreen?: boolean | undefined;
41
41
  readonly elevation?: SizeTokens | undefined;
42
- }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
42
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
43
43
  readonly fullscreen?: boolean | undefined;
44
44
  readonly elevation?: SizeTokens | undefined;
45
45
  }>> & {
@@ -47,7 +47,7 @@ export declare const PopperAnchor: React.ForwardRefExoticComponent<Omit<import("
47
47
  } & React.RefAttributes<PopperAnchorRef>>;
48
48
  declare type PopperContentElement = HTMLElement | View;
49
49
  export declare type PopperContentProps = SizableStackProps;
50
- export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
50
+ export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
51
51
  readonly fullscreen?: boolean | undefined;
52
52
  readonly elevation?: SizeTokens | undefined;
53
53
  }, "size" | "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
@@ -59,7 +59,7 @@ export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import(
59
59
  elevate?: boolean | undefined;
60
60
  bordered?: number | boolean | undefined;
61
61
  size?: SizeTokens | undefined;
62
- } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
62
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
63
63
  readonly fullscreen?: boolean | undefined;
64
64
  readonly elevation?: SizeTokens | undefined;
65
65
  }, "size" | "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
@@ -71,7 +71,7 @@ export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import(
71
71
  elevate?: boolean | undefined;
72
72
  bordered?: number | boolean | undefined;
73
73
  size?: SizeTokens | undefined;
74
- }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
74
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
75
75
  readonly fullscreen?: boolean | undefined;
76
76
  readonly elevation?: SizeTokens | undefined;
77
77
  }, "size" | "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
@@ -89,13 +89,13 @@ export declare type PopperArrowProps = YStackProps & {
89
89
  offset?: number;
90
90
  size?: SizeTokens;
91
91
  };
92
- export declare const PopperArrow: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
92
+ export declare const PopperArrow: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
93
93
  readonly fullscreen?: boolean | undefined;
94
94
  readonly elevation?: SizeTokens | undefined;
95
- } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
95
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
96
96
  readonly fullscreen?: boolean | undefined;
97
97
  readonly elevation?: SizeTokens | undefined;
98
- }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
98
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
99
99
  readonly fullscreen?: boolean | undefined;
100
100
  readonly elevation?: SizeTokens | undefined;
101
101
  }>> & {
package/types/Popper.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../src/Popper.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,EAOX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,KAAK,EAAsB,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,iBAAiB,EAA0B,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAqB,IAAI,EAAU,KAAK,EAAE,MAAM,YAAY,CAAA;AAChG,OAAO,EAAE,iBAAiB,EAAe,MAAM,eAAe,CAAA;AAE9D,aAAK,UAAU,GAAG,OAAO,KAAK,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACnF,aAAK,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AAWjF,eAAO,MAAM,iBAAiB,+CAAc,CAAA;AAE5C,aAAK,kBAAkB,GAAG,iBAAiB,GAAG;IAC5C,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,GAAG,CAAA;IACd,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,QAAQ,EAAE,GAAG,CAAA;IACb,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG;QAC7B,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;CACF,CAAA;AACD,QAAA,MAAuB,gBAAgB,4FAAwD,CAAA;AAE/F,oBAAY,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,UAAU,CAAA;IACxB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkExC,CAAA;AAUD,aAAK,eAAe,GAAG,WAAW,GAAG,IAAI,CAAA;AAEzC,oBAAY,iBAAiB,GAAG,WAAW,GAAG;IAC5C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;yCAexB,CAAA;AAUD,aAAK,oBAAoB,GAAG,WAAW,GAAG,IAAI,CAAA;AAE9C,oBAAY,kBAAkB,GAAG,iBAAiB,CAAA;AAwBlD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAyCzB,CAAA;AAUD,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAE5C,oBAAY,gBAAgB,GAAG,WAAW,GAAG;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAkBD,eAAO,MAAM,WAAW;;;;;;;;;;;;4CA6DvB,CAAA;AAMD,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
package/types/floating.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"floating.d.ts","sourceRoot":"","sources":["../src/floating.tsx"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}
package/types/floating.native.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"floating.native.d.ts","sourceRoot":"","sources":["../src/floating.native.tsx"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA"}
package/types/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAC3E,cAAc,UAAU,CAAA"}
package/types/useFloating.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"useFloating.d.ts","sourceRoot":"","sources":["../src/useFloating.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAA;AAEtC,oBAAY,aAAa,GAAG,OAAO,QAAQ,CAAC,WAAW,CAAA;AAEvD,aAAK,gBAAgB,GAAG,aAAa,SAAS,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK,CAAA;AAEzF,oBAAY,iBAAiB,GAAG,QAAQ,CAAC,iBAAiB,GAAG;IAC3D,OAAO,CAAC,EAAE,GAAG,CAAA;IACb,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,GAAG,CAAA;IACnE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,GAAG,CAAA;CACrE,CAAA;AAED,eAAO,MAAM,uBAAuB,6DAA4C,CAAA;AAEhF,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,iBAGrD,CAAA"}