import { jsxs, jsx } from "react/jsx-runtime";
import React__default, { useRef, useCallback, useEffect, forwardRef, createContext, useContext } from "react";
import { RichLabel } from "../rich-label/rich-label.js";
import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
import { Button } from "../button/button.js";
import { icons } from "../../icons/icons.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-npzfSoYo.js";
import { d as $bdb11010cef70236$export$f680877a34711e37, n as $b5e257d569688ac6$export$535bd6ca7f90a273, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, b as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-cvK1vxO7.js";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-LmGemtHE.js";
import { r as reactDomExports } from "../../index-D8-Zjpbd.js";
import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-BifIGnVS.js";
import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CUxgjvAY.js";
import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
  let { isDisabled } = props;
  let triggerId = $bdb11010cef70236$export$f680877a34711e37();
  let panelId = $bdb11010cef70236$export$f680877a34711e37();
  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
  let supportsBeforeMatch = !isSSR && "onbeforematch" in document.body;
  let raf = useRef(null);
  let handleBeforeMatch = useCallback(() => {
    raf.current = requestAnimationFrame(() => {
      if (ref.current) ref.current.setAttribute("hidden", "until-found");
    });
    reactDomExports.flushSync(() => {
      state.toggle();
    });
  }, [
    ref,
    state
  ]);
  $e9faafb641e167db$export$90fc3a17d93f704c(ref, "beforematch", supportsBeforeMatch ? handleBeforeMatch : null);
  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
    if (raf.current) cancelAnimationFrame(raf.current);
    if (supportsBeforeMatch && ref.current && !isDisabled) {
      if (state.isExpanded) ref.current.removeAttribute("hidden");
      else ref.current.setAttribute("hidden", "until-found");
    }
  }, [
    isDisabled,
    ref,
    state.isExpanded,
    supportsBeforeMatch
  ]);
  useEffect(() => {
    return () => {
      if (raf.current) cancelAnimationFrame(raf.current);
    };
  }, []);
  return {
    buttonProps: {
      id: triggerId,
      "aria-expanded": state.isExpanded,
      "aria-controls": panelId,
      onPress: (e) => {
        if (!isDisabled && e.pointerType !== "keyboard") state.toggle();
      },
      isDisabled,
      onPressStart(e) {
        if (e.pointerType === "keyboard" && !isDisabled) state.toggle();
      }
    },
    panelProps: {
      id: panelId,
      // This can be overridden at the panel element level.
      role: "group",
      "aria-labelledby": triggerId,
      "aria-hidden": !state.isExpanded,
      hidden: supportsBeforeMatch ? true : !state.isExpanded
    }
  };
}
function $bf996d45f4a36925$export$3fcbf6e4407997e0(props) {
  let [isExpanded, setExpanded] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.isExpanded, props.defaultExpanded || false, props.onExpandedChange);
  const expand = useCallback(() => {
    setExpanded(true);
  }, [
    setExpanded
  ]);
  const collapse = useCallback(() => {
    setExpanded(false);
  }, [
    setExpanded
  ]);
  const toggle = useCallback(() => {
    setExpanded(!isExpanded);
  }, [
    setExpanded,
    isExpanded
  ]);
  return {
    isExpanded,
    setExpanded,
    expand,
    collapse,
    toggle
  };
}
const $28f4fd908f0de97f$export$1d40e3e0cc4d5de = /* @__PURE__ */ createContext(null);
const $28f4fd908f0de97f$export$d665dd135a51b28a = /* @__PURE__ */ createContext(null);
const $28f4fd908f0de97f$export$dab3ea4a6ef094da = /* @__PURE__ */ createContext(null);
const $28f4fd908f0de97f$var$InternalDisclosureContext = /* @__PURE__ */ createContext(null);
const $28f4fd908f0de97f$export$74a362b31437ec83 = /* @__PURE__ */ forwardRef(function Disclosure(props, ref) {
  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $28f4fd908f0de97f$export$d665dd135a51b28a);
  let groupState = useContext($28f4fd908f0de97f$export$1d40e3e0cc4d5de);
  let { id, ...otherProps } = props;
  let defaultId = $bdb11010cef70236$export$f680877a34711e37();
  id || (id = defaultId);
  let isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
  let state = $bf996d45f4a36925$export$3fcbf6e4407997e0({
    ...props,
    isExpanded,
    onExpandedChange(isExpanded2) {
      var _props_onExpandedChange;
      if (groupState) groupState.toggleKey(id);
      (_props_onExpandedChange = props.onExpandedChange) === null || _props_onExpandedChange === void 0 ? void 0 : _props_onExpandedChange.call(props, isExpanded2);
    }
  });
  let panelRef = React__default.useRef(null);
  let isDisabled = props.isDisabled || (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled) || false;
  let { buttonProps, panelProps } = $5e910fae8e128ead$export$6e3e27031a30522f({
    ...props,
    isExpanded,
    isDisabled
  }, state, panelRef);
  let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
    within: true
  });
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    id: void 0,
    defaultClassName: "react-aria-Disclosure",
    values: {
      isExpanded: state.isExpanded,
      isDisabled,
      isFocusVisibleWithin,
      state
    }
  });
  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(otherProps, {
    global: true
  });
  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
    values: [
      [
        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
        {
          slots: {
            [$64fa3d84918910a7$export$c62b8e45d58ddad9]: {},
            trigger: buttonProps
          }
        }
      ],
      [
        $28f4fd908f0de97f$var$InternalDisclosureContext,
        {
          panelProps,
          panelRef
        }
      ],
      [
        $28f4fd908f0de97f$export$dab3ea4a6ef094da,
        state
      ]
    ]
  }, /* @__PURE__ */ React__default.createElement("div", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, renderProps, focusWithinProps),
    ref,
    "data-expanded": state.isExpanded || void 0,
    "data-disabled": isDisabled || void 0,
    "data-focus-visible-within": isFocusVisibleWithin || void 0
  }, renderProps.children));
});
const $28f4fd908f0de97f$export$feabaa331e1d464c = /* @__PURE__ */ forwardRef(function DisclosurePanel(props, ref) {
  let { role = "group" } = props;
  let { panelProps, panelRef } = useContext($28f4fd908f0de97f$var$InternalDisclosureContext);
  let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
    within: true
  });
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    defaultClassName: "react-aria-DisclosurePanel",
    values: {
      isFocusVisibleWithin
    }
  });
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    global: true
  });
  return /* @__PURE__ */ React__default.createElement("div", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, panelProps, focusWithinProps),
    ref: $5dc95899b306f630$export$c9058316764c140e(ref, panelRef),
    role,
    "data-focus-visible-within": isFocusVisibleWithin || void 0
  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
    values: [
      [
        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
        null
      ]
    ]
  }, props.children));
});
/**
 * A component that allows hiding content in an expandable panel, to declutter the UI.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {JSX.Element} [props.icon] - Icon to display in the label.
 * @param {string} props.label - Label to display.
 * @param {string} [props.subtitle] - Subtitle to display.
 * @param {string} [props.className] - Classes to pass to the container.
 * @param {string} [props.contentClassName] - Classes to pass to the inner content wrapper.
 * @param {string} [props.labelClassName] - Classes to pass to the label.
 * @param {string} [props.headerClassName] - Classes to pass to the header (label + trigger).
 * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the panel header, left of the expand button.
 * @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are not hidden when the panel is expanded.
 * @param {boolean} [props.disabled] - If `true`, the expand button is disabled.
 * @param {boolean} [props.open] - Whether the expandable is open.
 * @param {Function} [props.onOpenChange] - Function is called when the panel is opened or closed.
 * @param {object} [props.headerProps] - Props to pass to the header (label + trigger).
 * @param {JSX.Element} [props.customOpenButton] - Allows adding a custom open button. **IMPORTANT**: make sure to set `slot='trigger'` on the passed element!
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The Expandable component.
 *
 * @example
 * <Expandable label='My component'>
 * 	...
 * </Expandable>
 *
 * @preserve
 */
const Expandable = (props) => {
  const {
    icon,
    label,
    subtitle,
    className,
    labelClassName,
    contentClassName,
    headerClassName,
    actions,
    keepActionsOnExpand = false,
    disabled,
    noFocusHandling,
    children,
    open = false,
    onOpenChange,
    customOpenButton,
    headerProps,
    hidden,
    ...other
  } = props;
  const [isOpen, setIsOpen] = React__default.useState(open);
  if (isOpen && disabled) {
    setIsOpen(false);
  }
  if (hidden) {
    return null;
  }
  return /* @__PURE__ */ jsxs(
    $28f4fd908f0de97f$export$74a362b31437ec83,
    {
      isExpanded: isOpen,
      className: clsx("es:w-full es:rounded-xl es:border es:border-secondary-300/0 es:text-sm es:transition", isOpen && "es:border-secondary-300/100 es:shadow-lg", className),
      ...other,
      children: [
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: clsx("es:flex es:h-10 es:items-center es:gap-1 es:transition-[padding]", isOpen && "es:py-1 es:pl-2 es:pr-1", headerClassName),
            ...headerProps,
            children: [
              /* @__PURE__ */ jsx(
                RichLabel,
                {
                  icon,
                  label,
                  subtitle,
                  className: labelClassName,
                  as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
                  fullWidth: true
                }
              ),
              actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
                AnimatedVisibility,
                {
                  visible: !isOpen,
                  className: "es:ml-auto es:flex es:gap-2",
                  transition: "slideFadeDownSlight",
                  noInitial: true,
                  children: actions
                }
              ),
              actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:flex es:gap-2", children: actions }),
              customOpenButton && customOpenButton({
                open: isOpen,
                toggleOpen: () => {
                  setIsOpen(!isOpen);
                  if (onOpenChange) {
                    onOpenChange(!isOpen);
                  }
                },
                tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
                disabled
              }),
              !customOpenButton && /* @__PURE__ */ jsx(
                Button,
                {
                  slot: "trigger",
                  type: "ghost",
                  icon: isOpen ? icons.caretDownFill : icons.caretDown,
                  onPress: () => {
                    setIsOpen(!isOpen);
                    if (onOpenChange) {
                      onOpenChange(!isOpen);
                    }
                  },
                  tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
                  disabled,
                  className: clsx("es:icon:size-5 es:icon:transition-transform", isOpen && "es:icon:-scale-y-100"),
                  size: "small"
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          $28f4fd908f0de97f$export$feabaa331e1d464c,
          {
            className: clsx(
              isOpen && "es:space-y-2.5 es:border-t es:border-t-secondary-200 es:p-2",
              isOpen && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-ease-spring-smooth es:motion-safe:motion-ease-linear/opacity es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
              contentClassName
            ),
            children
          }
        )
      ]
    }
  );
};
export {
  Expandable
};
