@carbon/ibm-products 2.52.0 → 2.53.0

package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -39,7 +39,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
     _useState2 = _slicedToArray(_useState, 2),
     jsonData = _useState2[0],
     setJsonData = _useState2[1];
-  var animRef = useRef();
+  var animRef = useRef(undefined);
   var backupRef = useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
   var localRefValue = localRef.current;

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

@@ -7,6 +7,9 @@
 import React, { ReactNode, RefObject } from 'react';
 export interface TagOverflowItem {
     className?: string;
+    /**
+     * @deprecated The `filter` prop is no longer going to be used. To use DismissibleTags, pass in an onClose function.
+     */
     filter?: boolean;
     id: string;
     label: string;

package/es/components/TagOverflow/TagOverflow.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef, useState, useCallback, useEffect, createElement } from 'react';
-import { Tooltip, Tag } from '@carbon/react';
+import { Tooltip, DismissibleTag, Tag } from '@carbon/react';
 import PropTypes from '../../_virtual/index.js';
 import { TYPES } from './constants.js';
 import { TagOverflowModal } from './TagOverflowModal.js';
@@ -21,7 +21,7 @@ import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 var _excluded = ["align", "allTagsModalAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
   _excluded2 = ["className", "id"],
   _excluded3 = ["tagType"],
-  _excluded4 = ["id", "label", "tagType", "onClose"];
+  _excluded4 = ["id", "label", "tagType", "onClose", "filter"];
 var blockClass = "".concat(pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
 var allTagsModalSearchThreshold = 10;
@@ -181,6 +181,7 @@ var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
         label = item.label,
         tagType = item.tagType,
         _onClose = item.onClose,
+        filter = item.filter,
         other = _objectWithoutProperties(item, _excluded4);
       // If there is no template prop, then render items as Tags
       return /*#__PURE__*/React__default.createElement("div", {
@@ -191,12 +192,16 @@ var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
       }, /*#__PURE__*/React__default.createElement(Tooltip, {
         align: overflowAlign,
         label: label
-      }, /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
+      }, typeof _onClose === 'function' || filter ? /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
         className: "".concat(blockClass, "__item--tag"),
         type: tagType,
         onClose: function onClose() {
           return handleTagOnClose(_onClose, index);
-        }
+        },
+        text: label
+      })) : /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
+        className: "".concat(blockClass, "__item--tag"),
+        type: tagType
       }), label)));
     }
   }), /*#__PURE__*/React__default.createElement("span", {

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

@@ -11,6 +11,10 @@ interface TagOverflowModalProps {
     className?: string;
     modalAriaLabel?: string;
     onClose?: () => void;
+    onTagClose?: (params: {
+        label: string;
+        id: any;
+    }) => void;
     open?: boolean;
     overflowType?: 'default' | 'tag';
     portalTarget?: ReactNode;
@@ -19,13 +23,14 @@ interface TagOverflowModalProps {
     title?: string;
 }
 export declare const TagOverflowModal: {
-    ({ allTags, className, title, modalAriaLabel, onClose, open, overflowType, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: TagOverflowModalProps): any;
+    ({ allTags, className, title, modalAriaLabel, onClose, onTagClose, open, overflowType, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: TagOverflowModalProps): any;
     propTypes: {
         allTags: PropTypes.Requireable<(PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
         }> | null | undefined)[]>;
         className: PropTypes.Requireable<string>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onTagClose: PropTypes.Requireable<(...args: any[]) => any>;
         open: PropTypes.Requireable<boolean>;
         overflowType: PropTypes.Requireable<string>;
         portalTarget: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/es/components/TagOverflow/TagOverflowModal.js

@@ -9,12 +9,12 @@ import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWith
 import React__default, { useState } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { Tag, ComposedModal, ModalHeader, Search, ModalBody } from '@carbon/react';
+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';
 
-var _excluded = ["allTags", "className", "title", "modalAriaLabel", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"];
+var _excluded = ["allTags", "className", "title", "modalAriaLabel", "onClose", "onTagClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"];
 var componentName = 'TagOverflowModal';
 var blockClass = "".concat(pkg.prefix, "--tag-overflow-modal");
 
@@ -32,6 +32,7 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
     _ref$modalAriaLabel = _ref.modalAriaLabel,
     modalAriaLabel = _ref$modalAriaLabel === void 0 ? defaults.modalAriaLabel : _ref$modalAriaLabel,
     onClose = _ref.onClose,
+    onTagClose = _ref.onTagClose,
     open = _ref.open,
     overflowType = _ref.overflowType,
     portalTargetIn = _ref.portalTarget,
@@ -82,11 +83,20 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
   }, getFilteredItems().map(function (_ref2) {
     var label = _ref2.label,
       id = _ref2.id,
-      filter = _ref2.filter;
-    var isFilterable = overflowType === 'tag' ? filter : false;
-    return /*#__PURE__*/React__default.createElement(Tag, {
+      filter = _ref2.filter,
+      onClose = _ref2.onClose;
+    var isFilterable = overflowType === 'tag' && (typeof onClose === 'function' || filter);
+    return isFilterable ? /*#__PURE__*/React__default.createElement(DismissibleTag, {
       key: id,
-      filter: isFilterable
+      text: label,
+      onClose: function onClose() {
+        return onTagClose === null || onTagClose === void 0 ? void 0 : onTagClose({
+          label: label,
+          id: id
+        });
+      }
+    }) : /*#__PURE__*/React__default.createElement(Tag, {
+      key: id
     }, label);
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__fade")
@@ -98,6 +108,7 @@ TagOverflowModal.propTypes = {
   }))),
   className: PropTypes.string,
   onClose: PropTypes.func,
+  onTagClose: PropTypes.func,
   open: PropTypes.bool,
   overflowType: PropTypes.oneOf(['default', 'tag']),
   portalTarget: PropTypes.node,

package/es/components/TagOverflow/TagOverflowPopover.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import React__default, { forwardRef, useRef } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { Popover, OperationalTag, PopoverContent, Tag, Link } from '@carbon/react';
+import { Popover, OperationalTag, PopoverContent, DismissibleTag, Tag, Link } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
@@ -88,17 +88,25 @@ var TagOverflowPopover = /*#__PURE__*/forwardRef(function (props, ref) {
       _onClose = _ref.onClose,
       other = _objectWithoutProperties(_ref, _excluded2);
     var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
-    var isFilterable = overflowType === 'tag' ? filter : false;
+    var isFilterable = overflowType === 'tag' && (typeof _onClose === 'function' || filter);
+    var tag;
+    if (isFilterable) {
+      tag = /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
+        onClose: function onClose() {
+          return _onClose === null || _onClose === void 0 ? void 0 : _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("".concat(blockClass, "__tag-item"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
       key: id
-    }, overflowType === 'tag' ? /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-      onClose: function onClose() {
-        return _onClose === null || _onClose === void 0 ? void 0 : _onClose();
-      },
-      type: typeValue,
-      filter: isFilterable
-    }), label) : label);
+    }, overflowType === 'tag' ? tag : label);
   })), ((_overflowTags$length = overflowTags === null || overflowTags === void 0 ? void 0 : overflowTags.length) !== null && _overflowTags$length !== void 0 ? _overflowTags$length : 0) > (allTagsModalSearchThreshold !== null && allTagsModalSearchThreshold !== void 0 ? allTagsModalSearchThreshold : 0) && /*#__PURE__*/React__default.createElement(Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",

package/es/components/TagSet/TagSet.d.ts

@@ -6,6 +6,10 @@ type OverflowType = 'default' | 'tag';
 type TagType = {
     label: string;
     type?: keyof typeof tagTypes;
+    /**
+     * @deprecated Use the `onClose` function instead to render as a DismissibleTag
+     */
+    filter?: boolean;
 } & TagBaseProps;
 export interface TagSetProps extends PropsWithChildren {
     /**

package/es/components/TagSet/TagSet.js

@@ -8,7 +8,7 @@
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from '../../_virtual/index.js';
-import { Tag } from '@carbon/react';
+import { Tag, DismissibleTag } from '@carbon/react';
 import { TagSetModal } from './TagSetModal.js';
 import { TagSetOverflow } from './TagSetOverflow.js';
 import cx from 'classnames';
@@ -18,8 +18,8 @@ import { pkg } from '../../settings.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 
 var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAutoAlign", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalAriaLabel", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "onOverflowClick", "tags", "containingElementRef", "measurementOffset", "onOverflowTagChange"],
-  _excluded2 = ["label", "id"],
-  _excluded3 = ["label", "onClose"];
+  _excluded2 = ["label", "id", "filter", "onClose"],
+  _excluded3 = ["label", "onClose", "filter"];
 var componentName = 'TagSet';
 var blockClass = "".concat(pkg.prefix, "--tag-set");
 var allTagsModalSearchThreshold = 10;
@@ -108,6 +108,8 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     setHiddenSizingTags(tags && tags.length > 0 ? tags.map(function (_ref2, index) {
       var label = _ref2.label,
         id = _ref2.id,
+        filter = _ref2.filter,
+        onClose = _ref2.onClose,
         other = _objectWithoutProperties(_ref2, _excluded2);
       return /*#__PURE__*/React__default.createElement("div", {
         key: index,
@@ -117,7 +119,10 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
             newSizingTags[index] = el;
           }
         }
-      }, /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
+      }, typeof onClose === 'function' || filter ? /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
+        "data-original-id": id,
+        text: label
+      })) : /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
         // ensure id is not duplicated
         "data-original-id": id
       }), label));
@@ -136,15 +141,22 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     var newDisplayedTags = tags && tags.length > 0 ? tags.map(function (_ref3, index) {
       var label = _ref3.label,
         _onClose = _ref3.onClose,
+        filter = _ref3.filter,
         other = _objectWithoutProperties(_ref3, _excluded3);
       if (index == tags.length - 1 && other.size) {
         size = other.size;
       }
+      if (typeof _onClose === 'function' || filter) {
+        return /*#__PURE__*/React__default.createElement(DismissibleTag, _extends({}, other, {
+          key: "displayed-tag-".concat(index),
+          onClose: function onClose() {
+            return handleTagOnClose(_onClose, index);
+          },
+          text: label
+        }));
+      }
       return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-        key: "displayed-tag-".concat(index),
-        onClose: function onClose() {
-          return handleTagOnClose(_onClose, index);
-        }
+        key: "displayed-tag-".concat(index)
       }), label);
     }) : [];
 

package/es/components/TagSet/TagSetModal.js

@@ -96,7 +96,6 @@ var TagSetModal = function TagSetModal(_ref) {
     var label = _ref2.label,
       other = _objectWithoutProperties(_ref2, _excluded2);
     return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-      filter: false,
       key: "all-tags-".concat(index)
     }), label);
   }), /*#__PURE__*/React__default.createElement("div", {

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

@@ -10,6 +10,11 @@ import PropTypes from 'prop-types';
 import { type ButtonProps } from '@carbon/react';
 interface TearsheetShellProps extends PropsWithChildren {
     actions?: ButtonProps<'button'>[];
+    /**
+     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency,
+     * accountability, and explainability at the UI level.
+     */
+    aiLabel?: ReactNode;
     ariaLabel?: string;
     /**
      * An optional class or classes to be added to the outermost element.
@@ -96,15 +101,15 @@ interface TearsheetShellProps extends PropsWithChildren {
      * Specifies the width of the tearsheet, 'narrow' or 'wide'.
      */
     size: 'narrow' | 'wide';
-    /**
-     *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
-     */
-    slug?: ReactNode;
     /**
      * The main title of the tearsheet, displayed in the header area.
      */
     title?: ReactNode;
     verticalPosition?: 'normal' | 'lower';
+    /**
+     * @deprecated Property replaced by `aiLabel`
+     */
+    slug?: ReactNode;
 }
 export type CloseIconDescriptionTypes = {
     hasCloseIcon?: false;
@@ -126,6 +131,10 @@ export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) =>
 export declare const TearsheetShell: React.ForwardRefExoticComponent<(TearsheetShellProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
 export declare const portalType: PropTypes.Requireable<object>;
 export declare const deprecatedProps: {
+    /**
+     *  @deprecated Property replaced by `aiLabel`
+     */
+    slug: (props: any, propName: any, comp: any, loc: any, propFullName: any, secret: any) => any;
     /**
      * **Deprecated**
      *

package/es/components/Tearsheet/TearsheetShell.js

@@ -13,6 +13,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
+import { deprecateProp } from '../../global/js/utils/props-helper.js';
 import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer } from '@carbon/react';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { Wrap } from '../../global/js/utils/Wrap.js';
@@ -20,7 +21,7 @@ import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
@@ -63,6 +64,7 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
  * */
 var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     ariaLabel = _ref.ariaLabel,
     children = _ref.children,
     className = _ref.className,
@@ -82,7 +84,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _ref$selectorsFloatin = _ref.selectorsFloatingMenus,
     selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
     size = _ref.size,
-    slug = _ref.slug,
+    deprecated_slug = _ref.slug,
     title = _ref.title,
     verticalPosition = _ref.verticalPosition,
     launcherButtonRef = _ref.launcherButtonRef,
@@ -90,7 +92,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var carbonPrefix = usePrefix();
   var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
   var renderPortalUse = usePortalTarget(portalTargetIn);
-  var localRef = useRef();
+  var localRef = useRef(undefined);
   var resizer = useRef(null);
   var modalBodyRef = useRef(null);
   var modalRef = ref || localRef;
@@ -121,7 +123,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     setPosition = _useState4[1];
 
   // Keep a record of the previous value of depth.
-  var prevDepth = useRef();
+  var prevDepth = useRef(undefined);
   useEffect(function () {
     prevDepth.current = depth;
   });
@@ -159,15 +161,21 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   useEffect(function () {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      setTimeout(function () {
-        if (selectorPrimaryFocus) {
-          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+      if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
+        var _window2;
+        var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
+        if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
+          setTimeout(function () {
+            return specifiedEl.focus();
+          }, 0);
+          return;
         }
-        firstElement === null || firstElement === void 0 || firstElement.focus();
+      }
+      setTimeout(function () {
+        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
       }, 0);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
   useEffect(function () {
     if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {
@@ -252,15 +260,13 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       return _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
     };
     return renderPortalUse( /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
-      flags: {
-        'enable-experimental-focus-wrap-without-sentinels': true
-      }
+      enableExperimentalFocusWrapWithoutSentinels: true
     }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent(title),
-      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
-      slug: slug,
+      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), deprecated_slug), "".concat(bc, "--has-ai-label"), aiLabel), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      slug: aiLabel || deprecated_slug,
       style: setScaleValues(),
       containerClassName: cx("".concat(bc, "__container"), _defineProperty(_defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
       onClose: onClose,
@@ -338,6 +344,10 @@ var portalType = typeof Element === 'undefined' ? PropTypes.object :
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 PropTypes.instanceOf(Element);
 var deprecatedProps = {
+  /**
+   *  @deprecated Property replaced by `aiLabel`
+   */
+  slug: deprecateProp(PropTypes.node, 'Property replaced by `aiLabel`'),
   /**
    * **Deprecated**
    *
@@ -382,6 +392,11 @@ TearsheetShell.propTypes = _objectSpread2({
     /**@ts-ignore*/
     onClick: Button.propTypes.onClick
   }))),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency,
+   * accountability, and explainability at the UI level.
+   */
+  aiLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * The main content of the tearsheet.
    */
@@ -488,10 +503,6 @@ TearsheetShell.propTypes = _objectSpread2({
    */
   /**@ts-ignore*/
   size: PropTypes.oneOf(['narrow', 'wide']).isRequired,
-  /**
-   *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
-   */
-  slug: PropTypes.node,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/es/components/Toolbar/Toolbar.js

@@ -25,7 +25,7 @@ var Toolbar = /*#__PURE__*/forwardRef(function (_ref, r) {
     className = _ref.className,
     vertical = _ref.vertical,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var focusableElements = useRef();
+  var focusableElements = useRef(undefined);
   var getFocusableElements$1 = useCallback(function () {
     return focusableElements.current;
   }, [focusableElements]);

package/es/components/TooltipTrigger/TooltipTrigger.d.ts

@@ -2,7 +2,7 @@ export function TooltipTrigger({ children, className, ...rest }: {
     [x: string]: any;
     children: any;
     className: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace TooltipTrigger {
     export { componentName as displayName };
     export namespace propTypes {
@@ -10,6 +10,7 @@ export namespace TooltipTrigger {
         let className: PropTypes.Requireable<string>;
     }
 }
+import React from 'react';
 declare const componentName: "TooltipTrigger";
 import PropTypes from 'prop-types';
 export {};

package/es/components/TruncatedList/TruncatedList.js

@@ -67,7 +67,7 @@ var TruncatedList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState4 = _slicedToArray(_useState3, 2),
     listHeight = _useState4[0],
     setListHeight = _useState4[1];
-  var listRef = useRef();
+  var listRef = useRef(undefined);
   var handleToggle = function handleToggle() {
     setIsCollapsed(function (prev) {
       return !prev;

package/es/components/_Canary/Canary.d.ts

@@ -2,11 +2,12 @@ export function Canary({ className, componentName, ...rest }: {
     [x: string]: any;
     className: any;
     componentName: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace Canary {
     namespace propTypes {
         let className: PropTypes.Requireable<string>;
         let componentName: PropTypes.Validator<string>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/es/global/js/hooks/usePreviousValue.js

@@ -13,7 +13,7 @@ import { useRef, useEffect } from 'react';
  * @returns {T | undefined} - The previous value of the same type, or undefined if there is none
  */
 var usePreviousValue = function usePreviousValue(value) {
-  var ref = useRef();
+  var ref = useRef(undefined);
   useEffect(function () {
     ref.current = value;
   });

package/es/index.js

@@ -20,6 +20,14 @@ export { CreateTearsheet } from './components/CreateTearsheet/CreateTearsheet.js
 export { CreateTearsheetStep } from './components/CreateTearsheet/CreateTearsheetStep.js';
 export { CreateTearsheetDivider } from './components/CreateTearsheet/CreateTearsheetDivider.js';
 export { CreateTearsheetNarrow } from './components/CreateTearsheetNarrow/CreateTearsheetNarrow.js';
+export { EmptyState } from './components/EmptyStates/EmptyState.js';
+export { EmptyStateV2 } from './components/EmptyStates/EmptyStateV2.js';
+export { ErrorEmptyState } from './components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
+export { NoDataEmptyState } from './components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
+export { NoTagsEmptyState } from './components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';
+export { NotFoundEmptyState } from './components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
+export { NotificationsEmptyState } from './components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
+export { UnauthorizedEmptyState } from './components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
 export { ExportModal } from './components/ExportModal/ExportModal.js';
 export { ExpressiveCard } from './components/ExpressiveCard/ExpressiveCard.js';
 export { ImportModal } from './components/ImportModal/ImportModal.js';
@@ -46,6 +54,27 @@ export { EditSidePanel } from './components/EditSidePanel/EditSidePanel.js';
 export { OptionsTile } from './components/OptionsTile/OptionsTile.js';
 export { EditInPlace } from './components/EditInPlace/EditInPlace.js';
 export { DataSpreadsheet } from './components/DataSpreadsheet/DataSpreadsheet.js';
+export { Datagrid } from './components/Datagrid/Datagrid/Datagrid.js';
+export { default as useDatagrid } from './components/Datagrid/useDatagrid.js';
+export { default as useInfiniteScroll } from './components/Datagrid/useInfiniteScroll.js';
+export { default as useNestedRows } from './components/Datagrid/useNestedRows.js';
+export { default as useSelectRows } from './components/Datagrid/useSelectRows.js';
+export { default as useExpandedRow } from './components/Datagrid/useExpandedRow.js';
+export { default as useOnRowClick } from './components/Datagrid/useOnRowClick.js';
+export { default as useSortableColumns } from './components/Datagrid/useSortableColumns.js';
+export { default as useRowIsMouseOver } from './components/Datagrid/useRowIsMouseOver.js';
+export { default as useColumnRightAlign } from './components/Datagrid/useColumnRightAlign.js';
+export { default as useDisableSelectRows } from './components/Datagrid/useDisableSelectRows.js';
+export { default as useStickyColumn } from './components/Datagrid/useStickyColumn.js';
+export { default as useActionsColumn } from './components/Datagrid/useActionsColumn.js';
+export { default as useCustomizeColumns } from './components/Datagrid/useCustomizeColumns.js';
+export { default as useSelectAllWithToggle } from './components/Datagrid/useSelectAllToggle.js';
+export { default as useColumnCenterAlign } from './components/Datagrid/useColumnCenterAlign.js';
+export { useColumnOrder } from 'react-table';
+export { default as useInlineEdit } from './components/Datagrid/useInlineEdit.js';
+export { default as useEditableCell } from './components/Datagrid/useEditableCell.js';
+export { default as useFiltering } from './components/Datagrid/useFiltering.js';
+export { getAutoSizedColumnWidth } from './components/Datagrid/utils/getAutoSizedColumnWidth.js';
 export { EditTearsheetNarrow } from './components/EditTearsheetNarrow/EditTearsheetNarrow.js';
 export { EditFullPage } from './components/EditFullPage/EditFullPage.js';
 export { EditUpdateCards } from './components/EditUpdateCards/EditUpdateCards.js';
@@ -74,40 +103,11 @@ export { SearchBar } from './components/SearchBar/SearchBar.js';
 export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
 export { GetStartedCard } from './components/GetStartedCard/GetStartedCard.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
-export { useColumnOrder } from 'react-table';
 export { usePrefix } from './global/js/hooks/usePrefix.js';
 export { ActionBar } from './components/ActionBar/ActionBar.js';
-export { EmptyState } from './components/EmptyStates/EmptyState.js';
-export { EmptyStateV2 } from './components/EmptyStates/EmptyStateV2.js';
-export { ErrorEmptyState } from './components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
-export { NoDataEmptyState } from './components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
-export { NoTagsEmptyState } from './components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';
-export { NotFoundEmptyState } from './components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
-export { NotificationsEmptyState } from './components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
-export { UnauthorizedEmptyState } from './components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
 export { HTTPError403 } from './components/HTTPErrors/HTTPError403/HTTPError403.js';
 export { HTTPError404 } from './components/HTTPErrors/HTTPError404/HTTPError404.js';
 export { HTTPErrorOther } from './components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js';
-export { Datagrid } from './components/Datagrid/Datagrid/Datagrid.js';
-export { default as useDatagrid } from './components/Datagrid/useDatagrid.js';
-export { default as useInfiniteScroll } from './components/Datagrid/useInfiniteScroll.js';
-export { default as useNestedRows } from './components/Datagrid/useNestedRows.js';
-export { default as useSelectRows } from './components/Datagrid/useSelectRows.js';
-export { default as useExpandedRow } from './components/Datagrid/useExpandedRow.js';
-export { default as useOnRowClick } from './components/Datagrid/useOnRowClick.js';
-export { default as useSortableColumns } from './components/Datagrid/useSortableColumns.js';
-export { default as useRowIsMouseOver } from './components/Datagrid/useRowIsMouseOver.js';
-export { default as useColumnRightAlign } from './components/Datagrid/useColumnRightAlign.js';
-export { default as useDisableSelectRows } from './components/Datagrid/useDisableSelectRows.js';
-export { default as useStickyColumn } from './components/Datagrid/useStickyColumn.js';
-export { default as useActionsColumn } from './components/Datagrid/useActionsColumn.js';
-export { default as useCustomizeColumns } from './components/Datagrid/useCustomizeColumns.js';
-export { default as useSelectAllWithToggle } from './components/Datagrid/useSelectAllToggle.js';
-export { default as useColumnCenterAlign } from './components/Datagrid/useColumnCenterAlign.js';
-export { default as useInlineEdit } from './components/Datagrid/useInlineEdit.js';
-export { default as useEditableCell } from './components/Datagrid/useEditableCell.js';
-export { default as useFiltering } from './components/Datagrid/useFiltering.js';
-export { getAutoSizedColumnWidth } from './components/Datagrid/utils/getAutoSizedColumnWidth.js';
 export { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
 export { EditTearsheet } from './components/EditTearsheet/EditTearsheet.js';
 export { EditTearsheetForm } from './components/EditTearsheet/EditTearsheetForm.js';