@carbon/react 1.31.3 → 1.32.0

package/lib/components/TextInput/ControlledPasswordInput.js

@@ -70,12 +70,12 @@ const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRe
     id,
     onChange: evt => {
       if (!other.disabled) {
-        onChange(evt);
+        onChange?.(evt);
       }
     },
     onClick: evt => {
       if (!other.disabled) {
-        onClick(evt);
+        onClick?.(evt);
       }
     },
     placeholder,
@@ -114,7 +114,7 @@ const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRe
     invalid,
     sharedTextInputProps,
     invalidId: errorId,
-    hasHelper: !error && helperText,
+    hasHelper: !error && helperText ? true : false,
     helperId
   }), {
     "data-toggle-password-visibility": type === 'password'
@@ -231,8 +231,7 @@ ControlledPasswordInput.defaultProps = {
   invalid: false,
   invalidText: '',
   helperText: '',
-  size: ''
+  size: undefined
 };
-var ControlledPasswordInput$1 = ControlledPasswordInput;
 
-exports["default"] = ControlledPasswordInput$1;
+exports["default"] = ControlledPasswordInput;

package/lib/components/Tile/Tile.d.ts

@@ -0,0 +1,153 @@
+import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ChangeEvent, type ComponentType } from 'react';
+export interface TileProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+    /** @deprecated */
+    light?: boolean;
+}
+export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLDivElement>>;
+export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
+    children?: ReactNode;
+    className?: string;
+    /** @deprecated */
+    light?: boolean;
+    /**
+     * Boolean for whether a tile has been clicked.
+     */
+    clicked?: boolean;
+    /**
+     * Specify whether the ClickableTile should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * The href for the link.
+     */
+    href?: string;
+    /**
+     * Optional prop to allow overriding the icon rendering.
+     */
+    renderIcon?: ComponentType<{
+        className?: string;
+    }>;
+    /**
+     * Specify the function to run when the ClickableTile is clicked
+     */
+    onClick?(event: MouseEvent): void;
+    /**
+     * Specify the function to run when the ClickableTile is interacted with via a keyboard
+     */
+    onKeyDown?(event: KeyboardEvent): void;
+    /**
+     * The rel property for the link.
+     */
+    rel?: string;
+}
+export declare const ClickableTile: React.ForwardRefExoticComponent<ClickableTileProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+    /** @deprecated */
+    light?: boolean;
+    /**
+     * Specify whether the SelectableTile should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the `<input>`.
+     */
+    id?: string;
+    /**
+     * The `name` of the `<input>`.
+     * @deprecated
+     */
+    name?: string;
+    /**
+     * The empty handler of the `<input>`.
+     */
+    onChange?(event: ChangeEvent<HTMLDivElement>): void;
+    /**
+     * Specify the function to run when the SelectableTile is clicked
+     */
+    onClick?(event: MouseEvent<HTMLDivElement>): void;
+    /**
+     * Specify the function to run when the SelectableTile is interacted with via a keyboard
+     */
+    onKeyDown?(event: KeyboardEvent<HTMLDivElement>): void;
+    /**
+     * `true` to select this tile.
+     */
+    selected?: boolean;
+    /**
+     * Specify the tab index of the wrapper element
+     */
+    tabIndex?: number;
+    /**
+     * The `title` of the `<input>`.
+     */
+    title?: string;
+    /**
+     * The value of the `<input>`.
+     * @deprecated
+     */
+    value: string | number;
+}
+export declare const SelectableTile: React.ForwardRefExoticComponent<SelectableTileProps & React.RefAttributes<HTMLDivElement>>;
+export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+    /** @deprecated */
+    light?: boolean;
+    /**
+     * `true` if the tile is expanded.
+     */
+    expanded?: boolean;
+    /**
+     * An ID that can be provided to aria-labelledby
+     */
+    id?: string;
+    /**
+     * Specify the function to run when the ExpandableTile is clicked
+     */
+    onClick?(event: MouseEvent): void;
+    /**
+     * optional handler to trigger a function when a key is pressed
+     */
+    onKeyUp?(event: KeyboardEvent): void;
+    /**
+     * The `tabindex` attribute.
+     */
+    tabIndex?: number;
+    /**
+     * The description of the "collapsed" icon that can be read by screen readers.
+     */
+    tileCollapsedIconText?: string;
+    /**
+     * When "collapsed", a label to appear next to the chevron (e.g., "View more").
+     */
+    tileCollapsedLabel?: string;
+    /**
+     * The description of the "expanded" icon that can be read by screen readers.
+     */
+    tileExpandedIconText?: string;
+    /**
+     * When "expanded", a label to appear next to the chevron (e.g., "View less").
+     */
+    tileExpandedLabel?: string;
+    tileMaxHeight?: number;
+    tilePadding?: number;
+}
+export declare const ExpandableTile: React.ForwardRefExoticComponent<ExpandableTileProps & React.RefAttributes<HTMLElement>>;
+export interface TileAboveTheFoldContentProps {
+    /**
+     * The child nodes.
+     */
+    children?: ReactNode;
+}
+export declare const TileAboveTheFoldContent: React.ForwardRefExoticComponent<TileAboveTheFoldContentProps & React.RefAttributes<HTMLSpanElement>>;
+export interface TileBelowTheFoldContentProps {
+    /**
+     * The child nodes.
+     */
+    children?: ReactNode;
+}
+export declare const TileBelowTheFoldContent: React.ForwardRefExoticComponent<TileBelowTheFoldContentProps & React.RefAttributes<HTMLSpanElement>>;

package/lib/components/Tile/Tile.js

@@ -40,9 +40,7 @@ const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_re
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const tileClasses = cx__default["default"](`${prefix}--tile`, {
-    [`${prefix}--tile--light`]: light
-  }, className);
+  const tileClasses = cx__default["default"](`${prefix}--tile`, light && `${prefix}--tile--light`, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: tileClasses,
     ref: ref
@@ -61,6 +59,8 @@ Tile.propTypes = {
   /**
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
+   *
+   * @deprecated
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.')
 };
@@ -78,10 +78,7 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     ...rest
   } = _ref2;
   const prefix = usePrefix.usePrefix();
-  const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--clickable`, {
-    [`${prefix}--tile--is-clicked`]: clicked,
-    [`${prefix}--tile--light`]: light
-  }, className);
+  const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--clickable`, clicked && `${prefix}--tile--is-clicked`, light && `${prefix}--tile--light`, className);
   const [isSelected, setIsSelected] = React.useState(clicked);
   function handleOnClick(evt) {
     evt.persist();
@@ -113,7 +110,7 @@ const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function
   return /*#__PURE__*/React__default["default"].createElement(Link["default"], _rollupPluginBabelHelpers["extends"]({
     className: classes,
     href: href,
-    onClick: !disabled ? handleOnClick : null,
+    onClick: !disabled ? handleOnClick : undefined,
     onKeyDown: handleOnKeyDown,
     ref: ref,
     disabled: disabled
@@ -165,6 +162,7 @@ ClickableTile.propTypes = {
    * Optional prop to allow overriding the icon rendering.
    * Can be a React component class
    */
+  // @ts-expect-error: Invalid derived prop type, seemingly no real solution.
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
 const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function SelectableTile(_ref3, ref) {
@@ -174,14 +172,12 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     disabled,
     id,
     light,
-    name,
     onClick = () => {},
     onChange = () => {},
     onKeyDown = () => {},
     selected = false,
     tabIndex = 0,
     title = 'title',
-    value = 'value',
     ...rest
   } = _ref3;
   const prefix = usePrefix.usePrefix();
@@ -189,11 +185,7 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   const keyDownHandler = onKeyDown;
   const [isSelected, setIsSelected] = React.useState(selected);
   const [prevSelected, setPrevSelected] = React.useState(selected);
-  const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--selectable`, {
-    [`${prefix}--tile--is-selected`]: isSelected,
-    [`${prefix}--tile--light`]: light,
-    [`${prefix}--tile--disabled`]: disabled
-  }, className);
+  const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--selectable`, isSelected && `${prefix}--tile--is-selected`, light && `${prefix}--tile--light`, disabled && `${prefix}--tile--disabled`, className);
 
   // TODO: rename to handleClick when handleClick prop is deprecated
   function handleOnClick(evt) {
@@ -222,38 +214,33 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     setIsSelected(selected);
     setPrevSelected(selected);
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: classes,
-    onClick: !disabled ? handleOnClick : null,
-    role: "checkbox",
-    "aria-checked": isSelected,
-    disabled: disabled,
-    onKeyDown: !disabled ? handleOnKeyDown : null
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    ,
-    tabIndex: !disabled ? tabIndex : null,
-    value: value,
-    name: name,
-    ref: ref,
-    id: id,
-    onChange: !disabled ? handleChange : null,
-    title: title
-  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`
-  }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkbox, null))), /*#__PURE__*/React__default["default"].createElement("label", {
-    htmlFor: id,
-    className: `${prefix}--tile-content`
-  }, children));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+      className: classes,
+      onClick: !disabled ? handleOnClick : undefined,
+      role: "checkbox",
+      "aria-checked": isSelected,
+      onKeyDown: !disabled ? handleOnKeyDown : undefined
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: !disabled ? tabIndex : undefined,
+      ref: ref,
+      id: id,
+      onChange: !disabled ? handleChange : undefined,
+      title: title
+    }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`
+    }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkbox, null))), /*#__PURE__*/React__default["default"].createElement("label", {
+      htmlFor: id,
+      className: `${prefix}--tile-content`
+    }, children))
+  );
 });
 SelectableTile.displayName = 'SelectableTile';
 SelectableTile.propTypes = {
-  /**
-   * The child nodes.
-   */
   children: PropTypes__default["default"].node,
-  /**
-   * The CSS class names.
-   */
   className: PropTypes__default["default"].string,
   /**
    * Specify whether the SelectableTile should be disabled
@@ -270,6 +257,7 @@ SelectableTile.propTypes = {
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `SelectableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
   /**
    * The `name` of the `<input>`.
+   * @deprecated
    */
   name: PropTypes__default["default"].string,
   /**
@@ -298,23 +286,24 @@ SelectableTile.propTypes = {
   title: PropTypes__default["default"].string,
   /**
    * The value of the `<input>`.
+   * @deprecated
    */
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired
 };
 const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableTile(_ref4, forwardRef) {
   let {
-    tabIndex,
+    tabIndex = 0,
     className,
     children,
-    expanded,
-    tileMaxHeight,
+    expanded = false,
+    tileMaxHeight = 0,
     // eslint-disable-line
-    tilePadding,
+    tilePadding = 0,
     // eslint-disable-line
     onClick,
     onKeyUp,
-    tileCollapsedIconText,
-    tileExpandedIconText,
+    tileCollapsedIconText = 'Interact to expand Tile',
+    tileExpandedIconText = 'Interact to collapse Tile',
     tileCollapsedLabel,
     tileExpandedLabel,
     light,
@@ -331,8 +320,8 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   const belowTheFold = React.useRef(null);
   const tileContent = React.useRef(null);
   const tile = React.useRef(null);
-  const prefix = usePrefix.usePrefix();
   const ref = useMergedRefs.useMergedRefs([forwardRef, tile]);
+  const prefix = usePrefix.usePrefix();
   if (expanded !== prevExpanded) {
     setIsExpanded(expanded);
     setPrevExpanded(expanded);
@@ -347,10 +336,12 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     setPrevTilePadding(tilePadding);
   }
   function setMaxHeight() {
-    if (isExpanded) {
-      setIsTileMaxHeight(tileContent.current.getBoundingClientRect().height);
+    if (isExpanded && tileContent.current) {
+      setIsTileMaxHeight(tileContent.current.getBoundingClientRect()?.height);
+    }
+    if (aboveTheFold.current) {
+      setIsTileMaxHeight(aboveTheFold.current.getBoundingClientRect().height);
     }
-    setIsTileMaxHeight(aboveTheFold.current.getBoundingClientRect().height);
   }
   function handleClick(evt) {
     evt.persist();
@@ -371,13 +362,13 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     [`${prefix}--tile--is-expanded`]: isExpanded,
     [`${prefix}--tile--light`]: light
   }, className);
-  const interactiveClassNames = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--expandable`, `${prefix}--tile--expandable--interactive`, {
-    [`${prefix}--tile--is-expanded`]: isExpanded,
-    [`${prefix}--tile--light`]: light
-  }, className);
+  const interactiveClassNames = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--expandable`, `${prefix}--tile--expandable--interactive`, isExpanded && `${prefix}--tile--is-expanded`, light && `${prefix}--tile--light`, className);
   const chevronInteractiveClassNames = cx__default["default"](`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
   const childrenAsArray = getChildren();
   useIsomorphicEffect["default"](() => {
+    if (!tile.current || !aboveTheFold.current) {
+      return;
+    }
     const getStyle = window.getComputedStyle(tile.current, null);
     const {
       current: node
@@ -391,6 +382,9 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     setIsTilePadding(paddingTop + paddingBottom);
   }, [isTileMaxHeight]);
   useIsomorphicEffect["default"](() => {
+    if (!aboveTheFold.current || !belowTheFold.current) {
+      return;
+    }
     if (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current)) {
       setInteractive(false);
       return;
@@ -399,13 +393,19 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     }
   }, []);
   useIsomorphicEffect["default"](() => {
+    if (!tile.current) {
+      return;
+    }
     if (isExpanded) {
-      tile.current.style.maxHeight = null;
+      tile.current.style.maxHeight = '';
     } else {
       tile.current.style.maxHeight = isTileMaxHeight + isTilePadding + 'px';
     }
   }, [isExpanded, isTileMaxHeight, isTilePadding]);
   React.useEffect(() => {
+    if (!aboveTheFold.current) {
+      return;
+    }
     const resizeObserver = new ResizeObserver(entries => {
       const [aboveTheFold] = entries;
       setIsTileMaxHeight(aboveTheFold.contentRect.height);
@@ -414,6 +414,7 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     return () => resizeObserver.disconnect();
   }, []);
   return interactive ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    // @ts-expect-error: Needlesly strict & deep typing for the element type
     ref: ref,
     className: interactiveClassNames,
     "aria-expanded": isExpanded
@@ -433,7 +434,9 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     ref: belowTheFold,
     className: `${prefix}--tile-content`
   }, childrenAsArray[1]))) : /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
-    type: "button",
+    type: "button"
+    // @ts-expect-error: Needlesly strict & deep typing for the element type
+    ,
     ref: ref,
     className: classNames,
     "aria-expanded": isExpanded,
@@ -455,13 +458,7 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   }, childrenAsArray[1])));
 });
 ExpandableTile.propTypes = {
-  /**
-   * The child nodes.
-   */
   children: PropTypes__default["default"].node,
-  /**
-   * The CSS class names.
-   */
   className: PropTypes__default["default"].string,
   /**
    * `true` if the tile is expanded.
@@ -505,15 +502,6 @@ ExpandableTile.propTypes = {
    */
   tileExpandedLabel: PropTypes__default["default"].string
 };
-ExpandableTile.defaultProps = {
-  tabIndex: 0,
-  expanded: false,
-  tileMaxHeight: 0,
-  tilePadding: 0,
-  onClick: () => {},
-  tileCollapsedIconText: 'Interact to expand Tile',
-  tileExpandedIconText: 'Interact to collapse Tile'
-};
 ExpandableTile.displayName = 'ExpandableTile';
 const TileAboveTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TilAboveTheFoldContent(_ref5, ref) {
   let {

package/lib/components/Tile/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { Tile, type TileProps, ClickableTile, type ClickableTileProps, SelectableTile, type SelectableTileProps, ExpandableTile, type ExpandableTileProps, TileAboveTheFoldContent, type TileAboveTheFoldContentProps, TileBelowTheFoldContent, type TileBelowTheFoldContentProps, } from './Tile';

package/lib/components/Toggle/Toggle.Skeleton.d.ts

@@ -4,55 +4,11 @@
  * 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 React from 'react';
-type ToggleSkeletonProps = {
-    'aria-label': string;
-    /**
-     * Specify an optional className to add to the form item wrapper.
-     */
+interface ToggleSkeletonProps {
+    'aria-label'?: string;
     className?: string;
-    /**
-     * Provide an id that unique represents the underlying `<input>`
-     */
-    id?: string;
-    /**
-     * Provide the text that will be read by a screen reader when visiting this
-     * control
-     * `aria-label` is always required but will be null if `labelText` is also
-     * provided
-     */
-    labelText?: string;
-    /**
-     * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
-     */
-    size?: 'sm' | 'md';
-} & React.HTMLAttributes<HTMLDivElement>;
-declare class ToggleSkeleton extends React.Component<ToggleSkeletonProps> {
-    static propTypes: {
-        "aria-label": PropTypes.Validator<string>;
-        /**
-         * Specify an optional className to add to the form item wrapper.
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Provide an id that unique represents the underlying `<input>`
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * Provide the text that will be read by a screen reader when visiting this
-         * control
-         * `aria-label` is always required but will be undefined if `labelText` is also
-         * provided
-         */
-        labelText: PropTypes.Requireable<string>;
-        /**
-         * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
-         */
-        size: PropTypes.Requireable<string>;
-    };
-    static defaultProps: Partial<ToggleSkeletonProps>;
-    render(): JSX.Element;
 }
+declare const ToggleSkeleton: React.FC<ToggleSkeletonProps>;
 export default ToggleSkeleton;
 export { ToggleSkeleton };

package/lib/components/Toggle/Toggle.Skeleton.js

@@ -21,68 +21,28 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-class ToggleSkeleton extends React__default["default"].Component {
-  render() {
-    var _div;
-    const {
-      id,
-      labelText,
-      className,
-      size,
-      ...rest
-    } = this.props;
-    return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => {
-      const toggleInputClassNames = cx__default["default"](`${prefix}--toggle ${prefix}--skeleton`, {
-        [`${prefix}--toggle-input--small`]: size === 'sm'
-      });
-      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-        className: cx__default["default"](`${prefix}--form-item`, className)
-      }, rest), /*#__PURE__*/React__default["default"].createElement("input", {
-        type: "checkbox",
-        id: id,
-        className: toggleInputClassNames
-      }), /*#__PURE__*/React__default["default"].createElement("label", {
-        className: `${prefix}--toggle-input__label`,
-        htmlFor: id,
-        "aria-label": labelText ? undefined : this.props['aria-label']
-      }, labelText ? _div || (_div = /*#__PURE__*/React__default["default"].createElement("div", null, labelText)) : null, /*#__PURE__*/React__default["default"].createElement("span", {
-        className: `${prefix}--toggle__switch`
-      }, /*#__PURE__*/React__default["default"].createElement("span", {
-        className: `${prefix}--toggle__text--left`
-      }), /*#__PURE__*/React__default["default"].createElement("span", {
-        className: `${prefix}--toggle__appearance`
-      }), /*#__PURE__*/React__default["default"].createElement("span", {
-        className: `${prefix}--toggle__text--right`
-      }))));
-    });
-  }
-}
-_rollupPluginBabelHelpers.defineProperty(ToggleSkeleton, "propTypes", {
-  ['aria-label']: PropTypes__default["default"].string.isRequired,
-  /**
-   * Specify an optional className to add to the form item wrapper.
-   */
-  className: PropTypes__default["default"].string,
-  /**
-   * Provide an id that unique represents the underlying `<input>`
-   */
-  id: PropTypes__default["default"].string,
-  /**
-   * Provide the text that will be read by a screen reader when visiting this
-   * control
-   * `aria-label` is always required but will be undefined if `labelText` is also
-   * provided
-   */
-  labelText: PropTypes__default["default"].string,
-  /**
-   * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
-   */
-  size: PropTypes__default["default"].oneOf(['sm', 'md'])
-});
-_rollupPluginBabelHelpers.defineProperty(ToggleSkeleton, "defaultProps", {
-  ['aria-label']: 'Toggle is loading',
-  size: 'md'
-});
+const ToggleSkeleton = _ref => {
+  let {
+    'aria-label': ariaLabel = 'Toggle is loading',
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const skeletonClassNames = cx__default["default"](`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: skeletonClassNames
+  }, rest, {
+    "aria-label": ariaLabel
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--toggle__skeleton-circle`
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--toggle__skeleton-rectangle`
+  }));
+};
+ToggleSkeleton.propTypes = {
+  'aria-label': PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string
+};
 
 exports.ToggleSkeleton = ToggleSkeleton;
 exports["default"] = ToggleSkeleton;

package/lib/components/Toggle/Toggle.js

@@ -84,7 +84,7 @@ function Toggle(_ref) {
         // 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) {
+        if (buttonElement.current && e.target !== buttonElement.current && !disabled) {
           handleClick(e);
           buttonElement.current.focus();
         }

package/lib/components/UIShell/HeaderGlobalAction.js

@@ -15,6 +15,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }