@carbon/ibm-products 2.54.0-canary.6 → 2.54.0-canary.64

package/lib/components/ProductiveCard/ProductiveCard.d.ts

@@ -22,9 +22,9 @@ export interface ProductiveCardProps extends PropsWithChildren {
      */
     actionIcons?: ActionIcon[];
     /**
-     * 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.
+     * Optional prop that allows you to pass any component.
      */
-    aiLabel?: ReactNode | boolean;
+    decorator?: ReactNode | boolean;
     /**
      * Determines if the action icons are on the top or bottom of the card
      */
@@ -108,7 +108,7 @@ export interface ProductiveCardProps extends PropsWithChildren {
     /**
      * **Experimental:** For all cases a `Slug` component can be provided.
      * Clickable tiles only accept a boolean value of true and display a hollow slug.
-     * @deprecated please use the `aiLabel` prop
+     * @deprecated please use the `decorator` prop
      */
     slug?: ReactNode | boolean;
     /**

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -50,10 +50,6 @@ exports.ProductiveCard.propTypes = {
    * Determines if the action icons are on the top or bottom of the card
    */
   actionsPlacement: index.default.oneOf(['top', 'bottom']),
-  /**
-   * 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: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Content that shows in the body of the card
    */
@@ -66,6 +62,10 @@ exports.ProductiveCard.propTypes = {
    * Designates which zones of the card are clickable. Refer to design documentation for implementation guidelines
    */
   clickZone: index.default.oneOf(['one', 'two', 'three']),
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Optional header description
    */

package/lib/components/SidePanel/SidePanel.d.ts

@@ -110,14 +110,19 @@ type SidePanelBaseProps = {
      */
     slideIn?: boolean;
     /**
-     * @deprecated please use the `aiLabel` prop
+     * @deprecated please use the `decorator` instead
      *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
      */
     slug?: ReactNode;
     /**
+     * @deprecated please use the `decorator` instead
      * 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;
+    /**
+     * Provide a `decorator` component to be rendered inside the `SidePanel` component
+     */
+    decorator?: ReactNode;
     /**
      * Sets the subtitle text
      */

package/lib/components/SidePanel/SidePanel.js

@@ -26,7 +26,7 @@ var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMo
 var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
-var _excluded = ["actionToolbarButtons", "actions", "aiLabel", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
+var _excluded = ["actionToolbarButtons", "actions", "aiLabel", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "decorator", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
   _excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 var blockClass = "".concat(settings.pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
@@ -59,6 +59,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     condensedActions = _ref.condensedActions,
     _ref$currentStep = _ref.currentStep,
     currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
+    decorator = _ref.decorator,
     _ref$id = _ref.id,
     id = _ref$id === void 0 ? blockClass : _ref$id,
     includeOverlay = _ref.includeOverlay,
@@ -337,7 +338,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-ai-label"), !!aiLabel || !!slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
+  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-decorator"), decorator), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--has-ai-label"), aiLabel), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {
     return /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
@@ -353,23 +354,29 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, title));
   };
   var renderHeader = function renderHeader() {
-    var _slug$type, _aiLabel$type;
-    var aiLabelCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
-    var normalizedAILabel;
+    var _slug$type, _aiLabel$type, _decorator$type;
+    var closeSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
+    var normalizedDecorator;
     /**
      * slug is deprecated
      * can remove this condition in future release
      */
-    if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
-      normalizedAILabel = /*#__PURE__*/React.cloneElement(slug, {
+    if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'AILabel') {
+      normalizedDecorator = /*#__PURE__*/React.cloneElement(slug, {
         // slug size is sm unless actions and size > md
-        size: aiLabelCloseSize
+        size: closeSize
       });
     }
     if (aiLabel && ((_aiLabel$type = aiLabel['type']) === null || _aiLabel$type === void 0 ? void 0 : _aiLabel$type.displayName) === 'AILabel') {
-      normalizedAILabel = /*#__PURE__*/React.cloneElement(aiLabel, {
+      normalizedDecorator = /*#__PURE__*/React.cloneElement(aiLabel, {
         // aiLabel size is sm unless actions and size > md
-        size: aiLabelCloseSize
+        size: closeSize
+      });
+    }
+    if ((decorator === null || decorator === void 0 || (_decorator$type = decorator['type']) === null || _decorator$type === void 0 ? void 0 : _decorator$type.displayName) === 'AILabel') {
+      normalizedDecorator = /*#__PURE__*/React.cloneElement(decorator, {
+        // decorator size is sm unless actions and size > md
+        size: closeSize
       });
     }
     return /*#__PURE__*/React.createElement("div", {
@@ -377,7 +384,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ref: headerRef
     }, currentStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
       kind: "ghost",
-      size: aiLabelCloseSize,
+      size: closeSize,
       disabled: false,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/React.createElement(icons.ArrowLeft, _rollupPluginBabelHelpers.extends({
@@ -391,8 +398,8 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__label-text"),
       ref: labelTextRef
     }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__ai-label-and-close")
-    }, normalizedAILabel, /*#__PURE__*/React.createElement(react.IconButton, {
+      className: "".concat(blockClass, "__decorator-and-close")
+    }, normalizedDecorator, /*#__PURE__*/React.createElement(react.IconButton, {
       className: "".concat(blockClass, "__close-button"),
       label: closeIconDescription,
       onClick: onRequestClose,
@@ -495,7 +502,13 @@ var deprecatedProps = {
    * **deprecated**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
    */
-  slug: index.default.node
+  slug: index.default.node,
+  /**
+   * **deprecated**
+   * Please use the `decorator` instead
+   * 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: index.default.node
 };
 exports.SidePanel.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**

package/lib/components/StatusIndicator/StatusIndicator.d.ts

@@ -1,5 +1,6 @@
 /**
  * A list of icon/description pairs used to show multiple states of progress.
+ * @deprecated This component is deprecated
  */
 export let StatusIndicator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/StatusIndicator/StatusIndicator.js

@@ -29,6 +29,7 @@ var defaults = {
 
 /**
  * A list of icon/description pairs used to show multiple states of progress.
+ * @deprecated This component is deprecated
  */
 exports.StatusIndicator = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -59,6 +60,10 @@ exports.StatusIndicator = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, retryLabel));
 });
+exports.StatusIndicator.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.StatusIndicator = settings.pkg.checkComponentEnabled(exports.StatusIndicator, componentName);

package/lib/components/StatusIndicator/StatusIndicatorStep.d.ts

@@ -1,5 +1,6 @@
 /**
  * An icon/description pair that describes one step of the `StatusIndicator`.
+ * @deprecated This component is deprecated
  */
 export let StatusIndicatorStep: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/StatusIndicator/StatusIndicatorStep.js

@@ -28,6 +28,7 @@ var defaults = {
 
 /**
  * An icon/description pair that describes one step of the `StatusIndicator`.
+ * @deprecated This component is deprecated
  */
 exports.StatusIndicatorStep = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -56,6 +57,10 @@ exports.StatusIndicatorStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__error-message")
   }, errorMessage));
 });
+exports.StatusIndicatorStep.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.StatusIndicatorStep = settings.pkg.checkComponentEnabled(exports.StatusIndicatorStep, componentName);

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -45,6 +45,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var backupRef = React.useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
   var localRefValue = localRef.current;
+  var filePathStr = filePaths === null || filePaths === void 0 ? void 0 : filePaths.join(); //converting the array to string will avoid unwanted useEffect trigger.
   // load animation source
   React.useEffect(function () {
     var isJsonFile = function isJsonFile(filePath) {
@@ -87,7 +88,8 @@ var SteppedAnimatedMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return _loadArtifact.apply(this, arguments);
     }
     loadArtifact();
-  }, [filePaths]);
+    // eslint-disable-next-line
+  }, [filePathStr]);
   React.useEffect(function () {
     var _window;
     var prefersReducedMotion = (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;

package/lib/components/Tearsheet/TearsheetShell.js

@@ -148,33 +148,12 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
-    if (selectorPrimaryFocus && useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
-      var _window;
-      var specifiedEl = useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
-      if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
-        return specifiedEl.focus();
-      }
-    }
-    setTimeout(function () {
-      return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-    }, 0);
+    useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
   };
   React.useEffect(function () {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      if (selectorPrimaryFocus && useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
-        var _window2;
-        var specifiedEl = useFocus.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;
-        }
-      }
-      setTimeout(function () {
-        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-      }, 0);
+      useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
     }
   }, [firstElement, modalRef, open, selectorPrimaryFocus]);
   React.useEffect(function () {

package/lib/global/js/hooks/useFocus.d.ts

@@ -12,3 +12,4 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
         specified: any;
     };
 };
+export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): any;

package/lib/global/js/hooks/useFocus.js

@@ -106,5 +106,26 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   };
 };
 
+/**
+ *
+ * @param {*} firstElement
+ * @param {*} modalRef
+ * @param {string | undefined} selectorPrimaryFocus
+ */
+var claimFocus = function claimFocus(firstElement, modalRef) {
+  var selectorPrimaryFocus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  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') {
+      return specifiedEl.focus();
+    }
+  }
+  setTimeout(function () {
+    return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+  }, 0);
+};
+
+exports.claimFocus = claimFocus;
 exports.getSpecificElement = getSpecificElement;
 exports.useFocus = useFocus;

package/lib/global/js/hooks/usePrefersReducedMotion.js

@@ -33,6 +33,5 @@ var usePrefersReducedMotion = function usePrefersReducedMotion() {
   }, []);
   return prefersReducedMotion;
 };
-var usePrefersReducedMotion$1 = usePrefersReducedMotion;
 
-exports.default = usePrefersReducedMotion$1;
+exports.default = usePrefersReducedMotion;

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

@@ -66,6 +66,7 @@ declare namespace defaults {
         let WebTerminal: boolean;
         let WebTerminalContentWrapper: boolean;
         let WebTerminalProvider: boolean;
+        let UserAvatar: boolean;
         let Toolbar: boolean;
         let ToolbarButton: boolean;
         let ToolbarGroup: boolean;
@@ -115,7 +116,6 @@ declare namespace defaults {
         let DescriptionListCell: boolean;
         let DescriptionListRow: boolean;
         let SearchBar: boolean;
-        let UserAvatar: boolean;
         let EmptyStateV2: boolean;
         let Guidebanner: boolean;
         let GuidebannerElement: boolean;

package/lib/global/js/package-settings.js

@@ -68,6 +68,7 @@ var defaults = {
     WebTerminal: true,
     WebTerminalContentWrapper: true,
     WebTerminalProvider: true,
+    UserAvatar: true,
     // other public components not yet reviewed and released:
     Toolbar: false,
     ToolbarButton: false,
@@ -121,7 +122,6 @@ var defaults = {
     DescriptionListCell: false,
     DescriptionListRow: false,
     SearchBar: false,
-    UserAvatar: false,
     /* new component flags here - comment used by generate CLI */
 
     // Onboarding components not yet reviewed and released: