@carbon/ibm-products 2.33.0 → 2.35.0

package/es/components/TagOverflow/TagOverflow.js

@@ -0,0 +1,209 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { Tooltip, Tag } from '@carbon/react';
+import { TYPES } from './constants.js';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
+import { TagSet } from '../TagSet/TagSet.js';
+
+var _excluded = ["className", "items", "tagComponent", "maxVisible", "multiline"],
+  _excluded2 = ["className", "id"];
+var blockClass = "".concat(pkg.prefix, "--tag-overflow");
+var componentName = 'TagOverflow';
+
+// Default values for props
+var defaults = {
+  items: []
+};
+
+/**
+ * TODO: A description of the component.
+ */
+var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? defaults.items : _ref$items,
+    tagComponent = _ref.tagComponent,
+    maxVisible = _ref.maxVisible,
+    multiline = _ref.multiline,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var localContainerRef = useRef(null);
+  var containerRef = ref || localContainerRef;
+  var itemRefs = useRef(null);
+  var overflowRef = useRef(null);
+  // measurementOffset is the value of margin applied on each items
+  // This value is required for calculating how many items will fit within the container
+  var measurementOffset = 4;
+  var overflowIndicatorWidth = 40;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerWidth = _useState2[0],
+    setContainerWidth = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visibleItems = _useState4[0],
+    setVisibleItems = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    overflowItems = _useState6[0],
+    setOverflowItems = _useState6[1];
+  var handleResize = function handleResize() {
+    setContainerWidth(containerRef.current.offsetWidth);
+  };
+  useResizeObserver(containerRef, handleResize);
+  var getMap = function getMap() {
+    if (!itemRefs.current) {
+      itemRefs.current = new Map();
+    }
+    return itemRefs.current;
+  };
+  var itemRefHandler = function itemRefHandler(id, node) {
+    var map = getMap();
+    if (id && node && map.get(id) !== node.offsetWidth) {
+      map.set(id, node.offsetWidth);
+    }
+  };
+  var getVisibleItems = useCallback(function () {
+    if (!itemRefs.current) {
+      return items;
+    }
+    if (multiline) {
+      var _visibleItems = maxVisible ? items === null || items === void 0 ? void 0 : items.slice(0, maxVisible) : items;
+      return _visibleItems;
+    }
+    var map = getMap();
+    var overflowContainerWidth = overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
+    var maxWidth = containerWidth - overflowContainerWidth;
+    var childrenWidth = 0;
+    var maxReached = false;
+    return items.reduce(function (prev, cur) {
+      if (!maxReached) {
+        var itemWidth = map.get(cur.id) + measurementOffset;
+        var fits = itemWidth + childrenWidth < maxWidth;
+        if (fits) {
+          childrenWidth += itemWidth;
+          prev.push(cur);
+        } else {
+          maxReached = true;
+        }
+      }
+      return prev;
+    }, []);
+  }, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible]);
+  var getCustomComponent = function getCustomComponent(item) {
+    var className = item.className,
+      id = item.id,
+      other = _objectWithoutProperties(item, _excluded2);
+    return /*#__PURE__*/React__default.createElement(tagComponent, _objectSpread2(_objectSpread2({}, other), {}, {
+      className: cx("".concat(blockClass, "__item"), className),
+      ref: function ref(node) {
+        return itemRefHandler(id, node);
+      }
+    }));
+  };
+  useEffect(function () {
+    var visibleItemsArr = getVisibleItems();
+    if (maxVisible && maxVisible < visibleItemsArr.length) {
+      var _visibleItemsArr;
+      visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
+    }
+    var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
+    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (item) {
+      return {
+        type: item.tagType,
+        label: item.label
+      };
+    });
+    setVisibleItems(visibleItemsArr);
+    setOverflowItems(overflowItemsArr);
+  }, [containerWidth, items, maxVisible, getVisibleItems]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
+    ref: containerRef,
+    role: "main"
+  }, getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
+    // Render custom components
+    if (tagComponent) {
+      return getCustomComponent(item);
+    } else {
+      // If there is no template prop, then render items as Tags
+      return /*#__PURE__*/React__default.createElement("div", {
+        ref: function ref(node) {
+          return itemRefHandler(item.id, node);
+        },
+        key: item.id
+      }, /*#__PURE__*/React__default.createElement(Tooltip, {
+        align: "bottom",
+        label: item.label
+      }, /*#__PURE__*/React__default.createElement(Tag, {
+        className: "".concat(blockClass, "__item--tag"),
+        type: item.tagType
+      }, item.label)));
+    }
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(blockClass, "__indicator"),
+    ref: overflowRef
+  }, overflowItems.length > 0 && /*#__PURE__*/React__default.createElement(TagSet, {
+    tags: overflowItems,
+    allTagsModalTitle: "All tags",
+    containingElementRef: overflowRef,
+    allTagsModalSearchLabel: "Search all tags",
+    allTagsModalSearchPlaceholderText: "Search all tags",
+    showAllTagsLabel: "Show all tags"
+  })));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+TagOverflow = pkg.checkComponentEnabled(TagOverflow, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+TagOverflow.displayName = componentName;
+var 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 = {
+  /**
+   * 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 item content,
+   * **id**\* (required) to uniquely identify the each item.
+   * **tagType** the type value to be passed to the Carbon Tag component
+   * if you are passing an tagComponent prop for rendering custom components,
+   * 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,
+  /**
+   * display items in multiple lines
+   */
+  multiline: PropTypes.bool,
+  /** 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
+};
+
+export { TagOverflow };

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+// 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
+var 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

@@ -0,0 +1 @@
+export { TagOverflow } from "./TagOverflow";

package/es/components/Tearsheet/TearsheetNarrow.d.ts

@@ -1,3 +1,94 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode, PropsWithChildren } from 'react';
+import PropTypes from 'prop-types';
+import { ButtonProps } from '@carbon/react';
+type closeIconDescriptionTypes = {
+    hasCloseIcon: true;
+    closeIconDescription: string;
+};
+interface TearsheetNarrowProps extends PropsWithChildren {
+    /**
+     * The navigation actions to be shown as buttons in the action area at the
+     * bottom of the tearsheet. Each action is specified as an object with
+     * optional fields: 'label' to supply the button label, 'kind' to select the
+     * button kind (must be 'primary', 'secondary' or 'ghost'), 'loading' to
+     * display a loading indicator, and 'onClick' to receive notifications when
+     * the button is clicked. Additional fields in the object will be passed to
+     * the Button component, and these can include 'disabled', 'ref', 'className',
+     * and any other Button props. Any other fields in the object will be passed
+     * through to the button element as HTML attributes.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+     */
+    actions?: ButtonProps[];
+    /**
+     * The aria-label for the tearsheet, which is optional.
+     * if it is not passed, the title will be used as the aria-label.
+     */
+    ariaLabel?: string;
+    /**
+     * An optional class or classes to be added to the outermost element.
+     */
+    className?: string;
+    /**
+     * The accessibility title for the close icon (if shown).
+     *
+     * **Note:** This prop is only required if a close icon is shown, i.e. if
+     * there are a no navigation actions and/or hasCloseIcon is true.
+     */
+    closeIconDescription?: closeIconDescriptionTypes;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * Enable a close icon ('x') in the header area of the tearsheet. By default,
+     * a tearsheet does not display a close icon, but one should be enabled if
+     * the tearsheet is read-only or has no navigation actions (sometimes called
+     * a "passive tearsheet").
+     */
+    hasCloseIcon?: boolean;
+    /**
+     * A label for the tearsheet, displayed in the header area of the tearsheet
+     * to maintain context for the tearsheet (e.g. as the title changes from page
+     * to page of a multi-page task).
+     */
+    label?: ReactNode;
+    /**
+     * An optional handler that is called when the user closes the tearsheet (by
+     * clicking the close button, if enabled, or clicking outside, if enabled).
+     * Returning `false` here prevents the modal from closing.
+     */
+    onClose?: () => boolean | void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    /**
+     * **Deprecated**
+     *
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition?: 'normal' | 'lower';
+}
 /**
  * A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
  * that keeps users in-context and focused by bringing actionable content front
@@ -6,9 +97,17 @@
  * A narrow tearsheet comprises 3 zones: a heading area including a title, the
  * main content area, and a set of action buttons.
  */
-export let TearsheetNarrow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export namespace deprecatedProps {
-    let verticalPosition: PropTypes.Requireable<string>;
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+export declare let TearsheetNarrow: React.ForwardRefExoticComponent<TearsheetNarrowProps & React.RefAttributes<unknown>>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     *
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition: PropTypes.Requireable<string>;
+};
+export {};

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -33,6 +33,7 @@ var defaults = {
  * A narrow tearsheet comprises 3 zones: a heading area including a title, the
  * main content area, and a set of action buttons.
  */
+
 var TearsheetNarrow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$verticalPosition = _ref.verticalPosition,
     verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
@@ -83,7 +84,8 @@ TearsheetNarrow.propTypes = _objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: allPropTypes([ActionSet.validateActions(function () {
+  actions: allPropTypes([/**@ts-ignore */
+  ActionSet.validateActions(function () {
     return 'lg';
   }), PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
     kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -107,6 +109,7 @@ TearsheetNarrow.propTypes = _objectSpread2({
    * **Note:** This prop is only required if a close icon is shown, i.e. if
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
+  /**@ts-ignore */
   closeIconDescription: PropTypes.string.isRequired.if(function (_ref2) {
     var actions = _ref2.actions,
       hasCloseIcon = _ref2.hasCloseIcon;
@@ -122,6 +125,7 @@ TearsheetNarrow.propTypes = _objectSpread2({
    * the tearsheet is read-only or has no navigation actions (sometimes called
    * a "passive tearsheet").
    */
+  /**@ts-ignore*/
   hasCloseIcon: PropTypes.bool,
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet
@@ -142,6 +146,7 @@ TearsheetNarrow.propTypes = _objectSpread2({
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
+  /**@ts-ignore */
   portalTarget: portalType,
   /**
    * The main title of the tearsheet, displayed in the header area.

package/es/components/Toolbar/Toolbar.d.ts

@@ -1,6 +1,24 @@
-export const blockClass: string;
-export const componentName: "Toolbar";
-/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
-export let Toolbar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export const ToolbarContext: React.Context<any>;
+/**
+ * Copyright IBM Corp. 2021, 2022
+ *
+ * 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 React from 'react';
+declare const blockClass: string;
+interface ToolbarProps {
+    /** Provide an optional class to be applied to the containing node */
+    className?: string;
+    /** Determines whether the `Toolbar` is rendered vertically */
+    vertical?: boolean;
+}
+interface ToolbarContextType {
+    vertical?: boolean;
+}
+declare const ToolbarContext: React.Context<ToolbarContextType>;
+/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
+declare let Toolbar: React.ForwardRefExoticComponent<ToolbarProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const componentName = "Toolbar";
+export { blockClass, componentName, Toolbar, ToolbarContext };

package/es/components/Toolbar/Toolbar.js

@@ -17,50 +17,54 @@ var _excluded = ["children", "className", "vertical"];
 var checkComponentEnabled = pkg.checkComponentEnabled,
   prefix = pkg.prefix;
 var blockClass = "".concat(prefix, "--toolbar");
-var ToolbarContext = /*#__PURE__*/createContext();
+var ToolbarContext = /*#__PURE__*/createContext({});
 
 /** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
-var Toolbar = /*#__PURE__*/forwardRef(function (_ref2, r) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    vertical = _ref2.vertical,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+var Toolbar = /*#__PURE__*/forwardRef(function (_ref, r) {
+  var children = _ref.children,
+    className = _ref.className,
+    vertical = _ref.vertical,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var focusableElements = useRef();
   var getFocusableElements$1 = useCallback(function () {
     return focusableElements.current;
   }, [focusableElements]);
-  var _ref = useRef();
-  var ref = r || _ref;
-  var _useState = useState(),
+  var localRef = useRef(null);
+  var ref = r || localRef;
+  var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     focus = _useState2[0],
     setFocus = _useState2[1];
   useEffect(function () {
-    focusableElements.current = getFocusableElements(ref.current);
-    typeof focus !== 'undefined' && getFocusableElements$1().forEach(function (element, index) {
-      element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', -1);
-    });
+    var _getFocusableElements2;
+    focusableElements.current = getFocusableElements(ref === null || ref === void 0 ? void 0 : ref['current']);
+    focus !== -1 && ((_getFocusableElements2 = getFocusableElements$1()) === null || _getFocusableElements2 === void 0 ? void 0 : _getFocusableElements2.forEach(function (element, index) {
+      element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', '-1');
+    }));
   });
   useEffect(function () {
-    typeof focus !== 'undefined' && getFocusableElements$1()[focus].focus();
+    var _getFocusableElements3;
+    focus !== -1 && ((_getFocusableElements3 = getFocusableElements$1()) === null || _getFocusableElements3 === void 0 ? void 0 : _getFocusableElements3[focus].focus());
   }, [focus, getFocusableElements$1]);
-  var _ref3 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
-    _ref4 = _slicedToArray(_ref3, 2),
-    arrowNext = _ref4[0],
-    arrowPrevious = _ref4[1];
+  var _ref2 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
+    _ref3 = _slicedToArray(_ref2, 2),
+    arrowNext = _ref3[0],
+    arrowPrevious = _ref3[1];
   function onArrowDown(increment) {
+    var _getFocusableElements4;
     var nextFocus = focus + increment;
-    getFocusableElements$1()[nextFocus] && setFocus(nextFocus);
+    ((_getFocusableElements4 = getFocusableElements$1()) === null || _getFocusableElements4 === void 0 ? void 0 : _getFocusableElements4[nextFocus]) && setFocus(nextFocus);
   }
-  function onFocus(_ref5) {
-    var target = _ref5.target;
+  function onFocus(_ref4) {
+    var target = _ref4.target;
     var elements = getFocusableElements$1();
-    elements.includes(target) && setFocus(elements.indexOf(target));
+    (elements === null || elements === void 0 ? void 0 : elements.includes(target)) && setFocus(elements.indexOf(target));
   }
-  function onKeyDown(_ref6) {
-    var key = _ref6.key,
-      target = _ref6.target;
-    if (getFocusableElements$1().includes(target)) {
+  function onKeyDown(_ref5) {
+    var _getFocusableElements5;
+    var key = _ref5.key,
+      target = _ref5.target;
+    if ((_getFocusableElements5 = getFocusableElements$1()) !== null && _getFocusableElements5 !== void 0 && _getFocusableElements5.includes(target)) {
       switch (key) {
         case arrowNext:
           onArrowDown(1);

package/es/components/TruncatedList/TruncatedList.js

@@ -88,9 +88,11 @@ var TruncatedList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       var items = listRef.current.childNodes;
       var _listHeight = 0;
       for (var index = 0; index < numItemsToShow; index++) {
-        var _window;
-        var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(items[index])) === null || _window === void 0 ? void 0 : _window.height) || 16;
-        _listHeight += parseInt(height);
+        if (items[index]) {
+          var _window;
+          var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(items[index])) === null || _window === void 0 ? void 0 : _window.height) || 16;
+          _listHeight += parseInt(height);
+        }
       }
       setListHeight(_listHeight);
     }

package/es/components/UserAvatar/UserAvatar.js

@@ -46,10 +46,12 @@ var componentName = 'UserAvatar';
 
 var defaults = {
   size: 'md',
-  tooltipAlignment: 'bottom'
+  tooltipAlignment: 'bottom',
+  backgroundColor: 'order-1-cyan'
 };
 var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var backgroundColor = _ref.backgroundColor,
+  var _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? defaults.backgroundColor : _ref$backgroundColor,
     className = _ref.className,
     image = _ref.image,
     imageDescription = _ref.imageDescription,
@@ -114,7 +116,8 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         // example: [`${blockClass}__here-if-small`]: size === 'sm',
       }),
       ref: ref,
-      role: "img"
+      role: "img",
+      "aria-hidden": "true"
     }, getDevtoolsProps(componentName)), getItem());
   };
   if (tooltipText) {
@@ -141,7 +144,7 @@ UserAvatar.propTypes = {
   /**
    * Provide the background color need to be set for UserAvatar.
    */
-  backgroundColor: PropTypes.oneOf(['light-cyan', 'dark-cyan']),
+  backgroundColor: PropTypes.oneOf(['order-1-cyan', 'order-2-gray', 'order-3-green', 'order-4-magenta', 'order-5-purple', 'order-6-teal', 'order-7-cyan', 'order-8-gray', 'order-9-green', 'order-10-magenta', 'order-11-purple', 'order-12-teal']),
   /**
    * Provide an optional class to be applied to the containing node.
    */

package/es/components/index.d.ts

@@ -49,8 +49,11 @@ export { SearchBar } from "./SearchBar";
 export { Nav } from "./Nav";
 export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
+export { ScrollGradient } from "./ScrollGradient";
 export { StatusIndicator } from "./StatusIndicator";
+export { TagOverflow } from "./TagOverflow";
 export { ActionBar } from "./ActionBar";
+export { ConditionBuilder } from "./ConditionBuilder";
 export { ComboButton, ComboButtonItem } from "./ComboButton";
 export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";
 export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from "./CreateTearsheet";
@@ -59,9 +62,9 @@ export { HTTPError403, HTTPError404, HTTPErrorOther } from "./HTTPErrors";
 export { Tearsheet, TearsheetNarrow } from "./Tearsheet";
 export { Toolbar, ToolbarButton, ToolbarGroup } from "./Toolbar";
 export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from "./WebTerminal";
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext } from "./Datagrid";
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext, useEditableCell } from "./Datagrid";
 export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
 export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
 export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
 export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
-export { FilterPanel, FilterPanelCheckbox, FilterPanelLabel } from "./FilterPanel";
+export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel, FilterPanelSearch } from "./FilterPanel";

package/es/global/js/package-settings.d.ts

@@ -80,13 +80,21 @@ declare namespace defaults {
         let TruncatedList: boolean;
         let DelimitedList: boolean;
         let FullPageError: boolean;
+        let ScrollGradient: boolean;
         let StringFormatter: boolean;
         let StatusIndicator: boolean;
         let StatusIndicatorStep: boolean;
+        let TagOverflow: boolean;
         let ActionBar: boolean;
         let FilterPanel: boolean;
+        let FilterPanelAccordion: boolean;
+        let FilterPanelAccordionItem: boolean;
         let FilterPanelCheckbox: boolean;
+        let FilterPanelCheckboxWithOverflow: boolean;
+        let FilterPanelGroup: boolean;
         let FilterPanelLabel: boolean;
+        let FilterPanelSearch: boolean;
+        let ConditionBuilder: boolean;
         let Coachmark: boolean;
         let CoachmarkBeacon: boolean;
         let CoachmarkButton: boolean;

package/es/global/js/package-settings.js

@@ -79,13 +79,21 @@ var defaults = {
     TruncatedList: false,
     DelimitedList: false,
     FullPageError: false,
+    ScrollGradient: false,
     StringFormatter: false,
     StatusIndicator: false,
     StatusIndicatorStep: false,
+    TagOverflow: false,
     ActionBar: false,
     FilterPanel: false,
+    FilterPanelAccordion: false,
+    FilterPanelAccordionItem: false,
     FilterPanelCheckbox: false,
+    FilterPanelCheckboxWithOverflow: false,
+    FilterPanelGroup: false,
     FilterPanelLabel: false,
+    FilterPanelSearch: false,
+    ConditionBuilder: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released: