@carbon/react 1.44.0 → 1.45.0-rc.0

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

@@ -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

@@ -518,7 +518,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

@@ -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/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

@@ -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

@@ -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`
   })));
 };