@fluentui/react-positioning 9.3.0 → 9.3.2
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/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"]}
|