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

package/es/components/InlineTip/InlineTip.js

@@ -18,7 +18,7 @@ import { pkg } from '../../settings.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 
 var _Close, _Idea, _Crossroads;
-var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
+var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "renderMedia", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--inline-tip");
@@ -56,6 +56,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$expandButtonLabe = _ref.expandButtonLabel,
     expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     _ref$narrow = _ref.narrow,
     narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
     onClick = _ref.onClick,
@@ -66,6 +67,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$withLeftGutter = _ref.withLeftGutter,
     withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var hasMedia = renderMedia || media;
   var _useState = useState(collapsible),
     _useState2 = _slicedToArray(_useState, 2),
     isCollapsed = _useState2[0],
@@ -75,7 +77,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     return getComponentText(React__default.Children.toArray(children));
   }, [children]);
   var childrenToRender = children;
-  if (!media && collapsible && isCollapsed) {
+  if (!hasMedia && collapsible && isCollapsed) {
     childrenToRender = /*#__PURE__*/React__default.createElement("p", {
       className: "".concat(blockClass, "__preview-text")
     }, previewText);
@@ -87,7 +89,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [collapsible]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     "aria-labelledby": labelId,
-    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), media && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
+    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), hasMedia && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
     ref: ref,
     role: "complementary"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
@@ -100,7 +102,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: "lg"
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
     size: 16
-  })))), (!media && narrow || !narrow) && /*#__PURE__*/React__default.createElement("div", {
+  })))), (!hasMedia && narrow || !narrow) && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__icon-idea"),
     tabIndex: -1
   }, _Idea || (_Idea = /*#__PURE__*/React__default.createElement(Idea, {
@@ -116,7 +118,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__secondary-btn")
   }, action)), (collapsible || tertiaryButtonLabel) && /*#__PURE__*/React__default.createElement("footer", {
     className: "".concat(blockClass, "__footer")
-  }, collapsible && !media && /*#__PURE__*/React__default.createElement(Button, {
+  }, collapsible && !hasMedia && /*#__PURE__*/React__default.createElement(Button, {
     className: "".concat(blockClass, "__toggle-btn"),
     kind: "ghost",
     size: "md",
@@ -135,12 +137,14 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         size: 16
       }));
     }
-  }, tertiaryButtonLabel))), media && (media.render ? /*#__PURE__*/React__default.createElement("div", {
+  }, tertiaryButtonLabel))), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__media")
-  }, media.render()) : /*#__PURE__*/React__default.createElement(SteppedAnimatedMedia, {
+  }, media.render()), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React__default.createElement(SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__media"),
     filePaths: media.filePaths
-  })));
+  }), hasMedia && renderMedia && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, renderMedia()));
 });
 InlineTip = pkg.checkComponentEnabled(InlineTip, componentName);
 InlineTip.displayName = componentName;
@@ -186,6 +190,7 @@ InlineTip.propTypes = {
    * - If a stepped animation is required, use `{filePaths}`.
    *
    * Enabling `media` disables the `collapsible` feature.
+   * @deprecated please use the `renderMedia` prop
    */
   /**@ts-ignore*/
   media: PropTypes.oneOfType([PropTypes.shape({
@@ -206,6 +211,10 @@ InlineTip.propTypes = {
    * Function to call when the InlineTip is closed via the "X" button.
    */
   onClose: PropTypes.func,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: PropTypes.func,
   /**
    * Defining the label will show a the tertiary button with the crossroads icon.
    * You will still need to define the `onClose` method to trigger a callback.

package/es/components/Nav/Nav.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated This component is deprecated
+ */
 export let Nav: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 export default Nav;
 import React from 'react';

package/es/components/Nav/Nav.js

@@ -17,6 +17,10 @@ import { pkg } from '../../settings.js';
 var _excluded = ["activeHref", "className", "children", "heading", "label"];
 var componentName = 'Nav';
 var blockClass = "".concat(pkg.prefix, "--nav");
+
+/**
+ * @deprecated This component is deprecated
+ */
 var Nav = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var activeHref = _ref.activeHref,
     className = _ref.className,
@@ -121,6 +125,10 @@ var Nav = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     return (child === null || child === void 0 || (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === NavList.displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
   })));
 });
+Nav.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 Nav.propTypes = {
   /**
    * Hypertext reference for active page.

package/es/components/Nav/NavItemLink.js

@@ -25,6 +25,5 @@ NavItemLink.propTypes = {
 NavItemLink.defaultProps = {
   element: 'a'
 };
-var NavItemLink$1 = NavItemLink;
 
-export { NavItemLink$1 as default };
+export { NavItemLink as default };

package/es/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/es/components/ProductiveCard/ProductiveCard.js

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

package/es/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/es/components/StatusIndicator/StatusIndicator.js

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

package/es/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/es/components/StatusIndicator/StatusIndicatorStep.js

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

package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -43,6 +43,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
   var backupRef = 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
   useEffect(function () {
     var isJsonFile = function isJsonFile(filePath) {
@@ -85,7 +86,8 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
       return _loadArtifact.apply(this, arguments);
     }
     loadArtifact();
-  }, [filePaths]);
+    // eslint-disable-next-line
+  }, [filePathStr]);
   useEffect(function () {
     var _window;
     var prefersReducedMotion = (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;

package/es/components/Tearsheet/TearsheetShell.js

@@ -18,7 +18,7 @@ import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, L
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
-import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
+import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
 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"];
@@ -146,33 +146,12 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
-    if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
-      var _window;
-      var specifiedEl = 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);
+    claimFocus(firstElement, modalRef, selectorPrimaryFocus);
   };
   useEffect(function () {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      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;
-        }
-      }
-      setTimeout(function () {
-        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-      }, 0);
+      claimFocus(firstElement, modalRef, selectorPrimaryFocus);
     }
   }, [firstElement, modalRef, open, selectorPrimaryFocus]);
   useEffect(function () {

package/es/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/es/global/js/hooks/useFocus.js

@@ -104,4 +104,24 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   };
 };
 
-export { getSpecificElement, useFocus };
+/**
+ *
+ * @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);
+};
+
+export { claimFocus, getSpecificElement, useFocus };

package/es/global/js/hooks/usePrefersReducedMotion.js

@@ -29,6 +29,5 @@ var usePrefersReducedMotion = function usePrefersReducedMotion() {
   }, []);
   return prefersReducedMotion;
 };
-var usePrefersReducedMotion$1 = usePrefersReducedMotion;
 
-export { usePrefersReducedMotion$1 as default };
+export { usePrefersReducedMotion as default };

package/es/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/es/global/js/package-settings.js

@@ -64,6 +64,7 @@ var defaults = {
     WebTerminal: true,
     WebTerminalContentWrapper: true,
     WebTerminalProvider: true,
+    UserAvatar: true,
     // other public components not yet reviewed and released:
     Toolbar: false,
     ToolbarButton: false,
@@ -117,7 +118,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:

package/es/index.js

@@ -103,12 +103,12 @@ 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 { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
 export { usePrefix } from './global/js/hooks/usePrefix.js';
 export { ActionBar } from './components/ActionBar/ActionBar.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 { 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';
 export { CoachmarkStack } from './components/CoachmarkStack/CoachmarkStack.js';

package/es/settings.d.ts

@@ -52,6 +52,7 @@ export const pkg: {
         WebTerminal: boolean;
         WebTerminalContentWrapper: boolean;
         WebTerminalProvider: boolean;
+        UserAvatar: boolean;
         Toolbar: boolean;
         ToolbarButton: boolean;
         ToolbarGroup: boolean;
@@ -101,7 +102,6 @@ export const pkg: {
         DescriptionListCell: boolean;
         DescriptionListRow: boolean;
         SearchBar: boolean;
-        UserAvatar: boolean;
         EmptyStateV2: boolean;
         Guidebanner: boolean;
         GuidebannerElement: boolean;

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -506,7 +506,7 @@ function _nonIterableRest() {
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (!it) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike) {
       if (it) o = it;
       var i = 0;
       var F = function () {};

package/lib/components/APIKeyModal/APIKeyDownloader.d.ts

@@ -10,7 +10,7 @@ export namespace APIKeyDownloader {
     export { componentName as displayName };
     export namespace propTypes {
         let apiKey: PropTypes.Validator<string>;
-        let body: PropTypes.Validator<string>;
+        let body: PropTypes.Requireable<string>;
         let downloadLinkLabel: PropTypes.Requireable<string>;
         let fileName: PropTypes.Validator<string>;
         let fileType: PropTypes.Validator<string>;

package/lib/components/APIKeyModal/APIKeyDownloader.js

@@ -78,7 +78,7 @@ APIKeyDownloader.propTypes = {
   /**
    * body content for the downloader
    */
-  body: index.default.string.isRequired,
+  body: index.default.string,
   /**
    * aria-label for the download link
    */

package/lib/components/APIKeyModal/APIKeyModal.d.ts

@@ -1,3 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { APIKeyModalProps } from './APIKeyModal.types';
 export declare let APIKeyModal: React.FC<APIKeyModalProps>;
+export declare const deprecatedProps: {
+    /**
+     * deprecated
+     * title for a successful edit
+     */
+    editSuccessTitle: PropTypes.Requireable<string>;
+    /**
+     * deprecated
+     * title for a successful key generation
+     */
+    generateSuccessTitle: PropTypes.Requireable<string>;
+};