@carbon/react 1.70.0 → 1.71.0

package/es/components/FluidSelect/FluidSelect.d.ts

@@ -52,6 +52,10 @@ export interface FluidSelectProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidSelect: React.ForwardRefExoticComponent<FluidSelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default FluidSelect;

package/es/components/FluidSelect/FluidSelect.js

@@ -77,7 +77,11 @@ FluidSelect.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
 };
 
 export { FluidSelect as default };

package/es/components/FluidTextArea/FluidTextArea.d.ts

@@ -91,6 +91,10 @@ export interface FluidTextAreaProps {
      *  Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidTextArea: React.FC<FluidTextAreaProps>;
 export default FluidTextArea;

package/es/components/FluidTextArea/FluidTextArea.js

@@ -115,7 +115,11 @@ FluidTextArea.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
 };
 
 export { FluidTextArea as default };

package/es/components/FluidTextInput/FluidPasswordInput.d.ts

@@ -78,6 +78,10 @@ export interface FluidPasswordInputProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidPasswordInput: React.FC<FluidPasswordInputProps>;
 export default FluidPasswordInput;

package/es/components/FluidTextInput/FluidPasswordInput.js

@@ -83,5 +83,9 @@ import '../TextInput/PasswordInput.js';
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
 });

package/es/components/FluidTextInput/FluidTextInput.d.ts

@@ -65,6 +65,10 @@ export interface FluidTextInputProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Whether or not the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidTextInput: React.ForwardRefExoticComponent<FluidTextInputProps & React.RefAttributes<HTMLInputElement>>;
 export default FluidTextInput;

package/es/components/FluidTextInput/FluidTextInput.js

@@ -97,7 +97,11 @@ FluidTextInput.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
 };
 
 export { FluidTextInput as default };

package/es/components/FluidTimePicker/FluidTimePicker.d.ts

@@ -40,6 +40,10 @@ export interface FluidTimePickerProps extends FluidTextInputProps {
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Specify if the component is readonly
+     */
+    readOnly?: boolean;
 }
 declare const FluidTimePicker: React.ForwardRefExoticComponent<FluidTimePickerProps & React.RefAttributes<HTMLInputElement>>;
 export default FluidTimePicker;

package/es/components/FluidTimePicker/FluidTimePicker.js

@@ -24,6 +24,7 @@ const FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTim
     invalidText,
     warn,
     warnText,
+    readOnly,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -43,6 +44,19 @@ const FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTim
     }
   };
   const error = invalid || warn;
+  const childrenWithProps = () => {
+    if (disabled) {
+      return React__default.Children.toArray(children).map(child => /*#__PURE__*/React__default.cloneElement(child, {
+        disabled: true
+      }));
+    }
+    if (readOnly) {
+      return React__default.Children.toArray(children).map(child => /*#__PURE__*/React__default.cloneElement(child, {
+        readOnly: true
+      }));
+    }
+    return children;
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -50,12 +64,10 @@ const FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTim
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--time-picker__input`
   }, /*#__PURE__*/React__default.createElement(FluidTextInput, _extends({
-    ref: ref
-  }, other))), disabled ? React__default.Children.toArray(children).map(child => {
-    return /*#__PURE__*/React__default.cloneElement(child, {
-      disabled
-    });
-  }) : children), error && /*#__PURE__*/React__default.createElement("hr", {
+    ref: ref,
+    readOnly: readOnly,
+    disabled: disabled
+  }, other))), childrenWithProps()), error && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--time-picker__divider`
   }), error && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--form-requirement`
@@ -98,7 +110,11 @@ FluidTimePicker.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
 };
 
 export { FluidTimePicker as default };

package/es/components/IconButton/index.d.ts

@@ -8,11 +8,14 @@ import React, { ReactNode } from 'react';
 import { ButtonSize } from '../Button';
 export declare const IconButtonKinds: readonly ["primary", "secondary", "ghost", "tertiary"];
 export type IconButtonKind = (typeof IconButtonKinds)[number];
+export type DeprecatedIconButtonAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+export type NewIconButtonAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+export type IconButtonAlignment = DeprecatedIconButtonAlignment | NewIconButtonAlignment;
 interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Specify how the trigger should align with the tooltip
      */
-    align?: 'top' | 'top-left' | 'top-start' | 'top-right' | 'top-end' | 'bottom' | 'bottom-left' | 'bottom-start' | 'bottom-right' | 'bottom-end' | 'left' | 'right';
+    align?: IconButtonAlignment;
     /**
      * **Experimental**: Will attempt to automatically align the tooltip
      */

package/es/components/IconButton/index.js

@@ -13,8 +13,22 @@ import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import ButtonBase from '../Button/ButtonBase.js';
+import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    'top-left': 'top-start',
+    'top-right': 'top-end',
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end',
+    'left-bottom': 'left-end',
+    'left-top': 'left-start',
+    'right-bottom': 'right-end',
+    'right-top': 'right-start'
+  };
+  return mapping[deprecatedValue];
+};
 const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_ref, ref) {
   let {
     align,
@@ -60,7 +74,32 @@ IconButton.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes.oneOf(['top', 'top-left', 'top-start', 'top-right', 'top-end', 'bottom', 'bottom-left', 'bottom-start', 'bottom-right', 'bottom-end', 'left', 'right']),
+  align: deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  //allowed prop values
+  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+  //optional mapper function
+  propMappingFunction),
   /**
    * **Experimental**: Will attempt to automatically align the tooltip
    */

package/es/components/InlineCheckbox/InlineCheckbox.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export interface InlineCheckboxProps {
+    'aria-label': string;
+    /**
+     * Deprecated, please use `aria-label` instead.
+     * Specify the label for the control
+     */
+    ariaLabel?: string;
+    /**
+     * Specify whether the underlying control is checked,
+     * or not
+     * @default false
+     * */
+    checked?: boolean;
+    /**
+     * Specify whether the underlying input control should be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Provide an `id` for the underlying input control
+     */
+    id: string;
+    /**
+     * Specify whether the control is in an indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Provide a `name` for the underlying input control
+     */
+    name: string;
+    /**
+     * Provide an optional hook that is called each time the input is updated
+     */
+    onChange?: (checked: boolean, id: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Provide a handler that is invoked when a user clicks on the control
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Provide a handler that is invoked on the key down event for the control
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Provide an optional tooltip for the InlineCheckbox
+     */
+    title?: string;
+}
+declare const InlineCheckbox: React.ForwardRefExoticComponent<InlineCheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default InlineCheckbox;

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -11,7 +11,6 @@ import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
-/** @type any */
 const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineCheckbox(props, forwardRef) {
   const {
     ['aria-label']: ariaLabel,
@@ -48,15 +47,14 @@ const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineChe
   }
   useEffect(() => {
     if (inputRef?.current) {
-      inputRef.current.indeterminate = indeterminate;
+      inputRef.current.indeterminate = indeterminate || false;
     }
   }, [indeterminate]);
   function onClickCheckBoxInput(evt) {
-    // If the previous "indeterminate" is true, change "checked" to false. If it is not undefined, we're working on `TableSelectAll`
     if (indeterminate) {
       evt.target.checked = false;
     }
-    onClick(evt);
+    onClick?.(evt);
   }
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--checkbox--inline`
@@ -121,6 +119,5 @@ InlineCheckbox.propTypes = {
    */
   title: PropTypes.string
 };
-var InlineCheckbox$1 = InlineCheckbox;
 
-export { InlineCheckbox$1 as default };
+export { InlineCheckbox as default };

package/es/components/InlineCheckbox/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 InlineCheckbox, { type InlineCheckboxProps } from './InlineCheckbox';
+export default InlineCheckbox;
+export { InlineCheckbox, type InlineCheckboxProps };

package/es/components/LayoutDirection/LayoutDirection.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 PropTypes from 'prop-types';
+import { ElementType, ReactNode } from 'react';
+import { LayoutDirectionContext } from './LayoutDirectionContext';
+type Direction = 'ltr' | 'rtl';
+interface LayoutDirectionProps {
+    /**
+     * Customize the element type used to render the outermost node
+     */
+    as?: ElementType;
+    /**
+     * Provide child elements or components to be rendered inside of this
+     * component
+     */
+    children?: ReactNode;
+    /**
+     * Specify the layout direction of this part of the page
+     */
+    dir: Direction;
+}
+declare function LayoutDirection({ as: BaseComponent, children, dir, ...rest }: LayoutDirectionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LayoutDirection {
+    var propTypes: {
+        /**
+         * Customize the element type used to render the outermost node
+         */
+        as: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactComponentLike | null | undefined>>;
+        /**
+         * Provide child elements or components to be rendered inside of this
+         * component
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify the layout direction of this part of the page
+         */
+        dir: PropTypes.Validator<string>;
+    };
+}
+export { LayoutDirectionContext, LayoutDirection };

package/es/components/LayoutDirection/LayoutDirectionContext.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 from 'react';
+export declare const LayoutDirectionContext: React.Context<{
+    direction: string;
+}>;

package/es/components/LayoutDirection/useLayoutDirection.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Get access to the current layout direction in context
+ */
+export declare function useLayoutDirection(): {
+    direction: string;
+};

package/es/components/Menu/MenuItem.js

@@ -243,9 +243,6 @@ const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable(_
   });
   function handleClick(e) {
     setChecked(!checked);
-    if (onChange) {
-      onChange(e);
-    }
   }
   useEffect(() => {
     if (!context.state.hasIcons) {

package/es/components/Modal/Modal.d.ts

@@ -39,6 +39,10 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      * Specify whether the Modal is for dangerous actions
      */
     danger?: boolean;
+    /**
+     * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify whether the modal contains scrolling content
      */
@@ -151,6 +155,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      */
     size?: ModalSize;
     /**
+     * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
      */
     slug?: ReactNode;

package/es/components/Modal/Modal.js

@@ -27,6 +27,7 @@ import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
@@ -37,6 +38,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     'aria-label': ariaLabelProp,
     children,
     className,
+    decorator,
     modalHeading = '',
     modalLabel = '',
     modalAriaLabel,
@@ -143,7 +145,8 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': open,
     [`${prefix}--modal--danger`]: danger,
-    [`${prefix}--modal--slug`]: slug
+    [`${prefix}--modal--slug`]: slug,
+    [`${prefix}--modal--decorator`]: decorator
   }, className);
   const containerClasses = cx(`${prefix}--modal-container`, {
     [`${prefix}--modal-container--${size}`]: size,
@@ -227,10 +230,10 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     };
   }, []);
 
-  // Slug is always size `sm`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+  // AILabel always size `sm`
+  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
       size: 'sm'
     });
   }
@@ -267,7 +270,9 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     as: "h2",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
-  }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default.createElement(Layer, _extends({
+  }, modalHeading), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--modal--inner__decorator`
+  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default.createElement(Layer, _extends({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
@@ -348,6 +353,10 @@ Modal.propTypes = {
    * Specify whether the Modal is for dangerous actions
    */
   danger: PropTypes.bool,
+  /**
+   * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
+   */
+  decorator: PropTypes.node,
   /**
    * Specify whether the modal contains scrolling content
    */
@@ -478,10 +487,7 @@ Modal.propTypes = {
    * Specify the size variant.
    */
   size: PropTypes.oneOf(ModalSizes),
-  /**
-   * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
-   */
-  slug: PropTypes.node
+  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.')
 };
 
 export { ModalSizes, Modal as default };

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -61,7 +61,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      */
     filterItems(items: readonly ItemType[], extra: {
         inputValue: string | null;
-        itemToString: NonNullable<UseMultipleSelectionProps<ItemType>['itemToString']>;
+        itemToString: NonNullable<UseComboboxProps<ItemType>['itemToString']>;
     }): ItemType[];
     /**
      * Specify whether the title text should be hidden or not

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -264,7 +264,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     inputValue,
     stateReducer,
     isItemDisabled(item, _index) {
-      return item.disabled;
+      return item?.disabled;
     }
   });
   function stateReducer(state, actionAndChanges) {
@@ -381,7 +381,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     activeIndex: highlightedIndex,
     initialSelectedItems,
     selectedItems: controlledSelectedItems,
-    itemToString,
     onStateChange(changes) {
       switch (changes.type) {
         case SelectedItemKeyDownBackspace:

package/es/components/MultiSelect/MultiSelect.js

@@ -196,7 +196,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     selectedItem: controlledSelectedItems,
     items: filteredItems,
     isItemDisabled(item, _index) {
-      return item.disabled;
+      return item?.disabled;
     },
     ...downshiftProps
   };

package/es/components/Notification/Notification.d.ts

@@ -516,6 +516,13 @@ export declare namespace ActionableNotification {
  * Callout
  * ==================
  */
+/**
+ * Deprecated callout kind values.
+ * @deprecated Use NewKindProps instead.
+ */
+export type DeprecatedKindProps = 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
+export type NewKindProps = 'warning' | 'info';
+export type KindProps = DeprecatedKindProps | NewKindProps;
 export interface CalloutProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Pass in the action button label that will be rendered within the ActionableNotification.
@@ -532,7 +539,7 @@ export interface CalloutProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Specify what state the notification represents
      */
-    kind?: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
+    kind?: KindProps;
     /**
      * Specify whether you are using the low contrast variant of the Callout.
      */
@@ -576,7 +583,7 @@ export declare namespace Callout {
         /**
          * Specify what state the notification represents
          */
-        kind: PropTypes.Requireable<string>;
+        kind: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Specify whether you are using the low contrast variant of the Callout.
          */

package/es/components/Notification/Notification.js

@@ -22,6 +22,7 @@ import { noopFn } from '../../internal/noopFn.js';
 import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { warning } from '../../internal/warning.js';
+import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 import { Text } from '../Text/Text.js';
 import { match, matches } from '../../internal/keyboard/match.js';
 import { Tab, Escape } from '../../internal/keyboard/keys.js';
@@ -693,6 +694,19 @@ ActionableNotification.propTypes = {
  * ==================
  */
 
+/**
+ * Deprecated callout kind values.
+ * @deprecated Use NewKindProps instead.
+ */
+
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    error: 'warning',
+    // only redirect error -> warning
+    success: 'info' // only redirect success -> info
+  };
+  return mapping[deprecatedValue];
+};
 function Callout(_ref8) {
   let {
     actionButtonLabel,
@@ -703,7 +717,7 @@ function Callout(_ref8) {
     subtitle,
     statusIconDescription,
     className,
-    kind = 'error',
+    kind = 'info',
     lowContrast,
     ...rest
   } = _ref8;
@@ -759,7 +773,7 @@ Callout.propTypes = {
   /**
    * Specify what state the notification represents
    */
-  kind: PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']),
+  kind: deprecateValuesWithin(PropTypes.oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']), ['warning', 'info'], propMappingFunction),
   /**
    * Specify whether you are using the low contrast variant of the Callout.
    */

package/es/components/NumberInput/NumberInput.d.ts

@@ -24,6 +24,10 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify an optional className to be applied to the wrapper node
      */
     className?: string;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TextInput` component
+     */
+    decorator?: ReactNode;
     /**
      * Optional starting value for uncontrolled state
      */
@@ -113,6 +117,7 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     size?: 'sm' | 'md' | 'lg';
     /**
+     * @deprecated please use `decorator` instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
      */
     slug?: ReactNode;