@tamagui/popper 1.0.1-beta.73 → 1.0.1-beta.76
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 +3 -2
- package/dist/cjs/Popper.js.map +2 -2
- package/dist/esm/Popper.js +73 -50
- package/dist/esm/Popper.js.map +2 -2
- package/dist/jsx/Popper.js +7 -4
- package/package.json +7 -7
- package/src/Popper.tsx +11 -3
- package/types/Popper.d.ts.map +1 -1
package/dist/cjs/Popper.js
CHANGED
|
@@ -127,10 +127,11 @@ const PopperAnchor = React.forwardRef((props, forwardedRef) => {
|
|
|
127
127
|
});
|
|
128
128
|
PopperAnchor.displayName = ANCHOR_NAME;
|
|
129
129
|
const CONTENT_NAME = "PopperContent";
|
|
130
|
-
const PopperContentFrame = (0, import_core.styled)(import_stacks.
|
|
130
|
+
const PopperContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
131
131
|
name: "PopperContent",
|
|
132
132
|
backgroundColor: "$background",
|
|
133
133
|
alignItems: "center",
|
|
134
|
+
radiused: true,
|
|
134
135
|
defaultVariants: {
|
|
135
136
|
size: "$4"
|
|
136
137
|
}
|
|
@@ -145,7 +146,7 @@ const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, fo
|
|
|
145
146
|
"data-placement": placement,
|
|
146
147
|
"data-strategy": strategy
|
|
147
148
|
}, contentProps), {
|
|
148
|
-
size: contentProps.size
|
|
149
|
+
size: contentProps.size || size
|
|
149
150
|
}));
|
|
150
151
|
}, [placement, strategy, props]);
|
|
151
152
|
if (!isMounted) {
|
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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAAgC;AAChC,kBAQO;AACP,4BAA0C;AAC1C,
|
|
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 {\n SizableStack,\n SizableStackProps,\n ThemeableStack,\n YStack,\n YStackProps,\n} 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(ThemeableStack, {\n name: 'PopperContent',\n backgroundColor: '$background',\n alignItems: 'center',\n radiused: true,\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 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)\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: 0,\n pointerEvents: 'none',\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 = 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, 0))\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 {...(primaryPlacement === 'top' && {\n borderBottomWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'bottom' && {\n borderTopWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n {...(primaryPlacement === 'left' && {\n borderTopWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'right' && {\n borderBottomWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n />\n )\n })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAAgC;AAChC,kBAQO;AACP,4BAA0C;AAC1C,oBAMO;AACP,YAAuB;AAGvB,sBAA0E;AAC1E,yBAA+C;AAS/C,MAAM,cAAc;AAGpB,MAAM,CAAC,qBAAqB,eAAe,8CAAmB,WAAW;AAElE,MAAM,oBAAoB;AAajC,MAAM,CAAC,gBAAgB,oBAAoB,oBAAwC,WAAW;AAUvF,MAAM,SAAgC,CAAC,UAAoC;AAChF,QAAM,EAAE,eAAe,UAAU,MAAM,YAAY,UAAU,aAAa,cAAc;AAExF,QAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,KAAK;AACtD,6CAA0B,MAAM;AAC9B,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,MAAM,OAAY;AACpC,QAAM,CAAC,SAAS,YAAY,MAAM,SAAiC,IAAI;AACvE,QAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,CAAC;AAClD,QAAM,WAAW,MAAM,OAAO;AAE9B,QAAM,WAAW,oCAAY;AAAA,IAC3B;AAAA,IACA,YAAY;AAAA,MACV,cAAc,2BAAM,WAAW,IAAK;AAAA,MACpC,YAAY,0BAAK,SAAS,IAAK;AAAA,MAC/B,UAAU,2BAAM,EAAE,SAAS,QAAQ,CAAC,IAAK;AAAA,MACzC,YAAY,4BAAO,SAAS,IAAK;AAAA,IACnC,EAAE,OAAO,OAAO;AAAA,EAClB,CAAC;AAED,QAAM,EAAE,MAAM,mBAAmB;AAEjC,QAAM,oBAAoB,yCAAqB,UAAU,QAAQ;AAEjE,6CAA0B,MAAM;AAC9B,aAAS,UAAU,UAAU,OAAO;AAAA,EACtC,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAK,UAAU,WAAW,CAAC,KAAK,SAAS,SAAS;AACrD;AAAA,IACF;AAEA,WAAO,gCAAW,KAAK,UAAU,SAAS,KAAK,SAAS,SAAS,SAAS,MAAM;AAAA,EAClF,GAAG,CAAC,KAAK,SAAS,SAAS,KAAK,UAAU,OAAO,CAAC;AAElD,QAAM,aAAa,MAAM,QAAQ,MAAM;AACrC,WAAO,eAAe;AAAA,EACxB,GAAG,CAAC,KAAK,UAAU,eAAe,SAAS,CAAC,CAAC,CAAC,CAAC;AAE/C,SACE,oCAAC;AAAA,IACC,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,aAAa;AAAA,IACb;AAAA,KACI,WAEH,QACH;AAEJ;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,yCAAgB,cAAc,KAAK,SAAS;AACjE,MAAI,YAAY;AACd,WAAO;AAAA,EACT;AACA,QAAM,aAAa;AAAA,IACjB,KAAK;AAAA,KACF;AAEL,SAAO,oCAAC,yCAAY,oBAAoB,kBAAkB,UAAU,IAAI,WAAa;AACvF,CACF;AAEA,aAAa,cAAc;AAM3B,MAAM,eAAe;AAMrB,MAAM,qBAAqB,wBAAO,8BAAgB;AAAA,EAChD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,UAAU;AAAA,EAEV,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,yCAAqB,UAAU,YAAY;AAE/D,QAAM,WAAW,MAAM,QAAQ,MAAM;AACnC,WACE,oCAAC;AAAA,MACC,KAAI;AAAA,MACJ,kBAAgB;AAAA,MAChB,iBAAe;AAAA,OACX,eAJL;AAAA,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,GAAI,KAAa;AAAA,IACjB,GAAI,KAAa;AAAA,IACjB,UAAU;AAAA,EACZ;AAGA,SACE,oCAAC,yCAAY,mBAAmB,iBAAiB,UAAU,IAAI,aAC5D,QACH;AAEJ,CACF,CACF;AAEA,cAAc,cAAc;AAM5B,MAAM,aAAa;AASnB,MAAM,mBAAmB,wBAAO,sBAAQ;AAAA,EACtC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAGjB,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,2BAAU;AACzB,QAAM,UAAU,YAAY,QAAQ;AACpC,QAAM,kBAAkB,kCAAiB,mCAAkB,OAAO,OAAO,SAAS,CAAC,CAAC;AACpF,QAAM,OAAO,CAAC;AACd,QAAM,EAAE,cAAc;AACtB,QAAM,EAAE,GAAG,MAAM,QAAQ,cAAc,EAAE,GAAG,GAAG,GAAG,EAAE;AACpD,QAAM,OAAO,yCAAgB,QAAQ,UAAU,YAAY;AAE3D,QAAM,mBAAmB,YAAY,UAAU,MAAM,GAAG,EAAE,KAAK;AAE/D,MAAI,aAAyB,EAAE,GAAG,GAAG,OAAO,MAAM,QAAQ,KAAK;AAC/D,MAAI,kBAAkB;AACpB,UAAM,UAAU,UAAU;AAC1B,QAAI,SAAS;AACX,iBAAW,WAAW,CAAC,OAAO;AAAA,IAChC;AACA,QAAI,YAAY,SAAS,YAAY,UAAU;AAC7C,iBAAW,OAAO;AAAA,IACpB;AACA,QAAI,YAAY,UAAU,YAAY,SAAS;AAC7C,iBAAW,MAAM;AAAA,IACnB;AAAA,EACF;AAGA,6CAA0B,MAAM;AA1RpC;AA2RM,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
|
}
|
package/dist/esm/Popper.js
CHANGED
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
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
|
+
};
|
|
1
32
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
2
33
|
import {
|
|
3
34
|
getTokens,
|
|
@@ -7,7 +38,10 @@ import {
|
|
|
7
38
|
useIsomorphicLayoutEffect
|
|
8
39
|
} from "@tamagui/core";
|
|
9
40
|
import { createContextScope } from "@tamagui/create-context";
|
|
10
|
-
import {
|
|
41
|
+
import {
|
|
42
|
+
ThemeableStack,
|
|
43
|
+
YStack
|
|
44
|
+
} from "@tamagui/stacks";
|
|
11
45
|
import * as React from "react";
|
|
12
46
|
import { arrow, autoUpdate, flip, offset, shift } from "./floating";
|
|
13
47
|
import { useFloating } from "./useFloating";
|
|
@@ -48,58 +82,54 @@ const Popper = (props) => {
|
|
|
48
82
|
const arrowStyle = React.useMemo(() => {
|
|
49
83
|
return middlewareData.arrow;
|
|
50
84
|
}, [JSON.stringify(middlewareData.arrow || {})]);
|
|
51
|
-
return /* @__PURE__ */ React.createElement(PopperProvider, {
|
|
85
|
+
return /* @__PURE__ */ React.createElement(PopperProvider, __spreadValues({
|
|
52
86
|
scope: __scopePopper,
|
|
53
87
|
anchorRef,
|
|
54
88
|
size,
|
|
55
89
|
arrowRef: composedArrowRefs,
|
|
56
90
|
arrowStyle,
|
|
57
91
|
onArrowSize: setArrowSize,
|
|
58
|
-
isMounted
|
|
59
|
-
|
|
60
|
-
}, children);
|
|
92
|
+
isMounted
|
|
93
|
+
}, floating), children);
|
|
61
94
|
};
|
|
62
95
|
Popper.displayName = POPPER_NAME;
|
|
63
96
|
const ANCHOR_NAME = "PopperAnchor";
|
|
64
97
|
const PopperAnchor = React.forwardRef((props, forwardedRef) => {
|
|
65
|
-
const { __scopePopper, virtualRef,
|
|
98
|
+
const _a = props, { __scopePopper, virtualRef } = _a, anchorProps = __objRest(_a, ["__scopePopper", "virtualRef"]);
|
|
66
99
|
const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
67
100
|
const ref = React.useRef(null);
|
|
68
101
|
const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
|
|
69
102
|
if (virtualRef) {
|
|
70
103
|
return null;
|
|
71
104
|
}
|
|
72
|
-
const stackProps = {
|
|
73
|
-
ref: composedRefs
|
|
74
|
-
|
|
75
|
-
};
|
|
76
|
-
return /* @__PURE__ */ React.createElement(YStack, {
|
|
77
|
-
...getReferenceProps ? getReferenceProps(stackProps) : stackProps
|
|
78
|
-
});
|
|
105
|
+
const stackProps = __spreadValues({
|
|
106
|
+
ref: composedRefs
|
|
107
|
+
}, anchorProps);
|
|
108
|
+
return /* @__PURE__ */ React.createElement(YStack, __spreadValues({}, getReferenceProps ? getReferenceProps(stackProps) : stackProps));
|
|
79
109
|
});
|
|
80
110
|
PopperAnchor.displayName = ANCHOR_NAME;
|
|
81
111
|
const CONTENT_NAME = "PopperContent";
|
|
82
|
-
const PopperContentFrame = styled(
|
|
112
|
+
const PopperContentFrame = styled(ThemeableStack, {
|
|
83
113
|
name: "PopperContent",
|
|
84
114
|
backgroundColor: "$background",
|
|
85
115
|
alignItems: "center",
|
|
116
|
+
radiused: true,
|
|
86
117
|
defaultVariants: {
|
|
87
118
|
size: "$4"
|
|
88
119
|
}
|
|
89
120
|
});
|
|
90
121
|
const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
91
|
-
const { __scopePopper,
|
|
122
|
+
const _a = props, { __scopePopper } = _a, contentProps = __objRest(_a, ["__scopePopper"]);
|
|
92
123
|
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
93
124
|
const contentRefs = useComposedRefs(floating, forwardedRef);
|
|
94
125
|
const contents = React.useMemo(() => {
|
|
95
|
-
|
|
96
|
-
return /* @__PURE__ */ React.createElement(PopperContentFrame, {
|
|
126
|
+
return /* @__PURE__ */ React.createElement(PopperContentFrame, __spreadProps(__spreadValues({
|
|
97
127
|
key: "popper-content-frame",
|
|
98
128
|
"data-placement": placement,
|
|
99
|
-
"data-strategy": strategy
|
|
100
|
-
|
|
101
|
-
size:
|
|
102
|
-
});
|
|
129
|
+
"data-strategy": strategy
|
|
130
|
+
}, contentProps), {
|
|
131
|
+
size: contentProps.size || size
|
|
132
|
+
}));
|
|
103
133
|
}, [placement, strategy, props]);
|
|
104
134
|
if (!isMounted) {
|
|
105
135
|
return null;
|
|
@@ -110,9 +140,7 @@ const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, fo
|
|
|
110
140
|
y: y || 0,
|
|
111
141
|
position: "absolute"
|
|
112
142
|
};
|
|
113
|
-
return /* @__PURE__ */ React.createElement(YStack, {
|
|
114
|
-
...getFloatingProps ? getFloatingProps(frameProps) : frameProps
|
|
115
|
-
}, contents);
|
|
143
|
+
return /* @__PURE__ */ React.createElement(YStack, __spreadValues({}, getFloatingProps ? getFloatingProps(frameProps) : frameProps), contents);
|
|
116
144
|
}));
|
|
117
145
|
PopperContent.displayName = CONTENT_NAME;
|
|
118
146
|
const ARROW_NAME = "PopperArrow";
|
|
@@ -131,10 +159,10 @@ const opposites = {
|
|
|
131
159
|
left: "right"
|
|
132
160
|
};
|
|
133
161
|
const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
134
|
-
const { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0,
|
|
162
|
+
const _a = props, { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0 } = _a, arrowProps = __objRest(_a, ["__scopePopper", "offset", "size", "borderWidth"]);
|
|
135
163
|
const context = usePopperContext(ARROW_NAME, __scopePopper);
|
|
136
164
|
const tokens = getTokens();
|
|
137
|
-
const sizeVal = sizeProp
|
|
165
|
+
const sizeVal = sizeProp ?? context.size;
|
|
138
166
|
const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, 0));
|
|
139
167
|
const size = +sizeValResolved;
|
|
140
168
|
const { placement } = context;
|
|
@@ -155,31 +183,26 @@ const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function Poppe
|
|
|
155
183
|
}
|
|
156
184
|
}
|
|
157
185
|
useIsomorphicLayoutEffect(() => {
|
|
158
|
-
var
|
|
159
|
-
(
|
|
186
|
+
var _a2;
|
|
187
|
+
(_a2 = context.onArrowSize) == null ? void 0 : _a2.call(context, size);
|
|
160
188
|
}, [size, context.onArrowSize]);
|
|
161
|
-
return /* @__PURE__ */ React.createElement(PopperArrowFrame, {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
...primaryPlacement === "right" && {
|
|
179
|
-
borderBottomWidth: borderWidth,
|
|
180
|
-
borderLeftWidth: borderWidth
|
|
181
|
-
}
|
|
182
|
-
});
|
|
189
|
+
return /* @__PURE__ */ React.createElement(PopperArrowFrame, __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, arrowProps), {
|
|
190
|
+
ref: refs
|
|
191
|
+
}), arrowStyle), {
|
|
192
|
+
rotate: "45deg"
|
|
193
|
+
}), primaryPlacement === "top" && {
|
|
194
|
+
borderBottomWidth: borderWidth,
|
|
195
|
+
borderRightWidth: borderWidth
|
|
196
|
+
}), primaryPlacement === "bottom" && {
|
|
197
|
+
borderTopWidth: borderWidth,
|
|
198
|
+
borderLeftWidth: borderWidth
|
|
199
|
+
}), primaryPlacement === "left" && {
|
|
200
|
+
borderTopWidth: borderWidth,
|
|
201
|
+
borderRightWidth: borderWidth
|
|
202
|
+
}), primaryPlacement === "right" && {
|
|
203
|
+
borderBottomWidth: borderWidth,
|
|
204
|
+
borderLeftWidth: borderWidth
|
|
205
|
+
}));
|
|
183
206
|
}));
|
|
184
207
|
PopperArrow.displayName = ARROW_NAME;
|
|
185
208
|
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 {
|
|
5
|
-
"mappings": "AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;
|
|
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 {\n SizableStack,\n SizableStackProps,\n ThemeableStack,\n YStack,\n YStackProps,\n} 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(ThemeableStack, {\n name: 'PopperContent',\n backgroundColor: '$background',\n alignItems: 'center',\n radiused: true,\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 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)\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: 0,\n pointerEvents: 'none',\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 = 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, 0))\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 {...(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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Popper.js
CHANGED
|
@@ -7,7 +7,10 @@ import {
|
|
|
7
7
|
useIsomorphicLayoutEffect
|
|
8
8
|
} from "@tamagui/core";
|
|
9
9
|
import { createContextScope } from "@tamagui/create-context";
|
|
10
|
-
import {
|
|
10
|
+
import {
|
|
11
|
+
ThemeableStack,
|
|
12
|
+
YStack
|
|
13
|
+
} from "@tamagui/stacks";
|
|
11
14
|
import * as React from "react";
|
|
12
15
|
import { arrow, autoUpdate, flip, offset, shift } from "./floating";
|
|
13
16
|
import { useFloating } from "./useFloating";
|
|
@@ -68,10 +71,11 @@ const PopperAnchor = React.forwardRef((props, forwardedRef) => {
|
|
|
68
71
|
});
|
|
69
72
|
PopperAnchor.displayName = ANCHOR_NAME;
|
|
70
73
|
const CONTENT_NAME = "PopperContent";
|
|
71
|
-
const PopperContentFrame = styled(
|
|
74
|
+
const PopperContentFrame = styled(ThemeableStack, {
|
|
72
75
|
name: "PopperContent",
|
|
73
76
|
backgroundColor: "$background",
|
|
74
77
|
alignItems: "center",
|
|
78
|
+
radiused: true,
|
|
75
79
|
defaultVariants: {
|
|
76
80
|
size: "$4"
|
|
77
81
|
}
|
|
@@ -81,8 +85,7 @@ const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, fo
|
|
|
81
85
|
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
82
86
|
const contentRefs = useComposedRefs(floating, forwardedRef);
|
|
83
87
|
const contents = React.useMemo(() => {
|
|
84
|
-
|
|
85
|
-
return <PopperContentFrame key="popper-content-frame" data-placement={placement} data-strategy={strategy} {...contentProps} size={(_a = contentProps.size) != null ? _a : size} />;
|
|
88
|
+
return <PopperContentFrame key="popper-content-frame" data-placement={placement} data-strategy={strategy} {...contentProps} size={contentProps.size || size} />;
|
|
86
89
|
}, [placement, strategy, props]);
|
|
87
90
|
if (!isMounted) {
|
|
88
91
|
return null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/popper",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.76",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -23,11 +23,11 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@floating-ui/react-dom": "0.7.0",
|
|
25
25
|
"@floating-ui/react-native": "^0.7.0",
|
|
26
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
26
|
+
"@tamagui/compose-refs": "^1.0.1-beta.76",
|
|
27
|
+
"@tamagui/core": "^1.0.1-beta.76",
|
|
28
|
+
"@tamagui/create-context": "^1.0.1-beta.76",
|
|
29
|
+
"@tamagui/stacks": "^1.0.1-beta.76",
|
|
30
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.76"
|
|
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.
|
|
38
|
+
"@tamagui/build": "^1.0.1-beta.76",
|
|
39
39
|
"@types/react-native": "^0.67.3",
|
|
40
40
|
"react": "*",
|
|
41
41
|
"react-dom": "*",
|
package/src/Popper.tsx
CHANGED
|
@@ -11,7 +11,13 @@ import {
|
|
|
11
11
|
useIsomorphicLayoutEffect,
|
|
12
12
|
} from '@tamagui/core'
|
|
13
13
|
import { Scope, createContextScope } from '@tamagui/create-context'
|
|
14
|
-
import {
|
|
14
|
+
import {
|
|
15
|
+
SizableStack,
|
|
16
|
+
SizableStackProps,
|
|
17
|
+
ThemeableStack,
|
|
18
|
+
YStack,
|
|
19
|
+
YStackProps,
|
|
20
|
+
} from '@tamagui/stacks'
|
|
15
21
|
import * as React from 'react'
|
|
16
22
|
import { View } from 'react-native'
|
|
17
23
|
|
|
@@ -155,10 +161,11 @@ type PopperContentElement = HTMLElement | View
|
|
|
155
161
|
|
|
156
162
|
export type PopperContentProps = SizableStackProps
|
|
157
163
|
|
|
158
|
-
const PopperContentFrame = styled(
|
|
164
|
+
const PopperContentFrame = styled(ThemeableStack, {
|
|
159
165
|
name: 'PopperContent',
|
|
160
166
|
backgroundColor: '$background',
|
|
161
167
|
alignItems: 'center',
|
|
168
|
+
radiused: true,
|
|
162
169
|
|
|
163
170
|
defaultVariants: {
|
|
164
171
|
size: '$4',
|
|
@@ -180,7 +187,8 @@ export const PopperContent = PopperContentFrame.extractable(
|
|
|
180
187
|
data-placement={placement}
|
|
181
188
|
data-strategy={strategy}
|
|
182
189
|
{...contentProps}
|
|
183
|
-
|
|
190
|
+
// @ts-ignore
|
|
191
|
+
size={contentProps.size || size}
|
|
184
192
|
/>
|
|
185
193
|
)
|
|
186
194
|
}, [placement, strategy, props])
|
package/types/Popper.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../src/Popper.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,EAOX,MAAM,eAAe,CAAA;AAEtB,OAAO,
|
|
1
|
+
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../src/Popper.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,EAOX,MAAM,eAAe,CAAA;AAEtB,OAAO,EAEL,iBAAiB,EAGjB,WAAW,EACZ,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAU,SAAS,EAAqB,IAAI,EAAU,KAAK,EAAE,MAAM,YAAY,CAAA;AAGtF,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,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;CACtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyDxC,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;AAalD,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;AAoBD,eAAO,MAAM,WAAW;;;;;;;;;;;;4CA6DvB,CAAA"}
|