import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState } from 'react';
import { addSeparator } from '../../utils/index.js';
import { StyledRoot, StyledShorter, StyledHidden } from './BreadcrumbShorter.styles.js';

var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
  var children = _ref.children,
    separator = _ref.separator;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    openShorter = _useState2[0],
    setOpenShorter = _useState2[1];
  var renderItems = addSeparator(children, separator);
  var onKeyPress = function onKeyPress(event) {
    event.persist();
    if (event.keyCode === 13) {
      setOpenShorter(true);
    }
  };
  return /*#__PURE__*/React__default.createElement(StyledRoot, null, !openShorter && /*#__PURE__*/React__default.createElement(StyledShorter, {
    tabIndex: 0,
    onClick: function onClick() {
      return setOpenShorter(true);
    },
    onKeyDown: onKeyPress
  }, "..."), openShorter && /*#__PURE__*/React__default.createElement(StyledHidden, null, renderItems.map(function (item) {
    return item;
  })));
};

export { BreadcrumbShorter };
