@carbon/react 1.48.1 → 1.49.0-rc.0

package/lib/components/Breadcrumb/Breadcrumb.Skeleton.d.ts

@@ -12,7 +12,7 @@ export interface BreadcrumbSkeletonProps extends React.HTMLAttributes<HTMLDivEle
      */
     className?: string;
 }
-declare function BreadcrumbSkeleton({ className, ...rest }: BreadcrumbSkeletonProps): JSX.Element;
+declare function BreadcrumbSkeleton({ className, ...rest }: BreadcrumbSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BreadcrumbSkeleton {
     var propTypes: {
         /**

package/lib/components/Checkbox/Checkbox.Skeleton.d.ts

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 import { HTMLAttributes } from 'react';
 declare const CheckboxSkeleton: {
-    ({ className, ...rest }: HTMLAttributes<HTMLDivElement>): JSX.Element;
+    ({ className, ...rest }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.

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

@@ -13,7 +13,7 @@ interface ClassPrefixProps {
      */
     prefix: string;
 }
-declare function ClassPrefix({ children, prefix, }: PropsWithChildren<ClassPrefixProps>): JSX.Element;
+declare function ClassPrefix({ children, prefix, }: PropsWithChildren<ClassPrefixProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace ClassPrefix {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/components/ComboButton/index.js

@@ -18,6 +18,7 @@ var index = require('../IconButton/index.js');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var Menu = require('../Menu/Menu.js');
+require('../Menu/MenuItem.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');

package/lib/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -99,6 +99,6 @@ export default class ContentSwitcher extends React.Component<ContentSwitcherProp
     } | null;
     handleItemRef: (index: any) => (ref: any) => void;
     handleChildChange: (data: any) => void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

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

@@ -35,7 +35,7 @@ interface TableProps {
     useZebraStyles?: boolean;
 }
 export declare const Table: {
-    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): JSX.Element;
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the Table

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

@@ -26,7 +26,7 @@ declare const TableBatchAction: {
         [x: string]: any;
         renderIcon?: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType | undefined;
         iconDescription?: string | undefined;
-    }): JSX.Element;
+    }): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify if the button is an icon-only button

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

@@ -13,7 +13,7 @@ export interface TableBodyProps extends ReactAttr<HTMLTableSectionElement> {
     'aria-live'?: 'polite' | 'assertive' | 'off';
 }
 declare const TableBody: {
-    ({ children, className, ...rest }: TableBodyProps): JSX.Element;
+    ({ children, className, ...rest }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * `polite` Adjust the notification behavior of screen readers

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

@@ -26,7 +26,7 @@ export interface TableContainerProps extends Omit<ReactAttr<HTMLDivElement>, 'ti
     title?: React.ReactNode;
 }
 declare const TableContainer: {
-    ({ className, children, title, description, stickyHeader, useStaticWidth, ...rest }: TableContainerProps): JSX.Element;
+    ({ className, children, title, description, stickyHeader, useStaticWidth, ...rest }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;

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

@@ -59,7 +59,7 @@ type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'ariaL
 };
 export type TableExpandHeaderProps = TableExpandHeaderPropsWithToggle | TableExpandHeaderPropsWithExpando | TableExpandHeaderPropsBase;
 declare const TableExpandHeader: {
-    ({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: TableExpandHeaderProps): JSX.Element;
+    ({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: TableExpandHeaderProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader

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

@@ -13,7 +13,7 @@ interface TableExpandedRowProps extends ReactAttr<HTMLTableRowElement> {
     colSpan: number;
 }
 declare const TableExpandedRow: {
-    ({ className: customClassName, children, colSpan, ...rest }: TableExpandedRowProps): JSX.Element;
+    ({ className: customClassName, children, colSpan, ...rest }: TableExpandedRowProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Pass in the contents for your TableExpandedRow

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

@@ -17,7 +17,7 @@ export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
     isSelected?: boolean;
 }
 declare const TableRow: {
-    (props: TableRowProps): JSX.Element;
+    (props: TableRowProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to be applied to the container node

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

@@ -41,7 +41,7 @@ interface TableSelectAllProps {
     onSelect: React.MouseEventHandler<HTMLInputElement>;
 }
 declare const TableSelectAll: {
-    ({ ariaLabel, checked, id, indeterminate, name, onSelect, disabled, className, }: TableSelectAllProps): JSX.Element;
+    ({ 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

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

@@ -45,7 +45,7 @@ export interface TableSelectRowProps {
     radio?: boolean;
 }
 declare const TableSelectRow: {
-    ({ ariaLabel, checked, id, name, onSelect, onChange, disabled, radio, className, }: TableSelectRowProps): JSX.Element;
+    ({ 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

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

@@ -16,7 +16,7 @@ export interface TableSlugRowProps {
     slug?: ReactNodeLike;
 }
 declare const TableSlugRow: {
-    ({ className, slug }: TableSlugRowProps): JSX.Element;
+    ({ className, slug }: TableSlugRowProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * The CSS class names of the cell that wraps the underlying input control

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

@@ -18,7 +18,7 @@ export interface TableToolbarMenuProps extends React.HTMLAttributes<HTMLDivEleme
     /**
      * Optional prop to allow overriding the default menu icon
      */
-    renderIcon?: React.ReactNode;
+    renderIcon?: any;
 }
 declare const TableToolbarMenu: React.FC<TableToolbarMenuProps>;
 export default TableToolbarMenu;

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

@@ -86,7 +86,7 @@ export interface TableToolbarSearchProps {
     translateWithId?: (id: string) => string;
 }
 declare const TableToolbarSearch: {
-    ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): JSX.Element;
+    ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**

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

@@ -14,7 +14,7 @@ export interface DatePickerSkeletonProps extends HTMLAttributes<HTMLDivElement>
     hideLabel?: boolean;
 }
 declare const DatePickerSkeleton: {
-    ({ range, id, hideLabel, className, ...rest }: DatePickerSkeletonProps): JSX.Element;
+    ({ range, id, hideLabel, className, ...rest }: DatePickerSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.

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

@@ -7,8 +7,6 @@
 import { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import flatpickr from 'flatpickr';
-import { ReactAttr } from '../../types/common';
-type ExcludedAttributes = 'value' | 'onChange' | 'locale';
 export type DatePickerTypes = 'simple' | 'single' | 'range';
 export type CalRef = {
     inline: boolean;
@@ -22,7 +20,7 @@ export type CalRef = {
     plugins: [];
     clickOpens: any;
 };
-interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+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/ExpandableSearch/ExpandableSearch.d.ts

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { type SearchProps } from '../Search';
-declare function ExpandableSearch({ onBlur, onChange, onExpand, onKeyDown, defaultValue, isExpanded, ...props }: SearchProps): JSX.Element;
+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;

package/lib/components/FileUploader/FileUploader.Skeleton.d.ts

@@ -4,7 +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.
  */
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import { ReactAttr } from '../../types/common';
 export interface FileUploaderSkeletonProps extends ReactAttr<HTMLDivElement> {
@@ -13,7 +12,7 @@ export interface FileUploaderSkeletonProps extends ReactAttr<HTMLDivElement> {
      */
     className?: string;
 }
-declare function FileUploaderSkeleton({ className, ...rest }: FileUploaderSkeletonProps): JSX.Element;
+declare function FileUploaderSkeleton({ className, ...rest }: FileUploaderSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FileUploaderSkeleton {
     var propTypes: {
         /**

package/lib/components/FileUploader/FileUploader.d.ts

@@ -162,5 +162,5 @@ export default class FileUploader extends React.Component<FileUploaderProps, {
         filenameStatus: any;
     }) => void;
     clearFiles: () => void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }

package/lib/components/FileUploader/FileUploaderButton.d.ts

@@ -71,7 +71,7 @@ export interface FileUploaderButtonProps extends Omit<ReactAttr<HTMLButtonElemen
     tabIndex?: number | string;
     innerRef?: React.RefObject<HTMLLabelElement>;
 }
-declare function FileUploaderButton({ accept, buttonKind, className, disabled, disableLabelChanges, id, labelText: ownerLabelText, multiple, onChange, name, size, innerRef, ...other }: FileUploaderButtonProps): JSX.Element;
+declare function FileUploaderButton({ accept, buttonKind, className, disabled, disableLabelChanges, id, labelText: ownerLabelText, multiple, onChange, name, size, innerRef, ...other }: FileUploaderButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FileUploaderButton {
     var propTypes: {
         /**

package/lib/components/FileUploader/FileUploaderDropContainer.d.ts

@@ -65,7 +65,7 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
      */
     tabIndex?: number | string;
 }
-declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: FileUploaderDropContainerProps): JSX.Element;
+declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: FileUploaderDropContainerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FileUploaderDropContainer {
     var propTypes: {
         /**

package/lib/components/FileUploader/FileUploaderItem.d.ts

@@ -53,7 +53,7 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
      */
     uuid?: string;
 }
-declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, ...other }: FileUploaderItemProps): JSX.Element;
+declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, ...other }: FileUploaderItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FileUploaderItem {
     var propTypes: {
         /**

package/lib/components/FileUploader/Filename.d.ts

@@ -35,7 +35,7 @@ export interface FilenameProps extends Omit<ReactAttr & SVGAttr, 'tabIndex' | 't
      */
     tabIndex?: number;
 }
-declare function Filename({ iconDescription, status, invalid, name, tabIndex, ['aria-describedby']: ariaDescribedBy, ...rest }: FilenameProps): JSX.Element | null;
+declare function Filename({ iconDescription, status, invalid, name, tabIndex, ['aria-describedby']: ariaDescribedBy, ...rest }: FilenameProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace Filename {
     var propTypes: {
         /**

package/lib/components/Form/Form.d.ts

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 import { type ComponentProps } from 'react';
 type FormProps = ComponentProps<'form'>;
-declare function Form({ className, children, ...other }: FormProps): JSX.Element;
+declare function Form({ className, children, ...other }: FormProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Form {
     var propTypes: {
         /**

package/lib/components/FormGroup/FormGroup.d.ts

@@ -39,7 +39,7 @@ export interface FormGroupProps extends ReactAttr<HTMLFieldSetElement> {
     messageText?: string;
 }
 declare const FormGroup: {
-    ({ legendId, legendText, invalid, children, className, message, messageText, ...rest }: FormGroupProps): JSX.Element;
+    ({ legendId, legendText, invalid, children, className, message, messageText, ...rest }: FormGroupProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide the children form elements to be rendered inside of the <fieldset>

package/lib/components/FormItem/FormItem.d.ts

@@ -16,7 +16,7 @@ type FormItemProps = {
      */
     className?: string;
 };
-declare function FormItem({ className, children, ...rest }: FormItemProps): JSX.Element;
+declare function FormItem({ className, children, ...rest }: FormItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FormItem {
     var propTypes: {
         /**

package/lib/components/FormLabel/FormLabel.d.ts

@@ -20,7 +20,7 @@ export interface FormLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabel
      */
     id?: string;
 }
-declare function FormLabel({ className: customClassName, children, id, ...rest }: FormLabelProps): JSX.Element;
+declare function FormLabel({ className: customClassName, children, id, ...rest }: FormLabelProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FormLabel {
     var propTypes: {
         /**

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

@@ -4,13 +4,13 @@
  * 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 React, { type ElementType } from 'react';
+import type { PolymorphicProps } from '../../types/common';
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 type SectionBaseProps = {
     level?: HeadingLevel;
 };
-export declare const Section: React.ForwardRefExoticComponent<Pick<SectionBaseProps & Omit<any, "as"> & {
-    as?: React.ElementType<any> | undefined;
-}, string | number | symbol> & React.RefAttributes<unknown>>;
-export declare const Heading: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement>, "key" | keyof React.HTMLAttributes<HTMLHeadingElement>> & React.RefAttributes<HTMLHeadingElement>>;
+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 Heading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export {};

package/lib/components/Icon/Icon.Skeleton.d.ts

@@ -13,7 +13,7 @@ export interface IconSkeletonProps extends ComponentProps<'div'> {
     className?: string;
 }
 declare const IconSkeleton: {
-    ({ className, ...rest }: IconSkeletonProps): JSX.Element;
+    ({ className, ...rest }: IconSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.

package/lib/components/InlineLoading/InlineLoading.d.ts

@@ -36,7 +36,7 @@ export interface InlineLoadingProps extends Omit<React.DetailedHTMLProps<React.H
     successDelay?: number;
 }
 declare const InlineLoading: {
-    ({ className, status, iconDescription, description, onSuccess, successDelay, ...rest }: InlineLoadingProps): JSX.Element;
+    ({ className, status, iconDescription, description, onSuccess, successDelay, ...rest }: InlineLoadingProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify a custom className to be applied to the container node

package/lib/components/ListBox/ListBoxMenu.d.ts

@@ -7,6 +7,7 @@
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id';
 export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, ExcludedAttributes> {
+    children?: any;
     /**
      * Specify a custom `id`
      */

package/lib/components/ListItem/ListItem.d.ts

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 import { type ComponentProps } from 'react';
 type ListItemProps = ComponentProps<'li'>;
-declare function ListItem({ className, children, ...other }: ListItemProps): JSX.Element;
+declare function ListItem({ className, children, ...other }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ListItem {
     var propTypes: {
         /**

package/lib/components/Loading/Loading.d.ts

@@ -4,7 +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.
  */
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import { ReactAttr } from '../../types/common';
 export interface LoadingProps extends ReactAttr<HTMLDivElement> {
@@ -33,7 +32,7 @@ export interface LoadingProps extends ReactAttr<HTMLDivElement> {
      */
     withOverlay: boolean;
 }
-declare function Loading({ active, className: customClassName, withOverlay, small, description, ...rest }: LoadingProps): JSX.Element;
+declare function Loading({ active, className: customClassName, withOverlay, small, description, ...rest }: LoadingProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Loading {
     var propTypes: {
         /**

package/lib/components/Loading/Loading.js

@@ -52,12 +52,12 @@ function Loading(_ref) {
     className: `${prefix}--loading__background`,
     cx: "50%",
     cy: "50%",
-    r: "44"
+    r: "42"
   }) : null, /*#__PURE__*/React__default["default"].createElement("circle", {
     className: `${prefix}--loading__stroke`,
     cx: "50%",
     cy: "50%",
-    r: "44"
+    r: small ? '42' : '44'
   })));
   return withOverlay ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: overlayClassName

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

@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 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';
+interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
+    /**
+     * A collection of MenuItems to be rendered within this Menu.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * A label describing the Menu.
+     */
+    label?: string;
+    /**
+     * The mode of this menu. Defaults to full.
+     * `full` supports nesting and selectable menu items, but no icons.
+     * `basic` supports icons but no nesting or selectable menu items.
+     *
+     * **This prop is not intended for use and will be set by the respective implementation (like useContextMenu, MenuButton, and ComboButton).**
+     */
+    mode?: 'full' | 'basic';
+    /**
+     * Provide an optional function to be called when the Menu should be closed.
+     */
+    onClose?: () => void;
+    /**
+     * Provide an optional function to be called when the Menu is opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Whether the Menu is open or not.
+     */
+    open?: boolean;
+    /**
+     * Specify the size of the Menu.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+     */
+    target?: any;
+    /**
+     * Specify the x position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([x1, x2])
+     */
+    x?: number | (number | null | undefined)[];
+    /**
+     * 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 | null | undefined)[];
+}
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
+export { Menu };

package/lib/components/Menu/Menu.js

@@ -66,7 +66,7 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
       dispatch: childDispatch
     };
   }, [childState, childDispatch]);
-  const menu = React.useRef();
+  const menu = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, menu]);
   const [position, setPosition] = React.useState([-1, -1]);
   const focusableItems = childContext.state.items.filter(item => !item.disabled && item.ref.current);
@@ -154,11 +154,14 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
     }
   }
   function handleBlur(e) {
-    if (open && onClose && isRoot && !menu.current.contains(e.relatedTarget)) {
+    if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) {
       handleClose(e);
     }
   }
   function fitValue(range, axis) {
+    if (!menu.current) {
+      return;
+    }
     const {
       width,
       height
@@ -197,18 +200,38 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
     reversedAnchor - size >= 0 ? reversedAnchor - size + offset : false,
     // align at max (second fallback)
     max - spacing - size];
+
+    // Previous array `options`, has at least one item that is a number (the last one - second fallback).
+    // That guarantees that the return of `find()` will always be a number
+    // and we can safely add the numeric casting `as number`.
     const bestOption = options.find(option => option !== false);
     return bestOption >= spacing ? bestOption : spacing;
   }
+  function notEmpty(value) {
+    return value !== null && value !== undefined;
+  }
+  function getPosition(x) {
+    if (Array.isArray(x)) {
+      // has to be of length 2
+      const filtered = x.filter(notEmpty);
+      if (filtered.length === 2) {
+        return filtered;
+      } else {
+        return;
+      }
+    } else {
+      return [x, x];
+    }
+  }
   function calculatePosition() {
-    if (menu.current) {
-      const ranges = {
-        x: typeof x === 'object' && x.length === 2 ? x : [x, x],
-        y: typeof y === 'object' && y.length === 2 ? y : [y, y]
-      };
-      return [fitValue(ranges.x, 'x'), fitValue(ranges.y, 'y')];
+    const ranges = {
+      x: getPosition(x),
+      y: getPosition(y)
+    };
+    if (!ranges.x || !ranges.y) {
+      return [-1, -1];
     }
-    return [-1, -1];
+    return [fitValue(ranges.x, 'x') ?? -1, fitValue(ranges.y, 'y') ?? -1];
   }
   React.useEffect(() => {
     if (open && focusableItems.length > 0) {
@@ -222,7 +245,7 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
     } else {
       // reset position when menu is closed in order for the --shown
       // modifier to be applied correctly
-      setPosition(-1, -1);
+      setPosition([-1, -1]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);

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

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 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';
+type ActionType = {
+    type: 'enableIcons' | 'registerItem';
+    payload: any;
+};
+type StateType = {
+    isRoot: boolean;
+    mode: 'full' | 'basic';
+    hasIcons: boolean;
+    size: 'xs' | 'sm' | 'md' | 'lg' | null;
+    items: any[];
+    requestCloseRoot: (e: Pick<React.KeyboardEvent<HTMLUListElement>, 'type'>) => void;
+};
+declare function menuReducer(state: StateType, action: ActionType): {
+    hasIcons: boolean;
+    isRoot: boolean;
+    mode: "full" | "basic";
+    size: "sm" | "md" | "lg" | "xs" | null;
+    items: any[];
+    requestCloseRoot: (e: Pick<React.KeyboardEvent<HTMLUListElement>, "type">) => void;
+};
+declare const MenuContext: React.Context<{
+    state: StateType;
+    dispatch: React.Dispatch<any>;
+}>;
+export { MenuContext, menuReducer };