@atlaskit/dropdown-menu 12.19.0 → 12.20.1

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @atlaskit/dropdown-menu
 
+## 12.20.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.20.0
+
+### Minor Changes
+
+- [#151581](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151581)
+  [`ce972f75db165`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ce972f75db165) - ##
+  New Feature: Configurable Popper Strategy
+
+  **Feature Overview:** The `@atlaskit/dropdown-menu` component now includes a new `strategy` prop,
+  providing developers with the ability to customize the positioning strategy of dropdowns. This
+  enhancement offers more control over how dropdown menus are rendered and positioned, accommodating
+  various layout needs.
+
+  **Usage:** The `strategy` prop can be set to either `'absolute'` or `'fixed'`, with the default
+  being `'fixed'`.
+
+  - **`'fixed'`:** Positions the dropdown relative to the browser's viewport. This ensures that the
+    dropdown remains in the same position regardless of page scrolling, making it ideal for
+    dropdowns that need to maintain a consistent position on the screen.
+
+  - **`'absolute'`:** Positions the dropdown relative to its closest positioned ancestor, which
+    allows the dropdown to move with the content as the page is scrolled or resized. This is useful
+    in scenarios where the dropdown should remain contextually attached to an element within a
+    scrollable area.
+
+  **Example Usage:**
+
+  ```jsx
+  import DropdownMenu from '@atlaskit/dropdown-menu';
+
+  const MyDropdown = () => (
+  	<DropdownMenu
+  		trigger="Options"
+  		strategy="absolute" // Options are 'absolute' or 'fixed'
+  	>
+  		<DropdownMenu.Item>First option</DropdownMenu.Item>
+  		<DropdownMenu.Item>Second option</DropdownMenu.Item>
+  	</DropdownMenu>
+  );
+  ```
+
+  **Important Considerations:**
+
+  - When using the `shouldFitContainer` prop, the `strategy` cannot be set to `'fixed'`. In such
+    cases, the dropdown defaults to the `'absolute'` strategy to ensure proper rendering within the
+    container.
+  - The `strategy` prop provides additional flexibility, especially in complex layouts where precise
+    control over dropdown positioning is required. It allows the dropdown to adapt based on the
+    surrounding context or constraints, enhancing the component's versatility.
+  - This feature addresses the need for more adaptable positioning strategies, allowing for better
+    integration into varied UI designs and improving user experience by maintaining dropdown
+    visibility and accessibility.
+
 ## 12.19.0
 
 ### Minor Changes

package/dist/cjs/dropdown-menu.js

@@ -99,7 +99,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? _constants.layers.modal() : _ref$zIndex,
     label = _ref.label,
-    interactionName = _ref.interactionName;
+    interactionName = _ref.interactionName,
+    strategy = _ref.strategy;
   var _useControlledState = (0, _useControlled.default)(isOpen, function () {
       return defaultOpen;
     }),
@@ -245,9 +246,12 @@ var DropdownMenu = function DropdownMenu(_ref) {
    * types are satisfied.
    */
   var conditionalProps = shouldFitContainer ? {
-    shouldFitContainer: shouldFitContainer
+    shouldFitContainer: shouldFitContainer,
+    // When shouldFitContainer is true, `fixed` positions are not allowed
+    strategy: strategy !== 'fixed' ? strategy : undefined
   } : {
-    shouldRenderToParent: shouldRenderToParent
+    shouldRenderToParent: shouldRenderToParent,
+    strategy: strategy
   };
   return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuContext.DropdownMenuProvider, {
     value: {

package/dist/es2019/dropdown-menu.js

@@ -75,7 +75,8 @@ const DropdownMenu = ({
   trigger,
   zIndex = layers.modal(),
   label,
-  interactionName
+  interactionName,
+  strategy
 }) => {
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
   const triggerRef = useRef(null);
@@ -215,9 +216,12 @@ const DropdownMenu = ({
    * types are satisfied.
    */
   const conditionalProps = shouldFitContainer ? {
-    shouldFitContainer
+    shouldFitContainer,
+    // When shouldFitContainer is true, `fixed` positions are not allowed
+    strategy: strategy !== 'fixed' ? strategy : undefined
   } : {
-    shouldRenderToParent
+    shouldRenderToParent,
+    strategy
   };
   return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(DropdownMenuProvider, {
     value: {

package/dist/esm/dropdown-menu.js

@@ -90,7 +90,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? layers.modal() : _ref$zIndex,
     label = _ref.label,
-    interactionName = _ref.interactionName;
+    interactionName = _ref.interactionName,
+    strategy = _ref.strategy;
   var _useControlledState = useControlledState(isOpen, function () {
       return defaultOpen;
     }),
@@ -236,9 +237,12 @@ var DropdownMenu = function DropdownMenu(_ref) {
    * types are satisfied.
    */
   var conditionalProps = shouldFitContainer ? {
-    shouldFitContainer: shouldFitContainer
+    shouldFitContainer: shouldFitContainer,
+    // When shouldFitContainer is true, `fixed` positions are not allowed
+    strategy: strategy !== 'fixed' ? strategy : undefined
   } : {
-    shouldRenderToParent: shouldRenderToParent
+    shouldRenderToParent: shouldRenderToParent,
+    strategy: strategy
   };
   return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(DropdownMenuProvider, {
     value: {

package/dist/types/dropdown-menu.d.ts

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, }: DropdownMenuProps<T>) => JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, }: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

package/dist/types/types.d.ts

@@ -158,6 +158,11 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string;
+    /**
+     * This controls the positioning strategy to use. Can vary between `absolute` and `fixed`.
+     * The default is `fixed`.
+     */
+    strategy?: 'absolute' | 'fixed';
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;
@@ -165,6 +170,7 @@ type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = Inter
 type ShouldFitContainerDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer: true;
     shouldRenderToParent?: true;
+    strategy?: 'absolute';
 };
 export type DropdownMenuProps<TriggerElement extends HTMLElement = any> = StandardDropdownMenuProps<TriggerElement> | ShouldFitContainerDropdownMenuProps<TriggerElement>;
 export interface DropdownItemProps {

package/dist/types-ts4.5/dropdown-menu.d.ts

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, }: DropdownMenuProps<T>) => JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, }: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

package/dist/types-ts4.5/types.d.ts

@@ -158,6 +158,11 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string;
+    /**
+     * This controls the positioning strategy to use. Can vary between `absolute` and `fixed`.
+     * The default is `fixed`.
+     */
+    strategy?: 'absolute' | 'fixed';
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;
@@ -165,6 +170,7 @@ type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = Inter
 type ShouldFitContainerDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer: true;
     shouldRenderToParent?: true;
+    strategy?: 'absolute';
 };
 export type DropdownMenuProps<TriggerElement extends HTMLElement = any> = StandardDropdownMenuProps<TriggerElement> | ShouldFitContainerDropdownMenuProps<TriggerElement>;
 export interface DropdownItemProps {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "12.19.0",
+	"version": "12.20.1",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,9 +25,9 @@
 	"dependencies": {
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/ds-lib": "^3.0.0",
-		"@atlaskit/icon": "^22.20.0",
-		"@atlaskit/layering": "^0.5.0",
+		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/icon": "^22.22.0",
+		"@atlaskit/layering": "^0.6.0",
 		"@atlaskit/menu": "^2.12.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popup": "^1.28.0",