@carbon/react 1.59.0-rc.0 → 1.60.0-rc.0

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -9,47 +9,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
 }
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
 }
 
 exports.defineProperty = _defineProperty;

package/lib/components/Button/ButtonBase.d.ts

@@ -6,5 +6,5 @@
  */
 import React from 'react';
 import { ButtonProps } from './Button';
-declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+declare const ButtonBase: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export default ButtonBase;

package/lib/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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, { ReactNode } from 'react';
+export interface CheckboxGroupProps {
+    children?: ReactNode;
+    className?: string;
+    helperText?: ReactNode;
+    invalid?: boolean;
+    invalidText?: ReactNode;
+    legendId?: ReactNode;
+    orientation?: 'horizontal' | 'vertical';
+    legendText: ReactNode;
+    readOnly?: boolean;
+    slug?: ReactNode;
+    warn?: boolean;
+    warnText?: ReactNode;
+}
+export interface CustomType {
+    size: string;
+    kind: string;
+}
+declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export default CheckboxGroup;

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -24,7 +24,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const getInstanceId = setupGetInstanceId["default"]();
-function CheckboxGroup(_ref) {
+const CheckboxGroup = _ref => {
   let {
     children,
     className,
@@ -59,7 +59,7 @@ function CheckboxGroup(_ref) {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if ( /*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini',
       kind: 'default'
@@ -70,7 +70,6 @@ function CheckboxGroup(_ref) {
     "data-invalid": invalid ? true : undefined,
     "aria-labelledby": rest['aria-labelledby'] || legendId,
     "aria-readonly": readOnly,
-    orientation: "vertical",
     "aria-describedby": !invalid && !warn && helper ? helperId : undefined
   }, rest), /*#__PURE__*/React__default["default"].createElement("legend", {
     className: `${prefix}--label`,
@@ -86,7 +85,7 @@ function CheckboxGroup(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--form-requirement`
   }, warnText))), showHelper && helper);
-}
+};
 CheckboxGroup.propTypes = {
   /**
    * Provide the children form elements to be rendered inside of the <fieldset>
@@ -138,5 +137,6 @@ CheckboxGroup.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
+var CheckboxGroup$1 = CheckboxGroup;
 
-exports["default"] = CheckboxGroup;
+exports["default"] = CheckboxGroup$1;

package/lib/components/ComboBox/ComboBox.d.ts

@@ -29,6 +29,12 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * 'aria-label' of the ListBox component.
      */
     ariaLabel?: string;
+    /**
+     * **Experimental**: Will attempt to automatically align the floating
+     * element to avoid collisions with the viewport and being clipped by
+     * ancestor elements.
+     */
+    autoAlign?: boolean;
     /**
      * An optional className to add to the container node
      */

package/lib/components/ComboBox/ComboBox.js

@@ -23,6 +23,7 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var react = require('@floating-ui/react');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
@@ -96,6 +97,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     ['aria-label']: ariaLabel = 'Choose an item',
     ariaLabel: deprecatedAriaLabel,
+    autoAlign = false,
     className: containerClassName,
     direction = 'bottom',
     disabled = false,
@@ -125,6 +127,28 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     slug,
     ...rest
   } = props;
+  const {
+    refs,
+    floatingStyles
+  } = react.useFloating(autoAlign ? {
+    placement: direction,
+    strategy: 'fixed',
+    middleware: [react.flip()],
+    whileElementsMounted: react.autoUpdate
+  } : {});
+  const parentWidth = refs?.reference?.current?.clientWidth;
+  React.useEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+      if (parentWidth && refs.floating.current) {
+        refs.floating.current.style.width = parentWidth + 'px';
+      }
+    }
+  }, [autoAlign, floatingStyles, refs.floating, parentWidth]);
   const prefix = usePrefix.usePrefix();
   const {
     isFluid
@@ -379,6 +403,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     light: light,
     size: size,
     warn: warn,
+    ref: refs.setReference,
     warnText: warnText,
     warnTextId: warnTextId
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -389,9 +414,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     type: "text",
     tabIndex: 0,
     "aria-haspopup": "listbox",
-    "aria-owns": getMenuProps().id,
     title: textInput?.current?.value
   }, getInputProps({
+    'aria-controls': isOpen ? undefined : getMenuProps().id,
     placeholder,
     ref: {
       ...mergeRefs["default"](textInput, ref)
@@ -453,8 +478,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
+  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({}, getMenuProps({
     'aria-label': deprecatedAriaLabel || ariaLabel
+  }), {
+    ref: mergeRefs["default"](getMenuProps().ref, refs.setFloating)
   }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
     const isObject = item !== null && typeof item === 'object';
     const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
@@ -508,6 +535,12 @@ ComboBox.propTypes = {
    * 'aria-label' of the ListBox component.
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+  /**
+   * **Experimental**: Will attempt to automatically align the floating
+   * element to avoid collisions with the viewport and being clipped by
+   * ancestor elements.
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * An optional className to add to the container node
    */

package/lib/components/ComboButton/index.d.ts

@@ -8,7 +8,7 @@ import React from 'react';
 import { IconButton } from '../IconButton';
 import Button from '../Button';
 import { Menu } from '../Menu';
-export type MenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+import { MenuAlignment } from '../MenuButton';
 interface ComboButtonProps {
     /**
      * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`.

package/lib/components/ComposedModal/ModalHeader.js

@@ -62,7 +62,6 @@ const ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function M
     className: closeClass,
     label: iconDescription,
     onClick: handleCloseButtonClick,
-    title: iconDescription,
     "aria-label": iconDescription,
     align: "left"
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {

package/lib/components/DataTable/DataTable.d.ts

@@ -115,6 +115,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
+        'aria-label': string;
         checked: boolean | undefined;
         disabled?: boolean | undefined;
         id: string;
@@ -436,10 +437,12 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         id: string;
         name: string;
         ariaLabel: string;
+        'aria-label': string;
         disabled: boolean | undefined;
         radio: true | null;
     } | {
         ariaLabel: string;
+        'aria-label': string;
         checked: boolean;
         id: string;
         indeterminate: boolean;

package/lib/components/DataTable/DataTable.js

@@ -266,6 +266,8 @@ class DataTable extends React__default["default"].Component {
           id: `${_this.getTablePrefix()}__select-row-${row.id}`,
           name: `select-row`,
           ariaLabel: t(translationKey),
+          // TODO remove in v12
+          'aria-label': t(translationKey),
           disabled: row.disabled,
           radio: _this.props.radio || null
         };
@@ -281,6 +283,8 @@ class DataTable extends React__default["default"].Component {
       return {
         ...rest,
         ariaLabel: t(translationKey),
+        // TODO remove in v12
+        'aria-label': t(translationKey),
         checked,
         id: `${_this.getTablePrefix()}__select-all`,
         indeterminate,
@@ -579,7 +583,6 @@ class DataTable extends React__default["default"].Component {
       ...getDerivedStateFromProps["default"](_props, {}),
       isExpandedAll: false // Start with collapsed state, treat `undefined` as neutral state
     };
-
     this.instanceId = getInstanceId();
   }
 

package/lib/components/DataTable/TableSelectAll.d.ts

@@ -9,8 +9,14 @@ import React from 'react';
 interface TableSelectAllProps {
     /**
      * Specify the aria label for the underlying input control
+     * node
      */
-    ariaLabel: string;
+    ['aria-label']?: string;
+    /**
+     * @deprecated please use `aria-label` instead.
+     * Specify the aria label for the underlying input control
+     */
+    ariaLabel?: string;
     /**
      * Specify whether all items are selected, or not
      */
@@ -41,12 +47,17 @@ interface TableSelectAllProps {
     onSelect: React.MouseEventHandler<HTMLInputElement>;
 }
 declare const TableSelectAll: {
-    ({ ariaLabel, checked, id, indeterminate, name, onSelect, disabled, className, }: TableSelectAllProps): import("react/jsx-runtime").JSX.Element;
+    ({ ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLabel, checked, id, indeterminate, name, onSelect, disabled, className, }: TableSelectAllProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify the aria label for the underlying input control
          */
-        ariaLabel: PropTypes.Validator<string>;
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Specify the aria label for the underlying input control
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Specify whether all items are selected, or not
          */

package/lib/components/DataTable/TableSelectAll.js

@@ -14,6 +14,7 @@ var React = require('react');
 var InlineCheckbox = require('../InlineCheckbox/InlineCheckbox.js');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var deprecate = require('../../prop-types/deprecate.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,7 +24,8 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const TableSelectAll = _ref => {
   let {
-    ariaLabel = 'Select all rows in the table',
+    ariaLabel: deprecatedAriaLabel = 'Select all rows in the table',
+    ['aria-label']: ariaLabel,
     checked,
     id,
     indeterminate,
@@ -38,7 +40,7 @@ const TableSelectAll = _ref => {
     scope: "col",
     className: cx__default["default"](`${prefix}--table-column-checkbox`, className)
   }, /*#__PURE__*/React__default["default"].createElement(InlineCheckbox["default"], {
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabel || deprecatedAriaLabel,
     checked: checked,
     id: id,
     indeterminate: indeterminate,
@@ -51,7 +53,12 @@ TableSelectAll.propTypes = {
   /**
    * Specify the aria label for the underlying input control
    */
-  ariaLabel: PropTypes__default["default"].string.isRequired,
+  ['aria-label']: PropTypes__default["default"].string,
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify the aria label for the underlying input control
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
   /**
    * Specify whether all items are selected, or not
    */

package/lib/components/DataTable/TableSelectRow.d.ts

@@ -8,9 +8,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 export interface TableSelectRowProps {
     /**
-     * Specify the aria label for the underlying input control
+     * Specify a label to be read by screen readers on the containing textbox
+     * node
      */
-    ariaLabel: string;
+    ['aria-label']?: string;
+    /**
+     * @deprecated please use `aria-label` instead.
+     * Specify a label to be read by screen readers on the containing textbox
+     * node
+     */
+    ariaLabel?: string;
     /**
      * Specify whether this row is selected, or not
      */
@@ -45,12 +52,17 @@ export interface TableSelectRowProps {
     radio?: boolean;
 }
 declare const TableSelectRow: {
-    ({ ariaLabel, checked, id, name, onSelect, onChange, disabled, radio, className, }: TableSelectRowProps): import("react/jsx-runtime").JSX.Element;
+    ({ ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLabel, checked, id, name, onSelect, onChange, disabled, radio, className, }: TableSelectRowProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify the aria label for the underlying input control
          */
-        ariaLabel: PropTypes.Validator<string>;
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Specify the aria label for the underlying input control
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
          * Specify whether this row is selected, or not
          */

package/lib/components/DataTable/TableSelectRow.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var InlineCheckbox = require('../InlineCheckbox/InlineCheckbox.js');
 var RadioButton = require('../RadioButton/RadioButton.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var deprecate = require('../../prop-types/deprecate.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,7 +26,8 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const TableSelectRow = _ref => {
   let {
-    ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
+    ['aria-label']: ariaLabel,
     checked,
     id,
     name,
@@ -55,17 +57,22 @@ const TableSelectRow = _ref => {
     className: tableSelectRowClasses,
     "aria-live": "off"
   }, /*#__PURE__*/React__default["default"].createElement(InlineInputComponent, _rollupPluginBabelHelpers["extends"]({}, selectionInputProps, radio && {
-    labelText: ariaLabel,
+    labelText: ariaLabel || deprecatedAriaLabel,
     hideLabel: true
   }, !radio && {
-    ['aria-label']: ariaLabel
+    'aria-label': ariaLabel || deprecatedAriaLabel
   })));
 };
 TableSelectRow.propTypes = {
   /**
    * Specify the aria label for the underlying input control
    */
-  ariaLabel: PropTypes__default["default"].string.isRequired,
+  ['aria-label']: PropTypes__default["default"].string,
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify the aria label for the underlying input control
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
   /**
    * Specify whether this row is selected, or not
    */

package/lib/components/DatePicker/DatePicker.d.ts

@@ -20,7 +20,7 @@ export type CalRef = {
     plugins: [];
     clickOpens: any;
 };
-interface DatePickerProps {
+export interface DatePickerProps {
     /**
      * Flatpickr prop passthrough enables direct date input, and when set to false,
      * we must clear dates manually by resetting the value prop to empty string making it a controlled input.

package/lib/components/DatePicker/DatePicker.js

@@ -717,7 +717,6 @@ DatePicker.propTypes = {
   // Mandarin Traditional
   'zh' // Mandarin
   ])]),
-
   /**
    * The maximum date that a user can pick to.
    */

package/lib/components/DatePicker/index.d.ts

@@ -4,7 +4,7 @@
  * 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 DatePicker from './DatePicker';
+import DatePicker, { type DatePickerProps } from './DatePicker';
 export { default as DatePickerSkeleton, type DatePickerSkeletonProps, } from './DatePicker.Skeleton';
 export default DatePicker;
-export { DatePicker };
+export { DatePicker, type DatePickerProps };

package/lib/components/DatePicker/plugins/rangePlugin.js

@@ -38,7 +38,6 @@ var carbonFlatpickrRangePlugin = (config => {
             _input: inputDates
           } = fp;
           const inputDatesArray = inputDates.value.split(' ');
-          fp.close();
           [inputDatesArray[0], inputDatesArray[2]].forEach((input, i) => {
             if (input) {
               input = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);

package/lib/components/DatePickerInput/DatePickerInput.d.ts

@@ -10,7 +10,7 @@ import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
 export type ReactNodeLike = ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined;
 export type func = (...args: any[]) => any;
-interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, ExcludedAttributes> {
+export interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, ExcludedAttributes> {
     /**
      * The type of the date picker:
      *

package/lib/components/DatePickerInput/index.d.ts

@@ -4,6 +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 DatePickerInput from './DatePickerInput';
+import DatePickerInput, { type DatePickerInputProps } from './DatePickerInput';
 export default DatePickerInput;
-export { DatePickerInput };
+export { DatePickerInput, type DatePickerInputProps };

package/lib/components/FileUploader/FileUploaderItem.js

@@ -55,6 +55,9 @@ function FileUploaderItem(_ref) {
     [`${prefix}--file__selected-file--sm`]: size === 'sm'
   });
   const isInvalid = invalid ? `${prefix}--file-filename-container-wrap-invalid` : `${prefix}--file-filename-container-wrap`;
+  const filterSpaceName = name => {
+    return name?.replace(/\s+/g, '');
+  };
   const isEllipsisActive = element => {
     setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
     return element.offsetWidth < element.scrollWidth;
@@ -78,12 +81,12 @@ function FileUploaderItem(_ref) {
     as: "p",
     title: name,
     className: `${prefix}--file-filename-button`,
-    id: name
+    id: filterSpaceName(name)
   }, name)))) : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "p",
     title: name,
     className: `${prefix}--file-filename`,
-    id: name
+    id: filterSpaceName(name)
   }, name), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--file-container-item`
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -93,7 +96,7 @@ function FileUploaderItem(_ref) {
     iconDescription: iconDescription,
     status: status,
     invalid: invalid,
-    "aria-describedby": `${name}-id-error`,
+    "aria-describedby": invalid && errorSubject ? `${filterSpaceName(name)}-id-error` : undefined,
     onKeyDown: evt => {
       if (match.matches(evt, [keys.Enter, keys.Space])) {
         if (status === 'edit') {
@@ -114,7 +117,7 @@ function FileUploaderItem(_ref) {
   }))), invalid && errorSubject && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--form-requirement`,
     role: "alert",
-    id: `${name}-id-error`
+    id: `${filterSpaceName(name)}-id-error`
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
     className: `${prefix}--form-requirement__title`

package/lib/components/Heading/index.d.ts

@@ -11,6 +11,6 @@ type SectionBaseProps = {
     level?: HeadingLevel;
 };
 type SectionProps<E extends ElementType> = PolymorphicProps<E, SectionBaseProps>;
-export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export declare const Heading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export {};

package/lib/components/Link/Link.d.ts

@@ -49,5 +49,5 @@ export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     visited?: boolean;
 }
 export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps>;
-declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
+declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export default Link;

package/lib/components/ListBox/ListBoxMenu.js

@@ -53,7 +53,6 @@ ListBoxMenu.propTypes = {
     type: PropTypes__default["default"].oneOf([ListBoxMenuItem["default"]])
   }), PropTypes__default["default"].bool // used in Dropdown for closed state
   ]),
-
   /**
    * Specify a custom `id`
    */

package/lib/components/Menu/Menu.d.ts

@@ -62,6 +62,7 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
      * Specify the y position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([y1, y2])
      */
     y?: number | [number, number];
+    legacyAutoalign?: boolean;
 }
 declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
 export { Menu };