@carbon/react 1.22.0-rc.0 → 1.23.0-rc.0

package/es/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,132 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+export declare const translationIds: {
+    'increment.number': string;
+    'decrement.number': string;
+};
+type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * `true` to allow empty string.
+     */
+    allowEmpty?: boolean;
+    /**
+     * Specify an optional className to be applied to the wrapper node
+     */
+    className?: string;
+    /**
+     * Optional starting value for uncontrolled state
+     */
+    defaultValue?: number | string;
+    /**
+     * Specify if the wheel functionality for the input should be disabled, or not
+     */
+    disableWheel?: boolean;
+    /**
+     * Specify if the control should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify whether you want the steppers to be hidden
+     */
+    hideSteppers?: boolean;
+    /**
+     * Provide a description for up/down icons that can be read by screen readers
+     */
+    iconDescription?: string;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id: string;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: ReactNode;
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label?: ReactNode;
+    /**
+     * `true` to use the light version.
+     *
+     * @deprecated The `light` prop for `NumberInput` is no longer needed and has
+     *     been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.
+     */
+    light?: boolean;
+    /**
+     * The maximum value.
+     */
+    max?: number;
+    /**
+     * The minimum value.
+     */
+    min?: number;
+    /**
+     * Provide an optional handler that is called when the internal state of
+     * NumberInput changes. This handler is called with event and state info.
+     * `(event, { value, direction }) => void`
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement>, state: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when the up/down button is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, state?: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when a key is pressed in the number input
+     */
+    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Specify if the component should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Number Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify how much the values should increase/decrease upon clicking on up/down button
+     */
+    step?: number;
+    /**
+     * Provide custom text for the component for each translation id
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify the value of the input
+     */
+    value?: number | string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<unknown>>;
+export { NumberInput };

package/es/components/NumberInput/NumberInput.js

@@ -127,11 +127,12 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   var iconClasses = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_cx3, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _cx3));
 
   if (controlledValue !== prevControlledValue) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     setValue(controlledValue);
     setPrevControlledValue(controlledValue);
   }
 
-  var ariaDescribedBy = null;
+  var ariaDescribedBy = undefined;
 
   if (normalizedProps.invalid) {
     ariaDescribedBy = normalizedProps.invalidId;
@@ -158,7 +159,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   }
 
   var handleFocus = function handleFocus(evt) {
-    if (evt.target.type === 'button') {
+    if ('type' in evt.target && evt.target.type === 'button') {
       setIsFocused(false);
     } else {
       setIsFocused(evt.type === 'focus' ? true : false);
@@ -166,10 +167,11 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   };
 
   var outerElementClasses = cx("".concat(prefix, "--form-item"), (_cx4 = {}, _defineProperty(_cx4, customClassName, !!customClassName), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--invalid"), isFluid && normalizedProps.invalid), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--focus"), isFluid && isFocused), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--disabled"), isFluid && disabled), _cx4));
+  var Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default.createElement("div", {
     className: outerElementClasses,
-    onFocus: isFluid ? handleFocus : null,
-    onBlur: isFluid ? handleFocus : null
+    onFocus: isFluid ? handleFocus : undefined,
+    onBlur: isFluid ? handleFocus : undefined
   }, /*#__PURE__*/React__default.createElement("div", {
     className: numberInputClasses,
     "data-invalid": normalizedProps.invalid ? true : undefined
@@ -215,7 +217,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     step: step,
     type: "number",
     value: value
-  })), normalizedProps.icon ? /*#__PURE__*/React__default.createElement(normalizedProps.icon, {
+  })), Icon ? /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses
   }) : null, !hideSteppers && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--number__controls")
@@ -238,7 +240,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
         _onClick(event, state);
       }
     },
-    tabIndex: "-1",
+    tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
   }, _Subtract || (_Subtract = /*#__PURE__*/React__default.createElement(Subtract, {
@@ -264,7 +266,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
         _onClick(event, state);
       }
     },
-    tabIndex: "-1",
+    tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
   }, _Add || (_Add = /*#__PURE__*/React__default.createElement(Add, {

package/es/components/OverflowMenu/OverflowMenu.js

@@ -15,10 +15,10 @@ import FloatingMenu, { DIRECTION_TOP, DIRECTION_BOTTOM } from '../../internal/Fl
 import { OverflowMenuVertical } from '@carbon/icons-react';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
-import * as FeatureFlags from '@carbon/feature-flags';
 import deprecate from '../../prop-types/deprecate.js';
+import { IconButton } from '../IconButton/index.js';
 import { matches } from '../../internal/keyboard/match.js';
-import { ArrowDown, ArrowUp, ArrowRight, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
+import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["id", "ariaLabel", "children", "iconDescription", "direction", "flipped", "focusTrap", "menuOffset", "menuOffsetFlip", "iconClass", "onClick", "onOpen", "selectorPrimaryFocus", "renderIcon", "innerRef", "menuOptionsClass", "light", "size"];
 
@@ -129,14 +129,14 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (evt) {
-      if (matches(evt, [ArrowDown])) {
-        _this.setState({
-          open: !_this.state.open
-        });
+    _defineProperty(_assertThisInitialized(_this), "closeMenuAndFocus", function () {
+      var wasOpen = _this.state.open;
 
-        _this.props.onClick(evt);
-      }
+      _this.closeMenu(function () {
+        if (wasOpen) {
+          _this.focusMenuEl();
+        }
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleKeyPress", function (evt) {
@@ -146,13 +146,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
 
 
       if (matches(evt, [Escape])) {
-        var wasOpen = _this.state.open;
-
-        _this.closeMenu(function () {
-          if (wasOpen) {
-            _this.focusMenuEl();
-          }
-        }); // Stop the esc keypress from bubbling out and closing something it shouldn't
+        _this.closeMenuAndFocus(); // Stop the esc keypress from bubbling out and closing something it shouldn't
 
 
         evt.stopPropagation();
@@ -187,8 +181,6 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleOverflowMenuItemFocus", function (_ref) {
-      var _overflowMenuItem$cur;
-
       var currentIndex = _ref.currentIndex,
           direction = _ref.direction;
       var enabledIndices = React__default.Children.toArray(_this.props.children).reduce(function (acc, curr, i) {
@@ -202,7 +194,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
       var nextValidIndex = function () {
         var nextIndex = enabledIndices.indexOf(currentIndex) + direction;
 
-        switch (enabledIndices.indexOf(currentIndex) + direction) {
+        switch (nextIndex) {
           case -1:
             return enabledIndices.length - 1;
 
@@ -214,9 +206,9 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         }
       }();
 
-      var overflowMenuItem = _this["overflowMenuItem".concat(enabledIndices[nextValidIndex])].overflowMenuItem;
+      var overflowMenuItem = _this["overflowMenuItem".concat(enabledIndices[nextValidIndex])];
 
-      overflowMenuItem === null || overflowMenuItem === void 0 ? void 0 : (_overflowMenuItem$cur = overflowMenuItem.current) === null || _overflowMenuItem$cur === void 0 ? void 0 : _overflowMenuItem$cur.focus();
+      overflowMenuItem === null || overflowMenuItem === void 0 ? void 0 : overflowMenuItem.focus();
     });
 
     _defineProperty(_assertThisInitialized(_this), "_bindMenuBody", function (menuBody) {
@@ -240,7 +232,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
 
           if (typeof target.matches === 'function') {
             if (!menuBody.contains(target) && triggerEl && !target.matches(".".concat(_this.context, "--overflow-menu,.").concat(_this.context, "--overflow-menu-options"))) {
-              _this.closeMenu();
+              _this.closeMenuAndFocus();
             }
           }
         }, !hasFocusin);
@@ -324,7 +316,7 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         var _child$props;
 
         return /*#__PURE__*/React__default.cloneElement(child, {
-          closeMenu: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.closeMenu) || _this2.closeMenu,
+          closeMenu: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.closeMenu) || _this2.closeMenuAndFocus,
           handleOverflowMenuItemFocus: _this2.handleOverflowMenuItemFocus,
           ref: function ref(e) {
             _this2["overflowMenuItem".concat(index)] = e;
@@ -336,7 +328,8 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
         className: overflowMenuOptionsClasses,
         tabIndex: "-1",
         role: "menu",
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        onKeyDown: this.handleKeyPress
       }, childrenWithProps);
       var wrappedMenuBody = /*#__PURE__*/React__default.createElement(FloatingMenu, {
         focusTrap: focusTrap,
@@ -357,17 +350,18 @@ var OverflowMenu = /*#__PURE__*/function (_Component) {
       };
       return /*#__PURE__*/React__default.createElement(ClickListener, {
         onClickOutside: this.handleClickOutside
-      }, /*#__PURE__*/React__default.createElement("button", _extends({}, other, {
+      }, /*#__PURE__*/React__default.createElement("span", {
+        className: "".concat(prefix, "--overflow-menu__wrapper")
+      }, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, other, {
         type: "button",
         "aria-haspopup": true,
         "aria-expanded": this.state.open,
         className: overflowMenuClasses,
-        onKeyDown: this.handleKeyPress,
         onClick: this.handleClick,
-        "aria-label": ariaLabel,
         id: id,
-        ref: mergeRefs(this._triggerRef, ref)
-      }), /*#__PURE__*/React__default.createElement(IconElement, iconProps), open && this.state.hasMountedTrigger && wrappedMenuBody));
+        ref: mergeRefs(this._triggerRef, ref),
+        label: iconDescription
+      }), /*#__PURE__*/React__default.createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -388,7 +382,7 @@ _defineProperty(OverflowMenu, "propTypes", {
   /**
    * The ARIA label.
    */
-  ariaLabel: FeatureFlags.enabled('enable-v11-release') ? PropTypes.string.isRequired : PropTypes.string,
+  ariaLabel: PropTypes.string.isRequired,
 
   /**
    * The child nodes.
@@ -434,7 +428,7 @@ _defineProperty(OverflowMenu, "propTypes", {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make OverflowMenu background color same as container background color.
    */
-  light: FeatureFlags.enabled('enable-v11-release') ? deprecate(PropTypes.bool, 'The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.') : PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `OverflowMenu` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
 
   /**
    * The adjustment in position applied to the floating menu.
@@ -501,14 +495,14 @@ _defineProperty(OverflowMenu, "propTypes", {
   /**
    * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
    */
-  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.oneOf(['sm', 'md', 'lg', 'xl'])
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
 });
 
 _defineProperty(OverflowMenu, "contextType", PrefixContext);
 
 _defineProperty(OverflowMenu, "defaultProps", {
-  ariaLabel: FeatureFlags.enabled('enable-v11-release') ? null : 'Open and close list of options',
-  iconDescription: 'Open and close list of options',
+  ariaLabel: null,
+  iconDescription: 'Options',
   open: false,
   direction: DIRECTION_BOTTOM,
   flipped: false,

package/es/components/Pagination/Pagination.js

@@ -11,6 +11,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState } from 'react';
 import Select from '../Select/Select.js';
+import '../Select/Select.Skeleton.js';
 import SelectItem from '../SelectItem/SelectItem.js';
 import { equals } from '../../tools/array.js';
 import { useFallbackId } from '../../internal/useId.js';

package/es/components/Pagination/experimental/PageSelector.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import setupGetInstanceId from '../../../tools/setupGetInstanceId.js';
 import Select from '../../Select/Select.js';
+import '../../Select/Select.Skeleton.js';
 import SelectItem from '../../SelectItem/SelectItem.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 

package/es/components/Pagination/experimental/Pagination.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { CaretLeft, CaretRight } from '@carbon/icons-react';
 import Button from '../../Button/Button.js';
 import Select from '../../Select/Select.js';
+import '../../Select/Select.Skeleton.js';
 import SelectItem from '../../SelectItem/SelectItem.js';
 import { IconButton } from '../../IconButton/index.js';
 import * as FeatureFlags from '@carbon/feature-flags';

package/es/components/Select/Select.Skeleton.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import { HTMLAttributes } from 'react';
+export interface SelectSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+}
+declare const SelectSkeleton: {
+    ({ hideLabel, className, ...rest }: SelectSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the label should be hidden, or not
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+    };
+};
+export default SelectSkeleton;
+export { SelectSkeleton };

package/es/components/Select/index.js

@@ -7,3 +7,4 @@
 
 import Select from './Select.js';
 export { default as Select, default } from './Select.js';
+export { default as SelectSkeleton } from './Select.Skeleton.js';

package/es/components/TextArea/TextArea.js

@@ -104,6 +104,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, fo
   useIsomorphicEffect(function () {
     if (other.cols) {
       textareaRef.current.style.width = null;
+      textareaRef.current.style.resize = 'none';
     } else {
       textareaRef.current.style.width = "100%";
     }

package/es/components/Toggle/Toggle.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useControllableState } from '../../internal/useControllableState.js';
@@ -41,6 +41,7 @@ function Toggle(_ref) {
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
+  var buttonElement = useRef(null);
 
   var _useControllableState = useControllableState({
     value: toggled,
@@ -69,37 +70,53 @@ function Toggle(_ref) {
   var labelTextClasses = cx("".concat(prefix, "--toggle__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var appearanceClasses = cx("".concat(prefix, "--toggle__appearance"), _defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
   var switchClasses = cx("".concat(prefix, "--toggle__switch"), _defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: wrapperClasses
-  }, /*#__PURE__*/React__default.createElement("button", _extends({}, other, {
-    id: id,
-    className: "".concat(prefix, "--toggle__button"),
-    role: "switch",
-    type: "button",
-    "aria-checked": checked,
-    "aria-labelledby": ariaLabelledby,
-    disabled: disabled,
-    onClick: handleClick
-  })), /*#__PURE__*/React__default.createElement(LabelComponent, {
-    htmlFor: ariaLabelledby ? null : id,
-    className: "".concat(prefix, "--toggle__label")
-  }, labelText && /*#__PURE__*/React__default.createElement("span", {
-    className: labelTextClasses
-  }, labelText), /*#__PURE__*/React__default.createElement("div", {
-    className: appearanceClasses
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: switchClasses
-  }, isSm && /*#__PURE__*/React__default.createElement("svg", {
-    className: "".concat(prefix, "--toggle__check"),
-    width: "6px",
-    height: "5px",
-    viewBox: "0 0 6 5"
-  }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
-    d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
-  })))), renderSideLabel && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--toggle__text"),
-    "aria-hidden": "true"
-  }, sideLabel))));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React__default.createElement("div", {
+      className: wrapperClasses,
+      onClick: ariaLabelledby ? function (e) {
+        // the underlying <button> can only be activated by keyboard as it is visually hidden;
+        // therefore, if this event's target is the <button>, it had to be triggered by
+        // the keyboard event which already calls handleClick. if we wouldn't catch this, the
+        // onClick and onToggle functions would be called twice whenever the user activates the
+        // toggle by keyboard and props['aria-labelledby'] is passed.
+        if (buttonElement.current && e.target !== buttonElement.current) {
+          handleClick(e);
+          buttonElement.current.focus();
+        }
+      } : null
+    }, /*#__PURE__*/React__default.createElement("button", _extends({}, other, {
+      ref: buttonElement,
+      id: id,
+      className: "".concat(prefix, "--toggle__button"),
+      role: "switch",
+      type: "button",
+      "aria-checked": checked,
+      "aria-labelledby": ariaLabelledby,
+      disabled: disabled,
+      onClick: handleClick
+    })), /*#__PURE__*/React__default.createElement(LabelComponent, {
+      htmlFor: ariaLabelledby ? null : id,
+      className: "".concat(prefix, "--toggle__label")
+    }, labelText && /*#__PURE__*/React__default.createElement("span", {
+      className: labelTextClasses
+    }, labelText), /*#__PURE__*/React__default.createElement("div", {
+      className: appearanceClasses
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: switchClasses
+    }, isSm && /*#__PURE__*/React__default.createElement("svg", {
+      className: "".concat(prefix, "--toggle__check"),
+      width: "6px",
+      height: "5px",
+      viewBox: "0 0 6 5"
+    }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+      d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
+    })))), renderSideLabel && /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(prefix, "--toggle__text"),
+      "aria-hidden": "true"
+    }, sideLabel))))
+  );
 }
 Toggle.propTypes = {
   /**
@@ -123,7 +140,11 @@ Toggle.propTypes = {
   disabled: PropTypes.bool,
 
   /**
-   * Specify whether the label should be hidden, or not
+   * If true, the side labels (props.labelA and props.labelB) will be replaced by
+   * props.labelText, so that the toggle doesn't render a top label. In order to fully
+   * hide any labels, you can use props['aria-labelledby'] to refer to another element
+   * that labels the toggle. props.labelText would no longer be required in that case
+   * and can therefore be omitted.
    */
   hideLabel: PropTypes.bool,
 

package/es/components/Toggletip/index.js

@@ -102,10 +102,34 @@ function Toggletip(_ref2) {
 
   function onKeyDown(event) {
     if (open && match(event, Escape)) {
-      actions.close();
+      actions.close(); // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
+
+      var button = ref.current.children[0];
+
+      if (button && button.type === 'button') {
+        button.focus();
+      }
     }
   }
 
+  function handleBlur(event) {
+    // Do not close if the menu itself is clicked, should only close on focus out
+    if (open && event.relatedTarget === null) {
+      return;
+    }
+
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      // The menu should be closed when focus leaves the `Toggletip`  (#12922)
+      actions.close();
+    }
+  } // If the `Toggletip` is the last focusable item in the tab order, it shoudl also close when the browser window loses focus  (#12922)
+
+
+  useWindowEvent('blur', function () {
+    if (open) {
+      actions.close();
+    }
+  });
   useWindowEvent('click', function (event) {
     if (open && !ref.current.contains(event.target)) {
       actions.close();
@@ -122,6 +146,7 @@ function Toggletip(_ref2) {
     highContrast: true,
     open: open,
     onKeyDown: onKeyDown,
+    onBlur: handleBlur,
     ref: ref
   }, children));
 }