@carbon/ibm-products 2.33.0 → 2.35.0

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

@@ -24,12 +24,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.
  */
@@ -44,13 +38,13 @@ var EditSidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     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,
@@ -59,7 +53,7 @@ var EditSidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     label: primaryButtonText,
     onClick: function onClick(event) {
       event.preventDefault();
-      onRequestSubmit();
+      onRequestSubmit && onRequestSubmit();
     },
     kind: 'primary',
     disabled: disableSubmit,
@@ -112,6 +106,7 @@ EditSidePanel.propTypes = {
   /**
    * Sets the body content of the create side panel
    */
+  /**@ts-ignore*/
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
@@ -147,7 +142,7 @@ EditSidePanel.propTypes = {
   /**
    * Specifies whether the CreateSidePanel is open or not.
    */
-  open: PropTypes.bool,
+  open: PropTypes.bool.isRequired,
   /**
    * Determines if the side panel is on the right or left
    */
@@ -164,6 +159,7 @@ 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: PropTypes.string.isRequired.if(function (_ref2) {
     var slideIn = _ref2.slideIn;
     return slideIn;
@@ -171,6 +167,7 @@ EditSidePanel.propTypes = {
   /**
    * Specifies which DOM element in the form should be focused.
    */
+  /**@ts-ignore*/
   selectorPrimaryFocus: PropTypes.node.isRequired,
   /**
    * Sets the size of the side panel
@@ -191,6 +188,7 @@ EditSidePanel.propTypes = {
   /**
    * The title of the CreateSidePanel is usually the product or service name.
    */
+  /**@ts-ignore*/
   title: PropTypes.node.isRequired
 };
 

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

@@ -17,11 +17,9 @@ import ErrorIllustration from '../assets/ErrorIllustration.js';
 import { defaults } from '../EmptyState.js';
 
 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(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.
  */
@@ -50,7 +48,7 @@ var ErrorEmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     link: link,
     size: size,
     subtitle: subtitle,
-    title: title
+    title: title || ''
   }));
 });
 

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

@@ -21,7 +21,6 @@ var _excluded = ["action", "className", "illustrationPosition", "illustrationThe
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(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.
  */
@@ -50,7 +49,7 @@ var NoDataEmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     link: link,
     size: size,
     subtitle: subtitle,
-    title: title
+    title: title || ''
   }));
 });
 

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

@@ -17,11 +17,9 @@ import NotFoundIllustration from '../assets/NotFoundIllustration.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 = '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.
  */
@@ -50,7 +48,7 @@ var NotFoundEmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref,
     link: link,
     size: size,
     subtitle: subtitle,
-    title: title
+    title: title || ''
   }));
 });
 

package/es/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 {};

package/es/components/ExportModal/ExportModal.js

@@ -26,7 +26,6 @@ var defaults = {
   preformattedExtensions: Object.freeze([]),
   validExtensions: Object.freeze([])
 };
-
 /**
  * Modal dialog version of the export pattern
  */
@@ -39,7 +38,7 @@ var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hidePasswordLabel = _ref.hidePasswordLabel,
     inputLabel = _ref.inputLabel,
     _ref$inputType = _ref.inputType,
-    inputType = _ref$inputType === void 0 ? defaults.inputType : _ref$inputType,
+    inputType = _ref$inputType === void 0 ? 'text' : _ref$inputType,
     invalidInputText = _ref.invalidInputText,
     loading = _ref.loading,
     loadingMessage = _ref.loadingMessage,
@@ -76,7 +75,10 @@ var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useEffect(function () {
     var _preformattedExtensio;
     setName(filename);
-    setExtension(preformattedExtensions === null || preformattedExtensions === void 0 || (_preformattedExtensio = preformattedExtensions[0]) === null || _preformattedExtensio === void 0 ? void 0 : _preformattedExtensio.extension);
+    if (preformattedExtensions && preformattedExtensions.length > 0 && (_preformattedExtensio = preformattedExtensions[0]) !== null && _preformattedExtensio !== void 0 && _preformattedExtensio.extension) {
+      var _preformattedExtensio2;
+      setExtension(preformattedExtensions === null || preformattedExtensions === void 0 || (_preformattedExtensio2 = preformattedExtensions[0]) === null || _preformattedExtensio2 === void 0 ? void 0 : _preformattedExtensio2.extension);
+    }
   }, [filename, preformattedExtensions, open]);
   var onNameChangeHandler = function onNameChangeHandler(evt) {
     setName(evt.target.value);
@@ -89,7 +91,7 @@ var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   var onSubmitHandler = function onSubmitHandler() {
     var returnName = extension ? "".concat(filename, ".").concat(extension.toLocaleLowerCase()) : name;
-    onRequestSubmit(returnName);
+    onRequestSubmit && onRequestSubmit(returnName);
   };
   var hasInvalidExtension = function hasInvalidExtension() {
     if (!dirtyInput || !validExtensions || !validExtensions.length) {
@@ -186,6 +188,7 @@ ExportModal.propTypes = {
   /**
    * Body content for the modal
    */
+  /**@ts-ignore*/
   body: PropTypes.string,
   /**
    * Optional class name
@@ -214,6 +217,7 @@ ExportModal.propTypes = {
   /**
    * specify the type of text input
    */
+  /**@ts-ignore */
   inputType: PropTypes.oneOf(['text', 'password']),
   /**
    * text for an invalid input
@@ -246,6 +250,7 @@ ExportModal.propTypes = {
   /**
    * Array of extensions to display as radio buttons
    */
+  /**@ts-ignore */
   preformattedExtensions: PropTypes.arrayOf(PropTypes.shape({
     extension: PropTypes.string,
     description: PropTypes.string
@@ -281,6 +286,7 @@ ExportModal.propTypes = {
   /**
    * array of valid extensions the file can have
    */
+  /**@ts-ignore */
   validExtensions: PropTypes.array
 };
 ExportModal.displayName = componentName;

package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A container with a label and optional count.
+ */
+export let FilterPanelAccordion: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';