@fluentui/react-positioning 9.0.1 → 9.1.0

package/CHANGELOG.json

@@ -2,7 +2,28 @@
   "name": "@fluentui/react-positioning",
   "entries": [
     {
-      "date": "Tue, 28 Jun 2022 17:37:51 GMT",
+      "date": "Thu, 14 Jul 2022 17:03:30 GMT",
+      "tag": "@fluentui/react-positioning_v9.1.0",
+      "version": "9.1.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "ebfd9b68601cf350cc2eacab25d9d0c580b793ed",
+            "comment": "feat: boundary postitioning options can accept `null`"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Jun 2022 17:39:51 GMT",
       "tag": "@fluentui/react-positioning_v9.0.1",
       "version": "9.0.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Tue, 28 Jun 2022 17:37:51 GMT and should not be manually modified.
+This log was last generated on Thu, 14 Jul 2022 17:03:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.1.0)
+
+Thu, 14 Jul 2022 17:03:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.1..@fluentui/react-positioning_v9.1.0)
+
+### Minor changes
+
+- feat: boundary postitioning options can accept `null` ([PR #23839](https://github.com/microsoft/fluentui/pull/23839) by lingfangao@hotmail.com)
+- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+
 ## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.1)
 
-Tue, 28 Jun 2022 17:37:51 GMT 
+Tue, 28 Jun 2022 17:39:51 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0..@fluentui/react-positioning_v9.0.1)
 
 ### Patches

package/dist/index.d.ts

@@ -130,9 +130,9 @@ declare interface PositioningOptions {
     /** Alignment for the component. Only has an effect if used with the @see position option */
     align?: Alignment;
     /** The element which will define the boundaries of the positioned element for the flip behavior. */
-    flipBoundary?: Boundary;
+    flipBoundary?: Boundary | null;
     /** The element which will define the boundaries of the positioned element for the overflow behavior. */
-    overflowBoundary?: Boundary;
+    overflowBoundary?: Boundary | null;
     /**
      * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
      * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\ntype Rect = {\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n};\n\nexport type OffsetFunctionParam = {\n  positionedRect: Rect;\n  targetRect: Rect;\n  position: Position;\n  alignment?: Alignment;\n};\n\nexport type OffsetObject = { crossAxis?: number; mainAxis: number };\n\nexport type OffsetShorthand = number;\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;\n\nexport type Offset = OffsetFunction | OffsetObject | OffsetShorthand;\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;\n\nexport type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';\n\nexport type PositioningImperativeRef = {\n  /**\n   * Updates the position imperatively.\n   * Useful when the position of the target changes from other factors than scrolling of window resize.\n   */\n  updatePosition: () => void;\n\n  /**\n   * Sets the target and updates positioning imperatively.\n   * Useful for avoiding double renders with the target option.\n   */\n  setTarget: (target: HTMLElement | PositioningVirtualElement) => void;\n};\n\nexport type PositioningVirtualElement = {\n  getBoundingClientRect: () => {\n    x: number;\n    y: number;\n    top: number;\n    left: number;\n    bottom: number;\n    right: number;\n    width: number;\n    height: number;\n  };\n  contextElement?: Element;\n};\n\nexport interface PositioningOptions {\n  /** Alignment for the component. Only has an effect if used with the @see position option */\n  align?: Alignment;\n\n  /** The element which will define the boundaries of the positioned element for the flip behavior. */\n  flipBoundary?: Boundary;\n\n  /** The element which will define the boundaries of the positioned element for the overflow behavior. */\n  overflowBoundary?: Boundary;\n\n  /**\n   * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')\n   * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'\n   * and 'start' | 'end' respectively),\n   * then provided value for 'align' will be ignored and 'center' will be used instead.\n   */\n  position?: Position;\n\n  /**\n   * Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')\n   * @default false\n   */\n  positionFixed?: boolean;\n\n  /**\n   * Lets you displace a positioned element from its reference element.\n   * This can be useful if you need to apply some margin between them or if you need to fine tune the\n   * position according to some custom logic.\n   */\n  offset?: Offset;\n\n  /**\n   * Defines padding between the corner of the popup element and the arrow.\n   * Use to prevent the arrow from overlapping a rounded corner, for example.\n   */\n  arrowPadding?: number;\n\n  /**\n   * Applies max-height and max-width on the positioned element to fit it within the available space in viewport.\n   * true enables this for both width and height when overflow happens.\n   * 'always' applies `max-height`/`max-width` regardless of overflow.\n   * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`\n   * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`\n   */\n  autoSize?: AutoSize;\n\n  /**\n   * Modifies position and alignment to cover the target\n   */\n  coverTarget?: boolean;\n\n  /**\n   * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and\n   * `position` props, regardless of the size of the component, the reference element or the viewport.\n   */\n  pinned?: boolean;\n\n  /**\n   * When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.\n   * \"all\" enables this behavior for all axis.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_disableTether?: boolean | 'all';\n}\n\nexport interface PositioningProps\n  // \"positionFixed\" & \"unstable_disableTether\" are not exported as public API (yet)\n  extends Omit<PositioningOptions, 'positionFixed' | 'unstable_disableTether'> {\n  /** An imperative handle to Popper methods. */\n  positioningRef?: React.Ref<PositioningImperativeRef>;\n\n  /**\n   * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target\n   */\n  target?: HTMLElement | PositioningVirtualElement | null;\n}\n\nexport type PositioningShorthandValue =\n  | 'above'\n  | 'above-start'\n  | 'above-end'\n  | 'below'\n  | 'below-start'\n  | 'below-end'\n  | 'before'\n  | 'before-top'\n  | 'before-bottom'\n  | 'after'\n  | 'after-top'\n  | 'after-bottom';\n\nexport type PositioningShorthand = PositioningProps | PositioningShorthandValue;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\ntype Rect = {\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n};\n\nexport type OffsetFunctionParam = {\n  positionedRect: Rect;\n  targetRect: Rect;\n  position: Position;\n  alignment?: Alignment;\n};\n\nexport type OffsetObject = { crossAxis?: number; mainAxis: number };\n\nexport type OffsetShorthand = number;\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;\n\nexport type Offset = OffsetFunction | OffsetObject | OffsetShorthand;\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;\n\nexport type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';\n\nexport type PositioningImperativeRef = {\n  /**\n   * Updates the position imperatively.\n   * Useful when the position of the target changes from other factors than scrolling of window resize.\n   */\n  updatePosition: () => void;\n\n  /**\n   * Sets the target and updates positioning imperatively.\n   * Useful for avoiding double renders with the target option.\n   */\n  setTarget: (target: HTMLElement | PositioningVirtualElement) => void;\n};\n\nexport type PositioningVirtualElement = {\n  getBoundingClientRect: () => {\n    x: number;\n    y: number;\n    top: number;\n    left: number;\n    bottom: number;\n    right: number;\n    width: number;\n    height: number;\n  };\n  contextElement?: Element;\n};\n\nexport interface PositioningOptions {\n  /** Alignment for the component. Only has an effect if used with the @see position option */\n  align?: Alignment;\n\n  /** The element which will define the boundaries of the positioned element for the flip behavior. */\n  flipBoundary?: Boundary | null;\n\n  /** The element which will define the boundaries of the positioned element for the overflow behavior. */\n  overflowBoundary?: Boundary | null;\n\n  /**\n   * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')\n   * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'\n   * and 'start' | 'end' respectively),\n   * then provided value for 'align' will be ignored and 'center' will be used instead.\n   */\n  position?: Position;\n\n  /**\n   * Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')\n   * @default false\n   */\n  positionFixed?: boolean;\n\n  /**\n   * Lets you displace a positioned element from its reference element.\n   * This can be useful if you need to apply some margin between them or if you need to fine tune the\n   * position according to some custom logic.\n   */\n  offset?: Offset;\n\n  /**\n   * Defines padding between the corner of the popup element and the arrow.\n   * Use to prevent the arrow from overlapping a rounded corner, for example.\n   */\n  arrowPadding?: number;\n\n  /**\n   * Applies max-height and max-width on the positioned element to fit it within the available space in viewport.\n   * true enables this for both width and height when overflow happens.\n   * 'always' applies `max-height`/`max-width` regardless of overflow.\n   * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`\n   * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`\n   */\n  autoSize?: AutoSize;\n\n  /**\n   * Modifies position and alignment to cover the target\n   */\n  coverTarget?: boolean;\n\n  /**\n   * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and\n   * `position` props, regardless of the size of the component, the reference element or the viewport.\n   */\n  pinned?: boolean;\n\n  /**\n   * When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.\n   * \"all\" enables this behavior for all axis.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_disableTether?: boolean | 'all';\n}\n\nexport interface PositioningProps\n  // \"positionFixed\" & \"unstable_disableTether\" are not exported as public API (yet)\n  extends Omit<PositioningOptions, 'positionFixed' | 'unstable_disableTether'> {\n  /** An imperative handle to Popper methods. */\n  positioningRef?: React.Ref<PositioningImperativeRef>;\n\n  /**\n   * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target\n   */\n  target?: HTMLElement | PositioningVirtualElement | null;\n}\n\nexport type PositioningShorthandValue =\n  | 'above'\n  | 'above-start'\n  | 'above-end'\n  | 'below'\n  | 'below-start'\n  | 'below-end'\n  | 'before'\n  | 'before-top'\n  | 'before-bottom'\n  | 'after'\n  | 'after-top'\n  | 'after-bottom';\n\nexport type PositioningShorthand = PositioningProps | PositioningShorthandValue;\n"]}

package/lib/utils/getBoundary.js

@@ -18,6 +18,6 @@ export function getBoundary(element, boundary) {
     return boundariesNode;
   }
 
-  return boundary;
+  return boundary !== null && boundary !== void 0 ? boundary : undefined;
 }
 //# sourceMappingURL=getBoundary.js.map

package/lib/utils/getBoundary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/getBoundary.ts"],"names":[],"mappings":"AAEA,SAAS,eAAT,QAAgC,mBAAhC;AAGA;;AAEG;;AACH,OAAM,SAAU,WAAV,CAAsB,OAAtB,EAAmD,QAAnD,EAAsE;EAC1E,IAAI,QAAQ,KAAK,QAAjB,EAA2B;IACzB,OAAO,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,CAAwB,eAA/B;EACD;;EAED,IAAI,QAAQ,KAAK,cAAjB,EAAiC;IAC/B,IAAI,cAAc,GAA4B,eAAe,CAAC,OAAD,CAA7D;;IAEA,IAAI,cAAc,CAAC,QAAf,KAA4B,MAAhC,EAAwC;MACtC,cAAc,GAAG,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,CAAwB,eAAzC;IACD;;IAED,OAAO,cAAP;EACD;;EAED,OAAO,QAAP;AACD","sourcesContent":["import * as PopperJs from '@popperjs/core';\n\nimport { getScrollParent } from './getScrollParent';\nimport type { Boundary } from '../types';\n\n/**\n * Allows to mimic a behavior from V1 of Popper and accept `window` and `scrollParent` as strings.\n */\nexport function getBoundary(element: HTMLElement | null, boundary?: Boundary): PopperJs.Boundary | undefined {\n  if (boundary === 'window') {\n    return element?.ownerDocument!.documentElement;\n  }\n\n  if (boundary === 'scrollParent') {\n    let boundariesNode: HTMLElement | undefined = getScrollParent(element);\n\n    if (boundariesNode.nodeName === 'BODY') {\n      boundariesNode = element?.ownerDocument!.documentElement;\n    }\n\n    return boundariesNode;\n  }\n\n  return boundary;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/getBoundary.ts"],"names":[],"mappings":"AAEA,SAAS,eAAT,QAAgC,mBAAhC;AAGA;;AAEG;;AACH,OAAM,SAAU,WAAV,CAAsB,OAAtB,EAAmD,QAAnD,EAA6E;EACjF,IAAI,QAAQ,KAAK,QAAjB,EAA2B;IACzB,OAAO,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,CAAwB,eAA/B;EACD;;EAED,IAAI,QAAQ,KAAK,cAAjB,EAAiC;IAC/B,IAAI,cAAc,GAA4B,eAAe,CAAC,OAAD,CAA7D;;IAEA,IAAI,cAAc,CAAC,QAAf,KAA4B,MAAhC,EAAwC;MACtC,cAAc,GAAG,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,CAAwB,eAAzC;IACD;;IAED,OAAO,cAAP;EACD;;EAED,OAAO,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,SAAnB;AACD","sourcesContent":["import * as PopperJs from '@popperjs/core';\n\nimport { getScrollParent } from './getScrollParent';\nimport type { Boundary } from '../types';\n\n/**\n * Allows to mimic a behavior from V1 of Popper and accept `window` and `scrollParent` as strings.\n */\nexport function getBoundary(element: HTMLElement | null, boundary?: Boundary | null): PopperJs.Boundary | undefined {\n  if (boundary === 'window') {\n    return element?.ownerDocument!.documentElement;\n  }\n\n  if (boundary === 'scrollParent') {\n    let boundariesNode: HTMLElement | undefined = getScrollParent(element);\n\n    if (boundariesNode.nodeName === 'BODY') {\n      boundariesNode = element?.ownerDocument!.documentElement;\n    }\n\n    return boundariesNode;\n  }\n\n  return boundary ?? undefined;\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/utils/getBoundary.js

@@ -26,7 +26,7 @@ function getBoundary(element, boundary) {
     return boundariesNode;
   }
 
-  return boundary;
+  return boundary !== null && boundary !== void 0 ? boundary : undefined;
 }
 
 exports.getBoundary = getBoundary;

package/lib-commonjs/utils/getBoundary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/getBoundary.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAGA;;AAEG;;;AACH,SAAgB,WAAhB,CAA4B,OAA5B,EAAyD,QAAzD,EAA4E;EAC1E,IAAI,QAAQ,KAAK,QAAjB,EAA2B;IACzB,OAAO,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,CAAwB,eAA/B;EACD;;EAED,IAAI,QAAQ,KAAK,cAAjB,EAAiC;IAC/B,IAAI,cAAc,GAA4B,iBAAA,CAAA,eAAA,CAAgB,OAAhB,CAA9C;;IAEA,IAAI,cAAc,CAAC,QAAf,KAA4B,MAAhC,EAAwC;MACtC,cAAc,GAAG,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,CAAwB,eAAzC;IACD;;IAED,OAAO,cAAP;EACD;;EAED,OAAO,QAAP;AACD;;AAhBD,OAAA,CAAA,WAAA,GAAA,WAAA","sourcesContent":["import * as PopperJs from '@popperjs/core';\n\nimport { getScrollParent } from './getScrollParent';\nimport type { Boundary } from '../types';\n\n/**\n * Allows to mimic a behavior from V1 of Popper and accept `window` and `scrollParent` as strings.\n */\nexport function getBoundary(element: HTMLElement | null, boundary?: Boundary): PopperJs.Boundary | undefined {\n  if (boundary === 'window') {\n    return element?.ownerDocument!.documentElement;\n  }\n\n  if (boundary === 'scrollParent') {\n    let boundariesNode: HTMLElement | undefined = getScrollParent(element);\n\n    if (boundariesNode.nodeName === 'BODY') {\n      boundariesNode = element?.ownerDocument!.documentElement;\n    }\n\n    return boundariesNode;\n  }\n\n  return boundary;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/getBoundary.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAGA;;AAEG;;;AACH,SAAgB,WAAhB,CAA4B,OAA5B,EAAyD,QAAzD,EAAmF;EACjF,IAAI,QAAQ,KAAK,QAAjB,EAA2B;IACzB,OAAO,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,CAAwB,eAA/B;EACD;;EAED,IAAI,QAAQ,KAAK,cAAjB,EAAiC;IAC/B,IAAI,cAAc,GAA4B,iBAAA,CAAA,eAAA,CAAgB,OAAhB,CAA9C;;IAEA,IAAI,cAAc,CAAC,QAAf,KAA4B,MAAhC,EAAwC;MACtC,cAAc,GAAG,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,CAAwB,eAAzC;IACD;;IAED,OAAO,cAAP;EACD;;EAED,OAAO,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,SAAnB;AACD;;AAhBD,OAAA,CAAA,WAAA,GAAA,WAAA","sourcesContent":["import * as PopperJs from '@popperjs/core';\n\nimport { getScrollParent } from './getScrollParent';\nimport type { Boundary } from '../types';\n\n/**\n * Allows to mimic a behavior from V1 of Popper and accept `window` and `scrollParent` as strings.\n */\nexport function getBoundary(element: HTMLElement | null, boundary?: Boundary | null): PopperJs.Boundary | undefined {\n  if (boundary === 'window') {\n    return element?.ownerDocument!.documentElement;\n  }\n\n  if (boundary === 'scrollParent') {\n    let boundariesNode: HTMLElement | undefined = getScrollParent(element);\n\n    if (boundariesNode.nodeName === 'BODY') {\n      boundariesNode = element?.ownerDocument!.documentElement;\n    }\n\n    return boundariesNode;\n  }\n\n  return boundary ?? undefined;\n}\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-positioning",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "description": "A react wrapper around Popper.js for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,7 +31,7 @@
     "@griffel/react": "^1.2.0",
     "@fluentui/react-shared-contexts": "^9.0.0",
     "@fluentui/react-theme": "^9.0.0",
-    "@fluentui/react-utilities": "^9.0.0",
+    "@fluentui/react-utilities": "^9.0.1-0",
     "@popperjs/core": "~2.4.3",
     "tslib": "^2.1.0"
   },