@kiwicom/orbit-components/es/SkipNavigation/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use client";

import * as React from "react";
import cx from "clsx";
import Select from "../Select";
import Stack from "../Stack";
import ButtonLink from "../Button";
const SkipNavigation = ({
  actions,
  feedbackUrl,
  feedbackLabel = "Send feedback",
  firstSectionLabel = "Jump to section",
  firstActionLabel = "Common actions",
  dataTest,
  id,
  isInNav
}) => {
  const [links, setLinks] = React.useState([]);
  const [mappedLinks, setMappedLinks] = React.useState([]);
  const [innerPages, setPages] = React.useState([]);
  const [show, setShow] = React.useState(false);
  const handleLinksClick = ev => {
    const index = Number(ev.currentTarget.value);
    const selected = links[index - 1];
    if (selected) {
      selected.setAttribute("tabindex", "-1");
      selected.focus();
    }
  };
  const handlePageClick = ev => {
    if (actions) {
      const index = Number(ev.currentTarget.value);
      const selected = actions[index - 1];
      if (selected.onClick) {
        selected.onClick();
      } else if (selected.link) {
        window.location.href = selected.link;
      }
    }
  };
  const handleFocus = () => {
    if (links.length === 0) {
      // @ts-expect-error TODO
      const selectedLinks = document.querySelectorAll("[data-a11y-section]");
      const mappedSections = [{
        value: 0,
        label: firstSectionLabel
      }, ...Object.keys(selectedLinks).map(key => ({
        value: Number(key) + 1,
        label: selectedLinks[Number(key)].innerText
      }))];
      if (selectedLinks) {
        setLinks(selectedLinks);
      }
      setMappedLinks(mappedSections);
      if (actions) {
        const mappedPages = [{
          value: 0,
          label: firstActionLabel
        }, ...actions.map((el, i) => {
          return {
            value: i + 1,
            label: el.name
          };
        })];
        setPages(mappedPages);
      }
    }
    setShow(true);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: cx("orbit-skip-navigation", isInNav ? "bg-inherit p-0" : "bg-cloud-light p-400", !show && "sr-only"),
    tabIndex: -1,
    onFocus: handleFocus,
    onBlur: () => setShow(false),
    "data-test": dataTest,
    id: id
  }, /*#__PURE__*/React.createElement(Stack, {
    justify: "between"
  }, /*#__PURE__*/React.createElement("div", {
    className: isInNav ? "max-w-[250px]" : "max-w-[800px]"
  }, /*#__PURE__*/React.createElement(Stack, {
    align: "center"
  }, /*#__PURE__*/React.createElement(Select, {
    options: mappedLinks,
    onChange: handleLinksClick,
    ariaLabel: firstSectionLabel
  }), innerPages.length > 0 && /*#__PURE__*/React.createElement(Select, {
    options: innerPages,
    onChange: handlePageClick,
    ariaLabel: firstActionLabel
  }))), feedbackUrl && /*#__PURE__*/React.createElement(ButtonLink, {
    href: feedbackUrl,
    type: "secondary",
    external: true,
    size: "small"
  }, feedbackLabel)));
};
export default SkipNavigation;