@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/UserProfileImage/UserProfileImage.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import '../../global/js/utils/props-helper.js';
 import { Group, User } from '@carbon/react/icons';
 import { usePrefix, Tooltip } from '@carbon/react';
@@ -16,87 +16,72 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
-var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--user-profile-image");
-var componentName = 'UserProfileImage';
+const blockClass = `${pkg.prefix}--user-profile-image`;
+const componentName = 'UserProfileImage';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
  * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
  */
-var UserProfileImage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+let UserProfileImage = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   var _FillItem;
-  var backgroundColor = _ref.backgroundColor,
-    className = _ref.className,
-    kind = _ref.kind,
-    icon = _ref.icon,
-    initials = _ref.initials,
-    image = _ref.image,
-    imageDescription = _ref.imageDescription,
-    size = _ref.size,
-    theme = _ref.theme,
-    tooltipText = _ref.tooltipText,
-    _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var carbonPrefix = usePrefix();
-  var icons = {
+  let {
+    backgroundColor,
+    className,
+    kind,
+    icon,
+    initials,
+    image,
+    imageDescription,
+    size,
+    theme,
+    tooltipText,
+    tooltipAlignment = 'bottom',
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const carbonPrefix = usePrefix();
+  const icons = {
     user: {
-      md: function md(props) {
-        return /*#__PURE__*/React__default.createElement(User, _extends({
-          size: 20
-        }, props));
-      },
-      lg: function lg(props) {
-        return /*#__PURE__*/React__default.createElement(User, _extends({
-          size: 24
-        }, props));
-      },
-      xl: function xl(props) {
-        return /*#__PURE__*/React__default.createElement(User, _extends({
-          size: 32
-        }, props));
-      }
+      md: props => /*#__PURE__*/React__default.createElement(User, _extends({
+        size: 20
+      }, props)),
+      lg: props => /*#__PURE__*/React__default.createElement(User, _extends({
+        size: 24
+      }, props)),
+      xl: props => /*#__PURE__*/React__default.createElement(User, _extends({
+        size: 32
+      }, props))
     },
     group: {
-      md: function md(props) {
-        return /*#__PURE__*/React__default.createElement(Group, _extends({
-          size: 20
-        }, props));
-      },
-      lg: function lg(props) {
-        return /*#__PURE__*/React__default.createElement(Group, _extends({
-          size: 24
-        }, props));
-      },
-      xl: function xl(props) {
-        return /*#__PURE__*/React__default.createElement(Group, _extends({
-          size: 32
-        }, props));
-      }
+      md: props => /*#__PURE__*/React__default.createElement(Group, _extends({
+        size: 20
+      }, props)),
+      lg: props => /*#__PURE__*/React__default.createElement(Group, _extends({
+        size: 24
+      }, props)),
+      xl: props => /*#__PURE__*/React__default.createElement(Group, _extends({
+        size: 32
+      }, props))
     }
   };
-  var formatInitials = function formatInitials() {
-    var _match;
+  const formatInitials = () => {
     if (initials && initials.length === 2) {
       return initials;
     }
     // RegEx takes in the display name and returns the first and last initials. Thomas Watson and Thomas J. Watson
     // both return JW.
-    return ((_match = (initials || '').match(/(^\S\S?|\b\S)?/g)) === null || _match === void 0 || (_match = _match.join('').match(/(^\S|\S$)?/g)) === null || _match === void 0 ? void 0 : _match.join('').toUpperCase()) || '';
+    return (initials || '').match(/(^\S\S?|\b\S)?/g)?.join('').match(/(^\S|\S$)?/g)?.join('').toUpperCase() || '';
   };
-  var getFillItem = function getFillItem() {
+  const getFillItem = () => {
     if (image) {
-      return function () {
-        return /*#__PURE__*/React__default.createElement("img", {
-          alt: imageDescription,
-          src: image,
-          className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
-        });
-      };
+      return () => /*#__PURE__*/React__default.createElement("img", {
+        alt: imageDescription,
+        src: image,
+        className: `${blockClass}__photo ${blockClass}__photo--${size}`
+      });
     }
     if (initials) {
       return formatInitials;
@@ -108,21 +93,19 @@ var UserProfileImage = /*#__PURE__*/React__default.forwardRef(function (_ref, re
   };
 
   // if user doesn't provide a color just generate a random one
-  var getRandomColor = function getRandomColor() {
-    var colors = ['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal'];
+  const getRandomColor = () => {
+    const colors = ['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal'];
     return colors[Math.floor(Math.random() * colors.length)];
   };
-  var FillItem = getFillItem();
-  var renderUserProfileImage = function renderUserProfileImage() {
-    return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-      ref: ref,
-      className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
-    }, getDevtoolsProps(componentName)), _FillItem || (_FillItem = /*#__PURE__*/React__default.createElement(FillItem, null)));
-  };
+  const FillItem = getFillItem();
+  const renderUserProfileImage = () => /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    ref: ref,
+    className: cx([blockClass, className, `${blockClass}--${size}`, `${blockClass}--${theme}`, `${blockClass}--${backgroundColor || getRandomColor()}`])
+  }, getDevtoolsProps(componentName)), _FillItem || (_FillItem = /*#__PURE__*/React__default.createElement(FillItem, null)));
   return FillItem && (tooltipText ? /*#__PURE__*/React__default.createElement(Tooltip, {
     align: tooltipAlignment,
     label: tooltipText,
-    className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+    className: `${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`
   }, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
 });
 
@@ -152,8 +135,10 @@ UserProfileImage.propTypes = {
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
   /**@ts-ignore */
-  imageDescription: PropTypes.string.isRequired.if(function (_ref2) {
-    var image = _ref2.image;
+  imageDescription: PropTypes.string.isRequired.if(_ref2 => {
+    let {
+      image
+    } = _ref2;
     return !!image;
   }),
   /**

package/es/components/WebTerminal/WebTerminal.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectDestructuringEmpty as _objectDestructuringEmpty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { OverflowMenuItem, OverflowMenu, Button, Theme } from '@carbon/react';
 import { Help, Close } from '@carbon/react/icons';
 import React__default, { useRef, useState, useMemo, useEffect } from 'react';
@@ -16,14 +16,12 @@ import { pkg } from '../../settings.js';
 import { useWebTerminal } from './hooks/index.js';
 import { usePrefersReducedMotion } from '../../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(pkg.prefix, "--web-terminal");
+const componentName = 'WebTerminal';
+const blockClass = `${pkg.prefix}--web-terminal`;
 
 // Default values for props
-var defaults = {
+const defaults = {
   actions: Object.freeze([]),
   documentationLinks: Object.freeze([]),
   documentationLinksIconDescription: 'Show documentation links',
@@ -33,36 +31,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.
  */
-var WebTerminal = /*#__PURE__*/React__default.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 = _objectWithoutProperties(_ref, _excluded);
-  var localRef = useRef(null);
-  var webTerminalRef = ref !== null && ref !== void 0 ? ref : localRef;
-  var _useWebTerminal = useWebTerminal(),
-    open = _useWebTerminal.open,
-    closeWebTerminal = _useWebTerminal.closeWebTerminal,
-    openWebTerminal = _useWebTerminal.openWebTerminal;
-  var _useState = useState(open),
-    _useState2 = _slicedToArray(_useState, 2),
-    shouldRender = _useState2[0],
-    setRender = _useState2[1];
-  var shouldReduceMotion = usePrefersReducedMotion();
-  var showDocumentationLinks = useMemo(function () {
-    return documentationLinks.length > 0;
-  }, [documentationLinks]);
-  useEffect(function () {
+let WebTerminal = /*#__PURE__*/React__default.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 = useRef(null);
+  const webTerminalRef = ref ?? localRef;
+  const {
+    open,
+    closeWebTerminal,
+    openWebTerminal
+  } = useWebTerminal();
+  const [shouldRender, setRender] = useState(open);
+  const shouldReduceMotion = usePrefersReducedMotion();
+  const showDocumentationLinks = useMemo(() => documentationLinks.length > 0, [documentationLinks]);
+  useEffect(() => {
     if (open) {
       setRender(true);
     }
@@ -71,21 +65,21 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   /**
     On render, check if user want's the web terminal to be open by default
   */
-  useEffect(function () {
+  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.
@@ -93,36 +87,41 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     if (shouldReduceMotion) {
       setRender(false);
     }
-    closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
+    closeWebTerminal?.();
   };
-  return shouldRender ? /*#__PURE__*/React__default.createElement("div", _extends({}, _objectSpread2(_objectSpread2({}, rest), getDevtoolsProps(componentName)), {
+  return shouldRender ? /*#__PURE__*/React__default.createElement("div", _extends({}, rest, getDevtoolsProps(componentName), {
     ref: webTerminalRef,
-    className: cx([blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
+    className: cx([blockClass, className, {
+      [`${blockClass}--open`]: open,
+      [`${blockClass}--closed`]: !open
+    }]),
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default.createElement("header", {
     "aria-label": webTerminalAriaLabel,
-    className: "".concat(blockClass, "__bar")
+    className: `${blockClass}__bar`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__actions")
+    className: `${blockClass}__actions`
   }, showDocumentationLinks && /*#__PURE__*/React__default.createElement(OverflowMenu, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default.createElement(Help, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: props => /*#__PURE__*/React__default.createElement(Help, _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 = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+  }, documentationLinks.map((_ref2, i) => {
+    let {
+      ...rest
+    } = _ref2;
     return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _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__default.createElement(Button, {
       key: iconDescription,
       hasIconOnly: true,
@@ -134,21 +133,17 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     });
   })), /*#__PURE__*/React__default.createElement(Button, {
     hasIconOnly: true,
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React__default.createElement(Close, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: props => /*#__PURE__*/React__default.createElement(Close, _extends({
+      size: 16
+    }, props)),
     kind: "ghost",
     iconDescription: closeIconDescription,
     onClick: handleCloseTerminal,
-    onAnimationEnd: function onAnimationEnd(event) {
-      return event.stopPropagation();
-    }
+    onAnimationEnd: event => event.stopPropagation()
   })), /*#__PURE__*/React__default.createElement(Theme, {
     theme: "g100"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__body")
+    className: `${blockClass}__body`
   }, children))) : null;
 });
 
@@ -188,7 +183,9 @@ 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: PropTypes.arrayOf(PropTypes.shape(_objectSpread2({}, OverflowMenuItem.propTypes))),
+  documentationLinks: PropTypes.arrayOf(PropTypes.shape({
+    ...OverflowMenuItem.propTypes
+  })),
   /**
    * Description for the documentation link overflow menu tooltip
    */

package/es/components/WebTerminal/WebTerminalContentWrapper.js

@@ -5,26 +5,31 @@
  * 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 React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import { useWebTerminal } from './hooks/index.js';
 
-var _excluded = ["children"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var componentName = 'WebTerminalContentWrapper';
-var blockClass = "".concat(pkg.prefix, "--web-terminal-content-wrapper");
-var WebTerminalContentWrapper = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useWebTerminal = useWebTerminal(),
-    open = _useWebTerminal.open;
+const componentName = 'WebTerminalContentWrapper';
+const blockClass = `${pkg.prefix}--web-terminal-content-wrapper`;
+let WebTerminalContentWrapper = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    children,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const {
+    open
+  } = useWebTerminal();
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
-    className: cx([blockClass, _defineProperty({}, "".concat(blockClass, "--open"), open)])
+    className: cx([blockClass, {
+      [`${blockClass}--open`]: open
+    }])
   }, rest), children);
 });
 

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

@@ -5,34 +5,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useCallback, createContext, useContext } from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import { pkg } from '../../../settings.js';
 
-var WebTerminalContext = /*#__PURE__*/createContext({});
-var componentName = 'WebTerminalProvider';
-var WebTerminalProvider = function WebTerminalProvider(_ref) {
-  var children = _ref.children;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var openWebTerminal = useCallback(function () {
-    return setOpen(true);
-  }, []);
-  var closeWebTerminal = useCallback(function () {
-    return setOpen(false);
-  }, []);
-  var toggleWebTerminal = 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__*/createContext({});
+const componentName = 'WebTerminalProvider';
+let WebTerminalProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  const [open, setOpen] = useState(false);
+  const openWebTerminal = useCallback(() => setOpen(true), []);
+  const closeWebTerminal = useCallback(() => setOpen(false), []);
+  const toggleWebTerminal = useCallback(() => setOpen(!open), [open]);
   return /*#__PURE__*/React__default.createElement(WebTerminalContext.Provider, {
     value: {
-      open: open,
-      openWebTerminal: openWebTerminal,
-      closeWebTerminal: closeWebTerminal,
-      toggleWebTerminal: toggleWebTerminal
+      open,
+      openWebTerminal,
+      closeWebTerminal,
+      toggleWebTerminal
     }
   }, children);
 };
@@ -47,7 +45,7 @@ WebTerminalProvider.propTypes = {
 };
 
 // Custom hook that exposes the provided value from context
-var useWebTerminal = function useWebTerminal() {
+const useWebTerminal = () => {
   return useContext(WebTerminalContext);
 };
 

package/es/components/_Canary/Canary.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -13,19 +13,24 @@ import pkg from '../../global/js/package-settings.js';
 import { CodeSnippet } from '@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(pkg.prefix, "--canary");
+const blockClass = `${pkg.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 = _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__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className)
   }), /*#__PURE__*/React__default.createElement("h2", null, "This component ", /*#__PURE__*/React__default.createElement("strong", null, componentName), " is not ready yet."), _p || (_p = /*#__PURE__*/React__default.createElement("p", null, "To enable it, initialize package flags before the component is first used.")), _br || (_br = /*#__PURE__*/React__default.createElement("br", null)), _p2 || (_p2 = /*#__PURE__*/React__default.createElement("p", null, "e.g. in main.js")), /*#__PURE__*/React__default.createElement(CodeSnippet, {

package/es/global/js/hooks/useActiveElement.js

@@ -5,20 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useEffect } from 'react';
 
-var useActiveElement = function useActiveElement() {
-  var _useState = useState(document.activeElement),
-    _useState2 = _slicedToArray(_useState, 2),
-    active = _useState2[0],
-    setActive = _useState2[1];
-  var handleFocusIn = function handleFocusIn() {
+const useActiveElement = () => {
+  const [active, setActive] = useState(document.activeElement);
+  const handleFocusIn = () => {
     setActive(document.activeElement);
   };
-  useEffect(function () {
+  useEffect(() => {
     document.addEventListener('focusin', handleFocusIn);
-    return function () {
+    return () => {
       document.removeEventListener('focusin', handleFocusIn);
     };
   }, []);

package/es/global/js/hooks/useClickOutside.js

@@ -7,15 +7,15 @@
 
 import { useEffect } from 'react';
 
-var useClickOutside = function useClickOutside(ref, callback) {
-  useEffect(function () {
-    var handleClick = function handleClick(event) {
+const useClickOutside = (ref, callback) => {
+  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/es/global/js/hooks/useControllableState.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useCallback } from 'react';
 
 /**
@@ -18,12 +17,9 @@ function useControllableState(value, onChange) {
   if (typeof value === 'function') {
     throw new TypeError('Functions are not supported');
   }
-  var _useState = useState(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    uncontrolledValue = _useState2[0],
-    setUncontrolledValue = _useState2[1];
-  var onControlledChange = useCallback(function (controlledValue) {
-    onChange === null || onChange === void 0 || onChange(controlledValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState(value);
+  const onControlledChange = useCallback(controlledValue => {
+    onChange?.(controlledValue);
   }, [onChange]);
   if (typeof onChange === 'function') {
     return [value, onControlledChange];