/**
 * 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 { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import { useOverflowItems } from "../../global/js/hooks/useOverflowItems/useOverflowItems.js";
import { TYPES } from "./constants.js";
import { TagOverflowModal } from "./TagOverflowModal.js";
import { TagOverflowPopover } from "./TagOverflowPopover.js";
import React, { createElement, forwardRef, useCallback, useRef, useState } from "react";
import PropTypes from "prop-types";
import { DismissibleTag, Tag } from "@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__ */ __toESM(require_classnames());
const blockClass = `${pkg.prefix}--tag-overflow`;
const componentName = "TagOverflow";
const allTagsModalSearchThreshold = 10;
const TagOverflow = 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 = useRef(null);
	const offsetRef = useRef(null);
	const [showAllModalOpen, setShowAllModalOpen] = useState(false);
	const [popoverOpen, setPopoverOpen] = useState(false);
	const { visibleItems, hiddenItems: overflowItems, itemRefHandler } = useOverflowItems(items, containerRef, offsetRef, maxVisible, onOverflowTagChange);
	const handleShowAllClick = () => {
		setShowAllModalOpen(true);
	};
	const handleModalClose = () => {
		setShowAllModalOpen(false);
	};
	const getCustomComponent = (item, tagComponent) => {
		const { className, ...other } = item;
		return createElement(tagComponent, {
			...other,
			className: (0, import_classnames.default)(`${blockClass}__item`, className)
		});
	};
	const handleTagOnClose = useCallback((onClose, index) => {
		onClose?.();
		if (index <= visibleItems?.length - 1) setPopoverOpen(false);
	}, [visibleItems]);
	return /* @__PURE__ */ React.createElement("div", {
		...rest,
		className: (0, import_classnames.default)(blockClass, className),
		...getDevtoolsProps(componentName),
		ref
	}, /* @__PURE__ */ React.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.createElement("div", {
			className: `${blockClass}__tag-container`,
			ref: (node) => {
				itemRefHandler(id, node);
			},
			key: id
		}, tagComponent ? getCustomComponent(item, tagComponent) : typeof onClose === "function" || filter ? /* @__PURE__ */ React.createElement(DismissibleTag, {
			...other,
			className: `${blockClass}__item--tag`,
			type: tagType,
			onClose: () => handleTagOnClose(onClose, index),
			text: label
		}) : /* @__PURE__ */ React.createElement(Tag, {
			...other,
			className: `${blockClass}__item--tag`,
			type: tagType
		}, label));
	}), overflowItems.length > 0 && /* @__PURE__ */ React.createElement("div", {
		className: `${blockClass}__indicator`,
		ref: offsetRef
	}, /* @__PURE__ */ React.createElement(TagOverflowPopover, {
		allTagsModalSearchThreshold,
		className: overflowClassName,
		onShowAllClick: handleShowAllClick,
		overflowTags: overflowItems,
		overflowAlign,
		overflowType,
		showAllTagsLabel,
		key: "tag-overflow-popover",
		ref: offsetRef,
		popoverOpen,
		setPopoverOpen,
		autoAlign
	}), /* @__PURE__ */ React.createElement(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(TYPES);
TagOverflow.propTypes = {
	/**
	* align the Tags displayed by the TagSet. Default start.
	*/
	align: PropTypes.oneOf([
		"start",
		"center",
		"end"
	]),
	/**
	* aria label for all tags modal with hasScrollingContent
	*/
	allTagsModalAriaLabel: PropTypes.string,
	/**
	* label text for the show all search. **Note: Required if more than 10 tags**
	*/
	allTagsModalSearchLabel: PropTypes.string,
	/**
	* placeholder text for the show all search. **Note: Required if more than 10 tags**
	*/
	allTagsModalSearchPlaceholderText: PropTypes.string,
	/**
	* portal target for the all tags modal
	*/
	allTagsModalTarget: PropTypes.node,
	/**
	* title for the show all modal. **Note: Required if more than 10 tags**
	*/
	allTagsModalTitle: PropTypes.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: PropTypes.bool,
	/**
	* Provide an optional class to be applied to the containing node.
	*/
	className: PropTypes.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: PropTypes.arrayOf(PropTypes.shape({
		id: PropTypes.string.isRequired,
		label: PropTypes.string.isRequired,
		tagType: PropTypes.oneOf(tagTypes)
	}).isRequired),
	/**
	* maximum visible items
	*/
	maxVisible: PropTypes.number,
	/**
	* Specify offset amount for measure available space, only used when `containingElementSelector`
	* is also provided
	*/
	measurementOffset: PropTypes.number,
	/**
	* display items in multiple lines
	*/
	multiline: PropTypes.bool,
	/**
	* Handler to get overflow tags
	*/
	onOverflowTagChange: PropTypes.func,
	/**
	* overflowAlign from the standard tooltip. Default center.
	*/
	overflowAlign: PropTypes.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: PropTypes.string,
	/**
	* Type of rendering displayed inside of the tag overflow component
	*/
	overflowType: PropTypes.oneOf(["default", "tag"]),
	/**
	* label for the overflow show all tags link.
	*
	* **Note:** Required if more than 10 tags
	*/
	showAllTagsLabel: PropTypes.string,
	/** Component definition of the items to be rendered inside TagOverflow.
	* If this is not passed, items will be rendered as Tag component
	*/
	tagComponent: PropTypes.elementType
};
//#endregion
export { TagOverflow };
