@carbon/react 1.83.0 → 1.84.0-rc.0

package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -11,11 +11,10 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SkeletonPlaceholder = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const SkeletonPlaceholder = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   const skeletonPlaceholderClasses = cx({
     [`${prefix}--skeleton__placeholder`]: true

package/es/components/SkeletonText/SkeletonText.js

@@ -16,15 +16,14 @@ const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
 function getRandomInt(min, max, n) {
   return Math.floor(randoms[n % 3] * (max - min + 1)) + min;
 }
-const SkeletonText = _ref => {
-  let {
-    paragraph = false,
-    lineCount = 3,
-    width = '100%',
-    heading = false,
-    className = '',
-    ...rest
-  } = _ref;
+const SkeletonText = ({
+  paragraph = false,
+  lineCount = 3,
+  width = '100%',
+  heading = false,
+  className = '',
+  ...rest
+}) => {
   const prefix = usePrefix();
   const skeletonTextClasses = cx({
     [`${prefix}--skeleton__text`]: true,

package/es/components/Slider/Slider.Skeleton.js

@@ -13,15 +13,14 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { LowerHandle, UpperHandle } from './SliderHandles.js';
 
-const SliderSkeleton = _ref => {
-  let {
-    ariaLabel = 'slider handle',
-    unstable_ariaLabelHandleUpper: ariaLabelHandleUpper = 'upper slider handle',
-    hideLabel,
-    className,
-    twoHandles,
-    ...rest
-  } = _ref;
+const SliderSkeleton = ({
+  ariaLabel = 'slider handle',
+  unstable_ariaLabelHandleUpper: ariaLabelHandleUpper = 'upper slider handle',
+  hideLabel,
+  className,
+  twoHandles,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const [isRtl, setIsRtl] = useState(false);
   useIsomorphicEffect(() => {

package/es/components/Slider/Slider.js

@@ -23,14 +23,13 @@ import { clamp } from '../../internal/clamp.js';
 import { throttle } from '../../node_modules/es-toolkit/dist/compat/function/throttle.mjs.js';
 import { Text } from '../Text/Text.js';
 
-const ThumbWrapper = _ref => {
-  let {
-    hasTooltip = false,
-    className,
-    style,
-    children,
-    ...rest
-  } = _ref;
+const ThumbWrapper = ({
+  hasTooltip = false,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
   if (hasTooltip) {
     return (
       /*#__PURE__*/
@@ -115,9 +114,7 @@ var HandlePosition = /*#__PURE__*/function (HandlePosition) {
 }(HandlePosition || {});
 class Slider extends PureComponent {
   constructor(props) {
-    var _this;
     super(props);
-    _this = this;
     _defineProperty(this, "state", {
       value: this.props.value,
       valueUpper: this.props.unstable_valueUpper,
@@ -240,36 +237,35 @@ class Slider extends PureComponent {
      *   The first drag event call, we may have an explicit activeHandle value,
      *   which is to be used before state is used.
      */
-    _defineProperty(this, "_onDrag", function (evt) {
-      let activeHandle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      activeHandle = activeHandle ?? _this.state.activeHandle;
+    _defineProperty(this, "_onDrag", (evt, activeHandle = null) => {
+      activeHandle = activeHandle ?? this.state.activeHandle;
       // Do nothing if component is disabled, or we have no event.
-      if (_this.props.disabled || _this.props.readOnly || !evt) {
+      if (this.props.disabled || this.props.readOnly || !evt) {
         return;
       }
-      const clientX = _this.getClientXFromEvent(evt);
+      const clientX = this.getClientXFromEvent(evt);
       const {
         value,
         left
-      } = _this.calcValue({
+      } = this.calcValue({
         clientX,
-        value: _this.state.value
+        value: this.state.value
       });
       // If we're set to two handles, negotiate which drag handle is closest to
       // the users' interaction.
-      if (_this.hasTwoHandles() && activeHandle) {
-        _this.setValueLeftForHandle(activeHandle, {
-          value: _this.nearestStepValue(value),
+      if (this.hasTwoHandles() && activeHandle) {
+        this.setValueLeftForHandle(activeHandle, {
+          value: this.nearestStepValue(value),
           left
         });
       } else {
-        _this.setState({
-          value: _this.nearestStepValue(value),
+        this.setState({
+          value: this.nearestStepValue(value),
           left,
           isValid: true
         });
       }
-      _this.setState({
+      this.setState({
         correctedValue: null,
         correctedPosition: null
       });
@@ -497,12 +493,11 @@ class Slider extends PureComponent {
         }
       }
     });
-    _defineProperty(this, "calcLeftPercent", _ref2 => {
-      let {
-        clientX,
-        value,
-        range
-      } = _ref2;
+    _defineProperty(this, "calcLeftPercent", ({
+      clientX,
+      value,
+      range
+    }) => {
       const boundingRect = this.element?.getBoundingClientRect?.();
       let width = boundingRect ? boundingRect.right - boundingRect.left : 0;
 
@@ -528,10 +523,9 @@ class Slider extends PureComponent {
      * Calculates the discrete value (snapped to the nearest step) along
      * with the corresponding handle position percentage.
      */
-    _defineProperty(this, "calcDiscreteValueAndPercent", _ref3 => {
-      let {
-        leftPercent
-      } = _ref3;
+    _defineProperty(this, "calcDiscreteValueAndPercent", ({
+      leftPercent
+    }) => {
       const {
         step = 1,
         min,
@@ -552,12 +546,11 @@ class Slider extends PureComponent {
      * Calculates the slider's value and handle position based on either a
      * mouse/touch event or an explicit value.
      */
-    _defineProperty(this, "calcValue", _ref4 => {
-      let {
-        clientX,
-        value,
-        useRawValue
-      } = _ref4;
+    _defineProperty(this, "calcValue", ({
+      clientX,
+      value,
+      useRawValue
+    }) => {
       const range = this.props.max - this.props.min;
       const leftPercentRaw = this.calcLeftPercent({
         clientX,
@@ -601,8 +594,7 @@ class Slider extends PureComponent {
      * @returns The new slider value, rounded to the same number of decimal places
      *          as the step.
      */
-    _defineProperty(this, "calcValueForDelta", function (currentValue, delta) {
-      let step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+    _defineProperty(this, "calcValueForDelta", (currentValue, delta, step = 1) => {
       const base = delta > 0 ? Math.floor(currentValue / step) * step : currentValue;
       const newValue = base + delta;
       const decimals = (step.toString().split('.')[1] || '').length;
@@ -613,11 +605,10 @@ class Slider extends PureComponent {
      *
      * Guards against setting either lower or upper values beyond its counterpart.
      */
-    _defineProperty(this, "setValueLeftForHandle", (handle, _ref5) => {
-      let {
-        value: newValue,
-        left: newLeft
-      } = _ref5;
+    _defineProperty(this, "setValueLeftForHandle", (handle, {
+      value: newValue,
+      left: newLeft
+    }) => {
       const {
         value,
         valueUpper,
@@ -652,13 +643,12 @@ class Slider extends PureComponent {
         });
       }
     });
-    _defineProperty(this, "isValidValueForPosition", _ref6 => {
-      let {
-        handle,
-        value: newValue,
-        min,
-        max
-      } = _ref6;
+    _defineProperty(this, "isValidValueForPosition", ({
+      handle,
+      value: newValue,
+      min,
+      max
+    }) => {
       const {
         value,
         valueUpper
@@ -677,21 +667,19 @@ class Slider extends PureComponent {
       }
       return false;
     });
-    _defineProperty(this, "isValidValue", _ref7 => {
-      let {
-        value,
-        min,
-        max
-      } = _ref7;
+    _defineProperty(this, "isValidValue", ({
+      value,
+      min,
+      max
+    }) => {
       return !(value < min || value > max);
     });
-    _defineProperty(this, "getAdjustedValueForPosition", _ref8 => {
-      let {
-        handle,
-        value: newValue,
-        min,
-        max
-      } = _ref8;
+    _defineProperty(this, "getAdjustedValueForPosition", ({
+      handle,
+      value: newValue,
+      min,
+      max
+    }) => {
       const {
         value,
         valueUpper
@@ -710,12 +698,11 @@ class Slider extends PureComponent {
       }
       return newValue;
     });
-    _defineProperty(this, "getAdjustedValue", _ref9 => {
-      let {
-        value,
-        min,
-        max
-      } = _ref9;
+    _defineProperty(this, "getAdjustedValue", ({
+      value,
+      min,
+      max
+    }) => {
       if (value < min) {
         value = min;
       }
@@ -863,8 +850,7 @@ class Slider extends PureComponent {
    * @param value - The value to adjust to the nearest step. Defaults to `0`.
    * @returns The value rounded to the precision determined by the step.
    */
-  nearestStepValue() {
-    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  nearestStepValue(value = 0) {
     const decimals = (this.props.step?.toString().split('.')[1] || '').length;
     return Number(value.toFixed(decimals));
   }
@@ -932,7 +918,7 @@ class Slider extends PureComponent {
     return Object.entries(derivedState).length > 0 ? derivedState : null;
   }
   render() {
-    var _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
+    var _Fragment, _Fragment2, _Fragment3, _Fragment4;
     const {
       ariaLabelInput,
       unstable_ariaLabelInputUpper: ariaLabelInputUpper,
@@ -1102,13 +1088,13 @@ class Slider extends PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.LOWER
         })
-      }, twoHandles && !isRtl ? /*#__PURE__*/React.createElement(React.Fragment, null, _LowerHandle || (_LowerHandle = /*#__PURE__*/React.createElement(LowerHandle, {
+      }, twoHandles && !isRtl ? _Fragment || (_Fragment = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LowerHandle, {
         "aria-label": ariaLabelInput
-      })), _LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React.createElement(LowerHandleFocus, {
+      }), /*#__PURE__*/React.createElement(LowerHandleFocus, {
         "aria-label": ariaLabelInput
-      }))) : twoHandles && isRtl ? /*#__PURE__*/React.createElement(React.Fragment, null, _UpperHandle || (_UpperHandle = /*#__PURE__*/React.createElement(UpperHandle, {
+      }))) : twoHandles && isRtl ? _Fragment2 || (_Fragment2 = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UpperHandle, {
         "aria-label": ariaLabelInputUpper
-      })), _UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React.createElement(UpperHandleFocus, {
+      }), /*#__PURE__*/React.createElement(UpperHandleFocus, {
         "aria-label": ariaLabelInputUpper
       }))) : undefined)), twoHandles ? /*#__PURE__*/React.createElement(ThumbWrapper, _extends({
         hasTooltip: hideTextInput,
@@ -1127,13 +1113,13 @@ class Slider extends PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.UPPER
         })
-      }, twoHandles && !isRtl ? /*#__PURE__*/React.createElement(React.Fragment, null, _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React.createElement(UpperHandle, {
+      }, twoHandles && !isRtl ? _Fragment3 || (_Fragment3 = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UpperHandle, {
         "aria-label": ariaLabelInputUpper
-      })), _UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React.createElement(UpperHandleFocus, {
+      }), /*#__PURE__*/React.createElement(UpperHandleFocus, {
         "aria-label": ariaLabelInputUpper
-      }))) : twoHandles && isRtl ? /*#__PURE__*/React.createElement(React.Fragment, null, _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React.createElement(LowerHandle, {
+      }))) : twoHandles && isRtl ? _Fragment4 || (_Fragment4 = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LowerHandle, {
         "aria-label": ariaLabelInput
-      })), _LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React.createElement(LowerHandleFocus, {
+      }), /*#__PURE__*/React.createElement(LowerHandleFocus, {
         "aria-label": ariaLabelInput
       }))) : undefined)) : null, /*#__PURE__*/React.createElement("div", {
         className: `${prefix}--slider__track`,

package/es/components/Slider/SliderHandles.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { PrefixContext } from '../../internal/usePrefix.js';
 import React from 'react';
 
-var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14;
+var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path0, _path1, _path10, _path11, _path12;
 const LowerHandle = props => /*#__PURE__*/React.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 24",
@@ -50,16 +50,16 @@ const UpperHandleFocus = props => /*#__PURE__*/React.createElement(PrefixContext
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 24",
   className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`
-}, props), _path10 || (_path10 = /*#__PURE__*/React.createElement("path", {
+}, props), _path0 || (_path0 = /*#__PURE__*/React.createElement("path", {
   d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
-})), _path11 || (_path11 = /*#__PURE__*/React.createElement("path", {
+})), _path1 || (_path1 = /*#__PURE__*/React.createElement("path", {
   fill: "none",
   d: "M-4 0h24v24H-4z"
-})), _path12 || (_path12 = /*#__PURE__*/React.createElement("path", {
+})), _path10 || (_path10 = /*#__PURE__*/React.createElement("path", {
   d: "M.92 24H0v-6.46h.92z"
-})), _path13 || (_path13 = /*#__PURE__*/React.createElement("path", {
+})), _path11 || (_path11 = /*#__PURE__*/React.createElement("path", {
   d: "M16 24h-.92V0H16zM.92 24H0V0h.92z"
-})), _path14 || (_path14 = /*#__PURE__*/React.createElement("path", {
+})), _path12 || (_path12 = /*#__PURE__*/React.createElement("path", {
   d: "M16 23.08V24H0v-.92zM16 0v.92H0V0z"
 }))));
 

package/es/components/StructuredList/StructuredList.Skeleton.js

@@ -12,12 +12,11 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _span, _span2, _span3;
-function StructuredListSkeleton(_ref) {
-  let {
-    rowCount = 5,
-    className,
-    ...rest
-  } = _ref;
+function StructuredListSkeleton({
+  rowCount = 5,
+  className,
+  ...rest
+}) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--skeleton`, `${prefix}--structured-list`, className);
   const rows = new Array(rowCount).fill(null).map((_, i) => /*#__PURE__*/React.createElement("div", {

package/es/components/Tabs/Tabs.Skeleton.js

@@ -20,12 +20,11 @@ function Tab() {
     className: `${prefix}--tabs__nav-link`
   }, _span || (_span = /*#__PURE__*/React.createElement("span", null))));
 }
-function TabsSkeleton(_ref) {
-  let {
-    className,
-    contained,
-    ...rest
-  } = _ref;
+function TabsSkeleton({
+  className,
+  contained,
+  ...rest
+}) {
   const prefix = usePrefix();
   const tabClasses = cx(className, `${prefix}--tabs`, `${prefix}--skeleton`, {
     [`${prefix}--tabs--contained`]: contained