@carbon/react 1.29.1 → 1.30.0-rc.0

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

@@ -24,7 +24,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 class ToggleSkeleton extends React__default["default"].Component {
   render() {
     var _div;
-
     const {
       id,
       labelText,
@@ -57,22 +56,17 @@ class ToggleSkeleton extends React__default["default"].Component {
       }))));
     });
   }
-
 }
-
 _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
@@ -80,13 +74,11 @@ _rollupPluginBabelHelpers.defineProperty(ToggleSkeleton, "propTypes", {
    * 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'

package/lib/components/Toggle/Toggle.js

@@ -48,17 +48,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);
@@ -129,43 +126,35 @@ Toggle.propTypes = {
    * Specify another element's id to be used as the label for this toggle
    */
   'aria-labelledby': PropTypes__default["default"].string,
-
   /**
    * Specify a custom className to apply to the form-item node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the toggle should be on by default
    */
   defaultToggled: PropTypes__default["default"].bool,
-
   /**
    * Whether this control should be disabled
    */
   disabled: PropTypes__default["default"].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__default["default"].bool,
-
   /**
    * Provide an id that unique represents the underlying `<button>`
    */
   id: PropTypes__default["default"].string.isRequired,
-
   /**
    * Specify the label for the "off" position
    */
   labelA: PropTypes__default["default"].node,
-
   /**
    * Specify the label for the "on" position
    */
   labelB: PropTypes__default["default"].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
@@ -173,27 +162,22 @@ Toggle.propTypes = {
    * toggle's id.
    */
   labelText: PropTypes__default["default"].string,
-
   /**
    * Provide an event listener that is called when the control is clicked
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * Provide an event listener that is called when the control is toggled
    */
   onToggle: PropTypes__default["default"].func,
-
   /**
    * Whether the toggle should be read-only
    */
   readOnly: PropTypes__default["default"].bool,
-
   /**
    * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md']),
-
   /**
    * Specify whether the control is toggled
    */

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -22,7 +22,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _path;
-
 class ToggleSmallSkeleton extends React__default["default"].Component {
   render() {
     const {
@@ -55,22 +54,17 @@ class ToggleSmallSkeleton extends React__default["default"].Component {
       }))))));
     });
   }
-
 }
-
 _rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "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
@@ -79,7 +73,6 @@ _rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "propTypes", {
    */
   labelText: PropTypes__default["default"].string
 });
-
 _rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "defaultProps", {
   ['aria-label']: 'Toggle is loading'
 });

package/lib/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/lib/components/Toggletip/index.js

@@ -29,7 +29,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 /**
  * Used to render the label for a Toggletip
  */
-
 function ToggletipLabel(_ref) {
   let {
     as: BaseComponent = 'span',
@@ -38,33 +37,30 @@ function ToggletipLabel(_ref) {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-label`, customClassName);
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, {
+  const BaseComponentAsAny = BaseComponent;
+  return /*#__PURE__*/React__default["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__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
-
+  as: PropTypes__default["default"].elementType,
   /**
    * Custom children to be rendered as the content of the label
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
   className: PropTypes__default["default"].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["default"].createContext();
-
+const ToggletipContext = /*#__PURE__*/React__default["default"].createContext(undefined);
 function useToggletip() {
   return React.useContext(ToggletipContext);
 }
@@ -73,8 +69,6 @@ function useToggletip() {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-
-
 function Toggletip(_ref2) {
   let {
     align,
@@ -83,7 +77,7 @@ function Toggletip(_ref2) {
     children,
     defaultOpen = false
   } = _ref2;
-  const ref = React.useRef();
+  const ref = React.useRef(null);
   const [open, setOpen] = React.useState(defaultOpen);
   const prefix = usePrefix.usePrefix();
   const id = useId.useId();
@@ -108,39 +102,36 @@ function Toggletip(_ref2) {
       id
     }
   };
-
-  function onKeyDown(event) {
+  const onKeyDown = event => {
     if (open && match.match(event, keys.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)
   useEvent.useWindowEvent('blur', () => {
     if (open) {
       actions.close();
     }
   });
   useEvent.useWindowEvent('click', event => {
-    if (open && !ref.current.contains(event.target)) {
+    if (open && ref.current && !ref.current.contains(event.target)) {
       actions.close();
     }
   });
@@ -159,30 +150,25 @@ function Toggletip(_ref2) {
     ref: ref
   }, children));
 }
-
 Toggletip.propTypes = {
   /**
    * Specify how the toggletip should align with the button
    */
   align: PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
-
+  as: PropTypes__default["default"].elementType,
   /**
    * Custom children to be rendered as the content of the label
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify if the toggletip should be open by default
    */
@@ -192,7 +178,6 @@ Toggletip.propTypes = {
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-
 function ToggletipButton(_ref3) {
   let {
     children,
@@ -202,25 +187,22 @@ function ToggletipButton(_ref3) {
   const toggletip = useToggletip();
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--toggletip-button`, customClassName);
-  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, toggletip.buttonProps, {
+  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["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__default["default"].node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Provide an accessible label for this button
    */
@@ -231,7 +213,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,
@@ -241,17 +222,15 @@ function ToggletipContent(_ref4) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, _rollupPluginBabelHelpers["extends"]({
     className: customClassName
-  }, toggletip.contentProps), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, toggletip?.contentProps), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--toggletip-content`
   }, children));
 }
-
 ToggletipContent.propTypes = {
   /**
    * Custom children to be rendered as the content of the label
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
@@ -262,7 +241,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,
@@ -274,13 +252,11 @@ function ToggletipActions(_ref5) {
     className: className
   }, children);
 }
-
 ToggletipActions.propTypes = {
   /**
    * Custom children to be rendered as the content of the label
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -42,14 +42,12 @@ const DefinitionTooltip = _ref => {
   const [isOpen, setOpen] = React.useState(defaultOpen);
   const prefix = usePrefix.usePrefix();
   const tooltipId = useId.useFallbackId(id);
-
   function onKeyDown(event) {
     if (isOpen && match.match(event, keys.Escape)) {
       event.stopPropagation();
       setOpen(false);
     }
   }
-
   return /*#__PURE__*/React__default["default"].createElement(index.Popover, {
     align: align,
     className: className,
@@ -79,52 +77,43 @@ const DefinitionTooltip = _ref => {
     id: tooltipId
   }, tooltipText ?? definition));
 };
-
 DefinitionTooltip.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes__default["default"].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__default["default"].node.isRequired,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the tooltip should be open when it first renders
    */
   defaultOpen: PropTypes__default["default"].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__default["default"].node.isRequired,
-
   /**
    * Provide a value that will be assigned as the id of the tooltip
    */
   id: PropTypes__default["default"].string,
-
   /**
    * Specifies whether or not the `DefinitionTooltip` should open on hover or not
    */
   openOnHover: PropTypes__default["default"].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["default"](PropTypes__default["default"].node, 'The tooltipText prop has been deprecated. Please use the `definition` prop instead.'),
-
   /**
    * The CSS class name of the trigger element
    */

package/lib/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