@carbon/react 1.31.3 → 1.32.0

package/es/components/Tabs/Tabs.js

@@ -7,10 +7,12 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ChevronLeft, ChevronRight, Close } from '@carbon/icons-react';
+import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import debounce from 'lodash.debounce';
 import PropTypes from 'prop-types';
-import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect, forwardRef } from 'react';
+import { isElement } from 'react-is';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { useControllableState } from '../../internal/useControllableState.js';
@@ -23,19 +25,39 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { usePressable } from './usePressable.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { useEvent } from '../../internal/useEvent.js';
+import { useMatchMedia } from '../../internal/useMatchMedia.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowRight, ArrowLeft, Home, End, Delete } from '../../internal/keyboard/keys.js';
 
 var _ChevronLeft, _ChevronRight, _Close;
 
 // Used to manage the overall state of the Tabs
-const TabsContext = /*#__PURE__*/React__default.createContext();
+
+const TabsContext = /*#__PURE__*/React__default.createContext({
+  baseId: '',
+  activeIndex: 0,
+  defaultSelectedIndex: 0,
+  dismissable: false,
+  onTabCloseRequest() {},
+  setActiveIndex() {},
+  selectedIndex: 0,
+  setSelectedIndex() {}
+});
 
 // Used to keep track of position in a tablist
-const TabContext = /*#__PURE__*/React__default.createContext();
+const TabContext = /*#__PURE__*/React__default.createContext({
+  index: 0,
+  hasSecondaryLabel: false
+});
+const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
 
 // Used to keep track of position in a list of tab panels
-const TabPanelContext = /*#__PURE__*/React__default.createContext();
+const TabPanelContext = /*#__PURE__*/React__default.createContext(0);
+
+/**
+ * Tabs
+ */
+
 function Tabs(_ref) {
   let {
     children,
@@ -52,13 +74,9 @@ function Tabs(_ref) {
   const [selectedIndex, setSelectedIndex] = useControllableState({
     value: controlledSelectedIndex,
     defaultValue: defaultSelectedIndex,
-    onChange: value => {
-      if (onChange) {
-        onChange({
-          selectedIndex: value
-        });
-      }
-    }
+    onChange: value => onChange?.({
+      selectedIndex: value
+    })
   });
   const value = {
     baseId,
@@ -76,7 +94,7 @@ function Tabs(_ref) {
 }
 Tabs.propTypes = {
   /**
-   * Provide child elements to be rendered inside of the `Tabs`.
+   * Provide child elements to be rendered inside the `Tabs`.
    * These elements should render either `TabsList` or `TabsPanels`
    */
   children: PropTypes.node,
@@ -112,24 +130,28 @@ Tabs.propTypes = {
 };
 
 /**
- * Get the next index for a given keyboard event given a count of the total
- * items and the current index
- * @param {Event} event
- * @param {number} total
- * @param {number} index
- * @returns {number}
+ * Get the next index for a given keyboard event
+ * given a count of the total items and the current index
  */
 function getNextIndex(event, total, index) {
-  if (match(event, ArrowRight)) {
-    return (index + 1) % total;
-  } else if (match(event, ArrowLeft)) {
-    return (total + index - 1) % total;
-  } else if (match(event, Home)) {
-    return 0;
-  } else if (match(event, End)) {
-    return total - 1;
+  switch (true) {
+    case match(event, ArrowRight):
+      return (index + 1) % total;
+    case match(event, ArrowLeft):
+      return (total + index - 1) % total;
+    case match(event, Home):
+      return 0;
+    case match(event, End):
+      return total - 1;
+    default:
+      return index;
   }
 }
+
+/**
+ * TabList
+ */
+
 function TabList(_ref2) {
   let {
     activation = 'automatic',
@@ -137,6 +159,7 @@ function TabList(_ref2) {
     children,
     className: customClassName,
     contained = false,
+    fullWidth = false,
     iconSize,
     leftOverflowButtonProps,
     light,
@@ -157,7 +180,23 @@ function TabList(_ref2) {
   const previousButton = useRef(null);
   const nextButton = useRef(null);
   const [isScrollable, setIsScrollable] = useState(false);
-  const [scrollLeft, setScrollLeft] = useState(null);
+  const [scrollLeft, setScrollLeft] = useState(0);
+  let hasSecondaryLabelTabs = false;
+  if (contained) {
+    hasSecondaryLabelTabs = React__default.Children.toArray(children).some(child => {
+      return isElement(child) && !!child.props.secondaryLabel;
+    });
+  }
+  const isLg = useMatchMedia(lgMediaQuery);
+  const distributeWidth = fullWidth && contained && isLg && React__default.Children.toArray(children).length < 9;
+  const className = cx(`${prefix}--tabs`, {
+    [`${prefix}--tabs--contained`]: contained,
+    [`${prefix}--tabs--light`]: light,
+    [`${prefix}--tabs__icon--default`]: iconSize === 'default',
+    [`${prefix}--tabs__icon--lg`]: iconSize === 'lg',
+    [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
+    [`${prefix}--tabs--full-width`]: distributeWidth
+  }, customClassName);
 
   // Previous Button
   // VISIBLE IF:
@@ -169,14 +208,6 @@ function TabList(_ref2) {
   //   SCROLLABLE
   //   AND SCROLL_LEFT + CLIENT_WIDTH < SCROLL_WIDTH
   const [isNextButtonVisible, setIsNextButtonVisible] = useState(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false);
-  const hasSecondaryLabelTabs = contained && !!React__default.Children.toArray(children).filter(child => child.props.secondaryLabel).length;
-  const className = cx(`${prefix}--tabs`, customClassName, {
-    [`${prefix}--tabs--contained`]: contained,
-    [`${prefix}--tabs--light`]: light,
-    [`${prefix}--tabs__icon--default`]: iconSize === 'default',
-    [`${prefix}--tabs__icon--lg`]: iconSize === 'lg',
-    [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs
-  });
   const isPreviousButtonVisible = ref.current ? isScrollable && scrollLeft > 0 : false;
   const previousButtonClasses = cx(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--previous`, {
     [`${prefix}--tab--overflow-nav-button--hidden`]: !isPreviousButtonVisible
@@ -193,9 +224,7 @@ function TabList(_ref2) {
   function onKeyDown(event) {
     if (matches(event, [ArrowRight, ArrowLeft, Home, End])) {
       event.preventDefault();
-      const activeTabs = tabs.current.filter(tab => {
-        return !tab.disabled;
-      });
+      const activeTabs = tabs.current.filter(tab => !tab.disabled);
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
       if (activation === 'automatic') {
@@ -203,7 +232,7 @@ function TabList(_ref2) {
       } else if (activation === 'manual') {
         setActiveIndex(nextIndex);
       }
-      tabs.current[nextIndex].focus();
+      tabs.current[nextIndex]?.focus();
     }
   }
   useEffectOnce(() => {
@@ -253,12 +282,12 @@ function TabList(_ref2) {
 
   // updates scroll location for all scroll behavior.
   useIsomorphicEffect(() => {
-    if (scrollLeft !== null) {
+    if (scrollLeft !== null && ref.current) {
       ref.current.scrollLeft = scrollLeft;
     }
   }, [scrollLeft]);
   useIsomorphicEffect(() => {
-    if (!isScrollable) {
+    if (!isScrollable || !ref.current) {
       return;
     }
     const tab = activation === 'manual' ? tabs.current[activeIndex] : tabs.current[selectedIndex];
@@ -292,7 +321,7 @@ function TabList(_ref2) {
       let {
         longPress
       } = _ref3;
-      if (!longPress) {
+      if (!longPress && ref.current) {
         setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
     },
@@ -305,7 +334,7 @@ function TabList(_ref2) {
       let {
         longPress
       } = _ref4;
-      if (!longPress) {
+      if (!longPress && ref.current) {
         setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
     },
@@ -317,7 +346,7 @@ function TabList(_ref2) {
     className: className
   }, /*#__PURE__*/React__default.createElement("button", _extends({
     "aria-hidden": "true",
-    tabIndex: "-1",
+    tabIndex: -1,
     "aria-label": "Scroll left",
     ref: previousButton,
     className: previousButtonClasses,
@@ -330,7 +359,7 @@ function TabList(_ref2) {
     onScroll: debouncedOnScroll,
     onKeyDown: onKeyDown
   }), React__default.Children.map(children, (child, index) => {
-    return /*#__PURE__*/React__default.createElement(TabContext.Provider, {
+    return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabContext.Provider, {
       value: {
         index,
         hasSecondaryLabel: hasSecondaryLabelTabs,
@@ -343,7 +372,7 @@ function TabList(_ref2) {
     }));
   })), /*#__PURE__*/React__default.createElement("button", _extends({
     "aria-hidden": "true",
-    tabIndex: "-1",
+    tabIndex: -1,
     "aria-label": "Scroll right",
     ref: nextButton,
     className: nextButtonClasses,
@@ -362,7 +391,7 @@ TabList.propTypes = {
    */
   'aria-label': PropTypes.string.isRequired,
   /**
-   * Provide child elements to be rendered inside of `ContentTabs`.
+   * Provide child elements to be rendered inside `ContentTabs`.
    * These elements should render a `ContentTab`
    */
   children: PropTypes.node,
@@ -374,6 +403,10 @@ TabList.propTypes = {
    * Specify whether component is contained type
    */
   contained: PropTypes.bool,
+  /**
+   * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
+   */
+  fullWidth: PropTypes.bool,
   /**
    * If using `IconTab`, specify the size of the icon being used.
    */
@@ -383,7 +416,7 @@ TabList.propTypes = {
    */
   leftOverflowButtonProps: PropTypes.object,
   /**
-   * Specify whether or not to use the light component variant
+   * Specify whether to use the light component variant
    */
   light: deprecate(PropTypes.bool, 'The `light` prop for `TabList` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
   /**
@@ -397,53 +430,60 @@ TabList.propTypes = {
    */
   scrollDebounceWait: PropTypes.number,
   /**
-   * Choose whether or not to automatically scroll to newly selected tabs
-   * on component rerender
+   * Choose whether to automatically scroll
+   * to newly selected tabs on component rerender
    */
   scrollIntoView: PropTypes.bool
 };
 
 /**
- * Helper function to setup the behavior when a button is "long pressed". This
- * function will take a ref to the tablist, a direction, and a setter for
- * scrollLeft and will update the scroll position within a
- * requestAnimationFrame.
- *
- * It returns a cleanup function to be run when the long press is
- * deactivated
+ * Helper function to set up the behavior when a button is "long pressed".
+ * This function will take a ref to the tablist, a direction, and a setter
+ * for scrollLeft and will update the scroll position within a requestAnimationFrame.
  *
- * @param {RefObject} ref
- * @param {'forward' | 'backward'} direction
- * @param {Function} setScrollLeft
- * @returns {Function}
+ * It returns a cleanup function to be run
+ * when the long press is deactivated
  */
 function createLongPressBehavior(ref, direction, setScrollLeft) {
-  // We manually override the scroll behavior to be "auto". If it is set as
-  // smooth, this animation does not update correctly
-  let defaultScrollBehavior = ref.current.style['scroll-behavior'];
-  ref.current.style['scroll-behavior'] = 'auto';
+  const node = ref.current;
+  if (!node) {
+    return () => {};
+  }
+
+  // We manually override the scroll behavior to be "auto".
+  // If it is set as smooth, this animation does not update correctly
+  const defaultScrollBehavior = node?.style['scroll-behavior'];
+  node.style['scroll-behavior'] = 'auto';
   const scrollDelta = direction === 'forward' ? 5 : -5;
   let frameId = null;
   function tick() {
-    ref.current.scrollLeft = ref.current.scrollLeft + scrollDelta;
+    if (!node) {
+      return;
+    }
+    node.scrollLeft = node.scrollLeft + scrollDelta;
     frameId = requestAnimationFrame(tick);
   }
   frameId = requestAnimationFrame(tick);
   return () => {
     // Restore the previous scroll behavior
-    ref.current.style['scroll-behavior'] = defaultScrollBehavior;
+    node.style['scroll-behavior'] = defaultScrollBehavior;
 
     // Make sure that our `scrollLeft` value is in sync with the existing
     // `ref` after our requestAnimationFrame loop above
-    setScrollLeft(ref.current.scrollLeft);
+    setScrollLeft(node.scrollLeft);
     if (frameId) {
       cancelAnimationFrame(frameId);
     }
   };
 }
-const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, forwardRef) {
+
+/**
+ * Tab
+ */
+
+const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
   let {
-    as: BaseComponent = 'button',
+    as = 'button',
     children,
     className: customClassName,
     disabled,
@@ -472,20 +512,21 @@ const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, forwardRe
   const [ignoreHover, setIgnoreHover] = useState(false);
   const id = `${baseId}-tab-${index}`;
   const panelId = `${baseId}-tabpanel-${index}`;
-  const className = cx(`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, customClassName, {
+  const className = cx(`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, {
     [`${prefix}--tabs__nav-item--selected`]: selectedIndex === index,
     [`${prefix}--tabs__nav-item--disabled`]: disabled,
     [`${prefix}--tabs__nav-item--hover-off`]: ignoreHover
-  });
+  }, customClassName);
+  const BaseComponent = as;
   const onDismissIconMouseEnter = evt => {
-    if (contained) {
+    if (contained && tabRef.current) {
       evt.stopPropagation();
       setIgnoreHover(true);
       tabRef.current.classList.add(`${prefix}--tabs__nav-item--hover-off`);
     }
   };
   const onDismissIconMouseLeave = () => {
-    if (contained) {
+    if (contained && tabRef.current) {
       tabRef.current.classList.remove(`${prefix}--tabs__nav-item--hover-off`);
       setIgnoreHover(false);
     }
@@ -517,7 +558,7 @@ const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, forwardRe
     title: "Close tab",
     ref: dismissIconRef
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)));
-  const hasIcon = Icon || dismissable;
+  const hasIcon = Icon ?? dismissable;
   return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
@@ -532,9 +573,7 @@ const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, forwardRe
         return;
       }
       setSelectedIndex(index);
-      if (onClick) {
-        onClick(evt);
-      }
+      onClick?.(evt);
     },
     onKeyDown: handleKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
@@ -546,24 +585,27 @@ const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, forwardRe
   }, /*#__PURE__*/React__default.createElement(Icon, {
     size: 16
   })), /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--tabs__nav-item-label`
+    className: `${prefix}--tabs__nav-item-label`,
+    title: children
   }, children), /*#__PURE__*/React__default.createElement("div", {
     className: cx(`${prefix}--tabs__nav-item--icon`, {
       [`${prefix}--visually-hidden`]: !hasIcon
     })
-  }, DismissIcon, !dismissable && hasIcon && /*#__PURE__*/React__default.createElement(Icon, {
+  }, DismissIcon, !dismissable && Icon && /*#__PURE__*/React__default.createElement(Icon, {
     size: 16
   }))), hasSecondaryLabel && /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--tabs__nav-item-secondary-label`
+    className: `${prefix}--tabs__nav-item-secondary-label`,
+    title: secondaryLabel
   }, secondaryLabel));
 });
 Tab.propTypes = {
   /**
    * Provide a custom element to render instead of the default button
    */
+  // @ts-expect-error: Invalid prop type derivation
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   /**
-   * Provide child elements to be rendered inside of `Tab`.
+   * Provide child elements to be rendered inside `Tab`.
    */
   children: PropTypes.node,
   /**
@@ -592,6 +634,7 @@ Tab.propTypes = {
    * Optional prop to render an icon next to the label.
    * Can be a React component class
    */
+  // @ts-expect-error: Invalid prop type derivation
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /*
    * An optional label to render under the primary tab label.
@@ -599,6 +642,11 @@ Tab.propTypes = {
    **/
   secondaryLabel: PropTypes.string
 };
+
+/**
+ * IconTab
+ */
+
 const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref6, ref) {
   let {
     children,
@@ -625,7 +673,7 @@ const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref6, r
 });
 IconTab.propTypes = {
   /**
-   * Provide an icon to be rendered inside of `IconTab` as the visual label for Tab.
+   * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
    */
   children: PropTypes.node,
   /**
@@ -641,7 +689,7 @@ IconTab.propTypes = {
    */
   enterDelayMs: PropTypes.number,
   /**
-   * Provide the label to be rendered inside of the Tooltip. The label will use
+   * Provide the label to be rendered inside the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
    * This means that if you have text in the child node it will not be
    * announced to the screen reader.
@@ -652,6 +700,11 @@ IconTab.propTypes = {
    */
   leaveDelayMs: PropTypes.number
 };
+
+/**
+ * TabPanel
+ */
+
 const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7, forwardRef) {
   let {
     children,
@@ -661,7 +714,7 @@ const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7,
   const prefix = usePrefix();
   const panel = useRef(null);
   const ref = useMergedRefs([forwardRef, panel]);
-  const [tabIndex, setTabIndex] = useState('0');
+  const [tabIndex, setTabIndex] = useState(0);
   const [interactiveContent, setInteractiveContent] = useState(false);
   const {
     selectedIndex,
@@ -680,26 +733,24 @@ const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7,
     const content = getInteractiveContent(panel.current);
     if (content) {
       setInteractiveContent(true);
-      setTabIndex('-1');
+      setTabIndex(-1);
     }
   });
 
   // tabindex should only be 0 if no interactive content in children
   useEffect(() => {
-    if (!panel.current) {
+    const node = panel.current;
+    if (!node) {
       return;
     }
-    const {
-      current: node
-    } = panel;
     function callback() {
       const content = getInteractiveContent(node);
       if (content) {
         setInteractiveContent(true);
-        setTabIndex('-1');
+        setTabIndex(-1);
       } else {
         setInteractiveContent(false);
-        setTabIndex('0');
+        setTabIndex(0);
       }
     }
     const observer = new MutationObserver(callback);
@@ -707,9 +758,7 @@ const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7,
       childList: true,
       subtree: true
     });
-    return () => {
-      observer.disconnect(node);
-    };
+    return () => observer.disconnect();
   }, []);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     "aria-labelledby": tabId,
@@ -723,7 +772,7 @@ const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7,
 });
 TabPanel.propTypes = {
   /**
-   * Provide child elements to be rendered inside of `TabPanel`.
+   * Provide child elements to be rendered inside `TabPanel`.
    */
   children: PropTypes.node,
   /**
@@ -731,6 +780,11 @@ TabPanel.propTypes = {
    */
   className: PropTypes.string
 };
+
+/**
+ * TabPanels
+ */
+
 function TabPanels(_ref8) {
   let {
     children
@@ -743,7 +797,7 @@ function TabPanels(_ref8) {
 }
 TabPanels.propTypes = {
   /**
-   * Provide child elements to be rendered inside of `TabPanels`.
+   * Provide child elements to be rendered inside `TabPanels`.
    */
   children: PropTypes.node
 };

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

@@ -0,0 +1,10 @@
+/**
+ * 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 { Tabs } from './Tabs';
+export default Tabs;
+export { default as TabsSkeleton } from './Tabs.Skeleton';
+export { TabPanels, type TabPanelsProps, TabPanel, type TabPanelProps, TabList, type TabListProps, IconTab, type IconTabProps, Tabs, type TabsProps, } from './Tabs';

package/es/components/Tabs/usePressable.js

@@ -7,6 +7,17 @@
 
 import { useRef, useState, useEffect } from 'react';
 
+/**
+ * @param {React.RefObject<HTMLElement>} ref
+ *
+ * @param {{
+ *   onPress?(state: { longPress: boolean }): void,
+ *   onPressIn?(): void,
+ *   onPressOut?(): void,
+ *   onLongPress?(): void,
+ *   delayLongPressMs?: number,
+ * }} options
+ */
 function usePressable(ref) {
   let {
     onPress,

package/es/components/TextInput/ControlledPasswordInput.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+export interface ControlledPasswordInputProps extends ReactAttr<HTMLInputElement> {
+    /**
+     * Provide a custom className that is applied directly to the underlying
+     * `<input>` node
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<input>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Specify whether or not the underlying label is visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * "Hide password" tooltip text on password visibility toggle
+     */
+    hidePasswordLabel?: string;
+    /**
+     * Provide a unique identifier for the input field
+     */
+    id: string;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: React.ReactNode;
+    /**
+     * @deprecated The `light` prop for `ControlledPasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
+     */
+    light?: boolean;
+    /**
+     * Optionally provide an `onChange` handler that is called whenever `<input>`
+     * is updated
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Optionally provide an `onClick` handler that is called whenever the
+     * `<input>` is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Specify the placeholder attribute for the `<input>`
+     */
+    placeholder?: string;
+    /**
+     * "Show password" tooltip text on password visibility toggle
+     */
+    showPasswordLabel?: string;
+    /**
+     * Specify the size of the Text Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify the alignment of the tooltip to the icon-only button.
+     * Can be one of?: start, center, or end.
+     */
+    tooltipAlignment?: 'start' | 'center' | 'end';
+    /**
+     * Specify the direction of the tooltip for icon-only buttons.
+     * Can be either top, right, bottom, or left.
+     */
+    tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Provide the current value of the `<input>`
+     */
+    value?: string | number;
+    togglePasswordVisibility?(event: React.MouseEvent<HTMLButtonElement>): void;
+    type?: string;
+}
+declare const ControlledPasswordInput: React.ForwardRefExoticComponent<ControlledPasswordInputProps & React.RefAttributes<unknown>>;
+export default ControlledPasswordInput;