@carbon/react 1.27.0 → 1.28.0-rc.0

package/lib/components/NumberInput/NumberInput.Skeleton.js

@@ -21,20 +21,19 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["hideLabel", "className"];
-
 function NumberInputSkeleton(_ref) {
-  var hideLabel = _ref.hideLabel,
-      className = _ref.className,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+  let {
+    hideLabel,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(prefix, "--form-item"), className)
+    className: cx__default["default"](`${prefix}--form-item`, className)
   }, rest), !hideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+    className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--number ").concat(prefix, "--skeleton")
+    className: `${prefix}--number ${prefix}--skeleton`
   }));
 }
 

package/lib/components/NumberInput/NumberInput.js

@@ -27,69 +27,51 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["allowEmpty", "className", "disabled", "disableWheel", "defaultValue", "helperText", "hideLabel", "hideSteppers", "iconDescription", "id", "label", "invalid", "invalidText", "light", "max", "min", "onChange", "onClick", "onKeyUp", "readOnly", "size", "step", "translateWithId", "warn", "warnText", "value"];
-
-var _defaultTranslations, _Subtract, _Add;
-var translationIds = {
+var _Subtract, _Add;
+const translationIds = {
   'increment.number': 'increment.number',
   'decrement.number': 'decrement.number'
 };
-var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['increment.number'], 'Increment number'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['decrement.number'], 'Decrement number'), _defaultTranslations);
-var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function NumberInput(props, forwardRef) {
-  var _cx, _cx3, _cx4;
-
-  var _props$allowEmpty = props.allowEmpty,
-      allowEmpty = _props$allowEmpty === void 0 ? false : _props$allowEmpty,
-      customClassName = props.className,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$disableWheel = props.disableWheel,
-      disableWheelProp = _props$disableWheel === void 0 ? false : _props$disableWheel,
-      defaultValue = props.defaultValue,
-      _props$helperText = props.helperText,
-      helperText = _props$helperText === void 0 ? '' : _props$helperText,
-      _props$hideLabel = props.hideLabel,
-      hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
-      hideSteppers = props.hideSteppers,
-      iconDescription = props.iconDescription,
-      id = props.id,
-      label = props.label,
-      _props$invalid = props.invalid,
-      invalid = _props$invalid === void 0 ? false : _props$invalid,
-      invalidText = props.invalidText,
-      light = props.light,
-      max = props.max,
-      min = props.min,
-      onChange = props.onChange,
-      _onClick = props.onClick,
-      onKeyUp = props.onKeyUp,
-      readOnly = props.readOnly,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'md' : _props$size,
-      _props$step = props.step,
-      step = _props$step === void 0 ? 1 : _props$step,
-      _props$translateWithI = props.translateWithId,
-      t = _props$translateWithI === void 0 ? function (id) {
-    return defaultTranslations[id];
-  } : _props$translateWithI,
-      _props$warn = props.warn,
-      warn = _props$warn === void 0 ? false : _props$warn,
-      _props$warnText = props.warnText,
-      warnText = _props$warnText === void 0 ? '' : _props$warnText,
-      controlledValue = props.value,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useContext = React.useContext(FormContext.FormContext),
-      isFluid = _useContext.isFluid;
-
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var _useState3 = React.useState(function () {
+const defaultTranslations = {
+  [translationIds['increment.number']]: 'Increment number',
+  [translationIds['decrement.number']]: 'Decrement number'
+};
+const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function NumberInput(props, forwardRef) {
+  const {
+    allowEmpty = false,
+    className: customClassName,
+    disabled = false,
+    disableWheel: disableWheelProp = false,
+    defaultValue,
+    helperText = '',
+    hideLabel = false,
+    hideSteppers,
+    iconDescription,
+    id,
+    label,
+    invalid = false,
+    invalidText,
+    light,
+    max,
+    min,
+    onChange,
+    onClick,
+    onKeyUp,
+    readOnly,
+    size = 'md',
+    step = 1,
+    translateWithId: t = id => defaultTranslations[id],
+    warn = false,
+    warnText = '',
+    value: controlledValue,
+    ...rest
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const {
+    isFluid
+  } = React.useContext(FormContext.FormContext);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [value, setValue] = React.useState(() => {
     if (controlledValue !== undefined) {
       return controlledValue;
     }
@@ -99,40 +81,43 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     }
 
     return 0;
-  }),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
-
-  var _useState5 = React.useState(controlledValue),
-      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      prevControlledValue = _useState6[0],
-      setPrevControlledValue = _useState6[1];
-
-  var inputRef = React.useRef(null);
-  var ref = useMergedRefs.useMergedRefs([forwardRef, inputRef]);
-  var numberInputClasses = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--helpertext"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--nolabel"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--nosteppers"), hideSteppers), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--").concat(size), size), _cx));
-  var isInputValid = getInputValidity({
-    allowEmpty: allowEmpty,
-    invalid: invalid,
-    value: value,
-    max: max,
-    min: min
   });
-  var normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
-    id: id,
-    readOnly: readOnly,
-    disabled: disabled,
+  const [prevControlledValue, setPrevControlledValue] = React.useState(controlledValue);
+  const inputRef = React.useRef(null);
+  const ref = useMergedRefs.useMergedRefs([forwardRef, inputRef]);
+  const numberInputClasses = cx__default["default"]({
+    [`${prefix}--number`]: true,
+    [`${prefix}--number--helpertext`]: true,
+    [`${prefix}--number--readonly`]: readOnly,
+    [`${prefix}--number--light`]: light,
+    [`${prefix}--number--nolabel`]: hideLabel,
+    [`${prefix}--number--nosteppers`]: hideSteppers,
+    [`${prefix}--number--${size}`]: size
+  });
+  const isInputValid = getInputValidity({
+    allowEmpty,
+    invalid,
+    value,
+    max,
+    min
+  });
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    readOnly,
+    disabled,
     invalid: !isInputValid,
-    invalidText: invalidText,
-    warn: warn,
-    warnText: warnText
+    invalidText,
+    warn,
+    warnText
+  });
+  const [incrementNumLabel, decrementNumLabel] = [t('increment.number'), t('decrement.number')];
+  const wrapperClasses = cx__default["default"](`${prefix}--number__input-wrapper`, {
+    [`${prefix}--number__input-wrapper--warning`]: normalizedProps.warn
+  });
+  const iconClasses = cx__default["default"]({
+    [`${prefix}--number__invalid`]: normalizedProps.invalid || normalizedProps.warn,
+    [`${prefix}--number__invalid--warning`]: normalizedProps.warn
   });
-  var _ref = [t('increment.number'), t('decrement.number')],
-      incrementNumLabel = _ref[0],
-      decrementNumLabel = _ref[1];
-  var wrapperClasses = cx__default["default"]("".concat(prefix, "--number__input-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--number__input-wrapper--warning"), normalizedProps.warn));
-  var iconClasses = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _cx3));
 
   if (controlledValue !== prevControlledValue) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -140,7 +125,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     setPrevControlledValue(controlledValue);
   }
 
-  var ariaDescribedBy = undefined;
+  let ariaDescribedBy = undefined;
 
   if (normalizedProps.invalid) {
     ariaDescribedBy = normalizedProps.invalidId;
@@ -159,7 +144,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
       return;
     }
 
-    var state = {
+    const state = {
       value: event.target.value,
       direction: value < event.target.value ? 'up' : 'down'
     };
@@ -170,7 +155,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     }
   }
 
-  var handleFocus = function handleFocus(evt) {
+  const handleFocus = evt => {
     if ('type' in evt.target && evt.target.type === 'button') {
       setIsFocused(false);
     } else {
@@ -178,8 +163,14 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     }
   };
 
-  var outerElementClasses = cx__default["default"]("".concat(prefix, "--form-item"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, customClassName, !!customClassName), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--invalid"), isFluid && normalizedProps.invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--focus"), isFluid && isFocused), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--disabled"), isFluid && disabled), _cx4));
-  var Icon = normalizedProps.icon;
+  const outerElementClasses = cx__default["default"](`${prefix}--form-item`, {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    [customClassName]: !!customClassName,
+    [`${prefix}--number-input--fluid--invalid`]: isFluid && normalizedProps.invalid,
+    [`${prefix}--number-input--fluid--focus`]: isFluid && isFocused,
+    [`${prefix}--number-input--fluid--disabled`]: isFluid && disabled
+  });
+  const Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: outerElementClasses,
     onFocus: isFluid ? handleFocus : undefined,
@@ -203,10 +194,10 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     id: id,
     max: max,
     min: min,
-    onClick: _onClick,
+    onClick: onClick,
     onChange: handleOnChange,
     onKeyUp: onKeyUp,
-    onFocus: function onFocus(e) {
+    onFocus: e => {
       if (disableWheelProp) {
         e.target.addEventListener('wheel', disableWheel);
       }
@@ -215,7 +206,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
         rest.onFocus(e);
       }
     },
-    onBlur: function onBlur(e) {
+    onBlur: e => {
       if (disableWheelProp) {
         e.target.removeEventListener('wheel', disableWheel);
       }
@@ -232,13 +223,13 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   })), Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses
   }) : null, !hideSteppers && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--number__controls")
+    className: `${prefix}--number__controls`
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     "aria-label": decrementNumLabel || iconDescription,
-    className: "".concat(prefix, "--number__control-btn down-icon"),
+    className: `${prefix}--number__control-btn down-icon`,
     disabled: disabled || readOnly,
-    onClick: function onClick(event) {
-      var state = {
+    onClick: event => {
+      const state = {
         value: clamp(max, min, parseInt(value) - step),
         direction: 'down'
       };
@@ -248,8 +239,8 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
         onChange(event, state);
       }
 
-      if (_onClick) {
-        _onClick(event, state);
+      if (onClick) {
+        onClick(event, state);
       }
     },
     tabIndex: -1,
@@ -258,13 +249,13 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   }, _Subtract || (_Subtract = /*#__PURE__*/React__default["default"].createElement(iconsReact.Subtract, {
     className: "down-icon"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--number__rule-divider")
+    className: `${prefix}--number__rule-divider`
   }), /*#__PURE__*/React__default["default"].createElement("button", {
     "aria-label": incrementNumLabel || iconDescription,
-    className: "".concat(prefix, "--number__control-btn up-icon"),
+    className: `${prefix}--number__control-btn up-icon`,
     disabled: disabled || readOnly,
-    onClick: function onClick(event) {
-      var state = {
+    onClick: event => {
+      const state = {
         value: clamp(max, min, parseInt(value) + step),
         direction: 'up'
       };
@@ -274,8 +265,8 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
         onChange(event, state);
       }
 
-      if (_onClick) {
-        _onClick(event, state);
+      if (onClick) {
+        onClick(event, state);
       }
     },
     tabIndex: -1,
@@ -284,9 +275,9 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   }, _Add || (_Add = /*#__PURE__*/React__default["default"].createElement(iconsReact.Add, {
     className: "up-icon"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--number__rule-divider")
+    className: `${prefix}--number__rule-divider`
   }))), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
-    className: "".concat(prefix, "--number-input__divider")
+    className: `${prefix}--number-input__divider`
   }), normalizedProps.validation ? normalizedProps.validation : /*#__PURE__*/React__default["default"].createElement(HelperText, {
     id: normalizedProps.helperId,
     disabled: disabled,
@@ -428,15 +419,19 @@ NumberInput.propTypes = {
   warnText: PropTypes__default["default"].node
 };
 
-function Label(_ref2) {
-  var _cx5;
-
-  var disabled = _ref2.disabled,
-      id = _ref2.id,
-      hideLabel = _ref2.hideLabel,
-      label = _ref2.label;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]((_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--label"), true), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--visually-hidden"), hideLabel), _cx5));
+function Label(_ref) {
+  let {
+    disabled,
+    id,
+    hideLabel,
+    label
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"]({
+    [`${prefix}--label`]: true,
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--visually-hidden`]: hideLabel
+  });
 
   if (label) {
     return /*#__PURE__*/React__default["default"].createElement("label", {
@@ -455,12 +450,16 @@ Label.propTypes = {
   label: PropTypes__default["default"].node
 };
 
-function HelperText(_ref3) {
-  var disabled = _ref3.disabled,
-      description = _ref3.description,
-      id = _ref3.id;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+function HelperText(_ref2) {
+  let {
+    disabled,
+    description,
+    id
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
 
   if (description) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -491,12 +490,14 @@ HelperText.propTypes = {
  * @returns {boolean}
  */
 
-function getInputValidity(_ref4) {
-  var allowEmpty = _ref4.allowEmpty,
-      invalid = _ref4.invalid,
-      value = _ref4.value,
-      max = _ref4.max,
-      min = _ref4.min;
+function getInputValidity(_ref3) {
+  let {
+    allowEmpty,
+    invalid,
+    value,
+    max,
+    min
+  } = _ref3;
 
   if (invalid) {
     return false;
@@ -542,12 +543,12 @@ function disableWheel(e) {
  */
 
 
-var boundLimit = 9000000000000000; // 16 digit, 9 quadrillion
+const boundLimit = 9000000000000000; // 16 digit, 9 quadrillion
 
 function clamp() {
-  var max = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : boundLimit;
-  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -boundLimit;
-  var value = arguments.length > 2 ? arguments[2] : undefined;
+  let max = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : boundLimit;
+  let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -boundLimit;
+  let value = arguments.length > 2 ? arguments[2] : undefined;
   return Math.min(max, Math.max(min, value));
 }
 

package/lib/components/OrderedList/OrderedList.js

@@ -21,20 +21,22 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["children", "className", "nested", "native", "isExpressive"];
-
-var OrderedList = function OrderedList(_ref) {
-  var _classnames;
-
-  var children = _ref.children,
-      className = _ref.className,
-      nested = _ref.nested,
-      native = _ref.native,
-      isExpressive = _ref.isExpressive,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"]((_classnames = {}, _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--list--ordered"), !native), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--list--ordered--native"), native), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--list--nested"), nested), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--list--expressive"), isExpressive), _classnames), className);
+const OrderedList = _ref => {
+  let {
+    children,
+    className,
+    nested,
+    native,
+    isExpressive,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"]({
+    [`${prefix}--list--ordered`]: !native,
+    [`${prefix}--list--ordered--native`]: native,
+    [`${prefix}--list--nested`]: nested,
+    [`${prefix}--list--expressive`]: isExpressive
+  }, className);
   return /*#__PURE__*/React__default["default"].createElement("ol", _rollupPluginBabelHelpers["extends"]({
     className: classNames
   }, other), children);