@carbon/react 1.44.0-rc.0 → 1.45.0-rc.0

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) {
@@ -39,6 +39,7 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
     kind = defaultButtonKind,
     label,
     size = 'lg',
+    tabIndex = 0,
     ...rest
   } = _ref;
   const id = useId.useId('MenuButton');
@@ -79,6 +80,7 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
   }), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
     className: triggerClasses,
     size: size,
+    tabIndex: tabIndex,
     kind: buttonKind,
     renderIcon: iconsReact.ChevronDown,
     disabled: disabled,
@@ -124,7 +126,11 @@ MenuButton.propTypes = {
   /**
    * Specify the size of the button and menu.
    */
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  /**
+   * Specify the tabIndex of the button.
+   */
+  tabIndex: PropTypes__default["default"].number
 };
 
 exports.MenuButton = MenuButton;

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

@@ -55,6 +55,10 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide a handler that is invoked when a user clicks on the control
      */
     onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify the value of the `<RadioButton>`
      */

package/lib/components/RadioButton/RadioButton.js

@@ -36,6 +36,7 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((props, re
     name,
     onChange = () => {},
     value = '',
+    slug,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -48,9 +49,17 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((props, re
     [`${prefix}--visually-hidden`]: hideLabel
   });
   const wrapperClasses = cx__default["default"](className, `${prefix}--radio-button-wrapper`, {
-    [`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== 'right'
+    [`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== 'right',
+    [`${prefix}--radio-button-wrapper--slug`]: slug
   });
   const inputRef = React.useRef(null);
+  let normalizedSlug;
+  if (slug && /*#__PURE__*/React__default["default"].isValidElement(slug)) {
+    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, rest, {
@@ -69,7 +78,7 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((props, re
     className: `${prefix}--radio-button__appearance`
   }), labelText && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: innerLabelClasses
-  }, labelText)));
+  }, labelText, normalizedSlug)));
 });
 RadioButton.displayName = 'RadioButton';
 RadioButton.propTypes = {
@@ -120,6 +129,10 @@ RadioButton.propTypes = {
    * Provide a handler that is invoked when a user clicks on the control
    */
   onClick: PropTypes__default["default"].func,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify the value of the `<RadioButton>`
    */

package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -63,6 +63,10 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Whether the RadioButtonGroup should be read-only
      */
     readOnly?: boolean;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify whether the control is currently in warning state
      */

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -44,6 +44,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
     valueSelected,
     warn = false,
     warnText,
+    slug,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -98,7 +99,8 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
     [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
     [`${prefix}--radio-button-group--readonly`]: readOnly,
     [`${prefix}--radio-button-group--invalid`]: !readOnly && invalid,
-    [`${prefix}--radio-button-group--warning`]: showWarning
+    [`${prefix}--radio-button-group--warning`]: showWarning,
+    [`${prefix}--radio-button-group--slug`]: slug
   });
   const helperClasses = cx__default["default"](`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
@@ -109,6 +111,15 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
     className: helperClasses
   }, helperText) : null;
   const divRef = React.useRef(null);
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'mini',
+      kind: 'default'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses,
     ref: mergeRefs["default"](divRef, ref)
@@ -119,7 +130,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
     "aria-describedby": showHelper && helperText ? helperId : undefined
   }, rest), legendText && /*#__PURE__*/React__default["default"].createElement(index.Legend, {
     className: `${prefix}--label`
-  }, legendText), getRadioButtons()), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, legendText, normalizedSlug), getRadioButtons()), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--radio-button__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--radio-button__invalid-icon`
@@ -186,6 +197,10 @@ RadioButtonGroup.propTypes = {
    * Whether the RadioButtonGroup should be read-only
    */
   readOnly: PropTypes__default["default"].bool,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify the value that is currently selected in the group
    */

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;
     /**
@@ -90,5 +90,5 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     warnText?: ReactNode;
 }
-declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "disabled" | "form" | "slot" | "style" | "title" | "className" | "size" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "tabIndex" | "color" | "lang" | "name" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inline" | "readOnly" | "required" | "light" | "invalid" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "slug" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "disabled" | "form" | "slot" | "style" | "title" | "className" | "size" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "onTransitionEnd" | "tabIndex" | "color" | "lang" | "name" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inline" | "readOnly" | "required" | "light" | "invalid" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "slug" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

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