@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/WebTerminal/WebTerminal.js

@@ -18,14 +18,12 @@ var settings = require('../../settings.js');
 var index$1 = require('./hooks/index.js');
 var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 
-var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen", "webTerminalAriaLabel"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var componentName = 'WebTerminal';
-var blockClass = "".concat(settings.pkg.prefix, "--web-terminal");
+const componentName = 'WebTerminal';
+const blockClass = `${settings.pkg.prefix}--web-terminal`;
 
 // Default values for props
-var defaults = {
+const defaults = {
   actions: Object.freeze([]),
   documentationLinks: Object.freeze([]),
   documentationLinksIconDescription: 'Show documentation links',
@@ -35,36 +33,32 @@ var defaults = {
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
-exports.WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$actions = _ref.actions,
-    actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
-    children = _ref.children,
-    className = _ref.className,
-    closeIconDescription = _ref.closeIconDescription,
-    _ref$documentationLin = _ref.documentationLinks,
-    documentationLinks = _ref$documentationLin === void 0 ? defaults.documentationLinks : _ref$documentationLin,
-    _ref$documentationLin2 = _ref.documentationLinksIconDescription,
-    documentationLinksIconDescription = _ref$documentationLin2 === void 0 ? defaults.documentationLinksIconDescription : _ref$documentationLin2,
-    _ref$isInitiallyOpen = _ref.isInitiallyOpen,
-    isInitiallyOpen = _ref$isInitiallyOpen === void 0 ? defaults.isInitiallyOpen : _ref$isInitiallyOpen,
-    _ref$webTerminalAriaL = _ref.webTerminalAriaLabel,
-    webTerminalAriaLabel = _ref$webTerminalAriaL === void 0 ? defaults.webTerminalAriaLabel : _ref$webTerminalAriaL,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var localRef = React.useRef(null);
-  var webTerminalRef = ref !== null && ref !== void 0 ? ref : localRef;
-  var _useWebTerminal = index$1.useWebTerminal(),
-    open = _useWebTerminal.open,
-    closeWebTerminal = _useWebTerminal.closeWebTerminal,
-    openWebTerminal = _useWebTerminal.openWebTerminal;
-  var _useState = React.useState(open),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    shouldRender = _useState2[0],
-    setRender = _useState2[1];
-  var shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
-  var showDocumentationLinks = React.useMemo(function () {
-    return documentationLinks.length > 0;
-  }, [documentationLinks]);
-  React.useEffect(function () {
+exports.WebTerminal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    actions = defaults.actions,
+    children,
+    className,
+    closeIconDescription,
+    documentationLinks = defaults.documentationLinks,
+    documentationLinksIconDescription = defaults.documentationLinksIconDescription,
+    isInitiallyOpen = defaults.isInitiallyOpen,
+    webTerminalAriaLabel = defaults.webTerminalAriaLabel,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const localRef = React.useRef(null);
+  const webTerminalRef = ref ?? localRef;
+  const {
+    open,
+    closeWebTerminal,
+    openWebTerminal
+  } = index$1.useWebTerminal();
+  const [shouldRender, setRender] = React.useState(open);
+  const shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
+  const showDocumentationLinks = React.useMemo(() => documentationLinks.length > 0, [documentationLinks]);
+  React.useEffect(() => {
     if (open) {
       setRender(true);
     }
@@ -73,21 +67,21 @@ exports.WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   /**
     On render, check if user want's the web terminal to be open by default
   */
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (isInitiallyOpen) {
-      openWebTerminal === null || openWebTerminal === void 0 || openWebTerminal();
+      openWebTerminal?.();
     }
   }, []); // eslint-disable-line
 
   /**
     When the web terminal slide in animation is complete, sets render to false.
   */
-  var onAnimationEnd = function onAnimationEnd() {
+  const onAnimationEnd = () => {
     if (!open) {
       setRender(false);
     }
   };
-  var handleCloseTerminal = function handleCloseTerminal() {
+  const handleCloseTerminal = () => {
     /**
       If the user prefers reduced motion, we have to manually set render to false
       because onAnimationEnd will never be called.
@@ -95,36 +89,41 @@ exports.WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (shouldReduceMotion) {
       setRender(false);
     }
-    closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
+    closeWebTerminal?.();
   };
-  return shouldRender ? /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), devtools.getDevtoolsProps(componentName)), {
+  return shouldRender ? /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, devtools.getDevtoolsProps(componentName), {
     ref: webTerminalRef,
-    className: cx([blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
+    className: cx([blockClass, className, {
+      [`${blockClass}--open`]: open,
+      [`${blockClass}--closed`]: !open
+    }]),
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React.createElement("header", {
     "aria-label": webTerminalAriaLabel,
-    className: "".concat(blockClass, "__bar")
+    className: `${blockClass}__bar`
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__actions")
+    className: `${blockClass}__actions`
   }, showDocumentationLinks && /*#__PURE__*/React.createElement(react.OverflowMenu, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(icons.Help, _rollupPluginBabelHelpers.extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: props => /*#__PURE__*/React.createElement(icons.Help, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)),
     iconDescription: documentationLinksIconDescription,
     "aria-label": documentationLinksIconDescription,
-    menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
+    menuOptionsClass: `${blockClass}__documentation-overflow`,
     size: "lg"
-  }, documentationLinks.map(function (_ref3, i) {
-    var rest = _rollupPluginBabelHelpers.extends({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref3), _ref3));
+  }, documentationLinks.map((_ref2, i) => {
+    let {
+      ...rest
+    } = _ref2;
     return /*#__PURE__*/React.createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers.extends({
       key: i
     }, rest));
-  })), actions.map(function (_ref4) {
-    var renderIcon = _ref4.renderIcon,
-      onClick = _ref4.onClick,
-      iconDescription = _ref4.iconDescription;
+  })), actions.map(_ref3 => {
+    let {
+      renderIcon,
+      onClick,
+      iconDescription
+    } = _ref3;
     return /*#__PURE__*/React.createElement(react.Button, {
       key: iconDescription,
       hasIconOnly: true,
@@ -136,21 +135,17 @@ exports.WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
   })), /*#__PURE__*/React.createElement(react.Button, {
     hasIconOnly: true,
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(icons.Close, _rollupPluginBabelHelpers.extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: props => /*#__PURE__*/React.createElement(icons.Close, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)),
     kind: "ghost",
     iconDescription: closeIconDescription,
     onClick: handleCloseTerminal,
-    onAnimationEnd: function onAnimationEnd(event) {
-      return event.stopPropagation();
-    }
+    onAnimationEnd: event => event.stopPropagation()
   })), /*#__PURE__*/React.createElement(react.Theme, {
     theme: "g100"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__body")
+    className: `${blockClass}__body`
   }, children))) : null;
 });
 
@@ -190,7 +185,9 @@ exports.WebTerminal.propTypes = {
    * Array of objects for each documentation link. Each documentation link uses the prop types of OverflowMenuItems. See more: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default
    */
   /**@ts-ignore */
-  documentationLinks: index.default.arrayOf(index.default.shape(_rollupPluginBabelHelpers.objectSpread2({}, react.OverflowMenuItem.propTypes))),
+  documentationLinks: index.default.arrayOf(index.default.shape({
+    ...react.OverflowMenuItem.propTypes
+  })),
   /**
    * Description for the documentation link overflow menu tooltip
    */

package/lib/components/WebTerminal/WebTerminalContentWrapper.js

@@ -14,19 +14,24 @@ var cx = require('classnames');
 var settings = require('../../settings.js');
 var index$1 = require('./hooks/index.js');
 
-var _excluded = ["children"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var componentName = 'WebTerminalContentWrapper';
-var blockClass = "".concat(settings.pkg.prefix, "--web-terminal-content-wrapper");
-exports.WebTerminalContentWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useWebTerminal = index$1.useWebTerminal(),
-    open = _useWebTerminal.open;
+const componentName = 'WebTerminalContentWrapper';
+const blockClass = `${settings.pkg.prefix}--web-terminal-content-wrapper`;
+exports.WebTerminalContentWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    children,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const {
+    open
+  } = index$1.useWebTerminal();
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     ref: ref,
-    className: cx([blockClass, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--open"), open)])
+    className: cx([blockClass, {
+      [`${blockClass}--open`]: open
+    }])
   }, rest), children);
 });
 

package/lib/components/WebTerminal/hooks/index.js

@@ -7,34 +7,32 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../../_virtual/index.js');
 var settings = require('../../../settings.js');
 
-var WebTerminalContext = /*#__PURE__*/React.createContext({});
-var componentName = 'WebTerminalProvider';
-exports.WebTerminalProvider = function WebTerminalProvider(_ref) {
-  var children = _ref.children;
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var openWebTerminal = React.useCallback(function () {
-    return setOpen(true);
-  }, []);
-  var closeWebTerminal = React.useCallback(function () {
-    return setOpen(false);
-  }, []);
-  var toggleWebTerminal = React.useCallback(function () {
-    return setOpen(!open);
-  }, [open]);
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+const WebTerminalContext = /*#__PURE__*/React.createContext({});
+const componentName = 'WebTerminalProvider';
+exports.WebTerminalProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  const [open, setOpen] = React.useState(false);
+  const openWebTerminal = React.useCallback(() => setOpen(true), []);
+  const closeWebTerminal = React.useCallback(() => setOpen(false), []);
+  const toggleWebTerminal = React.useCallback(() => setOpen(!open), [open]);
   return /*#__PURE__*/React.createElement(WebTerminalContext.Provider, {
     value: {
-      open: open,
-      openWebTerminal: openWebTerminal,
-      closeWebTerminal: closeWebTerminal,
-      toggleWebTerminal: toggleWebTerminal
+      open,
+      openWebTerminal,
+      closeWebTerminal,
+      toggleWebTerminal
     }
   }, children);
 };
@@ -49,7 +47,7 @@ exports.WebTerminalProvider.propTypes = {
 };
 
 // Custom hook that exposes the provided value from context
-var useWebTerminal = function useWebTerminal() {
+const useWebTerminal = () => {
   return React.useContext(WebTerminalContext);
 };
 

package/lib/components/_Canary/Canary.js

@@ -15,19 +15,24 @@ var packageSettings = require('../../global/js/package-settings.js');
 var react = require('@carbon/react');
 
 var _p, _br, _p2, _br2, _p3;
-var _excluded = ["className", "componentName"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(packageSettings.default.prefix, "--canary");
+const blockClass = `${packageSettings.default.prefix}--canary`;
 
 /**
  *  Canary component used when the component requested is not yet production
  */
-var Canary = function Canary(_ref /*, originalArgs*/) {
-  var className = _ref.className,
-    componentName = _ref.componentName,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var instructions = "\nimport { pkg } from '@carbon/ibm-products';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
+const Canary = (_ref /*, originalArgs*/) => {
+  let {
+    className,
+    componentName,
+    ...rest
+  } = _ref;
+  const instructions = `
+import { pkg } from '@carbon/ibm-products';
+// NOTE: must happen before component is first used
+pkg.component.${componentName} = true;
+`;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className)
   }), /*#__PURE__*/React.createElement("h2", null, "This component ", /*#__PURE__*/React.createElement("strong", null, componentName), " is not ready yet."), _p || (_p = /*#__PURE__*/React.createElement("p", null, "To enable it, initialize package flags before the component is first used.")), _br || (_br = /*#__PURE__*/React.createElement("br", null)), _p2 || (_p2 = /*#__PURE__*/React.createElement("p", null, "e.g. in main.js")), /*#__PURE__*/React.createElement(react.CodeSnippet, {

package/lib/global/js/hooks/useActiveElement.js

@@ -7,20 +7,16 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 
-var useActiveElement = function useActiveElement() {
-  var _useState = React.useState(document.activeElement),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    active = _useState2[0],
-    setActive = _useState2[1];
-  var handleFocusIn = function handleFocusIn() {
+const useActiveElement = () => {
+  const [active, setActive] = React.useState(document.activeElement);
+  const handleFocusIn = () => {
     setActive(document.activeElement);
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     document.addEventListener('focusin', handleFocusIn);
-    return function () {
+    return () => {
       document.removeEventListener('focusin', handleFocusIn);
     };
   }, []);

package/lib/global/js/hooks/useClickOutside.js

@@ -9,15 +9,15 @@
 
 var React = require('react');
 
-var useClickOutside = function useClickOutside(ref, callback) {
-  React.useEffect(function () {
-    var handleClick = function handleClick(event) {
+const useClickOutside = (ref, callback) => {
+  React.useEffect(() => {
+    const handleClick = event => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback(event.target);
       }
     };
     document.addEventListener('click', handleClick);
-    return function () {
+    return () => {
       document.removeEventListener('click', handleClick);
     };
   }, [callback, ref]);

package/lib/global/js/hooks/useControllableState.js

@@ -7,7 +7,6 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 
 /**
@@ -20,12 +19,9 @@ function useControllableState(value, onChange) {
   if (typeof value === 'function') {
     throw new TypeError('Functions are not supported');
   }
-  var _useState = React.useState(value),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    uncontrolledValue = _useState2[0],
-    setUncontrolledValue = _useState2[1];
-  var onControlledChange = React.useCallback(function (controlledValue) {
-    onChange === null || onChange === void 0 || onChange(controlledValue);
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(value);
+  const onControlledChange = React.useCallback(controlledValue => {
+    onChange?.(controlledValue);
   }, [onChange]);
   if (typeof onChange === 'function') {
     return [value, onControlledChange];

package/lib/global/js/hooks/useCreateComponentFocus.js

@@ -7,46 +7,32 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var wait = require('../utils/wait.js');
 
 // Focus the first focusable element and call the onMount prop for the current step if one is provided
-var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
-  var previousState = _ref.previousState,
-    currentStep = _ref.currentStep,
-    blockClass = _ref.blockClass,
-    onMount = _ref.onMount,
-    firstFocusElement = _ref.firstFocusElement;
-  React.useEffect(function () {
+const useCreateComponentFocus = _ref => {
+  let {
+    previousState,
+    currentStep,
+    blockClass,
+    onMount,
+    firstFocusElement
+  } = _ref;
+  React.useEffect(() => {
     if (typeof onMount === 'function') {
       onMount();
     }
   }, [onMount]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     // because of how handleStackChange.claimFocus in TearsheetShell works a timeout is required to focus on specific elements
-    var awaitFocus = /*#__PURE__*/function () {
-      var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(elm) {
-        return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return wait.default(10);
-            case 2:
-              elm.focus();
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function awaitFocus(_x) {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
+    const awaitFocus = async elm => {
+      await wait.default(10);
+      elm.focus();
+    };
+    if (previousState?.currentStep !== currentStep && currentStep > 0) {
       if (firstFocusElement) {
-        var elm = document.querySelector(firstFocusElement);
+        const elm = document.querySelector(firstFocusElement);
         if (elm) {
           awaitFocus(elm);
         }