@carbon/react 1.56.0-rc.1 → 1.57.0-rc.0

package/lib/components/OverflowMenu/OverflowMenu.d.ts

@@ -0,0 +1,300 @@
+/**
+ * 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 React from 'react';
+/**
+ * @param {Element} menuBody The menu body with the menu arrow.
+ * @param {string} direction The floating menu direction.
+ * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
+ * @private
+ */
+export declare const getMenuOffset: (menuBody: any, direction: any, trigger: any, flip: any) => {
+    left: number;
+    top: number;
+} | undefined;
+interface Offset {
+    top: number;
+    left: number;
+}
+interface OverflowMenuProps {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     */
+    ['aria-label']: string;
+    /**
+     * Deprecated, please use `aria-label` instead.
+     * Specify a label to be read by screen readers on the container note.
+     * @deprecated
+     * */
+    ariaLabel: string;
+    /**
+     * The child nodes.
+     * */
+    children: React.ReactNode;
+    /**
+     *  The CSS class names.
+     *  */
+    className?: string;
+    /**
+     * The menu direction.
+     */
+    direction?: string;
+    /**
+     * `true` if the menu alignment should be flipped.
+     */
+    flipped?: boolean;
+    /**
+     * Enable or disable focus trap behavior
+     */
+    focusTrap?: boolean;
+    /**
+     * The CSS class for the icon.
+     */
+    iconClass?: string;
+    /**
+     * The element ID.
+     */
+    id?: string;
+    /**
+     * The icon description.
+     */
+    iconDescription?: string;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make OverflowMenu background color same as container background color.
+     */
+    light?: boolean;
+    /**
+     * The adjustment in position applied to the floating menu.
+     */
+    menuOffset?: Offset | (() => void);
+    /**
+     * The adjustment in position applied to the floating menu.
+     */
+    menuOffsetFlip?: Offset | (() => void);
+    /**
+     * The class to apply to the menu options
+     */
+    menuOptionsClass?: string;
+    /**
+     * The event handler for the `click` event.
+     */
+    onClick?: (evt?: any) => void;
+    /**
+     * Function called when menu is closed
+     */
+    onClose?: () => void;
+    /**
+     * Function called when menu is opened
+     */
+    onOpen?: () => void;
+    /**
+     * `true` if the menu should be open.
+     */
+    open?: boolean;
+    /**
+     * Function called to override icon rendering.
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify a CSS selector that matches the DOM element that should
+     * be focused when the OverflowMenu opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The ref to the HTML element that should receive focus when the OverflowMenu opens
+     */
+    innerRef?: React.Ref<any>;
+}
+interface OverflowMenuState {
+    open: boolean;
+    prevOpen?: boolean;
+    hasMountedTrigger: boolean;
+    click: boolean;
+}
+interface ReleaseHandle {
+    release: () => null;
+}
+declare class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMenuState> {
+    state: OverflowMenuState;
+    instanceId: number;
+    static propTypes: {
+        /**
+         * Specify a label to be read by screen readers on the container node
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Specify a label to be read by screen readers on the container note.
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * The child nodes.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The CSS class names.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The menu direction.
+         */
+        direction: PropTypes.Requireable<string>;
+        /**
+         * `true` if the menu alignment should be flipped.
+         */
+        flipped: PropTypes.Requireable<boolean>;
+        /**
+         * Enable or disable focus trap behavior
+         */
+        focusTrap: PropTypes.Requireable<boolean>;
+        /**
+         * The CSS class for the icon.
+         */
+        iconClass: PropTypes.Requireable<string>;
+        /**
+         * The icon description.
+         */
+        iconDescription: PropTypes.Requireable<string>;
+        /**
+         * The element ID.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * `true` to use the light version. For use on $ui-01 backgrounds only.
+         * Don't use this to make OverflowMenu background color same as container background color.
+         */
+        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * The adjustment in position applied to the floating menu.
+         */
+        menuOffset: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            top: PropTypes.Requireable<number>;
+            left: PropTypes.Requireable<number>;
+        }> | null | undefined>>;
+        /**
+         * The adjustment in position applied to the floating menu.
+         */
+        menuOffsetFlip: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            top: PropTypes.Requireable<number>;
+            left: PropTypes.Requireable<number>;
+        }> | null | undefined>>;
+        /**
+         * The class to apply to the menu options
+         */
+        menuOptionsClass: PropTypes.Requireable<string>;
+        /**
+         * The event handler for the `click` event.
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Function called when menu is closed
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The event handler for the `focus` event.
+         */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The event handler for the `keydown` event.
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Function called when menu is opened
+         */
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `true` if the menu should be open.
+         */
+        open: PropTypes.Requireable<boolean>;
+        /**
+         * Function called to override icon rendering.
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify a CSS selector that matches the DOM element that should
+         * be focused when the OverflowMenu opens
+         */
+        selectorPrimaryFocus: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+         */
+        size: PropTypes.Requireable<string>;
+    };
+    static contextType: React.Context<string>;
+    /**
+     * The handle of `onfocusin` or `focus` event handler.
+     * @private
+     */
+    _hFocusIn: ReleaseHandle | null;
+    /**
+     * The timeout handle for handling `blur` event.
+     * @private
+     */
+    _hBlurTimeout: any;
+    /**
+     * The element ref of the tooltip's trigger button.
+     * @type {React.RefObject<Element>}
+     * @private
+     */
+    _triggerRef: React.RefObject<unknown>;
+    componentDidUpdate(_: any, prevState: any): void;
+    componentDidMount(): void;
+    static getDerivedStateFromProps({ open }: {
+        open: any;
+    }, state: any): {
+        open: any;
+        prevOpen: any;
+    } | null;
+    componentWillUnmount(): void;
+    handleClick: (evt: any) => void;
+    closeMenuAndFocus: () => void;
+    closeMenuOnEscape: () => void;
+    handleKeyPress: (evt: any) => void;
+    handleClickOutside: (evt: any) => void;
+    closeMenu: (onCloseMenu?: any) => void;
+    focusMenuEl: () => void;
+    /**
+     * Focuses the next enabled overflow menu item given the currently focused
+     * item index and direction to move
+     * @param {object} params
+     * @param {number} params.currentIndex - the index of the currently focused
+     * overflow menu item in the list of overflow menu items
+     * @param {number} params.direction - number denoting the direction to move
+     * focus (1 for forwards, -1 for backwards)
+     */
+    handleOverflowMenuItemFocus: ({ currentIndex, direction }: {
+        currentIndex: any;
+        direction: any;
+    }) => void;
+    /**
+     * Handles the floating menu being unmounted or non-floating menu being
+     * mounted or unmounted.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
+    _menuBody: HTMLElement | null;
+    _bindMenuBody: (menuBody: HTMLElement | null) => void;
+    /**
+     * Handles the floating menu being placed.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
+    _handlePlace: (menuBody: any) => void;
+    /**
+     * @returns {Element} The DOM element where the floating menu is placed in.
+     */
+    _getTarget: () => Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export { OverflowMenu };
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default _default;

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -104,10 +104,16 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       }
   }
 };
-class OverflowMenu extends React.Component {
+class OverflowMenu extends React__default["default"].Component {
   constructor() {
     super(...arguments);
-    _rollupPluginBabelHelpers.defineProperty(this, "state", {});
+    _rollupPluginBabelHelpers.defineProperty(this, "state", {
+      open: false,
+      // Set a default value for 'open'
+      hasMountedTrigger: false,
+      // Set a default value for 'hasMountedTrigger'
+      click: false // Set a default value for 'click'
+    });
     _rollupPluginBabelHelpers.defineProperty(this, "instanceId", getInstanceId());
     /**
      * The handle of `onfocusin` or `focus` event handler.
@@ -141,8 +147,8 @@ class OverflowMenu extends React.Component {
       }
     });
     _rollupPluginBabelHelpers.defineProperty(this, "closeMenuAndFocus", () => {
-      let wasClicked = this.state.click;
-      let wasOpen = this.state.open;
+      const wasClicked = this.state.click;
+      const wasOpen = this.state.open;
       this.closeMenu(() => {
         if (wasOpen && !wasClicked) {
           this.focusMenuEl();
@@ -150,7 +156,7 @@ class OverflowMenu extends React.Component {
       });
     });
     _rollupPluginBabelHelpers.defineProperty(this, "closeMenuOnEscape", () => {
-      let wasOpen = this.state.open;
+      const wasOpen = this.state.open;
       this.closeMenu(() => {
         if (wasOpen) {
           this.focusMenuEl();
@@ -212,7 +218,7 @@ class OverflowMenu extends React.Component {
         direction
       } = _ref;
       const enabledIndices = React__default["default"].Children.toArray(this.props.children).reduce((acc, curr, i) => {
-        if (!curr.props.disabled) {
+        if ( /*#__PURE__*/React__default["default"].isValidElement(curr) && !curr.props.disabled) {
           acc.push(i);
         }
         return acc;
@@ -237,6 +243,7 @@ class OverflowMenu extends React.Component {
      * @param {Element} menuBody The DOM element of the menu body.
      * @private
      */
+    _rollupPluginBabelHelpers.defineProperty(this, "_menuBody", null);
     _rollupPluginBabelHelpers.defineProperty(this, "_bindMenuBody", menuBody => {
       if (!menuBody) {
         this._menuBody = menuBody;
@@ -279,7 +286,7 @@ class OverflowMenu extends React.Component {
       const {
         current: triggerEl
       } = this._triggerRef;
-      return triggerEl && triggerEl.closest('[data-floating-menu-container]') || document.body;
+      return triggerEl instanceof Element && triggerEl.closest('[data-floating-menu-container]') || document.body;
     });
   }
   componentDidUpdate(_, prevState) {
@@ -360,18 +367,19 @@ class OverflowMenu extends React.Component {
       [`${prefix}--overflow-menu-options--${size}`]: size
     });
     const overflowMenuIconClasses = cx__default["default"](`${prefix}--overflow-menu__icon`, iconClass);
-    const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
-      closeMenu: child?.props?.closeMenu || this.closeMenuAndFocus,
+    const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].isValidElement(child) ? /*#__PURE__*/React__default["default"].cloneElement(child, {
+      // @ts-expect-error: PropTypes are not expressive enough to cover this case
+      closeMenu: child.props.closeMenu || this.closeMenuAndFocus,
       handleOverflowMenuItemFocus: this.handleOverflowMenuItemFocus,
       ref: e => {
         this[`overflowMenuItem${index}`] = e;
       },
       index
-    }));
+    }) : null);
     const menuBodyId = `overflow-menu-${this.instanceId}__menu-body`;
     const menuBody = /*#__PURE__*/React__default["default"].createElement("ul", {
       className: overflowMenuOptionsClasses,
-      tabIndex: "-1",
+      tabIndex: -1,
       role: "menu",
       "aria-label": ariaLabel || deprecatedAriaLabel,
       onKeyDown: this.handleKeyPress,
@@ -398,12 +406,12 @@ class OverflowMenu extends React.Component {
       onClickOutside: this.handleClickOutside
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: `${prefix}--overflow-menu__wrapper`,
-      "aria-owns": open ? menuBodyId : null
+      "aria-owns": open ? menuBodyId : undefined
     }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, other, {
       type: "button",
       "aria-haspopup": true,
       "aria-expanded": open,
-      "aria-controls": open ? menuBodyId : null,
+      "aria-controls": open ? menuBodyId : undefined,
       className: overflowMenuClasses,
       onClick: this.handleClick,
       id: id,

package/lib/components/OverflowMenu/next/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2020, 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 React, { type ComponentType, type FunctionComponent } from 'react';
+interface OverflowMenuProps {
+    /**
+     * A collection of MenuItems to be rendered within this OverflowMenu.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names for the trigger button.
+     */
+    className?: string;
+    /**
+     * A label describing the options available. Is used in the trigger tooltip and as the menu's accessible label.
+     */
+    label?: string;
+    /**
+     * Experimental property. Specify how the menu should align with the button element
+     */
+    menuAlignment?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    /**
+     * Optionally provide a custom icon to be rendered on the trigger button.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * Specify the size of the menu, from a list of available sizes.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify how the trigger tooltip should be aligned.
+     */
+    tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+}
+declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
+export { OverflowMenu };

package/lib/components/OverflowMenu/next/index.js

@@ -62,10 +62,10 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
   }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: containerClasses,
-    "aria-owns": open ? id : null,
+    "aria-owns": open ? id : undefined,
     ref: forwardRef
   }), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
-    "aria-controls": open ? id : null,
+    "aria-controls": open ? id : undefined,
     "aria-haspopup": true,
     "aria-expanded": open,
     className: triggerClasses,
@@ -107,8 +107,9 @@ OverflowMenu.propTypes = {
    */
   menuAlignment: PropTypes__default["default"].oneOf(['top-start', 'top-end', 'bottom-start', 'bottom-end']),
   /**
-   * Otionally provide a custom icon to be rendered on the trigger button.
+   * Optionally provide a custom icon to be rendered on the trigger button.
    */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Specify the size of the menu, from a list of available sizes.

package/lib/components/RadioTile/RadioTile.d.ts

@@ -50,6 +50,10 @@ export interface RadioTileProps {
      * Specify the value of the underlying `<input>`.
      */
     value: string | number;
+    /**
+     * `true` to specify if the input is required.
+     */
+    required?: boolean;
 }
 declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioTile;

package/lib/components/RadioTile/RadioTile.js

@@ -43,6 +43,7 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     id,
     onChange = noopFn.noopFn,
     tabIndex = 0,
+    required,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -84,7 +85,8 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     tabIndex: !disabled ? tabIndex : undefined,
     type: "radio",
     value: value,
-    ref: ref
+    ref: ref,
+    required: required
   }), /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({}, rest, {
     htmlFor: inputId,
     className: className
@@ -130,6 +132,10 @@ RadioTile.propTypes = {
    * the underlying `<input>` changes.
    */
   onChange: PropTypes__default["default"].func,
+  /**
+   * `true` to specify if the control is required.
+   */
+  required: PropTypes__default["default"].bool,
   /**
    * Specify the tab index of the underlying `<input>`.
    */

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);
 
@@ -518,7 +522,7 @@ class Slider extends React.PureComponent {
       if (clientX) {
         const leftOffset = this.state.isRtl ? (boundingRect?.right ?? 0) - clientX : clientX - (boundingRect?.left ?? 0);
         return leftOffset / width;
-      } else if (value && range) {
+      } else if (value !== null && value !== undefined && range) {
         // Prevent NaN calculation if the range is 0.
         return range === 0 ? 0 : (value - this.props.min) / range;
       }
@@ -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`, {
@@ -1100,7 +1104,7 @@ class Slider extends React.PureComponent {
         hasTooltip: hideTextInput,
         className: lowerThumbWrapperClasses,
         label: `${value}`,
-        align: twoHandles ? 'top-right' : 'top'
+        align: "top"
       }, lowerThumbWrapperProps), /*#__PURE__*/React__default["default"].createElement("div", {
         className: lowerThumbClasses,
         role: "slider",
@@ -1119,7 +1123,7 @@ class Slider extends React.PureComponent {
         hasTooltip: hideTextInput,
         className: upperThumbWrapperClasses,
         label: `${valueUpper}`,
-        align: "top-left"
+        align: "top"
       }, upperThumbWrapperProps), /*#__PURE__*/React__default["default"].createElement("div", {
         className: upperThumbClasses,
         role: "slider",

package/lib/components/StructuredList/StructuredList.js

@@ -27,7 +27,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _StructuredListCell, _RadioButtonChecked, _RadioButton;
+var _StructuredListCell;
 const GridSelectedRowStateContext = /*#__PURE__*/React__default["default"].createContext(null);
 const GridSelectedRowDispatchContext = /*#__PURE__*/React__default["default"].createContext(null);
 function StructuredListWrapper(props) {
@@ -202,7 +202,11 @@ function StructuredListRow(props) {
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React__default["default"].createElement(GridRowContext.Provider, {
     value: value
-  }, selection && /*#__PURE__*/React__default["default"].createElement(StructuredListCell, null, selectedRow === id ? _RadioButtonChecked || (_RadioButtonChecked = /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButtonChecked, null)) : _RadioButton || (_RadioButton = /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButton, null))), children));
+  }, selection && /*#__PURE__*/React__default["default"].createElement(StructuredListCell, null, selectedRow === id ? /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButtonChecked, {
+    className: `${prefix}--structured-list__icon`
+  }) : /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButton, {
+    className: `${prefix}--structured-list__icon`
+  })), children));
 }
 StructuredListRow.propTypes = {
   /**

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/TileGroup/TileGroup.d.ts

@@ -40,6 +40,10 @@ export interface TileGroupProps extends Omit<ReactAttr<HTMLFieldSetElement>, Exc
      * Specify the value that is currently selected in the group
      */
     valueSelected?: string | number;
+    /**
+     * `true` to specify if input selection in group is required.
+     */
+    required?: boolean;
 }
 declare const TileGroup: {
     (props: any): import("react/jsx-runtime").JSX.Element;
@@ -73,6 +77,10 @@ declare const TileGroup: {
          * the group changes
          */
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `true` to specify if input selection in group is required.
+         */
+        required: PropTypes.Requireable<boolean>;
         /**
          * Specify the value that is currently selected in the group
          */