@atlaskit/dropdown-menu 10.1.8 → 11.0.2

package/dist/es2019/dropdown-menu.js

@@ -0,0 +1,151 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { useCallback, useState } from 'react';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/standard-button';
+import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
+import noop from '@atlaskit/ds-lib/noop';
+import useControlledState from '@atlaskit/ds-lib/use-controlled';
+import useFocus from '@atlaskit/ds-lib/use-focus-event';
+import useKeydownEvent from '@atlaskit/ds-lib/use-keydown-event';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import Popup from '@atlaskit/popup';
+import Spinner from '@atlaskit/spinner';
+import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import FocusManager from './internal/components/focus-manager';
+import MenuWrapper from './internal/components/menu-wrapper';
+import SelectionStore from './internal/context/selection-store';
+const gridSize = gridSizeFn();
+const spinnerContainerStyles = css({
+  display: 'flex',
+  minWidth: `${gridSize * 20}px`,
+  padding: `${gridSize * 2.5}px`,
+  justifyContent: 'center'
+});
+const MAX_HEIGHT = `calc(100vh - ${gridSize * 2}px)`;
+/**
+ * __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)
+ */
+
+const DropdownMenu = props => {
+  const {
+    defaultOpen = false,
+    isOpen,
+    onOpenChange = noop,
+    children,
+    placement = 'bottom-start',
+    trigger: Trigger,
+    shouldFlip = true,
+    isLoading = false,
+    autoFocus = false,
+    testId,
+    statusLabel = 'Loading'
+  } = props;
+  const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
+  const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
+  const handleTriggerClicked = useCallback(event => {
+    const newValue = !isLocalOpen;
+    const {
+      clientX,
+      clientY,
+      type
+    } = event;
+
+    if (type === 'keydown') {
+      setTriggeredUsingKeyboard(true);
+    } else if (clientX === 0 || clientY === 0) {
+      // Hitting enter/space is registered as a click
+      // with both clientX and clientY === 0
+      setTriggeredUsingKeyboard(true);
+    }
+
+    setLocalIsOpen(newValue);
+    onOpenChange({
+      isOpen: newValue,
+      event
+    });
+  }, [onOpenChange, isLocalOpen, setLocalIsOpen]);
+  const handleOnClose = useCallback(() => {
+    const newValue = false;
+    setLocalIsOpen(newValue);
+    onOpenChange({
+      isOpen: newValue
+    });
+  }, [onOpenChange, setLocalIsOpen]);
+  const {
+    isFocused,
+    bindFocus
+  } = useFocus();
+
+  const handleDownArrow = e => {
+    if (e.key === KEY_DOWN) {
+      // prevent page scroll
+      e.preventDefault();
+      handleTriggerClicked(e);
+    }
+  };
+
+  useKeydownEvent(handleDownArrow, isFocused);
+
+  const renderTrigger = triggerProps => {
+    if (typeof Trigger === 'function') {
+      const {
+        ref,
+        ...providedProps
+      } = triggerProps;
+      return jsx(Trigger, _extends({}, providedProps, bindFocus, {
+        triggerRef: ref,
+        isSelected: isLocalOpen,
+        onClick: handleTriggerClicked,
+        testId: testId && `${testId}--trigger`
+      }));
+    }
+
+    return jsx(Button, _extends({}, triggerProps, bindFocus, {
+      isSelected: isLocalOpen,
+      iconAfter: jsx(ExpandIcon, {
+        size: "medium",
+        label: "expand"
+      }),
+      onClick: handleTriggerClicked,
+      testId: testId && `${testId}--trigger`
+    }), Trigger);
+  };
+
+  const fallbackPlacements = ['bottom', 'bottom-end', 'right-start', 'left-start', 'auto'];
+  return jsx(SelectionStore, null, jsx(Popup, {
+    shouldFlip: shouldFlip,
+    isOpen: isLocalOpen,
+    onClose: handleOnClose,
+    zIndex: layers.modal(),
+    placement: placement,
+    fallbackPlacements: fallbackPlacements,
+    testId: testId && `${testId}--content`,
+    trigger: renderTrigger,
+    shouldUseCaptureOnOutsideClick: true,
+    content: ({
+      setInitialFocusRef
+    }) => jsx(FocusManager, null, jsx(MenuWrapper, {
+      maxHeight: MAX_HEIGHT,
+      maxWidth: 800,
+      onClose: handleOnClose,
+      setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
+    }, isLoading ? jsx("div", {
+      css: spinnerContainerStyles
+    }, jsx(Spinner, {
+      size: "small"
+    }), jsx(VisuallyHidden, {
+      role: "status"
+    }, statusLabel)) : children))
+  }));
+};
+
+export default DropdownMenu;

package/dist/es2019/index.js

@@ -1,11 +1,7 @@
-// menu exports
-export { default } from './components/DropdownMenu';
-export { default as DropdownMenuStateless } from './components/DropdownMenuStateless'; // Item exports
-
-export { default as DropdownItem } from './components/item/DropdownItem';
-export { default as DropdownItemRadio } from './components/item/DropdownItemRadio';
-export { default as DropdownItemCheckbox } from './components/item/DropdownItemCheckbox'; // ItemGroup exports
-
-export { default as DropdownItemGroup } from './components/group/DropdownItemGroup';
-export { default as DropdownItemGroupRadio } from './components/group/DropdownItemGroupRadio';
-export { default as DropdownItemGroupCheckbox } from './components/group/DropdownItemGroupCheckbox'; // Types
+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';

package/dist/es2019/internal/components/focus-manager.js

@@ -0,0 +1,40 @@
+import React, { createContext, useCallback, useRef } from 'react';
+import useKeydownEvent from '@atlaskit/ds-lib/use-keydown-event';
+import handleFocus from '../utils/handle-focus';
+/**
+ *
+ *
+ * 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 const FocusManagerContext = /*#__PURE__*/createContext({
+  menuItemRefs: [],
+  registerRef: ref => {}
+});
+/**
+ * Focus manager logic
+ */
+
+const FocusManager = ({
+  children
+}) => {
+  const menuItemRefs = useRef([]);
+  const registerRef = useCallback(ref => {
+    if (ref && !menuItemRefs.current.includes(ref)) {
+      menuItemRefs.current.push(ref);
+    }
+  }, []);
+  useKeydownEvent(handleFocus(menuItemRefs.current));
+  const contextValue = {
+    menuItemRefs: menuItemRefs.current,
+    registerRef
+  };
+  return /*#__PURE__*/React.createElement(FocusManagerContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+export default FocusManager;

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

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useContext } from 'react';
+import MenuGroup from '@atlaskit/menu/menu-group';
+import { FocusManagerContext } from '../components/focus-manager';
+import isCheckboxItem from '../utils/is-checkbox-item';
+import isRadioItem from '../utils/is-radio-item';
+/**
+ *
+ * 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.
+ */
+
+const MenuWrapper = ({
+  onClose,
+  setInitialFocusRef,
+  ...props
+}) => {
+  const {
+    menuItemRefs
+  } = useContext(FocusManagerContext);
+
+  const closeOnMenuItemClick = e => {
+    const isTargetMenuItemOrDecendant = menuItemRefs.some(menuItem => {
+      const isCheckboxOrRadio = isCheckboxItem(menuItem) || isRadioItem(menuItem);
+      return menuItem.contains(e.target) && !isCheckboxOrRadio;
+    }); // Close menu if the click is triggered from a MenuItem or
+    // its decendant. Don't close the menu if the click is triggered
+    // from a MenuItemRadio or MenuItemCheckbox so that the user can
+    // select multiple items.
+
+    if (isTargetMenuItemOrDecendant && onClose) {
+      onClose();
+    }
+  };
+
+  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]);
+  return /*#__PURE__*/React.createElement(MenuGroup, _extends({
+    onClick: closeOnMenuItemClick
+  }, props));
+};
+
+export default MenuWrapper;

package/dist/es2019/internal/context/checkbox-group-context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+/**
+ * Holds the unique identifier for the checkbox group.
+ */
+
+export const CheckboxGroupContext = /*#__PURE__*/createContext('');

package/dist/es2019/internal/context/selection-store.js

@@ -0,0 +1,54 @@
+import React, { createContext, useMemo, useRef } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+
+/**
+ *
+ * SelectionStoreContext maintains the state of the selected items
+ * and getter setters.
+ *
+ */
+export const SelectionStoreContext = /*#__PURE__*/createContext({
+  setItemState: noop,
+  getItemState: () => undefined,
+  setGroupState: noop,
+  getGroupState: () => ({})
+});
+
+/**
+ * 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.
+ */
+const SelectionStore = props => {
+  const {
+    children
+  } = props;
+  const store = useRef({});
+  const context = useMemo(() => ({
+    setItemState: (group, id, value) => {
+      if (!store.current[group]) {
+        store.current[group] = {};
+      }
+
+      store.current[group][id] = value;
+    },
+    getItemState: (group, id) => {
+      if (!store.current[group]) {
+        return undefined;
+      }
+
+      return store.current[group][id];
+    },
+    setGroupState: (group, value) => {
+      store.current[group] = value;
+    },
+    getGroupState: group => {
+      return store.current[group] || {};
+    }
+  }), []);
+  return /*#__PURE__*/React.createElement(SelectionStoreContext.Provider, {
+    value: context
+  }, children);
+};
+
+export default SelectionStore;

package/dist/es2019/internal/hooks/use-checkbox-state.js

@@ -0,0 +1,45 @@
+import { useCallback, useContext, useState } from 'react';
+import { CheckboxGroupContext } from '../context/checkbox-group-context';
+import { SelectionStoreContext } from '../context/selection-store';
+
+/**
+ * Custom hook to handle checkbox state for dropdown menu.
+ * It works in tandem with the selection store context when the
+ * component is uncontrolled.
+ */
+const useCheckboxState = ({
+  isSelected,
+  id,
+  defaultSelected
+}) => {
+  const {
+    setItemState,
+    getItemState
+  } = useContext(SelectionStoreContext);
+  const groupId = useContext(CheckboxGroupContext);
+  const persistedIsSelected = getItemState(groupId, id);
+  const [localIsSelected, setLocalIsSelected] = useState( // Initial state is set depending on value being defined or not.
+  // This state is only utilised if the checkbox is uncontrolled.
+  () => persistedIsSelected !== undefined ? persistedIsSelected : defaultSelected || false);
+  const setLocalState = useCallback(newValue => {
+    const nextValue = newValue(persistedIsSelected);
+    setLocalIsSelected(nextValue);
+    setItemState(groupId, id, nextValue);
+  }, [setItemState, persistedIsSelected, groupId, id]); // Checkbox is controlled - do nothing!
+
+  if (typeof isSelected === 'boolean') {
+    return [isSelected, () => false];
+  } // Checkbox is going through its first render pass!
+
+
+  if (persistedIsSelected === undefined) {
+    // Set the item so we have this state to access next time the checkbox renders (either by mounting or re-rendering!)
+    setItemState(groupId, id, defaultSelected || false);
+  } // Return the value and setter!
+  // Remember this flow is only returned if the checkbox is uncontrolled.
+
+
+  return [localIsSelected, setLocalState];
+};
+
+export default useCheckboxState;

package/dist/es2019/internal/hooks/use-radio-state.js

@@ -0,0 +1,56 @@
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { RadioGroupContext } from '../../radio/dropdown-item-radio-group';
+import { SelectionStoreContext } from '../context/selection-store';
+import resetOptionsInGroup from '../utils/reset-options-in-group';
+
+function useRadioState({
+  id,
+  isSelected,
+  defaultSelected
+}) {
+  const {
+    setGroupState,
+    getGroupState
+  } = useContext(SelectionStoreContext);
+  const {
+    id: group,
+    radioGroupState,
+    selectRadioItem
+  } = useContext(RadioGroupContext);
+  const persistedIsSelected = radioGroupState[id];
+  const [localIsSelected, setLocalIsSelected] = useState(() => persistedIsSelected !== undefined ? persistedIsSelected : defaultSelected || false);
+  const setLocalState = useCallback(newValue => {
+    if (!persistedIsSelected) {
+      const nextValue = newValue(persistedIsSelected);
+      selectRadioItem(id, nextValue);
+      setLocalIsSelected(nextValue);
+    }
+  }, [persistedIsSelected, id, selectRadioItem]);
+  /**
+   * - radio state changes any time a radio child is changed
+   * - when it changes we want all radio buttons to update their local state
+   * - it takes the value from radio group state and applies it locally if it exists which it will only exist, if it is selected
+   */
+
+  useEffect(() => {
+    setLocalIsSelected(() => {
+      const existing = radioGroupState[id];
+      return existing !== undefined ? existing : defaultSelected || false;
+    });
+  }, [radioGroupState, group, id, defaultSelected]);
+
+  if (typeof isSelected === 'boolean') {
+    return [isSelected, () => false];
+  }
+
+  if (persistedIsSelected === undefined) {
+    const existing = getGroupState(group);
+    setGroupState(group, { ...resetOptionsInGroup(existing || {}),
+      [id]: defaultSelected || false
+    });
+  }
+
+  return [localIsSelected, setLocalState];
+}
+
+export default useRadioState;

package/dist/es2019/internal/hooks/use-register-item-with-focus-manager.js

@@ -0,0 +1,19 @@
+import { useContext, useEffect, useRef } from 'react';
+import { FocusManagerContext } from '../components/focus-manager'; // This function is called whenever a MenuItem mounts.
+// The refs stored in the context are used to programatically
+// control focus on a user navigates using the keyboard.
+
+function useRegisterItemWithFocusManager() {
+  const {
+    registerRef
+  } = useContext(FocusManagerContext);
+  const itemRef = useRef(null);
+  useEffect(() => {
+    if (itemRef.current !== null) {
+      registerRef(itemRef.current);
+    }
+  }, [registerRef]);
+  return itemRef;
+}
+
+export default useRegisterItemWithFocusManager;

package/dist/es2019/internal/utils/get-icon-colors.js

@@ -0,0 +1,17 @@
+import { B400, N40 } from '@atlaskit/theme/colors';
+
+const getIconColors = isSelected => {
+  if (isSelected) {
+    return {
+      primary: `var(--ds-background-boldBrand-resting, ${B400})`,
+      secondary: `var(--ds-background-default, ${N40})`
+    };
+  }
+
+  return {
+    primary: `var(--ds-border-neutral, ${N40})`,
+    secondary: `var(--ds-UNSAFE_util-transparent, ${N40})`
+  };
+};
+
+export default getIconColors;

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

@@ -0,0 +1,48 @@
+import { KEY_DOWN, KEY_END, KEY_HOME, KEY_UP } from '@atlaskit/ds-lib/keycodes';
+const actionMap = {
+  [KEY_DOWN]: 'next',
+  [KEY_UP]: 'prev',
+  [KEY_HOME]: 'first',
+  [KEY_END]: 'last'
+};
+export default function handleFocus(refs) {
+  return e => {
+    const currentFocusedIdx = refs.findIndex(el => {
+      var _document$activeEleme;
+
+      return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
+    });
+    const 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/es2019/internal/utils/is-checkbox-item.js

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

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

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

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

@@ -0,0 +1,11 @@
+const canUseDOM = () => 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
+ */
+
+
+const isVoiceOverSupported = () => /Mac OS X/.test(canUseDOM() ? navigator.userAgent : '');
+
+export default isVoiceOverSupported;

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

@@ -0,0 +1,7 @@
+const resetOptionsInGroup = group => {
+  return Object.keys(group || {}).reduce((accumulator, current) => ({ ...accumulator,
+    [current]: typeof group[current] === 'undefined' ? undefined : false
+  }), {});
+};
+
+export default resetOptionsInGroup;

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

@@ -0,0 +1,56 @@
+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 const RadioGroupContext = /*#__PURE__*/createContext({
+  id: '',
+  radioGroupState: {},
+  selectRadioItem: noop
+});
+/**
+ * __Dropdown item radio group__
+ *  Store which manages the selection state for each DropdownItemRadio
+ *  across mount and unmounts.
+ *
+ */
+
+const DropdownItemRadioGroup = props => {
+  const {
+    children,
+    id
+  } = props;
+  const {
+    setGroupState,
+    getGroupState
+  } = useContext(SelectionStoreContext);
+  /**
+   *  - 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
+   */
+
+  const [radioGroupState, setRadioGroupState] = useState(() => getGroupState(id));
+
+  const selectRadioItem = (childId, value) => {
+    const newValue = { ...resetOptionsInGroup(getGroupState(id)),
+      [childId]: value
+    };
+    setRadioGroupState(newValue);
+    setGroupState(id, newValue);
+  };
+
+  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
+    value: {
+      id,
+      radioGroupState,
+      selectRadioItem
+    }
+  }, /*#__PURE__*/React.createElement(Section, props, children));
+};
+
+export default DropdownItemRadioGroup;

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

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+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)
+ */
+const DropdownItemRadio = props => {
+  const {
+    id,
+    isSelected,
+    defaultSelected,
+    onClick: providedOnClick = noop,
+    shouldTitleWrap = true,
+    shouldDescriptionWrap = true,
+    ...rest
+  } = props;
+
+  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.");
+  }
+
+  const [selected, setSelected] = useRadioState({
+    id,
+    isSelected,
+    defaultSelected
+  });
+  const [iconColors, setIconColors] = useState(getIconColors(defaultSelected));
+  const onClickHandler = useCallback(event => {
+    setSelected(selected => !selected);
+    providedOnClick(event);
+  }, [providedOnClick, setSelected]);
+  useEffect(() => {
+    setIconColors(getIconColors(selected));
+  }, [selected]);
+  const 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/es2019/version.json

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