@carbon/react 1.31.3 → 1.32.0

package/lib/components/Tabs/Tabs.js

@@ -11,10 +11,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var iconsReact = require('@carbon/icons-react');
+var layout = require('@carbon/layout');
 var cx = require('classnames');
 var debounce = require('lodash.debounce');
 var PropTypes = require('prop-types');
 var React = require('react');
+var reactIs = require('react-is');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var useControllableState = require('../../internal/useControllableState.js');
@@ -27,6 +29,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 var usePressable = require('./usePressable.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var useEvent = require('../../internal/useEvent.js');
+var useMatchMedia = require('../../internal/useMatchMedia.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -40,13 +43,32 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _ChevronLeft, _ChevronRight, _Close;
 
 // Used to manage the overall state of the Tabs
-const TabsContext = /*#__PURE__*/React__default["default"].createContext();
+
+const TabsContext = /*#__PURE__*/React__default["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["default"].createContext();
+const TabContext = /*#__PURE__*/React__default["default"].createContext({
+  index: 0,
+  hasSecondaryLabel: false
+});
+const lgMediaQuery = `(min-width: ${layout.breakpoints.lg.width})`;
 
 // Used to keep track of position in a list of tab panels
-const TabPanelContext = /*#__PURE__*/React__default["default"].createContext();
+const TabPanelContext = /*#__PURE__*/React__default["default"].createContext(0);
+
+/**
+ * Tabs
+ */
+
 function Tabs(_ref) {
   let {
     children,
@@ -63,13 +85,9 @@ function Tabs(_ref) {
   const [selectedIndex, setSelectedIndex] = useControllableState.useControllableState({
     value: controlledSelectedIndex,
     defaultValue: defaultSelectedIndex,
-    onChange: value => {
-      if (onChange) {
-        onChange({
-          selectedIndex: value
-        });
-      }
-    }
+    onChange: value => onChange?.({
+      selectedIndex: value
+    })
   });
   const value = {
     baseId,
@@ -87,7 +105,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__default["default"].node,
@@ -123,24 +141,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.match(event, keys.ArrowRight)) {
-    return (index + 1) % total;
-  } else if (match.match(event, keys.ArrowLeft)) {
-    return (total + index - 1) % total;
-  } else if (match.match(event, keys.Home)) {
-    return 0;
-  } else if (match.match(event, keys.End)) {
-    return total - 1;
+  switch (true) {
+    case match.match(event, keys.ArrowRight):
+      return (index + 1) % total;
+    case match.match(event, keys.ArrowLeft):
+      return (total + index - 1) % total;
+    case match.match(event, keys.Home):
+      return 0;
+    case match.match(event, keys.End):
+      return total - 1;
+    default:
+      return index;
   }
 }
+
+/**
+ * TabList
+ */
+
 function TabList(_ref2) {
   let {
     activation = 'automatic',
@@ -148,6 +170,7 @@ function TabList(_ref2) {
     children,
     className: customClassName,
     contained = false,
+    fullWidth = false,
     iconSize,
     leftOverflowButtonProps,
     light,
@@ -168,7 +191,23 @@ function TabList(_ref2) {
   const previousButton = React.useRef(null);
   const nextButton = React.useRef(null);
   const [isScrollable, setIsScrollable] = React.useState(false);
-  const [scrollLeft, setScrollLeft] = React.useState(null);
+  const [scrollLeft, setScrollLeft] = React.useState(0);
+  let hasSecondaryLabelTabs = false;
+  if (contained) {
+    hasSecondaryLabelTabs = React__default["default"].Children.toArray(children).some(child => {
+      return reactIs.isElement(child) && !!child.props.secondaryLabel;
+    });
+  }
+  const isLg = useMatchMedia.useMatchMedia(lgMediaQuery);
+  const distributeWidth = fullWidth && contained && isLg && React__default["default"].Children.toArray(children).length < 9;
+  const className = cx__default["default"](`${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:
@@ -180,14 +219,6 @@ function TabList(_ref2) {
   //   SCROLLABLE
   //   AND SCROLL_LEFT + CLIENT_WIDTH < SCROLL_WIDTH
   const [isNextButtonVisible, setIsNextButtonVisible] = React.useState(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false);
-  const hasSecondaryLabelTabs = contained && !!React__default["default"].Children.toArray(children).filter(child => child.props.secondaryLabel).length;
-  const className = cx__default["default"](`${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__default["default"](`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--previous`, {
     [`${prefix}--tab--overflow-nav-button--hidden`]: !isPreviousButtonVisible
@@ -204,9 +235,7 @@ function TabList(_ref2) {
   function onKeyDown(event) {
     if (match.matches(event, [keys.ArrowRight, keys.ArrowLeft, keys.Home, keys.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') {
@@ -214,7 +243,7 @@ function TabList(_ref2) {
       } else if (activation === 'manual') {
         setActiveIndex(nextIndex);
       }
-      tabs.current[nextIndex].focus();
+      tabs.current[nextIndex]?.focus();
     }
   }
   useEffectOnce.useEffectOnce(() => {
@@ -264,12 +293,12 @@ function TabList(_ref2) {
 
   // updates scroll location for all scroll behavior.
   useIsomorphicEffect["default"](() => {
-    if (scrollLeft !== null) {
+    if (scrollLeft !== null && ref.current) {
       ref.current.scrollLeft = scrollLeft;
     }
   }, [scrollLeft]);
   useIsomorphicEffect["default"](() => {
-    if (!isScrollable) {
+    if (!isScrollable || !ref.current) {
       return;
     }
     const tab = activation === 'manual' ? tabs.current[activeIndex] : tabs.current[selectedIndex];
@@ -303,7 +332,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));
       }
     },
@@ -316,7 +345,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));
       }
     },
@@ -328,7 +357,7 @@ function TabList(_ref2) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     "aria-hidden": "true",
-    tabIndex: "-1",
+    tabIndex: -1,
     "aria-label": "Scroll left",
     ref: previousButton,
     className: previousButtonClasses,
@@ -341,7 +370,7 @@ function TabList(_ref2) {
     onScroll: debouncedOnScroll,
     onKeyDown: onKeyDown
   }), React__default["default"].Children.map(children, (child, index) => {
-    return /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
+    return !reactIs.isElement(child) ? null : /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
       value: {
         index,
         hasSecondaryLabel: hasSecondaryLabelTabs,
@@ -354,7 +383,7 @@ function TabList(_ref2) {
     }));
   })), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     "aria-hidden": "true",
-    tabIndex: "-1",
+    tabIndex: -1,
     "aria-label": "Scroll right",
     ref: nextButton,
     className: nextButtonClasses,
@@ -373,7 +402,7 @@ TabList.propTypes = {
    */
   'aria-label': PropTypes__default["default"].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__default["default"].node,
@@ -385,6 +414,10 @@ TabList.propTypes = {
    * Specify whether component is contained type
    */
   contained: PropTypes__default["default"].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__default["default"].bool,
   /**
    * If using `IconTab`, specify the size of the icon being used.
    */
@@ -394,7 +427,7 @@ TabList.propTypes = {
    */
   leftOverflowButtonProps: PropTypes__default["default"].object,
   /**
-   * Specify whether or not to use the light component variant
+   * Specify whether to use the light component variant
    */
   light: deprecate["default"](PropTypes__default["default"].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.'),
   /**
@@ -408,53 +441,60 @@ TabList.propTypes = {
    */
   scrollDebounceWait: PropTypes__default["default"].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__default["default"].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["default"].forwardRef(function Tab(_ref5, forwardRef) {
+
+/**
+ * Tab
+ */
+
+const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref5, forwardRef) {
   let {
-    as: BaseComponent = 'button',
+    as = 'button',
     children,
     className: customClassName,
     disabled,
@@ -483,20 +523,21 @@ const Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5
   const [ignoreHover, setIgnoreHover] = React.useState(false);
   const id = `${baseId}-tab-${index}`;
   const panelId = `${baseId}-tabpanel-${index}`;
-  const className = cx__default["default"](`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, customClassName, {
+  const className = cx__default["default"](`${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);
     }
@@ -528,7 +569,7 @@ const Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5
     title: "Close tab",
     ref: dismissIconRef
   }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));
-  const hasIcon = Icon || dismissable;
+  const hasIcon = Icon ?? dismissable;
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
@@ -543,9 +584,7 @@ const Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5
         return;
       }
       setSelectedIndex(index);
-      if (onClick) {
-        onClick(evt);
-      }
+      onClick?.(evt);
     },
     onKeyDown: handleKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
@@ -557,24 +596,27 @@ const Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: 16
   })), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--tabs__nav-item-label`
+    className: `${prefix}--tabs__nav-item-label`,
+    title: children
   }, children), /*#__PURE__*/React__default["default"].createElement("div", {
     className: cx__default["default"](`${prefix}--tabs__nav-item--icon`, {
       [`${prefix}--visually-hidden`]: !hasIcon
     })
-  }, DismissIcon, !dismissable && hasIcon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, DismissIcon, !dismissable && Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: 16
   }))), hasSecondaryLabel && /*#__PURE__*/React__default["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__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
   /**
-   * Provide child elements to be rendered inside of `Tab`.
+   * Provide child elements to be rendered inside `Tab`.
    */
   children: PropTypes__default["default"].node,
   /**
@@ -603,6 +645,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__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /*
    * An optional label to render under the primary tab label.
@@ -610,6 +653,11 @@ Tab.propTypes = {
    **/
   secondaryLabel: PropTypes__default["default"].string
 };
+
+/**
+ * IconTab
+ */
+
 const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab(_ref6, ref) {
   let {
     children,
@@ -636,7 +684,7 @@ const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconT
 });
 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__default["default"].node,
   /**
@@ -652,7 +700,7 @@ IconTab.propTypes = {
    */
   enterDelayMs: PropTypes__default["default"].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.
@@ -663,6 +711,11 @@ IconTab.propTypes = {
    */
   leaveDelayMs: PropTypes__default["default"].number
 };
+
+/**
+ * TabPanel
+ */
+
 const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPanel(_ref7, forwardRef) {
   let {
     children,
@@ -672,7 +725,7 @@ const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabP
   const prefix = usePrefix.usePrefix();
   const panel = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, panel]);
-  const [tabIndex, setTabIndex] = React.useState('0');
+  const [tabIndex, setTabIndex] = React.useState(0);
   const [interactiveContent, setInteractiveContent] = React.useState(false);
   const {
     selectedIndex,
@@ -691,26 +744,24 @@ const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabP
     const content = useNoInteractiveChildren.getInteractiveContent(panel.current);
     if (content) {
       setInteractiveContent(true);
-      setTabIndex('-1');
+      setTabIndex(-1);
     }
   });
 
   // tabindex should only be 0 if no interactive content in children
   React.useEffect(() => {
-    if (!panel.current) {
+    const node = panel.current;
+    if (!node) {
       return;
     }
-    const {
-      current: node
-    } = panel;
     function callback() {
       const content = useNoInteractiveChildren.getInteractiveContent(node);
       if (content) {
         setInteractiveContent(true);
-        setTabIndex('-1');
+        setTabIndex(-1);
       } else {
         setInteractiveContent(false);
-        setTabIndex('0');
+        setTabIndex(0);
       }
     }
     const observer = new MutationObserver(callback);
@@ -718,9 +769,7 @@ const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabP
       childList: true,
       subtree: true
     });
-    return () => {
-      observer.disconnect(node);
-    };
+    return () => observer.disconnect();
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     "aria-labelledby": tabId,
@@ -734,7 +783,7 @@ const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabP
 });
 TabPanel.propTypes = {
   /**
-   * Provide child elements to be rendered inside of `TabPanel`.
+   * Provide child elements to be rendered inside `TabPanel`.
    */
   children: PropTypes__default["default"].node,
   /**
@@ -742,6 +791,11 @@ TabPanel.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
+
+/**
+ * TabPanels
+ */
+
 function TabPanels(_ref8) {
   let {
     children
@@ -754,7 +808,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__default["default"].node
 };

package/lib/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/lib/components/Tabs/usePressable.js

@@ -11,6 +11,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('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/lib/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;