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

Suomi.fi UI component library

import { __rest, __assign, __makeTemplateObject } from 'tslib';
import React, { useRef, useState, forwardRef } from 'react';
import { styled } from 'styled-components';
import classnames from 'classnames';
import { AutoId } from '../utils/AutoId/AutoId.js';
import { SuomifiThemeConsumer } from '../theme/SuomifiThemeProvider/SuomifiThemeProvider.js';
import '../theme/SuomifiTheme/SuomifiTheme.js';
import { SpacingConsumer } from '../theme/SpacingProvider/SpacingProvider.js';
import { ActionMenuPopover } from './ActionMenuPopover/ActionMenuPopover.js';
import { Button } from '../Button/Button.js';
import '../../reset/HtmlA/HtmlA.js';
import '../../reset/HtmlButton/HtmlButton.js';
import { HtmlDiv } from '../../reset/HtmlDiv/HtmlDiv.js';
import '../../reset/HtmlFieldSet/HtmlFieldSet.js';
import '../../reset/HtmlH/HtmlH.js';
import '../../reset/HtmlInput/HtmlInput.js';
import '../../reset/HtmlLabel/HtmlLabel.js';
import '../../reset/HtmlLegend/HtmlLegend.js';
import '../../reset/HtmlLi/HtmlLi.js';
import '../../reset/HtmlNav/HtmlNav.js';
import '../../reset/HtmlOl/HtmlOl.js';
import '../../reset/HtmlSpan/HtmlSpan.js';
import '../../reset/HtmlTextarea/HtmlTextarea.js';
import '../../reset/HtmlUl/HtmlUl.js';
import '../../reset/HtmlTable/HtmlTable.js';
import '../../reset/HtmlTable/HtmlTableCaption.js';
import '../../reset/HtmlTable/HtmlTableHeader.js';
import '../../reset/HtmlTable/HtmlTableRow.js';
import '../../reset/HtmlTable/HtmlTableBody.js';
import '../../reset/HtmlTable/HtmlTableHeaderCell.js';
import '../../reset/HtmlTable/HtmlTableCell.js';
import { separateMarginProps } from '../theme/utils/spacing.js';
import { baseStyles } from './ActionMenu.baseStyles.js';
import { IconOptionsVertical } from 'suomifi-icons';
import { filterDuplicateKeys } from '../../utils/common/common.js';

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 = __rest(props, ["className", "id", "fullWidth", "forwardedRef", "buttonText", "buttonVariant", "children", "onOpen", "onClose", "onBlur", "menuClassName", "style"]);
  var _c = separateMarginProps(rest),
    passProps = _c[1];
  var openButtonRef = forwardedRef || useRef(null);
  var _d = useState(false),
    menuVisible = _d[0],
    setMenuVisible = _d[1];
  var _e = useState(false),
    ariaExpanded = _e[0],
    setAriaExpanded = _e[1];
  var _f = 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.createElement(HtmlDiv, {
    className: classnames(baseClassName, className, (_a = {}, _a[actionMenuClassNames.fullWidth] = fullWidth, _a)),
    style: style
  }, /*#__PURE__*/React.createElement(Button, __assign({
    id: buttonId,
    variant: buttonVariant,
    iconRight: /*#__PURE__*/React.createElement(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.createElement(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(function (_a) {
  _a.theme;
    _a.globalMargins;
    var passProps = __rest(_a, ["theme", "globalMargins"]);
  return /*#__PURE__*/React.createElement(BaseActionMenu, __assign({}, passProps));
}).withConfig({
  componentId: "sc-w5jmk5-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
  var globalMargins = _a.globalMargins,
    rest = __rest(_a, ["globalMargins"]);
  var _b = separateMarginProps(rest),
    marginProps = _b[0];
  var cleanedGlobalMargins = filterDuplicateKeys(globalMargins.actionMenu, marginProps);
  return baseStyles(cleanedGlobalMargins, marginProps);
});
var ActionMenu = /*#__PURE__*/forwardRef(function (props, ref) {
  var propId = props.id,
    passProps = __rest(props, ["id"]);
  return /*#__PURE__*/React.createElement(SpacingConsumer, null, function (_a) {
    var margins = _a.margins;
    return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
      var suomifiTheme = _a.suomifiTheme;
      return /*#__PURE__*/React.createElement(AutoId, {
        id: propId
      }, function (id) {
        return /*#__PURE__*/React.createElement(StyledActionMenu, __assign({
          theme: suomifiTheme,
          id: id,
          globalMargins: margins,
          forwardedRef: ref
        }, passProps));
      });
    });
  });
});
ActionMenu.displayName = 'ActionMenu';
var templateObject_1;

export { ActionMenu, actionMenuClassNames };
//# sourceMappingURL=ActionMenu.js.map