@hitachivantara/uikit-react-core/dist/cjs/ScrollToHorizontal/ScrollToHorizontal.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const styles = require("@mui/material/styles");
const useMediaQuery = require("@mui/material/useMediaQuery");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const useScrollTo = require("../hooks/useScrollTo.cjs");
const keyboardUtils = require("../utils/keyboardUtils.cjs");
const setId = require("../utils/setId.cjs");
const ScrollToHorizontal_styles = require("./ScrollToHorizontal.styles.cjs");
const HorizontalScrollListItem = require("./HorizontalScrollListItem/HorizontalScrollListItem.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
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
  } = uikitReactUtils.useDefaultProps("HvScrollToHorizontal", props);
  const { classes, css, cx } = ScrollToHorizontal_styles.useClasses(classesProp);
  const muiTheme = styles.useTheme();
  const downSm = useMediaQuery__default.default(muiTheme.breakpoints.down("sm"));
  const upMd = useMediaQuery__default.default(muiTheme.breakpoints.up("md"));
  const [selectedIndex, setScrollTo, elements] = useScrollTo.useScrollTo(
    defaultSelectedIndex,
    scrollElementId,
    navigationMode,
    relativeLinks,
    offset,
    options,
    onChange
  );
  const tabs = elements.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
    HorizontalScrollListItem.HvHorizontalScrollListItem,
    {
      id: setId.setId(id, `item-${index}`),
      onClick: (event) => {
        event.preventDefault();
        setScrollTo(event, option.value, index, () => onChange?.(event, index));
        onClick?.(event, index);
      },
      onKeyDown: (event) => {
        if (keyboardUtils.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__ */ jsxRuntime.jsx(
    "ol",
    {
      className: cx(
        css({
          width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${uikitStyles.theme.spacing(upMd ? 4 : 2)})` : "100%",
          marginTop: 0,
          marginBottom: 0,
          marginRight: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
          marginLeft: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0
        }),
        classes.root,
        {
          [classes.positionSticky]: position === "sticky",
          [classes.positionFixed]: position === "fixed"
        },
        className
      ),
      id,
      ...others,
      children: tabs
    }
  );
};
exports.scrollToHorizontalClasses = ScrollToHorizontal_styles.staticClasses;
exports.HvScrollToHorizontal = HvScrollToHorizontal;