@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/NumberInput/NumberInput.Skeleton.js

@@ -5,26 +5,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["hideLabel", "className"];
-
 function NumberInputSkeleton(_ref) {
-  var hideLabel = _ref.hideLabel,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
+  let {
+    hideLabel,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: cx("".concat(prefix, "--form-item"), className)
+    className: cx(`${prefix}--form-item`, className)
   }, rest), !hideLabel && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+    className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--number ").concat(prefix, "--skeleton")
+    className: `${prefix}--number ${prefix}--skeleton`
   }));
 }
 

package/es/components/NumberInput/NumberInput.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Subtract, Add } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -17,69 +17,51 @@ import deprecate from '../../prop-types/deprecate.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-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 = {}, _defineProperty(_defaultTranslations, translationIds['increment.number'], 'Increment number'), _defineProperty(_defaultTranslations, translationIds['decrement.number'], 'Decrement number'), _defaultTranslations);
-var NumberInput = /*#__PURE__*/React__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 = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var _useState3 = useState(function () {
+const defaultTranslations = {
+  [translationIds['increment.number']]: 'Increment number',
+  [translationIds['decrement.number']]: 'Decrement number'
+};
+const NumberInput = /*#__PURE__*/React__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();
+  const {
+    isFluid
+  } = useContext(FormContext);
+  const [isFocused, setIsFocused] = useState(false);
+  const [value, setValue] = useState(() => {
     if (controlledValue !== undefined) {
       return controlledValue;
     }
@@ -89,40 +71,43 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     }
 
     return 0;
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
-
-  var _useState5 = useState(controlledValue),
-      _useState6 = _slicedToArray(_useState5, 2),
-      prevControlledValue = _useState6[0],
-      setPrevControlledValue = _useState6[1];
-
-  var inputRef = useRef(null);
-  var ref = useMergedRefs([forwardRef, inputRef]);
-  var numberInputClasses = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--number"), true), _defineProperty(_cx, "".concat(prefix, "--number--helpertext"), true), _defineProperty(_cx, "".concat(prefix, "--number--readonly"), readOnly), _defineProperty(_cx, "".concat(prefix, "--number--light"), light), _defineProperty(_cx, "".concat(prefix, "--number--nolabel"), hideLabel), _defineProperty(_cx, "".concat(prefix, "--number--nosteppers"), hideSteppers), _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({
-    id: id,
-    readOnly: readOnly,
-    disabled: disabled,
+  const [prevControlledValue, setPrevControlledValue] = useState(controlledValue);
+  const inputRef = useRef(null);
+  const ref = useMergedRefs([forwardRef, inputRef]);
+  const numberInputClasses = cx({
+    [`${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({
+    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(`${prefix}--number__input-wrapper`, {
+    [`${prefix}--number__input-wrapper--warning`]: normalizedProps.warn
+  });
+  const iconClasses = cx({
+    [`${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("".concat(prefix, "--number__input-wrapper"), _defineProperty({}, "".concat(prefix, "--number__input-wrapper--warning"), normalizedProps.warn));
-  var iconClasses = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_cx3, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _cx3));
 
   if (controlledValue !== prevControlledValue) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -130,7 +115,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     setPrevControlledValue(controlledValue);
   }
 
-  var ariaDescribedBy = undefined;
+  let ariaDescribedBy = undefined;
 
   if (normalizedProps.invalid) {
     ariaDescribedBy = normalizedProps.invalidId;
@@ -149,7 +134,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
       return;
     }
 
-    var state = {
+    const state = {
       value: event.target.value,
       direction: value < event.target.value ? 'up' : 'down'
     };
@@ -160,7 +145,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     }
   }
 
-  var handleFocus = function handleFocus(evt) {
+  const handleFocus = evt => {
     if ('type' in evt.target && evt.target.type === 'button') {
       setIsFocused(false);
     } else {
@@ -168,8 +153,14 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     }
   };
 
-  var outerElementClasses = cx("".concat(prefix, "--form-item"), (_cx4 = {}, _defineProperty(_cx4, customClassName, !!customClassName), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--invalid"), isFluid && normalizedProps.invalid), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--focus"), isFluid && isFocused), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--disabled"), isFluid && disabled), _cx4));
-  var Icon = normalizedProps.icon;
+  const outerElementClasses = cx(`${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.createElement("div", {
     className: outerElementClasses,
     onFocus: isFluid ? handleFocus : undefined,
@@ -193,10 +184,10 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     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);
       }
@@ -205,7 +196,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
         rest.onFocus(e);
       }
     },
-    onBlur: function onBlur(e) {
+    onBlur: e => {
       if (disableWheelProp) {
         e.target.removeEventListener('wheel', disableWheel);
       }
@@ -222,13 +213,13 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   })), Icon ? /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses
   }) : null, !hideSteppers && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--number__controls")
+    className: `${prefix}--number__controls`
   }, /*#__PURE__*/React__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'
       };
@@ -238,8 +229,8 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
         onChange(event, state);
       }
 
-      if (_onClick) {
-        _onClick(event, state);
+      if (onClick) {
+        onClick(event, state);
       }
     },
     tabIndex: -1,
@@ -248,13 +239,13 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   }, _Subtract || (_Subtract = /*#__PURE__*/React__default.createElement(Subtract, {
     className: "down-icon"
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--number__rule-divider")
+    className: `${prefix}--number__rule-divider`
   }), /*#__PURE__*/React__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'
       };
@@ -264,8 +255,8 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
         onChange(event, state);
       }
 
-      if (_onClick) {
-        _onClick(event, state);
+      if (onClick) {
+        onClick(event, state);
       }
     },
     tabIndex: -1,
@@ -274,9 +265,9 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   }, _Add || (_Add = /*#__PURE__*/React__default.createElement(Add, {
     className: "up-icon"
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--number__rule-divider")
+    className: `${prefix}--number__rule-divider`
   }))), isFluid && /*#__PURE__*/React__default.createElement("hr", {
-    className: "".concat(prefix, "--number-input__divider")
+    className: `${prefix}--number-input__divider`
   }), normalizedProps.validation ? normalizedProps.validation : /*#__PURE__*/React__default.createElement(HelperText, {
     id: normalizedProps.helperId,
     disabled: disabled,
@@ -418,15 +409,19 @@ NumberInput.propTypes = {
   warnText: PropTypes.node
 };
 
-function Label(_ref2) {
-  var _cx5;
-
-  var disabled = _ref2.disabled,
-      id = _ref2.id,
-      hideLabel = _ref2.hideLabel,
-      label = _ref2.label;
-  var prefix = usePrefix();
-  var className = cx((_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--label"), true), _defineProperty(_cx5, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx5, "".concat(prefix, "--visually-hidden"), hideLabel), _cx5));
+function Label(_ref) {
+  let {
+    disabled,
+    id,
+    hideLabel,
+    label
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx({
+    [`${prefix}--label`]: true,
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--visually-hidden`]: hideLabel
+  });
 
   if (label) {
     return /*#__PURE__*/React__default.createElement("label", {
@@ -445,12 +440,16 @@ Label.propTypes = {
   label: PropTypes.node
 };
 
-function HelperText(_ref3) {
-  var disabled = _ref3.disabled,
-      description = _ref3.description,
-      id = _ref3.id;
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+function HelperText(_ref2) {
+  let {
+    disabled,
+    description,
+    id
+  } = _ref2;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
 
   if (description) {
     return /*#__PURE__*/React__default.createElement("div", {
@@ -481,12 +480,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;
@@ -532,12 +533,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/es/components/OrderedList/OrderedList.js

@@ -5,26 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-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 = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var classNames = cx((_classnames = {}, _defineProperty(_classnames, "".concat(prefix, "--list--ordered"), !native), _defineProperty(_classnames, "".concat(prefix, "--list--ordered--native"), native), _defineProperty(_classnames, "".concat(prefix, "--list--nested"), nested), _defineProperty(_classnames, "".concat(prefix, "--list--expressive"), isExpressive), _classnames), className);
+const OrderedList = _ref => {
+  let {
+    children,
+    className,
+    nested,
+    native,
+    isExpressive,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx({
+    [`${prefix}--list--ordered`]: !native,
+    [`${prefix}--list--ordered--native`]: native,
+    [`${prefix}--list--nested`]: nested,
+    [`${prefix}--list--expressive`]: isExpressive
+  }, className);
   return /*#__PURE__*/React__default.createElement("ol", _extends({
     className: classNames
   }, other), children);