@intility/bifrost-react/dist/components/Tabs/WidthOverflow.internal.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons/faAngleLeft";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import Icon from "../Icon/Icon.js";
import useResizeObserver from "../../hooks/useResizeObserver.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const WidthOverflow = /*#__PURE__*/forwardRef((t0, ref) => {
  const $ = _c(31);
  let children;
  let className;
  let contentProps;
  let props;
  if ($[0] !== t0) {
    ({
      children,
      className,
      contentProps,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = className;
    $[3] = contentProps;
    $[4] = props;
  } else {
    children = $[1];
    className = $[2];
    contentProps = $[3];
    props = $[4];
  }
  const contentRef = useRef(null);
  const [arrowLeft, setArrowLeft] = useState(false);
  const [arrowRight, setArrowRight] = useState(false);
  let t1;
  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = element => {
      if (!element) {
        return;
      }
      const rightOverflow = Math.abs(element.offsetWidth - element.scrollWidth);
      setArrowLeft(element.scrollLeft > 0);
      setArrowRight(element.scrollLeft - rightOverflow < -1);
    };
    $[5] = t1;
  } else {
    t1 = $[5];
  }
  const updateArrowState = t1;
  let t2;
  let t3;
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = () => {
      if (!contentRef.current) {
        return;
      }
      const contentElement = contentRef.current;
      updateArrowState(contentElement);
      const handleArrow = () => {
        updateArrowState(contentElement);
      };
      contentElement.addEventListener("scroll", handleArrow);
      return () => {
        contentElement.removeEventListener("scroll", handleArrow);
      };
    };
    t3 = [contentRef];
    $[6] = t2;
    $[7] = t3;
  } else {
    t2 = $[6];
    t3 = $[7];
  }
  useEffect(t2, t3);
  let t4;
  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
    t4 = entry => {
      updateArrowState(entry.target);
    };
    $[8] = t4;
  } else {
    t4 = $[8];
  }
  useResizeObserver(contentRef, t4);
  let t5;
  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
    t5 = direction => {
      if (!contentRef.current) {
        return;
      }
      const scrollDistance = contentRef.current.clientWidth / 3;
      const newScrollPos = direction === "left" ? contentRef.current.scrollLeft - scrollDistance : contentRef.current.scrollLeft + scrollDistance;
      contentRef.current.scrollTo({
        left: newScrollPos,
        behavior: "smooth"
      });
    };
    $[9] = t5;
  } else {
    t5 = $[9];
  }
  const handleScroll = t5;
  let t6;
  if ($[10] !== arrowLeft || $[11] !== arrowRight || $[12] !== className) {
    t6 = classNames(className, "bf-width-overflow", {
      "bf-width-overflow-left": arrowLeft,
      "bf-width-overflow-right": arrowRight
    });
    $[10] = arrowLeft;
    $[11] = arrowRight;
    $[12] = className;
    $[13] = t6;
  } else {
    t6 = $[13];
  }
  const t7 = contentProps?.className;
  let t8;
  if ($[14] !== t7) {
    t8 = classNames(t7, "bf-width-overflow-content");
    $[14] = t7;
    $[15] = t8;
  } else {
    t8 = $[15];
  }
  let t9;
  if ($[16] !== children || $[17] !== contentProps || $[18] !== t8) {
    t9 = /*#__PURE__*/_jsx("div", {
      ...contentProps,
      className: t8,
      ref: contentRef,
      children: children
    });
    $[16] = children;
    $[17] = contentProps;
    $[18] = t8;
    $[19] = t9;
  } else {
    t9 = $[19];
  }
  let t10;
  if ($[20] !== arrowLeft) {
    t10 = arrowLeft && /*#__PURE__*/_jsx("button", {
      type: "button",
      className: "bf-width-overflow-arrow bf-width-overflow-arrow-left",
      tabIndex: -1,
      onClick: () => handleScroll("left"),
      children: /*#__PURE__*/_jsx("div", {
        className: "bf-width-overflow-arrow-hover-circle",
        children: /*#__PURE__*/_jsx(Icon, {
          icon: faAngleLeft
        })
      })
    });
    $[20] = arrowLeft;
    $[21] = t10;
  } else {
    t10 = $[21];
  }
  let t11;
  if ($[22] !== arrowRight) {
    t11 = arrowRight && /*#__PURE__*/_jsx("button", {
      type: "button",
      className: "bf-width-overflow-arrow bf-width-overflow-arrow-right",
      tabIndex: -1,
      onClick: () => handleScroll("right"),
      children: /*#__PURE__*/_jsx("div", {
        className: "bf-width-overflow-arrow-hover-circle",
        children: /*#__PURE__*/_jsx(Icon, {
          icon: faAngleRight
        })
      })
    });
    $[22] = arrowRight;
    $[23] = t11;
  } else {
    t11 = $[23];
  }
  let t12;
  if ($[24] !== props || $[25] !== ref || $[26] !== t10 || $[27] !== t11 || $[28] !== t6 || $[29] !== t9) {
    t12 = /*#__PURE__*/_jsxs("div", {
      ...props,
      className: t6,
      ref: ref,
      children: [t9, t10, t11]
    });
    $[24] = props;
    $[25] = ref;
    $[26] = t10;
    $[27] = t11;
    $[28] = t6;
    $[29] = t9;
    $[30] = t12;
  } else {
    t12 = $[30];
  }
  return t12;
});
WidthOverflow.displayName = "WidthOverflow";
export default WidthOverflow;