@radix-ui/react-popper 0.0.17 → 0.1.0
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/index.d.ts +15 -16
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +1 -1
- package/dist/index.module.js.map +1 -1
- package/package.json +9 -11
package/dist/index.d.ts
CHANGED
|
@@ -1,33 +1,32 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import * as Radix from "@radix-ui/react-primitive";
|
|
2
3
|
import { Primitive } from "@radix-ui/react-primitive";
|
|
3
4
|
import * as ArrowPrimitive from "@radix-ui/react-arrow";
|
|
4
|
-
import * as Polymorphic from "@radix-ui/react-polymorphic";
|
|
5
5
|
import { Side, Align } from "@radix-ui/popper";
|
|
6
6
|
import { Measurable } from "@radix-ui/rect";
|
|
7
7
|
export const Popper: React.FC;
|
|
8
|
-
type
|
|
8
|
+
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
|
|
9
|
+
export interface PopperAnchorProps extends PrimitiveDivProps {
|
|
9
10
|
virtualRef?: React.RefObject<Measurable>;
|
|
10
|
-
}
|
|
11
|
-
export
|
|
12
|
-
export
|
|
13
|
-
type PopperContentOwnProps = Polymorphic.Merge<Polymorphic.OwnProps<typeof Primitive>, {
|
|
11
|
+
}
|
|
12
|
+
export const PopperAnchor: React.ForwardRefExoticComponent<PopperAnchorProps & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export interface PopperContentProps extends PrimitiveDivProps {
|
|
14
14
|
side?: Side;
|
|
15
15
|
sideOffset?: number;
|
|
16
16
|
align?: Align;
|
|
17
17
|
alignOffset?: number;
|
|
18
18
|
collisionTolerance?: number;
|
|
19
19
|
avoidCollisions?: boolean;
|
|
20
|
-
}
|
|
21
|
-
export
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
}
|
|
21
|
+
export const PopperContent: React.ForwardRefExoticComponent<PopperContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
type ArrowProps = Radix.ComponentPropsWithoutRef<typeof ArrowPrimitive.Root>;
|
|
23
|
+
export interface PopperArrowProps extends ArrowProps {
|
|
24
24
|
offset?: number;
|
|
25
|
-
}
|
|
26
|
-
export
|
|
27
|
-
export const PopperArrow: PopperArrowPrimitive;
|
|
25
|
+
}
|
|
26
|
+
export const PopperArrow: React.ForwardRefExoticComponent<PopperArrowProps & React.RefAttributes<SVGSVGElement>>;
|
|
28
27
|
export const Root: React.FC<{}>;
|
|
29
|
-
export const Anchor:
|
|
30
|
-
export const Content:
|
|
31
|
-
export const Arrow:
|
|
28
|
+
export const Anchor: React.ForwardRefExoticComponent<PopperAnchorProps & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
+
export const Content: React.ForwardRefExoticComponent<PopperContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
30
|
+
export const Arrow: React.ForwardRefExoticComponent<PopperArrowProps & React.RefAttributes<SVGSVGElement>>;
|
|
32
31
|
|
|
33
32
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"A;A;A;A;A;A;AAyBA,OAAA,MAAM,QAAQ,MAAM,EAOnB,CAAC;
|
|
1
|
+
{"mappings":"A;A;A;A;A;A;AAyBA,OAAA,MAAM,QAAQ,MAAM,EAOnB,CAAC;AAWF,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,kCAA4B,SAAQ,iBAAiB;IACnD,UAAU,CAAC,EAAE,MAAM,SAAS,CAAC,UAAU,CAAC,CAAC;CAC1C;AAED,OAAA,MAAM,sGAgBL,CAAC;AAoBF,mCAA6B,SAAQ,iBAAiB;IACpD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,OAAA,MAAM,wGAmEL,CAAC;AAWF,kBAAkB,MAAM,wBAAwB,CAAC,OAAO,eAAe,IAAI,CAAC,CAAC;AAC7E,iCAA2B,SAAQ,UAAU;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,OAAA,MAAM,mGAoCJ,CAAC;AAiCH,OAAA,MAAM,kBAAa,CAAC;AACpB,OAAA,MAAM,gGAAqB,CAAC;AAC5B,OAAA,MAAM,kGAAuB,CAAC;AAC9B,OAAA,MAAM,6FAAmB,CAAC","sources":["./packages/react/popper/src/packages/react/popper/src/Popper.tsx","./packages/react/popper/src/packages/react/popper/src/index.ts"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e,r=u({},require("@radix-ui/react-arrow")),t=require("@radix-ui/react-primitive").Primitive,n=require("@radix-ui/react-use-size").useSize,o=require("@radix-ui/react-use-rect").useRect,i=require("@radix-ui/react-context").createContext,s=require("@radix-ui/react-compose-refs").useComposedRefs,a=require("@radix-ui/popper").getPlacementData,c=u({},require("react")),l=(e=require("@babel/runtime/helpers/extends"))&&e.__esModule?e.default:e;function u(e,r){return Object.keys(r).forEach((function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return r[t]}})})),e}const[p
|
|
1
|
+
var e,r=u({},require("@radix-ui/react-arrow")),t=require("@radix-ui/react-primitive").Primitive,n=require("@radix-ui/react-use-size").useSize,o=require("@radix-ui/react-use-rect").useRect,i=require("@radix-ui/react-context").createContext,s=require("@radix-ui/react-compose-refs").useComposedRefs,a=require("@radix-ui/popper").getPlacementData,c=u({},require("react")),l=(e=require("@babel/runtime/helpers/extends"))&&e.__esModule?e.default:e;function u(e,r){return Object.keys(r).forEach((function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return r[t]}})})),e}const[d,p]=i("Popper"),f=({children:e})=>{const[r,t]=c.useState(null);/*#__PURE__*/return c.createElement(d,{anchor:r,onAnchorChange:t},e)};exports.Popper=f;const w=/*#__PURE__*/c.forwardRef(((e,r)=>{const{virtualRef:n,...o}=e,i=p("PopperAnchor"),a=c.useRef(null),u=s(r,a);return c.useEffect((()=>{i.onAnchorChange((null==n?void 0:n.current)||a.current)})),n?null:/*#__PURE__*/c.createElement(t.div,l({},o,{ref:u}))}));exports.PopperAnchor=w;const[h,m]=i("PopperContent"),v=/*#__PURE__*/c.forwardRef(((e,r)=>{const{side:i="bottom",sideOffset:u,align:d="center",alignOffset:f,collisionTolerance:w,avoidCollisions:m=!0,...v}=e,x=p("PopperContent"),[g,y]=c.useState(),E=o(x.anchor),[A,C]=c.useState(null),R=n(A),[S,P]=c.useState(null),O=n(S),q=s(r,(e=>C(e))),b=function(){const[e,r]=c.useState(void 0);return c.useEffect((()=>{let e;function t(){r({width:window.innerWidth,height:window.innerHeight})}function n(){window.clearTimeout(e),e=window.setTimeout(t,100)}return t(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)}),[]),e}(),z=b?DOMRect.fromRect({...b,x:0,y:0}):void 0,{popperStyles:T,arrowStyles:_,placedSide:k,placedAlign:M}=a({anchorRect:E,popperSize:R,arrowSize:O,arrowOffset:g,side:i,sideOffset:u,align:d,alignOffset:f,shouldAvoidCollisions:m,collisionBoundariesRect:z,collisionTolerance:w}),j=void 0!==k;/*#__PURE__*/return c.createElement("div",{style:T,"data-radix-popper-content-wrapper":""},/*#__PURE__*/c.createElement(h,{arrowStyles:_,onArrowChange:P,onArrowOffsetChange:y},/*#__PURE__*/c.createElement(t.div,l({"data-side":k,"data-align":M},v,{style:{...v.style,animation:j?void 0:"none"},ref:q}))))}));exports.PopperContent=v;const x=/*#__PURE__*/c.forwardRef((function(e,t){const{offset:n,...o}=e,i=m("PopperArrow"),{onArrowOffsetChange:s}=i;return c.useEffect((()=>s(n)),[s,n]),/*#__PURE__*/c.createElement("span",{style:{...i.arrowStyles,pointerEvents:"none"}},/*#__PURE__*/c.createElement("span",{ref:i.onArrowChange,style:{display:"inline-block",verticalAlign:"top",pointerEvents:"auto"}},/*#__PURE__*/c.createElement(r.Root,l({},o,{ref:t,style:{...o.style,display:"block"}}))))}));exports.PopperArrow=x;const g=f;exports.Root=g;const y=w;exports.Anchor=y;const E=v;exports.Content=E;const A=x;exports.Arrow=A;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/popper/src/Popper.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n","import * as React from 'react';\nimport { getPlacementData } from '@radix-ui/popper';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContext } from '@radix-ui/react-context';\nimport { useRect } from '@radix-ui/react-use-rect';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as ArrowPrimitive from '@radix-ui/react-arrow';\n\nimport type * as Polymorphic from '@radix-ui/react-polymorphic';\nimport type { Side, Align } from '@radix-ui/popper';\nimport type { Measurable } from '@radix-ui/rect';\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper';\n\ntype PopperContextValue = {\n anchor: Measurable | null;\n onAnchorChange(anchor: Measurable | null): void;\n};\nconst [PopperProvider, usePopperContext] = createContext<PopperContextValue>(POPPER_NAME);\n\nconst Popper: React.FC = ({ children }) => {\n const [anchor, setAnchor] = React.useState<Measurable | null>(null);\n return (\n <PopperProvider anchor={anchor} onAnchorChange={setAnchor}>\n {children}\n </PopperProvider>\n );\n};\n\nPopper.displayName = POPPER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor';\n\ntype PopperAnchorOwnProps = Polymorphic.Merge<\n Polymorphic.OwnProps<typeof Primitive>,\n { virtualRef?: React.RefObject<Measurable> }\n>;\ntype PopperAnchorPrimitive = Polymorphic.ForwardRefComponent<\n Polymorphic.IntrinsicElement<typeof Primitive>,\n PopperAnchorOwnProps\n>;\n\nconst PopperAnchor = React.forwardRef((props, forwardedRef) => {\n const { virtualRef, children, ...anchorProps } = props;\n const context = usePopperContext(ANCHOR_NAME);\n const ref = React.useRef<React.ElementRef<typeof Primitive>>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n // Consumer can anchor the popper to something that isn't\n // a DOM node e.g. pointer position, so we override the\n // `anchorRef` with their virtual ref in this case.\n context.onAnchorChange(virtualRef?.current || ref.current);\n });\n\n return virtualRef ? null : (\n <Primitive {...anchorProps} ref={composedRefs}>\n {children}\n </Primitive>\n );\n}) as PopperAnchorPrimitive;\n\nPopperAnchor.displayName = ANCHOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent';\n\ntype PopperContentContextValue = {\n arrowStyles: React.CSSProperties;\n onArrowChange(arrow: HTMLSpanElement | null): void;\n onArrowOffsetChange(offset?: number): void;\n};\n\nconst [PopperContentProvider, useContentContext] = createContext<PopperContentContextValue>(\n CONTENT_NAME\n);\n\ntype PopperContentOwnProps = Polymorphic.Merge<\n Polymorphic.OwnProps<typeof Primitive>,\n {\n side?: Side;\n sideOffset?: number;\n align?: Align;\n alignOffset?: number;\n collisionTolerance?: number;\n avoidCollisions?: boolean;\n }\n>;\n\ntype PopperContentPrimitive = Polymorphic.ForwardRefComponent<\n Polymorphic.IntrinsicElement<typeof Primitive>,\n PopperContentOwnProps\n>;\n\nconst PopperContent = React.forwardRef((props, forwardedRef) => {\n const {\n side = 'bottom',\n sideOffset,\n align = 'center',\n alignOffset,\n collisionTolerance,\n avoidCollisions = true,\n ...contentProps\n } = props;\n\n const context = usePopperContext(CONTENT_NAME);\n const [arrowOffset, setArrowOffset] = React.useState<number>();\n const anchorRect = useRect(context.anchor);\n const [content, setContent] = React.useState<HTMLDivElement | null>(null);\n const contentSize = useSize(content);\n const [arrow, setArrow] = React.useState<HTMLSpanElement | null>(null);\n const arrowSize = useSize(arrow);\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n\n const windowSize = useWindowSize();\n const collisionBoundariesRect = windowSize\n ? DOMRect.fromRect({ ...windowSize, x: 0, y: 0 })\n : undefined;\n\n const { popperStyles, arrowStyles, placedSide, placedAlign } = getPlacementData({\n anchorRect,\n popperSize: contentSize,\n arrowSize,\n\n // config\n arrowOffset,\n side,\n sideOffset,\n align,\n alignOffset,\n shouldAvoidCollisions: avoidCollisions,\n collisionBoundariesRect,\n collisionTolerance,\n });\n const isPlaced = placedSide !== undefined;\n\n return (\n <div style={popperStyles} data-radix-popper-content-wrapper=\"\">\n <PopperContentProvider\n arrowStyles={arrowStyles}\n onArrowChange={setArrow}\n onArrowOffsetChange={setArrowOffset}\n >\n <Primitive\n data-side={placedSide}\n data-align={placedAlign}\n {...contentProps}\n style={{\n ...contentProps.style,\n // if the PopperContent hasn't been placed yet (not all measurements done)\n // we prevent animations so that users's animation don't kick in too early referring wrong sides\n animation: !isPlaced ? 'none' : undefined,\n }}\n ref={composedRefs}\n />\n </PopperContentProvider>\n </div>\n );\n}) as PopperContentPrimitive;\n\nPopperContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow';\n\ntype PopperArrowOwnProps = Polymorphic.Merge<\n Polymorphic.OwnProps<typeof ArrowPrimitive.Root>,\n { offset?: number }\n>;\n\ntype PopperArrowPrimitive = Polymorphic.ForwardRefComponent<\n Polymorphic.IntrinsicElement<typeof ArrowPrimitive.Root>,\n PopperArrowOwnProps\n>;\n\nconst PopperArrow = React.forwardRef(function PopperArrow(props, forwardedRef) {\n const { offset, ...arrowProps } = props;\n const context = useContentContext(ARROW_NAME);\n const { onArrowOffsetChange } = context;\n\n // send the Arrow's offset up to Popper\n React.useEffect(() => onArrowOffsetChange(offset), [onArrowOffsetChange, offset]);\n\n return (\n <span style={{ ...context.arrowStyles, pointerEvents: 'none' }}>\n <span\n // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)\n // doesn't report size as we'd expect on SVG elements.\n // it reports their bounding box which is effectively the largest path inside the SVG.\n ref={context.onArrowChange}\n style={{\n display: 'inline-block',\n verticalAlign: 'top',\n pointerEvents: 'auto',\n }}\n >\n <ArrowPrimitive.Root\n {...arrowProps}\n ref={forwardedRef}\n style={{\n ...arrowProps.style,\n // ensures the element can be measured correctly (mostly for if SVG)\n display: 'block',\n }}\n />\n </span>\n </span>\n );\n}) as PopperArrowPrimitive;\n\nPopperArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS = 100;\n\nfunction useWindowSize() {\n const [windowSize, setWindowSize] = React.useState<{ width: number; height: number } | undefined>(\n undefined\n );\n\n React.useEffect(() => {\n let debounceTimerId: number;\n\n function updateWindowSize() {\n setWindowSize({ width: window.innerWidth, height: window.innerHeight });\n }\n\n function handleResize() {\n window.clearTimeout(debounceTimerId);\n debounceTimerId = window.setTimeout(updateWindowSize, WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS);\n }\n\n updateWindowSize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return windowSize;\n}\n\nconst Root = Popper;\nconst Anchor = PopperAnchor;\nconst Content = PopperContent;\nconst Arrow = PopperArrow;\n\nexport {\n Popper,\n PopperAnchor,\n PopperContent,\n PopperArrow,\n //\n Root,\n Anchor,\n Content,\n Arrow,\n};\nexport type { PopperAnchorPrimitive, PopperContentPrimitive, PopperArrowPrimitive };\n"],"names":["a","__esModule","default","$parcel$exportWildcard","dest","source","Object","keys","forEach","key","defineProperty","enumerable","get","PopperProvider","usePopperContext","createContext","Popper","children","anchor","setAnchor","React","useState","_react","createElement","$be5d7b5e9bdca855ae0500ff2a345d73$var$PopperProvider","onAnchorChange","PopperAnchor","forwardRef","props","forwardedRef","virtualRef","anchorProps","context","ref","useRef","composedRefs","useComposedRefs","useEffect","current","Primitive","_babelRuntimeHelpersExtends","PopperContentProvider","useContentContext","PopperContent","side","sideOffset","align","alignOffset","collisionTolerance","avoidCollisions","contentProps","arrowOffset","setArrowOffset","anchorRect","useRect","content","setContent","contentSize","useSize","arrow","setArrow","arrowSize","node","windowSize","setWindowSize","undefined","debounceTimerId","updateWindowSize","width","window","innerWidth","height","innerHeight","handleResize","clearTimeout","setTimeout","addEventListener","removeEventListener","useWindowSize","collisionBoundariesRect","DOMRect","fromRect","x","y","popperStyles","arrowStyles","placedSide","placedAlign","getPlacementData","popperSize","shouldAvoidCollisions","isPlaced","style","data-radix-popper-content-wrapper","$be5d7b5e9bdca855ae0500ff2a345d73$var$PopperContentProvider","onArrowChange","onArrowOffsetChange","data-side","data-align","animation","PopperArrow","offset","arrowProps","pointerEvents","display","verticalAlign","_radixUiReactArrow","Root","Anchor","Content","Arrow"],"version":3,"file":"index.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/popper/src/Popper.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n","import * as React from 'react';\nimport { getPlacementData } from '@radix-ui/popper';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContext } from '@radix-ui/react-context';\nimport { useRect } from '@radix-ui/react-use-rect';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as ArrowPrimitive from '@radix-ui/react-arrow';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Side, Align } from '@radix-ui/popper';\nimport type { Measurable } from '@radix-ui/rect';\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper';\n\ntype PopperContextValue = {\n anchor: Measurable | null;\n onAnchorChange(anchor: Measurable | null): void;\n};\nconst [PopperProvider, usePopperContext] = createContext<PopperContextValue>(POPPER_NAME);\n\nconst Popper: React.FC = ({ children }) => {\n const [anchor, setAnchor] = React.useState<Measurable | null>(null);\n return (\n <PopperProvider anchor={anchor} onAnchorChange={setAnchor}>\n {children}\n </PopperProvider>\n );\n};\n\nPopper.displayName = POPPER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor';\n\ntype PopperAnchorElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface PopperAnchorProps extends PrimitiveDivProps {\n virtualRef?: React.RefObject<Measurable>;\n}\n\nconst PopperAnchor = React.forwardRef<PopperAnchorElement, PopperAnchorProps>(\n (props, forwardedRef) => {\n const { virtualRef, ...anchorProps } = props;\n const context = usePopperContext(ANCHOR_NAME);\n const ref = React.useRef<PopperAnchorElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n // Consumer can anchor the popper to something that isn't\n // a DOM node e.g. pointer position, so we override the\n // `anchorRef` with their virtual ref in this case.\n context.onAnchorChange(virtualRef?.current || ref.current);\n });\n\n return virtualRef ? null : <Primitive.div {...anchorProps} ref={composedRefs} />;\n }\n);\n\nPopperAnchor.displayName = ANCHOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent';\n\ntype PopperContentContextValue = {\n arrowStyles: React.CSSProperties;\n onArrowChange(arrow: HTMLSpanElement | null): void;\n onArrowOffsetChange(offset?: number): void;\n};\n\nconst [PopperContentProvider, useContentContext] =\n createContext<PopperContentContextValue>(CONTENT_NAME);\n\ntype PopperContentElement = React.ElementRef<typeof Primitive.div>;\ninterface PopperContentProps extends PrimitiveDivProps {\n side?: Side;\n sideOffset?: number;\n align?: Align;\n alignOffset?: number;\n collisionTolerance?: number;\n avoidCollisions?: boolean;\n}\n\nconst PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>(\n (props, forwardedRef) => {\n const {\n side = 'bottom',\n sideOffset,\n align = 'center',\n alignOffset,\n collisionTolerance,\n avoidCollisions = true,\n ...contentProps\n } = props;\n\n const context = usePopperContext(CONTENT_NAME);\n const [arrowOffset, setArrowOffset] = React.useState<number>();\n const anchorRect = useRect(context.anchor);\n const [content, setContent] = React.useState<HTMLDivElement | null>(null);\n const contentSize = useSize(content);\n const [arrow, setArrow] = React.useState<HTMLSpanElement | null>(null);\n const arrowSize = useSize(arrow);\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n\n const windowSize = useWindowSize();\n const collisionBoundariesRect = windowSize\n ? DOMRect.fromRect({ ...windowSize, x: 0, y: 0 })\n : undefined;\n\n const { popperStyles, arrowStyles, placedSide, placedAlign } = getPlacementData({\n anchorRect,\n popperSize: contentSize,\n arrowSize,\n\n // config\n arrowOffset,\n side,\n sideOffset,\n align,\n alignOffset,\n shouldAvoidCollisions: avoidCollisions,\n collisionBoundariesRect,\n collisionTolerance,\n });\n const isPlaced = placedSide !== undefined;\n\n return (\n <div style={popperStyles} data-radix-popper-content-wrapper=\"\">\n <PopperContentProvider\n arrowStyles={arrowStyles}\n onArrowChange={setArrow}\n onArrowOffsetChange={setArrowOffset}\n >\n <Primitive.div\n data-side={placedSide}\n data-align={placedAlign}\n {...contentProps}\n style={{\n ...contentProps.style,\n // if the PopperContent hasn't been placed yet (not all measurements done)\n // we prevent animations so that users's animation don't kick in too early referring wrong sides\n animation: !isPlaced ? 'none' : undefined,\n }}\n ref={composedRefs}\n />\n </PopperContentProvider>\n </div>\n );\n }\n);\n\nPopperContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow';\n\ntype PopperArrowElement = React.ElementRef<typeof ArrowPrimitive.Root>;\ntype ArrowProps = Radix.ComponentPropsWithoutRef<typeof ArrowPrimitive.Root>;\ninterface PopperArrowProps extends ArrowProps {\n offset?: number;\n}\n\nconst PopperArrow = React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n props,\n forwardedRef\n) {\n const { offset, ...arrowProps } = props;\n const context = useContentContext(ARROW_NAME);\n const { onArrowOffsetChange } = context;\n\n // send the Arrow's offset up to Popper\n React.useEffect(() => onArrowOffsetChange(offset), [onArrowOffsetChange, offset]);\n\n return (\n <span style={{ ...context.arrowStyles, pointerEvents: 'none' }}>\n <span\n // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)\n // doesn't report size as we'd expect on SVG elements.\n // it reports their bounding box which is effectively the largest path inside the SVG.\n ref={context.onArrowChange}\n style={{\n display: 'inline-block',\n verticalAlign: 'top',\n pointerEvents: 'auto',\n }}\n >\n <ArrowPrimitive.Root\n {...arrowProps}\n ref={forwardedRef}\n style={{\n ...arrowProps.style,\n // ensures the element can be measured correctly (mostly for if SVG)\n display: 'block',\n }}\n />\n </span>\n </span>\n );\n});\n\nPopperArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS = 100;\n\nfunction useWindowSize() {\n const [windowSize, setWindowSize] = React.useState<{ width: number; height: number } | undefined>(\n undefined\n );\n\n React.useEffect(() => {\n let debounceTimerId: number;\n\n function updateWindowSize() {\n setWindowSize({ width: window.innerWidth, height: window.innerHeight });\n }\n\n function handleResize() {\n window.clearTimeout(debounceTimerId);\n debounceTimerId = window.setTimeout(updateWindowSize, WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS);\n }\n\n updateWindowSize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return windowSize;\n}\n\nconst Root = Popper;\nconst Anchor = PopperAnchor;\nconst Content = PopperContent;\nconst Arrow = PopperArrow;\n\nexport {\n Popper,\n PopperAnchor,\n PopperContent,\n PopperArrow,\n //\n Root,\n Anchor,\n Content,\n Arrow,\n};\nexport type { PopperAnchorProps, PopperContentProps, PopperArrowProps };\n"],"names":["a","__esModule","default","$parcel$exportWildcard","dest","source","Object","keys","forEach","key","defineProperty","enumerable","get","PopperProvider","usePopperContext","createContext","Popper","children","anchor","setAnchor","React","useState","_react","createElement","$be5d7b5e9bdca855ae0500ff2a345d73$var$PopperProvider","onAnchorChange","PopperAnchor","forwardRef","props","forwardedRef","virtualRef","anchorProps","context","ref","useRef","composedRefs","useComposedRefs","useEffect","current","Primitive","div","_babelRuntimeHelpersExtends","PopperContentProvider","useContentContext","PopperContent","side","sideOffset","align","alignOffset","collisionTolerance","avoidCollisions","contentProps","arrowOffset","setArrowOffset","anchorRect","useRect","content","setContent","contentSize","useSize","arrow","setArrow","arrowSize","node","windowSize","setWindowSize","undefined","debounceTimerId","updateWindowSize","width","window","innerWidth","height","innerHeight","handleResize","clearTimeout","setTimeout","addEventListener","removeEventListener","useWindowSize","collisionBoundariesRect","DOMRect","fromRect","x","y","popperStyles","arrowStyles","placedSide","placedAlign","getPlacementData","popperSize","shouldAvoidCollisions","isPlaced","style","$be5d7b5e9bdca855ae0500ff2a345d73$var$PopperContentProvider","onArrowChange","onArrowOffsetChange","animation","PopperArrow","offset","arrowProps","pointerEvents","display","verticalAlign","_radixUiReactArrow","Root","Anchor","Content","Arrow"],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"@radix-ui/react-arrow";import{Primitive as r}from"@radix-ui/react-primitive";import{useSize as o}from"@radix-ui/react-use-size";import{useRect as t}from"@radix-ui/react-use-rect";import{createContext as n}from"@radix-ui/react-context";import{useComposedRefs as i}from"@radix-ui/react-compose-refs";import{getPlacementData as a}from"@radix-ui/popper";import*as s from"react";import c from"@babel/runtime/helpers/esm/extends";const[p,l]=n("Popper");export const Popper=({children:e})=>{const[r,o]=s.useState(null);/*#__PURE__*/return s.createElement(p,{anchor:r,onAnchorChange:o},e)};/*#__PURE__*/export const PopperAnchor=/*#__PURE__*/s.forwardRef(((e,o)=>{const{virtualRef:t
|
|
1
|
+
import*as e from"@radix-ui/react-arrow";import{Primitive as r}from"@radix-ui/react-primitive";import{useSize as o}from"@radix-ui/react-use-size";import{useRect as t}from"@radix-ui/react-use-rect";import{createContext as n}from"@radix-ui/react-context";import{useComposedRefs as i}from"@radix-ui/react-compose-refs";import{getPlacementData as a}from"@radix-ui/popper";import*as s from"react";import c from"@babel/runtime/helpers/esm/extends";const[p,l]=n("Popper");export const Popper=({children:e})=>{const[r,o]=s.useState(null);/*#__PURE__*/return s.createElement(p,{anchor:r,onAnchorChange:o},e)};/*#__PURE__*/export const PopperAnchor=/*#__PURE__*/s.forwardRef(((e,o)=>{const{virtualRef:t,...n}=e,a=l("PopperAnchor"),p=s.useRef(null),f=i(o,p);return s.useEffect((()=>{a.onAnchorChange((null==t?void 0:t.current)||p.current)})),t?null:/*#__PURE__*/s.createElement(r.div,c({},n,{ref:f}))}));/*#__PURE__*/const[f,d]=n("PopperContent");export const PopperContent=/*#__PURE__*/s.forwardRef(((e,n)=>{const{side:p="bottom",sideOffset:d,align:u="center",alignOffset:m,collisionTolerance:w,avoidCollisions:h=!0,...x}=e,v=l("PopperContent"),[A,g]=s.useState(),E=t(v.anchor),[y,C]=s.useState(null),P=o(y),[S,R]=s.useState(null),O=o(S),b=i(n,(e=>C(e))),z=function(){const[e,r]=s.useState(void 0);return s.useEffect((()=>{let e;function o(){r({width:window.innerWidth,height:window.innerHeight})}function t(){window.clearTimeout(e),e=window.setTimeout(o,100)}return o(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)}),[]),e}(),T=z?DOMRect.fromRect({...z,x:0,y:0}):void 0,{popperStyles:k,arrowStyles:L,placedSide:B,placedAlign:D}=a({anchorRect:E,popperSize:P,arrowSize:O,arrowOffset:A,side:p,sideOffset:d,align:u,alignOffset:m,shouldAvoidCollisions:h,collisionBoundariesRect:T,collisionTolerance:w}),H=void 0!==B;/*#__PURE__*/return s.createElement("div",{style:k,"data-radix-popper-content-wrapper":""},/*#__PURE__*/s.createElement(f,{arrowStyles:L,onArrowChange:R,onArrowOffsetChange:g},/*#__PURE__*/s.createElement(r.div,c({"data-side":B,"data-align":D},x,{style:{...x.style,animation:H?void 0:"none"},ref:b}))))}));/*#__PURE__*/export const PopperArrow=/*#__PURE__*/s.forwardRef((function(r,o){const{offset:t,...n}=r,i=d("PopperArrow"),{onArrowOffsetChange:a}=i;return s.useEffect((()=>a(t)),[a,t]),/*#__PURE__*/s.createElement("span",{style:{...i.arrowStyles,pointerEvents:"none"}},/*#__PURE__*/s.createElement("span",{ref:i.onArrowChange,style:{display:"inline-block",verticalAlign:"top",pointerEvents:"auto"}},/*#__PURE__*/s.createElement(e.Root,c({},n,{ref:o,style:{...n.style,display:"block"}}))))}));/*#__PURE__*/export const Root=Popper;export const Anchor=PopperAnchor;export const Content=PopperContent;export const Arrow=PopperArrow;
|
|
2
2
|
//# sourceMappingURL=index.module.js.map
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["./packages/react/popper/src/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPlacementData } from '@radix-ui/popper';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContext } from '@radix-ui/react-context';\nimport { useRect } from '@radix-ui/react-use-rect';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as ArrowPrimitive from '@radix-ui/react-arrow';\n\nimport type * as Polymorphic from '@radix-ui/react-polymorphic';\nimport type { Side, Align } from '@radix-ui/popper';\nimport type { Measurable } from '@radix-ui/rect';\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper';\n\ntype PopperContextValue = {\n anchor: Measurable | null;\n onAnchorChange(anchor: Measurable | null): void;\n};\nconst [PopperProvider, usePopperContext] = createContext<PopperContextValue>(POPPER_NAME);\n\nconst Popper: React.FC = ({ children }) => {\n const [anchor, setAnchor] = React.useState<Measurable | null>(null);\n return (\n <PopperProvider anchor={anchor} onAnchorChange={setAnchor}>\n {children}\n </PopperProvider>\n );\n};\n\nPopper.displayName = POPPER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor';\n\ntype PopperAnchorOwnProps = Polymorphic.Merge<\n Polymorphic.OwnProps<typeof Primitive>,\n { virtualRef?: React.RefObject<Measurable> }\n>;\ntype PopperAnchorPrimitive = Polymorphic.ForwardRefComponent<\n Polymorphic.IntrinsicElement<typeof Primitive>,\n PopperAnchorOwnProps\n>;\n\nconst PopperAnchor = React.forwardRef((props, forwardedRef) => {\n const { virtualRef, children, ...anchorProps } = props;\n const context = usePopperContext(ANCHOR_NAME);\n const ref = React.useRef<React.ElementRef<typeof Primitive>>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n // Consumer can anchor the popper to something that isn't\n // a DOM node e.g. pointer position, so we override the\n // `anchorRef` with their virtual ref in this case.\n context.onAnchorChange(virtualRef?.current || ref.current);\n });\n\n return virtualRef ? null : (\n <Primitive {...anchorProps} ref={composedRefs}>\n {children}\n </Primitive>\n );\n}) as PopperAnchorPrimitive;\n\nPopperAnchor.displayName = ANCHOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent';\n\ntype PopperContentContextValue = {\n arrowStyles: React.CSSProperties;\n onArrowChange(arrow: HTMLSpanElement | null): void;\n onArrowOffsetChange(offset?: number): void;\n};\n\nconst [PopperContentProvider, useContentContext] = createContext<PopperContentContextValue>(\n CONTENT_NAME\n);\n\ntype PopperContentOwnProps = Polymorphic.Merge<\n Polymorphic.OwnProps<typeof Primitive>,\n {\n side?: Side;\n sideOffset?: number;\n align?: Align;\n alignOffset?: number;\n collisionTolerance?: number;\n avoidCollisions?: boolean;\n }\n>;\n\ntype PopperContentPrimitive = Polymorphic.ForwardRefComponent<\n Polymorphic.IntrinsicElement<typeof Primitive>,\n PopperContentOwnProps\n>;\n\nconst PopperContent = React.forwardRef((props, forwardedRef) => {\n const {\n side = 'bottom',\n sideOffset,\n align = 'center',\n alignOffset,\n collisionTolerance,\n avoidCollisions = true,\n ...contentProps\n } = props;\n\n const context = usePopperContext(CONTENT_NAME);\n const [arrowOffset, setArrowOffset] = React.useState<number>();\n const anchorRect = useRect(context.anchor);\n const [content, setContent] = React.useState<HTMLDivElement | null>(null);\n const contentSize = useSize(content);\n const [arrow, setArrow] = React.useState<HTMLSpanElement | null>(null);\n const arrowSize = useSize(arrow);\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n\n const windowSize = useWindowSize();\n const collisionBoundariesRect = windowSize\n ? DOMRect.fromRect({ ...windowSize, x: 0, y: 0 })\n : undefined;\n\n const { popperStyles, arrowStyles, placedSide, placedAlign } = getPlacementData({\n anchorRect,\n popperSize: contentSize,\n arrowSize,\n\n // config\n arrowOffset,\n side,\n sideOffset,\n align,\n alignOffset,\n shouldAvoidCollisions: avoidCollisions,\n collisionBoundariesRect,\n collisionTolerance,\n });\n const isPlaced = placedSide !== undefined;\n\n return (\n <div style={popperStyles} data-radix-popper-content-wrapper=\"\">\n <PopperContentProvider\n arrowStyles={arrowStyles}\n onArrowChange={setArrow}\n onArrowOffsetChange={setArrowOffset}\n >\n <Primitive\n data-side={placedSide}\n data-align={placedAlign}\n {...contentProps}\n style={{\n ...contentProps.style,\n // if the PopperContent hasn't been placed yet (not all measurements done)\n // we prevent animations so that users's animation don't kick in too early referring wrong sides\n animation: !isPlaced ? 'none' : undefined,\n }}\n ref={composedRefs}\n />\n </PopperContentProvider>\n </div>\n );\n}) as PopperContentPrimitive;\n\nPopperContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow';\n\ntype PopperArrowOwnProps = Polymorphic.Merge<\n Polymorphic.OwnProps<typeof ArrowPrimitive.Root>,\n { offset?: number }\n>;\n\ntype PopperArrowPrimitive = Polymorphic.ForwardRefComponent<\n Polymorphic.IntrinsicElement<typeof ArrowPrimitive.Root>,\n PopperArrowOwnProps\n>;\n\nconst PopperArrow = React.forwardRef(function PopperArrow(props, forwardedRef) {\n const { offset, ...arrowProps } = props;\n const context = useContentContext(ARROW_NAME);\n const { onArrowOffsetChange } = context;\n\n // send the Arrow's offset up to Popper\n React.useEffect(() => onArrowOffsetChange(offset), [onArrowOffsetChange, offset]);\n\n return (\n <span style={{ ...context.arrowStyles, pointerEvents: 'none' }}>\n <span\n // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)\n // doesn't report size as we'd expect on SVG elements.\n // it reports their bounding box which is effectively the largest path inside the SVG.\n ref={context.onArrowChange}\n style={{\n display: 'inline-block',\n verticalAlign: 'top',\n pointerEvents: 'auto',\n }}\n >\n <ArrowPrimitive.Root\n {...arrowProps}\n ref={forwardedRef}\n style={{\n ...arrowProps.style,\n // ensures the element can be measured correctly (mostly for if SVG)\n display: 'block',\n }}\n />\n </span>\n </span>\n );\n}) as PopperArrowPrimitive;\n\nPopperArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS = 100;\n\nfunction useWindowSize() {\n const [windowSize, setWindowSize] = React.useState<{ width: number; height: number } | undefined>(\n undefined\n );\n\n React.useEffect(() => {\n let debounceTimerId: number;\n\n function updateWindowSize() {\n setWindowSize({ width: window.innerWidth, height: window.innerHeight });\n }\n\n function handleResize() {\n window.clearTimeout(debounceTimerId);\n debounceTimerId = window.setTimeout(updateWindowSize, WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS);\n }\n\n updateWindowSize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return windowSize;\n}\n\nconst Root = Popper;\nconst Anchor = PopperAnchor;\nconst Content = PopperContent;\nconst Arrow = PopperArrow;\n\nexport {\n Popper,\n PopperAnchor,\n PopperContent,\n PopperArrow,\n //\n Root,\n Anchor,\n Content,\n Arrow,\n};\nexport type { PopperAnchorPrimitive, PopperContentPrimitive, PopperArrowPrimitive };\n"],"names":["PopperProvider","usePopperContext","createContext","Popper","children","anchor","setAnchor","React","useState","_react","createElement","$d4fb2a15a6483a4f85af0f96fd68687d$var$PopperProvider","onAnchorChange","PopperAnchor","forwardRef","props","forwardedRef","virtualRef","anchorProps","context","ref","useRef","composedRefs","useComposedRefs","useEffect","current","Primitive","_babelRuntimeHelpersEsmExtends","PopperContentProvider","useContentContext","PopperContent","side","sideOffset","align","alignOffset","collisionTolerance","avoidCollisions","contentProps","arrowOffset","setArrowOffset","anchorRect","useRect","content","setContent","contentSize","useSize","arrow","setArrow","arrowSize","node","windowSize","setWindowSize","undefined","debounceTimerId","updateWindowSize","width","window","innerWidth","height","innerHeight","handleResize","clearTimeout","setTimeout","addEventListener","removeEventListener","useWindowSize","collisionBoundariesRect","DOMRect","fromRect","x","y","popperStyles","arrowStyles","placedSide","placedAlign","getPlacementData","popperSize","shouldAvoidCollisions","isPlaced","style","data-radix-popper-content-wrapper","$d4fb2a15a6483a4f85af0f96fd68687d$var$PopperContentProvider","onArrowChange","onArrowOffsetChange","data-side","data-align","animation","PopperArrow","offset","arrowProps","pointerEvents","display","verticalAlign","_radixUiReactArrow","Root","Anchor","Content","Arrow"],"version":3,"file":"index.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["./packages/react/popper/src/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPlacementData } from '@radix-ui/popper';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContext } from '@radix-ui/react-context';\nimport { useRect } from '@radix-ui/react-use-rect';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as ArrowPrimitive from '@radix-ui/react-arrow';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Side, Align } from '@radix-ui/popper';\nimport type { Measurable } from '@radix-ui/rect';\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper';\n\ntype PopperContextValue = {\n anchor: Measurable | null;\n onAnchorChange(anchor: Measurable | null): void;\n};\nconst [PopperProvider, usePopperContext] = createContext<PopperContextValue>(POPPER_NAME);\n\nconst Popper: React.FC = ({ children }) => {\n const [anchor, setAnchor] = React.useState<Measurable | null>(null);\n return (\n <PopperProvider anchor={anchor} onAnchorChange={setAnchor}>\n {children}\n </PopperProvider>\n );\n};\n\nPopper.displayName = POPPER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor';\n\ntype PopperAnchorElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface PopperAnchorProps extends PrimitiveDivProps {\n virtualRef?: React.RefObject<Measurable>;\n}\n\nconst PopperAnchor = React.forwardRef<PopperAnchorElement, PopperAnchorProps>(\n (props, forwardedRef) => {\n const { virtualRef, ...anchorProps } = props;\n const context = usePopperContext(ANCHOR_NAME);\n const ref = React.useRef<PopperAnchorElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n // Consumer can anchor the popper to something that isn't\n // a DOM node e.g. pointer position, so we override the\n // `anchorRef` with their virtual ref in this case.\n context.onAnchorChange(virtualRef?.current || ref.current);\n });\n\n return virtualRef ? null : <Primitive.div {...anchorProps} ref={composedRefs} />;\n }\n);\n\nPopperAnchor.displayName = ANCHOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent';\n\ntype PopperContentContextValue = {\n arrowStyles: React.CSSProperties;\n onArrowChange(arrow: HTMLSpanElement | null): void;\n onArrowOffsetChange(offset?: number): void;\n};\n\nconst [PopperContentProvider, useContentContext] =\n createContext<PopperContentContextValue>(CONTENT_NAME);\n\ntype PopperContentElement = React.ElementRef<typeof Primitive.div>;\ninterface PopperContentProps extends PrimitiveDivProps {\n side?: Side;\n sideOffset?: number;\n align?: Align;\n alignOffset?: number;\n collisionTolerance?: number;\n avoidCollisions?: boolean;\n}\n\nconst PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>(\n (props, forwardedRef) => {\n const {\n side = 'bottom',\n sideOffset,\n align = 'center',\n alignOffset,\n collisionTolerance,\n avoidCollisions = true,\n ...contentProps\n } = props;\n\n const context = usePopperContext(CONTENT_NAME);\n const [arrowOffset, setArrowOffset] = React.useState<number>();\n const anchorRect = useRect(context.anchor);\n const [content, setContent] = React.useState<HTMLDivElement | null>(null);\n const contentSize = useSize(content);\n const [arrow, setArrow] = React.useState<HTMLSpanElement | null>(null);\n const arrowSize = useSize(arrow);\n\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n\n const windowSize = useWindowSize();\n const collisionBoundariesRect = windowSize\n ? DOMRect.fromRect({ ...windowSize, x: 0, y: 0 })\n : undefined;\n\n const { popperStyles, arrowStyles, placedSide, placedAlign } = getPlacementData({\n anchorRect,\n popperSize: contentSize,\n arrowSize,\n\n // config\n arrowOffset,\n side,\n sideOffset,\n align,\n alignOffset,\n shouldAvoidCollisions: avoidCollisions,\n collisionBoundariesRect,\n collisionTolerance,\n });\n const isPlaced = placedSide !== undefined;\n\n return (\n <div style={popperStyles} data-radix-popper-content-wrapper=\"\">\n <PopperContentProvider\n arrowStyles={arrowStyles}\n onArrowChange={setArrow}\n onArrowOffsetChange={setArrowOffset}\n >\n <Primitive.div\n data-side={placedSide}\n data-align={placedAlign}\n {...contentProps}\n style={{\n ...contentProps.style,\n // if the PopperContent hasn't been placed yet (not all measurements done)\n // we prevent animations so that users's animation don't kick in too early referring wrong sides\n animation: !isPlaced ? 'none' : undefined,\n }}\n ref={composedRefs}\n />\n </PopperContentProvider>\n </div>\n );\n }\n);\n\nPopperContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow';\n\ntype PopperArrowElement = React.ElementRef<typeof ArrowPrimitive.Root>;\ntype ArrowProps = Radix.ComponentPropsWithoutRef<typeof ArrowPrimitive.Root>;\ninterface PopperArrowProps extends ArrowProps {\n offset?: number;\n}\n\nconst PopperArrow = React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n props,\n forwardedRef\n) {\n const { offset, ...arrowProps } = props;\n const context = useContentContext(ARROW_NAME);\n const { onArrowOffsetChange } = context;\n\n // send the Arrow's offset up to Popper\n React.useEffect(() => onArrowOffsetChange(offset), [onArrowOffsetChange, offset]);\n\n return (\n <span style={{ ...context.arrowStyles, pointerEvents: 'none' }}>\n <span\n // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)\n // doesn't report size as we'd expect on SVG elements.\n // it reports their bounding box which is effectively the largest path inside the SVG.\n ref={context.onArrowChange}\n style={{\n display: 'inline-block',\n verticalAlign: 'top',\n pointerEvents: 'auto',\n }}\n >\n <ArrowPrimitive.Root\n {...arrowProps}\n ref={forwardedRef}\n style={{\n ...arrowProps.style,\n // ensures the element can be measured correctly (mostly for if SVG)\n display: 'block',\n }}\n />\n </span>\n </span>\n );\n});\n\nPopperArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS = 100;\n\nfunction useWindowSize() {\n const [windowSize, setWindowSize] = React.useState<{ width: number; height: number } | undefined>(\n undefined\n );\n\n React.useEffect(() => {\n let debounceTimerId: number;\n\n function updateWindowSize() {\n setWindowSize({ width: window.innerWidth, height: window.innerHeight });\n }\n\n function handleResize() {\n window.clearTimeout(debounceTimerId);\n debounceTimerId = window.setTimeout(updateWindowSize, WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS);\n }\n\n updateWindowSize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return windowSize;\n}\n\nconst Root = Popper;\nconst Anchor = PopperAnchor;\nconst Content = PopperContent;\nconst Arrow = PopperArrow;\n\nexport {\n Popper,\n PopperAnchor,\n PopperContent,\n PopperArrow,\n //\n Root,\n Anchor,\n Content,\n Arrow,\n};\nexport type { PopperAnchorProps, PopperContentProps, PopperArrowProps };\n"],"names":["PopperProvider","usePopperContext","createContext","Popper","children","anchor","setAnchor","React","useState","_react","createElement","$d4fb2a15a6483a4f85af0f96fd68687d$var$PopperProvider","onAnchorChange","PopperAnchor","forwardRef","props","forwardedRef","virtualRef","anchorProps","context","ref","useRef","composedRefs","useComposedRefs","useEffect","current","Primitive","div","_babelRuntimeHelpersEsmExtends","PopperContentProvider","useContentContext","PopperContent","side","sideOffset","align","alignOffset","collisionTolerance","avoidCollisions","contentProps","arrowOffset","setArrowOffset","anchorRect","useRect","content","setContent","contentSize","useSize","arrow","setArrow","arrowSize","node","windowSize","setWindowSize","undefined","debounceTimerId","updateWindowSize","width","window","innerWidth","height","innerHeight","handleResize","clearTimeout","setTimeout","addEventListener","removeEventListener","useWindowSize","collisionBoundariesRect","DOMRect","fromRect","x","y","popperStyles","arrowStyles","placedSide","placedAlign","getPlacementData","popperSize","shouldAvoidCollisions","isPlaced","style","$d4fb2a15a6483a4f85af0f96fd68687d$var$PopperContentProvider","onArrowChange","onArrowOffsetChange","animation","PopperArrow","offset","arrowProps","pointerEvents","display","verticalAlign","_radixUiReactArrow","Root","Anchor","Content","Arrow"],"version":3,"file":"index.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-popper",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,20 +13,18 @@
|
|
|
13
13
|
"sideEffects": false,
|
|
14
14
|
"scripts": {
|
|
15
15
|
"clean": "rm -rf dist",
|
|
16
|
-
"prepublish": "yarn clean",
|
|
17
16
|
"version": "yarn version"
|
|
18
17
|
},
|
|
19
18
|
"dependencies": {
|
|
20
19
|
"@babel/runtime": "^7.13.10",
|
|
21
|
-
"@radix-ui/popper": "0.0
|
|
22
|
-
"@radix-ui/react-arrow": "0.0
|
|
23
|
-
"@radix-ui/react-compose-refs": "0.0
|
|
24
|
-
"@radix-ui/react-context": "0.0
|
|
25
|
-
"@radix-ui/react-
|
|
26
|
-
"@radix-ui/react-
|
|
27
|
-
"@radix-ui/react-use-
|
|
28
|
-
"@radix-ui/
|
|
29
|
-
"@radix-ui/rect": "0.0.5"
|
|
20
|
+
"@radix-ui/popper": "0.1.0",
|
|
21
|
+
"@radix-ui/react-arrow": "0.1.0",
|
|
22
|
+
"@radix-ui/react-compose-refs": "0.1.0",
|
|
23
|
+
"@radix-ui/react-context": "0.1.0",
|
|
24
|
+
"@radix-ui/react-primitive": "0.1.0",
|
|
25
|
+
"@radix-ui/react-use-rect": "0.1.0",
|
|
26
|
+
"@radix-ui/react-use-size": "0.1.0",
|
|
27
|
+
"@radix-ui/rect": "0.1.0"
|
|
30
28
|
},
|
|
31
29
|
"peerDependencies": {
|
|
32
30
|
"react": "^16.8 || ^17.0"
|