@fluentui/react-positioning 9.3.0 → 9.3.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +57 -1
- package/CHANGELOG.md +23 -2
- package/lib/constants.js.map +1 -1
- package/lib/createArrowStyles.js.map +1 -1
- package/lib/createPositionManager.js.map +1 -1
- package/lib/createVirtualElementFromClick.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/middleware/coverTarget.js.map +1 -1
- package/lib/middleware/flip.js.map +1 -1
- package/lib/middleware/index.js.map +1 -1
- package/lib/middleware/intersecting.js.map +1 -1
- package/lib/middleware/maxSize.js.map +1 -1
- package/lib/middleware/offset.js.map +1 -1
- package/lib/middleware/shift.js.map +1 -1
- package/lib/types.js.map +1 -1
- package/lib/usePositioning.js.map +1 -1
- package/lib/usePositioningMouseTarget.js.map +1 -1
- package/lib/utils/debounce.js.map +1 -1
- package/lib/utils/fromFloatingUIPlacement.js.map +1 -1
- package/lib/utils/getBoundary.js.map +1 -1
- package/lib/utils/getFloatingUIOffset.js.map +1 -1
- package/lib/utils/getReactFiberFromNode.js.map +1 -1
- package/lib/utils/getScrollParent.js.map +1 -1
- package/lib/utils/hasAutoFocusFilter.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/parseFloatingUIPlacement.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib/utils/toFloatingUIPlacement.js.map +1 -1
- package/lib/utils/toggleScrollListener.js.map +1 -1
- package/lib/utils/useCallbackRef.js.map +1 -1
- package/lib/utils/writeArrowUpdates.js.map +1 -1
- package/lib/utils/writeContainerupdates.js.map +1 -1
- package/lib-amd/constants.js +10 -0
- package/lib-amd/constants.js.map +1 -0
- package/lib-amd/createArrowStyles.js +62 -0
- package/lib-amd/createArrowStyles.js.map +1 -0
- package/lib-amd/createPositionManager.js +85 -0
- package/lib-amd/createPositionManager.js.map +1 -0
- package/lib-amd/createVirtualElementFromClick.js +32 -0
- package/lib-amd/createVirtualElementFromClick.js.map +1 -0
- package/lib-amd/index.js +13 -0
- package/lib-amd/index.js.map +1 -0
- package/lib-amd/middleware/coverTarget.js +32 -0
- package/lib-amd/middleware/coverTarget.js.map +1 -0
- package/lib-amd/middleware/flip.js +11 -0
- package/lib-amd/middleware/flip.js.map +1 -0
- package/lib-amd/middleware/index.js +11 -0
- package/lib-amd/middleware/index.js.map +1 -0
- package/lib-amd/middleware/intersecting.js +33 -0
- package/lib-amd/middleware/intersecting.js.map +1 -0
- package/lib-amd/middleware/maxSize.js +43 -0
- package/lib-amd/middleware/maxSize.js.map +1 -0
- package/lib-amd/middleware/offset.js +14 -0
- package/lib-amd/middleware/offset.js.map +1 -0
- package/lib-amd/middleware/shift.js +17 -0
- package/lib-amd/middleware/shift.js.map +1 -0
- package/lib-amd/types.js +5 -0
- package/lib-amd/types.js.map +1 -0
- package/lib-amd/usePositioning.js +152 -0
- package/lib-amd/usePositioning.js.map +1 -0
- package/lib-amd/usePositioningMouseTarget.js +39 -0
- package/lib-amd/usePositioningMouseTarget.js.map +1 -0
- package/lib-amd/utils/debounce.js +27 -0
- package/lib-amd/utils/debounce.js.map +1 -0
- package/lib-amd/utils/fromFloatingUIPlacement.js +37 -0
- package/lib-amd/utils/fromFloatingUIPlacement.js.map +1 -0
- package/lib-amd/utils/getBoundary.js +26 -0
- package/lib-amd/utils/getBoundary.js.map +1 -0
- package/lib-amd/utils/getFloatingUIOffset.js +25 -0
- package/lib-amd/utils/getFloatingUIOffset.js.map +1 -0
- package/lib-amd/utils/getReactFiberFromNode.js +48 -0
- package/lib-amd/utils/getReactFiberFromNode.js.map +1 -0
- package/lib-amd/utils/getScrollParent.js +64 -0
- package/lib-amd/utils/getScrollParent.js.map +1 -0
- package/lib-amd/utils/hasAutoFocusFilter.js +31 -0
- package/lib-amd/utils/hasAutoFocusFilter.js.map +1 -0
- package/lib-amd/utils/index.js +19 -0
- package/lib-amd/utils/index.js.map +1 -0
- package/lib-amd/utils/mergeArrowOffset.js +38 -0
- package/lib-amd/utils/mergeArrowOffset.js.map +1 -0
- package/lib-amd/utils/parseFloatingUIPlacement.js +20 -0
- package/lib-amd/utils/parseFloatingUIPlacement.js.map +1 -0
- package/lib-amd/utils/resolvePositioningShorthand.js +31 -0
- package/lib-amd/utils/resolvePositioningShorthand.js.map +1 -0
- package/lib-amd/utils/toFloatingUIPlacement.js +40 -0
- package/lib-amd/utils/toFloatingUIPlacement.js.map +1 -0
- package/lib-amd/utils/toggleScrollListener.js +26 -0
- package/lib-amd/utils/toggleScrollListener.js.map +1 -0
- package/lib-amd/utils/useCallbackRef.js +55 -0
- package/lib-amd/utils/useCallbackRef.js.map +1 -0
- package/lib-amd/utils/writeArrowUpdates.js +21 -0
- package/lib-amd/utils/writeArrowUpdates.js.map +1 -0
- package/lib-amd/utils/writeContainerupdates.js +34 -0
- package/lib-amd/utils/writeContainerupdates.js.map +1 -0
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/createArrowStyles.js.map +1 -1
- package/lib-commonjs/createPositionManager.js.map +1 -1
- package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/middleware/coverTarget.js.map +1 -1
- package/lib-commonjs/middleware/flip.js.map +1 -1
- package/lib-commonjs/middleware/index.js.map +1 -1
- package/lib-commonjs/middleware/intersecting.js.map +1 -1
- package/lib-commonjs/middleware/maxSize.js.map +1 -1
- package/lib-commonjs/middleware/offset.js.map +1 -1
- package/lib-commonjs/middleware/shift.js.map +1 -1
- package/lib-commonjs/usePositioning.js.map +1 -1
- package/lib-commonjs/usePositioningMouseTarget.js.map +1 -1
- package/lib-commonjs/utils/debounce.js.map +1 -1
- package/lib-commonjs/utils/fromFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/getBoundary.js.map +1 -1
- package/lib-commonjs/utils/getFloatingUIOffset.js.map +1 -1
- package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
- package/lib-commonjs/utils/getScrollParent.js.map +1 -1
- package/lib-commonjs/utils/hasAutoFocusFilter.js.map +1 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/parseFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib-commonjs/utils/toFloatingUIPlacement.js.map +1 -1
- package/lib-commonjs/utils/toggleScrollListener.js.map +1 -1
- package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
- package/lib-commonjs/utils/writeArrowUpdates.js.map +1 -1
- package/lib-commonjs/utils/writeContainerupdates.js.map +1 -1
- package/package.json +10 -10
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["utils/resolvePositioningShorthand.ts"],"names":[],"mappings":"AAEA;AACA,MAAM,eAAe,GAAoF;EACvG,KAAK,EAAE;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CADgG;EAEvG,eAAe;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAFwF;EAGvG,aAAa;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAH0F;EAIvG,KAAK,EAAE;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAJgG;EAKvG,eAAe;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CALwF;EAMvG,aAAa;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAN0F;EAOvG,MAAM,EAAE;IAAE,QAAQ,EAAE,QAAZ;IAAsB,KAAK,EAAE;EAA7B,CAP+F;EAQvG,cAAc;IAAE,QAAQ,EAAE,QAAZ;IAAsB,KAAK,EAAE;EAA7B,CARyF;EASvG,iBAAiB;IAAE,QAAQ,EAAE,QAAZ;IAAsB,KAAK,EAAE;EAA7B,CATsF;EAUvG,KAAK,EAAE;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAVgG;EAWvG,aAAa;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAX0F;EAYvG,gBAAgB;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B;AAZuF,CAAzG;AAeA,OAAM,SAAU,2BAAV,CACJ,SADI,EAC8C;EAElD,IAAI,SAAS,KAAK,SAAd,IAA2B,SAAS,KAAK,IAA7C,EAAmD;IACjD,OAAO,EAAP;EACD;;EAED,IAAI,OAAO,SAAP,KAAqB,QAAzB,EAAmC;IACjC,OAAO,eAAe,CAAC,SAAD,CAAtB;EACD;;EAED,OAAO,SAAP;AACD","sourcesContent":["import type { PositioningShorthand, PositioningShorthandValue, PositioningProps } from '../types';\n\n// Look up table for shorthand to avoid parsing strings\nconst shorthandLookup: Record<PositioningShorthandValue, Pick<PositioningProps, 'position' | 'align'>> = {\n above: { position: 'above', align: 'center' },\n 'above-start': { position: 'above', align: 'start' },\n 'above-end': { position: 'above', align: 'end' },\n below: { position: 'below', align: 'center' },\n 'below-start': { position: 'below', align: 'start' },\n 'below-end': { position: 'below', align: 'end' },\n before: { position: 'before', align: 'center' },\n 'before-top': { position: 'before', align: 'top' },\n 'before-bottom': { position: 'before', align: 'bottom' },\n after: { position: 'after', align: 'center' },\n 'after-top': { position: 'after', align: 'top' },\n 'after-bottom': { position: 'after', align: 'bottom' },\n};\n\nexport function resolvePositioningShorthand(\n shorthand: PositioningShorthand | undefined | null,\n): Readonly<PositioningProps> {\n if (shorthand === undefined || shorthand === null) {\n return {};\n }\n\n if (typeof shorthand === 'string') {\n return shorthandLookup[shorthand];\n }\n\n return shorthand as Readonly<PositioningProps>;\n}\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-positioning/src/utils/resolvePositioningShorthand.ts"],"names":[],"mappings":"AAEA;AACA,MAAM,eAAe,GAAoF;EACvG,KAAK,EAAE;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CADgG;EAEvG,eAAe;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAFwF;EAGvG,aAAa;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAH0F;EAIvG,KAAK,EAAE;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAJgG;EAKvG,eAAe;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CALwF;EAMvG,aAAa;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAN0F;EAOvG,MAAM,EAAE;IAAE,QAAQ,EAAE,QAAZ;IAAsB,KAAK,EAAE;EAA7B,CAP+F;EAQvG,cAAc;IAAE,QAAQ,EAAE,QAAZ;IAAsB,KAAK,EAAE;EAA7B,CARyF;EASvG,iBAAiB;IAAE,QAAQ,EAAE,QAAZ;IAAsB,KAAK,EAAE;EAA7B,CATsF;EAUvG,KAAK,EAAE;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAVgG;EAWvG,aAAa;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B,CAX0F;EAYvG,gBAAgB;IAAE,QAAQ,EAAE,OAAZ;IAAqB,KAAK,EAAE;EAA5B;AAZuF,CAAzG;AAeA,OAAM,SAAU,2BAAV,CACJ,SADI,EAC8C;EAElD,IAAI,SAAS,KAAK,SAAd,IAA2B,SAAS,KAAK,IAA7C,EAAmD;IACjD,OAAO,EAAP;EACD;;EAED,IAAI,OAAO,SAAP,KAAqB,QAAzB,EAAmC;IACjC,OAAO,eAAe,CAAC,SAAD,CAAtB;EACD;;EAED,OAAO,SAAP;AACD","sourcesContent":["import type { PositioningShorthand, PositioningShorthandValue, PositioningProps } from '../types';\n\n// Look up table for shorthand to avoid parsing strings\nconst shorthandLookup: Record<PositioningShorthandValue, Pick<PositioningProps, 'position' | 'align'>> = {\n above: { position: 'above', align: 'center' },\n 'above-start': { position: 'above', align: 'start' },\n 'above-end': { position: 'above', align: 'end' },\n below: { position: 'below', align: 'center' },\n 'below-start': { position: 'below', align: 'start' },\n 'below-end': { position: 'below', align: 'end' },\n before: { position: 'before', align: 'center' },\n 'before-top': { position: 'before', align: 'top' },\n 'before-bottom': { position: 'before', align: 'bottom' },\n after: { position: 'after', align: 'center' },\n 'after-top': { position: 'after', align: 'top' },\n 'after-bottom': { position: 'after', align: 'bottom' },\n};\n\nexport function resolvePositioningShorthand(\n shorthand: PositioningShorthand | undefined | null,\n): Readonly<PositioningProps> {\n if (shorthand === undefined || shorthand === null) {\n return {};\n }\n\n if (typeof shorthand === 'string') {\n return shorthandLookup[shorthand];\n }\n\n return shorthand as Readonly<PositioningProps>;\n}\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["utils/toFloatingUIPlacement.ts"],"names":[],"mappings":"AAMA,MAAM,cAAc,GAAI,GAAD,KAAyD;EAC9E,KAAK,EAAE,KADuE;EAE9E,KAAK,EAAE,QAFuE;EAG9E,MAAM,EAAE,GAAG,GAAG,OAAH,GAAa,MAHsD;EAI9E,KAAK,EAAE,GAAG,GAAG,MAAH,GAAY;AAJwD,CAAzD,CAAvB,C,CAOA;AACA;;;AACA,MAAM,eAAe,GAAG,OAAsD;EAC5E,KAAK,EAAE,OADqE;EAE5E,GAAG,EAAE,KAFuE;EAG5E,GAAG,EAAE,OAHuE;EAI5E,MAAM,EAAE,KAJoE;EAK5E,MAAM,EAAE;AALoE,CAAtD,CAAxB;;AAQA,MAAM,mBAAmB,GAAG,CAAC,CAAD,EAAe,CAAf,KAAyC;EACnE,MAAM,oBAAoB,GAAG,CAAC,KAAK,OAAN,IAAiB,CAAC,KAAK,OAApD;EACA,MAAM,iBAAiB,GAAG,CAAC,KAAK,KAAN,IAAe,CAAC,KAAK,QAA/C;EAEA,OAAQ,oBAAoB,IAAI,iBAAzB,IAAgD,CAAC,oBAAD,IAAyB,CAAC,iBAAjF;AACD,CALD;AAOA;;;AAGG;;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAoB,QAApB,EAAyC,GAAzC,KAAiF;EACpH,MAAM,SAAS,GAAG,mBAAmB,CAAC,QAAD,EAAW,KAAX,CAAnB,GAAuC,QAAvC,GAAkD,KAApE;EAEA,MAAM,gBAAgB,GAAG,QAAQ,IAAI,cAAc,CAAC,GAAD,CAAd,CAAoB,QAApB,CAArC;EACA,MAAM,iBAAiB,GAAG,SAAS,IAAI,eAAe,GAAG,SAAH,CAAtD;;EAEA,IAAI,gBAAgB,IAAI,iBAAxB,EAA2C;IACzC,OAAO,GAAG,gBAAgB,IAAI,iBAAiB,EAA/C;EACD;;EAED,OAAO,gBAAP;AACD,CAXM","sourcesContent":["import type { Placement, Side, Alignment as FloatingUIAlignment } from '@floating-ui/dom';\nimport type { Alignment, Position } from '../types';\n\ntype PlacementPosition = Side;\ntype PlacementAlign = FloatingUIAlignment;\n\nconst getPositionMap = (rtl?: boolean): Record<Position, PlacementPosition> => ({\n above: 'top',\n below: 'bottom',\n before: rtl ? 'right' : 'left',\n after: rtl ? 'left' : 'right',\n});\n\n// Floating UI automatically flips alignment\n// https://github.com/floating-ui/floating-ui/issues/1563\nconst getAlignmentMap = (): Record<Alignment, PlacementAlign | undefined> => ({\n start: 'start',\n end: 'end',\n top: 'start',\n bottom: 'end',\n center: undefined,\n});\n\nconst shouldAlignToCenter = (p?: Position, a?: Alignment): boolean => {\n const positionedVertically = p === 'above' || p === 'below';\n const alignedVertically = a === 'top' || a === 'bottom';\n\n return (positionedVertically && alignedVertically) || (!positionedVertically && !alignedVertically);\n};\n\n/**\n * Maps internal positioning values to Floating UI placement\n * @see positioningHelper.test.ts for expected placement values\n */\nexport const toFloatingUIPlacement = (align?: Alignment, position?: Position, rtl?: boolean): Placement | undefined => {\n const alignment = shouldAlignToCenter(position, align) ? 'center' : align;\n\n const computedPosition = position && getPositionMap(rtl)[position];\n const computedAlignment = alignment && getAlignmentMap()[alignment];\n\n if (computedPosition && computedAlignment) {\n return `${computedPosition}-${computedAlignment}` as Placement;\n }\n\n return computedPosition;\n};\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-positioning/src/utils/toFloatingUIPlacement.ts"],"names":[],"mappings":"AAMA,MAAM,cAAc,GAAI,GAAD,KAAyD;EAC9E,KAAK,EAAE,KADuE;EAE9E,KAAK,EAAE,QAFuE;EAG9E,MAAM,EAAE,GAAG,GAAG,OAAH,GAAa,MAHsD;EAI9E,KAAK,EAAE,GAAG,GAAG,MAAH,GAAY;AAJwD,CAAzD,CAAvB,C,CAOA;AACA;;;AACA,MAAM,eAAe,GAAG,OAAsD;EAC5E,KAAK,EAAE,OADqE;EAE5E,GAAG,EAAE,KAFuE;EAG5E,GAAG,EAAE,OAHuE;EAI5E,MAAM,EAAE,KAJoE;EAK5E,MAAM,EAAE;AALoE,CAAtD,CAAxB;;AAQA,MAAM,mBAAmB,GAAG,CAAC,CAAD,EAAe,CAAf,KAAyC;EACnE,MAAM,oBAAoB,GAAG,CAAC,KAAK,OAAN,IAAiB,CAAC,KAAK,OAApD;EACA,MAAM,iBAAiB,GAAG,CAAC,KAAK,KAAN,IAAe,CAAC,KAAK,QAA/C;EAEA,OAAQ,oBAAoB,IAAI,iBAAzB,IAAgD,CAAC,oBAAD,IAAyB,CAAC,iBAAjF;AACD,CALD;AAOA;;;AAGG;;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAoB,QAApB,EAAyC,GAAzC,KAAiF;EACpH,MAAM,SAAS,GAAG,mBAAmB,CAAC,QAAD,EAAW,KAAX,CAAnB,GAAuC,QAAvC,GAAkD,KAApE;EAEA,MAAM,gBAAgB,GAAG,QAAQ,IAAI,cAAc,CAAC,GAAD,CAAd,CAAoB,QAApB,CAArC;EACA,MAAM,iBAAiB,GAAG,SAAS,IAAI,eAAe,GAAG,SAAH,CAAtD;;EAEA,IAAI,gBAAgB,IAAI,iBAAxB,EAA2C;IACzC,OAAO,GAAG,gBAAgB,IAAI,iBAAiB,EAA/C;EACD;;EAED,OAAO,gBAAP;AACD,CAXM","sourcesContent":["import type { Placement, Side, Alignment as FloatingUIAlignment } from '@floating-ui/dom';\nimport type { Alignment, Position } from '../types';\n\ntype PlacementPosition = Side;\ntype PlacementAlign = FloatingUIAlignment;\n\nconst getPositionMap = (rtl?: boolean): Record<Position, PlacementPosition> => ({\n above: 'top',\n below: 'bottom',\n before: rtl ? 'right' : 'left',\n after: rtl ? 'left' : 'right',\n});\n\n// Floating UI automatically flips alignment\n// https://github.com/floating-ui/floating-ui/issues/1563\nconst getAlignmentMap = (): Record<Alignment, PlacementAlign | undefined> => ({\n start: 'start',\n end: 'end',\n top: 'start',\n bottom: 'end',\n center: undefined,\n});\n\nconst shouldAlignToCenter = (p?: Position, a?: Alignment): boolean => {\n const positionedVertically = p === 'above' || p === 'below';\n const alignedVertically = a === 'top' || a === 'bottom';\n\n return (positionedVertically && alignedVertically) || (!positionedVertically && !alignedVertically);\n};\n\n/**\n * Maps internal positioning values to Floating UI placement\n * @see positioningHelper.test.ts for expected placement values\n */\nexport const toFloatingUIPlacement = (align?: Alignment, position?: Position, rtl?: boolean): Placement | undefined => {\n const alignment = shouldAlignToCenter(position, align) ? 'center' : align;\n\n const computedPosition = position && getPositionMap(rtl)[position];\n const computedAlignment = alignment && getAlignmentMap()[alignment];\n\n if (computedPosition && computedAlignment) {\n return `${computedPosition}-${computedAlignment}` as Placement;\n }\n\n return computedPosition;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["utils/toggleScrollListener.ts"],"names":[],"mappings":"AACA,SAAS,eAAT,QAAgC,mBAAhC;AAEA;;;;;AAKG;;AACH,OAAM,SAAU,oBAAV,CACJ,IADI,EAEJ,IAFI,EAGJ,OAHI,EAGkB;EAEtB,IAAI,IAAI,KAAK,IAAb,EAAmB;IACjB;EACD;;EAED,IAAI,IAAI,YAAY,WAApB,EAAiC;IAC/B,MAAM,gBAAgB,GAAG,eAAe,CAAC,IAAD,CAAxC;IACA,gBAAgB,CAAC,mBAAjB,CAAqC,QAArC,EAA+C,OAA/C;EACD;;EACD,IAAI,IAAI,YAAY,WAApB,EAAiC;IAC/B,MAAM,YAAY,GAAG,eAAe,CAAC,IAAD,CAApC;IACA,YAAY,CAAC,gBAAb,CAA8B,QAA9B,EAAwC,OAAxC;EACD;AACF","sourcesContent":["import type { PositioningVirtualElement } from '../types';\nimport { getScrollParent } from './getScrollParent';\n\n/**\n * Toggles event listeners for scroll parent.\n * Cleans up the event listeners for the previous element and adds them for the new scroll parent.\n * @param next Next element\n * @param prev Previous element\n */\nexport function toggleScrollListener(\n next: HTMLElement | PositioningVirtualElement | null,\n prev: HTMLElement | PositioningVirtualElement | null,\n handler: EventListener,\n) {\n if (next === prev) {\n return;\n }\n\n if (prev instanceof HTMLElement) {\n const prevScrollParent = getScrollParent(prev);\n prevScrollParent.removeEventListener('scroll', handler);\n }\n if (next instanceof HTMLElement) {\n const scrollParent = getScrollParent(next);\n scrollParent.addEventListener('scroll', handler);\n }\n}\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-positioning/src/utils/toggleScrollListener.ts"],"names":[],"mappings":"AACA,SAAS,eAAT,QAAgC,mBAAhC;AAEA;;;;;AAKG;;AACH,OAAM,SAAU,oBAAV,CACJ,IADI,EAEJ,IAFI,EAGJ,OAHI,EAGkB;EAEtB,IAAI,IAAI,KAAK,IAAb,EAAmB;IACjB;EACD;;EAED,IAAI,IAAI,YAAY,WAApB,EAAiC;IAC/B,MAAM,gBAAgB,GAAG,eAAe,CAAC,IAAD,CAAxC;IACA,gBAAgB,CAAC,mBAAjB,CAAqC,QAArC,EAA+C,OAA/C;EACD;;EACD,IAAI,IAAI,YAAY,WAApB,EAAiC;IAC/B,MAAM,YAAY,GAAG,eAAe,CAAC,IAAD,CAApC;IACA,YAAY,CAAC,gBAAb,CAA8B,QAA9B,EAAwC,OAAxC;EACD;AACF","sourcesContent":["import type { PositioningVirtualElement } from '../types';\nimport { getScrollParent } from './getScrollParent';\n\n/**\n * Toggles event listeners for scroll parent.\n * Cleans up the event listeners for the previous element and adds them for the new scroll parent.\n * @param next Next element\n * @param prev Previous element\n */\nexport function toggleScrollListener(\n next: HTMLElement | PositioningVirtualElement | null,\n prev: HTMLElement | PositioningVirtualElement | null,\n handler: EventListener,\n) {\n if (next === prev) {\n return;\n }\n\n if (prev instanceof HTMLElement) {\n const prevScrollParent = getScrollParent(prev);\n prevScrollParent.removeEventListener('scroll', handler);\n }\n if (next instanceof HTMLElement) {\n const scrollParent = getScrollParent(next);\n scrollParent.addEventListener('scroll', handler);\n }\n}\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["utils/useCallbackRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AAEA;;;;;;;;;;;;;;;;AAgBG;;AACH,OAAM,SAAU,cAAV,CACJ,YADI,EAEJ,QAFI,EAGJ,kBAHI,EAGwB;EAE5B,MAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAAa,IAAb,CAAhB;EACA,MAAM,CAAC,GAAD,IAAQ,KAAK,CAAC,QAAN,CAAe,OAAO;IAClC;IACA,KAAK,EAAE,YAF2B;IAGlC;IACA,QAJkC;IAKlC;IACA,MAAM,EAAE;MACN,IAAI,OAAJ,GAAW;QACT,OAAO,GAAG,CAAC,KAAX;MACD,CAHK;;MAIN,IAAI,OAAJ,CAAY,KAAZ,EAAiB;QACf,MAAM,IAAI,GAAG,GAAG,CAAC,KAAjB;;QAEA,IAAI,IAAI,KAAK,KAAb,EAAoB;UAClB,GAAG,CAAC,KAAJ,GAAY,KAAZ;;UAEA,IAAI,kBAAkB,IAAI,OAAO,CAAC,OAAlC,EAA2C;YACzC;UACD;;UAED,GAAG,CAAC,QAAJ,CAAa,KAAb,EAAoB,IAApB;QACD;MACF;;IAhBK;EAN0B,CAAP,CAAf,CAAd;EA0BA,yBAAyB,CAAC,MAAK;IAC7B,OAAO,CAAC,OAAR,GAAkB,KAAlB;EACD,CAFwB,EAEtB,EAFsB,CAAzB,CA7B4B,CAiC5B;;EACA,GAAG,CAAC,QAAJ,GAAe,QAAf;EAEA,OAAO,GAAG,CAAC,MAAX;AACD","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content\n * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via\n * React.useState(), but it will cause re-renders always.\n *\n * https://reactjs.org/docs/hooks-reference.html#useref\n * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n *\n * @param initialValue - initial ref value\n * @param callback - a callback to run when value changes\n * @param skipInitialResolve - a flag to skip an initial ref report\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n */\nexport function useCallbackRef<T>(\n initialValue: T | null,\n callback: (newValue: T | null, lastValue: T | null) => void,\n skipInitialResolve?: boolean,\n): React.MutableRefObject<T | null> {\n const isFirst = React.useRef(true);\n const [ref] = React.useState(() => ({\n // value\n value: initialValue,\n // last callback\n callback,\n // \"memoized\" public interface\n facade: {\n get current() {\n return ref.value;\n },\n set current(value) {\n const last = ref.value;\n\n if (last !== value) {\n ref.value = value;\n\n if (skipInitialResolve && isFirst.current) {\n return;\n }\n\n ref.callback(value, last);\n }\n },\n },\n }));\n\n useIsomorphicLayoutEffect(() => {\n isFirst.current = false;\n }, []);\n\n // update callback\n ref.callback = callback;\n\n return ref.facade;\n}\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-positioning/src/utils/useCallbackRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AAEA;;;;;;;;;;;;;;;;AAgBG;;AACH,OAAM,SAAU,cAAV,CACJ,YADI,EAEJ,QAFI,EAGJ,kBAHI,EAGwB;EAE5B,MAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAAa,IAAb,CAAhB;EACA,MAAM,CAAC,GAAD,IAAQ,KAAK,CAAC,QAAN,CAAe,OAAO;IAClC;IACA,KAAK,EAAE,YAF2B;IAGlC;IACA,QAJkC;IAKlC;IACA,MAAM,EAAE;MACN,IAAI,OAAJ,GAAW;QACT,OAAO,GAAG,CAAC,KAAX;MACD,CAHK;;MAIN,IAAI,OAAJ,CAAY,KAAZ,EAAiB;QACf,MAAM,IAAI,GAAG,GAAG,CAAC,KAAjB;;QAEA,IAAI,IAAI,KAAK,KAAb,EAAoB;UAClB,GAAG,CAAC,KAAJ,GAAY,KAAZ;;UAEA,IAAI,kBAAkB,IAAI,OAAO,CAAC,OAAlC,EAA2C;YACzC;UACD;;UAED,GAAG,CAAC,QAAJ,CAAa,KAAb,EAAoB,IAApB;QACD;MACF;;IAhBK;EAN0B,CAAP,CAAf,CAAd;EA0BA,yBAAyB,CAAC,MAAK;IAC7B,OAAO,CAAC,OAAR,GAAkB,KAAlB;EACD,CAFwB,EAEtB,EAFsB,CAAzB,CA7B4B,CAiC5B;;EACA,GAAG,CAAC,QAAJ,GAAe,QAAf;EAEA,OAAO,GAAG,CAAC,MAAX;AACD","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content\n * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via\n * React.useState(), but it will cause re-renders always.\n *\n * https://reactjs.org/docs/hooks-reference.html#useref\n * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n *\n * @param initialValue - initial ref value\n * @param callback - a callback to run when value changes\n * @param skipInitialResolve - a flag to skip an initial ref report\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n */\nexport function useCallbackRef<T>(\n initialValue: T | null,\n callback: (newValue: T | null, lastValue: T | null) => void,\n skipInitialResolve?: boolean,\n): React.MutableRefObject<T | null> {\n const isFirst = React.useRef(true);\n const [ref] = React.useState(() => ({\n // value\n value: initialValue,\n // last callback\n callback,\n // \"memoized\" public interface\n facade: {\n get current() {\n return ref.value;\n },\n set current(value) {\n const last = ref.value;\n\n if (last !== value) {\n ref.value = value;\n\n if (skipInitialResolve && isFirst.current) {\n return;\n }\n\n ref.callback(value, last);\n }\n },\n },\n }));\n\n useIsomorphicLayoutEffect(() => {\n isFirst.current = false;\n }, []);\n\n // update callback\n ref.callback = callback;\n\n return ref.facade;\n}\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["utils/writeArrowUpdates.ts"],"names":[],"mappings":"AAEA;;AAEG;AACH,OAAM,SAAU,iBAAV,CAA4B,OAA5B,EAAkG;EACtG,MAAM;IAAE,KAAF;IAAS;EAAT,IAA4B,OAAlC;;EACA,IAAI,CAAC,cAAc,CAAC,KAAhB,IAAyB,CAAC,KAA9B,EAAqC;IACnC;EACD;;EAED,MAAM;IAAE,CAAC,EAAE,MAAL;IAAa,CAAC,EAAE;EAAhB,IAA2B,cAAc,CAAC,KAAhD;EAEA,MAAM,CAAC,MAAP,CAAc,KAAK,CAAC,KAApB,EAA2B;IACzB,IAAI,EAAE,GAAG,MAAM,IADU;IAEzB,GAAG,EAAE,GAAG,MAAM;EAFW,CAA3B;AAID","sourcesContent":["import { MiddlewareData } from '@floating-ui/dom';\n\n/**\n * Writes all DOM element updates after position is computed\n */\nexport function writeArrowUpdates(options: { arrow: HTMLElement | null; middlewareData: MiddlewareData }) {\n const { arrow, middlewareData } = options;\n if (!middlewareData.arrow || !arrow) {\n return;\n }\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n Object.assign(arrow.style, {\n left: `${arrowX}px`,\n top: `${arrowY}px`,\n });\n}\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-positioning/src/utils/writeArrowUpdates.ts"],"names":[],"mappings":"AAEA;;AAEG;AACH,OAAM,SAAU,iBAAV,CAA4B,OAA5B,EAAkG;EACtG,MAAM;IAAE,KAAF;IAAS;EAAT,IAA4B,OAAlC;;EACA,IAAI,CAAC,cAAc,CAAC,KAAhB,IAAyB,CAAC,KAA9B,EAAqC;IACnC;EACD;;EAED,MAAM;IAAE,CAAC,EAAE,MAAL;IAAa,CAAC,EAAE;EAAhB,IAA2B,cAAc,CAAC,KAAhD;EAEA,MAAM,CAAC,MAAP,CAAc,KAAK,CAAC,KAApB,EAA2B;IACzB,IAAI,EAAE,GAAG,MAAM,IADU;IAEzB,GAAG,EAAE,GAAG,MAAM;EAFW,CAA3B;AAID","sourcesContent":["import { MiddlewareData } from '@floating-ui/dom';\n\n/**\n * Writes all DOM element updates after position is computed\n */\nexport function writeArrowUpdates(options: { arrow: HTMLElement | null; middlewareData: MiddlewareData }) {\n const { arrow, middlewareData } = options;\n if (!middlewareData.arrow || !arrow) {\n return;\n }\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n Object.assign(arrow.style, {\n left: `${arrowX}px`,\n top: `${arrowY}px`,\n });\n}\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["utils/writeContainerupdates.ts"],"names":[],"mappings":"AACA,SACE,wBADF,EAEE,uBAFF,EAGE,6BAHF,EAIE,0BAJF,QAKO,cALP;AAOA;;AAEG;;AACH,OAAM,SAAU,qBAAV,CAAgC,OAAhC,EAYL;;;EACC,MAAM;IACJ,SADI;IAEJ,SAFI;IAGJ,cAHI;IAIJ,QAJI;IAKJ,MALI;IAMJ,WAAW,EAAE;MAAE,CAAF;MAAK;IAAL;EANT,IAOF,OAPJ;;EAQA,IAAI,CAAC,SAAL,EAAgB;IACd;EACD;;EACD,SAAS,CAAC,YAAV,CAAuB,0BAAvB,EAAmD,SAAnD;EACA,SAAS,CAAC,eAAV,CAA0B,6BAA1B;;EACA,IAAI,cAAc,CAAC,oBAAf,CAAoC,YAAxC,EAAsD;IACpD,SAAS,CAAC,YAAV,CAAuB,6BAAvB,EAAsD,EAAtD;EACD;;EAED,SAAS,CAAC,eAAV,CAA0B,wBAA1B;;EACA,IAAI,CAAA,EAAA,GAAA,cAAc,CAAC,IAAf,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,KAAA,CAAnB,GAAmB,EAAA,CAAE,OAAzB,EAAkC;IAChC,SAAS,CAAC,YAAV,CAAuB,wBAAvB,EAAiD,EAAjD;EACD;;EAED,SAAS,CAAC,eAAV,CAA0B,uBAA1B;;EACA,IAAI,CAAA,EAAA,GAAA,cAAc,CAAC,IAAf,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,KAAA,CAAnB,GAAmB,EAAA,CAAE,eAAzB,EAA0C;IACxC,SAAS,CAAC,YAAV,CAAuB,uBAAvB,EAAgD,EAAhD;EACD;;EAED,MAAM,CAAC,MAAP,CAAc,SAAS,CAAC,KAAxB,EAA+B;IAC7B,SAAS,EAAE,MAAM,GAAG,aAAa,CAAC,OAAO,CAAC,KAAzB,GAAiC,eAAe,CAAC,OAAO,CAAC,QAD7C;IAE7B,QAAQ,EAAE;EAFmB,CAA/B;AAID","sourcesContent":["import type { Placement, MiddlewareData, Strategy, Coords } from '@floating-ui/dom';\nimport {\n DATA_POSITIONING_ESCAPED,\n DATA_POSITIONING_HIDDEN,\n DATA_POSITIONING_INTERSECTING,\n DATA_POSITIONING_PLACEMENT,\n} from '../constants';\n\n/**\n * Writes all container element position updates after the position is computed\n */\nexport function writeContainerUpdates(options: {\n container: HTMLElement | null;\n placement: Placement;\n middlewareData: MiddlewareData;\n /**\n * Layer acceleration can disable subpixel rendering which causes slightly\n * blurry text on low PPI displays, so we want to use 2D transforms\n * instead\n */\n lowPPI: boolean;\n strategy: Strategy;\n coordinates: Coords;\n}) {\n const {\n container,\n placement,\n middlewareData,\n strategy,\n lowPPI,\n coordinates: { x, y },\n } = options;\n if (!container) {\n return;\n }\n container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);\n container.removeAttribute(DATA_POSITIONING_INTERSECTING);\n if (middlewareData.intersectionObserver.intersecting) {\n container.setAttribute(DATA_POSITIONING_INTERSECTING, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_ESCAPED);\n if (middlewareData.hide?.escaped) {\n container.setAttribute(DATA_POSITIONING_ESCAPED, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_HIDDEN);\n if (middlewareData.hide?.referenceHidden) {\n container.setAttribute(DATA_POSITIONING_HIDDEN, '');\n }\n\n Object.assign(container.style, {\n transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,\n position: strategy,\n });\n}\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-positioning/src/utils/writeContainerupdates.ts"],"names":[],"mappings":"AACA,SACE,wBADF,EAEE,uBAFF,EAGE,6BAHF,EAIE,0BAJF,QAKO,cALP;AAOA;;AAEG;;AACH,OAAM,SAAU,qBAAV,CAAgC,OAAhC,EAYL;;;EACC,MAAM;IACJ,SADI;IAEJ,SAFI;IAGJ,cAHI;IAIJ,QAJI;IAKJ,MALI;IAMJ,WAAW,EAAE;MAAE,CAAF;MAAK;IAAL;EANT,IAOF,OAPJ;;EAQA,IAAI,CAAC,SAAL,EAAgB;IACd;EACD;;EACD,SAAS,CAAC,YAAV,CAAuB,0BAAvB,EAAmD,SAAnD;EACA,SAAS,CAAC,eAAV,CAA0B,6BAA1B;;EACA,IAAI,cAAc,CAAC,oBAAf,CAAoC,YAAxC,EAAsD;IACpD,SAAS,CAAC,YAAV,CAAuB,6BAAvB,EAAsD,EAAtD;EACD;;EAED,SAAS,CAAC,eAAV,CAA0B,wBAA1B;;EACA,IAAI,CAAA,EAAA,GAAA,cAAc,CAAC,IAAf,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,KAAA,CAAnB,GAAmB,EAAA,CAAE,OAAzB,EAAkC;IAChC,SAAS,CAAC,YAAV,CAAuB,wBAAvB,EAAiD,EAAjD;EACD;;EAED,SAAS,CAAC,eAAV,CAA0B,uBAA1B;;EACA,IAAI,CAAA,EAAA,GAAA,cAAc,CAAC,IAAf,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,KAAA,CAAnB,GAAmB,EAAA,CAAE,eAAzB,EAA0C;IACxC,SAAS,CAAC,YAAV,CAAuB,uBAAvB,EAAgD,EAAhD;EACD;;EAED,MAAM,CAAC,MAAP,CAAc,SAAS,CAAC,KAAxB,EAA+B;IAC7B,SAAS,EAAE,MAAM,GAAG,aAAa,CAAC,OAAO,CAAC,KAAzB,GAAiC,eAAe,CAAC,OAAO,CAAC,QAD7C;IAE7B,QAAQ,EAAE;EAFmB,CAA/B;AAID","sourcesContent":["import type { Placement, MiddlewareData, Strategy, Coords } from '@floating-ui/dom';\nimport {\n DATA_POSITIONING_ESCAPED,\n DATA_POSITIONING_HIDDEN,\n DATA_POSITIONING_INTERSECTING,\n DATA_POSITIONING_PLACEMENT,\n} from '../constants';\n\n/**\n * Writes all container element position updates after the position is computed\n */\nexport function writeContainerUpdates(options: {\n container: HTMLElement | null;\n placement: Placement;\n middlewareData: MiddlewareData;\n /**\n * Layer acceleration can disable subpixel rendering which causes slightly\n * blurry text on low PPI displays, so we want to use 2D transforms\n * instead\n */\n lowPPI: boolean;\n strategy: Strategy;\n coordinates: Coords;\n}) {\n const {\n container,\n placement,\n middlewareData,\n strategy,\n lowPPI,\n coordinates: { x, y },\n } = options;\n if (!container) {\n return;\n }\n container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);\n container.removeAttribute(DATA_POSITIONING_INTERSECTING);\n if (middlewareData.intersectionObserver.intersecting) {\n container.setAttribute(DATA_POSITIONING_INTERSECTING, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_ESCAPED);\n if (middlewareData.hide?.escaped) {\n container.setAttribute(DATA_POSITIONING_ESCAPED, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_HIDDEN);\n if (middlewareData.hide?.referenceHidden) {\n container.setAttribute(DATA_POSITIONING_HIDDEN, '');\n }\n\n Object.assign(container.style, {\n transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,\n position: strategy,\n });\n}\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
define(["require", "exports"], function (require, exports) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.DATA_POSITIONING_PLACEMENT = exports.DATA_POSITIONING_HIDDEN = exports.DATA_POSITIONING_ESCAPED = exports.DATA_POSITIONING_INTERSECTING = void 0;
|
5
|
+
exports.DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
|
6
|
+
exports.DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
|
7
|
+
exports.DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
|
8
|
+
exports.DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
|
9
|
+
});
|
10
|
+
//# sourceMappingURL=constants.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/constants.ts"],"names":[],"mappings":";;;;IAAa,QAAA,6BAA6B,GAAG,6BAA6B,CAAC;IAC9D,QAAA,wBAAwB,GAAG,qBAAqB,CAAC;IACjD,QAAA,uBAAuB,GAAG,8BAA8B,CAAC;IACzD,QAAA,0BAA0B,GAAG,uBAAuB,CAAC","sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\n"]}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.createArrowHeightStyles = exports.createArrowStyles = void 0;
|
5
|
+
/**
|
6
|
+
* @internal
|
7
|
+
* Helper that creates a makeStyles rule for an arrow element.
|
8
|
+
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
9
|
+
*
|
10
|
+
* ```ts
|
11
|
+
* makeStyles({
|
12
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
13
|
+
*
|
14
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
15
|
+
* mediumArrow: createArrowHeightStyles(4),
|
16
|
+
* smallArrow: createArrowHeightStyles(2),
|
17
|
+
* })
|
18
|
+
* ...
|
19
|
+
*
|
20
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
21
|
+
* state.arrowWithoutSize.className = mergeClasses(
|
22
|
+
* styles.arrowWithoutSize,
|
23
|
+
* state.smallArrow && styles.smallArrow,
|
24
|
+
* state.mediumArrow && styles.mediumArrow,
|
25
|
+
* )
|
26
|
+
* ```
|
27
|
+
*/
|
28
|
+
function createArrowStyles(options) {
|
29
|
+
var arrowHeight = options.arrowHeight, _a = options.borderWidth, borderWidth = _a === void 0 ? '1px' : _a, _b = options.borderStyle, borderStyle = _b === void 0 ? 'solid' : _b, _c = options.borderColor, borderColor = _c === void 0 ? react_theme_1.tokens.colorTransparentStroke : _c;
|
30
|
+
return tslib_1.__assign(tslib_1.__assign({ position: 'absolute', backgroundColor: 'inherit', visibility: 'hidden', zIndex: -1 }, (arrowHeight && createArrowHeightStyles(arrowHeight))), { '::before': tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ content: '""', visibility: 'visible', position: 'absolute', boxSizing: 'border-box', width: 'inherit', height: 'inherit', backgroundColor: 'inherit' }, react_1.shorthands.borderRight(borderWidth + " /* @noflip */", borderStyle + " /* @noflip */", borderColor + " /* @noflip */")), react_1.shorthands.borderBottom(borderWidth, borderStyle, borderColor)), { borderBottomRightRadius: react_theme_1.tokens.borderRadiusSmall, transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)' }),
|
31
|
+
// Popper sets data-popper-placement on the root element, which is used to align the arrow
|
32
|
+
':global([data-popper-placement^="top"])': {
|
33
|
+
bottom: "-" + borderWidth,
|
34
|
+
'--angle': '0',
|
35
|
+
}, ':global([data-popper-placement^="right"])': {
|
36
|
+
left: "-" + borderWidth + " /* @noflip */",
|
37
|
+
'--angle': '90deg',
|
38
|
+
}, ':global([data-popper-placement^="bottom"])': {
|
39
|
+
top: "-" + borderWidth,
|
40
|
+
'--angle': '180deg',
|
41
|
+
}, ':global([data-popper-placement^="left"])': {
|
42
|
+
right: "-" + borderWidth + " /* @noflip */",
|
43
|
+
'--angle': '270deg',
|
44
|
+
} });
|
45
|
+
}
|
46
|
+
exports.createArrowStyles = createArrowStyles;
|
47
|
+
/**
|
48
|
+
* @internal
|
49
|
+
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
|
50
|
+
*
|
51
|
+
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
52
|
+
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
53
|
+
*/
|
54
|
+
function createArrowHeightStyles(arrowHeight) {
|
55
|
+
// The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
|
56
|
+
// Multiply the triangle's height by sqrt(2) to get length of its edges.
|
57
|
+
var edgeLength = 1.414 * arrowHeight + "px";
|
58
|
+
return { width: edgeLength, height: edgeLength };
|
59
|
+
}
|
60
|
+
exports.createArrowHeightStyles = createArrowHeightStyles;
|
61
|
+
});
|
62
|
+
//# sourceMappingURL=createArrowStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"createArrowStyles.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/createArrowStyles.ts"],"names":[],"mappings":";;;;IAuCA;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,SAAgB,iBAAiB,CAAC,OAAiC;QAE/D,IAAA,WAAW,GAIT,OAAO,YAJE,EACX,KAGE,OAAO,YAHU,EAAnB,WAAW,mBAAG,KAAK,KAAA,EACnB,KAEE,OAAO,YAFY,EAArB,WAAW,mBAAG,OAAO,KAAA,EACrB,KACE,OAAO,YADkC,EAA3C,WAAW,mBAAG,oBAAM,CAAC,sBAAsB,KAAA,CACjC;QAEZ,2CACE,QAAQ,EAAE,UAAU,EACpB,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAE,QAAQ,EACpB,MAAM,EAAE,CAAC,CAAC,IAEP,CAAC,WAAW,IAAI,uBAAuB,CAAC,WAAW,CAAC,CAAC,KAExD,UAAU,uDACR,OAAO,EAAE,IAAI,EACb,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,SAAS,EACjB,eAAe,EAAE,SAAS,IACvB,kBAAU,CAAC,WAAW,CACpB,WAAW,mBAAgB,EAC3B,WAAW,mBAAgB,EAC3B,WAAW,mBAAgB,CAC/B,GACE,kBAAU,CAAC,YAAY,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC,KACjE,uBAAuB,EAAE,oBAAM,CAAC,iBAAiB,EACjD,SAAS,EAAE,sDAAsD;YAGnE,0FAA0F;YAC1F,yCAAyC,EAAE;gBACzC,MAAM,EAAE,MAAI,WAAa;gBACzB,SAAS,EAAE,GAAG;aACf,EACD,2CAA2C,EAAE;gBAC3C,IAAI,EAAE,MAAI,WAAW,mBAAgB;gBACrC,SAAS,EAAE,OAAO;aACnB,EACD,4CAA4C,EAAE;gBAC5C,GAAG,EAAE,MAAI,WAAa;gBACtB,SAAS,EAAE,QAAQ;aACpB,EACD,0CAA0C,EAAE;gBAC1C,KAAK,EAAE,MAAI,WAAW,mBAAgB;gBACtC,SAAS,EAAE,QAAQ;aACpB,IACD;IACJ,CAAC;IApDD,8CAoDC;IAED;;;;;;OAMG;IACH,SAAgB,uBAAuB,CAAC,WAAmB;QACzD,qGAAqG;QACrG,wEAAwE;QACxE,IAAM,UAAU,GAAM,KAAK,GAAG,WAAW,OAAI,CAAC;QAC9C,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;IACnD,CAAC;IALD,0DAKC","sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n '::before': {\n content: '\"\"',\n visibility: 'visible',\n position: 'absolute',\n boxSizing: 'border-box',\n width: 'inherit',\n height: 'inherit',\n backgroundColor: 'inherit',\n ...shorthands.borderRight(\n `${borderWidth} /* @noflip */`,\n `${borderStyle} /* @noflip */`,\n `${borderColor} /* @noflip */`,\n ),\n ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n },\n\n // Popper sets data-popper-placement on the root element, which is used to align the arrow\n ':global([data-popper-placement^=\"top\"])': {\n bottom: `-${borderWidth}`,\n '--angle': '0',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--angle': '90deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--angle': '180deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--angle': '270deg',\n },\n };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n // Multiply the triangle's height by sqrt(2) to get length of its edges.\n const edgeLength = `${1.414 * arrowHeight}px`;\n return { width: edgeLength, height: edgeLength };\n}\n"]}
|
@@ -0,0 +1,85 @@
|
|
1
|
+
define(["require", "exports", "@floating-ui/dom", "./utils"], function (require, exports, dom_1, utils_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.createPositionManager = void 0;
|
5
|
+
/**
|
6
|
+
* @internal
|
7
|
+
* @returns manager that handles positioning out of the react lifecycle
|
8
|
+
*/
|
9
|
+
function createPositionManager(options) {
|
10
|
+
var container = options.container, target = options.target, arrow = options.arrow, strategy = options.strategy, middleware = options.middleware, placement = options.placement;
|
11
|
+
if (!target || !container) {
|
12
|
+
return {
|
13
|
+
updatePosition: function () { return undefined; },
|
14
|
+
dispose: function () { return undefined; },
|
15
|
+
};
|
16
|
+
}
|
17
|
+
var isFirstUpdate = true;
|
18
|
+
var scrollParents = new Set();
|
19
|
+
var targetWindow = container.ownerDocument.defaultView;
|
20
|
+
// When the container is first resolved, set position `fixed` to avoid scroll jumps.
|
21
|
+
// Without this scroll jumps can occur when the element is rendered initially and receives focus
|
22
|
+
Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });
|
23
|
+
var forceUpdate = function () {
|
24
|
+
if (isFirstUpdate) {
|
25
|
+
scrollParents.add(utils_1.getScrollParent(container));
|
26
|
+
if (target instanceof HTMLElement) {
|
27
|
+
scrollParents.add(utils_1.getScrollParent(target));
|
28
|
+
}
|
29
|
+
scrollParents.forEach(function (scrollParent) {
|
30
|
+
scrollParent.addEventListener('scroll', updatePosition);
|
31
|
+
});
|
32
|
+
isFirstUpdate = false;
|
33
|
+
}
|
34
|
+
Object.assign(container.style, { position: strategy });
|
35
|
+
dom_1.computePosition(target, container, { placement: placement, middleware: middleware, strategy: strategy })
|
36
|
+
.then(function (_a) {
|
37
|
+
var x = _a.x, y = _a.y, middlewareData = _a.middlewareData, computedPlacement = _a.placement;
|
38
|
+
utils_1.writeArrowUpdates({ arrow: arrow, middlewareData: middlewareData });
|
39
|
+
utils_1.writeContainerUpdates({
|
40
|
+
container: container,
|
41
|
+
middlewareData: middlewareData,
|
42
|
+
placement: computedPlacement,
|
43
|
+
coordinates: { x: x, y: y },
|
44
|
+
lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
|
45
|
+
strategy: strategy,
|
46
|
+
});
|
47
|
+
})
|
48
|
+
.catch(function (err) {
|
49
|
+
// https://github.com/floating-ui/floating-ui/issues/1845
|
50
|
+
// FIXME for node > 14
|
51
|
+
// node 15 introduces promise rejection which means that any components
|
52
|
+
// tests need to be `it('', async () => {})` otherwise there can be race conditions with
|
53
|
+
// JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
|
54
|
+
// Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
|
55
|
+
// will actually be counter productive
|
56
|
+
if (process.env.NODE_ENV === 'development') {
|
57
|
+
// eslint-disable-next-line no-console
|
58
|
+
console.error('[usePositioning]: Failed to calculate position', err);
|
59
|
+
}
|
60
|
+
});
|
61
|
+
};
|
62
|
+
var updatePosition = utils_1.debounce(function () { return forceUpdate(); });
|
63
|
+
var dispose = function () {
|
64
|
+
if (targetWindow) {
|
65
|
+
targetWindow.removeEventListener('scroll', updatePosition);
|
66
|
+
targetWindow.removeEventListener('resize', updatePosition);
|
67
|
+
}
|
68
|
+
scrollParents.forEach(function (scrollParent) {
|
69
|
+
scrollParent.removeEventListener('scroll', updatePosition);
|
70
|
+
});
|
71
|
+
};
|
72
|
+
if (targetWindow) {
|
73
|
+
targetWindow.addEventListener('scroll', updatePosition);
|
74
|
+
targetWindow.addEventListener('resize', updatePosition);
|
75
|
+
}
|
76
|
+
// Update the position on initialization
|
77
|
+
updatePosition();
|
78
|
+
return {
|
79
|
+
updatePosition: updatePosition,
|
80
|
+
dispose: dispose,
|
81
|
+
};
|
82
|
+
}
|
83
|
+
exports.createPositionManager = createPositionManager;
|
84
|
+
});
|
85
|
+
//# sourceMappingURL=createPositionManager.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"createPositionManager.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/createPositionManager.ts"],"names":[],"mappings":";;;;IAiCA;;;OAGG;IACH,SAAgB,qBAAqB,CAAC,OAA+B;QAC3D,IAAA,SAAS,GAAqD,OAAO,UAA5D,EAAE,MAAM,GAA6C,OAAO,OAApD,EAAE,KAAK,GAAsC,OAAO,MAA7C,EAAE,QAAQ,GAA4B,OAAO,SAAnC,EAAE,UAAU,GAAgB,OAAO,WAAvB,EAAE,SAAS,GAAK,OAAO,UAAZ,CAAa;QAC9E,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE;YACzB,OAAO;gBACL,cAAc,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;gBAC/B,OAAO,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;aACzB,CAAC;SACH;QAED,IAAI,aAAa,GAAG,IAAI,CAAC;QACzB,IAAM,aAAa,GAAqB,IAAI,GAAG,EAAe,CAAC;QAC/D,IAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC;QAEzD,oFAAoF;QACpF,gGAAgG;QAChG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;QAElF,IAAM,WAAW,GAAG;YAClB,IAAI,aAAa,EAAE;gBACjB,aAAa,CAAC,GAAG,CAAC,uBAAe,CAAC,SAAS,CAAC,CAAC,CAAC;gBAC9C,IAAI,MAAM,YAAY,WAAW,EAAE;oBACjC,aAAa,CAAC,GAAG,CAAC,uBAAe,CAAC,MAAM,CAAC,CAAC,CAAC;iBAC5C;gBAED,aAAa,CAAC,OAAO,CAAC,UAAA,YAAY;oBAChC,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;gBAC1D,CAAC,CAAC,CAAC;gBAEH,aAAa,GAAG,KAAK,CAAC;aACvB;YAED,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YACvD,qBAAe,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,WAAA,EAAE,UAAU,YAAA,EAAE,QAAQ,UAAA,EAAE,CAAC;iBACpE,IAAI,CAAC,UAAC,EAAsD;oBAApD,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,cAAc,oBAAA,EAAa,iBAAiB,eAAA;gBACzD,yBAAiB,CAAC,EAAE,KAAK,OAAA,EAAE,cAAc,gBAAA,EAAE,CAAC,CAAC;gBAC7C,6BAAqB,CAAC;oBACpB,SAAS,WAAA;oBACT,cAAc,gBAAA;oBACd,SAAS,EAAE,iBAAiB;oBAC5B,WAAW,EAAE,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE;oBACrB,MAAM,EAAE,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,KAAI,CAAC,CAAC,IAAI,CAAC;oBAClD,QAAQ,UAAA;iBACT,CAAC,CAAC;YACL,CAAC,CAAC;iBACD,KAAK,CAAC,UAAA,GAAG;gBACR,yDAAyD;gBACzD,sBAAsB;gBACtB,uEAAuE;gBACvE,wFAAwF;gBACxF,4GAA4G;gBAC5G,0GAA0G;gBAC1G,sCAAsC;gBACtC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;oBAC1C,sCAAsC;oBACtC,OAAO,CAAC,KAAK,CAAC,gDAAgD,EAAE,GAAG,CAAC,CAAC;iBACtE;YACH,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,IAAM,cAAc,GAAG,gBAAQ,CAAC,cAAM,OAAA,WAAW,EAAE,EAAb,CAAa,CAAC,CAAC;QAErD,IAAM,OAAO,GAAG;YACd,IAAI,YAAY,EAAE;gBAChB,YAAY,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;gBAC3D,YAAY,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;aAC5D;YAED,aAAa,CAAC,OAAO,CAAC,UAAA,YAAY;gBAChC,YAAY,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YAC7D,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,IAAI,YAAY,EAAE;YAChB,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YACxD,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;SACzD;QAED,wCAAwC;QACxC,cAAc,EAAE,CAAC;QAEjB,OAAO;YACL,cAAc,gBAAA;YACd,OAAO,SAAA;SACR,CAAC;IACJ,CAAC;IApFD,sDAoFC","sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';\n\ninterface PositionManagerOptions {\n /**\n * The positioned element\n */\n container: HTMLElement;\n /**\n * Element that the container will be anchored to\n */\n target: TargetElement;\n /**\n * Arrow that points from the container to the target\n */\n arrow: HTMLElement | null;\n /**\n * The value of the css `position` property\n * @default absolute\n */\n strategy: Strategy;\n /**\n * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n */\n middleware: Middleware[];\n /**\n * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n */\n placement?: Placement;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n const { container, target, arrow, strategy, middleware, placement } = options;\n if (!target || !container) {\n return {\n updatePosition: () => undefined,\n dispose: () => undefined,\n };\n }\n\n let isFirstUpdate = true;\n const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n const targetWindow = container.ownerDocument.defaultView;\n\n // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n // Without this scroll jumps can occur when the element is rendered initially and receives focus\n Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n const forceUpdate = () => {\n if (isFirstUpdate) {\n scrollParents.add(getScrollParent(container));\n if (target instanceof HTMLElement) {\n scrollParents.add(getScrollParent(target));\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.addEventListener('scroll', updatePosition);\n });\n\n isFirstUpdate = false;\n }\n\n Object.assign(container.style, { position: strategy });\n computePosition(target, container, { placement, middleware, strategy })\n .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n writeArrowUpdates({ arrow, middlewareData });\n writeContainerUpdates({\n container,\n middlewareData,\n placement: computedPlacement,\n coordinates: { x, y },\n lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n strategy,\n });\n })\n .catch(err => {\n // https://github.com/floating-ui/floating-ui/issues/1845\n // FIXME for node > 14\n // node 15 introduces promise rejection which means that any components\n // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n // will actually be counter productive\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('[usePositioning]: Failed to calculate position', err);\n }\n });\n };\n\n const updatePosition = debounce(() => forceUpdate());\n\n const dispose = () => {\n if (targetWindow) {\n targetWindow.removeEventListener('scroll', updatePosition);\n targetWindow.removeEventListener('resize', updatePosition);\n }\n\n scrollParents.forEach(scrollParent => {\n scrollParent.removeEventListener('scroll', updatePosition);\n });\n };\n\n if (targetWindow) {\n targetWindow.addEventListener('scroll', updatePosition);\n targetWindow.addEventListener('resize', updatePosition);\n }\n\n // Update the position on initialization\n updatePosition();\n\n return {\n updatePosition,\n dispose,\n };\n}\n"]}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
define(["require", "exports"], function (require, exports) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.createVirtualElementFromClick = void 0;
|
5
|
+
/**
|
6
|
+
* Creates a virtual element based on the position of a click event
|
7
|
+
* Can be used as a target for popper in scenarios such as context menus
|
8
|
+
*/
|
9
|
+
function createVirtualElementFromClick(nativeEvent) {
|
10
|
+
var left = nativeEvent.clientX;
|
11
|
+
var top = nativeEvent.clientY;
|
12
|
+
var right = left + 1;
|
13
|
+
var bottom = top + 1;
|
14
|
+
function getBoundingClientRect() {
|
15
|
+
return {
|
16
|
+
left: left,
|
17
|
+
top: top,
|
18
|
+
right: right,
|
19
|
+
bottom: bottom,
|
20
|
+
x: left,
|
21
|
+
y: top,
|
22
|
+
height: 1,
|
23
|
+
width: 1,
|
24
|
+
};
|
25
|
+
}
|
26
|
+
return {
|
27
|
+
getBoundingClientRect: getBoundingClientRect,
|
28
|
+
};
|
29
|
+
}
|
30
|
+
exports.createVirtualElementFromClick = createVirtualElementFromClick;
|
31
|
+
});
|
32
|
+
//# sourceMappingURL=createVirtualElementFromClick.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"createVirtualElementFromClick.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/createVirtualElementFromClick.ts"],"names":[],"mappings":";;;;IAEA;;;OAGG;IACH,SAAgB,6BAA6B,CAAC,WAAuB;QACnE,IAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC;QACjC,IAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC;QAChC,IAAM,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC;QACvB,IAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;QAEvB,SAAS,qBAAqB;YAC5B,OAAO;gBACL,IAAI,MAAA;gBACJ,GAAG,KAAA;gBACH,KAAK,OAAA;gBACL,MAAM,QAAA;gBACN,CAAC,EAAE,IAAI;gBACP,CAAC,EAAE,GAAG;gBACN,MAAM,EAAE,CAAC;gBACT,KAAK,EAAE,CAAC;aACT,CAAC;QACJ,CAAC;QAED,OAAO;YACL,qBAAqB,uBAAA;SACtB,CAAC;IACJ,CAAC;IAtBD,sEAsBC","sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"]}
|
package/lib-amd/index.js
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
define(["require", "exports", "./createVirtualElementFromClick", "./createArrowStyles", "./usePositioning", "./usePositioningMouseTarget", "./utils/index"], function (require, exports, createVirtualElementFromClick_1, createArrowStyles_1, usePositioning_1, usePositioningMouseTarget_1, index_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.mergeArrowOffset = exports.resolvePositioningShorthand = exports.usePositioningMouseTarget = exports.usePositioning = exports.createArrowStyles = exports.createArrowHeightStyles = exports.createVirtualElementFromClick = void 0;
|
5
|
+
Object.defineProperty(exports, "createVirtualElementFromClick", { enumerable: true, get: function () { return createVirtualElementFromClick_1.createVirtualElementFromClick; } });
|
6
|
+
Object.defineProperty(exports, "createArrowHeightStyles", { enumerable: true, get: function () { return createArrowStyles_1.createArrowHeightStyles; } });
|
7
|
+
Object.defineProperty(exports, "createArrowStyles", { enumerable: true, get: function () { return createArrowStyles_1.createArrowStyles; } });
|
8
|
+
Object.defineProperty(exports, "usePositioning", { enumerable: true, get: function () { return usePositioning_1.usePositioning; } });
|
9
|
+
Object.defineProperty(exports, "usePositioningMouseTarget", { enumerable: true, get: function () { return usePositioningMouseTarget_1.usePositioningMouseTarget; } });
|
10
|
+
Object.defineProperty(exports, "resolvePositioningShorthand", { enumerable: true, get: function () { return index_1.resolvePositioningShorthand; } });
|
11
|
+
Object.defineProperty(exports, "mergeArrowOffset", { enumerable: true, get: function () { return index_1.mergeArrowOffset; } });
|
12
|
+
});
|
13
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/index.ts"],"names":[],"mappings":";;;;IAAS,8IAAA,6BAA6B,OAAA;IAC7B,4HAAA,uBAAuB,OAAA;IAAE,sHAAA,iBAAiB,OAAA;IAE1C,gHAAA,cAAc,OAAA;IACd,sIAAA,yBAAyB,OAAA;IACzB,oHAAA,2BAA2B,OAAA;IAAE,yGAAA,gBAAgB,OAAA","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningImperativeRef,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n SetVirtualMouseTarget,\n} from './types';\n"]}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
define(["require", "exports", "../utils/index"], function (require, exports, index_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.coverTarget = void 0;
|
5
|
+
function coverTarget() {
|
6
|
+
return {
|
7
|
+
name: 'coverTarget',
|
8
|
+
fn: function (middlewareArguments) {
|
9
|
+
var placement = middlewareArguments.placement, rects = middlewareArguments.rects, x = middlewareArguments.x, y = middlewareArguments.y;
|
10
|
+
var basePlacement = index_1.parseFloatingUIPlacement(placement).side;
|
11
|
+
var newCoords = { x: x, y: y };
|
12
|
+
switch (basePlacement) {
|
13
|
+
case 'bottom':
|
14
|
+
newCoords.y -= rects.reference.height;
|
15
|
+
break;
|
16
|
+
case 'top':
|
17
|
+
newCoords.y += rects.reference.height;
|
18
|
+
break;
|
19
|
+
case 'left':
|
20
|
+
newCoords.x += rects.reference.width;
|
21
|
+
break;
|
22
|
+
case 'right':
|
23
|
+
newCoords.x -= rects.reference.width;
|
24
|
+
break;
|
25
|
+
}
|
26
|
+
return newCoords;
|
27
|
+
},
|
28
|
+
};
|
29
|
+
}
|
30
|
+
exports.coverTarget = coverTarget;
|
31
|
+
});
|
32
|
+
//# sourceMappingURL=coverTarget.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"coverTarget.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/middleware/coverTarget.ts"],"names":[],"mappings":";;;;IAGA,SAAgB,WAAW;QACzB,OAAO;YACL,IAAI,EAAE,aAAa;YACnB,EAAE,EAAE,UAAA,mBAAmB;gBACb,IAAA,SAAS,GAAkB,mBAAmB,UAArC,EAAE,KAAK,GAAW,mBAAmB,MAA9B,EAAE,CAAC,GAAQ,mBAAmB,EAA3B,EAAE,CAAC,GAAK,mBAAmB,EAAxB,CAAyB;gBACvD,IAAM,aAAa,GAAG,gCAAwB,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC;gBAC/D,IAAM,SAAS,GAAG,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE,CAAC;gBAE3B,QAAQ,aAAa,EAAE;oBACrB,KAAK,QAAQ;wBACX,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;wBACtC,MAAM;oBACR,KAAK,KAAK;wBACR,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;wBACtC,MAAM;oBACR,KAAK,MAAM;wBACT,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;wBACrC,MAAM;oBACR,KAAK,OAAO;wBACV,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;wBACrC,MAAM;iBACT;gBAED,OAAO,SAAS,CAAC;YACnB,CAAC;SACF,CAAC;IACJ,CAAC;IA1BD,kCA0BC","sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { parseFloatingUIPlacement } from '../utils/index';\n\nexport function coverTarget(): Middleware {\n return {\n name: 'coverTarget',\n fn: middlewareArguments => {\n const { placement, rects, x, y } = middlewareArguments;\n const basePlacement = parseFloatingUIPlacement(placement).side;\n const newCoords = { x, y };\n\n switch (basePlacement) {\n case 'bottom':\n newCoords.y -= rects.reference.height;\n break;\n case 'top':\n newCoords.y += rects.reference.height;\n break;\n case 'left':\n newCoords.x += rects.reference.width;\n break;\n case 'right':\n newCoords.x -= rects.reference.width;\n break;\n }\n\n return newCoords;\n },\n };\n}\n"]}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
define(["require", "exports", "tslib", "@floating-ui/dom", "../utils/index"], function (require, exports, tslib_1, dom_1, index_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.flip = void 0;
|
5
|
+
function flip(options) {
|
6
|
+
var hasScrollableElement = options.hasScrollableElement, flipBoundary = options.flipBoundary, container = options.container;
|
7
|
+
return dom_1.flip(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (hasScrollableElement && { boundary: 'clippingAncestors' })), (flipBoundary && { altBoundary: true, boundary: index_1.getBoundary(container, flipBoundary) })), { fallbackStrategy: 'bestFit' }));
|
8
|
+
}
|
9
|
+
exports.flip = flip;
|
10
|
+
});
|
11
|
+
//# sourceMappingURL=flip.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"flip.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/middleware/flip.ts"],"names":[],"mappings":";;;;IASA,SAAgB,IAAI,CAAC,OAA8B;QACzC,IAAA,oBAAoB,GAA8B,OAAO,qBAArC,EAAE,YAAY,GAAgB,OAAO,aAAvB,EAAE,SAAS,GAAK,OAAO,UAAZ,CAAa;QAElE,OAAO,UAAQ,wDACV,CAAC,oBAAoB,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,GAC3D,CAAC,YAAY,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAW,CAAC,SAAS,EAAE,YAAY,CAAC,EAAE,CAAC,KAC1F,gBAAgB,EAAE,SAAS,IAC3B,CAAC;IACL,CAAC;IARD,oBAQC","sourcesContent":["import { flip as baseFlip } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/index';\n\nexport interface FlipMiddlewareOptions extends Pick<PositioningOptions, 'flipBoundary'> {\n hasScrollableElement?: boolean;\n container: HTMLElement | null;\n}\n\nexport function flip(options: FlipMiddlewareOptions) {\n const { hasScrollableElement, flipBoundary, container } = options;\n\n return baseFlip({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(flipBoundary && { altBoundary: true, boundary: getBoundary(container, flipBoundary) }),\n fallbackStrategy: 'bestFit',\n });\n}\n"]}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
define(["require", "exports", "tslib", "./coverTarget", "./flip", "./intersecting", "./maxSize", "./offset", "./shift"], function (require, exports, tslib_1, coverTarget_1, flip_1, intersecting_1, maxSize_1, offset_1, shift_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
tslib_1.__exportStar(coverTarget_1, exports);
|
5
|
+
tslib_1.__exportStar(flip_1, exports);
|
6
|
+
tslib_1.__exportStar(intersecting_1, exports);
|
7
|
+
tslib_1.__exportStar(maxSize_1, exports);
|
8
|
+
tslib_1.__exportStar(offset_1, exports);
|
9
|
+
tslib_1.__exportStar(shift_1, exports);
|
10
|
+
});
|
11
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/middleware/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,sCAAuB;IACvB,8CAA+B;IAC/B,yCAA0B;IAC1B,wCAAyB;IACzB,uCAAwB","sourcesContent":["export * from './coverTarget';\nexport * from './flip';\nexport * from './intersecting';\nexport * from './maxSize';\nexport * from './offset';\nexport * from './shift';\n"]}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
define(["require", "exports", "tslib", "@floating-ui/dom"], function (require, exports, tslib_1, dom_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.intersecting = void 0;
|
5
|
+
function intersecting() {
|
6
|
+
var _this = this;
|
7
|
+
return {
|
8
|
+
name: 'intersectionObserver',
|
9
|
+
fn: function (middlewareArguments) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
|
10
|
+
var floatingRect, altOverflow, isIntersectingTop, isIntersectingBottom, isIntersecting;
|
11
|
+
return tslib_1.__generator(this, function (_a) {
|
12
|
+
switch (_a.label) {
|
13
|
+
case 0:
|
14
|
+
floatingRect = middlewareArguments.rects.floating;
|
15
|
+
return [4 /*yield*/, dom_1.detectOverflow(middlewareArguments, { altBoundary: true })];
|
16
|
+
case 1:
|
17
|
+
altOverflow = _a.sent();
|
18
|
+
isIntersectingTop = altOverflow.top < floatingRect.height && altOverflow.top > 0;
|
19
|
+
isIntersectingBottom = altOverflow.bottom < floatingRect.height && altOverflow.bottom > 0;
|
20
|
+
isIntersecting = isIntersectingTop || isIntersectingBottom;
|
21
|
+
return [2 /*return*/, {
|
22
|
+
data: {
|
23
|
+
intersecting: isIntersecting,
|
24
|
+
},
|
25
|
+
}];
|
26
|
+
}
|
27
|
+
});
|
28
|
+
}); },
|
29
|
+
};
|
30
|
+
}
|
31
|
+
exports.intersecting = intersecting;
|
32
|
+
});
|
33
|
+
//# sourceMappingURL=intersecting.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"intersecting.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/middleware/intersecting.ts"],"names":[],"mappings":";;;;IAGA,SAAgB,YAAY;QAA5B,iBAmBC;QAlBC,OAAO;YACL,IAAI,EAAE,sBAAsB;YAC5B,EAAE,EAAE,UAAM,mBAAmB;;;;;4BACrB,YAAY,GAAG,mBAAmB,CAAC,KAAK,CAAC,QAAQ,CAAC;4BACpC,qBAAM,oBAAc,CAAC,mBAAmB,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,EAAA;;4BAA9E,WAAW,GAAG,SAAgE;4BAE9E,iBAAiB,GAAG,WAAW,CAAC,GAAG,GAAG,YAAY,CAAC,MAAM,IAAI,WAAW,CAAC,GAAG,GAAG,CAAC,CAAC;4BACjF,oBAAoB,GAAG,WAAW,CAAC,MAAM,GAAG,YAAY,CAAC,MAAM,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;4BAE1F,cAAc,GAAG,iBAAiB,IAAI,oBAAoB,CAAC;4BAEjE,sBAAO;oCACL,IAAI,EAAE;wCACJ,YAAY,EAAE,cAAc;qCAC7B;iCACF,EAAC;;;iBACH;SACF,CAAC;IACJ,CAAC;IAnBD,oCAmBC","sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { detectOverflow } from '@floating-ui/dom';\n\nexport function intersecting(): Middleware {\n return {\n name: 'intersectionObserver',\n fn: async middlewareArguments => {\n const floatingRect = middlewareArguments.rects.floating;\n const altOverflow = await detectOverflow(middlewareArguments, { altBoundary: true });\n\n const isIntersectingTop = altOverflow.top < floatingRect.height && altOverflow.top > 0;\n const isIntersectingBottom = altOverflow.bottom < floatingRect.height && altOverflow.bottom > 0;\n\n const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n return {\n data: {\n intersecting: isIntersecting,\n },\n };\n },\n };\n}\n"]}
|
@@ -0,0 +1,43 @@
|
|
1
|
+
define(["require", "exports", "tslib", "@floating-ui/dom", "../utils/index"], function (require, exports, tslib_1, dom_1, index_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.maxSize = void 0;
|
5
|
+
function maxSize(autoSize) {
|
6
|
+
var _this = this;
|
7
|
+
return {
|
8
|
+
name: 'maxSize',
|
9
|
+
fn: function (middlewareArguments) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
|
10
|
+
var placement, rects, elements, middlewareData, basePlacement, overflow, _a, x, y, _b, width, height, widthProp, heightProp, applyMaxWidth, applyMaxHeight;
|
11
|
+
return tslib_1.__generator(this, function (_c) {
|
12
|
+
switch (_c.label) {
|
13
|
+
case 0:
|
14
|
+
placement = middlewareArguments.placement, rects = middlewareArguments.rects, elements = middlewareArguments.elements, middlewareData = middlewareArguments.middlewareData;
|
15
|
+
basePlacement = index_1.parseFloatingUIPlacement(placement).side;
|
16
|
+
return [4 /*yield*/, dom_1.detectOverflow(middlewareArguments)];
|
17
|
+
case 1:
|
18
|
+
overflow = _c.sent();
|
19
|
+
_a = middlewareData.shift || { x: 0, y: 0 }, x = _a.x, y = _a.y;
|
20
|
+
_b = rects.floating, width = _b.width, height = _b.height;
|
21
|
+
widthProp = basePlacement === 'left' ? 'left' : 'right';
|
22
|
+
heightProp = basePlacement === 'top' ? 'top' : 'bottom';
|
23
|
+
applyMaxWidth = autoSize === 'always' ||
|
24
|
+
autoSize === 'width-always' ||
|
25
|
+
(overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width'));
|
26
|
+
applyMaxHeight = autoSize === 'always' ||
|
27
|
+
autoSize === 'height-always' ||
|
28
|
+
(overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height'));
|
29
|
+
if (applyMaxWidth) {
|
30
|
+
elements.floating.style.maxWidth = width - overflow[widthProp] - x + "px";
|
31
|
+
}
|
32
|
+
if (applyMaxHeight) {
|
33
|
+
elements.floating.style.maxHeight = height - overflow[heightProp] - y + "px";
|
34
|
+
}
|
35
|
+
return [2 /*return*/, {}];
|
36
|
+
}
|
37
|
+
});
|
38
|
+
}); },
|
39
|
+
};
|
40
|
+
}
|
41
|
+
exports.maxSize = maxSize;
|
42
|
+
});
|
43
|
+
//# sourceMappingURL=maxSize.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"maxSize.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/middleware/maxSize.ts"],"names":[],"mappings":";;;;IAKA,SAAgB,OAAO,CAAC,QAAwC;QAAhE,iBAiCC;QAhCC,OAAO;YACL,IAAI,EAAE,SAAS;YACf,EAAE,EAAE,UAAM,mBAAmB;;;;;4BACnB,SAAS,GAAsC,mBAAmB,UAAzD,EAAE,KAAK,GAA+B,mBAAmB,MAAlD,EAAE,QAAQ,GAAqB,mBAAmB,SAAxC,EAAE,cAAc,GAAK,mBAAmB,eAAxB,CAAyB;4BACrE,aAAa,GAAG,gCAAwB,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC;4BAE9C,qBAAM,oBAAc,CAAC,mBAAmB,CAAC,EAAA;;4BAApD,QAAQ,GAAG,SAAyC;4BACpD,KAAW,cAAc,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAA/C,CAAC,OAAA,EAAE,CAAC,OAAA,CAA4C;4BAClD,KAAoB,KAAK,CAAC,QAAQ,EAAhC,KAAK,WAAA,EAAE,MAAM,YAAA,CAAoB;4BAEnC,SAAS,GAAS,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;4BAC9D,UAAU,GAAS,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;4BAE9D,aAAa,GACjB,QAAQ,KAAK,QAAQ;gCACrB,QAAQ,KAAK,cAAc;gCAC3B,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC;4BACrE,cAAc,GAClB,QAAQ,KAAK,QAAQ;gCACrB,QAAQ,KAAK,eAAe;gCAC5B,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC;4BAE7E,IAAI,aAAa,EAAE;gCACjB,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,GAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,OAAI,CAAC;6BAC3E;4BACD,IAAI,cAAc,EAAE;gCAClB,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,GAAM,MAAM,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,OAAI,CAAC;6BAC9E;4BAED,sBAAO,EAAE,EAAC;;;iBACX;SACF,CAAC;IACJ,CAAC;IAjCD,0BAiCC","sourcesContent":["import { detectOverflow } from '@floating-ui/dom';\nimport type { Middleware, Side } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { parseFloatingUIPlacement } from '../utils/index';\n\nexport function maxSize(autoSize: PositioningOptions['autoSize']): Middleware {\n return {\n name: 'maxSize',\n fn: async middlewareArguments => {\n const { placement, rects, elements, middlewareData } = middlewareArguments;\n const basePlacement = parseFloatingUIPlacement(placement).side;\n\n const overflow = await detectOverflow(middlewareArguments);\n const { x, y } = middlewareData.shift || { x: 0, y: 0 };\n const { width, height } = rects.floating;\n\n const widthProp: Side = basePlacement === 'left' ? 'left' : 'right';\n const heightProp: Side = basePlacement === 'top' ? 'top' : 'bottom';\n\n const applyMaxWidth =\n autoSize === 'always' ||\n autoSize === 'width-always' ||\n (overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width'));\n const applyMaxHeight =\n autoSize === 'always' ||\n autoSize === 'height-always' ||\n (overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height'));\n\n if (applyMaxWidth) {\n elements.floating.style.maxWidth = `${width - overflow[widthProp] - x}px`;\n }\n if (applyMaxHeight) {\n elements.floating.style.maxHeight = `${height - overflow[heightProp] - y}px`;\n }\n\n return {};\n },\n };\n}\n"]}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
define(["require", "exports", "@floating-ui/dom", "../utils/getFloatingUIOffset"], function (require, exports, dom_1, getFloatingUIOffset_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.offset = void 0;
|
5
|
+
/**
|
6
|
+
* Wraps floating UI offset middleware to to transform offset value
|
7
|
+
*/
|
8
|
+
function offset(offsetValue) {
|
9
|
+
var floatingUIOffset = getFloatingUIOffset_1.getFloatingUIOffset(offsetValue);
|
10
|
+
return dom_1.offset(floatingUIOffset);
|
11
|
+
}
|
12
|
+
exports.offset = offset;
|
13
|
+
});
|
14
|
+
//# sourceMappingURL=offset.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"offset.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/middleware/offset.ts"],"names":[],"mappings":";;;;IAIA;;OAEG;IACH,SAAgB,MAAM,CAAC,WAAyC;QAC9D,IAAM,gBAAgB,GAAG,yCAAmB,CAAC,WAAW,CAAC,CAAC;QAC1D,OAAO,YAAU,CAAC,gBAAgB,CAAC,CAAC;IACtC,CAAC;IAHD,wBAGC","sourcesContent":["import { offset as baseOffset } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getFloatingUIOffset } from '../utils/getFloatingUIOffset';\n\n/**\n * Wraps floating UI offset middleware to to transform offset value\n */\nexport function offset(offsetValue: PositioningOptions['offset']) {\n const floatingUIOffset = getFloatingUIOffset(offsetValue);\n return baseOffset(floatingUIOffset);\n}\n"]}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
define(["require", "exports", "tslib", "@floating-ui/dom", "../utils/index"], function (require, exports, tslib_1, dom_1, index_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.shift = void 0;
|
5
|
+
/**
|
6
|
+
* Wraps the floating UI shift middleware for easier usage of our options
|
7
|
+
*/
|
8
|
+
function shift(options) {
|
9
|
+
var hasScrollableElement = options.hasScrollableElement, disableTether = options.disableTether, overflowBoundary = options.overflowBoundary, container = options.container;
|
10
|
+
return dom_1.shift(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (hasScrollableElement && { boundary: 'clippingAncestors' })), (disableTether && {
|
11
|
+
crossAxis: disableTether === 'all',
|
12
|
+
limiter: dom_1.limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),
|
13
|
+
})), (overflowBoundary && { altBoundary: true, boundary: index_1.getBoundary(container, overflowBoundary) })));
|
14
|
+
}
|
15
|
+
exports.shift = shift;
|
16
|
+
});
|
17
|
+
//# sourceMappingURL=shift.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"shift.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/middleware/shift.ts"],"names":[],"mappings":";;;;IAUA;;OAEG;IACH,SAAgB,KAAK,CAAC,OAA+B;QAC3C,IAAA,oBAAoB,GAAiD,OAAO,qBAAxD,EAAE,aAAa,GAAkC,OAAO,cAAzC,EAAE,gBAAgB,GAAgB,OAAO,iBAAvB,EAAE,SAAS,GAAK,OAAO,UAAZ,CAAa;QAErF,OAAO,WAAS,wDACX,CAAC,oBAAoB,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,GAC3D,CAAC,aAAa,IAAI;YACnB,SAAS,EAAE,aAAa,KAAK,KAAK;YAClC,OAAO,EAAE,gBAAU,CAAC,EAAE,SAAS,EAAE,aAAa,KAAK,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;SAC7E,CAAC,GACC,CAAC,gBAAgB,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAW,CAAC,SAAS,EAAE,gBAAgB,CAAC,EAAE,CAAC,EAClG,CAAC;IACL,CAAC;IAXD,sBAWC","sourcesContent":["import { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions extends Pick<PositioningOptions, 'overflowBoundary'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions) {\n const { hasScrollableElement, disableTether, overflowBoundary, container } = options;\n\n return baseShift({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(disableTether && {\n crossAxis: disableTether === 'all',\n limiter: limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),\n }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n });\n}\n"]}
|
package/lib-amd/types.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-positioning/src/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\ntype Rect = {\n width: number;\n height: number;\n x: number;\n y: number;\n};\n\nexport type OffsetFunctionParam = {\n positionedRect: Rect;\n targetRect: Rect;\n position: Position;\n alignment?: Alignment;\n};\n\nexport type TargetElement = HTMLElement | PositioningVirtualElement;\n\n/**\n * @internal\n */\nexport interface UsePositioningOptions extends PositioningProps {\n /**\n * If false, does not position anything\n */\n enabled?: boolean;\n}\n\n/**\n * @internal\n */\nexport interface PositionManager {\n updatePosition: () => void;\n dispose: () => void;\n}\n\nexport interface UsePositioningReturn {\n // React refs are supposed to be contravariant\n // (allows a more general type to be passed rather than a more specific one)\n // However, Typescript currently can't infer that fact for refs\n // See https://github.com/microsoft/TypeScript/issues/30748 for more information\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n targetRef: React.MutableRefObject<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n containerRef: React.MutableRefObject<any>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n arrowRef: React.MutableRefObject<any>;\n}\n\nexport type OffsetObject = { crossAxis?: number; mainAxis: number };\n\nexport type OffsetShorthand = number;\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;\n\nexport type Offset = OffsetFunction | OffsetObject | OffsetShorthand;\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;\n\nexport type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';\n\nexport type PositioningImperativeRef = {\n /**\n * Updates the position imperatively.\n * Useful when the position of the target changes from other factors than scrolling of window resize.\n */\n updatePosition: () => void;\n\n /**\n * Sets the target and updates positioning imperatively.\n * Useful for avoiding double renders with the target option.\n */\n setTarget: (target: TargetElement) => void;\n};\n\nexport type PositioningVirtualElement = {\n getBoundingClientRect: () => {\n x: number;\n y: number;\n top: number;\n left: number;\n bottom: number;\n right: number;\n width: number;\n height: number;\n };\n contextElement?: Element;\n};\n\nexport type SetVirtualMouseTarget = (event: React.MouseEvent | MouseEvent | undefined | null) => void;\n\nexport interface PositioningOptions {\n /** Alignment for the component. Only has an effect if used with the @see position option */\n align?: Alignment;\n\n /** The element which will define the boundaries of the positioned element for the flip behavior. */\n flipBoundary?: Boundary | null;\n\n /** The element which will define the boundaries of the positioned element for the overflow behavior. */\n overflowBoundary?: Boundary | null;\n\n /**\n * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')\n * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'\n * and 'start' | 'end' respectively),\n * then provided value for 'align' will be ignored and 'center' will be used instead.\n */\n position?: Position;\n\n /**\n * Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')\n * @default false\n */\n positionFixed?: boolean;\n\n /**\n * Lets you displace a positioned element from its reference element.\n * This can be useful if you need to apply some margin between them or if you need to fine tune the\n * position according to some custom logic.\n */\n offset?: Offset;\n\n /**\n * Defines padding between the corner of the popup element and the arrow.\n * Use to prevent the arrow from overlapping a rounded corner, for example.\n */\n arrowPadding?: number;\n\n /**\n * Applies max-height and max-width on the positioned element to fit it within the available space in viewport.\n * true enables this for both width and height when overflow happens.\n * 'always' applies `max-height`/`max-width` regardless of overflow.\n * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`\n * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`\n */\n autoSize?: AutoSize;\n\n /**\n * Modifies position and alignment to cover the target\n */\n coverTarget?: boolean;\n\n /**\n * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and\n * `position` props, regardless of the size of the component, the reference element or the viewport.\n */\n pinned?: boolean;\n\n /**\n * When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.\n * \"all\" enables this behavior for all axis.\n */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether?: boolean | 'all';\n}\n\nexport interface PositioningProps\n // \"positionFixed\" & \"unstable_disableTether\" are not exported as public API (yet)\n extends Omit<PositioningOptions, 'positionFixed' | 'unstable_disableTether'> {\n /** An imperative handle to Popper methods. */\n positioningRef?: React.Ref<PositioningImperativeRef>;\n\n /**\n * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target\n */\n target?: TargetElement | null;\n}\n\nexport type PositioningShorthandValue =\n | 'above'\n | 'above-start'\n | 'above-end'\n | 'below'\n | 'below-start'\n | 'below-end'\n | 'before'\n | 'before-top'\n | 'before-bottom'\n | 'after'\n | 'after-top'\n | 'after-bottom';\n\nexport type PositioningShorthand = PositioningProps | PositioningShorthandValue;\n"]}
|