@carbon/react 1.54.0 → 1.55.0

package/es/components/MultiSelect/MultiSelect.js

@@ -37,9 +37,11 @@ const {
   ToggleButtonKeyDownEscape,
   ToggleButtonKeyDownSpaceButton,
   ItemMouseMove,
+  MenuMouseLeave,
   ToggleButtonClick,
-  ToggleButtonKeyDownHome,
-  ToggleButtonKeyDownEnd
+  ToggleButtonKeyDownPageDown,
+  ToggleButtonKeyDownPageUp,
+  FunctionSetHighlightedIndex
 } = useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -135,7 +137,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     getMenuProps,
     getItemProps,
     selectedItem,
-    highlightedIndex
+    highlightedIndex,
+    setHighlightedIndex
   } = useSelect(selectProps);
   const toggleButtonProps = getToggleButtonProps({
     onFocus: () => {
@@ -154,6 +157,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           setItemsCleared(true);
         }
         if ((match(e, Space) || match(e, ArrowDown) || match(e, Enter)) && !isOpen) {
+          setHighlightedIndex(0);
           setItemsCleared(false);
           setIsOpenWrapper(true);
         }
@@ -237,7 +241,6 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       setTopItems(controlledSelectedItems);
     }
     switch (type) {
-      case ItemClick:
       case ToggleButtonKeyDownSpaceButton:
       case ToggleButtonKeyDownEnter:
         if (changes.selectedItem === undefined) {
@@ -257,11 +260,38 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         break;
       case ToggleButtonClick:
         setIsOpenWrapper(changes.isOpen || false);
-        break;
+        return {
+          ...changes,
+          highlightedIndex: 0
+        };
+      case ItemClick:
+        setHighlightedIndex(changes.selectedItem);
+        onItemChange(changes.selectedItem);
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case MenuMouseLeave:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case FunctionSetHighlightedIndex:
+        if (!isOpen) {
+          return {
+            ...changes,
+            highlightedIndex: 0
+          };
+        } else {
+          return {
+            ...changes,
+            highlightedIndex: props.items.indexOf(highlightedIndex)
+          };
+        }
       case ToggleButtonKeyDownArrowDown:
       case ToggleButtonKeyDownArrowUp:
-      case ToggleButtonKeyDownHome:
-      case ToggleButtonKeyDownEnd:
+      case ToggleButtonKeyDownPageDown:
+      case ToggleButtonKeyDownPageUp:
         if (highlightedIndex > -1) {
           const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
           props.scrollIntoView(itemArray[highlightedIndex]);

package/es/components/Slug/index.js

@@ -138,26 +138,21 @@ Slug.propTypes = {
    */
   align: PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
-  'top-right',
+  'top-start', 'top-right',
   // deprecated use top-end instead
-
-  'bottom', 'bottom-left',
+  'top-end', 'bottom', 'bottom-left',
   // deprecated use bottom-start instead
-  'bottom-right',
+  'bottom-start', 'bottom-right',
   // deprecated use bottom-end instead
-
-  'left', 'left-bottom',
+  'bottom-end', 'left', 'left-bottom',
   // deprecated use left-end instead
-  'left-top',
+  'left-end', 'left-top',
   // deprecated use left-start instead
-
-  'right', 'right-bottom',
+  'left-start', 'right', 'right-bottom',
   // deprecated use right-end instead
-  'right-top',
+  'right-end', 'right-top',
   // deprecated use right-start instead
-
-  // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  'right-start']),
   /**
    * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
    */

package/es/components/Tabs/Tabs.js

@@ -199,7 +199,8 @@ function TabList(_ref2) {
     // TODO: V12 - Remove this class
     [`${prefix}--layout--size-lg`]: iconSize === 'lg',
     [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
-    [`${prefix}--tabs--full-width`]: distributeWidth
+    [`${prefix}--tabs--full-width`]: distributeWidth,
+    [`${prefix}--tabs--dismissable`]: dismissable
   }, customClassName);
 
   // Previous Button
@@ -541,6 +542,25 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
   const handleClose = evt => {
     evt.stopPropagation();
     onTabCloseRequest?.(index);
+
+    // set focus after removing tab
+    if (tabRef.current && tabRef.current.parentElement) {
+      // determine number of tabs, excluding disabled
+      const tabCount = Array.from(tabRef.current.parentElement.childNodes).filter(node => {
+        const element = node;
+        return element.classList.contains('cds--tabs__nav-link') && !element.classList.contains('cds--tabs__nav-item--disabled');
+      }).length;
+
+      // if not removing last tab focus on next tab
+      if (tabRef.current && index + 1 !== tabCount) {
+        tabRef.current.focus();
+      }
+      // if removing last tab focus on previous tab
+      else {
+        const prevTabIndex = (tabCount - 2) * 2;
+        tabRef.current.parentElement.childNodes[prevTabIndex]?.focus();
+      }
+    }
   };
   const handleKeyDown = event => {
     if (dismissable && match(event, Delete)) {
@@ -549,20 +569,31 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
     onKeyDown?.(event);
   };
   const DismissIcon = /*#__PURE__*/React__default.createElement("div", {
-    tabIndex: -1,
-    "aria-hidden": true,
-    className: cx(`${prefix}--tabs__nav-item--close-icon`, {
-      [`${prefix}--visually-hidden`]: !dismissable
+    className: cx({
+      [`${prefix}--tabs__nav-item--close`]: dismissable,
+      [`${prefix}--tabs__nav-item--close--hidden`]: !dismissable
+    })
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    tabIndex: selectedIndex === index && dismissable ? 0 : -1,
+    "aria-disabled": disabled,
+    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    disabled: disabled,
+    className: cx({
+      [`${prefix}--tabs__nav-item--close-icon`]: dismissable,
+      [`${prefix}--visually-hidden`]: !dismissable,
+      [`${prefix}--tabs__nav-item--close-icon--selected`]: selectedIndex === index,
+      [`${prefix}--tabs__nav-item--close-icon--disabled`]: disabled
     }),
     onClick: handleClose,
-    title: "Close tab",
+    title: `Remove ${typeof children === 'string' ? children : ''} tab`,
     ref: dismissIconRef
   }, /*#__PURE__*/React__default.createElement(Close, {
-    "aria-hidden": dismissable ? 'false' : 'true',
-    "aria-label": "Press delete to close tab"
-  }));
+    "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
+    "aria-label": `Press delete to remove ${typeof children === 'string' ? children : ''} tab`
+  })));
   const hasIcon = Icon ?? dismissable;
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
     "aria-selected": selectedIndex === index,
@@ -589,17 +620,17 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
     size: 16
   })), /*#__PURE__*/React__default.createElement(Text, {
     className: `${prefix}--tabs__nav-item-label`
-  }, children), /*#__PURE__*/React__default.createElement("div", {
+  }, children), !dismissable && Icon && /*#__PURE__*/React__default.createElement("div", {
     className: cx(`${prefix}--tabs__nav-item--icon`, {
       [`${prefix}--visually-hidden`]: !hasIcon
     })
-  }, DismissIcon, !dismissable && Icon && /*#__PURE__*/React__default.createElement(Icon, {
+  }, !dismissable && Icon && /*#__PURE__*/React__default.createElement(Icon, {
     size: 16
   }))), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
     className: `${prefix}--tabs__nav-item-secondary-label`,
     title: secondaryLabel
-  }, secondaryLabel));
+  }, secondaryLabel)), DismissIcon);
 });
 Tab.propTypes = {
   /**

package/es/components/Tag/DismissibleTag.js

@@ -0,0 +1,119 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import Tag, { SIZES, TYPES } from './Tag.js';
+import { Close } from '@carbon/icons-react';
+
+var _Close;
+const getInstanceId = setupGetInstanceId();
+const DismissibleTag = _ref => {
+  let {
+    children,
+    className,
+    disabled,
+    id,
+    renderIcon,
+    title = 'Clear filter',
+    onClose,
+    slug,
+    size,
+    type,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const tagId = id || `tag-${getInstanceId()}`;
+  const tagClasses = cx(`${prefix}--tag--filter`, className);
+  const handleClose = event => {
+    if (onClose) {
+      event.stopPropagation();
+      onClose(event);
+    }
+  };
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
+
+  // Removing onClick from the spread operator
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {
+    onClick,
+    ...otherProps
+  } = other;
+  return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    type: type,
+    size: size,
+    renderIcon: renderIcon,
+    disabled: disabled,
+    className: tagClasses,
+    id: tagId
+  }, otherProps), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--interactive--tag-children`
+  }, children, normalizedSlug, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: `${prefix}--tag__close-icon`,
+    onClick: handleClose,
+    disabled: disabled,
+    "aria-label": title,
+    title: title
+  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)))));
+};
+DismissibleTag.propTypes = {
+  /**
+   * Provide content to be rendered inside of a `DismissibleTag`
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom className that is applied to the containing <span>
+   */
+  className: PropTypes.string,
+  /**
+   * Specify if the `DismissibleTag` is disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Specify the id for the tag.
+   */
+  id: PropTypes.string,
+  /**
+   * Click handler for filter tag close button.
+   */
+  onClose: PropTypes.func,
+  /**
+   * Optional prop to render a custom icon.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Specify the size of the Tag. Currently supports either `sm`,
+   * `md` (default) or `lg` sizes.
+   */
+  size: PropTypes.oneOf(Object.keys(SIZES)),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
+   */
+  slug: PropTypes.node,
+  /**
+   * Text to show on clear filters
+   */
+  title: PropTypes.string,
+  /**
+   * Specify the type of the `Tag`
+   */
+  type: PropTypes.oneOf(Object.keys(TYPES))
+};
+
+export { DismissibleTag as default };

package/es/components/Tag/OperationalTag.js

@@ -0,0 +1,99 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import Tag, { SIZES } from './Tag.js';
+
+const getInstanceId = setupGetInstanceId();
+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'
+};
+const OperationalTag = _ref => {
+  let {
+    children,
+    className,
+    disabled,
+    id,
+    renderIcon,
+    slug,
+    size,
+    type = 'gray',
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const tagId = id || `tag-${getInstanceId()}`;
+  const tagClasses = cx(`${prefix}--tag--operational`, className);
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    type: type,
+    size: size,
+    renderIcon: renderIcon,
+    disabled: disabled,
+    className: tagClasses,
+    id: tagId
+  }, other), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--interactive--tag-children`
+  }, children, normalizedSlug));
+};
+OperationalTag.propTypes = {
+  /**
+   * Provide content to be rendered inside of a `OperationalTag`
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom className that is applied to the containing <span>
+   */
+  className: PropTypes.string,
+  /**
+   * Specify if the `OperationalTag` is disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Specify the id for the tag.
+   */
+  id: PropTypes.string,
+  /**
+   * Optional prop to render a custom icon.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Specify the size of the Tag. Currently supports either `sm`,
+   * `md` (default) or `lg` sizes.
+   */
+  size: PropTypes.oneOf(Object.keys(SIZES)),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
+   */
+  slug: PropTypes.node,
+  /**
+   * Specify the type of the `Tag`
+   */
+  type: PropTypes.oneOf(Object.keys(TYPES))
+};
+
+export { OperationalTag as default };

package/es/components/Tag/SelectableTag.js

@@ -0,0 +1,98 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 PropTypes from 'prop-types';
+import React__default, { useState } from 'react';
+import cx from 'classnames';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import Tag, { SIZES } from './Tag.js';
+
+const getInstanceId = setupGetInstanceId();
+const SelectableTag = _ref => {
+  let {
+    children,
+    className,
+    disabled,
+    id,
+    renderIcon,
+    selected = false,
+    slug,
+    size,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const tagId = id || `tag-${getInstanceId()}`;
+  const [selectedTag, setSelectedTag] = useState(selected);
+  const tagClasses = cx(`${prefix}--tag--selectable`, className, {
+    [`${prefix}--tag--selectable-selected`]: selectedTag
+  });
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
+
+  // Removing onClick from the spread operator
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {
+    onClick,
+    ...otherProps
+  } = other;
+  return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    slug: slug,
+    size: size,
+    renderIcon: renderIcon,
+    disabled: disabled,
+    className: tagClasses,
+    id: tagId,
+    onClick: () => setSelectedTag(!selectedTag)
+  }, otherProps), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--interactive--tag-children`
+  }, children, normalizedSlug));
+};
+SelectableTag.propTypes = {
+  /**
+   * Provide content to be rendered inside of a `SelectableTag`
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom className that is applied to the containing <span>
+   */
+  className: PropTypes.string,
+  /**
+   * Specify if the `SelectableTag` is disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Specify the id for the tag.
+   */
+  id: PropTypes.string,
+  /**
+   * Optional prop to render a custom icon.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Specify the state of the selectable tag.
+   */
+  selected: PropTypes.bool,
+  /**
+   * Specify the size of the Tag. Currently supports either `sm`,
+   * `md` (default) or `lg` sizes.
+   */
+  size: PropTypes.oneOf(Object.keys(SIZES)),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
+   */
+  slug: PropTypes.node
+};
+
+export { SelectableTag as default };

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

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Tag from './Tag';
+import DismissibleTag from './DismissibleTag';
+import OperationalTag from './OperationalTag';
+import SelectableTag from './SelectableTag';
 export * from './Tag.Skeleton';
 export default Tag;
-export { Tag };
+export { Tag, DismissibleTag, OperationalTag, SelectableTag };

package/es/components/TreeView/TreeNode.js

@@ -56,7 +56,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       return /*#__PURE__*/React__default.cloneElement(node, {
         active,
         depth: depth + 1,
-        disabled,
+        disabled: disabled || node.props.disabled,
         onTreeSelect,
         selected,
         tabIndex: !node.props.disabled && -1 || null