@carbon/ibm-products 2.63.0 → 2.64.0

package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts

@@ -4,31 +4,9 @@
  * 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, { ElementType, ReactNode } from 'react';
-import { ButtonProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-export interface NoDataEmptyStateProps {
-    /**
-     * Empty state action button
-     */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The alt text for empty state svg images. If not provided, title will be used.
-     */
-    illustrationDescription?: string;
-    /**
-     * Designates the position of the illustration relative to the content
-     */
-    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+import React from 'react';
+import { EmptyStatePresetProps } from '../EmptyState';
+export interface NoDataEmptyStateProps extends EmptyStatePresetProps {
     /**
      * Empty state illustration theme variations.
      * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -36,29 +14,6 @@ export interface NoDataEmptyStateProps {
      * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
      */
     illustrationTheme?: 'light' | 'dark';
-    /**
-     * Empty state link object
-     */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
-    /**
-     * Empty state headingAs allows you to customize the type of heading element
-     */
-    headingAs?: (() => ReactNode) | string | ElementType;
-    /**
-     * Empty state size
-     */
-    size?: 'lg' | 'sm';
-    /**
-     * Empty state subtitle
-     */
-    subtitle?: string | React.ReactNode;
-    /**
-     * Empty state title
-     */
-    title: string | React.ReactNode;
 }
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.d.ts

@@ -4,31 +4,9 @@
  * 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, { ElementType, ReactNode } from 'react';
-import { ButtonProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-export interface NoTagsEmptyStateProps {
-    /**
-     * Empty state action button
-     */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The alt text for empty state svg images. If not provided , title will be used.
-     */
-    illustrationDescription?: string;
-    /**
-     * Designates the position of the illustration relative to the content
-     */
-    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+import React from 'react';
+import { EmptyStatePresetProps } from '../EmptyState';
+export interface NoTagsEmptyStateProps extends EmptyStatePresetProps {
     /**
      * Empty state illustration theme variations.
      * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -36,29 +14,6 @@ export interface NoTagsEmptyStateProps {
      * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
      */
     illustrationTheme?: 'light' | 'dark';
-    /**
-     * Empty state link object
-     */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
-    /**
-     * Empty state headingAs allows you to customize the type of heading element
-     */
-    headingAs?: (() => ReactNode) | string | ElementType;
-    /**
-     * Empty state size
-     */
-    size?: 'lg' | 'sm';
-    /**
-     * Empty state subtitle
-     */
-    subtitle?: string | ReactNode;
-    /**
-     * Empty state title
-     */
-    title: string | ReactNode;
 }
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -19,6 +19,7 @@ var NoTagsIllustration = require('../assets/NoTagsIllustration.js');
 var EmptyState = require('../EmptyState.js');
 
 var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "headingAs", "subtitle", "title"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
 var componentName = 'NoTagsEmptyState';

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts

@@ -4,31 +4,9 @@
  * 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, { ElementType, ReactNode } from 'react';
-import { ButtonProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-export interface NotFoundEmptyStateProps {
-    /**
-     * Empty state action button
-     */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The alt text for empty state svg images. If not provided , title will be used.
-     */
-    illustrationDescription?: string;
-    /**
-     * Designates the position of the illustration relative to the content
-     */
-    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+import React from 'react';
+import { EmptyStatePresetProps } from '../EmptyState';
+export interface NotFoundEmptyStateProps extends EmptyStatePresetProps {
     /**
      * Empty state illustration theme variations.
      * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -36,29 +14,6 @@ export interface NotFoundEmptyStateProps {
      * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
      */
     illustrationTheme?: 'light' | 'dark';
-    /**
-     * Empty state link object
-     */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
-    /**
-     * Empty state headingAs allows you to customize the type of heading element
-     */
-    headingAs?: (() => ReactNode) | string | ElementType;
-    /**
-     * Empty state size
-     */
-    size?: 'lg' | 'sm';
-    /**
-     * Empty state subtitle
-     */
-    subtitle: string | ReactNode;
-    /**
-     * Empty state title
-     */
-    title: string | ReactNode;
 }
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -19,6 +19,7 @@ var NotFoundIllustration = require('../assets/NotFoundIllustration.js');
 var EmptyState = require('../EmptyState.js');
 
 var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "headingAs", "subtitle", "title"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
 var componentName = 'NotFoundEmptyState';

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.d.ts

@@ -4,31 +4,9 @@
  * 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, { ElementType, ReactNode } from 'react';
-import { ButtonProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-export interface NotificationsEmptyStateProps {
-    /**
-     * Empty state action button
-     */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The alt text for empty state svg images. If not provided , title will be used.
-     */
-    illustrationDescription?: string;
-    /**
-     * Designates the position of the illustration relative to the content
-     */
-    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+import React from 'react';
+import { EmptyStatePresetProps } from '../EmptyState';
+export interface NotificationsEmptyStateProps extends EmptyStatePresetProps {
     /**
      * Empty state illustration theme variations.
      * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -36,29 +14,6 @@ export interface NotificationsEmptyStateProps {
      * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
      */
     illustrationTheme?: 'light' | 'dark';
-    /**
-     * Empty state link object
-     */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
-    /**
-     * Empty state headingAs allows you to customize the type of heading element
-     */
-    headingAs?: (() => ReactNode) | string | ElementType;
-    /**
-     * Empty state size
-     */
-    size?: 'lg' | 'sm';
-    /**
-     * Empty state subtitle
-     */
-    subtitle: ReactNode;
-    /**
-     * Empty state title
-     */
-    title: ReactNode;
 }
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -19,6 +19,7 @@ var NotificationsIllustration = require('../assets/NotificationsIllustration.js'
 var EmptyState = require('../EmptyState.js');
 
 var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "headingAs", "subtitle", "title"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
 var componentName = 'NotificationsEmptyState';

package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.d.ts

@@ -4,31 +4,9 @@
  * 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, { ElementType, ReactNode } from 'react';
-import { ButtonProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-export interface UnauthorizedEmptyStateProps {
-    /**
-     * Empty state action button
-     */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The alt text for empty state svg images. If not provided , title will be used.
-     */
-    illustrationDescription?: string;
-    /**
-     * Designates the position of the illustration relative to the content
-     */
-    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+import React from 'react';
+import { EmptyStatePresetProps } from '../EmptyState';
+export interface UnauthorizedEmptyStateProps extends EmptyStatePresetProps {
     /**
      * Empty state illustration theme variations.
      * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -36,29 +14,6 @@ export interface UnauthorizedEmptyStateProps {
      * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
      */
     illustrationTheme?: 'light' | 'dark';
-    /**
-     * Empty state link object
-     */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
-    /**
-     * Empty state headingAs allows you to customize the type of heading element
-     */
-    headingAs?: (() => ReactNode) | string | ElementType;
-    /**
-     * Empty state size
-     */
-    size?: 'lg' | 'sm';
-    /**
-     * Empty state subtitle
-     */
-    subtitle: string | ReactNode;
-    /**
-     * Empty state title
-     */
-    title: string | ReactNode;
 }
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -204,7 +204,8 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref)
       if (/*#__PURE__*/React.isValidElement(child)) {
         return /*#__PURE__*/React.createElement(react.ProgressStep, {
           key: idx,
-          label: child.props.stepTitle || ''
+          label: child.props.stepTitle || '',
+          translateWithId: child.props.translateWithId
         });
       }
     })))), /*#__PURE__*/React.createElement(react.ModalBody, {
@@ -236,7 +237,8 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref)
       if (/*#__PURE__*/React.isValidElement(child)) {
         return /*#__PURE__*/React.createElement(react.ProgressStep, {
           key: idx,
-          label: child.props.stepTitle || ''
+          label: child.props.stepTitle || '',
+          translateWithId: child.props.translateWithId
         });
       }
     })))), childElements, renderFooter()));

package/lib/components/InterstitialScreenView/InterstitialScreenView.d.ts

@@ -18,6 +18,10 @@ export interface InterstitialScreenViewProps extends PropsWithChildren {
      * The label to pass to the ProgressStep component.
      */
     stepTitle: string;
+    /**
+     * Optional method that takes in a message id and returns an internationalized string.
+     */
+    translateWithId?: (id: string) => string;
 }
 /**
  * An Onboarding component intended to be used as the child elements of the InterstitialScreen component.

package/lib/components/InterstitialScreenView/InterstitialScreenView.js

@@ -14,7 +14,7 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["children", "className", "stepTitle"];
+var _excluded = ["children", "className", "stepTitle", "translateWithId"];
 
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
@@ -28,8 +28,9 @@ var componentName = 'InterstitialScreenView';
 exports.InterstitialScreenView = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    stepTitle = _ref.stepTitle,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+    stepTitle = _ref.stepTitle;
+    _ref.translateWithId;
+    var rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     role: "complementary",
     "aria-label": stepTitle
@@ -69,5 +70,9 @@ exports.InterstitialScreenView.propTypes = {
   /**
    * The label to pass to the ProgressStep component.
    */
-  stepTitle: index.default.string.isRequired
+  stepTitle: index.default.string.isRequired,
+  /**
+   * Optional method that takes in a message id and returns an internationalized string.
+   */
+  translateWithId: index.default.func
 };

package/lib/components/OptionsTile/OptionsTile.js

@@ -169,9 +169,9 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var hasValidationState = invalid || warn || locked;
     var summaryHidden = !hasValidationState && enabled === false;
     var summaryClasses = cx("".concat(blockClass, "__summary"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__summary--closing"), closing), "".concat(blockClass, "__summary--open"), open), "".concat(blockClass, "__summary--invalid"), invalid), "".concat(blockClass, "__summary--warn"), warn), "".concat(blockClass, "__summary--locked"), locked), "".concat(blockClass, "__summary--hidden"), summaryHidden));
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(react.Section, {
       className: "".concat(blockClass, "__heading")
-    }, /*#__PURE__*/React.createElement("h6", {
+    }, /*#__PURE__*/React.createElement(react.Heading, {
       id: titleId,
       className: "".concat(blockClass, "__title")
     }, title), text && /*#__PURE__*/React.createElement("span", {

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

@@ -3,16 +3,16 @@ import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 type ActionIcon = {
     id?: string;
     icon?: CarbonIconType;
-    onKeyDown?(): void;
-    onClick?(): void;
+    onClick?: (event: MouseEvent) => void;
+    onKeydown?: (event: KeyboardEvent) => void;
     iconDescription?: string;
     href?: string;
 };
 type overflowAction = {
     id?: string;
     itemText?: string;
-    onClick?: () => void;
-    onKeydown?: () => void;
+    onClick?: (event: MouseEvent) => void;
+    onKeydown?: (event: KeyboardEvent) => void;
 };
 type PlacementType = 'top' | 'bottom';
 type ClickZoneType = 'one' | 'two' | 'three';
@@ -52,7 +52,11 @@ export interface ProductiveCardProps extends PropsWithChildren {
     /**
      * Provides the callback for a clickable card
      */
-    onClick?: () => void;
+    onClick?: (event: MouseEvent) => void;
+    /**
+     * Provides the callback for keydown events on the card
+     */
+    onKeyDown?: (event: KeyboardEvent) => void;
     /**
      * Function that's called from the primary button or action icon
      */

package/lib/components/SimpleHeader/SimpleHeader.js

@@ -59,7 +59,7 @@ var SimpleHeader = function SimpleHeader(_ref) {
     maxVisible: maxVisible,
     overflowAriaLabel: overflowAriaLabel,
     overflowTooltipAlign: overflowTooltipAlign
-  }), title && /*#__PURE__*/React.createElement("h1", {
+  }), title && /*#__PURE__*/React.createElement(react.Heading, {
     className: cx("".concat(blockClass, "__title"))
   }, title));
 };