@primer/components/lib/SelectMenu/SelectMenu.js

Primer react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _constants = require("../constants");

var _sx = _interopRequireDefault(require("../sx"));

var _useKeyboardNav = _interopRequireDefault(require("./hooks/useKeyboardNav"));

var _SelectMenuContext = require("./SelectMenuContext");

var _SelectMenuDivider = _interopRequireDefault(require("./SelectMenuDivider"));

var _SelectMenuFilter = _interopRequireDefault(require("./SelectMenuFilter"));

var _SelectMenuFooter = _interopRequireDefault(require("./SelectMenuFooter"));

var _SelectMenuHeader = _interopRequireDefault(require("./SelectMenuHeader"));

var _SelectMenuItem = _interopRequireDefault(require("./SelectMenuItem"));

var _SelectMenuList = _interopRequireDefault(require("./SelectMenuList"));

var _SelectMenuLoadingAnimation = _interopRequireDefault(require("./SelectMenuLoadingAnimation"));

var _SelectMenuModal = _interopRequireDefault(require("./SelectMenuModal"));

var _SelectMenuTab = _interopRequireDefault(require("./SelectMenuTab"));

var _SelectMenuTabPanel = _interopRequireDefault(require("./SelectMenuTabPanel"));

var _SelectMenuTabs = _interopRequireDefault(require("./SelectMenuTabs"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || 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); }

const wrapperStyles = `
  // Remove marker added by the display: list-item browser default
  > summary {
    list-style: none;
  }
  // Remove marker added by details polyfill
  > summary::before {
    display: none;
  }
  // Remove marker added by Chrome
  > summary::-webkit-details-marker {
    display: none;
  }
`;

const StyledSelectMenu = _styledComponents.default.details.withConfig({
  displayName: "SelectMenu__StyledSelectMenu",
  componentId: "i7h45b-0"
})(["", " ", " ", ";"], wrapperStyles, _constants.COMMON, _sx.default);

// 'as' is spread out because we don't want users to be able to change the tag.
const SelectMenu = /*#__PURE__*/_react.default.forwardRef(({
  children,
  initialTab = '',
  as: _ignoredAs,
  ...rest
}, forwardedRef) => {
  const backupRef = (0, _react.useRef)(null);
  const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
  const [selectedTab, setSelectedTab] = (0, _react.useState)(initialTab);
  const [open, setOpen] = (0, _react.useState)(false);
  const menuProviderValues = {
    selectedTab,
    setSelectedTab,
    setOpen,
    open,
    initialTab
  };
  const onClickOutside = (0, _react.useCallback)(event => {
    if ('current' in ref && ref.current && !ref.current.contains(event.target)) {
      if (!event.defaultPrevented) {
        setOpen(false);
      }
    }
  }, [ref, setOpen]); // handles the overlay behavior - closing the menu when clicking outside of it

  (0, _react.useEffect)(() => {
    if (open) {
      document.addEventListener('click', onClickOutside);
      return () => {
        document.removeEventListener('click', onClickOutside);
      };
    }
  }, [open, onClickOutside]);

  function toggle(event) {
    setOpen(event.target.open);
  }

  (0, _useKeyboardNav.default)(ref, open, setOpen);
  return /*#__PURE__*/_react.default.createElement(_SelectMenuContext.MenuContext.Provider, {
    value: menuProviderValues
  }, /*#__PURE__*/_react.default.createElement(StyledSelectMenu, _extends({
    ref: ref
  }, rest, {
    open: open,
    onToggle: toggle
  }), children));
});

SelectMenu.displayName = 'SelectMenu';

var _default = Object.assign(SelectMenu, {
  MenuContext: _SelectMenuContext.MenuContext,
  List: _SelectMenuList.default,
  Divider: _SelectMenuDivider.default,
  Filter: _SelectMenuFilter.default,
  Footer: _SelectMenuFooter.default,
  Item: _SelectMenuItem.default,
  Modal: _SelectMenuModal.default,
  Tabs: _SelectMenuTabs.default,
  Tab: _SelectMenuTab.default,
  TabPanel: _SelectMenuTabPanel.default,
  Header: _SelectMenuHeader.default,
  LoadingAnimation: _SelectMenuLoadingAnimation.default
});

exports.default = _default;