@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/NotificationsPanel/utils.js

@@ -5,26 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var timeAgo = function timeAgo(_ref) {
-  var previousTime = _ref.previousTime,
-    secondsAgoText = _ref.secondsAgoText,
-    minuteAgoText = _ref.minuteAgoText,
-    minutesAgoText = _ref.minutesAgoText,
-    hoursAgoText = _ref.hoursAgoText,
-    hourAgoText = _ref.hourAgoText,
-    daysAgoText = _ref.daysAgoText,
-    yesterdayAtText = _ref.yesterdayAtText,
-    monthsAgoText = _ref.monthsAgoText,
-    monthAgoText = _ref.monthAgoText,
-    yearsAgoText = _ref.yearsAgoText,
-    yearAgoText = _ref.yearAgoText,
-    nowText = _ref.nowText;
-  var msPerMinute = 60 * 1000;
-  var msPerHour = msPerMinute * 60;
-  var msPerDay = msPerHour * 24;
-  var msPerMonth = msPerDay * 30;
-  var msPerYear = msPerDay * 365;
-  var elapsed = new Date() - previousTime;
+const timeAgo = _ref => {
+  let {
+    previousTime,
+    secondsAgoText,
+    minuteAgoText,
+    minutesAgoText,
+    hoursAgoText,
+    hourAgoText,
+    daysAgoText,
+    yesterdayAtText,
+    monthsAgoText,
+    monthAgoText,
+    yearsAgoText,
+    yearAgoText,
+    nowText
+  } = _ref;
+  const msPerMinute = 60 * 1000;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerMonth = msPerDay * 30;
+  const msPerYear = msPerDay * 365;
+  const elapsed = new Date() - previousTime;
   switch (true) {
     case elapsed < msPerMinute:
       return Math.round(elapsed / 1000) > 10 ? secondsAgoText(Math.round(elapsed / 1000)) : nowText;
@@ -40,11 +42,11 @@ var timeAgo = function timeAgo(_ref) {
       return Math.round(elapsed / msPerYear) > 1 ? yearsAgoText(Math.round(elapsed / msPerYear)) : yearAgoText(Math.round(elapsed / msPerYear));
   }
 };
-var getBrowserLocales = function getBrowserLocales() {
-  var browserLocales = navigator.languages === undefined ? [navigator.language, 'en'] // add fallback 'en' if we can't get locale value from browser
+const getBrowserLocales = () => {
+  const browserLocales = navigator.languages === undefined ? [navigator.language, 'en'] // add fallback 'en' if we can't get locale value from browser
   : navigator.languages;
-  return browserLocales.map(function (locale) {
-    var trimmedLocale = locale.trim();
+  return browserLocales.map(locale => {
+    const trimmedLocale = locale.trim();
     return trimmedLocale;
   });
 };

package/es/components/OptionsTile/OptionsTile.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import * as carbonMotion from '@carbon/motion';
 import { ChevronDown, Locked, WarningFilled, WarningAltFilled } from '@carbon/react/icons';
-import { Toggle, Layer, Section, Heading } from '@carbon/react';
+import { Section, Toggle, Layer, Heading } from '@carbon/react';
 import React__default, { useState, useRef } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -19,55 +19,50 @@ import { useControllableState } from '../../global/js/hooks/useControllableState
 import { usePrefersReducedMotion } from '../../global/js/hooks/usePrefersReducedMotion.js';
 
 var _Locked;
-var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onChange", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
-var blockClass = "".concat(pkg.prefix, "--options-tile");
-var componentName = 'OptionsTile';
+const blockClass = `${pkg.prefix}--options-tile`;
+const componentName = 'OptionsTile';
 // Default values for props
-var defaults = {
+const defaults = {
   size: 'lg'
 };
-var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    enabled = props.enabled,
-    invalid = props.invalid,
-    invalidText = props.invalidText,
-    locked = props.locked,
-    lockedText = props.lockedText,
-    onChange = props.onChange,
-    onToggle = props.onToggle,
-    userOpen = props.open,
-    _props$size = props.size,
-    size = _props$size === void 0 ? defaults.size : _props$size,
-    summary = props.summary,
-    title = props.title,
-    userDefinedTitleId = props.titleId,
-    warn = props.warn,
-    warnText = props.warnText,
-    rest = _objectWithoutProperties(props, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    closing = _useState2[0],
-    setClosing = _useState2[1];
-  var _useControllableState = useControllableState(userOpen !== null && userOpen !== void 0 ? userOpen : false, onChange),
-    _useControllableState2 = _slicedToArray(_useControllableState, 2),
-    open = _useControllableState2[0],
-    setOpen = _useControllableState2[1];
-  var detailsRef = useRef(null);
-  var contentRef = useRef(null);
-  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== void 0 ? userDefinedTitleId : "".concat(uuidv4(), "-title");
-  var isExpandable = children !== undefined;
-  var isWarn = !invalid && warn;
-  var isLocked = !invalid && !isWarn && locked;
-  var shouldReduceMotion = usePrefersReducedMotion();
-  var expand = function expand() {
+let OptionsTile = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    enabled,
+    invalid,
+    invalidText,
+    locked,
+    lockedText,
+    onChange,
+    onToggle,
+    open: userOpen,
+    size = defaults.size,
+    summary,
+    title,
+    titleId: userDefinedTitleId,
+    warn,
+    warnText,
+    ...rest
+  } = props;
+  const [closing, setClosing] = useState(false);
+  const [open, setOpen] = useControllableState(userOpen ?? false, onChange);
+  const detailsRef = useRef(null);
+  const contentRef = useRef(null);
+  const titleId = userDefinedTitleId ?? `${uuidv4()}-title`;
+  const isExpandable = children !== undefined;
+  const isWarn = !invalid && warn;
+  const isLocked = !invalid && !isWarn && locked;
+  const shouldReduceMotion = usePrefersReducedMotion();
+  const expand = () => {
     if (detailsRef.current && contentRef.current && !shouldReduceMotion) {
       setOpen(true);
       detailsRef.current.open = true;
-      var _getComputedStyle = getComputedStyle(contentRef.current),
-        paddingTop = _getComputedStyle.paddingTop,
-        paddingBottom = _getComputedStyle.paddingBottom,
-        height = _getComputedStyle.height;
+      const {
+        paddingTop,
+        paddingBottom,
+        height
+      } = getComputedStyle(contentRef.current);
       contentRef.current.animate([{
         paddingTop: 0,
         paddingBottom: 0,
@@ -75,9 +70,9 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
         opacity: 0,
         overflow: 'hidden'
       }, {
-        paddingTop: paddingTop,
-        paddingBottom: paddingBottom,
-        height: height,
+        paddingTop,
+        paddingBottom,
+        height,
         opacity: 1,
         overflow: 'hidden'
       }], {
@@ -88,18 +83,19 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       setOpen(true);
     }
   };
-  var collapse = function collapse() {
+  const collapse = () => {
     if (contentRef.current && !shouldReduceMotion) {
       setClosing(true);
-      var _getComputedStyle2 = getComputedStyle(contentRef.current),
-        paddingTop = _getComputedStyle2.paddingTop,
-        paddingBottom = _getComputedStyle2.paddingBottom,
-        height = _getComputedStyle2.height;
-      var animationDuration = Number(carbonMotion.moderate01.replace('ms', ''));
-      var animation = contentRef.current.animate([{
-        paddingTop: paddingTop,
-        paddingBottom: paddingBottom,
-        height: height,
+      const {
+        paddingTop,
+        paddingBottom,
+        height
+      } = getComputedStyle(contentRef.current);
+      const animationDuration = Number(carbonMotion.moderate01.replace('ms', ''));
+      const animation = contentRef.current.animate([{
+        paddingTop,
+        paddingBottom,
+        height,
         opacity: 1
       }, {
         paddingTop: 0,
@@ -110,11 +106,11 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
         duration: animationDuration,
         easing: carbonMotion.easings.entrance.productive
       });
-      var callback = function callback() {
+      const callback = () => {
         setOpen(false);
         setClosing(false);
       };
-      setTimeout(function () {
+      setTimeout(() => {
         callback();
       }, animationDuration * 0.9);
       animation.oncancel = callback;
@@ -122,7 +118,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       setOpen(false);
     }
   };
-  var toggle = function toggle(evt) {
+  const toggle = evt => {
     evt.preventDefault();
     if (open) {
       collapse();
@@ -130,9 +126,9 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       expand();
     }
   };
-  var renderTitle = function renderTitle() {
-    var Icon = null;
-    var text = summary;
+  const renderTitle = () => {
+    let Icon = null;
+    let text = summary;
     if (invalid) {
       Icon = WarningFilled;
       text = invalidText;
@@ -145,31 +141,40 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
         text = lockedText;
       }
     }
-    var hasValidationState = invalid || warn || locked;
-    var summaryHidden = !hasValidationState && enabled === false;
-    var summaryClasses = cx("".concat(blockClass, "__summary"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__summary--closing"), closing), "".concat(blockClass, "__summary--open"), open), "".concat(blockClass, "__summary--invalid"), invalid), "".concat(blockClass, "__summary--warn"), warn), "".concat(blockClass, "__summary--locked"), locked), "".concat(blockClass, "__summary--hidden"), summaryHidden));
-    return /*#__PURE__*/React__default.createElement(Section, {
-      className: "".concat(blockClass, "__heading")
+    const hasValidationState = invalid || warn || locked;
+    const summaryHidden = !hasValidationState && enabled === false;
+    const summaryClasses = cx(`${blockClass}__summary`, {
+      [`${blockClass}__summary--closing`]: closing,
+      [`${blockClass}__summary--open`]: open,
+      [`${blockClass}__summary--invalid`]: invalid,
+      [`${blockClass}__summary--warn`]: warn,
+      [`${blockClass}__summary--locked`]: locked,
+      [`${blockClass}__summary--hidden`]: summaryHidden
+    });
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: `${blockClass}__heading`
     }, /*#__PURE__*/React__default.createElement(Heading, {
       id: titleId,
-      className: "".concat(blockClass, "__title")
+      className: `${blockClass}__title`
     }, title), text && /*#__PURE__*/React__default.createElement("span", {
       className: summaryClasses,
       "aria-hidden": summaryHidden
     }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
       size: 16
     }), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__summary-text")
+      className: `${blockClass}__summary-text`
     }, text)));
   };
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className, "".concat(blockClass, "--").concat(size), _defineProperty({}, "".concat(blockClass, "--closing"), closing)),
+  return /*#__PURE__*/React__default.createElement(Section, _extends({}, rest, {
+    className: cx(blockClass, className, `${blockClass}--${size}`, {
+      [`${blockClass}--closing`]: closing
+    }),
     ref: ref
   }, getDevtoolsProps(componentName)), enabled !== undefined && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__toggle-container")
+    className: `${blockClass}__toggle-container`
   }, /*#__PURE__*/React__default.createElement(Toggle, {
-    id: "".concat(titleId, "-toggle"),
-    className: "".concat(blockClass, "__toggle"),
+    id: `${titleId}-toggle`,
+    className: `${blockClass}__toggle`,
     toggled: enabled,
     "aria-labelledby": titleId,
     hideLabel: true,
@@ -177,24 +182,27 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     size: "sm",
     disabled: isLocked
   })), isExpandable ? /*#__PURE__*/React__default.createElement("details", {
-    className: "".concat(blockClass, "__details"),
+    className: `${blockClass}__details`,
     open: open,
     ref: detailsRef
   }, /*#__PURE__*/React__default.createElement("summary", {
-    className: "".concat(blockClass, "__header"),
+    className: `${blockClass}__header`,
     onClick: toggle
   }, /*#__PURE__*/React__default.createElement(ChevronDown, {
     size: 16,
-    className: cx("".concat(blockClass, "__chevron"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__chevron--open"), open), "".concat(blockClass, "__chevron--closing"), closing))
+    className: cx(`${blockClass}__chevron`, {
+      [`${blockClass}__chevron--open`]: open,
+      [`${blockClass}__chevron--closing`]: closing
+    })
   }), renderTitle()), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__content"),
+    className: `${blockClass}__content`,
     ref: contentRef
   }, /*#__PURE__*/React__default.createElement(Layer, null, isLocked && /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "__locked-text")
+    className: `${blockClass}__locked-text`
   }, _Locked || (_Locked = /*#__PURE__*/React__default.createElement(Locked, {
     size: 16
   })), lockedText), children))) : /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__static-content")
+    className: `${blockClass}__static-content`
   }, renderTitle()));
 });