import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useRef, useState, useCallback, useLayoutEffect, useEffect } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { F as Flex } from './Flex-DOUtHiPi.js';
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
import { useTrackingId } from './useTrackingId.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-QqcABz0D.js';

import './Overflow.css';const overflow = "_overflow_qkpk6_1";
const expanded$1 = "_expanded_qkpk6_34";
const horizontal = "_horizontal_qkpk6_39";
const truncate = "_truncate_qkpk6_43";
const content$1 = "_content_qkpk6_48";
const overflowStyles = {
	overflow: overflow,
	expanded: expanded$1,
	horizontal: horizontal,
	truncate: truncate,
	content: content$1,
	"shadow-left": "_shadow-left_qkpk6_64",
	"shadow-right": "_shadow-right_qkpk6_74",
	"shadow-top": "_shadow-top_qkpk6_84",
	"shadow-bottom": "_shadow-bottom_qkpk6_94",
	"expand-button": "_expand-button_qkpk6_104"
};

const Overflow$1 = forwardRef(
  ({ gap, ...props }, ref) => {
    const data = {
      children: childrenToString(props.children),
      height: props.height,
      truncate: props.truncate
    };
    const trackingId = useTrackingId({
      name: "Overflow",
      data,
      hasOverride: !!props["data-tracking-id"]
    });
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      children,
      className,
      direction = "column",
      style,
      height,
      width,
      truncate,
      ...rest
    } = componentProps;
    const contentRef = useRef(null);
    const [expanded, setExpanded] = useState(false);
    const [shadow, setShadow] = useState({
      left: false,
      right: false,
      top: false,
      bottom: false
    });
    const [contentClipped, setContentClipped] = useState(false);
    const shadowUpdate = useCallback(() => {
      if (!contentRef.current) return;
      if (direction === "row") {
        const right = contentRef.current.offsetWidth < contentRef.current.scrollWidth;
        setShadow((prev) => {
          return {
            ...prev,
            right
          };
        });
        return;
      }
      const bottom = contentRef.current.offsetHeight < contentRef.current.scrollHeight;
      setShadow((prev) => {
        return {
          ...prev,
          bottom
        };
      });
    }, [direction]);
    useLayoutEffect(() => {
      if (!contentRef.current) return;
      const mutationCallback = () => {
        if (!contentRef.current) return;
        const contentHeight = typeof height === "number" ? height : contentRef.current.offsetHeight;
        if (contentHeight < contentRef.current.scrollHeight) {
          setContentClipped(true);
          return;
        }
        setExpanded(false);
        setContentClipped(false);
      };
      const observer = new MutationObserver(mutationCallback);
      observer.observe(contentRef.current, {
        childList: true
        // Observe changes to child elements
      });
      return () => {
        observer.disconnect();
      };
    }, []);
    useLayoutEffect(() => {
      if (contentRef.current) {
        const observer = new ResizeObserver(() => {
          shadowUpdate();
        });
        observer.observe(contentRef.current);
        return () => {
          observer.disconnect();
        };
      }
    }, [shadowUpdate]);
    useEffect(() => {
      if (!contentRef.current) return;
      setContentClipped(
        contentRef.current.offsetHeight < contentRef.current.scrollHeight
      );
    }, []);
    useEffect(() => {
      shadowUpdate();
    }, [children, shadowUpdate]);
    const handleOnScroll = () => {
      if (!contentRef.current) return;
      const target = contentRef.current;
      if (direction === "row") {
        const left = target.scrollLeft > 0;
        const right = target.scrollLeft < target.scrollWidth - target.offsetWidth;
        setShadow({
          left,
          right,
          top: false,
          bottom: false
        });
        return;
      }
      const top = target.scrollTop > 0;
      const bottom = target.scrollTop < target.scrollHeight - target.offsetHeight;
      setShadow({
        top,
        bottom,
        left: false,
        right: false
      });
    };
    const inertOverflowFocusables = (entries) => {
      entries.forEach((element) => {
        if (!element.isIntersecting) {
          element.target.setAttribute("disabled", "true");
        } else {
          element.target.removeAttribute("disabled");
        }
      });
    };
    const overflowClassNames = cx([overflowStyles["overflow"]], className, {
      [overflowStyles["horizontal"]]: direction === "row",
      [overflowStyles["truncate"]]: !!truncate,
      [overflowStyles["expanded"]]: expanded
    });
    useEffect(() => {
      if (!truncate) return;
      const observer = new IntersectionObserver(inertOverflowFocusables);
      const focusable = getKeyboardFocusableElements(contentRef.current);
      focusable.forEach((element) => {
        observer.observe(element);
      });
    }, [truncate]);
    if (truncate) {
      const wrapperStyle2 = {
        ...style,
        ...layoutStyles
      };
      const contentStyle2 = {
        minHeight: height ?? void 0,
        minWidth: width ?? void 0
      };
      const expandString = typeof truncate === "object" ? truncate.expandText : "Show more...";
      const collapseString = typeof truncate === "object" ? truncate.collapseText : "Show less...";
      const onExpandClickHandler = (e) => {
        setExpanded((prev) => !prev);
        setTimeout(() => {
          handleOnScroll();
        }, 100);
        if (typeof truncate !== "object") return;
        if (expanded) {
          truncate.onCollapse?.(e);
          return;
        }
        truncate.onExpand?.(e);
      };
      const showExpand = contentClipped;
      return /* @__PURE__ */ jsxs(
        "div",
        {
          ref,
          style: wrapperStyle2,
          className: overflowClassNames,
          "data-anv": "overflow",
          "data-tracking-id": trackingId,
          ...rest,
          children: [
            shadow.top && !truncate ? /* @__PURE__ */ jsx("div", { className: overflowStyles["shadow-top"] }) : null,
            shadow.left && !truncate ? /* @__PURE__ */ jsx("div", { className: overflowStyles["shadow-left"] }) : null,
            /* @__PURE__ */ jsx(
              Flex,
              {
                className: overflowStyles["content"],
                onScroll: handleOnScroll,
                style: contentStyle2,
                ref: contentRef,
                direction,
                gap,
                tabIndex: 0,
                children
              }
            ),
            shadow.bottom && !truncate ? /* @__PURE__ */ jsx("div", { className: overflowStyles["shadow-bottom"] }) : null,
            shadow.right && !truncate ? /* @__PURE__ */ jsx("div", { className: overflowStyles["shadow-right"] }) : null,
            truncate && showExpand ? /* @__PURE__ */ jsx(
              "button",
              {
                className: overflowStyles["expand-button"],
                onClick: onExpandClickHandler,
                children: expanded ? collapseString : expandString
              }
            ) : null
          ]
        }
      );
    }
    const wrapperStyle = {
      ...style,
      ...layoutStyles
    };
    const contentStyle = {
      height: height ?? void 0,
      width: width ?? void 0
    };
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        style: wrapperStyle,
        className: overflowClassNames,
        "data-anv": "overflow",
        "data-tracking-id": trackingId,
        ...rest,
        children: [
          shadow.left ? /* @__PURE__ */ jsx("div", { className: overflowStyles["shadow-left"] }) : null,
          shadow.top ? /* @__PURE__ */ jsx("div", { className: overflowStyles["shadow-top"] }) : null,
          /* @__PURE__ */ jsx(
            Flex,
            {
              className: overflowStyles["content"],
              onScroll: handleOnScroll,
              ref: contentRef,
              style: contentStyle,
              direction,
              gap,
              tabIndex: 0,
              children
            }
          ),
          shadow.bottom ? /* @__PURE__ */ jsx("div", { className: overflowStyles["shadow-bottom"] }) : null,
          shadow.right ? /* @__PURE__ */ jsx("div", { className: overflowStyles["shadow-right"] }) : null
        ]
      }
    );
  }
);
Overflow$1.displayName = "Overflow";

const content = "_content_1ik95_18";
const expanded = "_expanded_1ik95_32";
const styles = {
	"overflow-text": "_overflow-text_1ik95_1",
	content: content,
	expanded: expanded
};

const OverflowText = forwardRef(
  (props, ref) => {
    const data = {
      children: childrenToString(props.children),
      rows: props.rows,
      expandable: props.expandable,
      expandText: props.expandText,
      collapseText: props.collapseText
    };
    const trackingId = useTrackingId({
      name: "OverflowText",
      data,
      hasOverride: !!props["data-tracking-id"]
    });
    const { rows = 1, ...otherProps } = props;
    const { layoutStyles, componentProps } = useLayoutPropsUtil(otherProps);
    const [expanded, setExpanded] = useState(false);
    const [heights, setHeights] = useState({ clientHeight: 0, scrollHeight: 0 });
    const { className, style, children, ...rest } = componentProps;
    const contentRef = useRef(null);
    const styledCombined = {
      ...style,
      ...layoutStyles,
      "--a2-inline-overflow-text-row": expanded || rows === "unlimited" ? "initial" : rows
    };
    useEffect(() => {
      if (contentRef.current) {
        const observer = new ResizeObserver(() => {
          if (!contentRef.current) return;
          setHeights({
            clientHeight: contentRef.current.clientHeight,
            scrollHeight: contentRef.current.scrollHeight
          });
        });
        observer.observe(contentRef.current);
        return () => {
          observer.disconnect();
        };
      }
    }, []);
    const inertOverflowFocusables = (entries) => {
      entries.forEach((element) => {
        if (!element.isIntersecting) {
          element.target.setAttribute("disabled", "true");
        } else {
          element.target.removeAttribute("disabled");
        }
      });
    };
    useEffect(() => {
      if (!("expandable" in props)) return;
      const observer = new IntersectionObserver(inertOverflowFocusables);
      const focusable = getKeyboardFocusableElements(contentRef.current);
      focusable.forEach((element) => {
        observer.observe(element);
      });
    }, [props.expandable]);
    const showExpand = expanded || heights.clientHeight < heights.scrollHeight;
    if ("expandable" in props && props.expandable === true) {
      const {
        expandable,
        expandText,
        collapseText,
        onExpand,
        onCollapse,
        ...expandableRest
      } = rest;
      const expandString = expandText ?? "Show more...";
      const collapseString = collapseText ?? "Show less...";
      const onExpandClickHandler = (e) => {
        setExpanded((prev) => !prev);
        if (expanded) {
          onCollapse?.(e);
          return;
        }
        onExpand?.(e);
      };
      const overflowTextClassNames2 = cx([styles["overflow-text"]], className, {
        [styles["expanded"]]: expanded
      });
      return /* @__PURE__ */ jsxs(
        "div",
        {
          ref,
          className: overflowTextClassNames2,
          style: styledCombined,
          "data-anv": "overflow-text",
          "data-tracking-id": trackingId,
          ...expandableRest,
          children: [
            /* @__PURE__ */ jsx("div", { className: styles["content"], ref: contentRef, children }),
            showExpand && /* @__PURE__ */ jsx(
              "button",
              {
                className: overflowStyles["expand-button"],
                onClick: onExpandClickHandler,
                children: expanded ? collapseString : expandString
              }
            )
          ]
        }
      );
    }
    const overflowTextClassNames = cx([styles["overflow-text"], className]);
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        className: overflowTextClassNames,
        style: styledCombined,
        "data-anv": "overflow-text",
        "data-tracking-id": trackingId,
        ...rest,
        children: /* @__PURE__ */ jsx("div", { className: styles["content"], children })
      }
    );
  }
);
OverflowText.displayName = "OverflowText";

const Overflow = Object.assign(Overflow$1, {
  Text: OverflowText
});

export { Overflow, OverflowText, Overflow as default };
//# sourceMappingURL=Overflow.js.map
