@carbon/react 1.31.2 → 1.32.0-rc.0

package/es/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/es/components/Tile/Tile.js

@@ -30,9 +30,7 @@ const Tile = /*#__PURE__*/React__default.forwardRef(function Tile(_ref, ref) {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const tileClasses = cx(`${prefix}--tile`, {
-    [`${prefix}--tile--light`]: light
-  }, className);
+  const tileClasses = cx(`${prefix}--tile`, light && `${prefix}--tile--light`, className);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: tileClasses,
     ref: ref
@@ -51,6 +49,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(PropTypes.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.')
 };
@@ -68,10 +68,7 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
     ...rest
   } = _ref2;
   const prefix = usePrefix();
-  const classes = cx(`${prefix}--tile`, `${prefix}--tile--clickable`, {
-    [`${prefix}--tile--is-clicked`]: clicked,
-    [`${prefix}--tile--light`]: light
-  }, className);
+  const classes = cx(`${prefix}--tile`, `${prefix}--tile--clickable`, clicked && `${prefix}--tile--is-clicked`, light && `${prefix}--tile--light`, className);
   const [isSelected, setIsSelected] = useState(clicked);
   function handleOnClick(evt) {
     evt.persist();
@@ -103,7 +100,7 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
   return /*#__PURE__*/React__default.createElement(Link, _extends({
     className: classes,
     href: href,
-    onClick: !disabled ? handleOnClick : null,
+    onClick: !disabled ? handleOnClick : undefined,
     onKeyDown: handleOnKeyDown,
     ref: ref,
     disabled: disabled
@@ -155,6 +152,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.oneOfType([PropTypes.func, PropTypes.object])
 };
 const SelectableTile = /*#__PURE__*/React__default.forwardRef(function SelectableTile(_ref3, ref) {
@@ -164,14 +162,12 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     disabled,
     id,
     light,
-    name,
     onClick = () => {},
     onChange = () => {},
     onKeyDown = () => {},
     selected = false,
     tabIndex = 0,
     title = 'title',
-    value = 'value',
     ...rest
   } = _ref3;
   const prefix = usePrefix();
@@ -179,11 +175,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
   const keyDownHandler = onKeyDown;
   const [isSelected, setIsSelected] = useState(selected);
   const [prevSelected, setPrevSelected] = useState(selected);
-  const classes = cx(`${prefix}--tile`, `${prefix}--tile--selectable`, {
-    [`${prefix}--tile--is-selected`]: isSelected,
-    [`${prefix}--tile--light`]: light,
-    [`${prefix}--tile--disabled`]: disabled
-  }, className);
+  const classes = cx(`${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) {
@@ -212,38 +204,33 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     setIsSelected(selected);
     setPrevSelected(selected);
   }
-  return /*#__PURE__*/React__default.createElement("div", _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.createElement("span", {
-    className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`
-  }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: id,
-    className: `${prefix}--tile-content`
-  }, children));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    React__default.createElement("div", _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.createElement("span", {
+      className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`
+    }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement("label", {
+      htmlFor: id,
+      className: `${prefix}--tile-content`
+    }, children))
+  );
 });
 SelectableTile.displayName = 'SelectableTile';
 SelectableTile.propTypes = {
-  /**
-   * The child nodes.
-   */
   children: PropTypes.node,
-  /**
-   * The CSS class names.
-   */
   className: PropTypes.string,
   /**
    * Specify whether the SelectableTile should be disabled
@@ -260,6 +247,7 @@ SelectableTile.propTypes = {
   light: deprecate(PropTypes.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.string,
   /**
@@ -288,23 +276,24 @@ SelectableTile.propTypes = {
   title: PropTypes.string,
   /**
    * The value of the `<input>`.
+   * @deprecated
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 };
 const ExpandableTile = /*#__PURE__*/React__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,
@@ -321,8 +310,8 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
   const belowTheFold = useRef(null);
   const tileContent = useRef(null);
   const tile = useRef(null);
-  const prefix = usePrefix();
   const ref = useMergedRefs([forwardRef, tile]);
+  const prefix = usePrefix();
   if (expanded !== prevExpanded) {
     setIsExpanded(expanded);
     setPrevExpanded(expanded);
@@ -337,10 +326,12 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     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();
@@ -361,13 +352,13 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     [`${prefix}--tile--is-expanded`]: isExpanded,
     [`${prefix}--tile--light`]: light
   }, className);
-  const interactiveClassNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, `${prefix}--tile--expandable--interactive`, {
-    [`${prefix}--tile--is-expanded`]: isExpanded,
-    [`${prefix}--tile--light`]: light
-  }, className);
+  const interactiveClassNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, `${prefix}--tile--expandable--interactive`, isExpanded && `${prefix}--tile--is-expanded`, light && `${prefix}--tile--light`, className);
   const chevronInteractiveClassNames = cx(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
   const childrenAsArray = getChildren();
   useIsomorphicEffect(() => {
+    if (!tile.current || !aboveTheFold.current) {
+      return;
+    }
     const getStyle = window.getComputedStyle(tile.current, null);
     const {
       current: node
@@ -381,6 +372,9 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     setIsTilePadding(paddingTop + paddingBottom);
   }, [isTileMaxHeight]);
   useIsomorphicEffect(() => {
+    if (!aboveTheFold.current || !belowTheFold.current) {
+      return;
+    }
     if (!getInteractiveContent(belowTheFold.current)) {
       setInteractive(false);
       return;
@@ -389,13 +383,19 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     }
   }, []);
   useIsomorphicEffect(() => {
+    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]);
   useEffect(() => {
+    if (!aboveTheFold.current) {
+      return;
+    }
     const resizeObserver = new ResizeObserver(entries => {
       const [aboveTheFold] = entries;
       setIsTileMaxHeight(aboveTheFold.contentRect.height);
@@ -404,6 +404,7 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     return () => resizeObserver.disconnect();
   }, []);
   return interactive ? /*#__PURE__*/React__default.createElement("div", _extends({
+    // @ts-expect-error: Needlesly strict & deep typing for the element type
     ref: ref,
     className: interactiveClassNames,
     "aria-expanded": isExpanded
@@ -423,7 +424,9 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     ref: belowTheFold,
     className: `${prefix}--tile-content`
   }, childrenAsArray[1]))) : /*#__PURE__*/React__default.createElement("button", _extends({
-    type: "button",
+    type: "button"
+    // @ts-expect-error: Needlesly strict & deep typing for the element type
+    ,
     ref: ref,
     className: classNames,
     "aria-expanded": isExpanded,
@@ -445,13 +448,7 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
   }, childrenAsArray[1])));
 });
 ExpandableTile.propTypes = {
-  /**
-   * The child nodes.
-   */
   children: PropTypes.node,
-  /**
-   * The CSS class names.
-   */
   className: PropTypes.string,
   /**
    * `true` if the tile is expanded.
@@ -495,15 +492,6 @@ ExpandableTile.propTypes = {
    */
   tileExpandedLabel: PropTypes.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.forwardRef(function TilAboveTheFoldContent(_ref5, ref) {
   let {

package/es/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/es/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/es/components/Toggle/Toggle.Skeleton.js

@@ -5,73 +5,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
-import { PrefixContext } from '../../internal/usePrefix.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 
-class ToggleSkeleton extends React__default.Component {
-  render() {
-    var _div;
-    const {
-      id,
-      labelText,
-      className,
-      size,
-      ...rest
-    } = this.props;
-    return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => {
-      const toggleInputClassNames = cx(`${prefix}--toggle ${prefix}--skeleton`, {
-        [`${prefix}--toggle-input--small`]: size === 'sm'
-      });
-      return /*#__PURE__*/React__default.createElement("div", _extends({
-        className: cx(`${prefix}--form-item`, className)
-      }, rest), /*#__PURE__*/React__default.createElement("input", {
-        type: "checkbox",
-        id: id,
-        className: toggleInputClassNames
-      }), /*#__PURE__*/React__default.createElement("label", {
-        className: `${prefix}--toggle-input__label`,
-        htmlFor: id,
-        "aria-label": labelText ? undefined : this.props['aria-label']
-      }, labelText ? _div || (_div = /*#__PURE__*/React__default.createElement("div", null, labelText)) : null, /*#__PURE__*/React__default.createElement("span", {
-        className: `${prefix}--toggle__switch`
-      }, /*#__PURE__*/React__default.createElement("span", {
-        className: `${prefix}--toggle__text--left`
-      }), /*#__PURE__*/React__default.createElement("span", {
-        className: `${prefix}--toggle__appearance`
-      }), /*#__PURE__*/React__default.createElement("span", {
-        className: `${prefix}--toggle__text--right`
-      }))));
-    });
-  }
-}
-_defineProperty(ToggleSkeleton, "propTypes", {
-  ['aria-label']: PropTypes.string.isRequired,
-  /**
-   * Specify an optional className to add to the form item wrapper.
-   */
-  className: PropTypes.string,
-  /**
-   * Provide an id that unique represents the underlying `<input>`
-   */
-  id: PropTypes.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.string,
-  /**
-   * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
-   */
-  size: PropTypes.oneOf(['sm', 'md'])
-});
-_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();
+  const skeletonClassNames = cx(`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: skeletonClassNames
+  }, rest, {
+    "aria-label": ariaLabel
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--toggle__skeleton-circle`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--toggle__skeleton-rectangle`
+  }));
+};
+ToggleSkeleton.propTypes = {
+  'aria-label': PropTypes.string,
+  className: PropTypes.string
+};
 
 export { ToggleSkeleton, ToggleSkeleton as default };

package/es/components/Toggle/Toggle.js

@@ -74,7 +74,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/es/components/UIShell/HeaderGlobalAction.js

@@ -11,6 +11,7 @@ import React__default from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import Button from '../Button/Button.js';
+import '../Button/Button.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 /**