@carbon/react 1.44.0 → 1.45.0

package/es/components/Layer/index.js

@@ -11,9 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { LayerContext } from './LayerContext.js';
-
-const levels = ['one', 'two', 'three'];
-const MAX_LEVEL = levels.length - 1;
+import { levels, MIN_LEVEL, MAX_LEVEL } from './LayerLevel.js';
 
 /**
  * A custom hook that will return information about the current layer. A common
@@ -26,9 +24,9 @@ function useLayer() {
     level
   };
 }
-const Layer = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
+const LayerRenderFunction = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
   let {
-    as: BaseComponent = 'div',
+    as = 'div',
     className: customClassName,
     children,
     level: overrideLevel,
@@ -38,8 +36,9 @@ const Layer = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix();
   const className = cx(`${prefix}--layer-${levels[level]}`, customClassName);
-  // The level should be between 0 and MAX_LEVEL
-  const value = Math.max(0, Math.min(level + 1, MAX_LEVEL));
+  // The level should be between MIN_LEVEL and MAX_LEVEL
+  const value = Math.max(MIN_LEVEL, Math.min(level + 1, MAX_LEVEL));
+  const BaseComponent = as;
   return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
@@ -48,7 +47,8 @@ const Layer = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
     className: className
   }), children));
 });
-Layer.propTypes = {
+LayerRenderFunction.displayName = 'Layer';
+LayerRenderFunction.propTypes = {
   /**
    * Specify a custom component or element to be rendered as the top-level
    * element in the component
@@ -68,5 +68,6 @@ Layer.propTypes = {
    */
   level: PropTypes.oneOf([0, 1, 2])
 };
+const Layer = LayerRenderFunction;
 
 export { Layer, useLayer };

package/es/components/Menu/MenuItem.js

@@ -169,7 +169,8 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     className: `${prefix}--menu-item__icon`
   }, iconsAllowed && IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
-    className: `${prefix}--menu-item__label`
+    className: `${prefix}--menu-item__label`,
+    title: label
   }, label), shortcut && !hasChildren && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__shortcut`
   }, shortcut), hasChildren && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {

package/es/components/MenuButton/index.js

@@ -18,7 +18,7 @@ import { useId } from '../../internal/useId.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const spacing = 4; // top and bottom spacing between the button and the menu. in px
+const spacing = 0; // top and bottom spacing between the button and the menu. in px
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
 const defaultButtonKind = 'primary';
 const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_ref, forwardRef) {

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

@@ -6,6 +6,7 @@
  */
 import React from 'react';
 import { ReactAttr } from '../../types/common';
+import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
 export type ModalSize = (typeof ModalSizes)[number];
 export interface ModalSecondaryButton {
@@ -65,7 +66,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
     /**
      * Specify loading status
      */
-    loadingStatus?: string;
+    loadingStatus?: InlineLoadingStatus;
     /**
      * Specify a label to be read by screen readers on the modal root node
      */
@@ -87,7 +88,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      * Specify an optional handler to be invoked when loading is
      * successful
      */
-    onLoadingSuccess?: React.ReactEventHandler<HTMLElement>;
+    onLoadingSuccess?: () => void;
     /**
      * Specify a handler for closing modal.
      * The handler should care of closing modal, e.g. changing `open` prop.

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -193,7 +193,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });
@@ -545,7 +545,7 @@ FilterableMultiSelect.propTypes = {
    */
   size: ListBoxSize,
   /**
-   * Provide a `Slug` component to be rendered inside the `FilterableMultiSelect` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `FilterableMultiSelect` component
    */
   slug: PropTypes.node,
   ...sortingPropTypes,

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

@@ -164,7 +164,7 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     size?: ListBoxSize;
     /**
-     * Provide a `Slug` component to be rendered inside the `MultiSelect` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `MultiSelect` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/MultiSelect/MultiSelect.js

@@ -237,6 +237,9 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         if (changes.selectedItem === undefined) {
           break;
         }
+        if (Array.isArray(changes.selectedItem)) {
+          break;
+        }
         onItemChange(changes.selectedItem);
         return {
           ...changes,
@@ -298,7 +301,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });
@@ -507,7 +510,7 @@ MultiSelect.propTypes = {
    */
   size: ListBoxSize,
   /**
-   * Provide a `Slug` component to be rendered inside the `MultiSelect` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `MultiSelect` component
    */
   slug: PropTypes.node,
   /**

package/es/components/Notification/Notification.js

@@ -584,6 +584,7 @@ function ActionableNotification(_ref6) {
     className: `${prefix}--actionable-notification__subtitle`,
     id: subtitleId
   }, subtitle), children))), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--actionable-notification__button-wrapper`,
     ref: innerModal
   }, actionButtonLabel && /*#__PURE__*/React__default.createElement(NotificationActionButton, {
     onClick: onActionButtonClick,

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

@@ -109,7 +109,7 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * Provide a `Slug` component to be rendered inside the `TextInput` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/NumberInput/NumberInput.js

@@ -172,7 +172,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });
@@ -180,7 +180,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
 
   // Need to update the internal value when the revert button is clicked
   let isRevertActive;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     isRevertActive = normalizedSlug.props.revertActive;
   }
   useEffect(() => {
@@ -360,7 +360,7 @@ NumberInput.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
-   * Provide a `Slug` component to be rendered inside the `NumberInput` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `NumberInput` component
    */
   slug: PropTypes.node,
   /**

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -51,6 +51,10 @@ function ProgressIndicator(_ref) {
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     className: className
   }, rest), React__default.Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/React__default.isValidElement(child)) {
+      return null;
+    }
+
     // only setup click handlers if onChange event is passed
     const onClick = onChange ? () => onChange(index) : undefined;
     if (index === currentIndex) {

package/es/components/RadioButton/RadioButton.d.ts

@@ -56,7 +56,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
     /**
-     * Provide a `Slug` component to be rendered inside the `RadioButton` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/RadioButton/RadioButton.js

@@ -120,7 +120,7 @@ RadioButton.propTypes = {
    */
   onClick: PropTypes.func,
   /**
-   * Provide a `Slug` component to be rendered inside the `RadioButton` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
    */
   slug: PropTypes.node,
   /**

package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -64,7 +64,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      */
     readOnly?: boolean;
     /**
-     * Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -104,7 +104,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini',
       kind: 'default'
@@ -188,7 +188,7 @@ RadioButtonGroup.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
    */
   slug: PropTypes.node,
   /**

package/es/components/Select/Select.d.ts

@@ -78,7 +78,7 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * Provide a `Slug` component to be rendered inside the `Dropdown` component
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
      */
     slug?: ReactNodeLike;
     /**

package/es/components/Select/Select.js

@@ -128,7 +128,7 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });
@@ -245,7 +245,7 @@ Select.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
-   * Provide a `Slug` component to be rendered inside the `Select` component
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Select` component
    */
   slug: PropTypes.node,
   /**

package/es/components/Slider/Slider.Skeleton.js

@@ -10,7 +10,9 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { LowerHandle, UpperHandle } from './SliderHandles.js';
 
+var _LowerHandle, _UpperHandle, _UpperHandle2, _LowerHandle2;
 const SliderSkeleton = _ref => {
   let {
     hideLabel,
@@ -19,8 +21,10 @@ const SliderSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
+  const isRtl = document?.dir === 'rtl';
   const containerClasses = cx(`${prefix}--slider-container`, `${prefix}--skeleton`, {
-    [`${prefix}--slider-container--two-handles`]: twoHandles
+    [`${prefix}--slider-container--two-handles`]: twoHandles,
+    [`${prefix}--slider-container--rtl`]: isRtl
   });
   const lowerThumbClasses = cx(`${prefix}--slider__thumb`, {
     [`${prefix}--slider__thumb--lower`]: twoHandles
@@ -28,6 +32,12 @@ const SliderSkeleton = _ref => {
   const upperThumbClasses = cx(`${prefix}--slider__thumb`, {
     [`${prefix}--slider__thumb--upper`]: twoHandles
   });
+  const lowerThumbWrapperClasses = cx(`${prefix}--slider__thumb-wrapper`, {
+    [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles
+  });
+  const upperThumbWrapperClasses = cx(`${prefix}--slider__thumb-wrapper`, {
+    [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles
+  });
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, className)
   }, rest), !hideLabel && /*#__PURE__*/React__default.createElement("span", {
@@ -43,10 +53,14 @@ const SliderSkeleton = _ref => {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--slider__filled-track`
   }), /*#__PURE__*/React__default.createElement("div", {
+    className: lowerThumbWrapperClasses
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: lowerThumbClasses
-  }), twoHandles ? /*#__PURE__*/React__default.createElement("div", {
+  }, twoHandles && !isRtl ? _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default.createElement(LowerHandle, null)) : twoHandles && isRtl ? _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default.createElement(UpperHandle, null)) : undefined)), twoHandles ? /*#__PURE__*/React__default.createElement("div", {
+    className: upperThumbWrapperClasses
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: upperThumbClasses
-  }) : undefined), /*#__PURE__*/React__default.createElement("span", {
+  }, twoHandles && !isRtl ? _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default.createElement(UpperHandle, null)) : twoHandles && isRtl ? _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default.createElement(LowerHandle, null)) : undefined)) : undefined), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--slider__range-label`
   })));
 };