@carbon/react 1.27.0 → 1.28.0-rc.0

package/lib/components/TextInput/TextInput.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
@@ -50,129 +49,142 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var _excluded = ["className", "disabled", "helperText", "hideLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "placeholder", "readOnly", "size", "type", "warn", "warnText", "enableCounter", "maxCount"];
-var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextInput(_ref, ref) {
-  var _classNames, _classNames2, _classNames3, _classNames4, _classNames7, _classNames8;
-
-  var className = _ref.className,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      helperText = _ref.helperText,
-      hideLabel = _ref.hideLabel,
-      id = _ref.id,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$invalid = _ref.invalid,
-      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      invalidText = _ref.invalidText,
-      labelText = _ref.labelText,
-      light = _ref.light,
-      _ref$onChange = _ref.onChange,
-      _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$onClick = _ref.onClick,
-      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      placeholder = _ref.placeholder,
-      readOnly = _ref.readOnly,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      _ref$warn = _ref.warn,
-      warn = _ref$warn === void 0 ? false : _ref$warn,
-      warnText = _ref.warnText,
-      _ref$enableCounter = _ref.enableCounter,
-      enableCounter = _ref$enableCounter === void 0 ? false : _ref$enableCounter,
-      maxCount = _ref.maxCount,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var enabled = index.useFeatureFlag('enable-v11-release');
-  var defaultValue = rest.defaultValue,
-      value = rest.value;
-
-  var _useState = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) || (value === null || value === void 0 ? void 0 : value.toString().length) || 0),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      textCount = _useState2[0],
-      setTextCount = _useState2[1];
-
-  var normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
-    id: id,
-    readOnly: readOnly,
-    disabled: disabled,
-    invalid: invalid,
-    invalidText: invalidText,
-    warn: warn,
-    warnText: warnText
+const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextInput(_ref, ref) {
+  let {
+    className,
+    disabled = false,
+    helperText,
+    hideLabel,
+    id,
+    inline = false,
+    invalid = false,
+    invalidText,
+    labelText,
+    light,
+    onChange = () => {},
+    onClick = () => {},
+    placeholder,
+    readOnly,
+    size = 'md',
+    type = 'text',
+    warn = false,
+    warnText,
+    enableCounter = false,
+    maxCount,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const enabled = index.useFeatureFlag('enable-v11-release');
+  const {
+    defaultValue,
+    value
+  } = rest;
+  const [textCount, setTextCount] = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) || (value === null || value === void 0 ? void 0 : value.toString().length) || 0);
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    readOnly,
+    disabled,
+    invalid,
+    invalidText,
+    warn,
+    warnText
   });
-  var textInputClasses = cx__default["default"]("".concat(prefix, "--text-input"), [enabled ? null : className], (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--invalid"), normalizedProps.invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
-
-  var sharedTextInputProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.defineProperty({
-    id: id,
-    onChange: function onChange(evt) {
+  const textInputClasses = cx__default["default"](`${prefix}--text-input`, [enabled ? null : className], {
+    [`${prefix}--text-input--light`]: light,
+    [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
+    [`${prefix}--text-input--warning`]: normalizedProps.warn,
+    [`${prefix}--text-input--${size}`]: size
+  });
+  const sharedTextInputProps = {
+    id,
+    onChange: evt => {
       if (!normalizedProps.disabled) {
         var _evt$target$value;
 
         setTextCount((_evt$target$value = evt.target.value) === null || _evt$target$value === void 0 ? void 0 : _evt$target$value.length);
-
-        _onChange(evt);
+        onChange(evt);
       }
     },
-    onClick: function onClick(evt) {
+    onClick: evt => {
       if (!normalizedProps.disabled) {
-        _onClick(evt);
+        onClick(evt);
       }
     },
-    placeholder: placeholder,
-    type: type,
-    ref: ref,
+    placeholder,
+    type,
+    ref,
     className: textInputClasses,
     title: placeholder,
     disabled: normalizedProps.disabled,
-    readOnly: readOnly
-  }, 'aria-describedby', helperText && normalizedProps.helperId), rest);
+    readOnly,
+    ['aria-describedby']: helperText && normalizedProps.helperId,
+    ...rest
+  };
 
   if (enableCounter) {
     sharedTextInputProps.maxLength = maxCount;
   }
 
-  var inputWrapperClasses = cx__default["default"]([enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")], "".concat(prefix, "--text-input-wrapper"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline--invalid"), inline && normalizedProps.invalid), _classNames2));
-  var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), normalizedProps.disabled), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
-  var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), normalizedProps.disabled), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
-  var fieldOuterWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-outer-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
-  var fieldWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-wrapper--warning"), normalizedProps.warn));
-  var iconClasses = cx__default["default"]((_classNames7 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _classNames7));
-  var counterClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames8 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--text-input__label-counter"), true), _classNames8));
-  var counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const inputWrapperClasses = cx__default["default"]([enabled ? cx__default["default"](`${prefix}--form-item`, className) : `${prefix}--form-item`], `${prefix}--text-input-wrapper`, {
+    [`${prefix}--text-input-wrapper--readonly`]: readOnly,
+    [`${prefix}--text-input-wrapper--light`]: light,
+    [`${prefix}--text-input-wrapper--inline`]: inline,
+    [`${prefix}--text-input-wrapper--inline--invalid`]: inline && normalizedProps.invalid
+  });
+  const labelClasses = cx__default["default"](`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: normalizedProps.disabled,
+    [`${prefix}--label--inline`]: inline,
+    [`${prefix}--label--inline--${size}`]: inline && !!size
+  });
+  const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,
+    [`${prefix}--form__helper-text--inline`]: inline
+  });
+  const fieldOuterWrapperClasses = cx__default["default"](`${prefix}--text-input__field-outer-wrapper`, {
+    [`${prefix}--text-input__field-outer-wrapper--inline`]: inline
+  });
+  const fieldWrapperClasses = cx__default["default"](`${prefix}--text-input__field-wrapper`, {
+    [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn
+  });
+  const iconClasses = cx__default["default"]({
+    [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
+    [`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
+  });
+  const counterClasses = cx__default["default"](`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--text-input__label-counter`]: true
+  });
+  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: counterClasses
-  }, "".concat(textCount, "/").concat(maxCount)) : null;
-  var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
+  }, `${textCount}/${maxCount}`) : null;
+  const label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  var labelWrapper = /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--text-input__label-wrapper")
+  const labelWrapper = /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--text-input__label-wrapper`
   }, label, counter);
-  var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;
-  var input = /*#__PURE__*/React__default["default"].createElement("input", util.textInputProps({
-    sharedTextInputProps: sharedTextInputProps,
+  const input = /*#__PURE__*/React__default["default"].createElement("input", util.textInputProps({
+    sharedTextInputProps,
     invalid: normalizedProps.invalid,
     invalidId: normalizedProps.invalidId,
     warn: normalizedProps.warn,
     warnId: normalizedProps.warnId
   }));
-
-  var _useContext = React.useContext(FormContext.FormContext),
-      isFluid = _useContext.isFluid;
-
-  var ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
-  var Icon = normalizedProps.icon;
+  const {
+    isFluid
+  } = React.useContext(FormContext.FormContext);
+  const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
+  const Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--text-input__label-helper-wrapper")
+    className: `${prefix}--text-input__label-helper-wrapper`
   }, labelWrapper, !isFluid && (normalizedProps.validation || helper)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: fieldOuterWrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -181,10 +193,10 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
   }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses
   }), input, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--text-input__counter-alert"),
+    className: `${prefix}--text-input__counter-alert`,
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
-    className: "".concat(prefix, "--text-input__divider")
+    className: `${prefix}--text-input__divider`
   }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
 });
 TextInput.displayName = 'TextInput';

package/lib/components/TextInput/util.js

@@ -9,42 +9,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-
-var invalidProps = function invalidProps(invalidId) {
-  return {
-    'data-invalid': true,
-    'aria-invalid': true,
-    'aria-describedby': invalidId
-  };
-};
-
-var warnProps = function warnProps(warnId) {
-  return {
-    'aria-describedby': warnId
-  };
-};
-
-var helperProps = function helperProps(helperId) {
-  return {
-    'aria-describedby': helperId
-  };
-};
+const invalidProps = invalidId => ({
+  'data-invalid': true,
+  'aria-invalid': true,
+  'aria-describedby': invalidId
+});
+
+const warnProps = warnId => ({
+  'aria-describedby': warnId
+});
+
+const helperProps = helperId => ({
+  'aria-describedby': helperId
+});
 /**
  * @param {{sharedTextInputProps: object, invalid?: boolean, invalidId?: string, warn?: boolean, warnId?: string, hasHelper?: boolean, helperId?: string}} config
  * @returns {object}
  */
 
 
-var textInputProps = function textInputProps(_ref) {
-  var sharedTextInputProps = _ref.sharedTextInputProps,
-      invalid = _ref.invalid,
-      invalidId = _ref.invalidId,
-      warn = _ref.warn,
-      warnId = _ref.warnId,
-      hasHelper = _ref.hasHelper,
-      helperId = _ref.helperId;
-  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, sharedTextInputProps), invalid ? invalidProps(invalidId) : {}), warn ? warnProps(warnId) : {}), hasHelper ? helperProps(helperId) : {});
+const textInputProps = _ref => {
+  let {
+    sharedTextInputProps,
+    invalid,
+    invalidId,
+    warn,
+    warnId,
+    hasHelper,
+    helperId
+  } = _ref;
+  return { ...sharedTextInputProps,
+    ...(invalid ? invalidProps(invalidId) : {}),
+    ...(warn ? warnProps(warnId) : {}),
+    ...(hasHelper ? helperProps(helperId) : {})
+  };
 };
 
 exports.textInputProps = textInputProps;

package/lib/components/Theme/index.js

@@ -22,16 +22,17 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["as", "children", "className", "theme"];
-var ThemeContext = /*#__PURE__*/React__default["default"].createContext({
+const ThemeContext = /*#__PURE__*/React__default["default"].createContext({
   theme: 'white'
 });
 function GlobalTheme(_ref) {
-  var children = _ref.children,
-      theme = _ref.theme;
-  var value = React.useMemo(function () {
+  let {
+    children,
+    theme
+  } = _ref;
+  const value = React.useMemo(() => {
     return {
-      theme: theme
+      theme
     };
   }, [theme]);
   return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, {
@@ -55,20 +56,24 @@ GlobalTheme.propTypes = {
  */
 
 function Theme(_ref2) {
-  var _cx;
-
-  var _ref2$as = _ref2.as,
-      BaseComponent = _ref2$as === void 0 ? 'div' : _ref2$as,
-      children = _ref2.children,
-      customClassName = _ref2.className,
-      theme = _ref2.theme,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--white"), theme === 'white'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--g10"), theme === 'g10'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--g90"), theme === 'g90'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--g100"), theme === 'g100'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--layer-one"), true), _cx));
-  var value = React__default["default"].useMemo(function () {
+  let {
+    as: BaseComponent = 'div',
+    children,
+    className: customClassName,
+    theme,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](customClassName, {
+    [`${prefix}--white`]: theme === 'white',
+    [`${prefix}--g10`]: theme === 'g10',
+    [`${prefix}--g90`]: theme === 'g90',
+    [`${prefix}--g100`]: theme === 'g100',
+    [`${prefix}--layer-one`]: true
+  });
+  const value = React__default["default"].useMemo(() => {
     return {
-      theme: theme
+      theme
     };
   }, [theme]);
   return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, {