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

package/es/components/EditInPlace/EditInPlace.d.ts

@@ -1,6 +1,98 @@
-export let EditInPlace: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export namespace deprecatedProps {
-    let invalidText: PropTypes.Requireable<string>;
-}
-import React from 'react';
+/**
+ * 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, { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
+type Size = 'sm' | 'md' | 'lg';
+type AlignPropType = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+type Shape = {
+    cancel: AlignPropType;
+    edit: AlignPropType;
+    save: AlignPropType;
+};
+interface EditInplaceProps extends PropsWithChildren {
+    /**
+     * label for cancel button
+     */
+    cancelLabel: string;
+    /**
+     * By default the edit icon is shown on hover only.
+     */
+    editAlwaysVisible?: boolean;
+    /**
+     * label for edit button
+     */
+    editLabel: string;
+    /**
+     * Specify a custom id for the input
+     */
+    id: string;
+    /**
+     * inheritTypography - causes the text entry field to inherit typography settings
+     * assigned to the container. This is useful when editing titles for instance.
+     *
+     * NOTE: The size property limits the vertical size of the input element.
+     * Inherited font's should be selected to fit within the size selected.
+     */
+    inheritTypography?: boolean;
+    /**
+     * determines if the input is invalid
+     */
+    invalid?: boolean;
+    /**
+     * text that is displayed if the input is invalid
+     */
+    invalidText?: string;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this control
+     */
+    labelText: string;
+    /**
+     * handler that is called when the cancel button is pressed or when the user removes focus from the input and there is no new value
+     */
+    onCancel: (value: string) => void;
+    /**
+     * handler that is called when the input is updated
+     */
+    onChange: (value: string) => void;
+    /**
+     * handler that is called when the save button is pressed or when the user removes focus from the input if it has a new value
+     */
+    onSave: () => void;
+    /**
+     * determines if the input is in readOnly mode
+     */
+    /**
+     * label for the edit button that displays when in read only mode
+     */
+    /**
+     * label for save button
+     */
+    saveLabel: string;
+    /**
+     * vertical size of control
+     */
+    size?: Size;
+    /**
+     * tooltipAlignment from the standard tooltip. Default center.
+     *
+     * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
+     */
+    tooltipAlignment?: AlignPropType | Shape;
+    /**
+     * current value of the input
+     */
+    value: string;
+}
+export declare let EditInPlace: React.ForwardRefExoticComponent<EditInplaceProps & React.RefAttributes<HTMLDivElement>>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     * invalidLabel was misnamed, using invalidText to match Carbon
+     */
+    invalidText: PropTypes.Requireable<string>;
+};
+export {};

package/es/components/EditInPlace/EditInPlace.js

@@ -29,7 +29,8 @@ var EditInPlace = /*#__PURE__*/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,
@@ -37,7 +38,7 @@ var EditInPlace = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
@@ -85,7 +86,8 @@ var EditInPlace = /*#__PURE__*/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);
     }
   };
@@ -122,15 +124,16 @@ var EditInPlace = /*#__PURE__*/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;
     }
@@ -219,7 +222,6 @@ EditInPlace.propTypes = _objectSpread2({
    * By default the edit icon is shown on hover only.
    */
   editAlwaysVisible: PropTypes.bool,
-  /**
   /**
    * label for edit button
    */
@@ -243,6 +245,7 @@ EditInPlace.propTypes = _objectSpread2({
   /**
    * text that is displayed if the input is invalid
    */
+  /**@ts-ignore*/
   invalidText: PropTypes.string,
   /**
    * Provide the text that will be read by a screen reader when visiting this control
@@ -281,6 +284,7 @@ EditInPlace.propTypes = _objectSpread2({
    *
    * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
    */
+  /**@ts-ignore*/
   tooltipAlignment: PropTypes.oneOfType([alignPropType, PropTypes.shape({
     cancel: alignPropType,
     edit: alignPropType,

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/NoTagsEmptyState/NoTagsEmptyState.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 NoTagsEmptyStateProps {
+    /**
+     * 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 NoTagsEmptyState: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let NoTagsEmptyState: React.ForwardRefExoticComponent<NoTagsEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -17,11 +17,9 @@ import NoTagsIllustration from '../assets/NoTagsIllustration.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 = 'NoTagsEmptyState';
-
 /**
  * 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 NoTagsEmptyState = /*#__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/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.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 UnauthorizedEmptyStateProps {
+    /**
+     * 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 UnauthorizedEmptyState: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let UnauthorizedEmptyState: React.ForwardRefExoticComponent<UnauthorizedEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.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 = 'UnauthorizedEmptyState';
-
 /**
  * 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 UnauthorizedEmptyState = /*#__PURE__*/React__default.forwardRef(function (_r
     link: link,
     size: size,
     subtitle: subtitle,
-    title: title
+    title: title || ''
   }));
 });