@atlaskit/dropdown-menu 10.1.8 → 11.0.2

package/dist/esm/internal/utils/handle-focus.js

@@ -0,0 +1,47 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _actionMap;
+
+import { KEY_DOWN, KEY_END, KEY_HOME, KEY_UP } from '@atlaskit/ds-lib/keycodes';
+var actionMap = (_actionMap = {}, _defineProperty(_actionMap, KEY_DOWN, 'next'), _defineProperty(_actionMap, KEY_UP, 'prev'), _defineProperty(_actionMap, KEY_HOME, 'first'), _defineProperty(_actionMap, KEY_END, 'last'), _actionMap);
+export default function handleFocus(refs) {
+  return function (e) {
+    var currentFocusedIdx = refs.findIndex(function (el) {
+      var _document$activeEleme;
+
+      return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
+    });
+    var action = actionMap[e.key];
+
+    switch (action) {
+      case 'next':
+        if (currentFocusedIdx < refs.length - 1) {
+          e.preventDefault();
+          refs[currentFocusedIdx + 1].focus();
+        }
+
+        break;
+
+      case 'prev':
+        if (currentFocusedIdx > 0) {
+          e.preventDefault();
+          refs[currentFocusedIdx - 1].focus();
+        }
+
+        break;
+
+      case 'first':
+        e.preventDefault();
+        refs[0].focus();
+        break;
+
+      case 'last':
+        e.preventDefault();
+        refs[refs.length - 1].focus();
+        break;
+
+      default:
+        return;
+    }
+  };
+}

package/dist/esm/internal/utils/is-checkbox-item.js

@@ -0,0 +1,4 @@
+export default function isCheckboxItem(element) {
+  var role = element.getAttribute('role');
+  return role === 'checkbox' || role === 'menuitemcheckbox';
+}

package/dist/esm/internal/utils/is-radio-item.js

@@ -0,0 +1,4 @@
+export default function isCheckboxItem(element) {
+  var role = element.getAttribute('role');
+  return role === 'radio' || role === 'menuitemradio';
+}

package/dist/esm/internal/utils/is-voice-over-supported.js

@@ -0,0 +1,15 @@
+var canUseDOM = function canUseDOM() {
+  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+};
+/*
+ * Making sure we can fallback to browsers doesn't support voice over -
+ * we would using menuitemcheckbox / menuitemradio for these that supports voice over, and
+ * will fallback to checkbox / radio for these doesn't
+ */
+
+
+var isVoiceOverSupported = function isVoiceOverSupported() {
+  return /Mac OS X/.test(canUseDOM() ? navigator.userAgent : '');
+};
+
+export default isVoiceOverSupported;

package/dist/esm/internal/utils/reset-options-in-group.js

@@ -0,0 +1,13 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var resetOptionsInGroup = function resetOptionsInGroup(group) {
+  return Object.keys(group || {}).reduce(function (accumulator, current) {
+    return _objectSpread(_objectSpread({}, accumulator), {}, _defineProperty({}, current, typeof group[current] === 'undefined' ? undefined : false));
+  }, {});
+};
+
+export default resetOptionsInGroup;

package/dist/esm/radio/dropdown-item-radio-group.js

@@ -0,0 +1,66 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { createContext, useContext, useState } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+import Section from '@atlaskit/menu/section';
+import { SelectionStoreContext } from '../internal/context/selection-store';
+import resetOptionsInGroup from '../internal/utils/reset-options-in-group';
+
+/**
+ * __Radio group context__
+ * Context provider that wraps each DropdownItemRadioGroup
+ */
+export var RadioGroupContext = /*#__PURE__*/createContext({
+  id: '',
+  radioGroupState: {},
+  selectRadioItem: noop
+});
+/**
+ * __Dropdown item radio group__
+ *  Store which manages the selection state for each DropdownItemRadio
+ *  across mount and unmounts.
+ *
+ */
+
+var DropdownItemRadioGroup = function DropdownItemRadioGroup(props) {
+  var children = props.children,
+      id = props.id;
+
+  var _useContext = useContext(SelectionStoreContext),
+      setGroupState = _useContext.setGroupState,
+      getGroupState = _useContext.getGroupState;
+  /**
+   *  - initially `radioGroupState` is from selection store, so it's safe to update without re-rendering
+   *  - we flush a render by updating this local radio group state
+   */
+
+
+  var _useState = useState(function () {
+    return getGroupState(id);
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      radioGroupState = _useState2[0],
+      setRadioGroupState = _useState2[1];
+
+  var selectRadioItem = function selectRadioItem(childId, value) {
+    var newValue = _objectSpread(_objectSpread({}, resetOptionsInGroup(getGroupState(id))), {}, _defineProperty({}, childId, value));
+
+    setRadioGroupState(newValue);
+    setGroupState(id, newValue);
+  };
+
+  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
+    value: {
+      id: id,
+      radioGroupState: radioGroupState,
+      selectRadioItem: selectRadioItem
+    }
+  }, /*#__PURE__*/React.createElement(Section, props, children));
+};
+
+export default DropdownItemRadioGroup;

package/dist/esm/radio/dropdown-item-radio.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "isSelected", "defaultSelected", "onClick", "shouldTitleWrap", "shouldDescriptionWrap"];
+import React, { useCallback, useEffect, useState } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+import RadioIcon from '@atlaskit/icon/glyph/radio';
+import ButtonItem from '@atlaskit/menu/button-item';
+import useRadioState from '../internal/hooks/use-radio-state';
+import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
+import getIconColors from '../internal/utils/get-icon-colors';
+import isVoiceOverSupported from '../internal/utils/is-voice-over-supported';
+
+/**
+ * __Dropdown item radio__
+ *
+ * A dropdown item radio displays groups that have a single selection.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/usage)
+ */
+var DropdownItemRadio = function DropdownItemRadio(props) {
+  var id = props.id,
+      isSelected = props.isSelected,
+      defaultSelected = props.defaultSelected,
+      _props$onClick = props.onClick,
+      providedOnClick = _props$onClick === void 0 ? noop : _props$onClick,
+      _props$shouldTitleWra = props.shouldTitleWrap,
+      shouldTitleWrap = _props$shouldTitleWra === void 0 ? true : _props$shouldTitleWra,
+      _props$shouldDescript = props.shouldDescriptionWrap,
+      shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  if (process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
+    // eslint-disable-next-line no-console
+    console.warn("[DropdownItemRadio] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
+  }
+
+  var _useRadioState = useRadioState({
+    id: id,
+    isSelected: isSelected,
+    defaultSelected: defaultSelected
+  }),
+      _useRadioState2 = _slicedToArray(_useRadioState, 2),
+      selected = _useRadioState2[0],
+      setSelected = _useRadioState2[1];
+
+  var _useState = useState(getIconColors(defaultSelected)),
+      _useState2 = _slicedToArray(_useState, 2),
+      iconColors = _useState2[0],
+      setIconColors = _useState2[1];
+
+  var onClickHandler = useCallback(function (event) {
+    setSelected(function (selected) {
+      return !selected;
+    });
+    providedOnClick(event);
+  }, [providedOnClick, setSelected]);
+  useEffect(function () {
+    setIconColors(getIconColors(selected));
+  }, [selected]);
+  var itemRef = useRegisterItemWithFocusManager();
+  return /*#__PURE__*/React.createElement(ButtonItem, _extends({
+    id: id,
+    onClick: onClickHandler,
+    role: isVoiceOverSupported() ? 'radio' : 'menuitemradio',
+    "aria-checked": selected,
+    shouldTitleWrap: shouldTitleWrap,
+    shouldDescriptionWrap: shouldDescriptionWrap,
+    iconBefore: /*#__PURE__*/React.createElement(RadioIcon, {
+      label: "",
+      size: "medium",
+      primaryColor: iconColors.primary,
+      secondaryColor: iconColors.secondary
+    }),
+    ref: itemRef
+  }, rest));
+};
+
+export default DropdownItemRadio;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "10.1.8",
+	"version": "11.0.2",
 	"sideEffects": false
 }

package/dist/types/checkbox/dropdown-item-checkbox-group.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { SectionProps } from '@atlaskit/menu';
+interface DropdownItemCheckboxGroupProps extends SectionProps {
+    /**
+     * Unique identifier for the checkbox group.
+     */
+    id: string;
+}
+/**
+ * __Dropdown item checkbox group__
+ *
+ * A wrapping element for dropdown menu checkbox items.
+ *
+ */
+declare const DropdownItemCheckboxGroup: (props: DropdownItemCheckboxGroupProps) => JSX.Element;
+export default DropdownItemCheckboxGroup;

package/dist/types/checkbox/dropdown-item-checkbox.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DropdownItemCheckboxProps } from '../types';
+/**
+ * __Dropdown item checkbox__
+ *
+ * A dropdown item checkbox creates groups that have multiple selections.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/usage)
+ */
+declare const DropdownItemCheckbox: (props: DropdownItemCheckboxProps) => JSX.Element;
+export default DropdownItemCheckbox;

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

@@ -0,0 +1,11 @@
+/**
+ * __Section__
+ *
+ * A dropdown item group includes all the actions or items in a dropdown menu.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-group/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-group/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-group/usage)
+ */
+import Section from '@atlaskit/menu/section';
+export default Section;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DropdownItemProps } from './types';
+/**
+ * __Dropdown menu item__
+ *
+ * A dropdown item populates the dropdown menu with items. Every item should be inside a dropdown item group.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-item/examples)
+ * - [Code](https://atlassian.design/components/dropdown-item/code)
+ * - [Usage](https://atlassian.design/components/dropdown-item/usage)
+ */
+declare const DropdownMenuItem: (props: DropdownItemProps) => JSX.Element;
+export default DropdownMenuItem;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { DropdownMenuProps } from './types';
+/**
+ * __Dropdown menu__
+ *
+ * A dropdown menu displays a list of actions or options to a user.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
+ */
+declare const DropdownMenu: (props: DropdownMenuProps) => JSX.Element;
+export default DropdownMenu;

package/dist/types/index.d.ts

@@ -1,10 +1,8 @@
-export { default } from './components/DropdownMenu';
-export { default as DropdownMenuStateless } from './components/DropdownMenuStateless';
-export { default as DropdownItem } from './components/item/DropdownItem';
-export { default as DropdownItemRadio } from './components/item/DropdownItemRadio';
-export { default as DropdownItemCheckbox } from './components/item/DropdownItemCheckbox';
-export { default as DropdownItemGroup } from './components/group/DropdownItemGroup';
-export { default as DropdownItemGroupRadio } from './components/group/DropdownItemGroupRadio';
-export { default as DropdownItemGroupCheckbox } from './components/group/DropdownItemGroupCheckbox';
-export type { DropdownMenuStatefulProps } from './types';
-export type { Props as WithToggleInteractionProps } from './components/hoc/withToggleInteraction';
+export { default } from './dropdown-menu';
+export { default as DropdownItemGroup } from './dropdown-menu-item-group';
+export { default as DropdownItem } from './dropdown-menu-item';
+export { default as DropdownItemCheckbox } from './checkbox/dropdown-item-checkbox';
+export { default as DropdownItemCheckboxGroup } from './checkbox/dropdown-item-checkbox-group';
+export { default as DropdownItemRadio } from './radio/dropdown-item-radio';
+export { default as DropdownItemRadioGroup } from './radio/dropdown-item-radio-group';
+export type { DropdownMenuProps, DropdownMenuGroupProps, DropdownItemProps, OnOpenChangeArgs, CustomTriggerProps, } from './types';

package/dist/types/internal/components/focus-manager.d.ts

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { FocusableElement } from '../../types';
+/**
+ *
+ *
+ * Context provider which maintains the list of focusable elements and a method to
+ * register new menu items.
+ * This list drives the keyboard navgation of the menu.
+ *
+ */
+export declare const FocusManagerContext: React.Context<{
+    menuItemRefs: FocusableElement[];
+    registerRef: (ref: FocusableElement) => void;
+}>;
+/**
+ * Focus manager logic
+ */
+declare const FocusManager: FC;
+export default FocusManager;

package/dist/types/internal/components/menu-wrapper.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { MenuWrapperProps } from '../../types';
+/**
+ *
+ * MenuWrapper wraps all the menu items.
+ * It handles the logic to close the menu when a MenuItem is clicked, but leaves it open
+ * if a CheckboxItem or RadioItem is clicked.
+ * It also sets focus to the first menu item when opened.
+ */
+declare const MenuWrapper: ({ onClose, setInitialFocusRef, ...props }: MenuWrapperProps) => JSX.Element;
+export default MenuWrapper;

package/dist/types/internal/context/checkbox-group-context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Holds the unique identifier for the checkbox group.
+ */
+export declare const CheckboxGroupContext: import("react").Context<string>;

package/dist/types/internal/context/selection-store.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+declare type OptionsInGroup = {
+    [key: string]: boolean | undefined;
+};
+declare type SelectionStoreContextProps = {
+    setItemState: (group: string, id: string, value: boolean | undefined) => void;
+    getItemState: (group: string, id: string) => boolean | undefined;
+    setGroupState: (group: string, value: OptionsInGroup) => void;
+    getGroupState: (group: string) => OptionsInGroup;
+};
+/**
+ *
+ * SelectionStoreContext maintains the state of the selected items
+ * and getter setters.
+ *
+ */
+export declare const SelectionStoreContext: React.Context<SelectionStoreContextProps>;
+declare type SelectionStoreProps = {
+    children: React.ReactNode;
+};
+/**
+ * Selection store will persist data as long as it remains mounted.
+ * It handles the uncontrolled story for dropdown menu when the menu
+ * items can be mounted/unmounted depending if the menu is open or closed.
+ */
+declare const SelectionStore: (props: SelectionStoreProps) => JSX.Element;
+export default SelectionStore;

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

@@ -0,0 +1,14 @@
+declare type CheckboxStateArgs = {
+    id: string;
+    isSelected: boolean | undefined;
+    defaultSelected: boolean | undefined;
+};
+declare type SetStateCallback = (value: boolean | undefined) => boolean;
+declare type CheckboxStateValue = [boolean, (newValue: SetStateCallback) => void];
+/**
+ * Custom hook to handle checkbox state for dropdown menu.
+ * It works in tandem with the selection store context when the
+ * component is uncontrolled.
+ */
+declare const useCheckboxState: ({ isSelected, id, defaultSelected, }: CheckboxStateArgs) => CheckboxStateValue;
+export default useCheckboxState;

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

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

package/dist/types/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FocusableElement } from '../../types';
+declare function useRegisterItemWithFocusManager(): import("react").RefObject<FocusableElement>;
+export default useRegisterItemWithFocusManager;

package/dist/types/internal/utils/get-icon-colors.d.ts

@@ -0,0 +1,8 @@
+declare const getIconColors: (isSelected: boolean | undefined) => {
+    primary: "var(--ds-background-boldBrand-resting)";
+    secondary: "var(--ds-background-default)";
+} | {
+    primary: "var(--ds-border-neutral)";
+    secondary: "var(--ds-UNSAFE_util-transparent)";
+};
+export default getIconColors;

package/dist/types/internal/utils/handle-focus.d.ts

@@ -0,0 +1,2 @@
+import { FocusableElement } from '../../types';
+export default function handleFocus(refs: Array<FocusableElement>): (e: KeyboardEvent) => void;

package/dist/types/internal/utils/is-checkbox-item.d.ts

@@ -0,0 +1 @@
+export default function isCheckboxItem(element: HTMLElement): boolean;

package/dist/types/internal/utils/is-radio-item.d.ts

@@ -0,0 +1 @@
+export default function isCheckboxItem(element: HTMLElement): boolean;

package/dist/types/internal/utils/is-voice-over-supported.d.ts

@@ -0,0 +1,2 @@
+declare const isVoiceOverSupported: () => boolean;
+export default isVoiceOverSupported;

package/dist/types/internal/utils/reset-options-in-group.d.ts

@@ -0,0 +1,4 @@
+declare const resetOptionsInGroup: (group: {
+    [key: string]: boolean | undefined;
+}) => {};
+export default resetOptionsInGroup;

package/dist/types/radio/dropdown-item-radio-group.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { SectionProps } from '@atlaskit/menu';
+interface DropdownItemRadioGroupProps extends SectionProps {
+    id: string;
+}
+interface RadioGroupContextProps {
+    id: string;
+    radioGroupState: {
+        [key: string]: boolean | undefined;
+    };
+    selectRadioItem: (id: string, value: boolean) => void;
+}
+/**
+ * __Radio group context__
+ * Context provider that wraps each DropdownItemRadioGroup
+ */
+export declare const RadioGroupContext: React.Context<RadioGroupContextProps>;
+/**
+ * __Dropdown item radio group__
+ *  Store which manages the selection state for each DropdownItemRadio
+ *  across mount and unmounts.
+ *
+ */
+declare const DropdownItemRadioGroup: (props: DropdownItemRadioGroupProps) => JSX.Element;
+export default DropdownItemRadioGroup;

package/dist/types/radio/dropdown-item-radio.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DropdownItemRadioProps } from '../types';
+/**
+ * __Dropdown item radio__
+ *
+ * A dropdown item radio displays groups that have a single selection.
+ *
+ * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/examples)
+ * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/code)
+ * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/usage)
+ */
+declare const DropdownItemRadio: (props: DropdownItemRadioProps) => JSX.Element;
+export default DropdownItemRadio;