@carbon/react 1.29.1 → 1.30.0

package/es/components/Toggle/Toggle.Skeleton.js

@@ -14,7 +14,6 @@ import { PrefixContext } from '../../internal/usePrefix.js';
 class ToggleSkeleton extends React__default.Component {
   render() {
     var _div;
-
     const {
       id,
       labelText,
@@ -47,22 +46,17 @@ class ToggleSkeleton extends React__default.Component {
       }))));
     });
   }
-
 }
-
 _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
@@ -70,13 +64,11 @@ _defineProperty(ToggleSkeleton, "propTypes", {
    * 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'

package/es/components/Toggle/Toggle.js

@@ -38,17 +38,14 @@ function Toggle(_ref) {
     onChange: onToggle,
     defaultValue: defaultToggled
   });
-
   function handleClick(e) {
     if (!readOnly) {
       setChecked(!checked);
     }
-
     if (onClick) {
       onClick(e);
     }
   }
-
   const isSm = size === 'sm';
   const sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
   const renderSideLabel = !(hideLabel && !labelText);
@@ -119,43 +116,35 @@ Toggle.propTypes = {
    * Specify another element's id to be used as the label for this toggle
    */
   'aria-labelledby': PropTypes.string,
-
   /**
    * Specify a custom className to apply to the form-item node
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the toggle should be on by default
    */
   defaultToggled: PropTypes.bool,
-
   /**
    * Whether this control should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * If true, the side labels (props.labelA and props.labelB) will be replaced by
    * props.labelText (if passed), so that the toggle doesn't render a top label.
    */
   hideLabel: PropTypes.bool,
-
   /**
    * Provide an id that unique represents the underlying `<button>`
    */
   id: PropTypes.string.isRequired,
-
   /**
    * Specify the label for the "off" position
    */
   labelA: PropTypes.node,
-
   /**
    * Specify the label for the "on" position
    */
   labelB: PropTypes.node,
-
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control. This should be provided unless 'aria-labelledby' is set instead
@@ -163,27 +152,22 @@ Toggle.propTypes = {
    * toggle's id.
    */
   labelText: PropTypes.string,
-
   /**
    * Provide an event listener that is called when the control is clicked
    */
   onClick: PropTypes.func,
-
   /**
    * Provide an event listener that is called when the control is toggled
    */
   onToggle: PropTypes.func,
-
   /**
    * Whether the toggle should be read-only
    */
   readOnly: PropTypes.bool,
-
   /**
    * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
    */
   size: PropTypes.oneOf(['sm', 'md']),
-
   /**
    * Specify whether the control is toggled
    */

package/es/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -12,7 +12,6 @@ import cx from 'classnames';
 import { PrefixContext } from '../../internal/usePrefix.js';
 
 var _path;
-
 class ToggleSmallSkeleton extends React__default.Component {
   render() {
     const {
@@ -45,22 +44,17 @@ class ToggleSmallSkeleton extends React__default.Component {
       }))))));
     });
   }
-
 }
-
 _defineProperty(ToggleSmallSkeleton, "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
@@ -69,7 +63,6 @@ _defineProperty(ToggleSmallSkeleton, "propTypes", {
    */
   labelText: PropTypes.string
 });
-
 _defineProperty(ToggleSmallSkeleton, "defaultProps", {
   ['aria-label']: 'Toggle is loading'
 });

package/es/components/Toggletip/index.d.ts

@@ -0,0 +1,148 @@
+/**
+ * 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.
+ */
+import PropTypes from 'prop-types';
+import { type ElementType, type ReactNode } from 'react';
+import { type PopoverAlignment } from '../Popover';
+type ToggletipLabelProps<E extends ElementType> = {
+    as?: E | undefined;
+    children?: ReactNode;
+    className?: string | undefined;
+};
+/**
+ * Used to render the label for a Toggletip
+ */
+export declare function ToggletipLabel<E extends ElementType>({ as: BaseComponent, children, className: customClassName, }: ToggletipLabelProps<E>): JSX.Element;
+export declare namespace ToggletipLabel {
+    var propTypes: {
+        /**
+         * Provide a custom element or component to render the top-level node for the
+         * component.
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+interface ToggletipProps<E extends ElementType> {
+    align?: PopoverAlignment | undefined;
+    as?: E | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+    defaultOpen?: boolean | undefined;
+}
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+export declare function Toggletip<E extends ElementType = 'span'>({ align, as, className: customClassName, children, defaultOpen, }: ToggletipProps<E>): JSX.Element;
+export declare namespace Toggletip {
+    var propTypes: {
+        /**
+         * Specify how the toggletip should align with the button
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom element or component to render the top-level node for the
+         * component.
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the toggletip should be open by default
+         */
+        defaultOpen: PropTypes.Requireable<boolean>;
+    };
+}
+interface ToggletipButtonProps {
+    children?: ReactNode;
+    className?: string | undefined;
+    label?: string | undefined;
+}
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+export declare function ToggletipButton({ children, className: customClassName, label, }: ToggletipButtonProps): JSX.Element;
+export declare namespace ToggletipButton {
+    var propTypes: {
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide an accessible label for this button
+         */
+        label: PropTypes.Requireable<string>;
+    };
+}
+interface ToggletipContentProps {
+    children?: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+export declare function ToggletipContent({ children, className: customClassName, }: ToggletipContentProps): JSX.Element;
+export declare namespace ToggletipContent {
+    var propTypes: {
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+interface ToggleTipActionsProps {
+    children?: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+export declare function ToggletipActions({ children, className: customClassName, }: ToggleTipActionsProps): JSX.Element;
+export declare namespace ToggletipActions {
+    var propTypes: {
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export {};

package/es/components/Toggletip/index.js

@@ -19,7 +19,6 @@ import { Escape } from '../../internal/keyboard/keys.js';
 /**
  * Used to render the label for a Toggletip
  */
-
 function ToggletipLabel(_ref) {
   let {
     as: BaseComponent = 'span',
@@ -28,33 +27,30 @@ function ToggletipLabel(_ref) {
   } = _ref;
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-label`, customClassName);
-  return /*#__PURE__*/React__default.createElement(BaseComponent, {
+  const BaseComponentAsAny = BaseComponent;
+  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, {
     className: className
   }, children);
 }
-
 ToggletipLabel.propTypes = {
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.
    */
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
+  as: PropTypes.elementType,
   /**
    * Custom children to be rendered as the content of the label
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
   className: PropTypes.string
-}; // Used to coordinate accessibility props between button and content along with
+};
+// Used to coordinate accessibility props between button and content along with
 // the actions to open and close the toggletip
-
-const ToggletipContext = /*#__PURE__*/React__default.createContext();
-
+const ToggletipContext = /*#__PURE__*/React__default.createContext(undefined);
 function useToggletip() {
   return useContext(ToggletipContext);
 }
@@ -63,8 +59,6 @@ function useToggletip() {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-
-
 function Toggletip(_ref2) {
   let {
     align,
@@ -73,7 +67,7 @@ function Toggletip(_ref2) {
     children,
     defaultOpen = false
   } = _ref2;
-  const ref = useRef();
+  const ref = useRef(null);
   const [open, setOpen] = useState(defaultOpen);
   const prefix = usePrefix();
   const id = useId();
@@ -98,39 +92,36 @@ function Toggletip(_ref2) {
       id
     }
   };
-
-  function onKeyDown(event) {
+  const onKeyDown = event => {
     if (open && match(event, Escape)) {
-      actions.close(); // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
-
-      const button = ref.current.children[0];
+      actions.close();
 
-      if (button && button.type === 'button') {
+      // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
+      const button = ref.current?.children[0];
+      if (button instanceof HTMLButtonElement) {
         button.focus();
       }
     }
-  }
-
-  function handleBlur(event) {
+  };
+  const 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)
-
+  };
 
+  // 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', () => {
     if (open) {
       actions.close();
     }
   });
   useWindowEvent('click', event => {
-    if (open && !ref.current.contains(event.target)) {
+    if (open && ref.current && !ref.current.contains(event.target)) {
       actions.close();
     }
   });
@@ -149,30 +140,25 @@ function Toggletip(_ref2) {
     ref: ref
   }, children));
 }
-
 Toggletip.propTypes = {
   /**
    * Specify how the toggletip should align with the button
    */
   align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
-
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.
    */
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
+  as: PropTypes.elementType,
   /**
    * Custom children to be rendered as the content of the label
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
   className: PropTypes.string,
-
   /**
    * Specify if the toggletip should be open by default
    */
@@ -182,7 +168,6 @@ Toggletip.propTypes = {
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-
 function ToggletipButton(_ref3) {
   let {
     children,
@@ -192,25 +177,22 @@ function ToggletipButton(_ref3) {
   const toggletip = useToggletip();
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-button`, customClassName);
-  return /*#__PURE__*/React__default.createElement("button", _extends({}, toggletip.buttonProps, {
+  return /*#__PURE__*/React__default.createElement("button", _extends({}, toggletip?.buttonProps, {
     "aria-label": label,
     type: "button",
     className: className
   }), children);
 }
-
 ToggletipButton.propTypes = {
   /**
    * Custom children to be rendered as the content of the label
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
   className: PropTypes.string,
-
   /**
    * Provide an accessible label for this button
    */
@@ -221,7 +203,6 @@ ToggletipButton.propTypes = {
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-
 function ToggletipContent(_ref4) {
   let {
     children,
@@ -231,17 +212,15 @@ function ToggletipContent(_ref4) {
   const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement(PopoverContent, _extends({
     className: customClassName
-  }, toggletip.contentProps), /*#__PURE__*/React__default.createElement("div", {
+  }, toggletip?.contentProps), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--toggletip-content`
   }, children));
 }
-
 ToggletipContent.propTypes = {
   /**
    * Custom children to be rendered as the content of the label
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
@@ -252,7 +231,6 @@ ToggletipContent.propTypes = {
  * `ToggletipActions` is a container for one or two actions present at the base
  * of a toggletip. It is used for layout of these items.
  */
-
 function ToggletipActions(_ref5) {
   let {
     children,
@@ -264,13 +242,11 @@ function ToggletipActions(_ref5) {
     className: className
   }, children);
 }
-
 ToggletipActions.propTypes = {
   /**
    * Custom children to be rendered as the content of the label
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component

package/es/components/Tooltip/DefinitionTooltip.js

@@ -32,14 +32,12 @@ const DefinitionTooltip = _ref => {
   const [isOpen, setOpen] = useState(defaultOpen);
   const prefix = usePrefix();
   const tooltipId = useFallbackId(id);
-
   function onKeyDown(event) {
     if (isOpen && match(event, Escape)) {
       event.stopPropagation();
       setOpen(false);
     }
   }
-
   return /*#__PURE__*/React__default.createElement(Popover, {
     align: align,
     className: className,
@@ -69,52 +67,43 @@ const DefinitionTooltip = _ref => {
     id: tooltipId
   }, tooltipText ?? definition));
 };
-
 DefinitionTooltip.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
-
   /**
    * The `children` prop will be used as the value that is being defined
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the tooltip should be open when it first renders
    */
   defaultOpen: PropTypes.bool,
-
   /**
    * The `definition` prop is used as the content inside of the tooltip that
    * appears when a user interacts with the element rendered by the `children`
    * prop
    */
   definition: PropTypes.node.isRequired,
-
   /**
    * Provide a value that will be assigned as the id of the tooltip
    */
   id: PropTypes.string,
-
   /**
    * Specifies whether or not the `DefinitionTooltip` should open on hover or not
    */
   openOnHover: PropTypes.bool,
-
   /**
    * [Deprecated in v11] Please use the `definition` prop instead.
    *
    * Provide the text that will be displayed in the tooltip when it is rendered.
    */
   tooltipText: deprecate(PropTypes.node, 'The tooltipText prop has been deprecated. Please use the `definition` prop instead.'),
-
   /**
    * The CSS class name of the trigger element
    */

package/es/components/Tooltip/Tooltip.d.ts

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { PopoverAlignment } from '../Popover';
-import { PolymorphicProps } from '../../types/common';
+import { type PolymorphicProps } from '../../types/common';
 interface TooltipBaseProps {
     /**
      * Specify how the trigger should align with the tooltip