@carbon/react 1.27.0 → 1.28.0

package/lib/components/Popover/index.js

@@ -23,64 +23,56 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["isTabTip", "align", "as", "autoAlign", "caret", "className", "children", "dropShadow", "highContrast", "open"],
-    _excluded2 = ["className", "children"];
-var PopoverContext = /*#__PURE__*/React__default["default"].createContext({
+const PopoverContext = /*#__PURE__*/React__default["default"].createContext({
   floating: {
     current: null
   }
 });
-var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, forwardRef) {
-  var _cx;
-
-  var isTabTip = _ref.isTabTip,
-      _ref$align = _ref.align,
-      align = _ref$align === void 0 ? isTabTip ? 'bottom-left' : 'bottom' : _ref$align,
-      as = _ref.as,
-      _ref$autoAlign = _ref.autoAlign,
-      autoAlign = _ref$autoAlign === void 0 ? false : _ref$autoAlign,
-      _ref$caret = _ref.caret,
-      caret = _ref$caret === void 0 ? isTabTip ? false : true : _ref$caret,
-      customClassName = _ref.className,
-      children = _ref.children,
-      _ref$dropShadow = _ref.dropShadow,
-      dropShadow = _ref$dropShadow === void 0 ? true : _ref$dropShadow,
-      _ref$highContrast = _ref.highContrast,
-      highContrast = _ref$highContrast === void 0 ? false : _ref$highContrast,
-      open = _ref.open,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var floating = React.useRef(null);
-  var popover = React.useRef(null);
-  var value = React.useMemo(function () {
+const Popover = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwardRef) => {
+  let {
+    isTabTip,
+    align = isTabTip ? 'bottom-left' : 'bottom',
+    as,
+    autoAlign = false,
+    caret = isTabTip ? false : true,
+    className: customClassName,
+    children,
+    dropShadow = true,
+    highContrast = false,
+    open,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const floating = React.useRef(null);
+  const popover = React.useRef(null);
+  const value = React.useMemo(() => {
     return {
-      floating: floating
+      floating
     };
   }, []);
 
   if (isTabTip) {
-    var tabTipAlignments = ['bottom-left', 'bottom-right'];
+    const tabTipAlignments = ['bottom-left', 'bottom-right'];
 
     if (!tabTipAlignments.includes(align)) {
       align = 'bottom-left';
     }
   }
 
-  var ref = useMergedRefs.useMergedRefs([forwardRef, popover]);
-
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      autoAligned = _useState2[0],
-      setAutoAligned = _useState2[1];
-
-  var _useState3 = React.useState(align),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      autoAlignment = _useState4[0],
-      setAutoAlignment = _useState4[1];
-
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned && !isTabTip), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--tab-tip"), isTabTip), _cx), customClassName);
-  useIsomorphicEffect["default"](function () {
+  const ref = useMergedRefs.useMergedRefs([forwardRef, popover]);
+  const [autoAligned, setAutoAligned] = React.useState(false);
+  const [autoAlignment, setAutoAlignment] = React.useState(align);
+  const className = cx__default["default"]({
+    [`${prefix}--popover-container`]: true,
+    [`${prefix}--popover--caret`]: caret,
+    [`${prefix}--popover--drop-shadow`]: dropShadow,
+    [`${prefix}--popover--high-contrast`]: highContrast,
+    [`${prefix}--popover--open`]: open,
+    [`${prefix}--popover--${autoAlignment}`]: autoAligned && !isTabTip,
+    [`${prefix}--popover--${align}`]: !autoAligned,
+    [`${prefix}--popover--tab-tip`]: isTabTip
+  }, customClassName);
+  useIsomorphicEffect["default"](() => {
     if (!open) {
       return;
     }
@@ -98,9 +90,9 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       return;
     }
 
-    var rect = floating.current.getBoundingClientRect(); // The conditions, per side, of when the popover is not visible, excluding the popover's internal padding(16)
+    const rect = floating.current.getBoundingClientRect(); // The conditions, per side, of when the popover is not visible, excluding the popover's internal padding(16)
 
-    var conditions = {
+    const conditions = {
       left: rect.x < -16,
       top: rect.y < -16,
       right: rect.x + (rect.width - 16) > document.documentElement.clientWidth,
@@ -112,10 +104,10 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       return;
     }
 
-    var alignments = ['top', 'top-left', 'right-bottom', 'right', 'right-top', 'bottom-left', 'bottom', 'bottom-right', 'left-top', 'left', 'left-bottom', 'top-right']; // Creates the prioritized list of options depending on ideal alignment coming from `align`
+    const alignments = ['top', 'top-left', 'right-bottom', 'right', 'right-top', 'bottom-left', 'bottom', 'bottom-right', 'left-top', 'left', 'left-bottom', 'top-right']; // Creates the prioritized list of options depending on ideal alignment coming from `align`
 
-    var options = [align];
-    var option = alignments[(alignments.indexOf(align) + 1) % alignments.length];
+    const options = [align];
+    let option = alignments[(alignments.indexOf(align) + 1) % alignments.length];
 
     while (option) {
       if (options.includes(option)) {
@@ -131,43 +123,43 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
         return false;
       }
 
-      popover.current.classList.add("".concat(prefix, "--popover--").concat(alignment));
-      var rect = floating.current.getBoundingClientRect(); // Check if popover is not visible to the left of the screen
+      popover.current.classList.add(`${prefix}--popover--${alignment}`);
+      const rect = floating.current.getBoundingClientRect(); // Check if popover is not visible to the left of the screen
 
       if (rect.x < -16) {
-        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        popover.current.classList.remove(`${prefix}--popover--${alignment}`);
         return false;
       } // Check if popover is not visible at the top of the screen
 
 
       if (rect.y < -16) {
-        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        popover.current.classList.remove(`${prefix}--popover--${alignment}`);
         return false;
       } // Check if popover is not visible to right of screen
 
 
       if (rect.x + (rect.width - 16) > document.documentElement.clientWidth) {
-        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        popover.current.classList.remove(`${prefix}--popover--${alignment}`);
         return false;
       } // Check if popover is not visible to bottom of screen
 
 
       if (rect.y + (rect.height - 16) > document.documentElement.clientHeight) {
-        popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+        popover.current.classList.remove(`${prefix}--popover--${alignment}`);
         return false;
       }
 
-      popover.current.classList.remove("".concat(prefix, "--popover--").concat(alignment));
+      popover.current.classList.remove(`${prefix}--popover--${alignment}`);
       return true;
     }
 
-    var alignment = null;
+    let alignment = null;
 
-    for (var i = 0; i < options.length; i++) {
-      var _option = options[i];
+    for (let i = 0; i < options.length; i++) {
+      const option = options[i];
 
-      if (isVisible(_option)) {
-        alignment = _option;
+      if (isVisible(option)) {
+        alignment = option;
         break;
       }
     }
@@ -177,13 +169,15 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       setAutoAlignment(alignment);
     }
   }, [autoAligned, align, autoAlign, prefix, open, isTabTip]);
-  var BaseComponent = as !== null && as !== void 0 ? as : 'span';
-  var mappedChildren = React__default["default"].Children.map(children, function (child) {
-    var item = child;
+  const BaseComponent = as ?? 'span';
+  const mappedChildren = React__default["default"].Children.map(children, child => {
+    const item = child;
 
     if ((item === null || item === void 0 ? void 0 : item.type) === 'button') {
-      var _className = item.props.className;
-      var tabTipClasses = cx__default["default"]("".concat(prefix, "--popover--tab-tip__button"), _className);
+      const {
+        className
+      } = item.props;
+      const tabTipClasses = cx__default["default"](`${prefix}--popover--tab-tip__button`, className);
       return /*#__PURE__*/React__default["default"].cloneElement(item, {
         className: tabTipClasses
       });
@@ -257,24 +251,24 @@ Popover.propTypes = {
    */
   open: PropTypes__default["default"].bool.isRequired
 };
-var PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function PopoverContent(_ref2, forwardRef) {
-  var className = _ref2.className,
-      children = _ref2.children,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _React$useContext = React__default["default"].useContext(PopoverContext),
-      floating = _React$useContext.floating;
-
-  var ref = useMergedRefs.useMergedRefs([floating, forwardRef]);
+const PopoverContent = /*#__PURE__*/React__default["default"].forwardRef(function PopoverContent(_ref2, forwardRef) {
+  let {
+    className,
+    children,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const {
+    floating
+  } = React__default["default"].useContext(PopoverContext);
+  const ref = useMergedRefs.useMergedRefs([floating, forwardRef]);
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: "".concat(prefix, "--popover")
+    className: `${prefix}--popover`
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: cx__default["default"]("".concat(prefix, "--popover-content"), className),
+    className: cx__default["default"](`${prefix}--popover-content`, className),
     ref: ref
   }, children), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--popover-caret")
+    className: `${prefix}--popover-caret`
   }));
 });
 PopoverContent.propTypes = {

package/lib/components/PrimaryButton/PrimaryButton.js

@@ -17,11 +17,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var PrimaryButton = function PrimaryButton(props) {
-  return /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
-    kind: "primary"
-  }, props));
-};
+const PrimaryButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
+  kind: "primary"
+}, props));
 
 var PrimaryButton$1 = PrimaryButton;
 

package/lib/components/ProgressBar/ProgressBar.js

@@ -25,29 +25,25 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 function ProgressBar(_ref) {
-  var _classNames;
-
-  var className = _ref.className,
-      helperText = _ref.helperText,
-      hideLabel = _ref.hideLabel,
-      label = _ref.label,
-      _ref$max = _ref.max,
-      max = _ref$max === void 0 ? 100 : _ref$max,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'big' : _ref$size,
-      _ref$status = _ref.status,
-      status = _ref$status === void 0 ? 'active' : _ref$status,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      value = _ref.value;
-  var labelId = useId.useId('progress-bar');
-  var helperId = useId.useId('progress-bar-helper');
-  var helperTextId = useId.useId('progress-bar-helper-text');
-  var prefix = usePrefix.usePrefix();
-  var isFinished = status === 'finished';
-  var isError = status === 'error';
-  var indeterminate = !isFinished && !isError && (value === null || value === undefined);
-  var cappedValue = value;
+  let {
+    className,
+    helperText,
+    hideLabel,
+    label,
+    max = 100,
+    size = 'big',
+    status = 'active',
+    type = 'default',
+    value
+  } = _ref;
+  const labelId = useId.useId('progress-bar');
+  const helperId = useId.useId('progress-bar-helper');
+  const helperTextId = useId.useId('progress-bar-helper-text');
+  const prefix = usePrefix.usePrefix();
+  const isFinished = status === 'finished';
+  const isError = status === 'error';
+  const indeterminate = !isFinished && !isError && (value === null || value === undefined);
+  let cappedValue = value;
 
   if (cappedValue > max) {
     cappedValue = max;
@@ -63,10 +59,16 @@ function ProgressBar(_ref) {
     cappedValue = max;
   }
 
-  var percentage = cappedValue / max;
-  var wrapperClasses = cx__default["default"]("".concat(prefix, "--progress-bar"), "".concat(prefix, "--progress-bar--").concat(size), "".concat(prefix, "--progress-bar--").concat(type), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--progress-bar--indeterminate"), indeterminate), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--progress-bar--finished"), isFinished), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--progress-bar--error"), isError), _classNames), className);
-  var labelClasses = cx__default["default"]("".concat(prefix, "--progress-bar__label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
-  var StatusIcon = null;
+  const percentage = cappedValue / max;
+  const wrapperClasses = cx__default["default"](`${prefix}--progress-bar`, `${prefix}--progress-bar--${size}`, `${prefix}--progress-bar--${type}`, {
+    [`${prefix}--progress-bar--indeterminate`]: indeterminate,
+    [`${prefix}--progress-bar--finished`]: isFinished,
+    [`${prefix}--progress-bar--error`]: isError
+  }, className);
+  const labelClasses = cx__default["default"](`${prefix}--progress-bar__label`, {
+    [`${prefix}--visually-hidden`]: hideLabel
+  });
+  let StatusIcon = null;
 
   if (isError) {
     StatusIcon = /*#__PURE__*/React__default["default"].forwardRef(function ErrorFilled16(props, ref) {
@@ -84,10 +86,10 @@ function ProgressBar(_ref) {
     });
   }
 
-  var ref = React.useRef();
-  useIsomorphicEffect["default"](function () {
+  const ref = React.useRef();
+  useIsomorphicEffect["default"](() => {
     if (!isFinished && !isError) {
-      ref.current.style.transform = "scaleX(".concat(percentage, ")");
+      ref.current.style.transform = `scaleX(${percentage})`;
     } else {
       ref.current.style.transform = null;
     }
@@ -98,11 +100,11 @@ function ProgressBar(_ref) {
     className: labelClasses,
     id: labelId
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--progress-bar__label-text")
+    className: `${prefix}--progress-bar__label-text`
   }, label), StatusIcon && /*#__PURE__*/React__default["default"].createElement(StatusIcon, {
-    className: "".concat(prefix, "--progress-bar__status-icon")
+    className: `${prefix}--progress-bar__status-icon`
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--progress-bar__track"),
+    className: `${prefix}--progress-bar__track`,
     role: "progressbar",
     "aria-busy": !isFinished,
     "aria-invalid": isError,
@@ -112,13 +114,13 @@ function ProgressBar(_ref) {
     "aria-valuemax": !indeterminate ? max : null,
     "aria-valuenow": !indeterminate ? cappedValue : null
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--progress-bar__bar"),
+    className: `${prefix}--progress-bar__bar`,
     ref: ref
   })), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperTextId,
-    className: "".concat(prefix, "--progress-bar__helper-text")
+    className: `${prefix}--progress-bar__helper-text`
   }, helperText, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--visually-hidden"),
+    className: `${prefix}--visually-hidden`,
     "aria-live": "polite",
     id: helperId
   }, isFinished ? 'Done' : 'Loading')));

package/lib/components/ProgressIndicator/ProgressIndicator.Skeleton.js

@@ -22,31 +22,32 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "vertical"];
-
 var _CircleDash, _Step, _Step2, _Step3, _Step4;
 
 function Step() {
-  var prefix = usePrefix.usePrefix();
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("li", {
-    className: "".concat(prefix, "--progress-step ").concat(prefix, "--progress-step--incomplete")
+    className: `${prefix}--progress-step ${prefix}--progress-step--incomplete`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--progress-step-button ").concat(prefix, "--progress-step-button--unclickable")
+    className: `${prefix}--progress-step-button ${prefix}--progress-step-button--unclickable`
   }, _CircleDash || (_CircleDash = /*#__PURE__*/React__default["default"].createElement(iconsReact.CircleDash, null)), /*#__PURE__*/React__default["default"].createElement("p", {
-    className: "".concat(prefix, "--progress-label")
+    className: `${prefix}--progress-label`
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--progress-line")
+    className: `${prefix}--progress-line`
   })));
 }
 
 function ProgressIndicatorSkeleton(_ref) {
-  var className = _ref.className,
-      vertical = _ref.vertical,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+  let {
+    className,
+    vertical,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--progress--vertical"), vertical), className)
+    className: cx__default["default"](`${prefix}--progress`, `${prefix}--skeleton`, {
+      [`${prefix}--progress--vertical`]: vertical
+    }, className)
   }, rest), _Step || (_Step = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step2 || (_Step2 = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step3 || (_Step3 = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step4 || (_Step4 = /*#__PURE__*/React__default["default"].createElement(Step, null)));
 }