@carbon/ibm-products 2.36.0-alpha.27 → 2.37.0

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -10,7 +10,6 @@ import React__default, { forwardRef, useState, useRef, useEffect, createContext
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { Form } from '@carbon/react';
-import wrapFocus from '../../global/js/utils/wrapFocus.js';
 import { TearsheetShell } from '../Tearsheet/TearsheetShell.js';
 import { pkg } from '../../settings.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -30,17 +29,12 @@ var blockClass = "".concat(pkg.prefix, "--tearsheet-create");
 // This is a general context for the steps container
 // containing information about the state of the container
 // and providing some callback methods for steps to use
+
 var StepsContext = /*#__PURE__*/createContext(null);
 
 // This is a context supplied separately to each step in the container
 // to let it know what number it is in the sequence of steps
 var StepNumberContext = /*#__PURE__*/createContext(-1);
-
-// Default values for props
-var defaults = {
-  verticalPosition: 'normal',
-  influencerWidth: 'narrow'
-};
 var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var backButtonText = _ref.backButtonText,
     cancelButtonText = _ref.cancelButtonText,
@@ -48,7 +42,7 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className = _ref.className,
     description = _ref.description,
     _ref$influencerWidth = _ref.influencerWidth,
-    influencerWidth = _ref$influencerWidth === void 0 ? defaults.influencerWidth : _ref$influencerWidth,
+    influencerWidth = _ref$influencerWidth === void 0 ? 'narrow' : _ref$influencerWidth,
     initialStep = _ref.initialStep,
     label = _ref.label,
     nextButtonText = _ref.nextButtonText,
@@ -60,7 +54,7 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     submitButtonText = _ref.submitButtonText,
     title = _ref.title,
     _ref$verticalPosition = _ref.verticalPosition,
-    verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
+    verticalPosition = _ref$verticalPosition === void 0 ? 'normal' : _ref$verticalPosition,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -106,7 +100,7 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState22 = _slicedToArray(_useState21, 2),
     firstIncludedStep = _useState22[0],
     setFirstIncludedStep = _useState22[1];
-  var _useState23 = useState(null),
+  var _useState23 = useState(),
     _useState24 = _slicedToArray(_useState23, 2),
     lastIncludedStep = _useState24[0],
     setLastIncludedStep = _useState24[1];
@@ -114,7 +108,7 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     currentStep: currentStep,
     open: open
   });
-  var contentRef = useRef();
+  var contentRef = useRef(null);
   useEffect(function () {
     var firstItem = stepData.findIndex(function (item) {
       return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
@@ -144,9 +138,11 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useResetCreateComponent({
     firstIncludedStep: firstIncludedStep,
     previousState: previousState,
+    /**@ts-ignore */
     open: open,
     setCurrentStep: setCurrentStep,
     stepData: stepData,
+    /**@ts-ignore */
     initialStep: initialStep,
     totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
     componentName: componentName
@@ -161,6 +157,7 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setCurrentStep: setCurrentStep,
     setIsSubmitting: setIsSubmitting,
     setShouldViewAll: setShouldViewAll,
+    /**@ts-ignore */
     setLoadingPrevious: setLoadingPrevious,
     loadingPrevious: loadingPrevious,
     onClose: onClose,
@@ -176,43 +173,26 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     componentBlockClass: blockClass,
     setCreateComponentActions: setCreateTearsheetActions
   });
-
-  // adds focus trap functionality
-  /* istanbul ignore next */
-  var handleBlur = function handleBlur(_ref2) {
-    var oldActiveNode = _ref2.target,
-      currentActiveNode = _ref2.relatedTarget;
-    var visibleStepInnerContent = document.querySelector(".".concat(pkg.prefix, "--tearsheet__body"));
-    if (open && visibleStepInnerContent) {
-      wrapFocus({
-        bodyNode: visibleStepInnerContent,
-        currentActiveNode: currentActiveNode,
-        oldActiveNode: oldActiveNode
-      });
-    }
-  };
-  return /*#__PURE__*/React__default.createElement(TearsheetShell, _extends({}, rest, getDevtoolsProps(componentName), {
+  return /*#__PURE__*/React__default.createElement(TearsheetShell, _extends({}, getDevtoolsProps(componentName), rest, {
+    ref: ref,
     actions: createTearsheetActions,
     className: cx(blockClass, className),
     description: description,
-    hasCloseIcon: false,
     influencer: /*#__PURE__*/React__default.createElement(CreateInfluencer, {
       currentStep: currentStep,
       stepData: stepData
     }),
-    influencerPosition: "left",
     influencerWidth: influencerWidth,
     label: label,
     onClose: onClose,
     open: open,
-    size: "wide",
+    size: 'wide',
     slug: slug,
     title: title,
     verticalPosition: verticalPosition,
-    ref: ref
+    closeIconDescription: ''
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content"),
-    onBlur: handleBlur,
     ref: contentRef
   }, /*#__PURE__*/React__default.createElement(Form, {
     "aria-label": title

package/es/components/Datagrid/useParentDimensions.js

@@ -44,7 +44,7 @@ var useParentDimensions = function useParentDimensions(hooks) {
       setTableHeight(newHeight);
     };
     Object.assign(instance, {
-      tableHeight: tableHeight,
+      tableHeight: tableHeight || instance.tableHeight,
       rootRef: rootRef,
       headRef: headRef,
       innerListRef: innerListRef,

package/es/components/EditUpdateCards/EditUpdateCards.d.ts

@@ -1,7 +1,109 @@
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+type ActionIcon = {
+    id: string;
+    icon: CarbonIconType;
+    onKeyDown?(): void;
+    onClick?(): void;
+    iconDescription: string;
+    href?: string;
+};
+interface EditUpdateCardsProps {
+    /**
+     * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+     */
+    actionIcons?: Array<ActionIcon>;
+    /**
+     * Determines if the action icons are on the top or bottom of the card
+     */
+    actionsPlacement?: 'top' | 'bottom';
+    /**
+     * Optional label for the top of the card.
+     */
+    className?: string;
+    /**
+     * Optional header description
+     */
+    description?: string;
+    /**
+     * Edit mode children
+     */
+    editChildren?: ReactNode;
+    /**
+     * Edit mode
+     */
+    editMode?: boolean;
+    /**
+     * Optional label for the top of the card
+     */
+    label?: string;
+    /**
+     * Function that's called from the primary button or action icon
+     */
+    onPrimaryButtonClick?(): void;
+    /**
+     * Function that's called from the secondary button or action icon
+     */
+    onSecondaryButtonClick?(): void;
+    /**
+     * Preview mode children
+     */
+    previewChildren?: ReactNode;
+    /**
+     * Optional prop to allow overriding the icon rendering. Can be a React component class
+     */
+    primaryButtonIcon?: CarbonIconType;
+    /**
+     * Establishes the kind of button displayed for the primary button
+     */
+    primaryButtonKind?: 'primary' | 'ghost';
+    /**
+     * Determines if the primary button is on the top or bottom of the card
+     */
+    primaryButtonPlacement?: 'top' | 'bottom';
+    /**
+     * The text that's displayed in the primary button
+     */
+    primaryButtonText?: string;
+    /**
+     * Optionally specify an href for your Button to become an <a> element
+     */
+    secondaryButtonHref?: string;
+    /**
+     * Optional prop to allow overriding the icon rendering. Can be a React component class
+     */
+    secondaryButtonIcon?: CarbonIconType;
+    /**
+     * Establishes the kind of button displayed for the secondary button
+     */
+    secondaryButtonKind?: 'secondary' | 'ghost';
+    /**
+     * Determines if the secondary button is on the top or bottom of the card
+     */
+    secondaryButtonPlacement?: 'top' | 'bottom';
+    /**
+     * The text that's displayed in the secondary button
+     */
+    secondaryButtonText?: string;
+    /**
+     * Title that's displayed at the top of the card
+     */
+    title?: string;
+    /**
+     * Determines title size
+     */
+    titleSize?: 'default' | 'large';
+}
 /**
  Editable cards allow a user to view, modify, and save the content contained within the card.
  These cards are generally used in instances where a user needs to make changes to a resource instances
  (ex. configuration details), account plan, etc. Editable cards allow a user to edit something within context.
  */
-export let EditUpdateCards: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let EditUpdateCards: React.ForwardRefExoticComponent<EditUpdateCardsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/EditUpdateCards/EditUpdateCards.js

@@ -109,6 +109,7 @@ EditUpdateCards.propTypes = {
   /**
    * Icons that are displayed on card. Refer to design documentation for implementation guidelines
    */
+  /**@ts-ignore */
   actionIcons: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -156,6 +157,7 @@ EditUpdateCards.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Establishes the kind of button displayed for the primary button
@@ -176,6 +178,7 @@ EditUpdateCards.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Establishes the kind of button displayed for the secondary button

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

@@ -1,5 +1,64 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import { ButtonProps } from '@carbon/react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+interface NotificationsEmptyStateProps {
+    /**
+     * Empty state action button
+     */
+    action?: {
+        kind?: 'primary' | 'secondary' | 'tertiary';
+        renderIcon?: CarbonIconType;
+        onClick?: ButtonProps['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';
+    /**
+     * Empty state illustration theme variations.
+     * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
+     * based on your app's current theme value. Example:
+     * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
+     */
+    illustrationTheme?: 'light' | 'dark';
+    /**
+     * Empty state link object
+     */
+    link?: {
+        text?: string | ReactNode;
+        href?: string;
+    };
+    /**
+     * 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.
  */
-export let NotificationsEmptyState: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let NotificationsEmptyState: React.ForwardRefExoticComponent<NotificationsEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -17,11 +17,9 @@ import NotificationsIllustration from '../assets/NotificationsIllustration.js';
 import { defaults } from '../EmptyState.js';
 
 var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'NotificationsEmptyState';
-
 /**
  * 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.
  */
@@ -50,7 +48,7 @@ var NotificationsEmptyState = /*#__PURE__*/React__default.forwardRef(function (_
     link: link,
     size: size,
     subtitle: subtitle,
-    title: title
+    title: title || ''
   }));
 });
 

package/es/components/ExpressiveCard/ExpressiveCard.d.ts

@@ -1,2 +1,97 @@
-export let ExpressiveCard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
+type ActionIcon = {
+    id?: string;
+    icon?: () => void | object;
+    onKeydown?: () => void;
+    onClick?: () => void;
+    iconDescription?: string;
+    href?: string;
+};
+interface ExpressiveCardProps extends PropsWithChildren {
+    /**
+     * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
+     */
+    actionIcons?: ActionIcon[];
+    /**
+     * Content that shows in the body of the card
+     */
+    /**
+     * Optional user provided class
+     */
+    className?: string;
+    /**
+     * Optional header description
+     */
+    description?: string | object | ReactNode;
+    /**
+     * Optional label for the top of the card
+     */
+    label?: string | object | ReactNode;
+    /**
+     * Optional media content like an image to be placed in the card
+     */
+    media?: ReactNode;
+    /**
+     * Establishes the position of the media in the card
+     */
+    mediaPosition?: 'top' | 'left';
+    /**
+     * Provides the callback for a clickable card
+     */
+    onClick?: () => void;
+    /**
+     * Function that's called from the primary button or action icon
+     */
+    onPrimaryButtonClick?: () => void;
+    /**
+     * Function that's called from the secondary button
+     */
+    onSecondaryButtonClick?: () => void;
+    /**
+     * Provides the icon that's displayed at the top of the card
+     */
+    pictogram?: () => void | object;
+    /**
+     * Optionally specify an href for your Button to become an <a> element
+     */
+    primaryButtonHref?: string;
+    /**
+     * Optional prop to allow overriding the icon rendering. Can be a React component class
+     */
+    primaryButtonIcon?: () => void | object;
+    /**
+     * Establishes the kind of button displayed for the primary button
+     */
+    primaryButtonKind?: 'primary' | 'ghost';
+    /**
+     * The text that's displayed in the primary button
+     */
+    primaryButtonText?: string;
+    /**
+     * Optionally specify an href for your Button to become an <a> element
+     */
+    secondaryButtonHref?: string;
+    /**
+     * Optional prop to allow overriding the icon rendering. Can be a React component class
+     */
+    secondaryButtonIcon?: () => void | object;
+    /**
+     * Establishes the kind of button displayed for the secondary button
+     */
+    secondaryButtonKind?: 'secondary' | 'ghost';
+    /**
+     * The text that's displayed in the secondary button
+     */
+    secondaryButtonText?: string;
+    /**
+     * **Experimental:** For all cases a `Slug` component can be provided.
+     * Clickable tiles only accept a boolean value of true and display a hollow slug.
+     */
+    slug?: ReactNode | boolean;
+    /**
+     * Title that's displayed at the top of the card
+     */
+    title?: string | object | ReactNode;
+}
+export declare let ExpressiveCard: React.ForwardRefExoticComponent<ExpressiveCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/ExpressiveCard/ExpressiveCard.js

@@ -27,6 +27,7 @@ ExpressiveCard.propTypes = {
   /**
    * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
    */
+  /**@ts-ignore */
   actionIcons: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -74,6 +75,7 @@ ExpressiveCard.propTypes = {
   /**
    * Provides the icon that's displayed at the top of the card
    */
+  /**@ts-ignore */
   pictogram: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Optionally specify an href for your Button to become an <a> element
@@ -82,6 +84,7 @@ ExpressiveCard.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Establishes the kind of button displayed for the primary button
@@ -98,6 +101,7 @@ ExpressiveCard.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Establishes the kind of button displayed for the secondary button

package/es/components/InlineTip/InlineTipButton.d.ts

@@ -1,5 +1,24 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+interface InlineTipButtonProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide the contents of the InlineTip.
+     */
+    children: ReactNode;
+}
 /**
  * This is a standard Carbon button, styled specifically for use inside InlineTip.
  */
-export let InlineTipButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let InlineTipButton: React.ForwardRefExoticComponent<InlineTipButtonProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/es/components/InterstitialScreen/InterstitialScreen.d.ts

@@ -1,8 +1,106 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { PropsWithChildren, ReactNode } from 'react';
+type Media = {
+    breakpoints?: {
+        xlg?: number;
+        lg?: number;
+    };
+} & ({
+    render?: () => ReactNode;
+    filePaths?: never;
+} | {
+    render?: never;
+    filePaths?: string[];
+});
+interface InterstitialScreenProps extends PropsWithChildren {
+    /**
+     * Provide the contents of the InterstitialScreen.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * The domain this app belongs to, e.g. "IBM Cloud Pak".
+     */
+    domainName?: string;
+    /**
+     * Provide an optional class to be applied to the <header> element >.
+     */
+    headerClassName?: string;
+    /**
+     * Provide an optional class to be applied to the <header> element >.
+     */
+    headerTitle?: string;
+    /**
+     * Optional parameter to hide the progress indicator when multiple steps are used.
+     */
+    hideProgressIndicator?: boolean;
+    /**
+     * The aria label applied to the Interstitial Screen component
+     */
+    interstitialAriaLabel?: string;
+    /**
+     * Specifies whether the component is shown as a full-screen
+     * experience, else it is shown as a modal by default.
+     */
+    isFullScreen?: boolean;
+    /**
+     * Specifies whether the component is currently open.
+     */
+    isOpen?: boolean;
+    /**
+     * The object describing an image in one of two shapes.
+     *
+     * If a single media element is required, use `{render}`.
+     *
+     * If a stepped animation is required, use `{filePaths}`.
+     *
+     * Breakpoints are used to set the media content column size as well as the remainder for the main content areas column size.
+     * Medium and small breakpoints will be set to 0 internally to focus on the main content area.
+     * @see {@link MEDIA_PROP_TYPE}.
+     */
+    media?: Media;
+    /**
+     * The label for the Next button.
+     */
+    nextButtonLabel?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * The label for the Previous button.
+     */
+    previousButtonLabel?: string;
+    /**
+     * The name of this app, e.g. "QRadar".
+     */
+    productName?: string;
+    /**
+     * The label for the skip button.
+     */
+    skipButtonLabel?: string;
+    /**
+     * The label for the start button.
+     */
+    startButtonLabel?: string;
+}
 /**
  * InterstitialScreen can be a full page or an overlay, and are
  * shown on the first time a user accesses a new experience
  * (e.g. upon first login or first time opening a page where a
  * newly purchased capability is presented).
  */
-export let InterstitialScreen: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let InterstitialScreen: React.ForwardRefExoticComponent<InterstitialScreenProps & React.RefAttributes<HTMLDivElement>>;
+export {};