import { jsxs, jsx } from "react/jsx-runtime";
import $dbSRa$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 { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BXjXzdW_.js";
import { b as $bdb11010cef70236$export$f680877a34711e37, m as $b5e257d569688ac6$export$535bd6ca7f90a273, j as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $64fa3d84918910a7$export$2881499e37b75b9a, n as $64fa3d84918910a7$export$c62b8e45d58ddad9, a as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-DGpXyJOJ.js";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-Bycb7BsD.js";
import { r as reactDomExports } from "../../index-oFgxU4zs.js";
import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-BD7Olibq.js";
import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D3b7Kh4P.js";
import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
import { _ as __ } from "../../default-i18n-CnQeC5Pl.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 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", handleBeforeMatch);
  let isExpandedRef = useRef(null);
  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
    if (raf.current) cancelAnimationFrame(raf.current);
    if (ref.current && !isDisabled && !isSSR) {
      let panel = ref.current;
      if (isExpandedRef.current == null || typeof panel.getAnimations !== "function") {
        if (state.isExpanded) {
          panel.removeAttribute("hidden");
          panel.style.setProperty("--disclosure-panel-width", "auto");
          panel.style.setProperty("--disclosure-panel-height", "auto");
        } else {
          panel.setAttribute("hidden", "until-found");
          panel.style.setProperty("--disclosure-panel-width", "0px");
          panel.style.setProperty("--disclosure-panel-height", "0px");
        }
      } else if (state.isExpanded !== isExpandedRef.current) {
        if (state.isExpanded) {
          panel.removeAttribute("hidden");
          panel.style.setProperty("--disclosure-panel-width", panel.scrollWidth + "px");
          panel.style.setProperty("--disclosure-panel-height", panel.scrollHeight + "px");
          Promise.all(panel.getAnimations().map((a) => a.finished)).then(() => {
            panel.style.setProperty("--disclosure-panel-width", "auto");
            panel.style.setProperty("--disclosure-panel-height", "auto");
          }).catch(() => {
          });
        } else {
          panel.style.setProperty("--disclosure-panel-width", panel.scrollWidth + "px");
          panel.style.setProperty("--disclosure-panel-height", panel.scrollHeight + "px");
          window.getComputedStyle(panel).height;
          panel.style.setProperty("--disclosure-panel-width", "0px");
          panel.style.setProperty("--disclosure-panel-height", "0px");
          Promise.all(panel.getAnimations().map((a) => a.finished)).then(() => panel.setAttribute("hidden", "until-found")).catch(() => {
          });
        }
      }
      isExpandedRef.current = state.isExpanded;
    }
  }, [
    isDisabled,
    ref,
    state.isExpanded,
    isSSR
  ]);
  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: isSSR || isDisabled ? isDisabled || !state.isExpanded : void 0
    }
  };
}
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 = $dbSRa$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__ */ $dbSRa$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__ */ $dbSRa$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__ */ $dbSRa$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__ */ $dbSRa$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.standalone] - If `true`, component's border radius will not adapt to the surrounding components.
 * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
 * @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,
    standalone,
    flat,
    hidden,
    ...other
  } = props;
  const [isOpen, setIsOpen] = $dbSRa$react__default.useState(open);
  if (isOpen && disabled) {
    setIsOpen(false);
  }
  if (hidden) {
    return null;
  }
  return /* @__PURE__ */ jsxs(
    $28f4fd908f0de97f$export$74a362b31437ec83,
    {
      isExpanded: isOpen,
      className: clsx("es:text-sm", !standalone && "es:group", className),
      ...other,
      children: [
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: clsx(
              "es:flex es:items-center es:gap-1 es:pr-1.25 es:py-1 es:pl-2.5",
              standalone && "es:rounded-xl",
              !standalone && "es:rounded-md es:group-first:rounded-t-xl es:group-after-current:rounded-t-xl",
              "es:inset-ring",
              "es:inset-shadow-xs",
              isOpen && "es:bg-surface-100 es:inset-ring-surface-300/75 es:inset-shadow-surface-100/30",
              isOpen && "es:rounded-b-md es:rounded-t-xl",
              !isOpen && "es:bg-white es:bg-linear-to-b es:from-25% es:from-secondary-100/5 es:to-secondary-300/10 es:inset-ring-secondary-300/45 es:inset-shadow-secondary-200/50",
              !isOpen && !standalone && "es:rounded-b-md es:group-last:rounded-b-xl es:group-before-current:rounded-b-xl",
              !flat && "es:shadow-xs es:shadow-black/5",
              "es:transition-plus es:duration-200 es:motion-ease-spring-bouncy",
              headerClassName
            ),
            ...headerProps,
            children: [
              /* @__PURE__ */ jsx(
                RichLabel,
                {
                  icon,
                  label,
                  subtitle,
                  className: clsx("es:grow", labelClassName),
                  as: $01b77f81d0f07f68$export$b04be29aa201d4f5
                }
              ),
              actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
                AnimatedVisibility,
                {
                  visible: !isOpen,
                  className: "es:flex es:gap-1 es:shrink-0",
                  transition: "scaleFade",
                  decreaseBounce: true,
                  noInitial: true,
                  children: actions
                }
              ),
              actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es:flex es:gap-1 es:shrink-0", 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: icons.dropdownCaretAlt,
                  onPress: () => {
                    setIsOpen(!isOpen);
                    if (onOpenChange) {
                      onOpenChange(!isOpen);
                    }
                  },
                  tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
                  disabled,
                  className: clsx(
                    "es:icon:transition-plus es:ease-spring-bouncier es:duration-400",
                    isOpen && "es:icon:-scale-y-100 es:icon:text-surface-600",
                    !isOpen && "es:icon:text-secondary-500"
                  ),
                  size: "small"
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          $28f4fd908f0de97f$export$feabaa331e1d464c,
          {
            className: clsx(
              "es:h-(--disclosure-panel-height)",
              "es:opacity-0 es:blur-[1px] es:-translate-y-2",
              !isOpen && "es:rounded-t-xl",
              isOpen && "es:rounded-t-sm es:opacity-100 es:blur-none es:translate-y-0 es:mt-1",
              "es:origin-top",
              "es:bg-white es:rounded-b-xl es:inset-ring es:inset-ring-surface-200",
              "es:inset-shadow-sm es:inset-shadow-accent-600/5",
              !flat && "es:shadow-xs es:shadow-black/5",
              "es:transition-plus-h",
              contentClassName
            ),
            children: /* @__PURE__ */ jsx("div", { className: "es:space-y-1 es:px-3 es:py-3.5", children })
          }
        )
      ]
    }
  );
};
export {
  Expandable
};
