@hitachivantara/uikit-react-core/dist/esm/ScrollToHorizontal/ScrollToHorizontal.js

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { theme } from "@hitachivantara/uikit-styles";
import { useScrollTo } from "../hooks/useScrollTo.js";
import { isKey } from "../utils/keyboardUtils.js";
import { setId } from "../utils/setId.js";
import { useClasses } from "./ScrollToHorizontal.styles.js";
import { staticClasses } from "./ScrollToHorizontal.styles.js";
import { HvHorizontalScrollListItem } from "./HorizontalScrollListItem/HorizontalScrollListItem.js";
const HvScrollToHorizontal = (props) => {
  const {
    id,
    defaultSelectedIndex = 0,
    scrollElementId,
    // @ts-ignore
    href = true,
    navigationMode = href ? "push" : "none",
    relativeLinks = false,
    onChange,
    onClick,
    onEnter,
    className,
    classes: classesProp,
    options,
    offset = 0,
    position = "relative",
    tooltipPosition = "top",
    ...others
  } = useDefaultProps("HvScrollToHorizontal", props);
  const { classes, css, cx } = useClasses(classesProp);
  const muiTheme = useTheme();
  const downSm = useMediaQuery(muiTheme.breakpoints.down("sm"));
  const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
  const [selectedIndex, setScrollTo, elements] = useScrollTo(
    defaultSelectedIndex,
    scrollElementId,
    navigationMode,
    relativeLinks,
    offset,
    options,
    onChange
  );
  const tabs = elements.map((option, index) => /* @__PURE__ */ jsx(
    HvHorizontalScrollListItem,
    {
      id: setId(id, `item-${index}`),
      onClick: (event) => {
        event.preventDefault();
        setScrollTo(event, option.value, index, () => onChange?.(event, index));
        onClick?.(event, index);
      },
      onKeyDown: (event) => {
        if (isKey(event, "Enter") !== true) return;
        event.preventDefault();
        setScrollTo(event, option.value, index, () => onChange?.(event, index));
        onEnter?.(event, index);
      },
      href: navigationMode !== "none" ? option.href : void 0,
      tooltipPlacement: tooltipPosition,
      selected: selectedIndex === index,
      label: option.label,
      iconClasses: cx({
        [classes.selected]: selectedIndex === index,
        [classes.notSelected]: selectedIndex !== index,
        [classes.notSelectedRoot]: selectedIndex !== index
      })
    },
    option.key || option.label
  ));
  return /* @__PURE__ */ jsx(
    "ol",
    {
      className: cx(
        css({
          width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})` : "100%",
          marginTop: 0,
          marginBottom: 0,
          marginRight: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
          marginLeft: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0
        }),
        classes.root,
        {
          [classes.positionSticky]: position === "sticky",
          [classes.positionFixed]: position === "fixed"
        },
        className
      ),
      id,
      ...others,
      children: tabs
    }
  );
};
export {
  HvScrollToHorizontal,
  staticClasses as scrollToHorizontalClasses
};