baseui/menu/menu.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Menu;
var React = _interopRequireWildcard(require("react"));
var _locale = require("../locale");
var _styledComponents = require("./styled-components");
var _optionList = _interopRequireDefault(require("./option-list"));
var _overrides = require("../helpers/overrides");
var _focusVisible = require("../utils/focusVisible");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/ // Components
// Types
function Menu(props) {
  const {
    overrides = {},
    'aria-label': ariaLabel = 'Menu',
    rootRef = /*#__PURE__*/React.createRef(),
    focusMenu = () => {},
    unfocusMenu = () => {},
    handleMouseLeave = () => {},
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    handleKeyDown = event => {},
    renderAll = false
  } = props;
  const [focusVisible, setFocusVisible] = React.useState(false);
  const handleFocus = event => {
    if ((0, _focusVisible.isFocusVisible)(event)) {
      setFocusVisible(true);
    }
  };

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const handleBlur = event => {
    if (focusVisible !== false) {
      setFocusVisible(false);
    }
  };
  const [List, listProps] = (0, _overrides.getOverrides)(overrides.List, _styledComponents.StyledList);
  const [Option, optionProps] = (0, _overrides.getOverrides)(overrides.Option, _optionList.default);
  const [EmptyState, emptyStateProps] = (0, _overrides.getOverrides)(overrides.EmptyState, _styledComponents.StyledEmptyState);
  const [OptgroupHeader, optgroupHeaderProps] = (0, _overrides.getOverrides)(overrides.OptgroupHeader, _styledComponents.StyledOptgroupHeader);
  const [MenuDivider, menuDividerProps] = (0, _overrides.getOverrides)(overrides.MenuDivider, _styledComponents.StyledMenuDivider);
  const groupedItems = Array.isArray(props.items) ? {
    __ungrouped: props.items
  } : props.items;
  const optgroups = Object.keys(groupedItems);
  const [elements] = optgroups.reduce(([els, itemIndex], optgroup) => {
    if (optgroup !== '__ungrouped') {
      els.push(
      /*#__PURE__*/
      // @ts-ignore
      React.createElement(OptgroupHeader, _extends({
        key: optgroup
      }, optgroupHeaderProps), optgroup));
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    // @ts-ignore
    const groupItems = groupedItems[optgroup].map((item, index) => {
      itemIndex = itemIndex + 1;
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      const {
        getRequiredItemProps = (item, index) => ({})
      } = props;
      if (item.divider === true) {
        return /*#__PURE__*/React.createElement(MenuDivider, _extends({
          key: itemIndex
        }, menuDividerProps));
      }
      const {
        disabled,
        isFocused,
        isHighlighted,
        resetMenu = () => {},
        ...restProps
      } = getRequiredItemProps(item, itemIndex);
      return /*#__PURE__*/React.createElement(Option, _extends({
        renderAll: renderAll,
        key: itemIndex,
        item: item,
        overrides: props.overrides,
        resetMenu: resetMenu,
        role: "option",
        $disabled: disabled,
        $isFocused: isFocused,
        $isHighlighted: isHighlighted,
        "aria-disabled": disabled,
        "aria-selected": isHighlighted && isFocused
      }, restProps, optionProps));
    });
    return [els.concat(groupItems), itemIndex];
  }, [[], -1]);

  // @ts-ignore
  const isEmpty = optgroups.every(optgroup => !groupedItems[optgroup].length);
  return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(List, _extends({
    "aria-activedescendant": props.activedescendantId || null,
    role: "listbox",
    "aria-label": ariaLabel,
    ref: rootRef,
    onMouseEnter: focusMenu,
    onMouseLeave: handleMouseLeave,
    onMouseOver: focusMenu,
    onFocus: (0, _focusVisible.forkFocus)({
      onFocus: focusMenu
    }, handleFocus),
    onBlur: (0, _focusVisible.forkBlur)({
      onBlur: unfocusMenu
    }, handleBlur)
    // @ts-ignore
    ,
    onKeyDown: event => {
      if (props.isFocused) {
        handleKeyDown(event);
      }
    },
    tabIndex: 0,
    "data-baseweb": "menu",
    $isFocusVisible: focusVisible
  }, listProps), isEmpty ? /*#__PURE__*/React.createElement(EmptyState, _extends({
    "aria-live": "polite",
    "aria-atomic": true
  }, emptyStateProps), props.noResultsMsg || locale.menu.noResultsMsg) : elements));
}