/**
 * 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.
 */

const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_devtools = require("../../global/js/utils/devtools.js");
const require_useOverflowItems = require("../../global/js/hooks/useOverflowItems/useOverflowItems.js");
const require_constants = require("./constants.js");
const require_TagOverflowModal = require("./TagOverflowModal.js");
const require_TagOverflowPopover = require("./TagOverflowPopover.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
//#region src/components/TagOverflow/TagOverflow.tsx
/**
* Copyright IBM Corp. 2024, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const blockClass = `${require_settings.pkg.prefix}--tag-overflow`;
const componentName = "TagOverflow";
const allTagsModalSearchThreshold = 10;
const TagOverflow = (0, react.forwardRef)((props, ref) => {
	const { align = "start", allTagsModalAriaLabel, allTagsModalSearchLabel, allTagsModalSearchPlaceholderText, allTagsModalTarget, allTagsModalTitle, autoAlign, className, items, maxVisible, overflowAlign = "bottom", overflowClassName, overflowType = "default", onOverflowTagChange, showAllTagsLabel, tagComponent, ...rest } = props;
	const containerRef = (0, react.useRef)(null);
	const offsetRef = (0, react.useRef)(null);
	const [showAllModalOpen, setShowAllModalOpen] = (0, react.useState)(false);
	const [popoverOpen, setPopoverOpen] = (0, react.useState)(false);
	const { visibleItems, hiddenItems: overflowItems, itemRefHandler } = require_useOverflowItems.useOverflowItems(items, containerRef, offsetRef, maxVisible, onOverflowTagChange);
	const handleShowAllClick = () => {
		setShowAllModalOpen(true);
	};
	const handleModalClose = () => {
		setShowAllModalOpen(false);
	};
	const getCustomComponent = (item, tagComponent) => {
		const { className, ...other } = item;
		return (0, react.createElement)(tagComponent, {
			...other,
			className: (0, import_classnames.default)(`${blockClass}__item`, className)
		});
	};
	const handleTagOnClose = (0, react.useCallback)((onClose, index) => {
		onClose?.();
		if (index <= visibleItems?.length - 1) setPopoverOpen(false);
	}, [visibleItems]);
	return /* @__PURE__ */ react.default.createElement("div", {
		...rest,
		className: (0, import_classnames.default)(blockClass, className),
		...require_devtools.getDevtoolsProps(componentName),
		ref
	}, /* @__PURE__ */ react.default.createElement("div", {
		className: (0, import_classnames.default)(`${blockClass}__visible-tags`, `${blockClass}--align-${align}`),
		ref: containerRef
	}, visibleItems.map((item, index) => {
		const { id, label, tagType, onClose, filter, ...other } = item;
		return /* @__PURE__ */ react.default.createElement("div", {
			className: `${blockClass}__tag-container`,
			ref: (node) => {
				itemRefHandler(id, node);
			},
			key: id
		}, tagComponent ? getCustomComponent(item, tagComponent) : typeof onClose === "function" || filter ? /* @__PURE__ */ react.default.createElement(_carbon_react.DismissibleTag, {
			...other,
			className: `${blockClass}__item--tag`,
			type: tagType,
			onClose: () => handleTagOnClose(onClose, index),
			text: label
		}) : /* @__PURE__ */ react.default.createElement(_carbon_react.Tag, {
			...other,
			className: `${blockClass}__item--tag`,
			type: tagType
		}, label));
	}), overflowItems.length > 0 && /* @__PURE__ */ react.default.createElement("div", {
		className: `${blockClass}__indicator`,
		ref: offsetRef
	}, /* @__PURE__ */ react.default.createElement(require_TagOverflowPopover.TagOverflowPopover, {
		allTagsModalSearchThreshold,
		className: overflowClassName,
		onShowAllClick: handleShowAllClick,
		overflowTags: overflowItems,
		overflowAlign,
		overflowType,
		showAllTagsLabel,
		key: "tag-overflow-popover",
		ref: offsetRef,
		popoverOpen,
		setPopoverOpen,
		autoAlign
	}), /* @__PURE__ */ react.default.createElement(require_TagOverflowModal.TagOverflowModal, {
		allTags: items,
		open: showAllModalOpen,
		title: allTagsModalTitle,
		modalAriaLabel: allTagsModalAriaLabel,
		onClose: handleModalClose,
		overflowType,
		searchLabel: allTagsModalSearchLabel,
		searchPlaceholder: allTagsModalSearchPlaceholderText,
		portalTarget: allTagsModalTarget
	}))));
});
TagOverflow.displayName = componentName;
const tagTypes = Object.keys(require_constants.TYPES);
TagOverflow.propTypes = {
	/**
	* align the Tags displayed by the TagSet. Default start.
	*/
	align: prop_types.default.oneOf([
		"start",
		"center",
		"end"
	]),
	/**
	* aria label for all tags modal with hasScrollingContent
	*/
	allTagsModalAriaLabel: prop_types.default.string,
	/**
	* label text for the show all search. **Note: Required if more than 10 tags**
	*/
	allTagsModalSearchLabel: prop_types.default.string,
	/**
	* placeholder text for the show all search. **Note: Required if more than 10 tags**
	*/
	allTagsModalSearchPlaceholderText: prop_types.default.string,
	/**
	* portal target for the all tags modal
	*/
	allTagsModalTarget: prop_types.default.node,
	/**
	* title for the show all modal. **Note: Required if more than 10 tags**
	*/
	allTagsModalTitle: prop_types.default.string,
	/**
	* Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
	*/
	autoAlign: prop_types.default.bool,
	/**
	* Provide an optional class to be applied to the containing node.
	*/
	className: prop_types.default.string,
	/**
	* The items to be shown in the TagOverflow. Each item is specified as an object with properties:
	* **label**\* (required) to supply the content,
	* **id**\* (required) to uniquely identify each item.
	* **tagType** the type value to be passed to the Carbon Tag component.
	* Refer https://react.carbondesignsystem.com/?path=/docs/components-tag--default to see the possible values for tagType
	*
	* If you want to render a custom component, pass it as tagComponent prop and
	* then pass the props required for your custom component as the properties of item object
	*/
	items: prop_types.default.arrayOf(prop_types.default.shape({
		id: prop_types.default.string.isRequired,
		label: prop_types.default.string.isRequired,
		tagType: prop_types.default.oneOf(tagTypes)
	}).isRequired),
	/**
	* maximum visible items
	*/
	maxVisible: prop_types.default.number,
	/**
	* Specify offset amount for measure available space, only used when `containingElementSelector`
	* is also provided
	*/
	measurementOffset: prop_types.default.number,
	/**
	* display items in multiple lines
	*/
	multiline: prop_types.default.bool,
	/**
	* Handler to get overflow tags
	*/
	onOverflowTagChange: prop_types.default.func,
	/**
	* overflowAlign from the standard tooltip. Default center.
	*/
	overflowAlign: prop_types.default.oneOf([
		"top",
		"top-left",
		"top-right",
		"bottom",
		"bottom-left",
		"bottom-right",
		"left",
		"left-bottom",
		"left-top",
		"right",
		"right-bottom",
		"right-top"
	]),
	/**
	* overflowClassName for the tooltip popup
	*/
	overflowClassName: prop_types.default.string,
	/**
	* Type of rendering displayed inside of the tag overflow component
	*/
	overflowType: prop_types.default.oneOf(["default", "tag"]),
	/**
	* label for the overflow show all tags link.
	*
	* **Note:** Required if more than 10 tags
	*/
	showAllTagsLabel: prop_types.default.string,
	/** Component definition of the items to be rendered inside TagOverflow.
	* If this is not passed, items will be rendered as Tag component
	*/
	tagComponent: prop_types.default.elementType
};
//#endregion
exports.TagOverflow = TagOverflow;
