// packages/components/src/tools-panel/tools-panel-header/hook.ts
import { useMemo } from "@wordpress/element";
import * as styles from "../styles.js";
import { useToolsPanelContext } from "../context.js";
import { useContextSystem } from "../../context/index.js";
import { useCx } from "../../utils/hooks/use-cx.js";
function useToolsPanelHeader(props) {
  const {
    className,
    headingLevel = 2,
    ...otherProps
  } = useContextSystem(props, "ToolsPanelHeader");
  const cx = useCx();
  const classes = useMemo(() => {
    return cx(styles.ToolsPanelHeader, className);
  }, [className, cx]);
  const dropdownMenuClassName = useMemo(() => {
    return cx(styles.DropdownMenu);
  }, [cx]);
  const headingClassName = useMemo(() => {
    return cx(styles.ToolsPanelHeading);
  }, [cx]);
  const defaultControlsItemClassName = useMemo(() => {
    return cx(styles.DefaultControlsItem);
  }, [cx]);
  const {
    menuItems,
    hasMenuItems,
    areAllOptionalControlsHidden
  } = useToolsPanelContext();
  return {
    ...otherProps,
    areAllOptionalControlsHidden,
    defaultControlsItemClassName,
    dropdownMenuClassName,
    hasMenuItems,
    headingClassName,
    headingLevel,
    menuItems,
    className: classes
  };
}
export {
  useToolsPanelHeader
};
//# sourceMappingURL=hook.js.map
