@carbon/ibm-products 2.80.0-rc.0 → 2.81.0-rc.0

package/es/components/TagOverflow/TagOverflow.js

@@ -1,235 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 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.
- */
-
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useRef, useState, useCallback, createElement } from 'react';
-import { DismissibleTag, Tag } from '@carbon/react';
-import PropTypes from '../../_virtual/index.js';
-import { TYPES } from './constants.js';
-import { TagOverflowModal } from './TagOverflowModal.js';
-import { TagOverflowPopover } from './TagOverflowPopover.js';
-import cx from 'classnames';
-import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { pkg } from '../../settings.js';
-import { useOverflowItems } from '../../global/js/hooks/useOverflowItems/useOverflowItems.js';
-
-const blockClass = `${pkg.prefix}--tag-overflow`;
-const componentName = 'TagOverflow';
-const allTagsModalSearchThreshold = 10;
-const TagOverflow = /*#__PURE__*/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 /*#__PURE__*/createElement(tagComponent, {
-      ...other,
-      className: cx(`${blockClass}__item`, className)
-    });
-  };
-  const handleTagOnClose = useCallback((onClose, index) => {
-    onClose?.();
-    if (index <= visibleItems?.length - 1) {
-      setPopoverOpen(false);
-    }
-  }, [visibleItems]);
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className)
-  }, getDevtoolsProps(componentName), {
-    ref: ref
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: cx(`${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(DismissibleTag, _extends({}, other, {
-      className: `${blockClass}__item--tag`,
-      type: tagType,
-      onClose: () => handleTagOnClose(onClose, index),
-      text: label
-    })) : /*#__PURE__*/React__default.createElement(Tag, _extends({}, 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(TagOverflowPopover, {
-    allTagsModalSearchThreshold: allTagsModalSearchThreshold,
-    className: overflowClassName,
-    onShowAllClick: handleShowAllClick,
-    overflowTags: overflowItems,
-    overflowAlign: overflowAlign,
-    overflowType: overflowType,
-    showAllTagsLabel: showAllTagsLabel,
-    key: "tag-overflow-popover",
-    ref: offsetRef,
-    popoverOpen: popoverOpen,
-    setPopoverOpen: setPopoverOpen,
-    autoAlign: autoAlign
-  }), /*#__PURE__*/React__default.createElement(TagOverflowModal, {
-    allTags: items,
-    open: showAllModalOpen,
-    title: allTagsModalTitle,
-    modalAriaLabel: allTagsModalAriaLabel,
-    onClose: handleModalClose,
-    overflowType: overflowType,
-    searchLabel: allTagsModalSearchLabel,
-    searchPlaceholder: allTagsModalSearchPlaceholderText,
-    portalTarget: allTagsModalTarget
-  }))));
-});
-
-// Return a placeholder if not released and not enabled by feature flag
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-TagOverflow.displayName = componentName;
-const tagTypes = Object.keys(TYPES);
-
-// The types and DocGen commentary for the component props,
-// in alphabetical order (for consistency).
-// See https://www.npmjs.com/package/prop-types#usage.
-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
-   */
-  //@ts-ignore
-  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
-   */
-  //@ts-ignore
-  tagComponent: PropTypes.elementType
-};
-
-export { TagOverflow };

package/es/components/TagOverflow/TagOverflowModal.d.ts

@@ -1,39 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Tag } from '@carbon/react';
-interface TagType {
-    label: string;
-}
-type AllTags = (TagType & Omit<React.ComponentProps<typeof Tag>, 'filter'>)[];
-interface TagOverflowModalProps {
-    allTags?: AllTags;
-    className?: string;
-    modalAriaLabel?: string;
-    onClose?: () => void;
-    onTagClose?: (params: {
-        label: string;
-        id: any;
-    }) => void;
-    open?: boolean;
-    overflowType?: 'default' | 'tag';
-    portalTarget?: ReactNode;
-    searchLabel?: string;
-    searchPlaceholder?: string;
-    title?: string;
-}
-export declare const TagOverflowModal: {
-    ({ allTags, className, title, modalAriaLabel, onClose, onTagClose, open, overflowType, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: TagOverflowModalProps): any;
-    propTypes: {
-        allTags: any;
-        className: any;
-        onClose: any;
-        onTagClose: any;
-        open: any;
-        overflowType: any;
-        portalTarget: any;
-        searchLabel: any;
-        searchPlaceholder: any;
-        title: any;
-    };
-    displayName: string;
-};
-export {};

package/es/components/TagOverflow/TagOverflowModal.js

@@ -1,118 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 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.
- */
-
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState } from 'react';
-import PropTypes from '../../_virtual/index.js';
-import cx from 'classnames';
-import { Tag, ComposedModal, ModalHeader, Search, ModalBody, DismissibleTag } from '@carbon/react';
-import { pkg } from '../../settings.js';
-import { prepareProps } from '../../global/js/utils/props-helper.js';
-import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
-
-const componentName = 'TagOverflowModal';
-const blockClass = `${pkg.prefix}--tag-overflow-modal`;
-
-// Default values for props
-const defaults = {
-  // required for accessibility if using hasScrollingContent
-  modalAriaLabel: 'List of all tags',
-  // marked as required by TagSet if needed, default used to satisfy <Search /> component
-  searchLabel: ''
-};
-const TagOverflowModal = _ref => {
-  let {
-    // The component props, in alphabetical order (for consistency).
-
-    allTags,
-    className,
-    title,
-    modalAriaLabel = defaults.modalAriaLabel,
-    onClose,
-    onTagClose,
-    open,
-    overflowType,
-    portalTarget: portalTargetIn,
-    searchLabel = defaults.searchLabel,
-    searchPlaceholder,
-    // Collect any other property values passed in.
-    ...rest
-  } = _ref;
-  const [search, setSearch] = useState('');
-  const renderPortalUse = usePortalTarget(portalTargetIn);
-  const getFilteredItems = () => {
-    if (open && search && allTags) {
-      return allTags.filter(tag => tag.label?.toLocaleLowerCase()?.includes(search.toLocaleLowerCase()));
-    }
-    return allTags || [];
-  };
-  const handleSearch = evt => {
-    setSearch(evt.target.value || '');
-  };
-  return renderPortalUse(/*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
-    containerClassName: `${blockClass}__container`,
-    className: cx(className, blockClass),
-    size: "sm",
-    "aria-label": "Search all",
-    open,
-    onClose
-  }), /*#__PURE__*/React__default.createElement(ModalHeader, {
-    className: `${blockClass}__header`,
-    closeModal: onClose,
-    title: title
-  }, /*#__PURE__*/React__default.createElement(Search, {
-    "data-modal-primary-focus": true,
-    className: `${blockClass}__search`,
-    labelText: searchLabel,
-    placeholder: searchPlaceholder,
-    onChange: handleSearch,
-    size: "lg"
-  })), /*#__PURE__*/React__default.createElement(ModalBody, {
-    className: `${blockClass}__body`,
-    hasForm: true,
-    hasScrollingContent: true,
-    "aria-label": modalAriaLabel
-  }, getFilteredItems().map(_ref2 => {
-    let {
-      label,
-      id,
-      filter,
-      onClose
-    } = _ref2;
-    const isFilterable = overflowType === 'tag' && (typeof onClose === 'function' || filter);
-    return isFilterable ? /*#__PURE__*/React__default.createElement(DismissibleTag, {
-      key: id,
-      text: label,
-      onClose: () => onTagClose?.({
-        label,
-        id
-      })
-    }) : /*#__PURE__*/React__default.createElement(Tag, {
-      key: id
-    }, label);
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__fade`
-  }))));
-};
-TagOverflowModal.propTypes = {
-  allTags: PropTypes.arrayOf(PropTypes.shape({
-    ...prepareProps(Tag.propTypes, 'filter'),
-    label: PropTypes.string.isRequired
-  })),
-  className: PropTypes.string,
-  onClose: PropTypes.func,
-  onTagClose: PropTypes.func,
-  open: PropTypes.bool,
-  overflowType: PropTypes.oneOf(['default', 'tag']),
-  portalTarget: PropTypes.node,
-  searchLabel: PropTypes.string,
-  searchPlaceholder: PropTypes.string,
-  title: PropTypes.string
-};
-TagOverflowModal.displayName = componentName;
-
-export { TagOverflowModal };

package/es/components/TagOverflow/TagOverflowPopover.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { PopoverAlignment } from '@carbon/react';
-import { TagOverflowItem } from './TagOverflow';
-export interface Props {
-    allTagsModalSearchThreshold?: number;
-    autoAlign?: boolean;
-    className?: string;
-    onShowAllClick: () => void;
-    overflowAlign?: PopoverAlignment;
-    overflowTags: TagOverflowItem[];
-    overflowType?: string;
-    popoverOpen?: boolean;
-    setPopoverOpen?: (x: boolean) => void;
-    showAllTagsLabel?: string;
-}
-export declare const TagOverflowPopover: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/es/components/TagOverflow/TagOverflowPopover.js

@@ -1,169 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 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.
- */
-
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useRef } from 'react';
-import PropTypes from '../../_virtual/index.js';
-import cx from 'classnames';
-import { Popover, OperationalTag, PopoverContent, DismissibleTag, Tag, Link } from '@carbon/react';
-import { pkg } from '../../settings.js';
-import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
-
-const componentName = 'TagOverflowPopover';
-const blockClass = `${pkg.prefix}--tag-overflow-popover`;
-const TagOverflowPopover = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    allTagsModalSearchThreshold,
-    autoAlign,
-    className,
-    onShowAllClick,
-    overflowAlign,
-    overflowTags,
-    overflowType,
-    showAllTagsLabel,
-    popoverOpen,
-    setPopoverOpen,
-    ...rest
-  } = props;
-  const localRef = useRef(null);
-  const overflowTagContent = useRef(null);
-  useClickOutside(ref || localRef, () => {
-    if (popoverOpen) {
-      setPopoverOpen?.(false);
-    }
-  });
-  const handleShowAllTagsClick = evt => {
-    evt.stopPropagation();
-    evt.preventDefault();
-    setPopoverOpen?.(false);
-    onShowAllClick?.();
-  };
-  const handleEscKeyPress = evt => {
-    const {
-      key
-    } = evt;
-    if (key === 'Escape') {
-      setPopoverOpen?.(false);
-    }
-  };
-  const getOverflowPopoverItems = () => {
-    const thresh = allTagsModalSearchThreshold ?? 0;
-    return overflowTags?.filter((_, index) => overflowTags?.length > thresh ? index < thresh : index <= thresh);
-  };
-  const visibleItems = getOverflowPopoverItems();
-  const hasItems = visibleItems?.length > 0;
-  return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
-    "aria-hidden": overflowTags?.length === 0,
-    className: cx(blockClass, {
-      [`${blockClass}--hidden`]: overflowTags?.length === 0
-    }),
-    ref: ref || localRef
-  }), /*#__PURE__*/React__default.createElement(Popover, {
-    align: overflowAlign,
-    autoAlign: autoAlign,
-    className: cx(className, `${blockClass}__el`),
-    dropShadow: true,
-    highContrast: true,
-    onKeyDown: handleEscKeyPress,
-    open: popoverOpen || false
-  }, /*#__PURE__*/React__default.createElement(OperationalTag, {
-    onClick: () => setPopoverOpen?.(!popoverOpen),
-    className: cx(`${blockClass}__trigger`),
-    text: `+${overflowTags.length}`,
-    "aria-expanded": popoverOpen,
-    "aria-controls": `${pkg.prefix}-overflow-content`
-  }), /*#__PURE__*/React__default.createElement(PopoverContent, {
-    id: `${pkg.prefix}-overflow-content`,
-    "aria-hidden": !popoverOpen
-  }, /*#__PURE__*/React__default.createElement("div", {
-    ref: overflowTagContent,
-    className: `${blockClass}__content`
-  }, /*#__PURE__*/React__default.createElement("ul", {
-    className: `${blockClass}__tag-list`
-  }, hasItems && visibleItems.map(_ref => {
-    let {
-      label,
-      id,
-      tagType,
-      filter,
-      onClose,
-      ...other
-    } = _ref;
-    const typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
-    const isFilterable = overflowType === 'tag' && (typeof onClose === 'function' || filter);
-    let tag;
-    if (isFilterable) {
-      tag = /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
-        onClose: () => onClose?.(),
-        type: typeValue,
-        text: label
-      }));
-    } else {
-      tag = /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-        type: typeValue
-      }), label);
-    }
-    return /*#__PURE__*/React__default.createElement("li", {
-      className: cx(`${blockClass}__tag-item`, {
-        [`${blockClass}__tag-item--default`]: overflowType === 'default',
-        [`${blockClass}__tag-item--tag`]: overflowType === 'tag'
-      }),
-      key: id
-    }, overflowType === 'tag' ? tag : label);
-  })), (overflowTags?.length ?? 0) > (allTagsModalSearchThreshold ?? 0) && /*#__PURE__*/React__default.createElement(Link, {
-    className: `${blockClass}__show-all-tags-link`,
-    href: "",
-    onClick: handleShowAllTagsClick,
-    role: "button"
-  }, showAllTagsLabel)))));
-});
-TagOverflowPopover.displayName = componentName;
-TagOverflowPopover.propTypes = {
-  /**
-   * count of overflowTags over which a modal is offered
-   */
-  allTagsModalSearchThreshold: PropTypes.number,
-  /**
-   * 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,
-  /**
-   * className
-   */
-  className: PropTypes.string,
-  /**
-   * 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']),
-  /**
-   * 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,
-  /**
-   * label for the overflow show all tags link
-   */
-  showAllTagsLabel: PropTypes.string
-};
-
-export { TagOverflowPopover };

package/es/components/TagOverflow/constants.d.ts

@@ -1,14 +0,0 @@
-export const TYPES: {
-    red: string;
-    magenta: string;
-    purple: string;
-    blue: string;
-    cyan: string;
-    teal: string;
-    green: string;
-    gray: string;
-    'cool-gray': string;
-    'warm-gray': string;
-    'high-contrast': string;
-    outline: string;
-};

package/es/components/TagOverflow/constants.js

@@ -1,30 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 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.
- */
-
-// Copyright IBM Corp. 2024, 2024
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Copied from @carbon/react/es/components/Tag/Tag.js
-const TYPES = {
-  red: 'Red',
-  magenta: 'Magenta',
-  purple: 'Purple',
-  blue: 'Blue',
-  cyan: 'Cyan',
-  teal: 'Teal',
-  green: 'Green',
-  gray: 'Gray',
-  'cool-gray': 'Cool-Gray',
-  'warm-gray': 'Warm-Gray',
-  'high-contrast': 'High-Contrast',
-  outline: 'Outline'
-};
-
-export { TYPES };

package/es/components/TagOverflow/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2024, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export { TagOverflow } from './TagOverflow';
-export type { TagOverflowProps } from './TagOverflow';