@carbon/react 1.54.0 → 1.55.0-rc.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/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

package/es/components/UIShell/SideNavMenu.js

@@ -28,9 +28,12 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     tabIndex,
     title
   } = _ref;
-  const isRail = useContext(SideNavContext);
+  const {
+    isRail
+  } = useContext(SideNavContext);
   const prefix = usePrefix();
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [prevExpanded, setPrevExpanded] = useState(defaultExpanded);
   const className = cx({
     [`${prefix}--side-nav__item`]: true,
     [`${prefix}--side-nav__item--active`]: isActive || hasActiveDescendant(children) && !isExpanded,
@@ -38,6 +41,13 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     [`${prefix}--side-nav__item--large`]: large,
     [customClassName]: !!customClassName
   });
+  if (!isSideNavExpanded && isExpanded && isRail) {
+    setIsExpanded(false);
+    setPrevExpanded(true);
+  } else if (isSideNavExpanded && prevExpanded && isRail) {
+    setIsExpanded(true);
+    setPrevExpanded(false);
+  }
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions

package/es/components/UIShell/SideNavMenuItem.d.ts

@@ -20,6 +20,10 @@ interface SideNavMenuItemProps extends HTMLAttributes<HTMLElement> {
      * `aria-current="page"`, as well.
      */
     isActive?: boolean;
+    /**
+     * Optionally provide an href for the underlying li`
+     */
+    href?: string;
 }
 declare const SideNavMenuItem: React.ForwardRefExoticComponent<SideNavMenuItemProps & React.RefAttributes<HTMLElement>>;
 export default SideNavMenuItem;

package/es/components/UIShell/SideNavMenuItem.js

@@ -19,6 +19,7 @@ const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavM
     children,
     className: customClassName,
     isActive,
+    href,
     ...rest
   } = props;
   const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
@@ -28,7 +29,9 @@ const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavM
   });
   return /*#__PURE__*/React__default.createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(Link, _extends({
+    href: href
+  }, rest, {
     className: linkClassName,
     ref: ref
   }), /*#__PURE__*/React__default.createElement(SideNavLinkText, null, children)));
@@ -43,6 +46,10 @@ SideNavMenuItem.propTypes = {
    * Provide an optional class to be applied to the containing node
    */
   className: PropTypes.string,
+  /**
+   * Optionally provide an href for the underlying li`
+   */
+  href: PropTypes.string,
   /**
    * Optionally specify whether the link is "active". An active link is one that
    * has an href that is the same as the current page. Can also pass in

package/es/components/UIShell/SwitcherItem.d.ts

@@ -39,6 +39,10 @@ interface BaseSwitcherItemProps {
      * Specify whether the panel is selected
      */
     isSelected?: boolean;
+    /**
+     * Optionally provide an href for the underlying li`
+     */
+    href?: string;
 }
 interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
     'aria-label': string;

package/es/components/UIShell/SwitcherItem.js

@@ -27,6 +27,7 @@ const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwar
     index,
     handleSwitcherItemFocus,
     onKeyDown = () => {},
+    href,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -63,6 +64,7 @@ const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwar
       setTabFocus(evt);
       onKeyDown(evt);
     },
+    href: href,
     ref: forwardRef
   }, rest, {
     className: linkClassName,
@@ -84,6 +86,10 @@ SwitcherItem.propTypes = {
    * event handlers
    */
   handleSwitcherItemFocus: PropTypes.func,
+  /**
+   * Optionally provide an href for the underlying li`
+   */
+  href: PropTypes.string,
   /**
    * Specify the index of the SwitcherItem
    */

package/es/index.js

@@ -19,6 +19,8 @@ export { default as ButtonSet } from './components/ButtonSet/ButtonSet.js';
 export { default as Checkbox } from './components/Checkbox/Checkbox.js';
 export { default as CheckboxSkeleton } from './components/Checkbox/Checkbox.Skeleton.js';
 export { ClassPrefix } from './components/ClassPrefix/index.js';
+export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js';
+export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
 export { default as ComboBox } from './components/ComboBox/ComboBox.js';
 export { ComboButton } from './components/ComboButton/index.js';
 export { default as ComposedModal, ModalBody } from './components/ComposedModal/ComposedModal.js';
@@ -105,6 +107,9 @@ export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs } from './components/T
 export { default as TabContent } from './components/TabContent/TabContent.js';
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as Tag } from './components/Tag/Tag.js';
+export { default as DismissibleTag } from './components/Tag/DismissibleTag.js';
+export { default as OperationalTag } from './components/Tag/OperationalTag.js';
+export { default as SelectableTag } from './components/Tag/SelectableTag.js';
 export { default as TagSkeleton } from './components/Tag/Tag.Skeleton.js';
 export { default as TextArea } from './components/TextArea/TextArea.js';
 export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
@@ -173,8 +178,6 @@ export { default as unstable__FluidTextInputSkeleton } from './components/FluidT
 export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as CheckboxGroup } from './components/CheckboxGroup/CheckboxGroup.js';
-export { default as CodeSnippetSkeleton } from './components/CodeSnippet/CodeSnippet.Skeleton.js';
-export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet.js';
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as useContextMenu } from './components/ContextMenu/useContextMenu.js';

package/lib/components/CodeSnippet/CodeSnippet.Skeleton.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+export interface CodeSnippetSkeletonProps extends React.HTMLAttributes<Omit<HTMLDivElement, 'children'>> {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * The type of the code snippet, including single or multi
+     */
+    type?: 'single' | 'multi' | undefined;
+}
+declare function CodeSnippetSkeleton({ className: containerClassName, type, ...rest }: {
+    [x: string]: any;
+    className: any;
+    type?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element | undefined;
+declare namespace CodeSnippetSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The type of the code snippet, including single or multi
+         */
+        type: PropTypes.Requireable<string>;
+    };
+}
+export default CodeSnippetSkeleton;
+export { CodeSnippetSkeleton };