@carbon/ibm-products 2.33.0 → 2.35.0

package/lib/components/EditInPlace/EditInPlace.js

@@ -38,7 +38,8 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     id = _ref.id,
     inheritTypography = _ref.inheritTypography,
     invalid = _ref.invalid,
-    deprecated_invalidLabel = _ref.invalidLabel,
+    _ref$invalidLabel = _ref.invalidLabel,
+    deprecated_invalidLabel = _ref$invalidLabel === void 0 ? ' ' : _ref$invalidLabel,
     invalidText = _ref.invalidText,
     labelText = _ref.labelText,
     onCancel = _ref.onCancel,
@@ -46,7 +47,7 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onSave = _ref.onSave,
     saveLabel = _ref.saveLabel,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
     tooltipAlignment = _ref.tooltipAlignment,
     value = _ref.value,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -94,7 +95,8 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // }
 
     if (!isTargetingChild(e)) {
-      inputRef.current.focus();
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
       setFocused(true);
     }
   };
@@ -131,15 +133,16 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onCancelHandler();
   };
   var onKeyHandler = function onKeyHandler(e) {
+    var _inputRef$current2, _inputRef$current3;
     // to prevent blur handler from being called twice add additional state to check if escape is being used
     escaping.current = true;
     switch (e.key) {
       case 'Escape':
-        inputRef.current.blur();
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
         escapeHandler();
         break;
       case 'Enter':
-        inputRef.current.blur();
+        (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.blur();
         returnHandler();
         break;
     }
@@ -228,7 +231,6 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * By default the edit icon is shown on hover only.
    */
   editAlwaysVisible: index["default"].bool,
-  /**
   /**
    * label for edit button
    */
@@ -252,6 +254,7 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * text that is displayed if the input is invalid
    */
+  /**@ts-ignore*/
   invalidText: index["default"].string,
   /**
    * Provide the text that will be read by a screen reader when visiting this control
@@ -290,6 +293,7 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *
    * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
    */
+  /**@ts-ignore*/
   tooltipAlignment: index["default"].oneOfType([alignPropType, index["default"].shape({
     cancel: alignPropType,
     edit: alignPropType,

package/lib/components/EditSidePanel/EditSidePanel.d.ts

@@ -1,5 +1,95 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * 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 '../../global/js/utils/props-helper';
+interface EditSidePanelProps {
+    /**
+     * Sets the body content of the create side panel
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+     * Returning `true` prevents the primary button from being clicked until required fields are completed.
+     */
+    disableSubmit?: boolean;
+    /**
+     * Specifies an optional field that provides a additional context for a form
+     */
+    formDescription?: ReactNode;
+    /**
+     * Specifies a required field that provides a title for a form
+     */
+    formTitle: ReactNode;
+    /**
+     * Unique identifier
+     */
+    id?: string;
+    /**
+     * Specifies an optional handler which is called when the CreateSidePanel
+     * is closed.
+     */
+    onRequestClose?: () => void;
+    /**
+     * Specifies an optional handler which is called when the CreateSidePanel
+     * primary button is pressed.
+     */
+    onRequestSubmit?: () => void;
+    /**
+     * Specifies whether the CreateSidePanel is open or not.
+     */
+    open: boolean;
+    /**
+     * Determines if the side panel is on the right or left
+     */
+    placement?: 'left' | 'right';
+    /**
+     * Specifies the primary button's text in the modal.
+     */
+    primaryButtonText: string;
+    /**
+     * Specifies the secondary button's text in the modal.
+     */
+    secondaryButtonText: string;
+    /**
+     * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
+     * This prop is required when using the `slideIn` variant of the side panel.
+     */
+    selectorPageContent?: string;
+    /**
+     * Specifies which DOM element in the form should be focused.
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Sets the size of the side panel
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | '2xl';
+    /**
+     * Specifies which DOM element in the form should be focused.
+     */
+    slideIn?: boolean;
+    /**
+     *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+     */
+    slug?: ReactNode;
+    /**
+     * The subtitle of the CreateSidePanel is optional and serves to provide more information about the modal.
+     */
+    subtitle?: ReactNode;
+    /**
+     * The title of the CreateSidePanel is usually the product or service name.
+     */
+    title: string;
+}
 /**
  * Use with medium complexity edits if the user needs page context.
  */
-export let EditSidePanel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let EditSidePanel: React.ForwardRefExoticComponent<EditSidePanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/EditSidePanel/EditSidePanel.js

@@ -33,12 +33,6 @@ var componentName = 'EditSidePanel';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values for props
-var defaults = {
-  placement: 'right',
-  size: 'md'
-};
-
 /**
  * Use with medium complexity edits if the user needs page context.
  */
@@ -53,13 +47,13 @@ exports.EditSidePanel = /*#__PURE__*/React__default["default"].forwardRef(functi
     onRequestSubmit = _ref.onRequestSubmit,
     open = _ref.open,
     _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? defaults.placement : _ref$placement,
+    placement = _ref$placement === void 0 ? 'right' : _ref$placement,
     primaryButtonText = _ref.primaryButtonText,
     secondaryButtonText = _ref.secondaryButtonText,
     selectorPrimaryFocus = _ref.selectorPrimaryFocus,
     selectorPageContent = _ref.selectorPageContent,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
     slideIn = _ref.slideIn,
     subtitle = _ref.subtitle,
     title = _ref.title,
@@ -68,7 +62,7 @@ exports.EditSidePanel = /*#__PURE__*/React__default["default"].forwardRef(functi
     label: primaryButtonText,
     onClick: function onClick(event) {
       event.preventDefault();
-      onRequestSubmit();
+      onRequestSubmit && onRequestSubmit();
     },
     kind: 'primary',
     disabled: disableSubmit,
@@ -121,6 +115,7 @@ exports.EditSidePanel.propTypes = {
   /**
    * Sets the body content of the create side panel
    */
+  /**@ts-ignore*/
   children: index["default"].oneOfType([index["default"].arrayOf(index["default"].node), index["default"].node]).isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
@@ -156,7 +151,7 @@ exports.EditSidePanel.propTypes = {
   /**
    * Specifies whether the CreateSidePanel is open or not.
    */
-  open: index["default"].bool,
+  open: index["default"].bool.isRequired,
   /**
    * Determines if the side panel is on the right or left
    */
@@ -173,6 +168,7 @@ exports.EditSidePanel.propTypes = {
    * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
    * This prop is required when using the `slideIn` variant of the side panel.
    */
+  /**@ts-ignore*/
   selectorPageContent: index["default"].string.isRequired.if(function (_ref2) {
     var slideIn = _ref2.slideIn;
     return slideIn;
@@ -180,6 +176,7 @@ exports.EditSidePanel.propTypes = {
   /**
    * Specifies which DOM element in the form should be focused.
    */
+  /**@ts-ignore*/
   selectorPrimaryFocus: index["default"].node.isRequired,
   /**
    * Sets the size of the side panel
@@ -200,5 +197,6 @@ exports.EditSidePanel.propTypes = {
   /**
    * The title of the CreateSidePanel is usually the product or service name.
    */
+  /**@ts-ignore*/
   title: index["default"].node.isRequired
 };

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.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 ErrorEmptyStateProps {
+    /**
+     * 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?: 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.
  */
-export let ErrorEmptyState: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let ErrorEmptyState: React.ForwardRefExoticComponent<ErrorEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -26,11 +26,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["action", "className", "illustrationPosition", "illustrationDescription", "illustrationTheme", "link", "size", "subtitle", "title"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
 var componentName = 'ErrorEmptyState';
-
 /**
  * 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.
  */
@@ -59,7 +57,7 @@ exports.ErrorEmptyState = /*#__PURE__*/React__default["default"].forwardRef(func
     link: link,
     size: size,
     subtitle: subtitle,
-    title: title
+    title: title || ''
   }));
 });
 

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

@@ -1,5 +1,64 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 NoDataEmptyStateProps {
+    /**
+     * 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?: 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.
  */
-export let NoDataEmptyState: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let NoDataEmptyState: React.ForwardRefExoticComponent<NoDataEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -30,7 +30,6 @@ var _excluded = ["action", "className", "illustrationPosition", "illustrationThe
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--empty-state");
 var componentName = 'NoDataEmptyState';
-
 /**
  * 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.
  */
@@ -59,7 +58,7 @@ exports.NoDataEmptyState = /*#__PURE__*/React__default["default"].forwardRef(fun
     link: link,
     size: size,
     subtitle: subtitle,
-    title: title
+    title: title || ''
   }));
 });
 

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.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 NotFoundEmptyStateProps {
+    /**
+     * 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: 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.
  */
-export let NotFoundEmptyState: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let NotFoundEmptyState: React.ForwardRefExoticComponent<NotFoundEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -26,11 +26,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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(settings.pkg.prefix, "--empty-state");
 var componentName = 'NotFoundEmptyState';
-
 /**
  * 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.
  */
@@ -59,7 +57,7 @@ exports.NotFoundEmptyState = /*#__PURE__*/React__default["default"].forwardRef(f
     link: link,
     size: size,
     subtitle: subtitle,
-    title: title
+    title: title || ''
   }));
 });
 

package/lib/components/ExportModal/ExportModal.d.ts

@@ -1,5 +1,113 @@
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import { ComposedModal } from '@carbon/react';
+type InputType = 'text' | 'password';
+type PreformattedExtensions = {
+    extension?: string;
+    description?: string;
+};
+interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
+    /**
+     * Body content for the modal
+     */
+    body?: string;
+    /**
+     * Optional class name
+     */
+    className?: string;
+    /**
+     * specify if an error occurred
+     */
+    error?: boolean;
+    /**
+     * messaging to display in the event of an error
+     */
+    errorMessage?: string;
+    /**
+     * name of the file being exported
+     */
+    filename: string;
+    /**
+     * label text that's displayed when hovering over visibility toggler to hide key
+     */
+    hidePasswordLabel?: string;
+    /**
+     * label for the text input
+     */
+    inputLabel?: string;
+    /**
+     * specify the type of text input
+     */
+    inputType: InputType;
+    /**
+     * text for an invalid input
+     */
+    invalidInputText?: string;
+    /**
+     * specify if the modal is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * message to display during the loading state
+     */
+    loadingMessage?: string;
+    /**
+     * Specify a handler for closing modal
+     */
+    onClose?: () => void;
+    /**
+     * Specify a handler for "submitting" modal. Returns the file name
+     */
+    onRequestSubmit?: (value?: string) => void;
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open?: boolean;
+    /**
+     * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    /**
+     * Array of extensions to display as radio buttons
+     */
+    preformattedExtensions: readonly PreformattedExtensions[];
+    /**
+     * Label for the preformatted label form group
+     */
+    preformattedExtensionsLabel?: string;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText: string;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText: string;
+    /**
+     * label text that's displayed when hovering over visibility toggler to show key
+     */
+    showPasswordLabel?: string;
+    /**
+     * messaging to display if the export was successful
+     */
+    successMessage?: string;
+    /**
+     * specify if the export was successful
+     */
+    successful?: boolean;
+    /**
+     * The text displayed at the top of the modal
+     */
+    title: string;
+    /**
+     * array of valid extensions the file can have
+     */
+    validExtensions: readonly any[];
+}
 /**
  * Modal dialog version of the export pattern
  */
-export let ExportModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let ExportModal: React.ForwardRefExoticComponent<RemoveModalProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+export {};