/**
 * Copyright IBM Corp. 2020, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { pkg } from "../../settings.js";
import { useClickOutside } from "../../global/js/hooks/useClickOutside.js";
import React, { useRef } from "react";
import PropTypes from "prop-types";
import { Link, OperationalTag, Popover, PopoverContent } from "@carbon/react";
//#region src/components/TagSet/TagSetOverflow.tsx
/**@ts-ignore */
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const componentName = "TagSetOverflow";
const blockClass = `${pkg.prefix}--tag-set-overflow`;
const defaults = { allTagsModalSearchThreshold: 10 };
const TagSetOverflow = React.forwardRef(({ allTagsModalSearchThreshold = defaults.allTagsModalSearchThreshold, onOverflowClick, className, onShowAllClick, overflowAlign = "bottom", overflowAutoAlign, overflowTags, overflowType, showAllTagsLabel, popoverOpen = false, setPopoverOpen, size, ...rest }, ref) => {
	const localRef = useRef(null);
	const overflowTagContent = useRef(null);
	useClickOutside(ref || localRef, () => {
		if (popoverOpen) setPopoverOpen(false);
	});
	const handleShowAllTagsClick = (ev) => {
		ev.stopPropagation();
		ev.preventDefault();
		setPopoverOpen(false);
		onShowAllClick();
	};
	const handleEscKeyPress = (event) => {
		const { key } = event;
		if (key === "Escape") setPopoverOpen(false);
	};
	const handleOverflowClick = () => {
		if (onOverflowClick) onOverflowClick(overflowTags);
		else setPopoverOpen(!popoverOpen);
	};
	if (onOverflowClick) return /* @__PURE__ */ React.createElement("span", {
		...rest,
		"aria-hidden": overflowTags.length === 0,
		className: (0, import_classnames.default)(`${blockClass}`, { [`${blockClass}--hidden`]: overflowTags.length === 0 }),
		ref: ref || localRef
	}, /* @__PURE__ */ React.createElement(OperationalTag, {
		onClick: () => handleOverflowClick(),
		className: `${blockClass}__popover-trigger`,
		size,
		text: `+${overflowTags.length}`
	}));
	return /* @__PURE__ */ React.createElement("span", {
		...rest,
		"aria-hidden": overflowTags.length === 0,
		className: (0, import_classnames.default)(`${blockClass}`, { [`${blockClass}--hidden`]: overflowTags.length === 0 }),
		ref: ref || localRef
	}, /* @__PURE__ */ React.createElement(Popover, {
		align: overflowAlign,
		className: (0, import_classnames.default)(className, `${blockClass}__tagset-popover`),
		dropShadow: true,
		highContrast: true,
		onKeyDown: handleEscKeyPress,
		open: popoverOpen,
		autoAlign: overflowAutoAlign
	}, /* @__PURE__ */ React.createElement(OperationalTag, {
		onClick: () => setPopoverOpen(!popoverOpen),
		className: (0, import_classnames.default)(`${blockClass}__popover-trigger`),
		size,
		text: `+${overflowTags.length}`,
		"aria-expanded": popoverOpen,
		"aria-controls": `${pkg.prefix}-overflow-content`
	}), /* @__PURE__ */ React.createElement(PopoverContent, {
		id: `${pkg.prefix}-overflow-content`,
		"aria-hidden": !popoverOpen
	}, /* @__PURE__ */ React.createElement("div", {
		ref: overflowTagContent,
		className: `${blockClass}__content`
	}, /* @__PURE__ */ React.createElement("ul", { className: `${blockClass}__tag-list` }, overflowTags.filter((_, index) => overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold).map((tag, index) => {
		const tagProps = {};
		if (overflowType === "tag") tagProps.type = "high-contrast";
		if (overflowType === "default") tagProps.filter = false;
		if (React.isValidElement(tag)) return /* @__PURE__ */ React.createElement("li", {
			className: (0, import_classnames.default)(`${blockClass}__tag-item`, {
				[`${blockClass}__tag-item--default`]: overflowType === "default",
				[`${blockClass}__tag-item--tag`]: overflowType === "tag"
			}),
			key: index
		}, React.cloneElement(tag, tagProps));
	})), overflowTags.length > allTagsModalSearchThreshold && /* @__PURE__ */ React.createElement(Link, {
		className: `${blockClass}__show-all-tags-link`,
		href: "",
		onClick: handleShowAllTagsClick,
		role: "button"
	}, showAllTagsLabel)))));
});
TagSetOverflow.displayName = componentName;
TagSetOverflow.propTypes = {
	/**
	* count of overflowTags over which a modal is offered
	*/
	allTagsModalSearchThreshold: PropTypes.number,
	/**
	* className
	*/
	className: PropTypes.string,
	/**
	* An optional click handler that overrides the default functionality of displaying all tags in a modal
	*/
	onOverflowClick: PropTypes.func,
	/**
	* function to execute on clicking show all
	*/
	onShowAllClick: PropTypes.func.isRequired,
	/**
	* overflowAlign from the standard tooltip
	*/
	overflowAlign: PropTypes.oneOf([
		"top",
		"top-left",
		"top-right",
		"bottom",
		"bottom-left",
		"bottom-right",
		"left",
		"left-bottom",
		"left-top",
		"right",
		"right-bottom",
		"right-top"
	]),
	/**
	* Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
	*/
	overflowAutoAlign: PropTypes.bool,
	/**
	* tags shown in overflow
	*/
	/**@ts-ignore */
	overflowTags: PropTypes.arrayOf(PropTypes.object).isRequired,
	/**
	* Type of rendering displayed inside of the tag overflow component
	*/
	overflowType: PropTypes.oneOf(["default", "tag"]),
	/**
	* Open state of the popover
	*/
	popoverOpen: PropTypes.bool,
	/**
	* Setter function for the popoverOpen state value
	*/
	setPopoverOpen: PropTypes.func.isRequired,
	/**
	* label for the overflow show all tags link
	*/
	showAllTagsLabel: PropTypes.string,
	/**
	* Size of the overflow tag
	*/
	size: PropTypes.string
};
//#endregion
export { TagSetOverflow };
