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

package/es/components/InlineLoading/InlineLoading.d.ts

@@ -0,0 +1,68 @@
+/**
+ * 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 PropTypes from 'prop-types';
+export declare const InlineLoadingStatuses: readonly ["inactive", "active", "finished", "error"];
+export type InlineLoadingStatus = (typeof InlineLoadingStatuses)[number];
+export interface InlineLoadingProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'> {
+    /**
+     * Specify a custom className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify the description for the inline loading text
+     */
+    description?: React.ReactNode;
+    /**
+     * Specify the description for the inline loading text
+     */
+    iconDescription?: string;
+    /**
+     * Provide an optional handler to be invoked when <InlineLoading> is
+     * successful
+     */
+    onSuccess?: () => void;
+    /**
+     * Specify the loading status
+     */
+    status?: InlineLoadingStatus;
+    /**
+     * Provide a delay for the `setTimeout` for success
+     */
+    successDelay?: number;
+}
+declare const InlineLoading: {
+    ({ className, status, iconDescription, description, onSuccess, successDelay, ...rest }: InlineLoadingProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify a custom className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the description for the inline loading text
+         */
+        description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify the description for the inline loading text
+         */
+        iconDescription: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional handler to be invoked when <InlineLoading> is
+         * successful
+         */
+        onSuccess: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify the loading status
+         */
+        status: PropTypes.Requireable<string>;
+        /**
+         * Provide a delay for the `setTimeout` for success
+         */
+        successDelay: PropTypes.Requireable<number>;
+    };
+};
+export default InlineLoading;

package/es/components/InlineLoading/InlineLoading.js

@@ -13,7 +13,7 @@ import { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
 import Loading from '../Loading/Loading.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-function InlineLoading(_ref) {
+const InlineLoading = _ref => {
   let {
     className,
     status = 'active',
@@ -21,7 +21,7 @@ function InlineLoading(_ref) {
     description,
     onSuccess,
     successDelay = 1500,
-    ...other
+    ...rest
   } = _ref;
   const prefix = usePrefix();
   const loadingClasses = cx(`${prefix}--inline-loading`, className);
@@ -64,10 +64,10 @@ function InlineLoading(_ref) {
   }, loading);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: loadingClasses
-  }, other, {
+  }, rest, {
     "aria-live": 'assertive' 
   }), loadingAnimation, description && loadingText);
-}
+};
 InlineLoading.propTypes = {
   /**
    * Specify a custom className to be applied to the container node

package/es/components/InlineLoading/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 InlineLoading from './InlineLoading';
+export default InlineLoading;
+export { InlineLoading };

package/es/components/Layer/LayerContext.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 LayerContext: React.Context<0 | 1 | 2>;

package/es/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/es/components/Layer/LayerLevel.js

@@ -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.
+ */
+
+const levels = ['one', 'two', 'three'];
+const MIN_LEVEL = 0;
+const MAX_LEVEL = levels.length - 1;
+
+export { MAX_LEVEL, MIN_LEVEL, levels };

package/es/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/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) {
@@ -29,6 +29,7 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
     kind = defaultButtonKind,
     label,
     size = 'lg',
+    tabIndex = 0,
     ...rest
   } = _ref;
   const id = useId('MenuButton');
@@ -69,6 +70,7 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
   }), /*#__PURE__*/React__default.createElement(Button, {
     className: triggerClasses,
     size: size,
+    tabIndex: tabIndex,
     kind: buttonKind,
     renderIcon: ChevronDown,
     disabled: disabled,
@@ -114,7 +116,11 @@ MenuButton.propTypes = {
   /**
    * Specify the size of the button and menu.
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /**
+   * Specify the tabIndex of the button.
+   */
+  tabIndex: PropTypes.number
 };
 
 export { MenuButton };

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

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

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

@@ -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/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/es/components/RadioButton/RadioButton.js

@@ -26,6 +26,7 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     name,
     onChange = () => {},
     value = '',
+    slug,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -38,9 +39,17 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     [`${prefix}--visually-hidden`]: hideLabel
   });
   const wrapperClasses = cx(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 = useRef(null);
+  let normalizedSlug;
+  if (slug && /*#__PURE__*/React__default.isValidElement(slug)) {
+    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
@@ -59,7 +68,7 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     className: `${prefix}--radio-button__appearance`
   }), labelText && /*#__PURE__*/React__default.createElement(Text, {
     className: innerLabelClasses
-  }, labelText)));
+  }, labelText, normalizedSlug)));
 });
 RadioButton.displayName = 'RadioButton';
 RadioButton.propTypes = {
@@ -110,6 +119,10 @@ RadioButton.propTypes = {
    * Provide a handler that is invoked when a user clicks on the control
    */
   onClick: PropTypes.func,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify the value of the `<RadioButton>`
    */

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

@@ -34,6 +34,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     valueSelected,
     warn = false,
     warnText,
+    slug,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -88,7 +89,8 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     [`${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(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
@@ -99,6 +101,15 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     className: helperClasses
   }, helperText) : null;
   const divRef = useRef(null);
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini',
+      kind: 'default'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses,
     ref: mergeRefs(divRef, ref)
@@ -109,7 +120,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     "aria-describedby": showHelper && helperText ? helperId : undefined
   }, rest), legendText && /*#__PURE__*/React__default.createElement(Legend, {
     className: `${prefix}--label`
-  }, legendText), getRadioButtons()), /*#__PURE__*/React__default.createElement("div", {
+  }, legendText, normalizedSlug), getRadioButtons()), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--radio-button__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--radio-button__invalid-icon`
@@ -176,6 +187,10 @@ RadioButtonGroup.propTypes = {
    * Whether the RadioButtonGroup should be read-only
    */
   readOnly: PropTypes.bool,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify the value that is currently selected in the group
    */

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;
     /**
@@ -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/es/components/Select/Select.js

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