@atlaskit/dropdown-menu 12.11.1 → 12.13.0

package/dist/cjs/dropdown-menu.js

@@ -85,6 +85,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     onOpenChange = _ref$onOpenChange === void 0 ? _noop.default : _ref$onOpenChange,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    _ref$shouldFitContain = _ref.shouldFitContainer,
+    shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$shouldFlip = _ref.shouldFlip,
     shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
@@ -203,7 +205,25 @@ var DropdownMenu = function DropdownMenu(_ref) {
       }
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked, handleOnClose]);
-  return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_popup.default, {
+
+  /*
+   * The Popup component requires either:
+   * - shouldFitContainer={true} and shouldRenderToParent={true | undefined}
+   * or
+   * - shouldFitContainer={false | undefined} and shouldRenderToParent={true | false | undefined}
+   *
+   * But not:
+   * - shouldFitContainer={true} and shouldRenderToParent={false}
+   *
+   * By only including either shouldFitContainer or shouldRenderToParent, we can ensure that the Popup component
+   * types are satisfied.
+   */
+  var conditionalProps = shouldFitContainer ? {
+    shouldFitContainer: shouldFitContainer
+  } : {
+    shouldRenderToParent: shouldRenderToParent
+  };
+  return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -212,8 +232,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     placement: placement,
     fallbackPlacements: fallbackPlacements,
     testId: testId && "".concat(testId, "--content"),
-    shouldUseCaptureOnOutsideClick: true,
-    shouldRenderToParent: shouldRenderToParent,
+    shouldUseCaptureOnOutsideClick: true
+  }, conditionalProps, {
     shouldDisableFocusLock: true,
     trigger: function trigger(_ref2) {
       var ref = _ref2.ref,
@@ -253,18 +273,18 @@ var DropdownMenu = function DropdownMenu(_ref) {
       }, /*#__PURE__*/_react.default.createElement(_menuWrapper.default, {
         spacing: spacing,
         maxHeight: MAX_HEIGHT,
-        maxWidth: 800,
+        maxWidth: shouldFitContainer ? undefined : 800,
         onClose: handleOnClose,
         onUpdate: update,
         isLoading: isLoading,
         statusLabel: statusLabel,
         setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined,
-        shouldRenderToParent: shouldRenderToParent,
+        shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
         isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
         autoFocus: autoFocus,
         testId: testId && "".concat(testId, "--menu-wrapper")
       }, children));
     }
-  }));
+  })));
 };
 var _default = exports.default = DropdownMenu;

package/dist/cjs/internal/components/group-title.js

@@ -7,14 +7,21 @@ exports.default = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
 var headingStyles = (0, _react.css)({
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: itemHeadingFontSize,
   fontWeight: "var(--ds-font-weight-bold, 700)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
   paddingBlock: "var(--ds-space-0, 0px)",
   paddingInline: "var(--ds-space-200, 16px)",

package/dist/cjs/internal/components/menu-wrapper.js

@@ -13,8 +13,13 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _focusManager = require("../components/focus-manager");
 var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"));
 var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var spinnerContainerStyles = (0, _primitives.xcss)({
   display: 'flex',
   minWidth: '160px',

package/dist/es2019/dropdown-menu.js

@@ -64,6 +64,7 @@ const DropdownMenu = ({
   isOpen,
   onOpenChange = noop,
   placement = 'bottom-start',
+  shouldFitContainer = false,
   shouldFlip = true,
   shouldRenderToParent = false,
   spacing,
@@ -173,7 +174,25 @@ const DropdownMenu = ({
       }
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked, handleOnClose]);
-  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
+
+  /*
+   * The Popup component requires either:
+   * - shouldFitContainer={true} and shouldRenderToParent={true | undefined}
+   * or
+   * - shouldFitContainer={false | undefined} and shouldRenderToParent={true | false | undefined}
+   *
+   * But not:
+   * - shouldFitContainer={true} and shouldRenderToParent={false}
+   *
+   * By only including either shouldFitContainer or shouldRenderToParent, we can ensure that the Popup component
+   * types are satisfied.
+   */
+  const conditionalProps = shouldFitContainer ? {
+    shouldFitContainer
+  } : {
+    shouldRenderToParent
+  };
+  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, _extends({
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -182,8 +201,8 @@ const DropdownMenu = ({
     placement: placement,
     fallbackPlacements: fallbackPlacements,
     testId: testId && `${testId}--content`,
-    shouldUseCaptureOnOutsideClick: true,
-    shouldRenderToParent: shouldRenderToParent,
+    shouldUseCaptureOnOutsideClick: true
+  }, conditionalProps, {
     shouldDisableFocusLock: true,
     trigger: ({
       ref,
@@ -226,17 +245,17 @@ const DropdownMenu = ({
     }, /*#__PURE__*/React.createElement(MenuWrapper, {
       spacing: spacing,
       maxHeight: MAX_HEIGHT,
-      maxWidth: 800,
+      maxWidth: shouldFitContainer ? undefined : 800,
       onClose: handleOnClose,
       onUpdate: update,
       isLoading: isLoading,
       statusLabel: statusLabel,
       setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined,
-      shouldRenderToParent: shouldRenderToParent,
+      shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
       isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
       autoFocus: autoFocus,
       testId: testId && `${testId}--menu-wrapper`
     }, children))
-  }));
+  })));
 };
 export default DropdownMenu;

package/dist/es2019/internal/components/group-title.js

@@ -1,5 +1,9 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
@@ -7,8 +11,10 @@ const itemHeadingContentHeight = headingSizes.h100.lineHeight;
 const itemHeadingFontSize = headingSizes.h100.size;
 const headingStyles = css({
   color: `var(--ds-text-subtle, ${N300})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: itemHeadingFontSize,
   fontWeight: "var(--ds-font-weight-bold, 700)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
   paddingBlock: "var(--ds-space-0, 0px)",
   paddingInline: "var(--ds-space-200, 16px)",

package/dist/es2019/internal/components/menu-wrapper.js

@@ -1,5 +1,10 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useContext, useEffect, useLayoutEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
 import { Box, xcss } from '@atlaskit/primitives';

package/dist/esm/dropdown-menu.js

@@ -75,6 +75,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     onOpenChange = _ref$onOpenChange === void 0 ? noop : _ref$onOpenChange,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    _ref$shouldFitContain = _ref.shouldFitContainer,
+    shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$shouldFlip = _ref.shouldFlip,
     shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
@@ -193,7 +195,25 @@ var DropdownMenu = function DropdownMenu(_ref) {
       }
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked, handleOnClose]);
-  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
+
+  /*
+   * The Popup component requires either:
+   * - shouldFitContainer={true} and shouldRenderToParent={true | undefined}
+   * or
+   * - shouldFitContainer={false | undefined} and shouldRenderToParent={true | false | undefined}
+   *
+   * But not:
+   * - shouldFitContainer={true} and shouldRenderToParent={false}
+   *
+   * By only including either shouldFitContainer or shouldRenderToParent, we can ensure that the Popup component
+   * types are satisfied.
+   */
+  var conditionalProps = shouldFitContainer ? {
+    shouldFitContainer: shouldFitContainer
+  } : {
+    shouldRenderToParent: shouldRenderToParent
+  };
+  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, _extends({
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -202,8 +222,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     placement: placement,
     fallbackPlacements: fallbackPlacements,
     testId: testId && "".concat(testId, "--content"),
-    shouldUseCaptureOnOutsideClick: true,
-    shouldRenderToParent: shouldRenderToParent,
+    shouldUseCaptureOnOutsideClick: true
+  }, conditionalProps, {
     shouldDisableFocusLock: true,
     trigger: function trigger(_ref2) {
       var ref = _ref2.ref,
@@ -243,18 +263,18 @@ var DropdownMenu = function DropdownMenu(_ref) {
       }, /*#__PURE__*/React.createElement(MenuWrapper, {
         spacing: spacing,
         maxHeight: MAX_HEIGHT,
-        maxWidth: 800,
+        maxWidth: shouldFitContainer ? undefined : 800,
         onClose: handleOnClose,
         onUpdate: update,
         isLoading: isLoading,
         statusLabel: statusLabel,
         setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined,
-        shouldRenderToParent: shouldRenderToParent,
+        shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
         isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
         autoFocus: autoFocus,
         testId: testId && "".concat(testId, "--menu-wrapper")
       }, children));
     }
-  }));
+  })));
 };
 export default DropdownMenu;

package/dist/esm/internal/components/group-title.js

@@ -1,5 +1,9 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
@@ -7,8 +11,10 @@ var itemHeadingContentHeight = headingSizes.h100.lineHeight;
 var itemHeadingFontSize = headingSizes.h100.size;
 var headingStyles = css({
   color: "var(--ds-text-subtle, ".concat(N300, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: itemHeadingFontSize,
   fontWeight: "var(--ds-font-weight-bold, 700)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
   paddingBlock: "var(--ds-space-0, 0px)",
   paddingInline: "var(--ds-space-200, 16px)",

package/dist/esm/internal/components/menu-wrapper.js

@@ -1,5 +1,10 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { useContext, useEffect, useLayoutEffect } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
 import { Box, xcss } from '@atlaskit/primitives';

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 = HTMLElement>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFlip, shouldRenderToParent, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = HTMLElement>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

package/dist/types/internal/components/group-title.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 /**

package/dist/types/internal/hooks/use-radio-state.d.ts

@@ -5,5 +5,5 @@ type RadioStateArgs = {
 };
 type SetStateCallback = (value: boolean | undefined) => boolean;
 type RadioStateValue = [boolean, (newValue: SetStateCallback) => void];
-declare function useRadioState({ id, isSelected, defaultSelected, }: RadioStateArgs): RadioStateValue;
+declare function useRadioState({ id, isSelected, defaultSelected }: RadioStateArgs): RadioStateValue;
 export default useRadioState;

package/dist/types/types.d.ts

@@ -47,15 +47,15 @@ export interface MenuWrapperProps extends MenuGroupProps {
     setInitialFocusRef?: ContentProps['setInitialFocusRef'];
     onClose?: ContentProps['onClose'];
     onUpdate: ContentProps['update'];
-    isLoading?: DropdownMenuProps['isLoading'];
-    statusLabel?: DropdownMenuProps['statusLabel'];
+    isLoading?: InternalDropdownMenuProps['isLoading'];
+    statusLabel?: InternalDropdownMenuProps['statusLabel'];
     shouldRenderToParent?: boolean;
     isTriggeredUsingKeyboard?: boolean;
     autoFocus?: boolean;
 }
 export interface DropdownMenuGroupProps extends SectionProps {
 }
-export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
+interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
     /**
      * Controls the appearance of the menu.
      * The default menu will scroll after its height exceeds the pre-defined amount.
@@ -90,6 +90,13 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      * Position of the menu.
      */
     placement?: Placement;
+    /**
+     * This fits the dropdown menu width to its parent's width.
+     * When set to `true`, the trigger and dropdown menu elements will be wrapped in a `div` with `position: relative`.
+     * The dropdown menu will be rendered as a sibling to the trigger element, and will be full width.
+     * The default is `false`.
+     */
+    shouldFitContainer?: boolean;
     /**
      * Allows the dropdown menu to be placed on the opposite side of its trigger if it does not
      * fit in the viewport.
@@ -144,6 +151,14 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      */
     label?: string;
 }
+type StandardDropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> = InternalDropdownMenuProps<TriggerElement> & {
+    shouldFitContainer?: false;
+};
+type ShouldFitContainerDropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> = InternalDropdownMenuProps<TriggerElement> & {
+    shouldFitContainer: true;
+    shouldRenderToParent?: true;
+};
+export type DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> = StandardDropdownMenuProps<TriggerElement> | ShouldFitContainerDropdownMenuProps<TriggerElement>;
 export interface DropdownItemProps {
     /**
      * Primary content for the item.
@@ -318,3 +333,4 @@ export interface CustomItemHtmlProps extends CustomItemComponentProps {
      */
     href?: string;
 }
+export {};

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 = HTMLElement>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFlip, shouldRenderToParent, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = HTMLElement>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

package/dist/types-ts4.5/internal/components/group-title.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 /**

package/dist/types-ts4.5/internal/hooks/use-radio-state.d.ts

@@ -8,5 +8,5 @@ type RadioStateValue = [
     boolean,
     (newValue: SetStateCallback) => void
 ];
-declare function useRadioState({ id, isSelected, defaultSelected, }: RadioStateArgs): RadioStateValue;
+declare function useRadioState({ id, isSelected, defaultSelected }: RadioStateArgs): RadioStateValue;
 export default useRadioState;

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

@@ -47,15 +47,15 @@ export interface MenuWrapperProps extends MenuGroupProps {
     setInitialFocusRef?: ContentProps['setInitialFocusRef'];
     onClose?: ContentProps['onClose'];
     onUpdate: ContentProps['update'];
-    isLoading?: DropdownMenuProps['isLoading'];
-    statusLabel?: DropdownMenuProps['statusLabel'];
+    isLoading?: InternalDropdownMenuProps['isLoading'];
+    statusLabel?: InternalDropdownMenuProps['statusLabel'];
     shouldRenderToParent?: boolean;
     isTriggeredUsingKeyboard?: boolean;
     autoFocus?: boolean;
 }
 export interface DropdownMenuGroupProps extends SectionProps {
 }
-export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
+interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
     /**
      * Controls the appearance of the menu.
      * The default menu will scroll after its height exceeds the pre-defined amount.
@@ -90,6 +90,13 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      * Position of the menu.
      */
     placement?: Placement;
+    /**
+     * This fits the dropdown menu width to its parent's width.
+     * When set to `true`, the trigger and dropdown menu elements will be wrapped in a `div` with `position: relative`.
+     * The dropdown menu will be rendered as a sibling to the trigger element, and will be full width.
+     * The default is `false`.
+     */
+    shouldFitContainer?: boolean;
     /**
      * Allows the dropdown menu to be placed on the opposite side of its trigger if it does not
      * fit in the viewport.
@@ -144,6 +151,14 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      */
     label?: string;
 }
+type StandardDropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> = InternalDropdownMenuProps<TriggerElement> & {
+    shouldFitContainer?: false;
+};
+type ShouldFitContainerDropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> = InternalDropdownMenuProps<TriggerElement> & {
+    shouldFitContainer: true;
+    shouldRenderToParent?: true;
+};
+export type DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> = StandardDropdownMenuProps<TriggerElement> | ShouldFitContainerDropdownMenuProps<TriggerElement>;
 export interface DropdownItemProps {
     /**
      * Primary content for the item.
@@ -318,3 +333,4 @@ export interface CustomItemHtmlProps extends CustomItemComponentProps {
      */
     href?: string;
 }
+export {};