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

package/es/components/Popover/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useMemo, useState } from 'react';
@@ -13,64 +13,56 @@ import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["isTabTip", "align", "as", "autoAlign", "caret", "className", "children", "dropShadow", "highContrast", "open"],
-    _excluded2 = ["className", "children"];
-var PopoverContext = /*#__PURE__*/React__default.createContext({
+const PopoverContext = /*#__PURE__*/React__default.createContext({
   floating: {
     current: null
   }
 });
-var Popover = /*#__PURE__*/React__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 = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var floating = useRef(null);
-  var popover = useRef(null);
-  var value = useMemo(function () {
+const Popover = /*#__PURE__*/React__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();
+  const floating = useRef(null);
+  const popover = useRef(null);
+  const value = 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([forwardRef, popover]);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      autoAligned = _useState2[0],
-      setAutoAligned = _useState2[1];
-
-  var _useState3 = useState(align),
-      _useState4 = _slicedToArray(_useState3, 2),
-      autoAlignment = _useState4[0],
-      setAutoAlignment = _useState4[1];
-
-  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned && !isTabTip), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _defineProperty(_cx, "".concat(prefix, "--popover--tab-tip"), isTabTip), _cx), customClassName);
-  useIsomorphicEffect(function () {
+  const ref = useMergedRefs([forwardRef, popover]);
+  const [autoAligned, setAutoAligned] = useState(false);
+  const [autoAlignment, setAutoAlignment] = useState(align);
+  const className = cx({
+    [`${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(() => {
     if (!open) {
       return;
     }
@@ -88,9 +80,9 @@ var Popover = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardRef)
       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,
@@ -102,10 +94,10 @@ var Popover = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardRef)
       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)) {
@@ -121,43 +113,43 @@ var Popover = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardRef)
         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;
       }
     }
@@ -167,13 +159,15 @@ var Popover = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardRef)
       setAutoAlignment(alignment);
     }
   }, [autoAligned, align, autoAlign, prefix, open, isTabTip]);
-  var BaseComponent = as !== null && as !== void 0 ? as : 'span';
-  var mappedChildren = React__default.Children.map(children, function (child) {
-    var item = child;
+  const BaseComponent = as ?? 'span';
+  const mappedChildren = React__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("".concat(prefix, "--popover--tab-tip__button"), _className);
+      const {
+        className
+      } = item.props;
+      const tabTipClasses = cx(`${prefix}--popover--tab-tip__button`, className);
       return /*#__PURE__*/React__default.cloneElement(item, {
         className: tabTipClasses
       });
@@ -247,24 +241,24 @@ Popover.propTypes = {
    */
   open: PropTypes.bool.isRequired
 };
-var PopoverContent = /*#__PURE__*/React__default.forwardRef(function PopoverContent(_ref2, forwardRef) {
-  var className = _ref2.className,
-      children = _ref2.children,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
-
-  var prefix = usePrefix();
-
-  var _React$useContext = React__default.useContext(PopoverContext),
-      floating = _React$useContext.floating;
-
-  var ref = useMergedRefs([floating, forwardRef]);
+const PopoverContent = /*#__PURE__*/React__default.forwardRef(function PopoverContent(_ref2, forwardRef) {
+  let {
+    className,
+    children,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix();
+  const {
+    floating
+  } = React__default.useContext(PopoverContext);
+  const ref = useMergedRefs([floating, forwardRef]);
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
-    className: "".concat(prefix, "--popover")
+    className: `${prefix}--popover`
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: cx("".concat(prefix, "--popover-content"), className),
+    className: cx(`${prefix}--popover-content`, className),
     ref: ref
   }, children), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--popover-caret")
+    className: `${prefix}--popover-caret`
   }));
 });
 PopoverContent.propTypes = {

package/es/components/PrimaryButton/PrimaryButton.js

@@ -9,11 +9,9 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default from 'react';
 import Button from '../Button/Button.js';
 
-var PrimaryButton = function PrimaryButton(props) {
-  return /*#__PURE__*/React__default.createElement(Button, _extends({
-    kind: "primary"
-  }, props));
-};
+const PrimaryButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({
+  kind: "primary"
+}, props));
 
 var PrimaryButton$1 = PrimaryButton;
 

package/es/components/ProgressBar/ProgressBar.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -15,29 +15,25 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 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('progress-bar');
-  var helperId = useId('progress-bar-helper');
-  var helperTextId = useId('progress-bar-helper-text');
-  var prefix = 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('progress-bar');
+  const helperId = useId('progress-bar-helper');
+  const helperTextId = useId('progress-bar-helper-text');
+  const prefix = 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;
@@ -53,10 +49,16 @@ function ProgressBar(_ref) {
     cappedValue = max;
   }
 
-  var percentage = cappedValue / max;
-  var wrapperClasses = cx("".concat(prefix, "--progress-bar"), "".concat(prefix, "--progress-bar--").concat(size), "".concat(prefix, "--progress-bar--").concat(type), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--progress-bar--indeterminate"), indeterminate), _defineProperty(_classNames, "".concat(prefix, "--progress-bar--finished"), isFinished), _defineProperty(_classNames, "".concat(prefix, "--progress-bar--error"), isError), _classNames), className);
-  var labelClasses = cx("".concat(prefix, "--progress-bar__label"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
-  var StatusIcon = null;
+  const percentage = cappedValue / max;
+  const wrapperClasses = cx(`${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(`${prefix}--progress-bar__label`, {
+    [`${prefix}--visually-hidden`]: hideLabel
+  });
+  let StatusIcon = null;
 
   if (isError) {
     StatusIcon = /*#__PURE__*/React__default.forwardRef(function ErrorFilled16(props, ref) {
@@ -74,10 +76,10 @@ function ProgressBar(_ref) {
     });
   }
 
-  var ref = useRef();
-  useIsomorphicEffect(function () {
+  const ref = useRef();
+  useIsomorphicEffect(() => {
     if (!isFinished && !isError) {
-      ref.current.style.transform = "scaleX(".concat(percentage, ")");
+      ref.current.style.transform = `scaleX(${percentage})`;
     } else {
       ref.current.style.transform = null;
     }
@@ -88,11 +90,11 @@ function ProgressBar(_ref) {
     className: labelClasses,
     id: labelId
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--progress-bar__label-text")
+    className: `${prefix}--progress-bar__label-text`
   }, label), StatusIcon && /*#__PURE__*/React__default.createElement(StatusIcon, {
-    className: "".concat(prefix, "--progress-bar__status-icon")
+    className: `${prefix}--progress-bar__status-icon`
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--progress-bar__track"),
+    className: `${prefix}--progress-bar__track`,
     role: "progressbar",
     "aria-busy": !isFinished,
     "aria-invalid": isError,
@@ -102,13 +104,13 @@ function ProgressBar(_ref) {
     "aria-valuemax": !indeterminate ? max : null,
     "aria-valuenow": !indeterminate ? cappedValue : null
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--progress-bar__bar"),
+    className: `${prefix}--progress-bar__bar`,
     ref: ref
   })), helperText && /*#__PURE__*/React__default.createElement("div", {
     id: helperTextId,
-    className: "".concat(prefix, "--progress-bar__helper-text")
+    className: `${prefix}--progress-bar__helper-text`
   }, helperText, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--visually-hidden"),
+    className: `${prefix}--visually-hidden`,
     "aria-live": "polite",
     id: helperId
   }, isFinished ? 'Done' : 'Loading')));

package/es/components/ProgressIndicator/ProgressIndicator.Skeleton.js

@@ -5,38 +5,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } 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';
 import { CircleDash } from '@carbon/icons-react';
 
-var _excluded = ["className", "vertical"];
-
 var _CircleDash, _Step, _Step2, _Step3, _Step4;
 
 function Step() {
-  var prefix = usePrefix();
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("li", {
-    className: "".concat(prefix, "--progress-step ").concat(prefix, "--progress-step--incomplete")
+    className: `${prefix}--progress-step ${prefix}--progress-step--incomplete`
   }, /*#__PURE__*/React__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.createElement(CircleDash, null)), /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(prefix, "--progress-label")
+    className: `${prefix}--progress-label`
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--progress-line")
+    className: `${prefix}--progress-line`
   })));
 }
 
 function ProgressIndicatorSkeleton(_ref) {
-  var className = _ref.className,
-      vertical = _ref.vertical,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
+  let {
+    className,
+    vertical,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("ul", _extends({
-    className: cx("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), _defineProperty({}, "".concat(prefix, "--progress--vertical"), vertical), className)
+    className: cx(`${prefix}--progress`, `${prefix}--skeleton`, {
+      [`${prefix}--progress--vertical`]: vertical
+    }, className)
   }, rest), _Step || (_Step = /*#__PURE__*/React__default.createElement(Step, null)), _Step2 || (_Step2 = /*#__PURE__*/React__default.createElement(Step, null)), _Step3 || (_Step3 = /*#__PURE__*/React__default.createElement(Step, null)), _Step4 || (_Step4 = /*#__PURE__*/React__default.createElement(Step, null)));
 }