@carbon/react 1.48.0-rc.0 → 1.48.0

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

@@ -0,0 +1,119 @@
+/**
+ * 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 MenuItemProps extends React.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;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the MenuItem is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Specify the kind of the MenuItem.
+     */
+    kind?: 'default' | 'danger';
+    /**
+     * A required label titling the MenuItem. Will be rendered as its text content.
+     */
+    label: string;
+    /**
+     * Provide an optional function to be called when the MenuItem is clicked.
+     */
+    onClick?: (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>) => void;
+    /**
+     * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
+     */
+    renderIcon?: any;
+    /**
+     * 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;
+    /**
+     * 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>;
+    /**
+     * Pass a bool to props.selected to control the state of this option.
+     */
+    selected?: boolean;
+}
+declare const MenuItemSelectable: React.ForwardRefExoticComponent<MenuItemSelectableProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemGroupProps {
+    /**
+     * A collection of MenuItems to be rendered within this group.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * A required label titling this group.
+     */
+    label: string;
+}
+declare const MenuItemGroup: React.ForwardRefExoticComponent<MenuItemGroupProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemRadioGroupProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify the default selected item. Must match the type of props.items.
+     */
+    defaultSelectedItem?: any;
+    /**
+     * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
+     */
+    itemToString?: (item: any) => 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[];
+    /**
+     * A required label titling this radio group.
+     */
+    label: string;
+    /**
+     * Provide an optional function to be called when the selection changes.
+     */
+    onChange?: React.ChangeEventHandler<HTMLLIElement>;
+    /**
+     * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
+     */
+    selectedItem?: any;
+}
+declare const MenuItemRadioGroup: React.ForwardRefExoticComponent<MenuItemRadioGroupProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemDividerProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+declare const MenuItemDivider: React.ForwardRefExoticComponent<MenuItemDividerProps & React.RefAttributes<HTMLLIElement>>;
+export { MenuItem, MenuItemSelectable, MenuItemGroup, MenuItemRadioGroup, MenuItemDivider, };

package/lib/components/Menu/MenuItem.js

@@ -49,7 +49,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const context = React.useContext(MenuContext.MenuContext);
-  const menuItem = React.useRef();
+  const menuItem = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, menuItem]);
   const [boundaries, setBoundaries] = React.useState({
     x: -1,
@@ -71,6 +71,9 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     });
   }
   function openSubmenu() {
+    if (!menuItem.current) {
+      return;
+    }
     const {
       x,
       y,
@@ -115,9 +118,11 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     }, hoverIntentDelay);
   }
   function handleMouseLeave() {
-    clearTimeout(hoverIntentTimeout.current);
-    closeSubmenu();
-    menuItem.current.focus();
+    if (hoverIntentTimeout.current) {
+      clearTimeout(hoverIntentTimeout.current);
+      closeSubmenu();
+      menuItem.current?.focus();
+    }
   }
   function handleKeyDown(e) {
     if (hasChildren && match.match(e, keys.ArrowRight)) {
@@ -167,13 +172,13 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
   }, rest, {
     ref: ref,
     className: classNames,
-    tabIndex: "-1",
-    "aria-disabled": isDisabled || null,
-    "aria-haspopup": hasChildren || null,
-    "aria-expanded": hasChildren ? submenuOpen : null,
+    tabIndex: -1,
+    "aria-disabled": isDisabled,
+    "aria-haspopup": hasChildren || undefined,
+    "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
-    onMouseEnter: hasChildren ? handleMouseEnter : null,
-    onMouseLeave: hasChildren ? handleMouseLeave : null,
+    onMouseEnter: hasChildren ? handleMouseEnter : undefined,
+    onMouseLeave: hasChildren ? handleMouseLeave : undefined,
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--menu-item__icon`
@@ -190,7 +195,7 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     open: submenuOpen,
     onClose: () => {
       closeSubmenu();
-      menuItem.current.focus();
+      menuItem.current?.focus();
     },
     x: boundaries.x,
     y: boundaries.y
@@ -370,7 +375,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(fun
   }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, rest, {
     role: "group",
     "aria-label": label
-  }), items.map((item, i) => /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+  }), items?.map((item, i) => /*#__PURE__*/React__default["default"].createElement(MenuItem, {
     key: i,
     label: itemToString(item),
     role: "menuitemradio",

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

@@ -0,0 +1,9 @@
+/**
+ * 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 { Menu } from './Menu';
+import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './MenuItem';
+export { Menu, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, };

package/lib/components/MenuButton/index.js

@@ -17,6 +17,7 @@ var iconsReact = require('@carbon/icons-react');
 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/OverflowMenu/next/index.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var index = require('../../IconButton/index.js');
 var Menu = require('../../Menu/Menu.js');
+require('../../Menu/MenuItem.js');
 var useId = require('../../../internal/useId.js');
 var usePrefix = require('../../../internal/usePrefix.js');
 var useAttachedMenu = require('../../../internal/useAttachedMenu.js');

package/lib/components/Slug/index.js

@@ -32,14 +32,17 @@ const SlugContent = /*#__PURE__*/React__default["default"].forwardRef(function S
     className
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const hasSlugActions = React__default["default"].Children.toArray(children).some(child => child.type?.displayName === 'SlugActions');
   const slugContentClasses = cx__default["default"](className, {
-    [`${prefix}--slug-content`]: true
+    [`${prefix}--slug-content`]: true,
+    [`${prefix}--slug-content--with-actions`]: hasSlugActions
   });
   return /*#__PURE__*/React__default["default"].createElement(index.ToggletipContent, {
     className: slugContentClasses,
     ref: ref
   }, children);
 });
+SlugContent.displayName = 'SlugContent';
 SlugContent.propTypes = {
   /**
    * Specify the content you want rendered inside the slug ToggleTip
@@ -64,6 +67,7 @@ const SlugActions = /*#__PURE__*/React__default["default"].forwardRef(function S
     ref: ref
   }, children);
 });
+SlugActions.displayName = 'SlugActions';
 SlugActions.propTypes = {
   /**
    * Specify the content you want rendered inside the slug callout toolbar

package/lib/components/Tooltip/Tooltip.js

@@ -120,14 +120,6 @@ function Tooltip(_ref) {
     }
   }, [isPointerIntersecting, leaveDelayMs, setOpen]);
   useNoInteractiveChildren.useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
-  React.useEffect(() => {
-    if (containerRef !== null && containerRef.current) {
-      const interactiveContent = useNoInteractiveChildren.getInteractiveContent(containerRef.current);
-      if (!interactiveContent) {
-        setOpen(false);
-      }
-    }
-  });
   React.useEffect(() => {
     if (isDragging) {
       // Register drag stop handlers.

package/lib/index.js

@@ -64,6 +64,8 @@ var InlineLoading = require('./components/InlineLoading/InlineLoading.js');
 var Link = require('./components/Link/Link.js');
 var ListItem = require('./components/ListItem/ListItem.js');
 var Loading = require('./components/Loading/Loading.js');
+var Menu = require('./components/Menu/Menu.js');
+var MenuItem = require('./components/Menu/MenuItem.js');
 var index$8 = require('./components/MenuButton/index.js');
 var Modal = require('./components/Modal/Modal.js');
 var ModalWrapper = require('./components/ModalWrapper/ModalWrapper.js');
@@ -216,8 +218,6 @@ var TableToolbarContent = require('./components/DataTable/TableToolbarContent.js
 var TableToolbarSearch = require('./components/DataTable/TableToolbarSearch.js');
 var TableToolbarMenu = require('./components/DataTable/TableToolbarMenu.js');
 var FilterableMultiSelect = require('./components/MultiSelect/FilterableMultiSelect.js');
-var Menu = require('./components/Menu/Menu.js');
-var MenuItem = require('./components/Menu/MenuItem.js');
 var MultiSelect = require('./components/MultiSelect/MultiSelect.js');
 var Pagination$1 = require('./components/Pagination/Pagination.js');
 var PaginationNav = require('./components/PaginationNav/PaginationNav.js');
@@ -287,6 +287,12 @@ exports.InlineLoading = InlineLoading["default"];
 exports.Link = Link["default"];
 exports.ListItem = ListItem["default"];
 exports.Loading = Loading["default"];
+exports.Menu = Menu.Menu;
+exports.MenuItem = MenuItem.MenuItem;
+exports.MenuItemDivider = MenuItem.MenuItemDivider;
+exports.MenuItemGroup = MenuItem.MenuItemGroup;
+exports.MenuItemRadioGroup = MenuItem.MenuItemRadioGroup;
+exports.MenuItemSelectable = MenuItem.MenuItemSelectable;
 exports.MenuButton = index$8.MenuButton;
 exports.Modal = Modal["default"];
 exports.ModalWrapper = ModalWrapper["default"];
@@ -475,12 +481,6 @@ exports.TableToolbarContent = TableToolbarContent["default"];
 exports.TableToolbarSearch = TableToolbarSearch["default"];
 exports.TableToolbarMenu = TableToolbarMenu["default"];
 exports.FilterableMultiSelect = FilterableMultiSelect["default"];
-exports.Menu = Menu.Menu;
-exports.MenuItem = MenuItem.MenuItem;
-exports.MenuItemDivider = MenuItem.MenuItemDivider;
-exports.MenuItemGroup = MenuItem.MenuItemGroup;
-exports.MenuItemRadioGroup = MenuItem.MenuItemRadioGroup;
-exports.MenuItemSelectable = MenuItem.MenuItemSelectable;
 exports.MultiSelect = MultiSelect["default"];
 exports.Pagination = Pagination$1["default"];
 exports.PaginationNav = PaginationNav["default"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.48.0-rc.0",
+  "version": "1.48.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/icons-react": "^11.34.0-rc.0",
+    "@carbon/icons-react": "^11.34.0",
     "@carbon/layout": "^11.20.0",
-    "@carbon/styles": "^1.48.0-rc.0",
+    "@carbon/styles": "^1.48.0",
     "@ibm/telemetry-js": "^1.1.0",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.29.0-rc.0",
+    "@carbon/themes": "^11.29.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "5eb449df62a21a69a467895cb94d758ba8554620"
+  "gitHead": "6d133d4f920b7c01f6ea2221938a339c14a85b42"
 }