@carbon/react 1.95.0 → 1.96.0

package/es/components/TimePicker/TimePicker.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { deprecate } from '../../prop-types/deprecate.js';
-import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 
 const frFn = forwardRef;
 const TimePicker = frFn((props, ref) => {
@@ -70,15 +70,24 @@ const TimePicker = frFn((props, ref) => {
       onBlur(evt);
     }
   }
+  const normalizedProps = useNormalizedInputProps({
+    id,
+    readOnly,
+    disabled,
+    invalid,
+    invalidText,
+    warn: warning,
+    warnText: warningText
+  });
   const timePickerInputClasses = cx(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [inputClassName], {
     [`${prefix}--text-input--light`]: light,
-    [`${prefix}--time-picker__input-field-error`]: invalid || warning
+    [`${prefix}--time-picker__input-field-error`]: normalizedProps.invalid || normalizedProps.warn
   });
   const timePickerClasses = cx({
     [`${prefix}--time-picker`]: true,
     [`${prefix}--time-picker--light`]: light,
-    [`${prefix}--time-picker--invalid`]: invalid,
-    [`${prefix}--time-picker--warning`]: warning,
+    [`${prefix}--time-picker--invalid`]: normalizedProps.invalid,
+    [`${prefix}--time-picker--warning`]: normalizedProps.warn,
     [`${prefix}--time-picker--readonly`]: readOnly,
     [`${prefix}--time-picker--${size}`]: size,
     ...(pickerClassName && {
@@ -136,8 +145,8 @@ const TimePicker = frFn((props, ref) => {
     className: `${prefix}--time-picker__input`
   }, /*#__PURE__*/React.createElement("input", _extends({
     className: timePickerInputClasses,
-    "data-invalid": invalid ? invalid : undefined,
-    disabled: disabled,
+    "data-invalid": normalizedProps.invalid ? true : undefined,
+    disabled: normalizedProps.disabled,
     id: id,
     maxLength: maxLength,
     onClick: handleOnClick,
@@ -148,17 +157,12 @@ const TimePicker = frFn((props, ref) => {
     ref: ref,
     type: type,
     value: value
-  }, rest, readOnlyProps)), (invalid || warning) && /*#__PURE__*/React.createElement("div", {
+  }, rest, readOnlyProps)), (normalizedProps.invalid || normalizedProps.warn) && normalizedProps.icon && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--time-picker__error__icon`
-  }, invalid ? /*#__PURE__*/React.createElement(WarningFilled, {
-    className: `${prefix}--checkbox__invalid-icon`,
-    size: 16
-  }) : /*#__PURE__*/React.createElement(WarningAltFilled, {
-    className: `${prefix}--text-input__invalid-icon--warning`,
+  }, /*#__PURE__*/React.createElement(normalizedProps.icon, {
+    className: normalizedProps.invalid ? `${prefix}--checkbox__invalid-icon` : `${prefix}--text-input__invalid-icon--warning`,
     size: 16
-  }))), getInternalPickerSelects()), (invalid || warning) && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--form-requirement`
-  }, invalid ? invalidText : warningText));
+  }))), getInternalPickerSelects()), normalizedProps.validation);
 });
 TimePicker.propTypes = {
   /**

package/es/index.js

@@ -133,7 +133,7 @@ export { default as SelectItemGroup } from './components/SelectItemGroup/SelectI
 export { default as SkeletonIcon } from './components/SkeletonIcon/SkeletonIcon.js';
 export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
 export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
-export { Slider } from './components/Slider/Slider.js';
+export { default as Slider } from './components/Slider/Slider.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { HStack } from './components/Stack/HStack.js';
 export { Stack } from './components/Stack/Stack.js';

package/lib/components/ComboBox/ComboBox.js

@@ -279,17 +279,23 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           // If custom values are allowed, treat whatever the user typed as
           // the value.
           if (allowCustomValue && highlightedIndex === -1) {
-            const {
-              inputValue
-            } = state;
-            changes.selectedItem = inputValue;
-            if (onChange) {
+            const inputValue = state.inputValue ?? '';
+            const currentSelectedItem = typeof changes.selectedItem === 'undefined' ? state.selectedItem : changes.selectedItem;
+            const isMatchingSelection = currentSelectedItem !== null && typeof currentSelectedItem !== 'undefined' && itemToString(currentSelectedItem) === inputValue && items.some(item => isEqual(item, currentSelectedItem));
+            if (isMatchingSelection) {
+              return changes;
+            }
+            const nextSelectedItem = items.find(item => itemToString(item) === inputValue) ?? inputValue;
+            if (!isEqual(currentSelectedItem, nextSelectedItem) && onChange) {
               onChange({
-                selectedItem: inputValue,
+                selectedItem: nextSelectedItem,
                 inputValue
               });
             }
-            return changes;
+            return {
+              ...changes,
+              selectedItem: nextSelectedItem
+            };
           }
 
           // If a new item was selected, keep its label in the input.
@@ -756,13 +762,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = itemProps;
     return /*#__PURE__*/React.createElement(index$2.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
-      isActive: selectedItem === item,
+      isActive: isEqual(selectedItem, item),
       isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
     }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
       key: itemProps.id
-    }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
+    }, item)) : itemToString(item), isEqual(selectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text.Text, {

package/lib/components/Dropdown/Dropdown.js

@@ -21,7 +21,7 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var useId = require('../../internal/useId.js');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
 var index$1 = require('../AILabel/index.js');
@@ -193,7 +193,6 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
   }),
   // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
   [items, itemToString, initialSelectedItem, onSelectedItemChange, stateReducer, isItemDisabled, onHighlightedIndexChange, downshiftProps]);
-  const dropdownInstanceId = useId.useId();
 
   // only set selectedItem if the prop is defined. Setting if it is undefined
   // will overwrite default selected items from useSelect
@@ -210,15 +209,23 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     highlightedIndex
   } = Downshift.useSelect(selectProps);
   const inline = type === 'inline';
-  const showWarning = !invalid && warn;
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    readOnly,
+    disabled: disabled ?? false,
+    invalid: invalid ?? false,
+    invalidText,
+    warn: warn ?? false,
+    warnText
+  });
   const [isFocused, setIsFocused] = React.useState(false);
   const className = cx(`${prefix}--dropdown`, {
-    [`${prefix}--dropdown--invalid`]: invalid,
-    [`${prefix}--dropdown--warning`]: showWarning,
+    [`${prefix}--dropdown--invalid`]: normalizedProps.invalid,
+    [`${prefix}--dropdown--warning`]: normalizedProps.warn,
     [`${prefix}--dropdown--open`]: isOpen,
     [`${prefix}--dropdown--focus`]: isFocused,
     [`${prefix}--dropdown--inline`]: inline,
-    [`${prefix}--dropdown--disabled`]: disabled,
+    [`${prefix}--dropdown--disabled`]: normalizedProps.disabled,
     [`${prefix}--dropdown--light`]: light,
     [`${prefix}--dropdown--readonly`]: readOnly,
     [`${prefix}--dropdown--${size}`]: size,
@@ -226,22 +233,21 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--autoalign`]: autoAlign
   });
   const titleClasses = cx(`${prefix}--label`, {
-    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--label--disabled`]: normalizedProps.disabled,
     [`${prefix}--visually-hidden`]: hideLabel
   });
   const helperClasses = cx(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: disabled
+    [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
   });
   const wrapperClasses = cx(`${prefix}--dropdown__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
     [`${prefix}--dropdown__wrapper--inline`]: inline,
     [`${prefix}--list-box__wrapper--inline`]: inline,
-    [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid,
-    [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
-    [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && normalizedProps.invalid,
+    [`${prefix}--list-box__wrapper--inline--invalid`]: inline && normalizedProps.invalid,
+    [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && normalizedProps.invalid,
     [`${prefix}--list-box__wrapper--slug`]: slug,
     [`${prefix}--list-box__wrapper--decorator`]: decorator
   });
-  const helperId = !helperText ? undefined : `dropdown-helper-text-${dropdownInstanceId}`;
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
@@ -249,7 +255,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     'aria-label': ariaLabel || deprecatedAriaLabel
   });
   const helper = helperText && !isFluid ? /*#__PURE__*/React.createElement("div", {
-    id: helperId,
+    id: normalizedProps.helperId,
     className: helperClasses
   }, helperText) : null;
   const handleFocus = evt => {
@@ -331,27 +337,25 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     onBlur: handleFocus,
     size: size,
     className: className,
-    invalid: invalid,
-    invalidText: invalidText,
-    warn: warn,
-    warnText: warnText,
+    invalid: normalizedProps.invalid,
+    warn: normalizedProps.warn,
     light: light,
     isOpen: isOpen,
     ref: enableFloatingStyles || autoAlign ? refs.setReference : null,
     id: id
-  }, invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
+  }, normalizedProps.invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
-  }), showWarning && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
+  }), normalizedProps.warn && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     type: "button"
     // aria-expanded is already being passed through {...toggleButtonProps}
     ,
     className: `${prefix}--list-box__field`,
-    disabled: disabled,
+    disabled: normalizedProps.disabled,
     "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
     ,
-    "aria-describedby": !inline && !invalid && !warn && helper ? helperId : undefined,
+    "aria-describedby": !inline && !normalizedProps.invalid && !normalizedProps.warn && helper ? normalizedProps.helperId : normalizedProps.invalid ? normalizedProps.invalidId : normalizedProps.warn ? normalizedProps.warnId : undefined,
     title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : defaultItemToString.defaultItemToString(label)
   }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergedRef
@@ -382,7 +386,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
     }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
       className: `${prefix}--list-box__menu-item__selected-icon`
     }));
-  }))), !inline && !invalid && !warn && helper);
+  }))), !inline && !isFluid && !normalizedProps.validation && helper, !inline && !isFluid && normalizedProps.validation);
 });
 
 // Workaround problems with forwardRef() and generics.  In the long term, should stop using forwardRef().

package/lib/components/Menu/Menu.js

@@ -151,7 +151,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
     }
   }
   function handleBlur(e) {
-    if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) {
+    if (open && onClose && isRoot && e.relatedTarget && !menu.current?.contains(e.relatedTarget)) {
       handleClose();
     }
   }

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -697,7 +697,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     translateWithId: translateWithId
   }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(index$1.default.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
+  }, candidateIsAILabel ? normalizedDecorator : /*#__PURE__*/React.createElement("span", null, normalizedDecorator)) : '', /*#__PURE__*/React.createElement(index$1.default.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
     let isChecked;
     let isIndeterminate = false;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452

package/lib/components/Pagination/Pagination.js

@@ -254,6 +254,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
     hideLabel: true,
     onChange: handlePageInputChange,
     value: page,
+    key: page,
     disabled: pageInputDisabled || disabled
   }, selectItems), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--pagination__text`

package/lib/components/RadioButton/RadioButton.d.ts

@@ -71,6 +71,26 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * `true` to specify if the input is required.
      */
     required?: boolean;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: ReactNode;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+    /**
+     * Specify whether the RadioButton should be read-only
+     */
+    readOnly?: boolean;
 }
 declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioButton;

package/lib/components/RadioButton/RadioButton.js

@@ -21,12 +21,13 @@ var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 
 const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     className,
     decorator,
-    disabled,
+    disabled = false,
     hideLabel,
     id,
     labelPosition = 'right',
@@ -36,11 +37,25 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     value = '',
     slug,
     required,
+    invalid = false,
+    invalidText,
+    warn = false,
+    warnText,
+    readOnly,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
   const uid = useId.useId('radio-button');
   const uniqueId = id || uid;
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id: uniqueId,
+    readOnly,
+    disabled,
+    invalid,
+    invalidText,
+    warn,
+    warnText
+  });
   function handleOnChange(event) {
     onChange(value, name, event);
   }
@@ -50,7 +65,9 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const wrapperClasses = cx(className, `${prefix}--radio-button-wrapper`, {
     [`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== 'right',
     [`${prefix}--radio-button-wrapper--slug`]: slug,
-    [`${prefix}--radio-button-wrapper--decorator`]: decorator
+    [`${prefix}--radio-button-wrapper--decorator`]: decorator,
+    [`${prefix}--radio-button-wrapper--invalid`]: normalizedProps.invalid,
+    [`${prefix}--radio-button-wrapper--warning`]: normalizedProps.warn
   });
   const inputRef = React.useRef(null);
   const candidate = slug ?? decorator;
@@ -66,10 +83,11 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     onChange: handleOnChange,
     id: uniqueId,
     ref: mergeRefs.mergeRefs(inputRef, ref),
-    disabled: disabled,
+    disabled: normalizedProps.disabled,
     value: value,
     name: name,
-    required: required
+    required: required,
+    readOnly: readOnly
   })), /*#__PURE__*/React.createElement("label", {
     htmlFor: uniqueId,
     className: `${prefix}--radio-button__label`
@@ -79,7 +97,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: innerLabelClasses
   }, labelText, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--radio-button-wrapper-inner--decorator`
-  }, normalizedDecorator) : '')));
+  }, normalizedDecorator) : '')), normalizedProps.validation);
 });
 RadioButton.displayName = 'RadioButton';
 RadioButton.propTypes = {
@@ -138,6 +156,26 @@ RadioButton.propTypes = {
    * `true` to specify if the control is required.
    */
   required: PropTypes.bool,
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
+  /**
+   * Specify whether the RadioButton should be read-only
+   */
+  readOnly: PropTypes.bool,
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
    */

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -86,14 +86,14 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }
   }
-  const showWarning = !readOnly && !invalid && warn;
+  const showWarning = !readOnly && !disabled && !invalid && warn;
   const showHelper = !invalid && !disabled && !warn;
   const wrapperClasses = cx(`${prefix}--form-item`, className);
   const fieldsetClasses = cx(`${prefix}--radio-button-group`, {
     [`${prefix}--radio-button-group--${orientation}`]: orientation === 'vertical',
     [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
     [`${prefix}--radio-button-group--readonly`]: readOnly,
-    [`${prefix}--radio-button-group--invalid`]: !readOnly && invalid,
+    [`${prefix}--radio-button-group--invalid`]: !readOnly && !disabled && invalid,
     [`${prefix}--radio-button-group--warning`]: showWarning,
     [`${prefix}--radio-button-group--slug`]: slug,
     [`${prefix}--radio-button-group--decorator`]: decorator
@@ -129,7 +129,7 @@ const RadioButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: `${prefix}--radio-button-group-inner--decorator`
   }, normalizedDecorator) : ''), getRadioButtons()), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--radio-button__validation-msg`
-  }, !readOnly && invalid && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
+  }, !readOnly && !disabled && invalid && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
     className: `${prefix}--radio-button__invalid-icon`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--form-requirement`

package/lib/components/Search/Search.js

@@ -24,6 +24,8 @@ var deprecate = require('../../prop-types/deprecate.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var noopFn = require('../../internal/noopFn.js');
+require('../Tooltip/DefinitionTooltip.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
 
 var _Close;
 const Search = /*#__PURE__*/React.forwardRef(({
@@ -133,11 +135,7 @@ const Search = /*#__PURE__*/React.forwardRef(({
       }
     }
   }
-  return /*#__PURE__*/React.createElement("div", {
-    role: "search",
-    "aria-label": placeholder,
-    className: searchClasses
-  }, /*#__PURE__*/React.createElement("div", {
+  const magnifierButton = /*#__PURE__*/React.createElement("div", {
     "aria-labelledby": onExpand ? searchId : undefined,
     role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,
@@ -149,7 +147,19 @@ const Search = /*#__PURE__*/React.forwardRef(({
     "aria-controls": onExpand ? uniqueId : undefined
   }, /*#__PURE__*/React.createElement(CustomSearchIcon, {
     icon: renderIcon
-  })), /*#__PURE__*/React.createElement("label", {
+  }));
+
+  // Wrap magnifierButton in a tooltip if it's expandable
+  const magnifierWithTooltip = onExpand && !isExpanded ? /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
+    className: `${prefix}--search-tooltip ${prefix}--search-magnifier-tooltip`,
+    align: "top",
+    label: "Search"
+  }, magnifierButton) : magnifierButton;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "search",
+    "aria-label": placeholder,
+    className: searchClasses
+  }, magnifierWithTooltip, /*#__PURE__*/React.createElement("label", {
     id: searchId,
     htmlFor: uniqueId,
     className: `${prefix}--label`

package/lib/components/Slider/Slider.Skeleton.d.ts

@@ -4,8 +4,7 @@
  * 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 PropTypes from 'prop-types';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The `ariaLabel` for the handle icon.
@@ -28,30 +27,5 @@ export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
      */
     twoHandles?: boolean;
 }
-declare const SliderSkeleton: {
-    ({ ariaLabel, unstable_ariaLabelHandleUpper: ariaLabelHandleUpper, hideLabel, className, twoHandles, ...rest }: SliderSkeletonProps): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * The `ariaLabel` for the handle icon.
-         */
-        ariaLabel: PropTypes.Requireable<string>;
-        /**
-         * The `ariaLabel` for the upper bound slider handle when there are two handles.
-         */
-        unstable_ariaLabelHandleUpper: PropTypes.Requireable<string>;
-        /**
-         * Specify an optional className to add to the form item wrapper.
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify whether the label should be hidden, or not
-         */
-        hideLabel: PropTypes.Requireable<boolean>;
-        /**
-         * Turn the slider into a range slider.
-         */
-        twoHandles: PropTypes.Requireable<boolean>;
-    };
-};
-export default SliderSkeleton;
-export { SliderSkeleton };
+declare const _default: (props: SliderSkeletonProps) => ReactNode;
+export default _default;

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

@@ -103,5 +103,4 @@ SliderSkeleton.propTypes = {
   twoHandles: PropTypes.bool
 };
 
-exports.SliderSkeleton = SliderSkeleton;
 exports.default = SliderSkeleton;