@carbon/react 1.53.1 → 1.54.0-rc.0

package/es/components/Stack/HStack.js

@@ -0,0 +1,23 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { Stack } from './Stack.js';
+
+const HStack = /*#__PURE__*/React__default.forwardRef(function HStack(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
+    ref: ref,
+    orientation: "horizontal"
+  }), children);
+});
+
+export { HStack };

package/es/components/Stack/Stack.d.ts

@@ -10,7 +10,7 @@ import React from 'react';
  * @type {Array<number>}
  */
 declare const SPACING_STEPS: number[];
-interface StackProps extends React.HTMLAttributes<HTMLElement> {
+export interface StackProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Provide a custom element type to render as the outermost element in
      * the Stack component. By default, this component will render a `div`.

package/es/components/Stack/Stack.js

@@ -6,10 +6,10 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { spacing } from '@carbon/layout';
+import React__default from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import { spacing } from '@carbon/layout';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 /**

package/es/components/Stack/VStack.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 React from 'react';
+import { StackProps } from './Stack';
+declare const VStack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<React.ReactNode>>;
+export { VStack };

package/es/components/Stack/{index.js → VStack.js}

@@ -8,14 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { Stack } from './Stack.js';
-export { Stack } from './Stack.js';
 
-const HStack = /*#__PURE__*/React__default.forwardRef(function HStack(props, ref) {
-  return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
-    ref: ref,
-    orientation: "horizontal"
-  }));
-});
 const VStack = /*#__PURE__*/React__default.forwardRef(function VStack(props, ref) {
   return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
     ref: ref,
@@ -23,4 +16,4 @@ const VStack = /*#__PURE__*/React__default.forwardRef(function VStack(props, ref
   }));
 });
 
-export { HStack, VStack };
+export { VStack };

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

@@ -4,9 +4,6 @@
  * 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 { ReactNode } from 'react';
-import { Stack } from './Stack';
-import { ForwardRefReturn } from '../../types/common';
-declare const HStack: ForwardRefReturn<ReactNode>;
-declare const VStack: ForwardRefReturn<ReactNode>;
-export { HStack, Stack, VStack };
+export { HStack } from './HStack';
+export { VStack } from './VStack';
+export { Stack, type StackProps } from './Stack';

package/es/components/TileGroup/TileGroup.js

@@ -9,7 +9,6 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default, { useState } from 'react';
 import RadioTile from '../RadioTile/RadioTile.js';
-import { warning } from '../../internal/warning.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
@@ -36,28 +35,35 @@ const TileGroup = props => {
     setSelected(valueSelected);
     setPrevValueSelected(valueSelected);
   }
-  const getRadioTiles = () => {
-    const childrenArray = React__default.Children.toArray(children);
-    const radioTiles = childrenArray.map(tileRadio => {
-      const tileRadioProps = tileRadio.props ?? undefined;
-      const {
-        value,
-        ...other
-      } = tileRadioProps;
-      /* istanbul ignore if */
-      if (typeof tileRadioProps.checked !== 'undefined') {
-        process.env.NODE_ENV !== "production" ? warning(false, `Instead of using the checked property on the RadioTile, set
-            the defaultSelected property or valueSelected property on the TileGroup.`) : void 0;
-      }
-      return /*#__PURE__*/React__default.createElement(RadioTile, _extends({}, other, {
-        name: name,
-        key: value,
-        value: value,
-        onChange: handleChange,
-        checked: value === selected
-      }));
-    });
-    return radioTiles;
+  const getRadioTilesWithWrappers = children => {
+    const traverseAndModifyChildren = children => {
+      return React__default.Children.map(children, child => {
+        // If RadioTile found, return it with necessary props
+        if (child.type === RadioTile) {
+          const {
+            value,
+            ...otherProps
+          } = child.props;
+          return /*#__PURE__*/React__default.createElement(RadioTile, _extends({}, otherProps, {
+            name: name,
+            key: value,
+            value: value,
+            onChange: handleChange,
+            checked: value === selected
+          }));
+        } else if (child.props && child.props.children) {
+          // If the child is not RadioTile and has children, recheck the children
+          return /*#__PURE__*/React__default.cloneElement(child, {
+            ...child.props,
+            children: traverseAndModifyChildren(child.props.children)
+          });
+        } else {
+          // If the child is neither a RadioTile nor has children, return it as is
+          return child;
+        }
+      });
+    };
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, traverseAndModifyChildren(children));
   };
   const handleChange = (newSelection, value, evt) => {
     if (newSelection !== selected) {
@@ -75,7 +81,7 @@ const TileGroup = props => {
   return /*#__PURE__*/React__default.createElement("fieldset", {
     className: className ?? `${prefix}--tile-group`,
     disabled: disabled
-  }, renderLegend(legend), /*#__PURE__*/React__default.createElement("div", null, getRadioTiles()));
+  }, renderLegend(legend), /*#__PURE__*/React__default.createElement("div", null, getRadioTilesWithWrappers(children)));
 };
 TileGroup.propTypes = {
   /**

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

@@ -89,24 +89,7 @@ export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-export declare function ToggletipButton<T extends React.ElementType>({ children, className: customClassName, label, as: BaseComponent, ...rest }: ToggleTipButtonProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace ToggletipButton {
-    var propTypes: {
-        /**
-         * Custom children to be rendered as the content of the label
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom class name to be added to the outermost node in the
-         * component
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Provide an accessible label for this button
-         */
-        label: PropTypes.Requireable<string>;
-    };
-}
+export declare const ToggletipButton: React.ForwardRefExoticComponent<Omit<ToggleTipButtonProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
 interface ToggletipContentProps {
     children?: ReactNode;
     className?: string | undefined;

package/es/components/Toggletip/index.js

@@ -150,7 +150,28 @@ Toggletip.propTypes = {
   /**
    * Specify how the toggletip should align with the button
    */
-  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  align: PropTypes.oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.
@@ -178,7 +199,7 @@ Toggletip.propTypes = {
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-function ToggletipButton(_ref3) {
+const ToggletipButton = /*#__PURE__*/React__default.forwardRef(function ToggletipButton(_ref3, ref) {
   let {
     children,
     className: customClassName,
@@ -198,9 +219,10 @@ function ToggletipButton(_ref3) {
   return /*#__PURE__*/React__default.createElement("button", _extends({}, toggletip?.buttonProps, {
     "aria-label": label,
     type: "button",
-    className: className
+    className: className,
+    ref: ref
   }, rest), children);
-}
+});
 ToggletipButton.propTypes = {
   /**
    * Custom children to be rendered as the content of the label
@@ -216,6 +238,7 @@ ToggletipButton.propTypes = {
    */
   label: PropTypes.string
 };
+ToggletipButton.displayName = 'ToggletipButton';
 /**
  * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
  * `children` passed in as a prop inside of `PopoverContent` so that they will

package/es/components/Tooltip/Tooltip.js

@@ -34,7 +34,6 @@ function Tooltip(_ref) {
     closeOnActivation = false,
     ...rest
   } = _ref;
-  const containerRef = useRef(null);
   const tooltipRef = useRef(null);
   const [open, setOpen] = useDelayedState(defaultOpen);
   const [isDragging, setIsDragging] = useState(false);
@@ -130,8 +129,7 @@ function Tooltip(_ref) {
     highContrast: true,
     onKeyDown: onKeyDown,
     onMouseLeave: onMouseLeave,
-    open: open,
-    ref: containerRef
+    open: open
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tooltip-trigger__wrapper`
   }, child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
@@ -141,7 +139,6 @@ function Tooltip(_ref) {
     "aria-hidden": open ? 'false' : 'true',
     className: `${prefix}--tooltip-content`,
     id: id,
-    ref: tooltipRef,
     role: "tooltip"
   }, label || description));
 }
@@ -149,7 +146,28 @@ Tooltip.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  align: PropTypes.oneOf(['top', 'top-left',
+  // deprecated use top-start instead
+  'top-right',
+  // deprecated use top-end instead
+
+  'bottom', 'bottom-left',
+  // deprecated use bottom-start instead
+  'bottom-right',
+  // deprecated use bottom-end instead
+
+  'left', 'left-bottom',
+  // deprecated use left-end instead
+  'left-top',
+  // deprecated use left-start instead
+
+  'right', 'right-bottom',
+  // deprecated use right-end instead
+  'right-top',
+  // deprecated use right-start instead
+
+  // new values to match floating-ui
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
    * Pass in the child to which the tooltip will be applied
    */

package/es/index.d.ts

@@ -74,6 +74,7 @@ export * from './components/SkeletonIcon';
 export * from './components/SkeletonPlaceholder';
 export * from './components/SkeletonText';
 export * from './components/Slider';
+export * from './components/Stack';
 export * from './components/StructuredList';
 export * from './components/Switch';
 export * from './components/Tab';

package/es/index.js

@@ -73,6 +73,7 @@ export { NumberInput } from './components/NumberInput/NumberInput.js';
 export { default as OrderedList } from './components/OrderedList/OrderedList.js';
 export { default as OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as OverflowMenuItem } from './components/OverflowMenuItem/OverflowMenuItem.js';
+export { default as Pagination } from './components/Pagination/Pagination.js';
 export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
 export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButton.js';
@@ -81,6 +82,7 @@ export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
 export { default as RadioButtonSkeleton } from './components/RadioButton/RadioButton.Skeleton.js';
 export { default as RadioButtonGroup } from './components/RadioButtonGroup/RadioButtonGroup.js';
+export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as Search } from './components/Search/Search.js';
 export { default as SearchSkeleton } from './components/Search/Search.Skeleton.js';
 export { default as SecondaryButton } from './components/SecondaryButton/SecondaryButton.js';
@@ -92,6 +94,9 @@ export { default as SkeletonIcon } from './components/SkeletonIcon/SkeletonIcon.
 export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
 export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
 export { default as Slider } from './components/Slider/index.js';
+export { HStack } from './components/Stack/HStack.js';
+export { VStack } from './components/Stack/VStack.js';
+export { Stack } from './components/Stack/Stack.js';
 export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/StructuredList.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { default as Switch } from './components/Switch/Switch.js';
@@ -154,7 +159,6 @@ export { Slug as unstable__Slug, SlugActions as unstable__SlugActions, SlugConte
 export { default as unstable__AiSkeletonPlaceholder } from './components/AiSkeleton/AiSkeletonPlaceholder.js';
 export { default as unstable__AiSkeletonIcon } from './components/AiSkeleton/AiSkeletonIcon.js';
 export { default as unstable__AiSkeletonText } from './components/AiSkeleton/AiSkeletonText.js';
-export { HStack, VStack } from './components/Stack/index.js';
 export { DefinitionTooltip } from './components/Tooltip/DefinitionTooltip.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
 import './components/Text/index.js';
@@ -221,9 +225,6 @@ export { default as TableToolbarSearch } from './components/DataTable/TableToolb
 export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
-export { default as Pagination } from './components/Pagination/Pagination.js';
 export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
-export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as TreeNode } from './components/TreeView/TreeNode.js';
-export { Stack } from './components/Stack/Stack.js';

package/es/internal/FloatingMenu.js

@@ -13,8 +13,11 @@ import window from 'window-or-global';
 import OptimizedResize from './OptimizedResize.js';
 import { selectorTabbable, selectorFocusable } from './keyboard/navigation.js';
 import { warning } from './warning.js';
-import wrapFocus from './wrapFocus.js';
+import wrapFocus, { wrapFocusWithoutSentinels } from './wrapFocus.js';
 import { PrefixContext } from './usePrefix.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+import { match } from './keyboard/match.js';
+import { Tab } from './keyboard/keys.js';
 
 /**
  * The structure for the position of floating menu.
@@ -348,6 +351,19 @@ class FloatingMenu extends React__default.Component {
         });
       }
     });
+    /**
+     * Keydown handler for when focus wrap behavior is enabled
+     * @param {Event} event
+     */
+    _defineProperty(this, "handleKeyDown", event => {
+      if (match(event, Tab) && this._menuBody) {
+        wrapFocusWithoutSentinels({
+          containerNode: this._menuBody,
+          currentActiveNode: event.target,
+          event
+        });
+      }
+    });
   }
   componentWillUnmount() {
     this.hResize.release();
@@ -376,19 +392,24 @@ class FloatingMenu extends React__default.Component {
     const {
       context: prefix
     } = this;
+    const focusTrapWithoutSentinels = FeatureFlags.enabled('enable-experimental-focus-wrap-without-sentinels');
     if (typeof document !== 'undefined') {
       const {
         focusTrap,
         target
       } = this.props;
-      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement("div", {
-        onBlur: focusTrap ? this.handleBlur : null
-      }, /*#__PURE__*/React__default.createElement("span", {
+      return /*#__PURE__*/ReactDOM.createPortal(
+      /*#__PURE__*/
+      //eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      React__default.createElement("div", {
+        onBlur: focusTrap && !focusTrapWithoutSentinels ? this.handleBlur : () => {},
+        onKeyDown: focusTrapWithoutSentinels ? this.handleKeyDown : () => {}
+      }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
         ref: this.startSentinel,
         tabIndex: "0",
         role: "link",
         className: `${prefix}--visually-hidden`
-      }, "Focus sentinel"), this._getChildrenWithProps(), /*#__PURE__*/React__default.createElement("span", {
+      }, "Focus sentinel"), this._getChildrenWithProps(), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
         ref: this.endSentinel,
         tabIndex: "0",
         role: "link",

package/es/internal/wrapFocus.js

@@ -6,7 +6,9 @@
  */
 
 import findLast from 'lodash.findlast';
+import { useEffect } from 'react';
 import { DOCUMENT_POSITION_BROAD_PRECEDING, selectorTabbable, DOCUMENT_POSITION_BROAD_FOLLOWING } from './keyboard/navigation.js';
+import { tabbable } from 'tabbable';
 
 /**
  * @param {Node} node A DOM node.
@@ -60,4 +62,52 @@ function wrapFocus(_ref) {
   }
 }
 
-export { wrapFocus as default, elementOrParentIsFloatingMenu };
+/**
+ * Ensures the focus is kept in the given `containerNode`, implementing "focus-wrap" behavior.
+ * Note: This must be called *before* focus moves using onKeyDown or similar.
+ * @param {object} options The options.
+ * @param {Node|null} options.containerNode
+ * @param {EventTarget} options.currentActiveNode The DOM node that has focus.
+ * @param {KeyboardEvent} options.event The DOM event
+ */
+function wrapFocusWithoutSentinels(_ref2) {
+  let {
+    containerNode,
+    currentActiveNode,
+    event
+  } = _ref2;
+  if (['blur', 'focusout', 'focusin', 'focus'].includes(event.type) && process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      throw new Error(`Error: wrapFocusWithoutSentinels(...) called in unsupported ${event.type} event.\n\nCall wrapFocusWithoutSentinels(...) from onKeyDown instead.`);
+    });
+  }
+
+  // The reason we're using tabbable is because it returns the tabbable
+  // items *in tab order*, whereas using our `selectorTabbable` only
+  // returns in DOM order
+  const tabbables = tabbable(containerNode);
+  const firstTabbable = tabbables[0];
+  const lastTabbable = tabbables[tabbables.length - 1];
+
+  // console.log(`---------------------------------`);
+  // console.log(containerNode);
+  // console.log(tabbables);
+  // console.log(firstTabbable);
+  // console.log(lastTabbable);
+  // console.log(currentActiveNode);
+
+  // The shift key is used to determine if focus is moving forwards or backwards
+  if (currentActiveNode === lastTabbable && !event.shiftKey) {
+    // Cancel the current movement of focus because we're going to place it ourselves
+    event.preventDefault();
+    firstTabbable.focus();
+  }
+  if (currentActiveNode === firstTabbable && event.shiftKey) {
+    // Cancel the current movement of focus because we're going to place it ourselves
+    event.preventDefault();
+    lastTabbable.focus();
+  }
+}
+
+export { wrapFocus as default, elementOrParentIsFloatingMenu, wrapFocusWithoutSentinels };

package/es/tools/createPropAdapter.js

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+
+/**
+ * Create an adapter that converts an object of props with potentially deprecated
+ * prop names to the replacement prop names in a newer version. Useful for guarding
+ * against breaking changes when a prop has been renamed
+ *
+ * @param {Array} spec - an array of options which specify a text or regex
+ * matcher alongside a replacement if there is a match
+ * @returns {Function}
+ */
+function mapPopoverAlignProp(align) {
+  switch (align) {
+    case 'top-left':
+      return 'top-start';
+    case 'top-right':
+      return 'top-end';
+    case 'bottom-left':
+      return 'bottom-start';
+    case 'bottom-right':
+      return 'bottom-end';
+    case 'left-bottom':
+      return 'left-end';
+    case 'left-top':
+      return 'left-start';
+    case 'right-bottom':
+      return 'right-end';
+    case 'right-top':
+      return 'right-start';
+    default:
+      return align;
+  }
+}
+
+export { mapPopoverAlignProp };

package/lib/components/ComboBox/ComboBox.js

@@ -249,7 +249,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const titleClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled
   });
-  const comboBoxHelperId = !helperText ? undefined : `combobox-helper-text-${comboBoxInstanceId}`;
+  const helperTextId = `combobox-helper-text-${comboBoxInstanceId}`;
+  const warnTextId = `combobox-warn-text-${comboBoxInstanceId}`;
+  const invalidTextId = `combobox-invalid-text-${comboBoxInstanceId}`;
   const helperClasses = cx__default["default"](`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
@@ -387,6 +389,11 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         }
       }
     } : {};
+
+    // The input should be described by the appropriate message text id
+    // when both the message is supplied *and* when the component is in
+    // the matching state (invalid, warn, etc).
+    const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: wrapperClasses
     }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
@@ -399,11 +406,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       disabled: disabled,
       invalid: invalid,
       invalidText: invalidText,
+      invalidTextId: invalidTextId,
       isOpen: isOpen,
       light: light,
       size: size,
       warn: warn,
-      warnText: warnText
+      warnText: warnText,
+      warnTextId: warnTextId
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--list-box__field`
     }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
@@ -421,7 +430,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, inputProps, rest, readOnlyEventHandlers, {
       readOnly: readOnly,
       ref: mergeRefs["default"](textInput, ref),
-      "aria-describedby": helperText && !invalid && !warn && !isFluid ? comboBoxHelperId : undefined
+      "aria-describedby": ariaDescribedBy
     })), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
       className: `${prefix}--list-box__invalid-icon`
     }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
@@ -460,7 +469,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       }));
     }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       as: "div",
-      id: comboBoxHelperId,
+      id: helperTextId,
       className: helperClasses
     }, helperText))));
   });

package/lib/components/ComboButton/index.js

@@ -162,7 +162,7 @@ ComboButton.propTypes = {
   /**
    * Specify how the trigger tooltip should be aligned.
    */
-  tooltipAlignment: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  tooltipAlignment: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-start', 'top-right', 'top-end', 'bottom', 'bottom-left', 'bottom-start', 'bottom-right', 'bottom-end', 'left', 'right']),
   /**
    * Optional method that takes in a message id and returns an
    * internationalized string.