@carbon/react 1.83.0 → 1.84.0

package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -21,11 +21,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const SkeletonPlaceholder = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const SkeletonPlaceholder = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix.usePrefix();
   const skeletonPlaceholderClasses = cx__default["default"]({
     [`${prefix}--skeleton__placeholder`]: true

package/lib/components/SkeletonText/SkeletonText.js

@@ -26,15 +26,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.usePrefix();
   const skeletonTextClasses = cx__default["default"]({
     [`${prefix}--skeleton__text`]: true,

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

@@ -23,15 +23,14 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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.usePrefix();
   const [isRtl, setIsRtl] = React.useState(false);
   useIsomorphicEffect["default"](() => {

package/lib/components/Slider/Slider.js

@@ -33,14 +33,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ThumbWrapper = _ref => {
-  let {
-    hasTooltip = false,
-    className,
-    style,
-    children,
-    ...rest
-  } = _ref;
+const ThumbWrapper = ({
+  hasTooltip = false,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
   if (hasTooltip) {
     return (
       /*#__PURE__*/
@@ -125,9 +124,7 @@ var HandlePosition = /*#__PURE__*/function (HandlePosition) {
 }(HandlePosition || {});
 class Slider extends React.PureComponent {
   constructor(props) {
-    var _this;
     super(props);
-    _this = this;
     _rollupPluginBabelHelpers.defineProperty(this, "state", {
       value: this.props.value,
       valueUpper: this.props.unstable_valueUpper,
@@ -250,36 +247,35 @@ class Slider extends React.PureComponent {
      *   The first drag event call, we may have an explicit activeHandle value,
      *   which is to be used before state is used.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "_onDrag", function (evt) {
-      let activeHandle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      activeHandle = activeHandle ?? _this.state.activeHandle;
+    _rollupPluginBabelHelpers.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
       });
@@ -507,12 +503,11 @@ class Slider extends React.PureComponent {
         }
       }
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "calcLeftPercent", _ref2 => {
-      let {
-        clientX,
-        value,
-        range
-      } = _ref2;
+    _rollupPluginBabelHelpers.defineProperty(this, "calcLeftPercent", ({
+      clientX,
+      value,
+      range
+    }) => {
       const boundingRect = this.element?.getBoundingClientRect?.();
       let width = boundingRect ? boundingRect.right - boundingRect.left : 0;
 
@@ -538,10 +533,9 @@ class Slider extends React.PureComponent {
      * Calculates the discrete value (snapped to the nearest step) along
      * with the corresponding handle position percentage.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "calcDiscreteValueAndPercent", _ref3 => {
-      let {
-        leftPercent
-      } = _ref3;
+    _rollupPluginBabelHelpers.defineProperty(this, "calcDiscreteValueAndPercent", ({
+      leftPercent
+    }) => {
       const {
         step = 1,
         min,
@@ -562,12 +556,11 @@ class Slider extends React.PureComponent {
      * Calculates the slider's value and handle position based on either a
      * mouse/touch event or an explicit value.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "calcValue", _ref4 => {
-      let {
-        clientX,
-        value,
-        useRawValue
-      } = _ref4;
+    _rollupPluginBabelHelpers.defineProperty(this, "calcValue", ({
+      clientX,
+      value,
+      useRawValue
+    }) => {
       const range = this.props.max - this.props.min;
       const leftPercentRaw = this.calcLeftPercent({
         clientX,
@@ -611,8 +604,7 @@ class Slider extends React.PureComponent {
      * @returns The new slider value, rounded to the same number of decimal places
      *          as the step.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "calcValueForDelta", function (currentValue, delta) {
-      let step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+    _rollupPluginBabelHelpers.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;
@@ -623,11 +615,10 @@ class Slider extends React.PureComponent {
      *
      * Guards against setting either lower or upper values beyond its counterpart.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "setValueLeftForHandle", (handle, _ref5) => {
-      let {
-        value: newValue,
-        left: newLeft
-      } = _ref5;
+    _rollupPluginBabelHelpers.defineProperty(this, "setValueLeftForHandle", (handle, {
+      value: newValue,
+      left: newLeft
+    }) => {
       const {
         value,
         valueUpper,
@@ -662,13 +653,12 @@ class Slider extends React.PureComponent {
         });
       }
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "isValidValueForPosition", _ref6 => {
-      let {
-        handle,
-        value: newValue,
-        min,
-        max
-      } = _ref6;
+    _rollupPluginBabelHelpers.defineProperty(this, "isValidValueForPosition", ({
+      handle,
+      value: newValue,
+      min,
+      max
+    }) => {
       const {
         value,
         valueUpper
@@ -687,21 +677,19 @@ class Slider extends React.PureComponent {
       }
       return false;
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "isValidValue", _ref7 => {
-      let {
-        value,
-        min,
-        max
-      } = _ref7;
+    _rollupPluginBabelHelpers.defineProperty(this, "isValidValue", ({
+      value,
+      min,
+      max
+    }) => {
       return !(value < min || value > max);
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "getAdjustedValueForPosition", _ref8 => {
-      let {
-        handle,
-        value: newValue,
-        min,
-        max
-      } = _ref8;
+    _rollupPluginBabelHelpers.defineProperty(this, "getAdjustedValueForPosition", ({
+      handle,
+      value: newValue,
+      min,
+      max
+    }) => {
       const {
         value,
         valueUpper
@@ -720,12 +708,11 @@ class Slider extends React.PureComponent {
       }
       return newValue;
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "getAdjustedValue", _ref9 => {
-      let {
-        value,
-        min,
-        max
-      } = _ref9;
+    _rollupPluginBabelHelpers.defineProperty(this, "getAdjustedValue", ({
+      value,
+      min,
+      max
+    }) => {
       if (value < min) {
         value = min;
       }
@@ -781,6 +768,9 @@ class Slider extends React.PureComponent {
           valueUpper,
           leftUpper
         });
+        if (this.filledTrackRef.current) {
+          this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(${100 - this.state.leftUpper}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})` : `translate(${this.state.left}%, -50%) scaleX(${(this.state.leftUpper - this.state.left) / 100})`;
+        }
       } else {
         const {
           value,
@@ -794,6 +784,9 @@ class Slider extends React.PureComponent {
           value,
           left
         });
+        if (this.filledTrackRef.current) {
+          this.filledTrackRef.current.style.transform = this.state.isRtl ? `translate(100%, -50%) scaleX(-${this.state.left / 100})` : `translate(0%, -50%) scaleX(${this.state.left / 100})`;
+        }
       }
     }
   }
@@ -873,8 +866,7 @@ class Slider extends React.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));
   }
@@ -942,7 +934,7 @@ class Slider extends React.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,
@@ -1112,13 +1104,13 @@ class Slider extends React.PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.LOWER
         })
-      }, twoHandles && !isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, {
+      }, twoHandles && !isRtl ? _Fragment || (_Fragment = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, {
         "aria-label": ariaLabelInput
-      })), _LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandleFocus, {
+      }), /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandleFocus, {
         "aria-label": ariaLabelInput
-      }))) : twoHandles && isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, {
+      }))) : twoHandles && isRtl ? _Fragment2 || (_Fragment2 = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, {
         "aria-label": ariaLabelInputUpper
-      })), _UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandleFocus, {
+      }), /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandleFocus, {
         "aria-label": ariaLabelInputUpper
       }))) : undefined)), twoHandles ? /*#__PURE__*/React__default["default"].createElement(ThumbWrapper, _rollupPluginBabelHelpers["extends"]({
         hasTooltip: hideTextInput,
@@ -1137,13 +1129,13 @@ class Slider extends React.PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.UPPER
         })
-      }, twoHandles && !isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, {
+      }, twoHandles && !isRtl ? _Fragment3 || (_Fragment3 = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, {
         "aria-label": ariaLabelInputUpper
-      })), _UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandleFocus, {
+      }), /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandleFocus, {
         "aria-label": ariaLabelInputUpper
-      }))) : twoHandles && isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, {
+      }))) : twoHandles && isRtl ? _Fragment4 || (_Fragment4 = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, {
         "aria-label": ariaLabelInput
-      })), _LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandleFocus, {
+      }), /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandleFocus, {
         "aria-label": ariaLabelInput
       }))) : undefined)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: `${prefix}--slider__track`,

package/lib/components/Slider/SliderHandles.js

@@ -17,7 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(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__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", _rollupPluginBabelHelpers["extends"]({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 24",
@@ -58,16 +58,16 @@ const UpperHandleFocus = props => /*#__PURE__*/React__default["default"].createE
   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__default["default"].createElement("path", {
+}, props), _path0 || (_path0 = /*#__PURE__*/React__default["default"].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__default["default"].createElement("path", {
+})), _path1 || (_path1 = /*#__PURE__*/React__default["default"].createElement("path", {
   fill: "none",
   d: "M-4 0h24v24H-4z"
-})), _path12 || (_path12 = /*#__PURE__*/React__default["default"].createElement("path", {
+})), _path10 || (_path10 = /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M.92 24H0v-6.46h.92z"
-})), _path13 || (_path13 = /*#__PURE__*/React__default["default"].createElement("path", {
+})), _path11 || (_path11 = /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M16 24h-.92V0H16zM.92 24H0V0h.92z"
-})), _path14 || (_path14 = /*#__PURE__*/React__default["default"].createElement("path", {
+})), _path12 || (_path12 = /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M16 23.08V24H0v-.92zM16 0v.92H0V0z"
 }))));
 

package/lib/components/StructuredList/StructuredList.Skeleton.js

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

package/lib/components/Tabs/Tabs.Skeleton.js

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