@radix-ui/react-popper 0.1.1-rc.7 → 0.1.2-rc.1
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 +6 -2
- 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 +7 -7
package/dist/index.d.ts
CHANGED
|
@@ -4,7 +4,11 @@ import { Primitive } from "@radix-ui/react-primitive";
|
|
|
4
4
|
import * as ArrowPrimitive from "@radix-ui/react-arrow";
|
|
5
5
|
import { Side, Align } from "@radix-ui/popper";
|
|
6
6
|
import { Measurable } from "@radix-ui/rect";
|
|
7
|
-
export const
|
|
7
|
+
export const createPopperScope: import("@radix-ui/react-context").CreateScope;
|
|
8
|
+
export interface PopperProps {
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
export const Popper: React.FC<PopperProps>;
|
|
8
12
|
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
|
|
9
13
|
export interface PopperAnchorProps extends PrimitiveDivProps {
|
|
10
14
|
virtualRef?: React.RefObject<Measurable>;
|
|
@@ -24,7 +28,7 @@ export interface PopperArrowProps extends ArrowProps {
|
|
|
24
28
|
offset?: number;
|
|
25
29
|
}
|
|
26
30
|
export const PopperArrow: React.ForwardRefExoticComponent<PopperArrowProps & React.RefAttributes<SVGSVGElement>>;
|
|
27
|
-
export const Root: React.FC<
|
|
31
|
+
export const Root: React.FC<PopperProps>;
|
|
28
32
|
export const Anchor: React.ForwardRefExoticComponent<PopperAnchorProps & React.RefAttributes<HTMLDivElement>>;
|
|
29
33
|
export const Content: React.ForwardRefExoticComponent<PopperContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
30
34
|
export const Arrow: React.ForwardRefExoticComponent<PopperArrowProps & React.RefAttributes<SVGSVGElement>>;
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"A;A;A;A;A;A;
|
|
1
|
+
{"mappings":"A;A;A;A;A;A;AAqBA,OAAA,wFAAgF,CAAC;AAQjF;IACE,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;CAC5B;AACD,OAAA,MAAM,QAAQ,MAAM,EAAE,CAAC,WAAW,CAQjC,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,wGAqEL,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,2BAAa,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=
|
|
1
|
+
var e,r=l({},require("@radix-ui/react-arrow")),t=require("@radix-ui/react-primitive").Primitive,o=require("@radix-ui/react-use-size").useSize,n=require("@radix-ui/react-use-rect").useRect,i=require("@radix-ui/react-context").createContextScope,s=require("@radix-ui/react-compose-refs").useComposedRefs,a=require("@radix-ui/popper").getPlacementData,c=l({},require("react")),p=(e=require("@babel/runtime/helpers/extends"))&&e.__esModule?e.default:e;function l(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[u,d]=i("Popper");exports.createPopperScope=d;const[f,w]=u("Popper"),h=e=>{const{__scopePopper:r,children:t}=e,[o,n]=c.useState(null);/*#__PURE__*/return c.createElement(f,{scope:r,anchor:o,onAnchorChange:n},t)};exports.Popper=h;const m=/*#__PURE__*/c.forwardRef(((e,r)=>{const{__scopePopper:o,virtualRef:n,...i}=e,a=w("PopperAnchor",o),l=c.useRef(null),u=s(r,l);return c.useEffect((()=>{a.onAnchorChange((null==n?void 0:n.current)||l.current)})),n?null:/*#__PURE__*/c.createElement(t.div,p({},i,{ref:u}))}));exports.PopperAnchor=m;const[x,v]=u("PopperContent"),P=/*#__PURE__*/c.forwardRef(((e,r)=>{const{__scopePopper:i,side:l="bottom",sideOffset:u,align:d="center",alignOffset:f,collisionTolerance:h,avoidCollisions:m=!0,...v}=e,P=w("PopperContent",i),[g,y]=c.useState(),E=n(P.anchor),[A,S]=c.useState(null),C=o(A),[R,_]=c.useState(null),O=o(R),q=s(r,(e=>S(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 o(){window.clearTimeout(e),e=window.setTimeout(t,100)}return t(),window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)}),[]),e}(),z=b?DOMRect.fromRect({...b,x:0,y:0}):void 0,{popperStyles:T,arrowStyles:k,placedSide:M,placedAlign:j}=a({anchorRect:E,popperSize:C,arrowSize:O,arrowOffset:g,side:l,sideOffset:u,align:d,alignOffset:f,shouldAvoidCollisions:m,collisionBoundariesRect:z,collisionTolerance:h}),D=void 0!==M;/*#__PURE__*/return c.createElement("div",{style:T,"data-radix-popper-content-wrapper":""},/*#__PURE__*/c.createElement(x,{scope:i,arrowStyles:k,onArrowChange:_,onArrowOffsetChange:y},/*#__PURE__*/c.createElement(t.div,p({"data-side":M,"data-align":j},v,{style:{...v.style,animation:D?void 0:"none"},ref:q}))))}));exports.PopperContent=P;const g=/*#__PURE__*/c.forwardRef((function(e,t){const{__scopePopper:o,offset:n,...i}=e,s=v("PopperArrow",o),{onArrowOffsetChange:a}=s;return c.useEffect((()=>a(n)),[a,n]),/*#__PURE__*/c.createElement("span",{style:{...s.arrowStyles,pointerEvents:"none"}},/*#__PURE__*/c.createElement("span",{ref:s.onArrowChange,style:{display:"inline-block",verticalAlign:"top",pointerEvents:"auto"}},/*#__PURE__*/c.createElement(r.Root,p({},i,{ref:t,style:{...i.style,display:"block"}}))))}));exports.PopperArrow=g;const y=h;exports.Root=y;const E=m;exports.Anchor=E;const A=P;exports.Content=A;const S=g;exports.Arrow=S;
|
|
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 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"}
|
|
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 { createContextScope } 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 { Scope } from '@radix-ui/react-context';\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 ScopedProps<P> = P & { __scopePopper?: Scope };\nconst [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);\n\ntype PopperContextValue = {\n anchor: Measurable | null;\n onAnchorChange(anchor: Measurable | null): void;\n};\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME);\n\ninterface PopperProps {\n children?: React.ReactNode;\n}\nconst Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n const { __scopePopper, children } = props;\n const [anchor, setAnchor] = React.useState<Measurable | null>(null);\n return (\n <PopperProvider scope={__scopePopper} 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: ScopedProps<PopperAnchorProps>, forwardedRef) => {\n const { __scopePopper, virtualRef, ...anchorProps } = props;\n const context = usePopperContext(ANCHOR_NAME, __scopePopper);\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 createPopperContext<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: ScopedProps<PopperContentProps>, forwardedRef) => {\n const {\n __scopePopper,\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, __scopePopper);\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 scope={__scopePopper}\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: ScopedProps<PopperArrowProps>,\n forwardedRef\n) {\n const { __scopePopper, offset, ...arrowProps } = props;\n const context = useContentContext(ARROW_NAME, __scopePopper);\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 createPopperScope,\n //\n Popper,\n PopperAnchor,\n PopperContent,\n PopperArrow,\n //\n Root,\n Anchor,\n Content,\n Arrow,\n};\nexport type { PopperProps, PopperAnchorProps, PopperContentProps, PopperArrowProps };\n"],"names":["a","__esModule","default","$parcel$exportWildcard","dest","source","Object","keys","forEach","key","defineProperty","enumerable","get","createPopperContext","createPopperScope","createContextScope","PopperProvider","usePopperContext","Popper","props","__scopePopper","children","anchor","setAnchor","React","useState","_react","createElement","$be5d7b5e9bdca855ae0500ff2a345d73$var$PopperProvider","scope","onAnchorChange","PopperAnchor","forwardRef","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
|
|
1
|
+
import*as e from"@radix-ui/react-arrow";import{Primitive as o}from"@radix-ui/react-primitive";import{useSize as r}from"@radix-ui/react-use-size";import{useRect as t}from"@radix-ui/react-use-rect";import{createContextScope as n}from"@radix-ui/react-context";import{useComposedRefs as i}from"@radix-ui/react-compose-refs";import{getPlacementData as p}from"@radix-ui/popper";import*as s from"react";import a from"@babel/runtime/helpers/esm/extends";const[c,l]=n("Popper");export{l as createPopperScope};const[f,d]=c("Popper");export const Popper=e=>{const{__scopePopper:o,children:r}=e,[t,n]=s.useState(null);/*#__PURE__*/return s.createElement(f,{scope:o,anchor:t,onAnchorChange:n},r)};/*#__PURE__*/export const PopperAnchor=/*#__PURE__*/s.forwardRef(((e,r)=>{const{__scopePopper:t,virtualRef:n,...p}=e,c=d("PopperAnchor",t),l=s.useRef(null),f=i(r,l);return s.useEffect((()=>{c.onAnchorChange((null==n?void 0:n.current)||l.current)})),n?null:/*#__PURE__*/s.createElement(o.div,a({},p,{ref:f}))}));/*#__PURE__*/const[u,m]=c("PopperContent");export const PopperContent=/*#__PURE__*/s.forwardRef(((e,n)=>{const{__scopePopper:c,side:l="bottom",sideOffset:f,align:m="center",alignOffset:w,collisionTolerance:h,avoidCollisions:x=!0,...v}=e,P=d("PopperContent",c),[A,g]=s.useState(),E=t(P.anchor),[y,C]=s.useState(null),S=r(y),[R,O]=s.useState(null),_=r(R),b=i(n,(e=>C(e))),z=function(){const[e,o]=s.useState(void 0);return s.useEffect((()=>{let e;function r(){o({width:window.innerWidth,height:window.innerHeight})}function t(){window.clearTimeout(e),e=window.setTimeout(r,100)}return r(),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}=p({anchorRect:E,popperSize:S,arrowSize:_,arrowOffset:A,side:l,sideOffset:f,align:m,alignOffset:w,shouldAvoidCollisions:x,collisionBoundariesRect:T,collisionTolerance:h}),H=void 0!==B;/*#__PURE__*/return s.createElement("div",{style:k,"data-radix-popper-content-wrapper":""},/*#__PURE__*/s.createElement(u,{scope:c,arrowStyles:L,onArrowChange:O,onArrowOffsetChange:g},/*#__PURE__*/s.createElement(o.div,a({"data-side":B,"data-align":D},v,{style:{...v.style,animation:H?void 0:"none"},ref:b}))))}));/*#__PURE__*/export const PopperArrow=/*#__PURE__*/s.forwardRef((function(o,r){const{__scopePopper:t,offset:n,...i}=o,p=m("PopperArrow",t),{onArrowOffsetChange:c}=p;return s.useEffect((()=>c(n)),[c,n]),/*#__PURE__*/s.createElement("span",{style:{...p.arrowStyles,pointerEvents:"none"}},/*#__PURE__*/s.createElement("span",{ref:p.onArrowChange,style:{display:"inline-block",verticalAlign:"top",pointerEvents:"auto"}},/*#__PURE__*/s.createElement(e.Root,a({},i,{ref:r,style:{...i.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":"ybAiBA,MAMOA,EAAgBC,GAAoBC,EANvB,iBAQpB,MAAMC,OAAmB,EAAGC,SAAAA,MAC1B,MAAOC,EAAQC,GAAaC,EAAMC,SAA4B,mBAC9D,OACEC,EAAAC,cAACC,EAAD,CAAgBN,OAAQA,EAAQO,eAAgBN,GAC7CF,wBAmBP,MAAMS,0BAAeN,EAAMO,YACzB,CAACC,EAAOC,KACN,MAAMC,WAAEA,KAAeC,GAAgBH,EACjCI,EAAUlB,EAXA,gBAYVmB,EAAMb,EAAMc,OAA4B,MACxCC,EAAeC,EAAgBP,EAAcI,GASnD,OAPAb,EAAMiB,WAAU,KAIdL,EAAQP,gBAAeK,MAAAA,OAAA,EAAAA,EAAYQ,UAAWL,EAAIK,YAG7CR,EAAa,kBAAOR,EAAAC,cAACgB,EAAUC,IAAXC,EAAA,GAAmBV,EAAnB,CAAgCE,IAAKE,qBAUpE,MAQOO,EAAuBC,GAC5B5B,EATmB,wBAqBrB,MAAM6B,2BAAgBxB,EAAMO,YAC1B,CAACC,EAAOC,KACN,MAAMgB,KACJA,EAAO,SADHC,WAEJA,EAFIC,MAGJA,EAAQ,SAHJC,YAIJA,EAJIC,mBAKJA,EALIC,gBAMJA,GAAkB,KACfC,GACDvB,EAEEI,EAAUlB,EAjCC,kBAkCVsC,EAAaC,GAAkBjC,EAAMC,WACtCiC,EAAaC,EAAQvB,EAAQd,SAC5BsC,EAASC,GAAcrC,EAAMC,SAAgC,MAC9DqC,EAAcC,EAAQH,IACrBI,EAAOC,GAAYzC,EAAMC,SAAiC,MAC3DyC,EAAYH,EAAQC,GAEpBzB,EAAeC,EAAgBP,GAAekC,GAASN,EAAWM,KAElEC,EAyGV,WACE,MAAOA,EAAYC,GAAiB7C,EAAMC,cACxC6C,GAoBF,OAjBA9C,EAAMiB,WAAU,KACd,IAAI8B,EAEJ,SAASC,IACPH,EAAc,CAAEI,MAAOC,OAAOC,WAAYC,OAAQF,OAAOG,cAG3D,SAASC,IACPJ,OAAOK,aAAaR,GACpBA,EAAkBG,OAAOM,WAAWR,EAhBA,KAqBtC,OAFAA,IACAE,OAAOO,iBAAiB,SAAUH,GAC3B,IAAMJ,OAAOQ,oBAAoB,SAAUJ,KACjD,IAEIV,EA/Hce,GACbC,EAA0BhB,EAC5BiB,QAAQC,SAAS,IAAKlB,EAAYmB,EAAG,EAAGC,EAAG,SAC3ClB,GAEEmB,aAAEA,EAAFC,YAAgBA,EAAhBC,WAA6BA,EAA7BC,YAAyCA,GAAgBC,EAAiB,CAC9EnC,WAAAA,EACAoC,WAAYhC,EACZI,UAAAA,EAGAV,YAAAA,EACAP,KAAAA,EACAC,WAAAA,EACAC,MAAAA,EACAC,YAAAA,EACA2C,sBAAuBzC,EACvB8B,wBAAAA,EACA/B,mBAAAA,IAEI2C,OAA0B1B,IAAfqB,eAEjB,OACEjE,EAAAC,cAAA,MAAA,CAAKsE,MAAOR,EAAc,oCAAkC,iBAC1D/D,EAAAC,cAACuE,EAAD,CACER,YAAaA,EACbS,cAAelC,EACfmC,oBAAqB3C,gBAErB/B,EAAAC,cAACgB,EAAUC,IAAXC,EAAA,CACE,YAAW8C,EACX,aAAYC,GACRrC,EAHN,CAIE0C,MAAO,IACF1C,EAAa0C,MAGhBI,UAAYL,OAAoB1B,EAAT,QAEzBjC,IAAKE,8BAsBjB,MAAM+D,yBAAc9E,EAAMO,YAAiD,SACzEC,EACAC,GAEA,MAAMsE,OAAEA,KAAWC,GAAexE,EAC5BI,EAAUW,EAbC,gBAcXqD,oBAAEA,GAAwBhE,EAKhC,OAFAZ,EAAMiB,WAAU,IAAM2D,EAAoBG,IAAS,CAACH,EAAqBG,iBAGvE7E,EAAAC,cAAA,OAAA,CAAMsE,MAAO,IAAK7D,EAAQsD,YAAae,cAAe,sBACpD/E,EAAAC,cAAA,OAAA,CAIEU,IAAKD,EAAQ+D,cACbF,MAAO,CACLS,QAAS,eACTC,cAAe,MACfF,cAAe,sBAGjB/E,EAAAC,cAACiF,EAAeC,KAAhBhE,EAAA,GACM2D,EADN,CAEEnE,IAAKJ,EACLgE,MAAO,IACFO,EAAWP,MAEdS,QAAS,qCAuCrB,MAAMG,KAAOzF,cACb,MAAM0F,OAAShF,oBACf,MAAMiF,QAAU/D,qBAChB,MAAMgE,MAAQV","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"}
|
|
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 { createContextScope } 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 { Scope } from '@radix-ui/react-context';\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 ScopedProps<P> = P & { __scopePopper?: Scope };\nconst [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);\n\ntype PopperContextValue = {\n anchor: Measurable | null;\n onAnchorChange(anchor: Measurable | null): void;\n};\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME);\n\ninterface PopperProps {\n children?: React.ReactNode;\n}\nconst Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n const { __scopePopper, children } = props;\n const [anchor, setAnchor] = React.useState<Measurable | null>(null);\n return (\n <PopperProvider scope={__scopePopper} 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: ScopedProps<PopperAnchorProps>, forwardedRef) => {\n const { __scopePopper, virtualRef, ...anchorProps } = props;\n const context = usePopperContext(ANCHOR_NAME, __scopePopper);\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 createPopperContext<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: ScopedProps<PopperContentProps>, forwardedRef) => {\n const {\n __scopePopper,\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, __scopePopper);\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 scope={__scopePopper}\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: ScopedProps<PopperArrowProps>,\n forwardedRef\n) {\n const { __scopePopper, offset, ...arrowProps } = props;\n const context = useContentContext(ARROW_NAME, __scopePopper);\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 createPopperScope,\n //\n Popper,\n PopperAnchor,\n PopperContent,\n PopperArrow,\n //\n Root,\n Anchor,\n Content,\n Arrow,\n};\nexport type { PopperProps, PopperAnchorProps, PopperContentProps, PopperArrowProps };\n"],"names":["createPopperContext","createPopperScope","createContextScope","PopperProvider","usePopperContext","Popper","props","__scopePopper","children","anchor","setAnchor","React","useState","_react","createElement","$d4fb2a15a6483a4f85af0f96fd68687d$var$PopperProvider","scope","onAnchorChange","PopperAnchor","forwardRef","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.1.
|
|
3
|
+
"version": "0.1.2-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@babel/runtime": "^7.13.10",
|
|
20
20
|
"@radix-ui/popper": "0.1.0",
|
|
21
|
-
"@radix-ui/react-arrow": "0.1.
|
|
21
|
+
"@radix-ui/react-arrow": "0.1.2-rc.1",
|
|
22
22
|
"@radix-ui/react-compose-refs": "0.1.0",
|
|
23
|
-
"@radix-ui/react-context": "0.1.
|
|
24
|
-
"@radix-ui/react-primitive": "0.1.
|
|
25
|
-
"@radix-ui/react-use-rect": "0.1.
|
|
23
|
+
"@radix-ui/react-context": "0.1.1",
|
|
24
|
+
"@radix-ui/react-primitive": "0.1.2-rc.1",
|
|
25
|
+
"@radix-ui/react-use-rect": "0.1.1",
|
|
26
26
|
"@radix-ui/react-use-size": "0.1.0",
|
|
27
|
-
"@radix-ui/rect": "0.1.
|
|
27
|
+
"@radix-ui/rect": "0.1.1"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"react": "^16.8 || ^17.0"
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"bugs": {
|
|
38
38
|
"url": "https://github.com/radix-ui/primitives/issues"
|
|
39
39
|
},
|
|
40
|
-
"stableVersion": "0.1.
|
|
40
|
+
"stableVersion": "0.1.1"
|
|
41
41
|
}
|