suomifi-ui-components/dist/esm/core/LanguageMenu/LanguageMenu.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 { separateMarginProps } from '../theme/utils/spacing.js';
import { LanguageMenuPopover } from './LanguageMenuPopover/LanguageMenuPopover.js';
import '../../reset/HtmlA/HtmlA.js';
import { HtmlButton } from '../../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 { getConditionalAriaProp } from '../../utils/aria/aria.js';
import { baseStyles } from './LanguageMenu.baseStyles.js';
import { IconChevronUp, IconChevronDown } from 'suomifi-icons';
import { filterDuplicateKeys } from '../../utils/common/common.js';

var baseClassName = 'fi-language-menu';
var languageMenuClassNames = {
  baseClassName: baseClassName,
  button: "".concat(baseClassName, "_button"),
  icon: "".concat(baseClassName, "_button_icon"),
  menuOpen: "".concat(baseClassName, "_button--open")
};
var BaseLanguageMenu = function BaseLanguageMenu(props) {
  var _a;
  var className = props.className,
    menuClassName = props.menuClassName,
    style = props.style,
    id = props.id,
    forwardedRef = props.forwardedRef,
    buttonText = props.buttonText,
    children = props.children,
    onOpen = props.onOpen,
    onClose = props.onClose,
    _onBlur = props.onBlur,
    ariaLabel = props["aria-label"],
    rest = __rest(props, ["className", "menuClassName", "style", "id", "forwardedRef", "buttonText", "children", "onOpen", "onClose", "onBlur", 'aria-label']);
  var _b = separateMarginProps(rest),
    passProps = _b[1];
  var openButtonRef = forwardedRef || useRef(null);
  var _c = useState(false),
    menuVisible = _c[0],
    setMenuVisible = _c[1];
  var _d = useState(false),
    ariaExpanded = _d[0],
    setAriaExpanded = _d[1];
  var _e = useState('none'),
    selectFirstItem = _e[0],
    setSelectFirstItem = _e[1];
  var menuId = "".concat(id, "-menu");
  var buttonId = "".concat(id);
  var openMenu = function openMenu() {
    if (onOpen) {
      onOpen();
    }
    setSelectFirstItem('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();
      setSelectFirstItem('last');
    }
    if ((event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') && !menuVisible) {
      event.preventDefault();
      openMenu();
      setSelectFirstItem('first');
    }
  };
  return /*#__PURE__*/React.createElement(HtmlDiv, {
    className: classnames(baseClassName, className),
    style: style
  }, /*#__PURE__*/React.createElement(HtmlButton, __assign({
    id: buttonId,
    "aria-expanded": ariaExpanded,
    "aria-controls": menuId,
    "aria-haspopup": "menu"
  }, getConditionalAriaProp('aria-label', [ariaLabel]), {
    forwardedRef: openButtonRef,
    className: classnames(languageMenuClassNames.button, (_a = {}, _a[languageMenuClassNames.menuOpen] = menuVisible, _a)),
    onClick: handleButtonClick,
    onKeyDown: handleKeyDown,
    onBlur: function onBlur(event) {
      if (_onBlur) {
        _onBlur(event);
      }
    }
  }, passProps), buttonText, menuVisible ? ( /*#__PURE__*/React.createElement(IconChevronUp, {
    className: languageMenuClassNames.icon
  })) : ( /*#__PURE__*/React.createElement(IconChevronDown, {
    className: languageMenuClassNames.icon
  }))), /*#__PURE__*/React.createElement(LanguageMenuPopover, {
    isOpen: menuVisible,
    menuId: menuId,
    parentId: id,
    openButtonRef: openButtonRef,
    onClose: function onClose(moveFocus) {
      return closeMenu(moveFocus);
    },
    children: children,
    initialActiveDescendant: selectFirstItem,
    className: menuClassName
  }));
};
var StyledLanguageMenu = styled(function (_a) {
  _a.theme;
    _a.globalMargins;
    var passProps = __rest(_a, ["theme", "globalMargins"]);
  return /*#__PURE__*/React.createElement(BaseLanguageMenu, __assign({}, passProps));
}).withConfig({
  componentId: "sc-1pbq2r2-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
  var theme = _a.theme,
    globalMargins = _a.globalMargins,
    rest = __rest(_a, ["theme", "globalMargins"]);
  var _b = separateMarginProps(rest),
    marginProps = _b[0];
  var cleanedGlobalMargins = filterDuplicateKeys(globalMargins.languageMenu, marginProps);
  return baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var LanguageMenu = /*#__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(StyledLanguageMenu, __assign({
          theme: suomifiTheme,
          globalMargins: margins,
          id: id,
          forwardedRef: ref
        }, passProps));
      });
    });
  });
});
LanguageMenu.displayName = 'LanguageMenu';
var templateObject_1;

export { LanguageMenu, languageMenuClassNames };
//# sourceMappingURL=LanguageMenu.js.map