suomifi-ui-components/dist/cjs/core/ActionMenu/ActionMenu.js

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
var AutoId = require('../utils/AutoId/AutoId.js');
var SuomifiThemeProvider = require('../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../theme/SuomifiTheme/SuomifiTheme.js');
var SpacingProvider = require('../theme/SpacingProvider/SpacingProvider.js');
var ActionMenuPopover = require('./ActionMenuPopover/ActionMenuPopover.js');
var Button = require('../Button/Button.js');
require('../../reset/HtmlA/HtmlA.js');
require('../../reset/HtmlButton/HtmlButton.js');
var HtmlDiv = require('../../reset/HtmlDiv/HtmlDiv.js');
require('../../reset/HtmlFieldSet/HtmlFieldSet.js');
require('../../reset/HtmlH/HtmlH.js');
require('../../reset/HtmlInput/HtmlInput.js');
require('../../reset/HtmlLabel/HtmlLabel.js');
require('../../reset/HtmlLegend/HtmlLegend.js');
require('../../reset/HtmlLi/HtmlLi.js');
require('../../reset/HtmlNav/HtmlNav.js');
require('../../reset/HtmlOl/HtmlOl.js');
require('../../reset/HtmlSpan/HtmlSpan.js');
require('../../reset/HtmlTextarea/HtmlTextarea.js');
require('../../reset/HtmlUl/HtmlUl.js');
require('../../reset/HtmlTable/HtmlTable.js');
require('../../reset/HtmlTable/HtmlTableCaption.js');
require('../../reset/HtmlTable/HtmlTableHeader.js');
require('../../reset/HtmlTable/HtmlTableRow.js');
require('../../reset/HtmlTable/HtmlTableBody.js');
require('../../reset/HtmlTable/HtmlTableHeaderCell.js');
require('../../reset/HtmlTable/HtmlTableCell.js');
var spacing = require('../theme/utils/spacing.js');
var ActionMenu_baseStyles = require('./ActionMenu.baseStyles.js');
var suomifiIcons = require('suomifi-icons');
var common = require('../../utils/common/common.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);

var baseClassName = 'fi-action-menu';
var actionMenuClassNames = {
  baseClassName: baseClassName,
  fullWidth: "".concat(baseClassName, "--full-width")
};
var BaseActionMenu = function BaseActionMenu(props) {
  var _a;
  var className = props.className,
    id = props.id,
    fullWidth = props.fullWidth,
    forwardedRef = props.forwardedRef,
    buttonText = props.buttonText,
    _b = props.buttonVariant,
    buttonVariant = _b === void 0 ? 'secondary' : _b,
    children = props.children,
    onOpen = props.onOpen,
    onClose = props.onClose,
    _onBlur = props.onBlur,
    menuClassName = props.menuClassName,
    style = props.style,
    rest = tslib.__rest(props, ["className", "id", "fullWidth", "forwardedRef", "buttonText", "buttonVariant", "children", "onOpen", "onClose", "onBlur", "menuClassName", "style"]);
  var _c = spacing.separateMarginProps(rest),
    passProps = _c[1];
  var openButtonRef = forwardedRef || React.useRef(null);
  var _d = React.useState(false),
    menuVisible = _d[0],
    setMenuVisible = _d[1];
  var _e = React.useState(false),
    ariaExpanded = _e[0],
    setAriaExpanded = _e[1];
  var _f = React.useState('none'),
    initialSelectedItem = _f[0],
    setInitialSelectedItem = _f[1];
  var menuId = "".concat(id, "-menu");
  var buttonId = "".concat(id);
  var openMenu = function openMenu() {
    if (onOpen) {
      onOpen();
    }
    setInitialSelectedItem('first');
    setMenuVisible(true);
    setAriaExpanded(true);
  };
  var closeMenu = function closeMenu(moveFocus) {
    var _a;
    if (moveFocus === void 0) {
      moveFocus = false;
    }
    setAriaExpanded(false);
    setMenuVisible(false);
    if (moveFocus) (_a = openButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    if (onClose) onClose();
  };
  var handleButtonClick = function handleButtonClick() {
    if (menuVisible) {
      closeMenu();
    } else {
      openMenu();
    }
  };
  var handleKeyDown = function handleKeyDown(event) {
    if (event.key === 'ArrowUp' && !menuVisible) {
      event.preventDefault();
      openMenu();
      setInitialSelectedItem('last');
    }
    if ((event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') && !menuVisible) {
      event.preventDefault();
      openMenu();
      setInitialSelectedItem('first');
    }
  };
  return /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
    className: classnames__default.default(baseClassName, className, (_a = {}, _a[actionMenuClassNames.fullWidth] = fullWidth, _a)),
    style: style
  }, /*#__PURE__*/React__default.default.createElement(Button.Button, tslib.__assign({
    id: buttonId,
    variant: buttonVariant,
    iconRight: /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconOptionsVertical, null),
    "aria-expanded": ariaExpanded,
    "aria-controls": menuId,
    "aria-haspopup": "menu",
    forwardedRef: openButtonRef,
    fullWidth: fullWidth,
    onClick: handleButtonClick,
    onKeyDown: handleKeyDown,
    onBlur: function onBlur(event) {
      if (_onBlur) {
        _onBlur(event);
      }
    }
  }, passProps), buttonText), /*#__PURE__*/React__default.default.createElement(ActionMenuPopover.ActionMenuPopover, {
    menuId: menuId,
    buttonId: buttonId,
    isOpen: menuVisible,
    openButtonRef: openButtonRef,
    onClose: function onClose(moveFocus) {
      return closeMenu(moveFocus);
    },
    children: children,
    initialActiveDescendant: initialSelectedItem,
    fullWidth: fullWidth,
    className: menuClassName
  }));
};
var StyledActionMenu = styled.styled(function (_a) {
  _a.theme;
    _a.globalMargins;
    var passProps = tslib.__rest(_a, ["theme", "globalMargins"]);
  return /*#__PURE__*/React__default.default.createElement(BaseActionMenu, tslib.__assign({}, passProps));
}).withConfig({
  componentId: "sc-w5jmk5-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
  var globalMargins = _a.globalMargins,
    rest = tslib.__rest(_a, ["globalMargins"]);
  var _b = spacing.separateMarginProps(rest),
    marginProps = _b[0];
  var cleanedGlobalMargins = common.filterDuplicateKeys(globalMargins.actionMenu, marginProps);
  return ActionMenu_baseStyles.baseStyles(cleanedGlobalMargins, marginProps);
});
var ActionMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var propId = props.id,
    passProps = tslib.__rest(props, ["id"]);
  return /*#__PURE__*/React__default.default.createElement(SpacingProvider.SpacingConsumer, null, function (_a) {
    var margins = _a.margins;
    return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
      var suomifiTheme = _a.suomifiTheme;
      return /*#__PURE__*/React__default.default.createElement(AutoId.AutoId, {
        id: propId
      }, function (id) {
        return /*#__PURE__*/React__default.default.createElement(StyledActionMenu, tslib.__assign({
          theme: suomifiTheme,
          id: id,
          globalMargins: margins,
          forwardedRef: ref
        }, passProps));
      });
    });
  });
});
ActionMenu.displayName = 'ActionMenu';
var templateObject_1;

exports.ActionMenu = ActionMenu;
exports.actionMenuClassNames = actionMenuClassNames;
//# sourceMappingURL=ActionMenu.js.map