@carbon/react 1.51.1 → 1.52.0

package/es/components/UIShell/SideNavLink.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useContext } from 'react';
+import React__default, { forwardRef, useContext } from 'react';
 import Link, { LinkPropTypes } from './Link.js';
 import SideNavIcon from './SideNavIcon.js';
 import SideNavItem from './SideNavItem.js';
@@ -16,7 +16,7 @@ import SideNavLinkText from './SideNavLinkText.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { SideNavContext } from './SideNav.js';
 
-const SideNavLink = /*#__PURE__*/React__default.forwardRef(function SideNavLink(_ref, ref) {
+const SideNavLink = /*#__PURE__*/forwardRef(function SideNavLink(_ref, ref) {
   let {
     children,
     className: customClassName,
@@ -71,12 +71,12 @@ SideNavLink.propTypes = {
   /**
    * Provide an icon to render in the side navigation link. Should be a React class.
    */
+  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
    */
   tabIndex: PropTypes.number
 };
-var SideNavLink$1 = SideNavLink;
 
-export { SideNavLink$1 as default };
+export { SideNavLink as default };

package/es/internal/useAttachedMenu.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 { MouseEventHandler } from 'react';
+/**
+ * Array of two numbers either representing [left, right] or [top, bottom].
+ */
+type TwoCoordinates = [number, number];
+export interface UseAttachedMenuReturn {
+    /**
+     * Whether the menu is open or not.
+     */
+    open: boolean;
+    /**
+     * The x position of the menu.
+     */
+    x: TwoCoordinates;
+    /**
+     * The y position of the menu.
+     */
+    y: TwoCoordinates;
+    /**
+     * A function to be called when the trigger element receives a click event.
+     */
+    handleClick: () => void;
+    /**
+     * A function to be called when the trigger element receives a mousedown event.
+     */
+    handleMousedown: MouseEventHandler;
+    /**
+     * A function to be called when the menu emits onClose.
+     */
+    handleClose: () => void;
+}
+/**
+ * This hook contains common code to be used when a menu should be visually attached to an anchor based on a click event.
+ *
+ * @param {Element|object} anchor The element or ref the menu should visually be attached to.
+ * @returns {useAttachedMenuReturn}
+ */
+export declare function useAttachedMenu(anchor: any): UseAttachedMenuReturn;
+export {};

package/es/internal/useAttachedMenu.js

@@ -8,13 +8,7 @@
 import { useState } from 'react';
 
 /**
- * @typedef {object} useAttachedMenuReturn
- * @property {boolean} open Whether the menu is open or not
- * @property {[number, number]} x The x position of the menu
- * @property {[number, number]} y The y position of the menu
- * @property {Function} handleClick A function to be called when the trigger element receives a click event
- * @property {Function} handleMousedown A function to be called when the trigger element recives a mousedown event
- * @property {Function} handleClose A function to be called when the menu emits onClose
+ * Array of two numbers either representing [left, right] or [top, bottom].
  */
 
 /**

package/es/tools/wrapComponent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 { ReactAttr } from '../types/common';
+type HTMLTagName = keyof HTMLElementTagNameMap;
+type WrapComponentArgs<T extends HTMLTagName> = {
+    name: string;
+    type: T;
+    className?: string | ((prefix: string) => string);
+};
+/**
+ * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
+ * @returns
+ */
+declare const wrapComponent: <T extends keyof HTMLElementTagNameMap>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => (props: ReactAttr<T>) => React.ReactElement;
+export default wrapComponent;

package/es/tools/wrapComponent.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
 import { usePrefix } from '../internal/usePrefix.js';
 
 /**
@@ -46,6 +46,5 @@ const wrapComponent = _ref => {
   };
   return Component;
 };
-var wrapComponent$1 = wrapComponent;
 
-export { wrapComponent$1 as default };
+export { wrapComponent as default };

package/lib/components/ComposedModal/ComposedModal.js

@@ -126,7 +126,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   const startSentinel = React.useRef(null);
   const endSentinel = React.useRef(null);
 
-  // Kepp track of modal open/close state
+  // Keep track of modal open/close state
   // and propagate it to the document.body
   React.useEffect(() => {
     if (open !== wasOpen) {
@@ -143,12 +143,14 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   function handleKeyDown(evt) {
+    evt.stopPropagation();
     if (match.match(evt, keys.Escape)) {
       closeModal(evt);
     }
     onKeyDown?.(evt);
   }
   function handleMousedown(evt) {
+    evt.stopPropagation();
     const isInside = innerModal.current?.contains(evt.target);
     if (!isInside && !preventCloseOnClickOutside) {
       closeModal(evt);

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+declare const TableActionList: (props: import("../../types/common").ReactAttr<"div">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default TableActionList;

package/lib/components/DataTable/TableActionList.js

@@ -16,6 +16,5 @@ const TableActionList = wrapComponent["default"]({
   type: 'div',
   className: prefix => `${prefix}--action-list`
 });
-var TableActionList$1 = TableActionList;
 
-exports["default"] = TableActionList$1;
+exports["default"] = TableActionList;

package/lib/components/DataTable/TableHead.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 React, { ThHTMLAttributes } from 'react';
+import { ThHTMLAttributes } from 'react';
 export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
-declare const TableHead: React.FC<TableHeadProps>;
+declare const TableHead: (props: import("../../types/common").ReactAttr<"thead">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default TableHead;

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

@@ -4,16 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableToolbarContent: {
-    ({ className: baseClassName, ...other }: {
-        [x: string]: any;
-        className?: string | undefined;
-    }): import("react").ReactElement<{
-        className: string | undefined;
-    }, string | import("react").JSXElementConstructor<any>>;
-    displayName: string;
-    propTypes: {
-        className: import("prop-types").Requireable<string>;
-    };
-};
+declare const TableToolbarContent: (props: import("../../types/common").ReactAttr<"div">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default TableToolbarContent;

package/lib/components/Dropdown/Dropdown.d.ts

@@ -102,7 +102,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * An optional callback to render the currently selected item as a react element instead of only
      * as a string.
      */
-    renderSelectedItem?(item: ItemType): React.JSXElementConstructor<ItemType> | null;
+    renderSelectedItem?(item: ItemType): ReactNode;
     /**
      * In the case you want to control the dropdown selection entirely.
      */

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

@@ -4,13 +4,9 @@
  * 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, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    /**
-     * Provide a custom element or component to render the top-level node for the
-     * component.
-     */
-    as?: string | undefined;
+import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, ElementType, HTMLAttributeAnchorTarget } from 'react';
+import { PolymorphicProps } from '../../types/common';
+export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
      * @description Indicates the element that represents the
      *   current item within a container or set of related
@@ -52,7 +48,6 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      */
     visited?: boolean;
 }
-declare const Link: React.ForwardRefExoticComponent<LinkProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLAnchorElement>>;
+export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps>;
+declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any>>, "ref"> & React.RefAttributes<unknown>>;
 export default Link;

package/lib/components/Link/Link.js

@@ -70,7 +70,7 @@ Link.propTypes = {
    * Provide a custom element or component to render the top-level node for the
    * component.
    */
-  as: PropTypes__default["default"].string,
+  as: PropTypes__default["default"].elementType,
   /**
    * Provide the content for the Link
    */
@@ -95,7 +95,6 @@ Link.propTypes = {
    * Optional prop to render an icon next to the link.
    * Can be a React component class
    */
-  // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.

package/lib/components/Menu/Menu.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 React, { RefObject } from 'react';
+import React, { ReactNode, RefObject } from 'react';
 interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * The ref of the containing element, used for positioning and alignment of the menu
@@ -13,7 +13,7 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * A collection of MenuItems to be rendered within this Menu.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Additional CSS class names.
      */
@@ -21,7 +21,7 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * A label describing the Menu.
      */
-    label?: string;
+    label: string;
     /**
      * Specify how the menu should align with the button element
      */
@@ -53,15 +53,15 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
      */
-    target?: any;
+    target?: HTMLElement;
     /**
      * 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)[];
+    x?: number | [number, number];
     /**
      * 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)[];
+    y?: number | [number, number];
 }
 declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
 export { Menu };

package/lib/components/Menu/Menu.js

@@ -30,7 +30,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const spacing = 8; // distance to keep to window edges, in px
 
-const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_ref, forwardRef) {
+const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
   let {
     children,
     className,
@@ -82,7 +82,7 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
     actionButtonWidth = w;
   }
 
-  // Set RTL based on document direction or `LayoutDirection`
+  // Set RTL based on the document direction or `LayoutDirection`
   const {
     direction
   } = useLayoutDirection.useLayoutDirection();
@@ -313,6 +313,7 @@ Menu.propTypes = {
   /**
    * A label describing the Menu.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   label: PropTypes__default["default"].string,
   /**
    * Specify how the menu should align with the button element
@@ -345,14 +346,17 @@ Menu.propTypes = {
   /**
    * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   target: PropTypes__default["default"].object,
   /**
    * 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])
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   x: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)]),
   /**
    * 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])
    */
+  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   y: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)])
 };
 

package/lib/components/Menu/MenuContext.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 React from 'react';
+import { KeyboardEvent, RefObject } from 'react';
 type ActionType = {
     type: 'enableIcons' | 'registerItem';
     payload: any;
@@ -15,7 +15,7 @@ type StateType = {
     hasIcons: boolean;
     size: 'xs' | 'sm' | 'md' | 'lg' | null;
     items: any[];
-    requestCloseRoot: (e: Pick<React.KeyboardEvent<HTMLUListElement>, 'type'>) => void;
+    requestCloseRoot: (e: Pick<KeyboardEvent<HTMLUListElement>, 'type'>) => void;
 };
 declare function menuReducer(state: StateType, action: ActionType): {
     hasIcons: boolean;
@@ -23,10 +23,18 @@ declare function menuReducer(state: StateType, action: ActionType): {
     mode: "full" | "basic";
     size: "sm" | "md" | "lg" | "xs" | null;
     items: any[];
-    requestCloseRoot: (e: Pick<React.KeyboardEvent<HTMLUListElement>, "type">) => void;
+    requestCloseRoot: (e: Pick<KeyboardEvent<HTMLUListElement>, "type">) => void;
 };
-declare const MenuContext: React.Context<{
+type DispatchFuncProps = {
+    type: 'registerItem' | 'enableIcons';
+    payload: {
+        ref: RefObject<HTMLLIElement>;
+        disabled: boolean;
+    };
+};
+type MenuContextProps = {
     state: StateType;
-    dispatch: React.Dispatch<any>;
-}>;
+    dispatch: (props: DispatchFuncProps) => void;
+};
+declare const MenuContext: import("react").Context<MenuContextProps>;
 export { MenuContext, menuReducer };

package/lib/components/Menu/MenuContext.js

@@ -11,10 +11,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const menuDefaultState = {
   isRoot: true,
   mode: 'full',
@@ -37,10 +33,10 @@ function menuReducer(state, action) {
       };
   }
 }
-const MenuContext = /*#__PURE__*/React__default["default"].createContext({
+const MenuContext = /*#__PURE__*/React.createContext({
   state: menuDefaultState,
   // 'dispatch' is populated by the root menu
-  dispatch: () => {}
+  dispatch: _ => {}
 });
 
 exports.MenuContext = MenuContext;

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

@@ -4,12 +4,12 @@
  * 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 MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+import React, { ChangeEventHandler, ComponentProps, FC, KeyboardEvent, LiHTMLAttributes, MouseEvent, ReactNode } from 'react';
+export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
     /**
      * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Additional CSS class names.
      */
@@ -29,45 +29,37 @@ interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     /**
      * Provide an optional function to be called when the MenuItem is clicked.
      */
-    onClick?: (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>) => void;
+    onClick?: (event: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => void;
     /**
      * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
      */
-    renderIcon?: any;
+    renderIcon?: FC;
     /**
      * Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
      */
     shortcut?: string;
 }
-declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
-interface MenuItemSelectableProps {
-    /**
-     * Additional CSS class names.
-     */
-    className?: string;
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
+export interface MenuItemSelectableProps extends Omit<MenuItemProps, 'onChange'> {
     /**
      * Specify whether the option should be selected by default.
      */
     defaultSelected?: boolean;
-    /**
-     * A required label titling this option.
-     */
-    label: string;
     /**
      * Provide an optional function to be called when the selection state changes.
      */
-    onChange?: React.ChangeEventHandler<HTMLLIElement>;
+    onChange?: ChangeEventHandler<HTMLLIElement>;
     /**
-     * Pass a bool to props.selected to control the state of this option.
+     * Controls the state of this option.
      */
     selected?: boolean;
 }
-declare const MenuItemSelectable: React.ForwardRefExoticComponent<MenuItemSelectableProps & React.RefAttributes<HTMLLIElement>>;
-interface MenuItemGroupProps {
+export declare const MenuItemSelectable: React.ForwardRefExoticComponent<MenuItemSelectableProps & React.RefAttributes<HTMLLIElement>>;
+export interface MenuItemGroupProps extends ComponentProps<'ul'> {
     /**
      * A collection of MenuItems to be rendered within this group.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Additional CSS class names.
      */
@@ -77,8 +69,8 @@ interface MenuItemGroupProps {
      */
     label: string;
 }
-declare const MenuItemGroup: React.ForwardRefExoticComponent<MenuItemGroupProps & React.RefAttributes<HTMLLIElement>>;
-interface MenuItemRadioGroupProps {
+export declare const MenuItemGroup: React.ForwardRefExoticComponent<Omit<MenuItemGroupProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export interface MenuItemRadioGroupProps<Item> extends Omit<ComponentProps<'ul'>, 'onChange'> {
     /**
      * Additional CSS class names.
      */
@@ -86,15 +78,15 @@ interface MenuItemRadioGroupProps {
     /**
      * Specify the default selected item. Must match the type of props.items.
      */
-    defaultSelectedItem?: any;
+    defaultSelectedItem?: Item;
     /**
      * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
      */
-    itemToString?: (item: any) => string;
+    itemToString?: (item: Item) => string;
     /**
      * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
      */
-    items?: any[];
+    items: Item[];
     /**
      * A required label titling this radio group.
      */
@@ -102,18 +94,17 @@ interface MenuItemRadioGroupProps {
     /**
      * Provide an optional function to be called when the selection changes.
      */
-    onChange?: React.ChangeEventHandler<HTMLLIElement>;
+    onChange?: ChangeEventHandler<HTMLLIElement>;
     /**
      * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
      */
-    selectedItem?: any;
+    selectedItem?: Item;
 }
-declare const MenuItemRadioGroup: React.ForwardRefExoticComponent<MenuItemRadioGroupProps & React.RefAttributes<HTMLLIElement>>;
-interface MenuItemDividerProps {
+export declare const MenuItemRadioGroup: React.ForwardRefExoticComponent<Omit<MenuItemRadioGroupProps<unknown>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export interface MenuItemDividerProps extends ComponentProps<'li'> {
     /**
      * Additional CSS class names.
      */
     className?: string;
 }
-declare const MenuItemDivider: React.ForwardRefExoticComponent<MenuItemDividerProps & React.RefAttributes<HTMLLIElement>>;
-export { MenuItem, MenuItemSelectable, MenuItemGroup, MenuItemRadioGroup, MenuItemDivider, };
+export declare const MenuItemDivider: React.ForwardRefExoticComponent<Omit<MenuItemDividerProps, "ref"> & React.RefAttributes<HTMLLIElement>>;