@fluentui/react-positioning 9.10.2 → 9.10.4

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Thu, 30 Nov 2023 13:37:54 GMT and should not be manually modified.
+This log was last generated on Mon, 18 Dec 2023 14:36:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.10.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.10.4)
+
+Mon, 18 Dec 2023 14:36:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.10.3..@fluentui/react-positioning_v9.10.4)
+
+### Patches
+
+- 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)
+- Bump @fluentui/react-shared-contexts to v9.13.2 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
+- Bump @fluentui/react-utilities to v9.15.4 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
+
+## [9.10.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.10.3)
+
+Thu, 14 Dec 2023 09:58:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.10.2..@fluentui/react-positioning_v9.10.3)
+
+### Patches
+
+- fix: Allows matchTargetSize middleware to be overidden with inline style ([PR #30028](https://github.com/microsoft/fluentui/pull/30028) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.13.1 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
+- Bump @fluentui/react-utilities to v9.15.3 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
+
 ## [9.10.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.10.2)
 
-Thu, 30 Nov 2023 13:37:54 GMT 
+Thu, 30 Nov 2023 13:42:07 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.10.1..@fluentui/react-positioning_v9.10.2)
 
 ### Patches

package/lib/createArrowStyles.js

@@ -41,24 +41,24 @@ import { tokens } from '@fluentui/react-theme';
             ...shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
             ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
             borderBottomRightRadius: tokens.borderRadiusSmall,
-            transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
+            transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg)'
         },
         // Popper sets data-popper-placement on the root element, which is used to align the arrow
         ':global([data-popper-placement^="top"])': {
             bottom: `-${borderWidth}`,
-            '--angle': '0'
+            '--fui-positioning-angle': '0'
         },
         ':global([data-popper-placement^="right"])': {
             left: `-${borderWidth} /* @noflip */`,
-            '--angle': '90deg'
+            '--fui-positioning-angle': '90deg'
         },
         ':global([data-popper-placement^="bottom"])': {
             top: `-${borderWidth}`,
-            '--angle': '180deg'
+            '--fui-positioning-angle': '180deg'
         },
         ':global([data-popper-placement^="left"])': {
             right: `-${borderWidth} /* @noflip */`,
-            '--angle': '270deg'
+            '--fui-positioning-angle': '270deg'
         }
     };
 }

package/lib/createArrowStyles.js.map

@@ -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,WAAW;QACb;QACA,6CAA6C;YAC3CmB,MAAM,CAAC,CAAC,EAAEnB,YAAY,cAAc,CAAC;YACrC,WAAW;QACb;QACA,8CAA8C;YAC5CoB,KAAK,CAAC,CAAC,EAAEpB,YAAY,CAAC;YACtB,WAAW;QACb;QACA,4CAA4C;YAC1CqB,OAAO,CAAC,CAAC,EAAErB,YAAY,cAAc,CAAC;YACtC,WAAW;QACb;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"}
+{"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

@@ -13,8 +13,8 @@ import { DATA_POSITIONING_PLACEMENT } from './constants';
             opacity: 1
         }
     };
-    const slideDistanceVarX = '--slide-distance-x';
-    const slideDistanceVarY = '--slide-distance-y';
+    const slideDistanceVarX = '--fui-positioning-slide-distance-x';
+    const slideDistanceVarY = '--fui-positioning-slide-distance-y';
     return {
         animationComposition: 'accumulate',
         animationDuration: tokens.durationSlower,

package/lib/createSlideStyles.js.map

@@ -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"}
+{"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"}

package/lib/middleware/matchTargetSize.js

@@ -1,3 +1,4 @@
+export const matchTargetSizeCssVar = '--fui-match-target-size';
 export function matchTargetSize() {
     return {
         name: 'matchTargetSize',
@@ -7,8 +8,10 @@ export function matchTargetSize() {
                 return {};
             }
             const { width } = referenceRect;
-            floatingElement.style.width = `${width}px`;
-            floatingElement.style.boxSizing = 'border-box';
+            floatingElement.style.setProperty(matchTargetSizeCssVar, `${width}px`);
+            if (!floatingElement.style.width) {
+                floatingElement.style.width = `var(${matchTargetSizeCssVar})`;
+            }
             return {
                 data: {
                     matchTargetSizeAttempt: true

package/lib/middleware/matchTargetSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["matchTargetSize.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\n\nexport function matchTargetSize(): Middleware {\n  return {\n    name: 'matchTargetSize',\n    fn: async middlewareArguments => {\n      const {\n        rects: { reference: referenceRect, floating: floatingRect },\n        elements: { floating: floatingElement },\n        middlewareData: { matchTargetSize: { matchTargetSizeAttempt = false } = {} },\n      } = middlewareArguments;\n\n      if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {\n        return {};\n      }\n\n      const { width } = referenceRect;\n      floatingElement.style.width = `${width}px`;\n      floatingElement.style.boxSizing = 'border-box';\n\n      return {\n        data: { matchTargetSizeAttempt: true },\n        reset: {\n          rects: true,\n        },\n      };\n    },\n  };\n}\n"],"names":["matchTargetSize","name","fn","middlewareArguments","rects","reference","referenceRect","floating","floatingRect","elements","floatingElement","middlewareData","matchTargetSizeAttempt","width","style","boxSizing","data","reset"],"mappings":"AAEA,OAAO,SAASA;IACd,OAAO;QACLC,MAAM;QACNC,IAAI,OAAMC;YACR,MAAM,EACJC,OAAO,EAAEC,WAAWC,aAAa,EAAEC,UAAUC,YAAY,EAAE,EAC3DC,UAAU,EAAEF,UAAUG,eAAe,EAAE,EACvCC,gBAAgB,EAAEX,iBAAiB,EAAEY,yBAAyB,KAAK,EAAE,GAAG,CAAC,CAAC,EAAE,EAC7E,GAAGT;YAEJ,IAAIG,cAAcO,KAAK,KAAKL,aAAaK,KAAK,IAAID,wBAAwB;gBACxE,OAAO,CAAC;YACV;YAEA,MAAM,EAAEC,KAAK,EAAE,GAAGP;YAClBI,gBAAgBI,KAAK,CAACD,KAAK,GAAG,CAAC,EAAEA,MAAM,EAAE,CAAC;YAC1CH,gBAAgBI,KAAK,CAACC,SAAS,GAAG;YAElC,OAAO;gBACLC,MAAM;oBAAEJ,wBAAwB;gBAAK;gBACrCK,OAAO;oBACLb,OAAO;gBACT;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["matchTargetSize.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\n\nexport const matchTargetSizeCssVar = '--fui-match-target-size';\n\nexport function matchTargetSize(): Middleware {\n  return {\n    name: 'matchTargetSize',\n    fn: async middlewareArguments => {\n      const {\n        rects: { reference: referenceRect, floating: floatingRect },\n        elements: { floating: floatingElement },\n        middlewareData: { matchTargetSize: { matchTargetSizeAttempt = false } = {} },\n      } = middlewareArguments;\n\n      if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {\n        return {};\n      }\n\n      const { width } = referenceRect;\n      floatingElement.style.setProperty(matchTargetSizeCssVar, `${width}px`);\n      if (!floatingElement.style.width) {\n        floatingElement.style.width = `var(${matchTargetSizeCssVar})`;\n      }\n\n      return {\n        data: { matchTargetSizeAttempt: true },\n        reset: {\n          rects: true,\n        },\n      };\n    },\n  };\n}\n"],"names":["matchTargetSizeCssVar","matchTargetSize","name","fn","middlewareArguments","rects","reference","referenceRect","floating","floatingRect","elements","floatingElement","middlewareData","matchTargetSizeAttempt","width","style","setProperty","data","reset"],"mappings":"AAEA,OAAO,MAAMA,wBAAwB,0BAA0B;AAE/D,OAAO,SAASC;IACd,OAAO;QACLC,MAAM;QACNC,IAAI,OAAMC;YACR,MAAM,EACJC,OAAO,EAAEC,WAAWC,aAAa,EAAEC,UAAUC,YAAY,EAAE,EAC3DC,UAAU,EAAEF,UAAUG,eAAe,EAAE,EACvCC,gBAAgB,EAAEX,iBAAiB,EAAEY,yBAAyB,KAAK,EAAE,GAAG,CAAC,CAAC,EAAE,EAC7E,GAAGT;YAEJ,IAAIG,cAAcO,KAAK,KAAKL,aAAaK,KAAK,IAAID,wBAAwB;gBACxE,OAAO,CAAC;YACV;YAEA,MAAM,EAAEC,KAAK,EAAE,GAAGP;YAClBI,gBAAgBI,KAAK,CAACC,WAAW,CAAChB,uBAAuB,CAAC,EAAEc,MAAM,EAAE,CAAC;YACrE,IAAI,CAACH,gBAAgBI,KAAK,CAACD,KAAK,EAAE;gBAChCH,gBAAgBI,KAAK,CAACD,KAAK,GAAG,CAAC,IAAI,EAAEd,sBAAsB,CAAC,CAAC;YAC/D;YAEA,OAAO;gBACLiB,MAAM;oBAAEJ,wBAAwB;gBAAK;gBACrCK,OAAO;oBACLb,OAAO;gBACT;YACF;QACF;IACF;AACF"}

package/lib-commonjs/createArrowStyles.js

@@ -37,24 +37,24 @@ function createArrowStyles(options) {
             ..._react.shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
             ..._react.shorthands.borderBottom(borderWidth, borderStyle, borderColor),
             borderBottomRightRadius: _reacttheme.tokens.borderRadiusSmall,
-            transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
+            transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg)'
         },
         // Popper sets data-popper-placement on the root element, which is used to align the arrow
         ':global([data-popper-placement^="top"])': {
             bottom: `-${borderWidth}`,
-            '--angle': '0'
+            '--fui-positioning-angle': '0'
         },
         ':global([data-popper-placement^="right"])': {
             left: `-${borderWidth} /* @noflip */`,
-            '--angle': '90deg'
+            '--fui-positioning-angle': '90deg'
         },
         ':global([data-popper-placement^="bottom"])': {
             top: `-${borderWidth}`,
-            '--angle': '180deg'
+            '--fui-positioning-angle': '180deg'
         },
         ':global([data-popper-placement^="left"])': {
             right: `-${borderWidth} /* @noflip */`,
-            '--angle': '270deg'
+            '--fui-positioning-angle': '270deg'
         }
     };
 }

package/lib-commonjs/createArrowStyles.js.map

@@ -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,WAAW;QACf;QACA,6CAA6C;YACzCoB,MAAM,CAAC,CAAC,EAAEpB,YAAY,cAAc,CAAC;YACrC,WAAW;QACf;QACA,8CAA8C;YAC1CqB,KAAK,CAAC,CAAC,EAAErB,YAAY,CAAC;YACtB,WAAW;QACf;QACA,4CAA4C;YACxCsB,OAAO,CAAC,CAAC,EAAEtB,YAAY,cAAc,CAAC;YACtC,WAAW;QACf;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"}
+{"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"}

package/lib-commonjs/createSlideStyles.js

@@ -19,8 +19,8 @@ function createSlideStyles(mainAxis) {
             opacity: 1
         }
     };
-    const slideDistanceVarX = '--slide-distance-x';
-    const slideDistanceVarY = '--slide-distance-y';
+    const slideDistanceVarX = '--fui-positioning-slide-distance-x';
+    const slideDistanceVarY = '--fui-positioning-slide-distance-y';
     return {
         animationComposition: 'accumulate',
         animationDuration: _reacttheme.tokens.durationSlower,

package/lib-commonjs/createSlideStyles.js.map

@@ -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"}
+{"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/lib-commonjs/middleware/matchTargetSize.js

@@ -2,12 +2,21 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "matchTargetSize", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    matchTargetSizeCssVar: function() {
+        return matchTargetSizeCssVar;
+    },
+    matchTargetSize: function() {
         return matchTargetSize;
     }
 });
+const matchTargetSizeCssVar = '--fui-match-target-size';
 function matchTargetSize() {
     return {
         name: 'matchTargetSize',
@@ -17,8 +26,10 @@ function matchTargetSize() {
                 return {};
             }
             const { width } = referenceRect;
-            floatingElement.style.width = `${width}px`;
-            floatingElement.style.boxSizing = 'border-box';
+            floatingElement.style.setProperty(matchTargetSizeCssVar, `${width}px`);
+            if (!floatingElement.style.width) {
+                floatingElement.style.width = `var(${matchTargetSizeCssVar})`;
+            }
             return {
                 data: {
                     matchTargetSizeAttempt: true

package/lib-commonjs/middleware/matchTargetSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["matchTargetSize.js"],"sourcesContent":["export function matchTargetSize() {\n    return {\n        name: 'matchTargetSize',\n        fn: async (middlewareArguments)=>{\n            const { rects: { reference: referenceRect, floating: floatingRect }, elements: { floating: floatingElement }, middlewareData: { matchTargetSize: { matchTargetSizeAttempt = false } = {} } } = middlewareArguments;\n            if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {\n                return {};\n            }\n            const { width } = referenceRect;\n            floatingElement.style.width = `${width}px`;\n            floatingElement.style.boxSizing = 'border-box';\n            return {\n                data: {\n                    matchTargetSizeAttempt: true\n                },\n                reset: {\n                    rects: true\n                }\n            };\n        }\n    };\n}\n"],"names":["matchTargetSize","name","fn","middlewareArguments","rects","reference","referenceRect","floating","floatingRect","elements","floatingElement","middlewareData","matchTargetSizeAttempt","width","style","boxSizing","data","reset"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA;IACZ,OAAO;QACHC,MAAM;QACNC,IAAI,OAAOC;YACP,MAAM,EAAEC,OAAO,EAAEC,WAAWC,aAAa,EAAEC,UAAUC,YAAY,EAAE,EAAEC,UAAU,EAAEF,UAAUG,eAAe,EAAE,EAAEC,gBAAgB,EAAEX,iBAAiB,EAAEY,yBAAyB,KAAK,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,GAAGT;YAC/L,IAAIG,cAAcO,KAAK,KAAKL,aAAaK,KAAK,IAAID,wBAAwB;gBACtE,OAAO,CAAC;YACZ;YACA,MAAM,EAAEC,KAAK,EAAE,GAAGP;YAClBI,gBAAgBI,KAAK,CAACD,KAAK,GAAG,CAAC,EAAEA,MAAM,EAAE,CAAC;YAC1CH,gBAAgBI,KAAK,CAACC,SAAS,GAAG;YAClC,OAAO;gBACHC,MAAM;oBACFJ,wBAAwB;gBAC5B;gBACAK,OAAO;oBACHb,OAAO;gBACX;YACJ;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["matchTargetSize.js"],"sourcesContent":["export const matchTargetSizeCssVar = '--fui-match-target-size';\nexport function matchTargetSize() {\n    return {\n        name: 'matchTargetSize',\n        fn: async (middlewareArguments)=>{\n            const { rects: { reference: referenceRect, floating: floatingRect }, elements: { floating: floatingElement }, middlewareData: { matchTargetSize: { matchTargetSizeAttempt = false } = {} } } = middlewareArguments;\n            if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {\n                return {};\n            }\n            const { width } = referenceRect;\n            floatingElement.style.setProperty(matchTargetSizeCssVar, `${width}px`);\n            if (!floatingElement.style.width) {\n                floatingElement.style.width = `var(${matchTargetSizeCssVar})`;\n            }\n            return {\n                data: {\n                    matchTargetSizeAttempt: true\n                },\n                reset: {\n                    rects: true\n                }\n            };\n        }\n    };\n}\n"],"names":["matchTargetSizeCssVar","matchTargetSize","name","fn","middlewareArguments","rects","reference","referenceRect","floating","floatingRect","elements","floatingElement","middlewareData","matchTargetSizeAttempt","width","style","setProperty","data","reset"],"mappings":";;;;;;;;;;;IAAaA,qBAAqB;eAArBA;;IACGC,eAAe;eAAfA;;;AADT,MAAMD,wBAAwB;AAC9B,SAASC;IACZ,OAAO;QACHC,MAAM;QACNC,IAAI,OAAOC;YACP,MAAM,EAAEC,OAAO,EAAEC,WAAWC,aAAa,EAAEC,UAAUC,YAAY,EAAE,EAAEC,UAAU,EAAEF,UAAUG,eAAe,EAAE,EAAEC,gBAAgB,EAAEX,iBAAiB,EAAEY,yBAAyB,KAAK,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,GAAGT;YAC/L,IAAIG,cAAcO,KAAK,KAAKL,aAAaK,KAAK,IAAID,wBAAwB;gBACtE,OAAO,CAAC;YACZ;YACA,MAAM,EAAEC,KAAK,EAAE,GAAGP;YAClBI,gBAAgBI,KAAK,CAACC,WAAW,CAAChB,uBAAuB,CAAC,EAAEc,MAAM,EAAE,CAAC;YACrE,IAAI,CAACH,gBAAgBI,KAAK,CAACD,KAAK,EAAE;gBAC9BH,gBAAgBI,KAAK,CAACD,KAAK,GAAG,CAAC,IAAI,EAAEd,sBAAsB,CAAC,CAAC;YACjE;YACA,OAAO;gBACHiB,MAAM;oBACFJ,wBAAwB;gBAC5B;gBACAK,OAAO;oBACHb,OAAO;gBACX;YACJ;QACJ;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-positioning",
-  "version": "9.10.2",
+  "version": "9.10.4",
   "description": "A react wrapper around Popper.js for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.2.0",
-    "@fluentui/react-shared-contexts": "^9.13.0",
+    "@fluentui/react-shared-contexts": "^9.13.2",
     "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.15.2",
+    "@fluentui/react-utilities": "^9.15.4",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1",
     "floating-ui-devtools": "0.1.2"