@carbon/react 1.56.0-rc.0 → 1.56.0

package/es/components/Button/Button.js

@@ -49,9 +49,14 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(props, ref
   };
   const iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React__default.createElement(ButtonImageElement, null);
   if (!isIconOnlyButton(hasIconOnly)) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {
+      tooltipAlignment,
+      ...propsWithoutTooltipAlignment
+    } = props;
     return /*#__PURE__*/React__default.createElement(ButtonBase, _extends({
       ref: ref
-    }, props));
+    }, propsWithoutTooltipAlignment));
   } else {
     let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {

package/es/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -6,9 +6,5 @@
  */
 import React from 'react';
 import { type SearchProps } from '../Search';
-declare function ExpandableSearch({ onBlur, onChange, onExpand, onKeyDown, defaultValue, isExpanded, ...props }: SearchProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ExpandableSearch {
-    var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
-    var displayName: string;
-}
+declare const ExpandableSearch: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
 export default ExpandableSearch;

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -12,10 +12,11 @@ import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import mergeRefs from '../../tools/mergeRefs.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
-function ExpandableSearch(_ref) {
+const ExpandableSearch = /*#__PURE__*/React__default.forwardRef(function ExpandableSearch(_ref, forwardedRef) {
   let {
     onBlur,
     onChange,
@@ -61,14 +62,14 @@ function ExpandableSearch(_ref) {
   return /*#__PURE__*/React__default.createElement(Search, _extends({}, props, {
     defaultValue: defaultValue,
     isExpanded: expanded,
-    ref: searchRef,
+    ref: mergeRefs(searchRef, forwardedRef),
     className: classes,
     onBlur: composeEventHandlers([onBlur, handleBlur]),
     onChange: composeEventHandlers([onChange, handleChange]),
     onExpand: composeEventHandlers([onExpand, handleExpand]),
     onKeyDown: composeEventHandlers([onKeyDown, handleKeyDown])
   }));
-}
+});
 ExpandableSearch.propTypes = Search.propTypes;
 ExpandableSearch.displayName = 'ExpandableSearch';
 

package/es/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useRef, useState } from 'react';
+import React__default, { useContext, useRef, useState, useMemo } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -116,17 +116,32 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onChange,
     selectedItems: selected
   });
+
+  // Filter out items with an object having undefined values
+  const filteredItems = useMemo(() => {
+    return items.filter(item => {
+      if (typeof item === 'object' && item !== null) {
+        for (const key in item) {
+          if (Object.hasOwn(item, key) && item[key] === undefined) {
+            return false; // Return false if any property has an undefined value
+          }
+        }
+      }
+
+      return true; // Return true if item is not an object with undefined values
+    });
+  }, [items]);
   const selectProps = {
     ...downshiftProps,
     stateReducer,
     isOpen,
-    itemToString: items => {
-      return Array.isArray(items) && items.map(function (item) {
+    itemToString: filteredItems => {
+      return Array.isArray(filteredItems) && filteredItems.map(function (item) {
         return itemToString(item);
       }).join(', ') || '';
     },
     selectedItem: controlledSelectedItems,
-    items,
+    items: filteredItems,
     isItemDisabled(item, _index) {
       return item.disabled;
     }
@@ -342,7 +357,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       size: 'mini'
     });
   }
-  const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item.text);
+  const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -393,7 +408,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     translateWithId: translateWithId
   })), normalizedSlug), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  sortItems(items, sortOptions).map((item, index) => {
+  sortItems(filteredItems, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const itemProps = getItemProps({
       item,

package/es/components/NumberInput/NumberInput.js

@@ -71,6 +71,9 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     if (defaultValue !== undefined) {
       return defaultValue;
     }
+    if (allowEmpty) {
+      return '';
+    }
     return 0;
   });
   const [prevControlledValue, setPrevControlledValue] = useState(controlledValue);
@@ -130,7 +133,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
       return;
     }
     const state = {
-      value: Number(event.target.value),
+      value: allowEmpty && event.target.value === '' ? '' : Number(event.target.value),
       direction: value < event.target.value ? 'up' : 'down'
     };
     setValue(state.value);
@@ -157,7 +160,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     if (inputRef.current) {
       direction === 'up' ? inputRef.current.stepUp() : inputRef.current.stepDown();
       const state = {
-        value: Number(inputRef.current.value),
+        value: allowEmpty && inputRef.current.value === '' ? '' : Number(inputRef.current.value),
         direction: direction
       };
       setValue(state.value);

package/es/components/RadioButton/RadioButton.d.ts

@@ -50,7 +50,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide an optional `onChange` hook that is called each time the value of
      * the underlying `<input>` changes
      */
-    onChange?: (value: string | number, name: string | undefined, event: any) => void;
+    onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide a handler that is invoked when a user clicks on the control
      */

package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -54,7 +54,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Provide an optional `onChange` hook that is called whenever the value of
      * the group changes
      */
-    onChange?: (selection: unknown, name: string, evt: unknown) => void;
+    onChange?: (selection: React.ReactNode, name: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide where radio buttons should be placed
      */

package/es/components/Slider/Slider.js

@@ -427,6 +427,10 @@ class Slider extends PureComponent {
       }
     });
     _defineProperty(this, "processNewInputValue", input => {
+      this.setState({
+        correctedValue: null,
+        correctedPosition: null
+      });
       const targetValue = Number.parseFloat(input.value);
       const validity = !isNaN(targetValue);
 
@@ -978,8 +982,8 @@ class Slider extends PureComponent {
       correctedPosition,
       isRtl
     } = this.state;
-    const showWarning = !readOnly && warn && isValid || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER;
-    const showWarningUpper = !readOnly && warn && (twoHandles ? isValidUpper : isValid) || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER);
+    const showWarning = !readOnly && warn || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER && isValid;
+    const showWarningUpper = !readOnly && warn || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
     return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => {
       const labelId = `${id}-label`;
       const labelClasses = cx(`${prefix}--label`, {

package/es/components/TextInput/PasswordInput.js

@@ -14,6 +14,8 @@ import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.
 import { textInputProps } from './util.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
@@ -38,7 +40,7 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
     size = 'md',
     showPasswordLabel = 'Show password',
     tooltipPosition = 'bottom',
-    tooltipAlignment = 'center',
+    tooltipAlignment = 'end',
     type = 'password',
     warn = false,
     warnText,
@@ -127,11 +129,25 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
   }) : /*#__PURE__*/React__default.createElement(View, {
     className: `${prefix}--icon-visibility-on`
   });
-  const passwordVisibilityToggleClasses = cx(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--btn--icon-only`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
-    [`${prefix}--btn--disabled`]: disabled,
+  const passwordVisibilityToggleClasses = cx(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
+  let align = undefined;
+  if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
+    if (tooltipAlignment === 'center') {
+      align = tooltipPosition;
+    }
+    if (tooltipAlignment === 'end') {
+      align = `${tooltipPosition}-right`;
+    }
+    if (tooltipAlignment === 'start') {
+      align = `${tooltipPosition}-left`;
+    }
+  }
+  if (tooltipPosition === 'right' || tooltipPosition === 'left') {
+    align = tooltipPosition;
+  }
   const input = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", _extends({}, textInputProps({
     sharedTextInputProps,
     invalid: normalizedProps.invalid,
@@ -145,14 +161,16 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
     "data-toggle-password-visibility": inputType === 'password'
   })), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--text-input__divider`
-  }), /*#__PURE__*/React__default.createElement("button", {
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+    align: align,
+    className: `${prefix}--toggle-password-tooltip`,
+    label: passwordIsVisible ? hidePasswordLabel : showPasswordLabel
+  }, /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
     disabled: disabled,
     onClick: handleTogglePasswordVisibility
-  }, !disabled && /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--assistive-text`
-  }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
+  }, passwordVisibilityIcon)));
   useEffect(() => {
     setInputType(type);
   }, [type]);

package/es/components/Tile/Tile.d.ts

@@ -88,7 +88,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The empty handler of the `<input>`.
      */
-    onChange?(event: ChangeEvent<HTMLDivElement>): void;
+    onChange?(event: ChangeEvent<HTMLDivElement>, selected?: boolean, id?: string): void;
     /**
      * Specify the function to run when the SelectableTile is clicked
      */

package/es/components/Tile/Tile.js

@@ -244,7 +244,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     }
     setIsSelected(!isSelected);
     clickHandler(evt);
-    onChange(evt);
+    onChange(evt, isSelected, id);
   }
 
   // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
@@ -253,13 +253,13 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     if (matches(evt, [Enter, Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
-      onChange(evt);
+      onChange(evt, isSelected, id);
     }
     keyDownHandler(evt);
   }
   function handleChange(event) {
     setIsSelected(event.target.checked);
-    onChange(event);
+    onChange(event, isSelected, id);
   }
   if (selected !== prevSelected) {
     setIsSelected(selected);

package/es/components/UIShell/HeaderMenu.d.ts

@@ -214,6 +214,6 @@ declare class HeaderMenu extends React.Component<HeaderMenuProps, HeaderMenuStat
      */
     _renderMenuItem: (item: React.ReactNode, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }
-declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<HeaderMenuProps & React.RefAttributes<unknown>>;
 export { HeaderMenu };
 export default HeaderMenuForwardRef;

package/es/components/UIShell/HeaderMenu.js

@@ -259,9 +259,7 @@ _defineProperty(HeaderMenu, "propTypes", {
 });
 _defineProperty(HeaderMenu, "contextType", PrefixContext);
 const HeaderMenuForwardRef = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(HeaderMenu, _extends({
-    menuLinkName: "link"
-  }, props, {
+  return /*#__PURE__*/React__default.createElement(HeaderMenu, _extends({}, props, {
     focusRef: ref
   }));
 });

package/lib/components/Button/Button.js

@@ -58,9 +58,14 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
   };
   const iconOnlyImage = !ButtonImageElement ? null : /*#__PURE__*/React__default["default"].createElement(ButtonImageElement, null);
   if (!isIconOnlyButton(hasIconOnly)) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {
+      tooltipAlignment,
+      ...propsWithoutTooltipAlignment
+    } = props;
     return /*#__PURE__*/React__default["default"].createElement(ButtonBase["default"], _rollupPluginBabelHelpers["extends"]({
       ref: ref
-    }, props));
+    }, propsWithoutTooltipAlignment));
   } else {
     let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {

package/lib/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -6,9 +6,5 @@
  */
 import React from 'react';
 import { type SearchProps } from '../Search';
-declare function ExpandableSearch({ onBlur, onChange, onExpand, onKeyDown, defaultValue, isExpanded, ...props }: SearchProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ExpandableSearch {
-    var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
-    var displayName: string;
-}
+declare const ExpandableSearch: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
 export default ExpandableSearch;

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -16,6 +16,7 @@ var Search = require('../Search/Search.js');
 require('../Search/Search.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -24,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function ExpandableSearch(_ref) {
+const ExpandableSearch = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableSearch(_ref, forwardedRef) {
   let {
     onBlur,
     onChange,
@@ -70,14 +71,14 @@ function ExpandableSearch(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(Search["default"], _rollupPluginBabelHelpers["extends"]({}, props, {
     defaultValue: defaultValue,
     isExpanded: expanded,
-    ref: searchRef,
+    ref: mergeRefs["default"](searchRef, forwardedRef),
     className: classes,
     onBlur: events.composeEventHandlers([onBlur, handleBlur]),
     onChange: events.composeEventHandlers([onChange, handleChange]),
     onExpand: events.composeEventHandlers([onExpand, handleExpand]),
     onKeyDown: events.composeEventHandlers([onKeyDown, handleKeyDown])
   }));
-}
+});
 ExpandableSearch.propTypes = Search["default"].propTypes;
 ExpandableSearch.displayName = 'ExpandableSearch';
 

package/lib/components/MultiSelect/MultiSelect.js

@@ -127,17 +127,32 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     onChange,
     selectedItems: selected
   });
+
+  // Filter out items with an object having undefined values
+  const filteredItems = React.useMemo(() => {
+    return items.filter(item => {
+      if (typeof item === 'object' && item !== null) {
+        for (const key in item) {
+          if (Object.hasOwn(item, key) && item[key] === undefined) {
+            return false; // Return false if any property has an undefined value
+          }
+        }
+      }
+
+      return true; // Return true if item is not an object with undefined values
+    });
+  }, [items]);
   const selectProps = {
     ...downshiftProps,
     stateReducer,
     isOpen,
-    itemToString: items => {
-      return Array.isArray(items) && items.map(function (item) {
+    itemToString: filteredItems => {
+      return Array.isArray(filteredItems) && filteredItems.map(function (item) {
         return itemToString(item);
       }).join(', ') || '';
     },
     selectedItem: controlledSelectedItems,
-    items,
+    items: filteredItems,
     isItemDisabled(item, _index) {
       return item.disabled;
     }
@@ -353,7 +368,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
       size: 'mini'
     });
   }
-  const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item.text);
+  const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -404,7 +419,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     translateWithId: translateWithId
   })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps(), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  sortItems(items, sortOptions).map((item, index$1) => {
+  sortItems(filteredItems, sortOptions).map((item, index$1) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const itemProps = getItemProps({
       item,

package/lib/components/NumberInput/NumberInput.js

@@ -81,6 +81,9 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     if (defaultValue !== undefined) {
       return defaultValue;
     }
+    if (allowEmpty) {
+      return '';
+    }
     return 0;
   });
   const [prevControlledValue, setPrevControlledValue] = React.useState(controlledValue);
@@ -140,7 +143,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
       return;
     }
     const state = {
-      value: Number(event.target.value),
+      value: allowEmpty && event.target.value === '' ? '' : Number(event.target.value),
       direction: value < event.target.value ? 'up' : 'down'
     };
     setValue(state.value);
@@ -167,7 +170,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     if (inputRef.current) {
       direction === 'up' ? inputRef.current.stepUp() : inputRef.current.stepDown();
       const state = {
-        value: Number(inputRef.current.value),
+        value: allowEmpty && inputRef.current.value === '' ? '' : Number(inputRef.current.value),
         direction: direction
       };
       setValue(state.value);

package/lib/components/RadioButton/RadioButton.d.ts

@@ -50,7 +50,7 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide an optional `onChange` hook that is called each time the value of
      * the underlying `<input>` changes
      */
-    onChange?: (value: string | number, name: string | undefined, event: any) => void;
+    onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide a handler that is invoked when a user clicks on the control
      */

package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -54,7 +54,7 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Provide an optional `onChange` hook that is called whenever the value of
      * the group changes
      */
-    onChange?: (selection: unknown, name: string, evt: unknown) => void;
+    onChange?: (selection: React.ReactNode, name: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Provide where radio buttons should be placed
      */

package/lib/components/Slider/Slider.js

@@ -438,6 +438,10 @@ class Slider extends React.PureComponent {
       }
     });
     _rollupPluginBabelHelpers.defineProperty(this, "processNewInputValue", input => {
+      this.setState({
+        correctedValue: null,
+        correctedPosition: null
+      });
       const targetValue = Number.parseFloat(input.value);
       const validity = !isNaN(targetValue);
 
@@ -989,8 +993,8 @@ class Slider extends React.PureComponent {
       correctedPosition,
       isRtl
     } = this.state;
-    const showWarning = !readOnly && warn && isValid || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER;
-    const showWarningUpper = !readOnly && warn && (twoHandles ? isValidUpper : isValid) || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER);
+    const showWarning = !readOnly && warn || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER && isValid;
+    const showWarningUpper = !readOnly && warn || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
     return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => {
       const labelId = `${id}-label`;
       const labelClasses = cx__default["default"](`${prefix}--label`, {

package/lib/components/TextInput/PasswordInput.js

@@ -18,6 +18,8 @@ var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js
 var util = require('./util.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+require('../Tooltip/DefinitionTooltip.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
@@ -48,7 +50,7 @@ const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function
     size = 'md',
     showPasswordLabel = 'Show password',
     tooltipPosition = 'bottom',
-    tooltipAlignment = 'center',
+    tooltipAlignment = 'end',
     type = 'password',
     warn = false,
     warnText,
@@ -137,11 +139,25 @@ const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function
   }) : /*#__PURE__*/React__default["default"].createElement(iconsReact.View, {
     className: `${prefix}--icon-visibility-on`
   });
-  const passwordVisibilityToggleClasses = cx__default["default"](`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--btn--icon-only`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
-    [`${prefix}--btn--disabled`]: disabled,
+  const passwordVisibilityToggleClasses = cx__default["default"](`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
+  let align = undefined;
+  if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
+    if (tooltipAlignment === 'center') {
+      align = tooltipPosition;
+    }
+    if (tooltipAlignment === 'end') {
+      align = `${tooltipPosition}-right`;
+    }
+    if (tooltipAlignment === 'start') {
+      align = `${tooltipPosition}-left`;
+    }
+  }
+  if (tooltipPosition === 'right' || tooltipPosition === 'left') {
+    align = tooltipPosition;
+  }
   const input = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, util.textInputProps({
     sharedTextInputProps,
     invalid: normalizedProps.invalid,
@@ -155,14 +171,16 @@ const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function
     "data-toggle-password-visibility": inputType === 'password'
   })), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: `${prefix}--text-input__divider`
-  }), /*#__PURE__*/React__default["default"].createElement("button", {
+  }), /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+    align: align,
+    className: `${prefix}--toggle-password-tooltip`,
+    label: passwordIsVisible ? hidePasswordLabel : showPasswordLabel
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
     disabled: disabled,
     onClick: handleTogglePasswordVisibility
-  }, !disabled && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--assistive-text`
-  }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
+  }, passwordVisibilityIcon)));
   React.useEffect(() => {
     setInputType(type);
   }, [type]);

package/lib/components/Tile/Tile.d.ts

@@ -88,7 +88,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The empty handler of the `<input>`.
      */
-    onChange?(event: ChangeEvent<HTMLDivElement>): void;
+    onChange?(event: ChangeEvent<HTMLDivElement>, selected?: boolean, id?: string): void;
     /**
      * Specify the function to run when the SelectableTile is clicked
      */

package/lib/components/Tile/Tile.js

@@ -254,7 +254,7 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     }
     setIsSelected(!isSelected);
     clickHandler(evt);
-    onChange(evt);
+    onChange(evt, isSelected, id);
   }
 
   // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
@@ -263,13 +263,13 @@ const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     if (match.matches(evt, [keys.Enter, keys.Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
-      onChange(evt);
+      onChange(evt, isSelected, id);
     }
     keyDownHandler(evt);
   }
   function handleChange(event) {
     setIsSelected(event.target.checked);
-    onChange(event);
+    onChange(event, isSelected, id);
   }
   if (selected !== prevSelected) {
     setIsSelected(selected);

package/lib/components/UIShell/HeaderMenu.d.ts

@@ -214,6 +214,6 @@ declare class HeaderMenu extends React.Component<HeaderMenuProps, HeaderMenuStat
      */
     _renderMenuItem: (item: React.ReactNode, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }
-declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<HeaderMenuProps & React.RefAttributes<unknown>>;
 export { HeaderMenu };
 export default HeaderMenuForwardRef;

package/lib/components/UIShell/HeaderMenu.js

@@ -269,9 +269,7 @@ _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", {
 });
 _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "contextType", usePrefix.PrefixContext);
 const HeaderMenuForwardRef = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default["default"].createElement(HeaderMenu, _rollupPluginBabelHelpers["extends"]({
-    menuLinkName: "link"
-  }, props, {
+  return /*#__PURE__*/React__default["default"].createElement(HeaderMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
     focusRef: ref
   }));
 });