@fluentui/react-positioning 9.21.0 → 9.22.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Wed, 25 Feb 2026 13:28:19 GMT and should not be manually modified.
+This log was last generated on Tue, 03 Mar 2026 09:41:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.22.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.22.0)
+
+Tue, 03 Mar 2026 09:41:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.21.0..@fluentui/react-positioning_v9.22.0)
+
+### Minor changes
+
+- refactor: deprecate createSlideStyles ([PR #35763](https://github.com/microsoft/fluentui/pull/35763) by robertpenner@microsoft.com)
+
 ## [9.21.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.21.0)
 
-Wed, 25 Feb 2026 13:28:19 GMT 
+Wed, 25 Feb 2026 13:32:24 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.20.12..@fluentui/react-positioning_v9.21.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -82,6 +82,9 @@ export declare type CreateArrowStylesOptions = {
  * Creates animation styles so that positioned elements slide in from the main axis
  * @param mainAxis - distance than the element sides for
  * @returns Griffel styles to spread to a slot
+ *
+ * @deprecated The popover-related components now use the Slide motion component,
+ * which they inject using the `surfaceMotion` slot.
  */
 export declare function createSlideStyles(mainAxis: number): GriffelStyle;
 
@@ -140,6 +143,15 @@ declare type OnPositioningEndEventDetail = {
 
 export declare type Position = 'above' | 'below' | 'before' | 'after';
 
+/**
+ * CSS custom properties used to encode the slide direction for positioning-aware enter animations.
+ * Set at runtime by `usePositioningSlideDirection` and registered via the CSS
+ * `registerProperty()` API so browsers can interpolate them as `<length>` values.
+ */
+export declare const POSITIONING_SLIDE_DIRECTION_VAR_X = "--fui-positioning-slide-direction-x";
+
+export declare const POSITIONING_SLIDE_DIRECTION_VAR_Y = "--fui-positioning-slide-direction-y";
+
 export declare type PositioningBoundary = PositioningRect | HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';
 
 export declare type PositioningConfigurationFn = (params: {
@@ -350,6 +362,24 @@ declare interface UsePositioningReturn {
     arrowRef: React_2.MutableRefObject<any>;
 }
 
+/**
+ * A hook that manages CSS custom properties for slide direction based on positioning placement.
+ *
+ * It wraps the `onPositioningEnd` callback to set `--fui-positioning-slide-direction-x` and
+ * `--fui-positioning-slide-direction-y` CSS custom properties on the positioned element,
+ * and registers them via `CSS.registerProperty` to avoid properties propagation down to a DOM tree.
+ *
+ * @returns The wrapped `onPositioningEnd` handler to pass to the positioning config.
+ */
+export declare function usePositioningSlideDirection(options: UsePositioningSlideDirectionOptions): NonNullable<PositioningProps['onPositioningEnd']>;
+
+declare type UsePositioningSlideDirectionOptions = {
+    /** The target document for CSS.registerProperty. */
+    targetDocument: Document | undefined;
+    /** The user's original onPositioningEnd callback, if any. */
+    onPositioningEnd?: PositioningProps['onPositioningEnd'];
+};
+
 export declare function useSafeZoneArea({ debug, disabled, onSafeZoneEnter, onSafeZoneMove, onSafeZoneLeave, onSafeZoneTimeout, timeout, }?: UseSafeZoneOptions): {
     containerRef: RefObjectFunction<HTMLElement>;
     targetRef: RefObjectFunction<HTMLElement>;

package/lib/constants.js

@@ -3,3 +3,9 @@ export const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
 export const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
 export const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
 export const POSITIONING_END_EVENT = 'fui-positioningend';
+/**
+ * CSS custom properties used to encode the slide direction for positioning-aware enter animations.
+ * Set at runtime by `usePositioningSlideDirection` and registered via the CSS
+ * `registerProperty()` API so browsers can interpolate them as `<length>` values.
+ */ export const POSITIONING_SLIDE_DIRECTION_VAR_X = '--fui-positioning-slide-direction-x';
+export const POSITIONING_SLIDE_DIRECTION_VAR_Y = '--fui-positioning-slide-direction-y';

package/lib/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\nexport const POSITIONING_END_EVENT = 'fui-positioningend';\n"],"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT","POSITIONING_END_EVENT"],"mappings":"AAAA,OAAO,MAAMA,gCAAgC,8BAA8B;AAC3E,OAAO,MAAMC,2BAA2B,sBAAsB;AAC9D,OAAO,MAAMC,0BAA0B,+BAA+B;AACtE,OAAO,MAAMC,6BAA6B,wBAAwB;AAClE,OAAO,MAAMC,wBAAwB,qBAAqB"}
+{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\nexport const POSITIONING_END_EVENT = 'fui-positioningend';\n\n/**\n * CSS custom properties used to encode the slide direction for positioning-aware enter animations.\n * Set at runtime by `usePositioningSlideDirection` and registered via the CSS\n * `registerProperty()` API so browsers can interpolate them as `<length>` values.\n */\nexport const POSITIONING_SLIDE_DIRECTION_VAR_X = '--fui-positioning-slide-direction-x';\nexport const POSITIONING_SLIDE_DIRECTION_VAR_Y = '--fui-positioning-slide-direction-y';\n"],"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT","POSITIONING_END_EVENT","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y"],"mappings":"AAAA,OAAO,MAAMA,gCAAgC,8BAA8B;AAC3E,OAAO,MAAMC,2BAA2B,sBAAsB;AAC9D,OAAO,MAAMC,0BAA0B,+BAA+B;AACtE,OAAO,MAAMC,6BAA6B,wBAAwB;AAClE,OAAO,MAAMC,wBAAwB,qBAAqB;AAE1D;;;;CAIC,GACD,OAAO,MAAMC,oCAAoC,sCAAsC;AACvF,OAAO,MAAMC,oCAAoC,sCAAsC"}

package/lib/createSlideStyles.js

@@ -4,6 +4,9 @@ import { DATA_POSITIONING_PLACEMENT } from './constants';
  * Creates animation styles so that positioned elements slide in from the main axis
  * @param mainAxis - distance than the element sides for
  * @returns Griffel styles to spread to a slot
+ *
+ * @deprecated The popover-related components now use the Slide motion component,
+ * which they inject using the `surfaceMotion` slot.
  */ export function createSlideStyles(mainAxis) {
     // With 'accumulate' animation composition, these opacity keyframes are added onto the default opacity of 1.
     const fadeIn = {

package/lib/createSlideStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/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  // With 'accumulate' animation composition, these opacity keyframes are added onto the default opacity of 1.\n  const fadeIn = {\n    from: {\n      opacity: -1, // becomes opacity: 0\n    },\n    to: {\n      opacity: 0, // becomes 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    // NOTE: there was a previous attempt to give fadeIn a separate composition mode:\n    //   animationComposition: 'replace, accumulate',\n    // but somehow this was linked to a performance regression observed in Teams (bug #4255933)\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,4GAA4G;IAC5G,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS,CAAC;QACZ;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACL,iFAAiF;QACjF,iDAAiD;QACjD,2FAA2F;QAC3FC,sBAAsB;QACtBC,mBAAmBX,OAAOY,cAAc;QACxCC,yBAAyBb,OAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,GAAGN,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,GAAGL,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":["../src/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 *\n * @deprecated The popover-related components now use the Slide motion component,\n * which they inject using the `surfaceMotion` slot.\n */\nexport function createSlideStyles(mainAxis: number): GriffelStyle {\n  // With 'accumulate' animation composition, these opacity keyframes are added onto the default opacity of 1.\n  const fadeIn = {\n    from: {\n      opacity: -1, // becomes opacity: 0\n    },\n    to: {\n      opacity: 0, // becomes 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    // NOTE: there was a previous attempt to give fadeIn a separate composition mode:\n    //   animationComposition: 'replace, accumulate',\n    // but somehow this was linked to a performance regression observed in Teams (bug #4255933)\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;;;;;;;CAOC,GACD,OAAO,SAASC,kBAAkBC,QAAgB;IAChD,4GAA4G;IAC5G,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS,CAAC;QACZ;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACL,iFAAiF;QACjF,iDAAiD;QACjD,2FAA2F;QAC3FC,sBAAsB;QACtBC,mBAAmBX,OAAOY,cAAc;QACxCC,yBAAyBb,OAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,GAAGN,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,GAAGL,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/index.js

@@ -1,5 +1,8 @@
 export { createVirtualElementFromClick } from './createVirtualElementFromClick';
+export { usePositioningSlideDirection } from './usePositioningSlideDirection';
+export { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';
 export { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';
+// eslint-disable-next-line @typescript-eslint/no-deprecated
 export { createSlideStyles } from './createSlideStyles';
 export { PositioningConfigurationProvider } from './PositioningConfigurationContext';
 export { usePositioning } from './usePositioning';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport { createSlideStyles } from './createSlideStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\n\nexport { PositioningConfigurationProvider } from './PositioningConfigurationContext';\n\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { useSafeZoneArea } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport type { UseSafeZoneOptions } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\n\nexport type {\n  Alignment,\n  AutoSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  Boundary,\n  Offset,\n  OffsetFunction,\n  OffsetFunctionParam,\n  OffsetObject,\n  OffsetShorthand,\n  Position,\n  PositioningBoundary,\n  PositioningImperativeRef,\n  PositioningProps,\n  PositioningRect,\n  PositioningShorthand,\n  PositioningShorthandValue,\n  PositioningVirtualElement,\n  SetVirtualMouseTarget,\n  PositioningConfigurationFn,\n  PositioningConfigurationFnOptions,\n} from './types';\n"],"names":["createVirtualElementFromClick","createArrowHeightStyles","createArrowStyles","createSlideStyles","PositioningConfigurationProvider","usePositioning","usePositioningMouseTarget","useSafeZoneArea","resolvePositioningShorthand","mergeArrowOffset"],"mappings":"AAAA,SAASA,6BAA6B,QAAQ,kCAAkC;AAChF,SAASC,uBAAuB,EAAEC,iBAAiB,QAAQ,sBAAsB;AACjF,SAASC,iBAAiB,QAAQ,sBAAsB;AAGxD,SAASC,gCAAgC,QAAQ,oCAAoC;AAErF,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,eAAe,QAAQ,0CAA0C;AAE1E,SAASC,2BAA2B,EAAEC,gBAAgB,QAAQ,gBAAgB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { usePositioningSlideDirection } from './usePositioningSlideDirection';\nexport { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { createSlideStyles } from './createSlideStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\n\nexport { PositioningConfigurationProvider } from './PositioningConfigurationContext';\n\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { useSafeZoneArea } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport type { UseSafeZoneOptions } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\n\nexport type {\n  Alignment,\n  AutoSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  Boundary,\n  Offset,\n  OffsetFunction,\n  OffsetFunctionParam,\n  OffsetObject,\n  OffsetShorthand,\n  Position,\n  PositioningBoundary,\n  PositioningImperativeRef,\n  PositioningProps,\n  PositioningRect,\n  PositioningShorthand,\n  PositioningShorthandValue,\n  PositioningVirtualElement,\n  SetVirtualMouseTarget,\n  PositioningConfigurationFn,\n  PositioningConfigurationFnOptions,\n} from './types';\n"],"names":["createVirtualElementFromClick","usePositioningSlideDirection","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y","createArrowHeightStyles","createArrowStyles","createSlideStyles","PositioningConfigurationProvider","usePositioning","usePositioningMouseTarget","useSafeZoneArea","resolvePositioningShorthand","mergeArrowOffset"],"mappings":"AAAA,SAASA,6BAA6B,QAAQ,kCAAkC;AAChF,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,iCAAiC,EAAEC,iCAAiC,QAAQ,cAAc;AACnG,SAASC,uBAAuB,EAAEC,iBAAiB,QAAQ,sBAAsB;AACjF,4DAA4D;AAC5D,SAASC,iBAAiB,QAAQ,sBAAsB;AAGxD,SAASC,gCAAgC,QAAQ,oCAAoC;AAErF,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,eAAe,QAAQ,0CAA0C;AAE1E,SAASC,2BAA2B,EAAEC,gBAAgB,QAAQ,gBAAgB"}

package/lib/usePositioningSlideDirection.js

@@ -0,0 +1,78 @@
+'use client';
+import * as React from 'react';
+import { useEventCallback, isHTMLElement } from '@fluentui/react-utilities';
+import { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';
+/**
+ * Returns the slide direction unit vectors for a given Floating UI placement.
+ * Values are -1, 0, or 1, representing the direction the element slides in from.
+ */ export function getPlacementSlideDirections(placement) {
+    const side = placement.split('-')[0];
+    // Default to sliding down from the top side
+    let x = 0;
+    let y = 1;
+    if (side === 'right') {
+        x = -1;
+        y = 0;
+    } else if (side === 'bottom') {
+        x = 0;
+        y = -1;
+    } else if (side === 'left') {
+        x = 1;
+        y = 0;
+    }
+    return {
+        x,
+        y
+    };
+}
+/**
+ * A hook that manages CSS custom properties for slide direction based on positioning placement.
+ *
+ * It wraps the `onPositioningEnd` callback to set `--fui-positioning-slide-direction-x` and
+ * `--fui-positioning-slide-direction-y` CSS custom properties on the positioned element,
+ * and registers them via `CSS.registerProperty` to avoid properties propagation down to a DOM tree.
+ *
+ * @returns The wrapped `onPositioningEnd` handler to pass to the positioning config.
+ */ export function usePositioningSlideDirection(options) {
+    const { targetDocument, onPositioningEnd } = options;
+    const handlePositionEnd = useEventCallback((e)=>{
+        onPositioningEnd === null || onPositioningEnd === void 0 ? void 0 : onPositioningEnd(e);
+        const element = e.target;
+        const placement = e.detail.placement;
+        if (!isHTMLElement(element)) {
+            return;
+        }
+        const { x, y } = getPlacementSlideDirections(placement);
+        element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_X, `${x}px`);
+        element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_Y, `${y}px`);
+    });
+    // Register the CSS custom properties so they can be interpolated during animations.
+    // CSS.registerProperty is idempotent — the try/catch handles the case where
+    // properties are already registered.
+    React.useEffect(()=>{
+        var _targetDocument_defaultView_CSS, _targetDocument_defaultView;
+        var _targetDocument_defaultView_CSS_registerProperty;
+        const registerProperty = (_targetDocument_defaultView_CSS_registerProperty = targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : (_targetDocument_defaultView_CSS = _targetDocument_defaultView.CSS) === null || _targetDocument_defaultView_CSS === void 0 ? void 0 : _targetDocument_defaultView_CSS.registerProperty) !== null && _targetDocument_defaultView_CSS_registerProperty !== void 0 ? _targetDocument_defaultView_CSS_registerProperty : ()=>{
+        // No-op if registerProperty is not supported
+        };
+        try {
+            registerProperty({
+                name: POSITIONING_SLIDE_DIRECTION_VAR_X,
+                syntax: '<length>',
+                inherits: false,
+                initialValue: '0px'
+            });
+            registerProperty({
+                name: POSITIONING_SLIDE_DIRECTION_VAR_Y,
+                syntax: '<length>',
+                inherits: false,
+                initialValue: '0px'
+            });
+        } catch (e) {
+        // Ignore errors from registerProperty, which can occur if the properties are already registered
+        }
+    }, [
+        targetDocument
+    ]);
+    return handlePositionEnd;
+}

package/lib/usePositioningSlideDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/usePositioningSlideDirection.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport type { PositioningProps } from './types';\nimport { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';\n\n/**\n * Returns the slide direction unit vectors for a given Floating UI placement.\n * Values are -1, 0, or 1, representing the direction the element slides in from.\n */\nexport function getPlacementSlideDirections(placement: string): { x: number; y: number } {\n  const side = placement.split('-')[0];\n  // Default to sliding down from the top side\n  let x = 0;\n  let y = 1;\n\n  if (side === 'right') {\n    x = -1;\n    y = 0;\n  } else if (side === 'bottom') {\n    x = 0;\n    y = -1;\n  } else if (side === 'left') {\n    x = 1;\n    y = 0;\n  }\n\n  return { x, y };\n}\n\ntype UsePositioningSlideDirectionOptions = {\n  /** The target document for CSS.registerProperty. */\n  targetDocument: Document | undefined;\n  /** The user's original onPositioningEnd callback, if any. */\n  onPositioningEnd?: PositioningProps['onPositioningEnd'];\n};\n\n/**\n * A hook that manages CSS custom properties for slide direction based on positioning placement.\n *\n * It wraps the `onPositioningEnd` callback to set `--fui-positioning-slide-direction-x` and\n * `--fui-positioning-slide-direction-y` CSS custom properties on the positioned element,\n * and registers them via `CSS.registerProperty` to avoid properties propagation down to a DOM tree.\n *\n * @returns The wrapped `onPositioningEnd` handler to pass to the positioning config.\n */\nexport function usePositioningSlideDirection(\n  options: UsePositioningSlideDirectionOptions,\n): NonNullable<PositioningProps['onPositioningEnd']> {\n  const { targetDocument, onPositioningEnd } = options;\n\n  const handlePositionEnd: NonNullable<PositioningProps['onPositioningEnd']> = useEventCallback(e => {\n    onPositioningEnd?.(e);\n\n    const element = e.target;\n    const placement = e.detail.placement;\n\n    if (!isHTMLElement(element)) {\n      return;\n    }\n\n    const { x, y } = getPlacementSlideDirections(placement);\n\n    element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_X, `${x}px`);\n    element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_Y, `${y}px`);\n  });\n\n  // Register the CSS custom properties so they can be interpolated during animations.\n  // CSS.registerProperty is idempotent — the try/catch handles the case where\n  // properties are already registered.\n  React.useEffect(() => {\n    const registerProperty =\n      targetDocument?.defaultView?.CSS?.registerProperty ??\n      (() => {\n        // No-op if registerProperty is not supported\n      });\n\n    try {\n      registerProperty({\n        name: POSITIONING_SLIDE_DIRECTION_VAR_X,\n        syntax: '<length>',\n        inherits: false,\n        initialValue: '0px',\n      });\n      registerProperty({\n        name: POSITIONING_SLIDE_DIRECTION_VAR_Y,\n        syntax: '<length>',\n        inherits: false,\n        initialValue: '0px',\n      });\n    } catch (e) {\n      // Ignore errors from registerProperty, which can occur if the properties are already registered\n    }\n  }, [targetDocument]);\n\n  return handlePositionEnd;\n}\n"],"names":["React","useEventCallback","isHTMLElement","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y","getPlacementSlideDirections","placement","side","split","x","y","usePositioningSlideDirection","options","targetDocument","onPositioningEnd","handlePositionEnd","e","element","target","detail","style","setProperty","useEffect","registerProperty","defaultView","CSS","name","syntax","inherits","initialValue"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5E,SAASC,iCAAiC,EAAEC,iCAAiC,QAAQ,cAAc;AAEnG;;;CAGC,GACD,OAAO,SAASC,4BAA4BC,SAAiB;IAC3D,MAAMC,OAAOD,UAAUE,KAAK,CAAC,IAAI,CAAC,EAAE;IACpC,4CAA4C;IAC5C,IAAIC,IAAI;IACR,IAAIC,IAAI;IAER,IAAIH,SAAS,SAAS;QACpBE,IAAI,CAAC;QACLC,IAAI;IACN,OAAO,IAAIH,SAAS,UAAU;QAC5BE,IAAI;QACJC,IAAI,CAAC;IACP,OAAO,IAAIH,SAAS,QAAQ;QAC1BE,IAAI;QACJC,IAAI;IACN;IAEA,OAAO;QAAED;QAAGC;IAAE;AAChB;AASA;;;;;;;;CAQC,GACD,OAAO,SAASC,6BACdC,OAA4C;IAE5C,MAAM,EAAEC,cAAc,EAAEC,gBAAgB,EAAE,GAAGF;IAE7C,MAAMG,oBAAuEd,iBAAiBe,CAAAA;QAC5FF,6BAAAA,uCAAAA,iBAAmBE;QAEnB,MAAMC,UAAUD,EAAEE,MAAM;QACxB,MAAMZ,YAAYU,EAAEG,MAAM,CAACb,SAAS;QAEpC,IAAI,CAACJ,cAAce,UAAU;YAC3B;QACF;QAEA,MAAM,EAAER,CAAC,EAAEC,CAAC,EAAE,GAAGL,4BAA4BC;QAE7CW,QAAQG,KAAK,CAACC,WAAW,CAAClB,mCAAmC,GAAGM,EAAE,EAAE,CAAC;QACrEQ,QAAQG,KAAK,CAACC,WAAW,CAACjB,mCAAmC,GAAGM,EAAE,EAAE,CAAC;IACvE;IAEA,oFAAoF;IACpF,4EAA4E;IAC5E,qCAAqC;IACrCV,MAAMsB,SAAS,CAAC;YAEZT,iCAAAA;YAAAA;QADF,MAAMU,mBACJV,CAAAA,mDAAAA,2BAAAA,sCAAAA,8BAAAA,eAAgBW,WAAW,cAA3BX,mDAAAA,kCAAAA,4BAA6BY,GAAG,cAAhCZ,sDAAAA,gCAAkCU,gBAAgB,cAAlDV,8DAAAA,mDACC;QACC,6CAA6C;QAC/C;QAEF,IAAI;YACFU,iBAAiB;gBACfG,MAAMvB;gBACNwB,QAAQ;gBACRC,UAAU;gBACVC,cAAc;YAChB;YACAN,iBAAiB;gBACfG,MAAMtB;gBACNuB,QAAQ;gBACRC,UAAU;gBACVC,cAAc;YAChB;QACF,EAAE,OAAOb,GAAG;QACV,gGAAgG;QAClG;IACF,GAAG;QAACH;KAAe;IAEnB,OAAOE;AACT"}

package/lib-commonjs/constants.js

@@ -23,6 +23,12 @@ _export(exports, {
     },
     POSITIONING_END_EVENT: function() {
         return POSITIONING_END_EVENT;
+    },
+    POSITIONING_SLIDE_DIRECTION_VAR_X: function() {
+        return POSITIONING_SLIDE_DIRECTION_VAR_X;
+    },
+    POSITIONING_SLIDE_DIRECTION_VAR_Y: function() {
+        return POSITIONING_SLIDE_DIRECTION_VAR_Y;
     }
 });
 const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
@@ -30,3 +36,5 @@ const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
 const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
 const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
 const POSITIONING_END_EVENT = 'fui-positioningend';
+const POSITIONING_SLIDE_DIRECTION_VAR_X = '--fui-positioning-slide-direction-x';
+const POSITIONING_SLIDE_DIRECTION_VAR_Y = '--fui-positioning-slide-direction-y';

package/lib-commonjs/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\nexport const POSITIONING_END_EVENT = 'fui-positioningend';\n"],"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT","POSITIONING_END_EVENT"],"mappings":";;;;;;;;;;;4BACaC;;;2BACAC;;;iCAFAF;;;8BAGAG;;;yBACAC;;;;AAJN,MAAMJ,gCAAgC,8BAA8B;AACpE,MAAMC,2BAA2B,sBAAsB;AACvD,MAAMC,0BAA0B,+BAA+B;AAC/D,MAAMC,6BAA6B,wBAAwB;AAC3D,MAAMC,wBAAwB,qBAAqB"}
+{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\nexport const POSITIONING_END_EVENT = 'fui-positioningend';\n\n/**\n * CSS custom properties used to encode the slide direction for positioning-aware enter animations.\n * Set at runtime by `usePositioningSlideDirection` and registered via the CSS\n * `registerProperty()` API so browsers can interpolate them as `<length>` values.\n */\nexport const POSITIONING_SLIDE_DIRECTION_VAR_X = '--fui-positioning-slide-direction-x';\nexport const POSITIONING_SLIDE_DIRECTION_VAR_Y = '--fui-positioning-slide-direction-y';\n"],"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT","POSITIONING_END_EVENT","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y"],"mappings":";;;;;;;;;;;IACaC,wBAAAA;;;2BACAC;;;iCAFAF;;;8BAGAG;;;yBACAC;;;qCAOAC;;;qCACAC;;;;AAZN,MAAMN,gCAAgC,8BAA8B;AACpE,iCAAiC,sBAAsB;AACvD,MAAME,0BAA0B,+BAA+B;AAC/D,MAAMC,6BAA6B,wBAAwB;AAC3D,MAAMC,wBAAwB,qBAAqB;AAOnD,MAAMC,oCAAoC,sCAAsC;AAChF,MAAMC,oCAAoC,sCAAsC"}

package/lib-commonjs/createSlideStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/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  // With 'accumulate' animation composition, these opacity keyframes are added onto the default opacity of 1.\n  const fadeIn = {\n    from: {\n      opacity: -1, // becomes opacity: 0\n    },\n    to: {\n      opacity: 0, // becomes 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    // NOTE: there was a previous attempt to give fadeIn a separate composition mode:\n    //   animationComposition: 'replace, accumulate',\n    // but somehow this was linked to a performance regression observed in Teams (bug #4255933)\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":";;;;+BASgBE;;;;;;4BATO,wBAAwB;2BAEJ,cAAc;AAOlD,2BAA2BC,QAAgB;IAChD,4GAA4G;IAC5G,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS,CAAC;QACZ;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACL,iFAAiF;QACjF,iDAAiD;QACjD,2FAA2F;QAC3FC,sBAAsB;QACtBC,mBAAmBX,kBAAAA,CAAOY,cAAc;QACxCC,yBAAyBb,kBAAAA,CAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,GAAGN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEF,qCAAAA,CAA2B,QAAQ,CAAC,CAAC,EAAE;YAC3C,CAACO,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACvB;QAEA,CAAC,CAAC,EAAE,EAAER,qCAAAA,CAA2B,SAAS,CAAC,CAAC,EAAE;YAC5C,CAACO,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACvC;QAEA,CAAC,CAAC,EAAE,EAAEF,qCAAAA,CAA2B,OAAO,CAAC,CAAC,EAAE;YAC1C,CAACO,kBAAkB,EAAE,GAAGL,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,qCAAAA,CAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCU,mBAAmB;gBACnBI,eAAeX;YACjB;QACF;QAEA,uBAAuB;QACvB,qDAAqD;YACnD,CAAC,CAAC,EAAE,EAAEH,qCAAAA,CAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCc,eAAeX;YACjB;QACF;IACF;AACF"}
+{"version":3,"sources":["../src/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 *\n * @deprecated The popover-related components now use the Slide motion component,\n * which they inject using the `surfaceMotion` slot.\n */\nexport function createSlideStyles(mainAxis: number): GriffelStyle {\n  // With 'accumulate' animation composition, these opacity keyframes are added onto the default opacity of 1.\n  const fadeIn = {\n    from: {\n      opacity: -1, // becomes opacity: 0\n    },\n    to: {\n      opacity: 0, // becomes 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    // NOTE: there was a previous attempt to give fadeIn a separate composition mode:\n    //   animationComposition: 'replace, accumulate',\n    // but somehow this was linked to a performance regression observed in Teams (bug #4255933)\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":";;;;+BAYgBE;;;;;;4BAZO,wBAAwB;2BAEJ,cAAc;AAUlD,2BAA2BC,QAAgB;IAChD,4GAA4G;IAC5G,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS,CAAC;QACZ;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACL,iFAAiF;QACjF,iDAAiD;QACjD,2FAA2F;QAC3FC,sBAAsB;QACtBC,mBAAmBX,kBAAAA,CAAOY,cAAc;QACxCC,yBAAyBb,kBAAAA,CAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,GAAGN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEF,qCAAAA,CAA2B,QAAQ,CAAC,CAAC,EAAE;YAC3C,CAACO,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACvB;QAEA,CAAC,CAAC,EAAE,EAAER,qCAAAA,CAA2B,SAAS,CAAC,CAAC,EAAE;YAC5C,CAACO,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACvC;QAEA,CAAC,CAAC,EAAE,EAAEF,qCAAAA,CAA2B,OAAO,CAAC,CAAC,EAAE;YAC1C,CAACO,kBAAkB,EAAE,GAAGL,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,qCAAAA,CAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCU,mBAAmB;gBACnBI,eAAeX;YACjB;QACF;QAEA,uBAAuB;QACvB,qDAAqD;YACnD,CAAC,CAAC,EAAE,EAAEH,qCAAAA,CAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCc,eAAeX;YACjB;QACF;IACF;AACF"}

package/lib-commonjs/index.js

@@ -9,6 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    POSITIONING_SLIDE_DIRECTION_VAR_X: function() {
+        return _constants.POSITIONING_SLIDE_DIRECTION_VAR_X;
+    },
+    POSITIONING_SLIDE_DIRECTION_VAR_Y: function() {
+        return _constants.POSITIONING_SLIDE_DIRECTION_VAR_Y;
+    },
     PositioningConfigurationProvider: function() {
         return _PositioningConfigurationContext.PositioningConfigurationProvider;
     },
@@ -36,11 +42,16 @@ _export(exports, {
     usePositioningMouseTarget: function() {
         return _usePositioningMouseTarget.usePositioningMouseTarget;
     },
+    usePositioningSlideDirection: function() {
+        return _usePositioningSlideDirection.usePositioningSlideDirection;
+    },
     useSafeZoneArea: function() {
         return _useSafeZoneArea.useSafeZoneArea;
     }
 });
 const _createVirtualElementFromClick = require("./createVirtualElementFromClick");
+const _usePositioningSlideDirection = require("./usePositioningSlideDirection");
+const _constants = require("./constants");
 const _createArrowStyles = require("./createArrowStyles");
 const _createSlideStyles = require("./createSlideStyles");
 const _PositioningConfigurationContext = require("./PositioningConfigurationContext");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport { createSlideStyles } from './createSlideStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\n\nexport { PositioningConfigurationProvider } from './PositioningConfigurationContext';\n\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { useSafeZoneArea } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport type { UseSafeZoneOptions } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\n\nexport type {\n  Alignment,\n  AutoSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  Boundary,\n  Offset,\n  OffsetFunction,\n  OffsetFunctionParam,\n  OffsetObject,\n  OffsetShorthand,\n  Position,\n  PositioningBoundary,\n  PositioningImperativeRef,\n  PositioningProps,\n  PositioningRect,\n  PositioningShorthand,\n  PositioningShorthandValue,\n  PositioningVirtualElement,\n  SetVirtualMouseTarget,\n  PositioningConfigurationFn,\n  PositioningConfigurationFnOptions,\n} from './types';\n"],"names":["createVirtualElementFromClick","createArrowHeightStyles","createArrowStyles","createSlideStyles","PositioningConfigurationProvider","usePositioning","usePositioningMouseTarget","useSafeZoneArea","resolvePositioningShorthand","mergeArrowOffset"],"mappings":";;;;;;;;;;;;eAKSI,iEAAgC;;;eAJhCH,0CAAuB;;;eAAEC,oCAAiB;;;eAC1CC,oCAAiB;;;eAFjBH,4DAA6B;;IAWAS;sCAAgB;;;eAA7CD,kCAA2B;;;eAJ3BH,8BAAc;;;eACdC,oDAAyB;;;eACzBC,gCAAe;;;+CATsB,kCAAkC;mCACrB,sBAAsB;mCAC/C,sBAAsB;iDAGP,oCAAoC;gCAEtD,mBAAmB;2CACR,8BAA8B;iCACxC,0CAA0C;uBAEZ,gBAAgB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { usePositioningSlideDirection } from './usePositioningSlideDirection';\nexport { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { createSlideStyles } from './createSlideStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\n\nexport { PositioningConfigurationProvider } from './PositioningConfigurationContext';\n\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { useSafeZoneArea } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport type { UseSafeZoneOptions } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\n\nexport type {\n  Alignment,\n  AutoSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  Boundary,\n  Offset,\n  OffsetFunction,\n  OffsetFunctionParam,\n  OffsetObject,\n  OffsetShorthand,\n  Position,\n  PositioningBoundary,\n  PositioningImperativeRef,\n  PositioningProps,\n  PositioningRect,\n  PositioningShorthand,\n  PositioningShorthandValue,\n  PositioningVirtualElement,\n  SetVirtualMouseTarget,\n  PositioningConfigurationFn,\n  PositioningConfigurationFnOptions,\n} from './types';\n"],"names":["createVirtualElementFromClick","usePositioningSlideDirection","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y","createArrowHeightStyles","createArrowStyles","createSlideStyles","PositioningConfigurationProvider","usePositioning","usePositioningMouseTarget","useSafeZoneArea","resolvePositioningShorthand","mergeArrowOffset"],"mappings":";;;;;;;;;;;IAESE,iCAAiC;;;;eAAEC,4CAAiC;;;eAMpEI,iEAAgC;;IALhCH;yDAAuB;;;eAAEC,oCAAiB;;;eAE1CC,oCAAiB;;iCALY;eAA7BN;;;eAc6BY,uBAAgB;;+BAAlB;eAA3BD;;;eAJAH,8BAAc;;IACdC;mEAAyB;;;eAVzBR,0DAA4B;;;eAW5BS,gCAAe;;;+CAZsB,kCAAkC;8CACnC,iCAAiC;2BACO,cAAc;mCACxC,sBAAsB;mCAE/C,sBAAsB;iDAGP,oCAAoC;gCAEtD,mBAAmB;2CACR,8BAA8B;iCACxC,0CAA0C;uBAEZ,gBAAgB"}

package/lib-commonjs/usePositioningSlideDirection.js

@@ -0,0 +1,86 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getPlacementSlideDirections: function() {
+        return getPlacementSlideDirections;
+    },
+    usePositioningSlideDirection: function() {
+        return usePositioningSlideDirection;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _constants = require("./constants");
+function getPlacementSlideDirections(placement) {
+    const side = placement.split('-')[0];
+    // Default to sliding down from the top side
+    let x = 0;
+    let y = 1;
+    if (side === 'right') {
+        x = -1;
+        y = 0;
+    } else if (side === 'bottom') {
+        x = 0;
+        y = -1;
+    } else if (side === 'left') {
+        x = 1;
+        y = 0;
+    }
+    return {
+        x,
+        y
+    };
+}
+function usePositioningSlideDirection(options) {
+    const { targetDocument, onPositioningEnd } = options;
+    const handlePositionEnd = (0, _reactutilities.useEventCallback)((e)=>{
+        onPositioningEnd === null || onPositioningEnd === void 0 ? void 0 : onPositioningEnd(e);
+        const element = e.target;
+        const placement = e.detail.placement;
+        if (!(0, _reactutilities.isHTMLElement)(element)) {
+            return;
+        }
+        const { x, y } = getPlacementSlideDirections(placement);
+        element.style.setProperty(_constants.POSITIONING_SLIDE_DIRECTION_VAR_X, `${x}px`);
+        element.style.setProperty(_constants.POSITIONING_SLIDE_DIRECTION_VAR_Y, `${y}px`);
+    });
+    // Register the CSS custom properties so they can be interpolated during animations.
+    // CSS.registerProperty is idempotent — the try/catch handles the case where
+    // properties are already registered.
+    _react.useEffect(()=>{
+        var _targetDocument_defaultView_CSS, _targetDocument_defaultView;
+        var _targetDocument_defaultView_CSS_registerProperty;
+        const registerProperty = (_targetDocument_defaultView_CSS_registerProperty = targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : (_targetDocument_defaultView_CSS = _targetDocument_defaultView.CSS) === null || _targetDocument_defaultView_CSS === void 0 ? void 0 : _targetDocument_defaultView_CSS.registerProperty) !== null && _targetDocument_defaultView_CSS_registerProperty !== void 0 ? _targetDocument_defaultView_CSS_registerProperty : ()=>{
+        // No-op if registerProperty is not supported
+        };
+        try {
+            registerProperty({
+                name: _constants.POSITIONING_SLIDE_DIRECTION_VAR_X,
+                syntax: '<length>',
+                inherits: false,
+                initialValue: '0px'
+            });
+            registerProperty({
+                name: _constants.POSITIONING_SLIDE_DIRECTION_VAR_Y,
+                syntax: '<length>',
+                inherits: false,
+                initialValue: '0px'
+            });
+        } catch (e) {
+        // Ignore errors from registerProperty, which can occur if the properties are already registered
+        }
+    }, [
+        targetDocument
+    ]);
+    return handlePositionEnd;
+}

package/lib-commonjs/usePositioningSlideDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/usePositioningSlideDirection.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport type { PositioningProps } from './types';\nimport { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';\n\n/**\n * Returns the slide direction unit vectors for a given Floating UI placement.\n * Values are -1, 0, or 1, representing the direction the element slides in from.\n */\nexport function getPlacementSlideDirections(placement: string): { x: number; y: number } {\n  const side = placement.split('-')[0];\n  // Default to sliding down from the top side\n  let x = 0;\n  let y = 1;\n\n  if (side === 'right') {\n    x = -1;\n    y = 0;\n  } else if (side === 'bottom') {\n    x = 0;\n    y = -1;\n  } else if (side === 'left') {\n    x = 1;\n    y = 0;\n  }\n\n  return { x, y };\n}\n\ntype UsePositioningSlideDirectionOptions = {\n  /** The target document for CSS.registerProperty. */\n  targetDocument: Document | undefined;\n  /** The user's original onPositioningEnd callback, if any. */\n  onPositioningEnd?: PositioningProps['onPositioningEnd'];\n};\n\n/**\n * A hook that manages CSS custom properties for slide direction based on positioning placement.\n *\n * It wraps the `onPositioningEnd` callback to set `--fui-positioning-slide-direction-x` and\n * `--fui-positioning-slide-direction-y` CSS custom properties on the positioned element,\n * and registers them via `CSS.registerProperty` to avoid properties propagation down to a DOM tree.\n *\n * @returns The wrapped `onPositioningEnd` handler to pass to the positioning config.\n */\nexport function usePositioningSlideDirection(\n  options: UsePositioningSlideDirectionOptions,\n): NonNullable<PositioningProps['onPositioningEnd']> {\n  const { targetDocument, onPositioningEnd } = options;\n\n  const handlePositionEnd: NonNullable<PositioningProps['onPositioningEnd']> = useEventCallback(e => {\n    onPositioningEnd?.(e);\n\n    const element = e.target;\n    const placement = e.detail.placement;\n\n    if (!isHTMLElement(element)) {\n      return;\n    }\n\n    const { x, y } = getPlacementSlideDirections(placement);\n\n    element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_X, `${x}px`);\n    element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_Y, `${y}px`);\n  });\n\n  // Register the CSS custom properties so they can be interpolated during animations.\n  // CSS.registerProperty is idempotent — the try/catch handles the case where\n  // properties are already registered.\n  React.useEffect(() => {\n    const registerProperty =\n      targetDocument?.defaultView?.CSS?.registerProperty ??\n      (() => {\n        // No-op if registerProperty is not supported\n      });\n\n    try {\n      registerProperty({\n        name: POSITIONING_SLIDE_DIRECTION_VAR_X,\n        syntax: '<length>',\n        inherits: false,\n        initialValue: '0px',\n      });\n      registerProperty({\n        name: POSITIONING_SLIDE_DIRECTION_VAR_Y,\n        syntax: '<length>',\n        inherits: false,\n        initialValue: '0px',\n      });\n    } catch (e) {\n      // Ignore errors from registerProperty, which can occur if the properties are already registered\n    }\n  }, [targetDocument]);\n\n  return handlePositionEnd;\n}\n"],"names":["React","useEventCallback","isHTMLElement","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y","getPlacementSlideDirections","placement","side","split","x","y","usePositioningSlideDirection","options","targetDocument","onPositioningEnd","handlePositionEnd","e","element","target","detail","style","setProperty","useEffect","registerProperty","defaultView","CSS","name","syntax","inherits","initialValue"],"mappings":"AAAA;;;;;;;;;;;;IAWgBK,2BAAAA;;;IAoCAM,4BAAAA;;;;;iEA7CO,QAAQ;gCACiB,4BAA4B;2BAES,cAAc;AAM5F,qCAAqCL,SAAiB;IAC3D,MAAMC,OAAOD,UAAUE,KAAK,CAAC,IAAI,CAAC,EAAE;IACpC,4CAA4C;IAC5C,IAAIC,IAAI;IACR,IAAIC,IAAI;IAER,IAAIH,SAAS,SAAS;QACpBE,IAAI,CAAC;QACLC,IAAI;IACN,OAAO,IAAIH,SAAS,UAAU;QAC5BE,IAAI;QACJC,IAAI,CAAC;IACP,OAAO,IAAIH,SAAS,QAAQ;QAC1BE,IAAI;QACJC,IAAI;IACN;IAEA,OAAO;QAAED;QAAGC;IAAE;AAChB;AAkBO,sCACLE,OAA4C;IAE5C,MAAM,EAAEC,cAAc,EAAEC,gBAAgB,EAAE,GAAGF;IAE7C,MAAMG,wBAAuEd,gCAAAA,EAAiBe,CAAAA;QAC5FF,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAmBE;QAEnB,MAAMC,UAAUD,EAAEE,MAAM;QACxB,MAAMZ,YAAYU,EAAEG,MAAM,CAACb,SAAS;QAEpC,IAAI,CAACJ,iCAAAA,EAAce,UAAU;YAC3B;QACF;QAEA,MAAM,EAAER,CAAC,EAAEC,CAAC,EAAE,GAAGL,4BAA4BC;QAE7CW,QAAQG,KAAK,CAACC,WAAW,CAAClB,4CAAAA,EAAmC,GAAGM,EAAE,EAAE,CAAC;QACrEQ,QAAQG,KAAK,CAACC,WAAW,CAACjB,4CAAAA,EAAmC,GAAGM,EAAE,EAAE,CAAC;IACvE;IAEA,oFAAoF;IACpF,4EAA4E;IAC5E,qCAAqC;IACrCV,OAAMsB,SAAS,CAAC;YAEZT,iCAAAA;YAAAA;QADF,MAAMU,mBACJV,oDAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,8BAAAA,eAAgBW,WAAAA,AAAW,MAAA,QAA3BX,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,kCAAAA,4BAA6BY,GAAAA,AAAG,MAAA,QAAhCZ,oCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gCAAkCU,gBAAAA,AAAgB,MAAA,QAAlDV,qDAAAA,KAAAA,IAAAA,mDACC;QACC,6CAA6C;QAC/C;QAEF,IAAI;YACFU,iBAAiB;gBACfG,MAAMvB,4CAAAA;gBACNwB,QAAQ;gBACRC,UAAU;gBACVC,cAAc;YAChB;YACAN,iBAAiB;gBACfG,MAAMtB,4CAAAA;gBACNuB,QAAQ;gBACRC,UAAU;gBACVC,cAAc;YAChB;QACF,EAAE,OAAOb,GAAG;QACV,gGAAgG;QAClG;IACF,GAAG;QAACH;KAAe;IAEnB,OAAOE;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-positioning",
-  "version": "9.21.0",
+  "version": "9.22.0",
   "description": "A react wrapper around Popper.js for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",