@fluentui/react-positioning 9.10.3 → 9.10.4
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.md +15 -4
- package/lib/createArrowStyles.js +5 -5
- package/lib/createArrowStyles.js.map +1 -1
- package/lib/createSlideStyles.js +2 -2
- package/lib/createSlideStyles.js.map +1 -1
- package/lib-commonjs/createArrowStyles.js +5 -5
- package/lib-commonjs/createArrowStyles.js.map +1 -1
- package/lib-commonjs/createSlideStyles.js +2 -2
- package/lib-commonjs/createSlideStyles.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-positioning
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 18 Dec 2023 14:36:11 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.10.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.10.4)
|
|
8
|
+
|
|
9
|
+
Mon, 18 Dec 2023 14:36:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.10.3..@fluentui/react-positioning_v9.10.4)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Add a namespace to CSS variables in react-positioning package to avoid potential collisions. ([PR #30068](https://github.com/microsoft/fluentui/pull/30068) by makotom@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.13.2 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.15.4 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
|
|
17
|
+
|
|
7
18
|
## [9.10.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.10.3)
|
|
8
19
|
|
|
9
|
-
Thu, 14 Dec 2023 09:
|
|
20
|
+
Thu, 14 Dec 2023 09:58:45 GMT
|
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.10.2..@fluentui/react-positioning_v9.10.3)
|
|
11
22
|
|
|
12
23
|
### Patches
|
|
13
24
|
|
|
14
25
|
- fix: Allows matchTargetSize middleware to be overidden with inline style ([PR #30028](https://github.com/microsoft/fluentui/pull/30028) by lingfan.gao@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-shared-contexts to v9.13.1 ([
|
|
16
|
-
- Bump @fluentui/react-utilities to v9.15.3 ([
|
|
26
|
+
- Bump @fluentui/react-shared-contexts to v9.13.1 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.15.3 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
|
17
28
|
|
|
18
29
|
## [9.10.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.10.2)
|
|
19
30
|
|
package/lib/createArrowStyles.js
CHANGED
|
@@ -41,24 +41,24 @@ import { tokens } from '@fluentui/react-theme';
|
|
|
41
41
|
...shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
|
|
42
42
|
...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
|
|
43
43
|
borderBottomRightRadius: tokens.borderRadiusSmall,
|
|
44
|
-
transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
|
|
44
|
+
transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg)'
|
|
45
45
|
},
|
|
46
46
|
// Popper sets data-popper-placement on the root element, which is used to align the arrow
|
|
47
47
|
':global([data-popper-placement^="top"])': {
|
|
48
48
|
bottom: `-${borderWidth}`,
|
|
49
|
-
'--angle': '0'
|
|
49
|
+
'--fui-positioning-angle': '0'
|
|
50
50
|
},
|
|
51
51
|
':global([data-popper-placement^="right"])': {
|
|
52
52
|
left: `-${borderWidth} /* @noflip */`,
|
|
53
|
-
'--angle': '90deg'
|
|
53
|
+
'--fui-positioning-angle': '90deg'
|
|
54
54
|
},
|
|
55
55
|
':global([data-popper-placement^="bottom"])': {
|
|
56
56
|
top: `-${borderWidth}`,
|
|
57
|
-
'--angle': '180deg'
|
|
57
|
+
'--fui-positioning-angle': '180deg'
|
|
58
58
|
},
|
|
59
59
|
':global([data-popper-placement^="left"])': {
|
|
60
60
|
right: `-${borderWidth} /* @noflip */`,
|
|
61
|
-
'--angle': '270deg'
|
|
61
|
+
'--fui-positioning-angle': '270deg'
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["createArrowStyles.ts"],"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"],"names":["shorthands","tokens","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","colorTransparentStroke","position","backgroundColor","visibility","zIndex","createArrowHeightStyles","content","boxSizing","width","height","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"mappings":"AAAA,SAASA,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,MAAM,QAAQ,wBAAwB;AAsC/C;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,kBAAkBC,OAAiC;IACjE,MAAM,EACJC,WAAW,EACXC,cAAc,KAAK,EACnBC,cAAc,OAAO,EACrBC,cAAcN,OAAOO,sBAAsB,EAC5C,GAAGL;IAEJ,OAAO;QACLM,UAAU;QACVC,iBAAiB;QACjBC,YAAY;QACZC,QAAQ,CAAC;QAET,GAAIR,eAAeS,wBAAwBT,YAAY;QAEvD,YAAY;YACVU,SAAS;YACTH,YAAY;YACZF,UAAU;YACVM,WAAW;YACXC,OAAO;YACPC,QAAQ;YACRP,iBAAiB;YACjB,GAAGV,WAAWkB,WAAW,CACvB,CAAC,EAAEb,YAAY,cAAc,CAAC,EAC9B,CAAC,EAAEC,YAAY,cAAc,CAAC,EAC9B,CAAC,EAAEC,YAAY,cAAc,CAAC,CAC/B;YACD,GAAGP,WAAWmB,YAAY,CAACd,aAAaC,aAAaC,YAAY;YACjEa,yBAAyBnB,OAAOoB,iBAAiB;YACjDC,WAAW;QACb;QAEA,0FAA0F;QAC1F,2CAA2C;YACzCC,QAAQ,CAAC,CAAC,EAAElB,YAAY,CAAC;YACzB,
|
|
1
|
+
{"version":3,"sources":["createArrowStyles.ts"],"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(--fui-positioning-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 '--fui-positioning-angle': '0',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--fui-positioning-angle': '90deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--fui-positioning-angle': '180deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--fui-positioning-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"],"names":["shorthands","tokens","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","colorTransparentStroke","position","backgroundColor","visibility","zIndex","createArrowHeightStyles","content","boxSizing","width","height","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"mappings":"AAAA,SAASA,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,MAAM,QAAQ,wBAAwB;AAsC/C;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,kBAAkBC,OAAiC;IACjE,MAAM,EACJC,WAAW,EACXC,cAAc,KAAK,EACnBC,cAAc,OAAO,EACrBC,cAAcN,OAAOO,sBAAsB,EAC5C,GAAGL;IAEJ,OAAO;QACLM,UAAU;QACVC,iBAAiB;QACjBC,YAAY;QACZC,QAAQ,CAAC;QAET,GAAIR,eAAeS,wBAAwBT,YAAY;QAEvD,YAAY;YACVU,SAAS;YACTH,YAAY;YACZF,UAAU;YACVM,WAAW;YACXC,OAAO;YACPC,QAAQ;YACRP,iBAAiB;YACjB,GAAGV,WAAWkB,WAAW,CACvB,CAAC,EAAEb,YAAY,cAAc,CAAC,EAC9B,CAAC,EAAEC,YAAY,cAAc,CAAC,EAC9B,CAAC,EAAEC,YAAY,cAAc,CAAC,CAC/B;YACD,GAAGP,WAAWmB,YAAY,CAACd,aAAaC,aAAaC,YAAY;YACjEa,yBAAyBnB,OAAOoB,iBAAiB;YACjDC,WAAW;QACb;QAEA,0FAA0F;QAC1F,2CAA2C;YACzCC,QAAQ,CAAC,CAAC,EAAElB,YAAY,CAAC;YACzB,2BAA2B;QAC7B;QACA,6CAA6C;YAC3CmB,MAAM,CAAC,CAAC,EAAEnB,YAAY,cAAc,CAAC;YACrC,2BAA2B;QAC7B;QACA,8CAA8C;YAC5CoB,KAAK,CAAC,CAAC,EAAEpB,YAAY,CAAC;YACtB,2BAA2B;QAC7B;QACA,4CAA4C;YAC1CqB,OAAO,CAAC,CAAC,EAAErB,YAAY,cAAc,CAAC;YACtC,2BAA2B;QAC7B;IACF;AACF;AAEA;;;;;;CAMC,GACD,OAAO,SAASQ,wBAAwBT,WAAmB;IACzD,qGAAqG;IACrG,wEAAwE;IACxE,MAAMuB,aAAa,CAAC,EAAE,QAAQvB,YAAY,EAAE,CAAC;IAC7C,OAAO;QAAEY,OAAOW;QAAYV,QAAQU;IAAW;AACjD"}
|
package/lib/createSlideStyles.js
CHANGED
|
@@ -13,8 +13,8 @@ import { DATA_POSITIONING_PLACEMENT } from './constants';
|
|
|
13
13
|
opacity: 1
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
|
-
const slideDistanceVarX = '--slide-distance-x';
|
|
17
|
-
const slideDistanceVarY = '--slide-distance-y';
|
|
16
|
+
const slideDistanceVarX = '--fui-positioning-slide-distance-x';
|
|
17
|
+
const slideDistanceVarY = '--fui-positioning-slide-distance-y';
|
|
18
18
|
return {
|
|
19
19
|
animationComposition: 'accumulate',
|
|
20
20
|
animationDuration: tokens.durationSlower,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["createSlideStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\nimport { DATA_POSITIONING_PLACEMENT } from './constants';\n\n/**\n * Creates animation styles so that positioned elements slide in from the main axis\n * @param mainAxis - distance than the element sides for\n * @returns Griffel styles to spread to a slot\n */\nexport function createSlideStyles(mainAxis: number): GriffelStyle {\n const fadeIn = {\n from: {\n opacity: 0,\n },\n to: {\n opacity: 1,\n },\n };\n\n const slideDistanceVarX = '--slide-distance-x';\n const slideDistanceVarY = '--slide-distance-y';\n\n return {\n animationComposition: 'accumulate',\n animationDuration: tokens.durationSlower,\n animationTimingFunction: tokens.curveDecelerateMid,\n [slideDistanceVarX]: `0px`,\n [slideDistanceVarY]: `${mainAxis}px`,\n [`&[${DATA_POSITIONING_PLACEMENT}^=right]`]: {\n [slideDistanceVarX]: `-${mainAxis}px`,\n [slideDistanceVarY]: '0px',\n },\n\n [`&[${DATA_POSITIONING_PLACEMENT}^=bottom]`]: {\n [slideDistanceVarX]: '0px',\n [slideDistanceVarY]: `-${mainAxis}px`,\n },\n\n [`&[${DATA_POSITIONING_PLACEMENT}^=left]`]: {\n [slideDistanceVarX]: `${mainAxis}px`,\n [slideDistanceVarY]: '0px',\n },\n\n animationName: [\n fadeIn,\n {\n from: {\n transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`,\n },\n to: {},\n },\n ],\n\n // Note: at-rules have more specificity in Griffel\n '@media(prefers-reduced-motion)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationDuration: '1ms',\n animationName: fadeIn,\n },\n },\n\n // Tested in Firefox 79\n '@supports not (animation-composition: accumulate)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationName: fadeIn,\n },\n },\n };\n}\n"],"names":["tokens","DATA_POSITIONING_PLACEMENT","createSlideStyles","mainAxis","fadeIn","from","opacity","to","slideDistanceVarX","slideDistanceVarY","animationComposition","animationDuration","durationSlower","animationTimingFunction","curveDecelerateMid","animationName","transform"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,0BAA0B,QAAQ,cAAc;AAEzD;;;;CAIC,GACD,OAAO,SAASC,kBAAkBC,QAAgB;IAChD,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS;QACX;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACLC,sBAAsB;QACtBC,mBAAmBX,OAAOY,cAAc;QACxCC,yBAAyBb,OAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,CAAC,EAAEN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEF,2BAA2B,QAAQ,CAAC,CAAC,EAAE;YAC3C,CAACO,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACvB;QAEA,CAAC,CAAC,EAAE,EAAER,2BAA2B,SAAS,CAAC,CAAC,EAAE;YAC5C,CAACO,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACvC;QAEA,CAAC,CAAC,EAAE,EAAEF,2BAA2B,OAAO,CAAC,CAAC,EAAE;YAC1C,CAACO,kBAAkB,EAAE,CAAC,EAAEL,SAAS,EAAE,CAAC;YACpC,CAACM,kBAAkB,EAAE;QACvB;QAEAM,eAAe;YACbX;YACA;gBACEC,MAAM;oBACJW,WAAW,CAAC,cAAc,EAAER,kBAAkB,OAAO,EAAEC,kBAAkB,EAAE,CAAC;gBAC9E;gBACAF,IAAI,CAAC;YACP;SACD;QAED,kDAAkD;QAClD,kCAAkC;YAChC,CAAC,CAAC,EAAE,EAAEN,2BAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCU,mBAAmB;gBACnBI,eAAeX;YACjB;QACF;QAEA,uBAAuB;QACvB,qDAAqD;YACnD,CAAC,CAAC,EAAE,EAAEH,2BAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCc,eAAeX;YACjB;QACF;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["createSlideStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\nimport { DATA_POSITIONING_PLACEMENT } from './constants';\n\n/**\n * Creates animation styles so that positioned elements slide in from the main axis\n * @param mainAxis - distance than the element sides for\n * @returns Griffel styles to spread to a slot\n */\nexport function createSlideStyles(mainAxis: number): GriffelStyle {\n const fadeIn = {\n from: {\n opacity: 0,\n },\n to: {\n opacity: 1,\n },\n };\n\n const slideDistanceVarX = '--fui-positioning-slide-distance-x';\n const slideDistanceVarY = '--fui-positioning-slide-distance-y';\n\n return {\n animationComposition: 'accumulate',\n animationDuration: tokens.durationSlower,\n animationTimingFunction: tokens.curveDecelerateMid,\n [slideDistanceVarX]: `0px`,\n [slideDistanceVarY]: `${mainAxis}px`,\n [`&[${DATA_POSITIONING_PLACEMENT}^=right]`]: {\n [slideDistanceVarX]: `-${mainAxis}px`,\n [slideDistanceVarY]: '0px',\n },\n\n [`&[${DATA_POSITIONING_PLACEMENT}^=bottom]`]: {\n [slideDistanceVarX]: '0px',\n [slideDistanceVarY]: `-${mainAxis}px`,\n },\n\n [`&[${DATA_POSITIONING_PLACEMENT}^=left]`]: {\n [slideDistanceVarX]: `${mainAxis}px`,\n [slideDistanceVarY]: '0px',\n },\n\n animationName: [\n fadeIn,\n {\n from: {\n transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`,\n },\n to: {},\n },\n ],\n\n // Note: at-rules have more specificity in Griffel\n '@media(prefers-reduced-motion)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationDuration: '1ms',\n animationName: fadeIn,\n },\n },\n\n // Tested in Firefox 79\n '@supports not (animation-composition: accumulate)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationName: fadeIn,\n },\n },\n };\n}\n"],"names":["tokens","DATA_POSITIONING_PLACEMENT","createSlideStyles","mainAxis","fadeIn","from","opacity","to","slideDistanceVarX","slideDistanceVarY","animationComposition","animationDuration","durationSlower","animationTimingFunction","curveDecelerateMid","animationName","transform"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,0BAA0B,QAAQ,cAAc;AAEzD;;;;CAIC,GACD,OAAO,SAASC,kBAAkBC,QAAgB;IAChD,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS;QACX;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACLC,sBAAsB;QACtBC,mBAAmBX,OAAOY,cAAc;QACxCC,yBAAyBb,OAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,CAAC,EAAEN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEF,2BAA2B,QAAQ,CAAC,CAAC,EAAE;YAC3C,CAACO,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACvB;QAEA,CAAC,CAAC,EAAE,EAAER,2BAA2B,SAAS,CAAC,CAAC,EAAE;YAC5C,CAACO,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACvC;QAEA,CAAC,CAAC,EAAE,EAAEF,2BAA2B,OAAO,CAAC,CAAC,EAAE;YAC1C,CAACO,kBAAkB,EAAE,CAAC,EAAEL,SAAS,EAAE,CAAC;YACpC,CAACM,kBAAkB,EAAE;QACvB;QAEAM,eAAe;YACbX;YACA;gBACEC,MAAM;oBACJW,WAAW,CAAC,cAAc,EAAER,kBAAkB,OAAO,EAAEC,kBAAkB,EAAE,CAAC;gBAC9E;gBACAF,IAAI,CAAC;YACP;SACD;QAED,kDAAkD;QAClD,kCAAkC;YAChC,CAAC,CAAC,EAAE,EAAEN,2BAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCU,mBAAmB;gBACnBI,eAAeX;YACjB;QACF;QAEA,uBAAuB;QACvB,qDAAqD;YACnD,CAAC,CAAC,EAAE,EAAEH,2BAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCc,eAAeX;YACjB;QACF;IACF;AACF"}
|
|
@@ -37,24 +37,24 @@ function createArrowStyles(options) {
|
|
|
37
37
|
..._react.shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
|
|
38
38
|
..._react.shorthands.borderBottom(borderWidth, borderStyle, borderColor),
|
|
39
39
|
borderBottomRightRadius: _reacttheme.tokens.borderRadiusSmall,
|
|
40
|
-
transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
|
|
40
|
+
transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg)'
|
|
41
41
|
},
|
|
42
42
|
// Popper sets data-popper-placement on the root element, which is used to align the arrow
|
|
43
43
|
':global([data-popper-placement^="top"])': {
|
|
44
44
|
bottom: `-${borderWidth}`,
|
|
45
|
-
'--angle': '0'
|
|
45
|
+
'--fui-positioning-angle': '0'
|
|
46
46
|
},
|
|
47
47
|
':global([data-popper-placement^="right"])': {
|
|
48
48
|
left: `-${borderWidth} /* @noflip */`,
|
|
49
|
-
'--angle': '90deg'
|
|
49
|
+
'--fui-positioning-angle': '90deg'
|
|
50
50
|
},
|
|
51
51
|
':global([data-popper-placement^="bottom"])': {
|
|
52
52
|
top: `-${borderWidth}`,
|
|
53
|
-
'--angle': '180deg'
|
|
53
|
+
'--fui-positioning-angle': '180deg'
|
|
54
54
|
},
|
|
55
55
|
':global([data-popper-placement^="left"])': {
|
|
56
56
|
right: `-${borderWidth} /* @noflip */`,
|
|
57
|
-
'--angle': '270deg'
|
|
57
|
+
'--fui-positioning-angle': '270deg'
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["createArrowStyles.js"],"sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\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 */ export function createArrowStyles(options) {\n const { arrowHeight, borderWidth = '1px', borderStyle = 'solid', borderColor = tokens.colorTransparentStroke } = options;\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n ...arrowHeight && createArrowHeightStyles(arrowHeight),\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(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),\n ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'\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 * @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 */ export function createArrowHeightStyles(arrowHeight) {\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 {\n width: edgeLength,\n height: edgeLength\n };\n}\n"],"names":["createArrowStyles","createArrowHeightStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","tokens","colorTransparentStroke","position","backgroundColor","visibility","zIndex","content","boxSizing","width","height","shorthands","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"mappings":";;;;;;;;;;;IAwBoBA,iBAAiB;eAAjBA;;IA8CAC,uBAAuB;eAAvBA;;;uBAtEO;4BACJ;AAuBZ,SAASD,kBAAkBE,OAAO;IACzC,MAAM,EAAEC,WAAW,EAAEC,cAAc,KAAK,EAAEC,cAAc,OAAO,EAAEC,cAAcC,kBAAM,CAACC,sBAAsB,EAAE,GAAGN;IACjH,OAAO;QACHO,UAAU;QACVC,iBAAiB;QACjBC,YAAY;QACZC,QAAQ,CAAC;QACT,GAAGT,eAAeF,wBAAwBE,YAAY;QACtD,YAAY;YACRU,SAAS;YACTF,YAAY;YACZF,UAAU;YACVK,WAAW;YACXC,OAAO;YACPC,QAAQ;YACRN,iBAAiB;YACjB,GAAGO,iBAAU,CAACC,WAAW,CAAC,CAAC,EAAEd,YAAY,cAAc,CAAC,EAAE,CAAC,EAAEC,YAAY,cAAc,CAAC,EAAE,CAAC,EAAEC,YAAY,cAAc,CAAC,CAAC;YACzH,GAAGW,iBAAU,CAACE,YAAY,CAACf,aAAaC,aAAaC,YAAY;YACjEc,yBAAyBb,kBAAM,CAACc,iBAAiB;YACjDC,WAAW;QACf;QACA,0FAA0F;QAC1F,2CAA2C;YACvCC,QAAQ,CAAC,CAAC,EAAEnB,YAAY,CAAC;YACzB,
|
|
1
|
+
{"version":3,"sources":["createArrowStyles.js"],"sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\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 */ export function createArrowStyles(options) {\n const { arrowHeight, borderWidth = '1px', borderStyle = 'solid', borderColor = tokens.colorTransparentStroke } = options;\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n ...arrowHeight && createArrowHeightStyles(arrowHeight),\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(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),\n ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg)'\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 '--fui-positioning-angle': '0'\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--fui-positioning-angle': '90deg'\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--fui-positioning-angle': '180deg'\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--fui-positioning-angle': '270deg'\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 */ export function createArrowHeightStyles(arrowHeight) {\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 {\n width: edgeLength,\n height: edgeLength\n };\n}\n"],"names":["createArrowStyles","createArrowHeightStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","tokens","colorTransparentStroke","position","backgroundColor","visibility","zIndex","content","boxSizing","width","height","shorthands","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"mappings":";;;;;;;;;;;IAwBoBA,iBAAiB;eAAjBA;;IA8CAC,uBAAuB;eAAvBA;;;uBAtEO;4BACJ;AAuBZ,SAASD,kBAAkBE,OAAO;IACzC,MAAM,EAAEC,WAAW,EAAEC,cAAc,KAAK,EAAEC,cAAc,OAAO,EAAEC,cAAcC,kBAAM,CAACC,sBAAsB,EAAE,GAAGN;IACjH,OAAO;QACHO,UAAU;QACVC,iBAAiB;QACjBC,YAAY;QACZC,QAAQ,CAAC;QACT,GAAGT,eAAeF,wBAAwBE,YAAY;QACtD,YAAY;YACRU,SAAS;YACTF,YAAY;YACZF,UAAU;YACVK,WAAW;YACXC,OAAO;YACPC,QAAQ;YACRN,iBAAiB;YACjB,GAAGO,iBAAU,CAACC,WAAW,CAAC,CAAC,EAAEd,YAAY,cAAc,CAAC,EAAE,CAAC,EAAEC,YAAY,cAAc,CAAC,EAAE,CAAC,EAAEC,YAAY,cAAc,CAAC,CAAC;YACzH,GAAGW,iBAAU,CAACE,YAAY,CAACf,aAAaC,aAAaC,YAAY;YACjEc,yBAAyBb,kBAAM,CAACc,iBAAiB;YACjDC,WAAW;QACf;QACA,0FAA0F;QAC1F,2CAA2C;YACvCC,QAAQ,CAAC,CAAC,EAAEnB,YAAY,CAAC;YACzB,2BAA2B;QAC/B;QACA,6CAA6C;YACzCoB,MAAM,CAAC,CAAC,EAAEpB,YAAY,cAAc,CAAC;YACrC,2BAA2B;QAC/B;QACA,8CAA8C;YAC1CqB,KAAK,CAAC,CAAC,EAAErB,YAAY,CAAC;YACtB,2BAA2B;QAC/B;QACA,4CAA4C;YACxCsB,OAAO,CAAC,CAAC,EAAEtB,YAAY,cAAc,CAAC;YACtC,2BAA2B;QAC/B;IACJ;AACJ;AAOW,SAASH,wBAAwBE,WAAW;IACnD,qGAAqG;IACrG,wEAAwE;IACxE,MAAMwB,aAAa,CAAC,EAAE,QAAQxB,YAAY,EAAE,CAAC;IAC7C,OAAO;QACHY,OAAOY;QACPX,QAAQW;IACZ;AACJ"}
|
|
@@ -19,8 +19,8 @@ function createSlideStyles(mainAxis) {
|
|
|
19
19
|
opacity: 1
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
-
const slideDistanceVarX = '--slide-distance-x';
|
|
23
|
-
const slideDistanceVarY = '--slide-distance-y';
|
|
22
|
+
const slideDistanceVarX = '--fui-positioning-slide-distance-x';
|
|
23
|
+
const slideDistanceVarY = '--fui-positioning-slide-distance-y';
|
|
24
24
|
return {
|
|
25
25
|
animationComposition: 'accumulate',
|
|
26
26
|
animationDuration: _reacttheme.tokens.durationSlower,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["createSlideStyles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { DATA_POSITIONING_PLACEMENT } from './constants';\n/**\n * Creates animation styles so that positioned elements slide in from the main axis\n * @param mainAxis - distance than the element sides for\n * @returns Griffel styles to spread to a slot\n */ export function createSlideStyles(mainAxis) {\n const fadeIn = {\n from: {\n opacity: 0\n },\n to: {\n opacity: 1\n }\n };\n const slideDistanceVarX = '--slide-distance-x';\n const slideDistanceVarY = '--slide-distance-y';\n return {\n animationComposition: 'accumulate',\n animationDuration: tokens.durationSlower,\n animationTimingFunction: tokens.curveDecelerateMid,\n [slideDistanceVarX]: `0px`,\n [slideDistanceVarY]: `${mainAxis}px`,\n [`&[${DATA_POSITIONING_PLACEMENT}^=right]`]: {\n [slideDistanceVarX]: `-${mainAxis}px`,\n [slideDistanceVarY]: '0px'\n },\n [`&[${DATA_POSITIONING_PLACEMENT}^=bottom]`]: {\n [slideDistanceVarX]: '0px',\n [slideDistanceVarY]: `-${mainAxis}px`\n },\n [`&[${DATA_POSITIONING_PLACEMENT}^=left]`]: {\n [slideDistanceVarX]: `${mainAxis}px`,\n [slideDistanceVarY]: '0px'\n },\n animationName: [\n fadeIn,\n {\n from: {\n transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`\n },\n to: {}\n }\n ],\n // Note: at-rules have more specificity in Griffel\n '@media(prefers-reduced-motion)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationDuration: '1ms',\n animationName: fadeIn\n }\n },\n // Tested in Firefox 79\n '@supports not (animation-composition: accumulate)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationName: fadeIn\n }\n }\n };\n}\n"],"names":["createSlideStyles","mainAxis","fadeIn","from","opacity","to","slideDistanceVarX","slideDistanceVarY","animationComposition","animationDuration","tokens","durationSlower","animationTimingFunction","curveDecelerateMid","DATA_POSITIONING_PLACEMENT","animationName","transform"],"mappings":";;;;+BAMoBA;;;eAAAA;;;4BANG;2BACoB;AAKhC,SAASA,kBAAkBC,QAAQ;IAC1C,MAAMC,SAAS;QACXC,MAAM;YACFC,SAAS;QACb;QACAC,IAAI;YACAD,SAAS;QACb;IACJ;IACA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAC1B,OAAO;QACHC,sBAAsB;QACtBC,mBAAmBC,kBAAM,CAACC,cAAc;QACxCC,yBAAyBF,kBAAM,CAACG,kBAAkB;QAClD,CAACP,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,CAAC,EAAEN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEa,qCAA0B,CAAC,QAAQ,CAAC,CAAC,EAAE;YACzC,CAACR,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACzB;QACA,CAAC,CAAC,EAAE,EAAEO,qCAA0B,CAAC,SAAS,CAAC,CAAC,EAAE;YAC1C,CAACR,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACzC;QACA,CAAC,CAAC,EAAE,EAAEa,qCAA0B,CAAC,OAAO,CAAC,CAAC,EAAE;YACxC,CAACR,kBAAkB,EAAE,CAAC,EAAEL,SAAS,EAAE,CAAC;YACpC,CAACM,kBAAkB,EAAE;QACzB;QACAQ,eAAe;YACXb;YACA;gBACIC,MAAM;oBACFa,WAAW,CAAC,cAAc,EAAEV,kBAAkB,OAAO,EAAEC,kBAAkB,EAAE,CAAC;gBAChF;gBACAF,IAAI,CAAC;YACT;SACH;QACD,kDAAkD;QAClD,kCAAkC;YAC9B,CAAC,CAAC,EAAE,EAAES,qCAA0B,CAAC,CAAC,CAAC,CAAC,EAAE;gBAClCL,mBAAmB;gBACnBM,eAAeb;YACnB;QACJ;QACA,uBAAuB;QACvB,qDAAqD;YACjD,CAAC,CAAC,EAAE,EAAEY,qCAA0B,CAAC,CAAC,CAAC,CAAC,EAAE;gBAClCC,eAAeb;YACnB;QACJ;IACJ;AACJ"}
|
|
1
|
+
{"version":3,"sources":["createSlideStyles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { DATA_POSITIONING_PLACEMENT } from './constants';\n/**\n * Creates animation styles so that positioned elements slide in from the main axis\n * @param mainAxis - distance than the element sides for\n * @returns Griffel styles to spread to a slot\n */ export function createSlideStyles(mainAxis) {\n const fadeIn = {\n from: {\n opacity: 0\n },\n to: {\n opacity: 1\n }\n };\n const slideDistanceVarX = '--fui-positioning-slide-distance-x';\n const slideDistanceVarY = '--fui-positioning-slide-distance-y';\n return {\n animationComposition: 'accumulate',\n animationDuration: tokens.durationSlower,\n animationTimingFunction: tokens.curveDecelerateMid,\n [slideDistanceVarX]: `0px`,\n [slideDistanceVarY]: `${mainAxis}px`,\n [`&[${DATA_POSITIONING_PLACEMENT}^=right]`]: {\n [slideDistanceVarX]: `-${mainAxis}px`,\n [slideDistanceVarY]: '0px'\n },\n [`&[${DATA_POSITIONING_PLACEMENT}^=bottom]`]: {\n [slideDistanceVarX]: '0px',\n [slideDistanceVarY]: `-${mainAxis}px`\n },\n [`&[${DATA_POSITIONING_PLACEMENT}^=left]`]: {\n [slideDistanceVarX]: `${mainAxis}px`,\n [slideDistanceVarY]: '0px'\n },\n animationName: [\n fadeIn,\n {\n from: {\n transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`\n },\n to: {}\n }\n ],\n // Note: at-rules have more specificity in Griffel\n '@media(prefers-reduced-motion)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationDuration: '1ms',\n animationName: fadeIn\n }\n },\n // Tested in Firefox 79\n '@supports not (animation-composition: accumulate)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationName: fadeIn\n }\n }\n };\n}\n"],"names":["createSlideStyles","mainAxis","fadeIn","from","opacity","to","slideDistanceVarX","slideDistanceVarY","animationComposition","animationDuration","tokens","durationSlower","animationTimingFunction","curveDecelerateMid","DATA_POSITIONING_PLACEMENT","animationName","transform"],"mappings":";;;;+BAMoBA;;;eAAAA;;;4BANG;2BACoB;AAKhC,SAASA,kBAAkBC,QAAQ;IAC1C,MAAMC,SAAS;QACXC,MAAM;YACFC,SAAS;QACb;QACAC,IAAI;YACAD,SAAS;QACb;IACJ;IACA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAC1B,OAAO;QACHC,sBAAsB;QACtBC,mBAAmBC,kBAAM,CAACC,cAAc;QACxCC,yBAAyBF,kBAAM,CAACG,kBAAkB;QAClD,CAACP,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,CAAC,EAAEN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEa,qCAA0B,CAAC,QAAQ,CAAC,CAAC,EAAE;YACzC,CAACR,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACzB;QACA,CAAC,CAAC,EAAE,EAAEO,qCAA0B,CAAC,SAAS,CAAC,CAAC,EAAE;YAC1C,CAACR,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACzC;QACA,CAAC,CAAC,EAAE,EAAEa,qCAA0B,CAAC,OAAO,CAAC,CAAC,EAAE;YACxC,CAACR,kBAAkB,EAAE,CAAC,EAAEL,SAAS,EAAE,CAAC;YACpC,CAACM,kBAAkB,EAAE;QACzB;QACAQ,eAAe;YACXb;YACA;gBACIC,MAAM;oBACFa,WAAW,CAAC,cAAc,EAAEV,kBAAkB,OAAO,EAAEC,kBAAkB,EAAE,CAAC;gBAChF;gBACAF,IAAI,CAAC;YACT;SACH;QACD,kDAAkD;QAClD,kCAAkC;YAC9B,CAAC,CAAC,EAAE,EAAES,qCAA0B,CAAC,CAAC,CAAC,CAAC,EAAE;gBAClCL,mBAAmB;gBACnBM,eAAeb;YACnB;QACJ;QACA,uBAAuB;QACvB,qDAAqD;YACjD,CAAC,CAAC,EAAE,EAAEY,qCAA0B,CAAC,CAAC,CAAC,CAAC,EAAE;gBAClCC,eAAeb;YACnB;QACJ;IACJ;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-positioning",
|
|
3
|
-
"version": "9.10.
|
|
3
|
+
"version": "9.10.4",
|
|
4
4
|
"description": "A react wrapper around Popper.js for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@floating-ui/dom": "^1.2.0",
|
|
33
|
-
"@fluentui/react-shared-contexts": "^9.13.
|
|
33
|
+
"@fluentui/react-shared-contexts": "^9.13.2",
|
|
34
34
|
"@fluentui/react-theme": "^9.1.16",
|
|
35
|
-
"@fluentui/react-utilities": "^9.15.
|
|
35
|
+
"@fluentui/react-utilities": "^9.15.4",
|
|
36
36
|
"@griffel/react": "^1.5.14",
|
|
37
37
|
"@swc/helpers": "^0.5.1",
|
|
38
38
|
"floating-ui-devtools": "0.1.2"
|