@fluentui/react-positioning 9.12.0 → 9.12.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. package/CHANGELOG.md +21 -2
  2. package/lib/createArrowStyles.js +1 -1
  3. package/lib/createArrowStyles.js.map +1 -1
  4. package/lib-commonjs/createArrowStyles.js +1 -1
  5. package/lib-commonjs/createArrowStyles.js.map +1 -1
  6. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,12 +1,31 @@
1
1
  # Change Log - @fluentui/react-positioning
2
2
 
3
- This log was last generated on Tue, 09 Jan 2024 10:19:06 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 16 Jan 2024 13:07:16 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.12.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.12.2)
8
+
9
+ Tue, 16 Jan 2024 13:07:16 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.12.1..@fluentui/react-positioning_v9.12.2)
11
+
12
+ ### Patches
13
+
14
+ - chore: bumps @floating-ui/devtools version to latest ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by bernardo.sunderhus@gmail.com)
15
+ - fix: correct version of @types/react-dom peer dep that matches for 16.x ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by mgodbolt@microsoft.com)
16
+
17
+ ## [9.12.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.12.1)
18
+
19
+ Thu, 11 Jan 2024 09:04:29 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.12.0..@fluentui/react-positioning_v9.12.1)
21
+
22
+ ### Patches
23
+
24
+ - fix: update styles to not flip in RTL ([PR #30252](https://github.com/microsoft/fluentui/pull/30252) by olfedias@microsoft.com)
25
+
7
26
  ## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.12.0)
8
27
 
9
- Tue, 09 Jan 2024 10:19:06 GMT
28
+ Tue, 09 Jan 2024 10:21:33 GMT
10
29
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.11.0..@fluentui/react-positioning_v9.12.0)
11
30
 
12
31
  ### Minor changes
package/lib/createArrowStyles.js CHANGED
@@ -41,7 +41,7 @@ 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(--fui-positioning-angle)) translate(0, 50%) rotate(45deg)'
44
+ transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg) /* @noflip */'
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"])': {
package/lib/createArrowStyles.js.map CHANGED
@@ -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(--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"}
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) /* @noflip */',\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-commonjs/createArrowStyles.js CHANGED
@@ -37,7 +37,7 @@ 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(--fui-positioning-angle)) translate(0, 50%) rotate(45deg)'
40
+ transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg) /* @noflip */'
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"])': {
package/lib-commonjs/createArrowStyles.js.map CHANGED
@@ -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(--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"}
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) /* @noflip */'\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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-positioning",
3
- "version": "9.12.0",
3
+ "version": "9.12.2",
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,7 +30,7 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@floating-ui/dom": "^1.2.0",
33
- "@floating-ui/devtools": "0.0.4",
33
+ "@floating-ui/devtools": "0.2.1",
34
34
  "@fluentui/react-shared-contexts": "^9.13.2",
35
35
  "@fluentui/react-theme": "^9.1.16",
36
36
  "@fluentui/react-utilities": "^9.15.6",
@@ -39,7 +39,7 @@
39
39
  },
40
40
  "peerDependencies": {
41
41
  "@types/react": ">=16.14.0 <19.0.0",
42
- "@types/react-dom": ">=16.14.0 <19.0.0",
42
+ "@types/react-dom": ">=16.9.0 <19.0.0",
43
43
  "react": ">=16.14.0 <19.0.0",
44
44
  "react-dom": ">=16.14.0 <19.0.0"
45
45
  },