@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/NotificationsPanel/utils.js

@@ -7,26 +7,28 @@
 
 'use strict';
 
-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;
@@ -42,11 +44,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/lib/components/OptionsTile/OptionsTile.js

@@ -40,55 +40,50 @@ function _interopNamespaceDefault(e) {
 var carbonMotion__namespace = /*#__PURE__*/_interopNamespaceDefault(carbonMotion);
 
 var _Locked;
-var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onChange", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
-var blockClass = "".concat(settings.pkg.prefix, "--options-tile");
-var componentName = 'OptionsTile';
+const blockClass = `${settings.pkg.prefix}--options-tile`;
+const componentName = 'OptionsTile';
 // Default values for props
-var defaults = {
+const defaults = {
   size: 'lg'
 };
-exports.OptionsTile = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    closing = _useState2[0],
-    setClosing = _useState2[1];
-  var _useControllableState = useControllableState.useControllableState(userOpen !== null && userOpen !== void 0 ? userOpen : false, onChange),
-    _useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
-    open = _useControllableState2[0],
-    setOpen = _useControllableState2[1];
-  var detailsRef = React.useRef(null);
-  var contentRef = React.useRef(null);
-  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== void 0 ? userDefinedTitleId : "".concat(uuidv4.default(), "-title");
-  var isExpandable = children !== undefined;
-  var isWarn = !invalid && warn;
-  var isLocked = !invalid && !isWarn && locked;
-  var shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
-  var expand = function expand() {
+exports.OptionsTile = /*#__PURE__*/React.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] = React.useState(false);
+  const [open, setOpen] = useControllableState.useControllableState(userOpen ?? false, onChange);
+  const detailsRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const titleId = userDefinedTitleId ?? `${uuidv4.default()}-title`;
+  const isExpandable = children !== undefined;
+  const isWarn = !invalid && warn;
+  const isLocked = !invalid && !isWarn && locked;
+  const shouldReduceMotion = usePrefersReducedMotion.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,
@@ -96,9 +91,9 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (props, ref) {
         opacity: 0,
         overflow: 'hidden'
       }, {
-        paddingTop: paddingTop,
-        paddingBottom: paddingBottom,
-        height: height,
+        paddingTop,
+        paddingBottom,
+        height,
         opacity: 1,
         overflow: 'hidden'
       }], {
@@ -109,18 +104,19 @@ exports.OptionsTile = /*#__PURE__*/React.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__namespace.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__namespace.moderate01.replace('ms', ''));
+      const animation = contentRef.current.animate([{
+        paddingTop,
+        paddingBottom,
+        height,
         opacity: 1
       }, {
         paddingTop: 0,
@@ -131,11 +127,11 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (props, ref) {
         duration: animationDuration,
         easing: carbonMotion__namespace.easings.entrance.productive
       });
-      var callback = function callback() {
+      const callback = () => {
         setOpen(false);
         setClosing(false);
       };
-      setTimeout(function () {
+      setTimeout(() => {
         callback();
       }, animationDuration * 0.9);
       animation.oncancel = callback;
@@ -143,7 +139,7 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setOpen(false);
     }
   };
-  var toggle = function toggle(evt) {
+  const toggle = evt => {
     evt.preventDefault();
     if (open) {
       collapse();
@@ -151,9 +147,9 @@ exports.OptionsTile = /*#__PURE__*/React.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 = icons.WarningFilled;
       text = invalidText;
@@ -166,31 +162,40 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (props, ref) {
         text = lockedText;
       }
     }
-    var hasValidationState = invalid || warn || locked;
-    var summaryHidden = !hasValidationState && enabled === false;
-    var summaryClasses = cx("".concat(blockClass, "__summary"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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.createElement(react.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.createElement("div", {
+      className: `${blockClass}__heading`
     }, /*#__PURE__*/React.createElement(react.Heading, {
       id: titleId,
-      className: "".concat(blockClass, "__title")
+      className: `${blockClass}__title`
     }, title), text && /*#__PURE__*/React.createElement("span", {
       className: summaryClasses,
       "aria-hidden": summaryHidden
     }, Icon && /*#__PURE__*/React.createElement(Icon, {
       size: 16
     }), /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "__summary-text")
+      className: `${blockClass}__summary-text`
     }, text)));
   };
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, className, "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--closing"), closing)),
+  return /*#__PURE__*/React.createElement(react.Section, _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass, className, `${blockClass}--${size}`, {
+      [`${blockClass}--closing`]: closing
+    }),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), enabled !== undefined && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__toggle-container")
+    className: `${blockClass}__toggle-container`
   }, /*#__PURE__*/React.createElement(react.Toggle, {
-    id: "".concat(titleId, "-toggle"),
-    className: "".concat(blockClass, "__toggle"),
+    id: `${titleId}-toggle`,
+    className: `${blockClass}__toggle`,
     toggled: enabled,
     "aria-labelledby": titleId,
     hideLabel: true,
@@ -198,24 +203,27 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (props, ref) {
     size: "sm",
     disabled: isLocked
   })), isExpandable ? /*#__PURE__*/React.createElement("details", {
-    className: "".concat(blockClass, "__details"),
+    className: `${blockClass}__details`,
     open: open,
     ref: detailsRef
   }, /*#__PURE__*/React.createElement("summary", {
-    className: "".concat(blockClass, "__header"),
+    className: `${blockClass}__header`,
     onClick: toggle
   }, /*#__PURE__*/React.createElement(icons.ChevronDown, {
     size: 16,
-    className: cx("".concat(blockClass, "__chevron"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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.createElement("div", {
-    className: "".concat(blockClass, "__content"),
+    className: `${blockClass}__content`,
     ref: contentRef
   }, /*#__PURE__*/React.createElement(react.Layer, null, isLocked && /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__locked-text")
+    className: `${blockClass}__locked-text`
   }, _Locked || (_Locked = /*#__PURE__*/React.createElement(icons.Locked, {
     size: 16
   })), lockedText), children))) : /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__static-content")
+    className: `${blockClass}__static-content`
   }, renderTitle()));
 });