@carbon/react 1.44.0 → 1.45.0

package/lib/components/Layer/LayerLevel.d.ts

@@ -0,0 +1,5 @@
+export declare const levels: readonly ["one", "two", "three"];
+export declare const MIN_LEVEL = 0;
+export declare const MAX_LEVEL: number;
+export declare const LayerLevels: readonly [0, 1, 2];
+export type LayerLevel = (typeof LayerLevels)[number];

package/lib/components/Layer/LayerLevel.js

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const levels = ['one', 'two', 'three'];
+const MIN_LEVEL = 0;
+const MAX_LEVEL = levels.length - 1;
+
+exports.MAX_LEVEL = MAX_LEVEL;
+exports.MIN_LEVEL = MIN_LEVEL;
+exports.levels = levels;

package/lib/components/Layer/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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';
+import { LayerLevel } from './LayerLevel';
+import { PolymorphicProps } from '../../types/common';
+/**
+ * A custom hook that will return information about the current layer. A common
+ * field to pull from this is the `level` for the layer that the component that
+ * calls this hook is currently in
+ */
+export declare function useLayer(): {
+    level: 0 | 1 | 2;
+};
+interface LayerBaseProps {
+    /**
+     * Provide child elements to be rendered inside of `Theme`
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom class name to be used on the outermost element rendered by
+     * the component
+     */
+    className?: string;
+    /**
+     * Specify the layer level and override any existing levels based on hierarchy
+     */
+    level?: LayerLevel;
+}
+export type LayerProps<T extends React.ElementType> = PolymorphicProps<T, LayerBaseProps>;
+export interface LayerComponent {
+    <T extends React.ElementType>(props: LayerProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+export declare const Layer: LayerComponent;
+export {};

package/lib/components/Layer/index.js

@@ -15,6 +15,7 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var LayerContext = require('./LayerContext.js');
+var LayerLevel = require('./LayerLevel.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,9 +23,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const levels = ['one', 'two', 'three'];
-const MAX_LEVEL = levels.length - 1;
-
 /**
  * A custom hook that will return information about the current layer. A common
  * field to pull from this is the `level` for the layer that the component that
@@ -36,9 +34,9 @@ function useLayer() {
     level
   };
 }
-const Layer = /*#__PURE__*/React__default["default"].forwardRef(function Layer(_ref, ref) {
+const LayerRenderFunction = /*#__PURE__*/React__default["default"].forwardRef(function Layer(_ref, ref) {
   let {
-    as: BaseComponent = 'div',
+    as = 'div',
     className: customClassName,
     children,
     level: overrideLevel,
@@ -47,9 +45,10 @@ const Layer = /*#__PURE__*/React__default["default"].forwardRef(function Layer(_
   const contextLevel = React__default["default"].useContext(LayerContext.LayerContext);
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix.usePrefix();
-  const className = cx__default["default"](`${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));
+  const className = cx__default["default"](`${prefix}--layer-${LayerLevel.levels[level]}`, customClassName);
+  // The level should be between MIN_LEVEL and MAX_LEVEL
+  const value = Math.max(LayerLevel.MIN_LEVEL, Math.min(level + 1, LayerLevel.MAX_LEVEL));
+  const BaseComponent = as;
   return /*#__PURE__*/React__default["default"].createElement(LayerContext.LayerContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
@@ -58,7 +57,8 @@ const Layer = /*#__PURE__*/React__default["default"].forwardRef(function Layer(_
     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
@@ -78,6 +78,7 @@ Layer.propTypes = {
    */
   level: PropTypes__default["default"].oneOf([0, 1, 2])
 };
+const Layer = LayerRenderFunction;
 
 exports.Layer = Layer;
 exports.useLayer = useLayer;

package/lib/components/Menu/MenuItem.js

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

package/lib/components/MenuButton/index.js

@@ -28,7 +28,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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["default"].forwardRef(function MenuButton(_ref, forwardRef) {

package/lib/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/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -205,7 +205,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -557,7 +557,7 @@ FilterableMultiSelect.propTypes = {
    */
   size: ListBoxPropTypes.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__default["default"].node,
   ...MultiSelectPropTypes.sortingPropTypes,

package/lib/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/lib/components/MultiSelect/MultiSelect.js

@@ -248,6 +248,9 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
         if (changes.selectedItem === undefined) {
           break;
         }
+        if (Array.isArray(changes.selectedItem)) {
+          break;
+        }
         onItemChange(changes.selectedItem);
         return {
           ...changes,
@@ -309,7 +312,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -518,7 +521,7 @@ MultiSelect.propTypes = {
    */
   size: ListBoxPropTypes.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__default["default"].node,
   /**

package/lib/components/Notification/Notification.js

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

package/lib/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/lib/components/NumberInput/NumberInput.js

@@ -182,7 +182,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -190,7 +190,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
 
   // 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;
   }
   React.useEffect(() => {
@@ -370,7 +370,7 @@ NumberInput.propTypes = {
    */
   size: PropTypes__default["default"].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__default["default"].node,
   /**

package/lib/components/ProgressIndicator/ProgressIndicator.js

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

package/lib/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/lib/components/RadioButton/RadioButton.js

@@ -130,7 +130,7 @@ RadioButton.propTypes = {
    */
   onClick: PropTypes__default["default"].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__default["default"].node,
   /**

package/lib/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/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -114,7 +114,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini',
       kind: 'default'
@@ -198,7 +198,7 @@ RadioButtonGroup.propTypes = {
    */
   readOnly: PropTypes__default["default"].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__default["default"].node,
   /**

package/lib/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/lib/components/Select/Select.js

@@ -138,7 +138,7 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -255,7 +255,7 @@ Select.propTypes = {
    */
   size: PropTypes__default["default"].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__default["default"].node,
   /**

package/lib/components/Slider/Slider.Skeleton.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var SliderHandles = require('./SliderHandles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,6 +22,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+var _LowerHandle, _UpperHandle, _UpperHandle2, _LowerHandle2;
 const SliderSkeleton = _ref => {
   let {
     hideLabel,
@@ -29,8 +31,10 @@ const SliderSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const isRtl = document?.dir === 'rtl';
   const containerClasses = cx__default["default"](`${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__default["default"](`${prefix}--slider__thumb`, {
     [`${prefix}--slider__thumb--lower`]: twoHandles
@@ -38,6 +42,12 @@ const SliderSkeleton = _ref => {
   const upperThumbClasses = cx__default["default"](`${prefix}--slider__thumb`, {
     [`${prefix}--slider__thumb--upper`]: twoHandles
   });
+  const lowerThumbWrapperClasses = cx__default["default"](`${prefix}--slider__thumb-wrapper`, {
+    [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles
+  });
+  const upperThumbWrapperClasses = cx__default["default"](`${prefix}--slider__thumb-wrapper`, {
+    [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--form-item`, className)
   }, rest), !hideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
@@ -53,10 +63,14 @@ const SliderSkeleton = _ref => {
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--slider__filled-track`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: lowerThumbWrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: lowerThumbClasses
-  }), twoHandles ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, twoHandles && !isRtl ? _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, null)) : twoHandles && isRtl ? _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, null)) : undefined)), twoHandles ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: upperThumbWrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: upperThumbClasses
-  }) : undefined), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, twoHandles && !isRtl ? _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, null)) : twoHandles && isRtl ? _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, null)) : undefined)) : undefined), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--slider__range-label`
   })));
 };