@carbon/react 1.55.0-rc.0 → 1.56.0-rc.0

package/lib/components/UIShell/HeaderMenu.d.ts

@@ -0,0 +1,219 @@
+/**
+ * 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 PropTypes from 'prop-types';
+/**
+ * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
+ * will be a `HeaderMenuItem`. It handles certain keyboard events to help
+ * with managing focus. It also passes along refs to each child so that it can
+ * help manage focus state of its children.
+ */
+interface HeaderMenuProps {
+    /**
+     * Required props for the accessibility label of the menu
+     */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /**
+     * Optionally provide a custom class to apply to the underlying `<li>` node
+     */
+    className?: string;
+    /**
+     * Provide a custom ref handler for the menu button
+     */
+    focusRef?: React.Ref<any>;
+    /**
+     * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+     */
+    isActive?: boolean;
+    /**
+     * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+     * @deprecated Please use `isActive` instead. This will be removed in the next major release.
+     */
+    isCurrentPage?: boolean;
+    /**
+     * Provide a label for the link text
+     */
+    menuLinkName: string;
+    /**
+     * Optionally provide an onBlur handler that is called when the underlying
+     * button fires it's onblur event
+     */
+    onBlur?: (event: React.FocusEvent<HTMLLIElement>) => void;
+    /**
+     * Optionally provide an onClick handler that is called when the underlying
+     * button fires it's onclick event
+     */
+    onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    /**
+     * Optionally provide an onKeyDown handler that is called when the underlying
+     * button fires it's onkeydown event
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLLIElement>) => void;
+    /**
+     * Optional component to render instead of string
+     */
+    renderMenuContent?: () => JSX.Element;
+    /**
+     * Optionally provide a tabIndex for the underlying menu button
+     */
+    tabIndex?: number;
+    /**
+     * The children should be a series of `HeaderMenuItem` components.
+     */
+    children?: React.ReactNode;
+}
+interface HeaderMenuState {
+    expanded: boolean;
+    selectedIndex: number | null;
+}
+declare class HeaderMenu extends React.Component<HeaderMenuProps, HeaderMenuState> {
+    static propTypes: {
+        /**
+         * Optionally provide a custom class to apply to the underlying `<li>` node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom ref handler for the menu button
+         */
+        focusRef: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+         */
+        isActive: PropTypes.Requireable<boolean>;
+        /**
+         * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+         * @deprecated Please use `isActive` instead. This will be removed in the next major release.
+         */
+        isCurrentPage: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide a label for the link text
+         */
+        menuLinkName: PropTypes.Validator<string>;
+        /**
+         * Optionally provide an onBlur handler that is called when the underlying
+         * button fires it's onblur event
+         */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optionally provide an onClick handler that is called when the underlying
+         * button fires it's onclick event
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optionally provide an onKeyDown handler that is called when the underlying
+         * button fires it's onkeydown event
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optional component to render instead of string
+         */
+        renderMenuContent: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optionally provide a tabIndex for the underlying menu button
+         */
+        tabIndex: PropTypes.Requireable<number>;
+        0: string;
+        length: 1;
+        toString(): string;
+        toLocaleString(): string;
+        pop(): string | undefined;
+        push(...items: string[]): number;
+        concat(...items: ConcatArray<string>[]): string[];
+        concat(...items: (string | ConcatArray<string>)[]): string[];
+        join(separator?: string | undefined): string;
+        reverse(): string[];
+        shift(): string | undefined;
+        slice(start?: number | undefined, end?: number | undefined): string[];
+        sort(compareFn?: ((a: string, b: string) => number) | undefined): [key: string];
+        splice(start: number, deleteCount?: number | undefined): string[];
+        splice(start: number, deleteCount: number, ...items: string[]): string[];
+        unshift(...items: string[]): number;
+        indexOf(searchElement: string, fromIndex?: number | undefined): number;
+        lastIndexOf(searchElement: string, fromIndex?: number | undefined): number;
+        every<S extends string>(predicate: (value: string, index: number, array: string[]) => value is S, thisArg?: any): this is S[];
+        every(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
+        some(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
+        forEach(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void;
+        map<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any): U[];
+        filter<S_1 extends string>(predicate: (value: string, index: number, array: string[]) => value is S_1, thisArg?: any): S_1[];
+        filter(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
+        reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: string, currentIndex: number, array: string[]) => U_1, initialValue: U_1): U_1;
+        reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: string, currentIndex: number, array: string[]) => U_2, initialValue: U_2): U_2;
+        find<S_2 extends string>(predicate: (this: void, value: string, index: number, obj: string[]) => value is S_2, thisArg?: any): S_2 | undefined;
+        find(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
+        findIndex(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): number;
+        fill(value: string, start?: number | undefined, end?: number | undefined): [key: string];
+        copyWithin(target: number, start: number, end?: number | undefined): [key: string];
+        entries(): IterableIterator<[number, string]>;
+        keys(): IterableIterator<number>;
+        values(): IterableIterator<string>;
+        includes(searchElement: string, fromIndex?: number | undefined): boolean;
+        flatMap<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
+        flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
+        at(index: number): string | undefined;
+        [Symbol.iterator](): IterableIterator<string>;
+        [Symbol.unscopables](): {
+            copyWithin: boolean;
+            entries: boolean;
+            fill: boolean;
+            find: boolean;
+            findIndex: boolean;
+            keys: boolean;
+            values: boolean;
+        };
+    };
+    static contextType: React.Context<string>;
+    _subMenus: React.RefObject<HTMLUListElement>;
+    private items;
+    private menuButtonRef;
+    constructor(props: any);
+    /**
+     * Toggle the expanded state of the menu on click.
+     */
+    handleOnClick: (e: any) => void;
+    /**
+     * Keyboard event handler for the entire menu.
+     */
+    handleOnKeyDown: (event: any) => void;
+    /**
+     * Handle our blur event from our underlying menuitems. Will mostly be used
+     * for closing our menu in response to a user clicking off or tabbing out of
+     * the menu or menubar.
+     */
+    handleOnBlur: (event: any) => void;
+    /**
+     * ref handler for our menu button. If we are supplied a `focusRef` prop, we also
+     * forward along the node.
+     *
+     * This is useful when this component is a child in a
+     * menu or menubar as it will allow the parent to explicitly focus the menu
+     * button node when that child should receive focus.
+     */
+    handleMenuButtonRef: (node: any) => void;
+    /**
+     * Handles individual menuitem refs. We assign them to a class instance
+     * property so that we can properly manage focus of our children.
+     */
+    handleItemRef: (index: any) => (node: any) => void;
+    handleMenuClose: (event: any) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+    /**
+     * We capture the `ref` for each child inside of `this.items` to properly
+     * manage focus. In addition to this focus management, all items receive a
+     * `tabIndex: -1` so the user won't hit a large number of items in their tab
+     * sequence when they might not want to go through all the items.
+     */
+    _renderMenuItem: (item: React.ReactNode, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+}
+declare const HeaderMenuForwardRef: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export { HeaderMenu };
+export default HeaderMenuForwardRef;

package/lib/components/UIShell/HeaderMenu.js

@@ -33,10 +33,13 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
  * with managing focus. It also passes along refs to each child so that it can
  * help manage focus state of its children.
  */
+
 class HeaderMenu extends React__default["default"].Component {
   constructor(props) {
     super(props);
     _rollupPluginBabelHelpers.defineProperty(this, "_subMenus", /*#__PURE__*/React__default["default"].createRef());
+    _rollupPluginBabelHelpers.defineProperty(this, "items", []);
+    _rollupPluginBabelHelpers.defineProperty(this, "menuButtonRef", null);
     /**
      * Toggle the expanded state of the menu on click.
      */
@@ -91,8 +94,12 @@ class HeaderMenu extends React__default["default"].Component {
      * button node when that child should receive focus.
      */
     _rollupPluginBabelHelpers.defineProperty(this, "handleMenuButtonRef", node => {
-      if (this.props.focusRef) {
-        this.props.focusRef(node);
+      const {
+        focusRef
+      } = this.props;
+      // Check if focusRef is a function before calling it
+      if (typeof focusRef === 'function') {
+        focusRef(node);
       }
       this.menuButtonRef = node;
     });
@@ -114,7 +121,9 @@ class HeaderMenu extends React__default["default"].Component {
         }));
 
         // Return focus to menu button when the user hits ESC.
-        this.menuButtonRef.focus();
+        if (this.menuButtonRef !== null) {
+          this.menuButtonRef.focus();
+        }
         return;
       }
     });
@@ -151,23 +160,25 @@ class HeaderMenu extends React__default["default"].Component {
       children,
       renderMenuContent: MenuContent,
       menuLinkName,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       focusRef,
-      // eslint-disable-line no-unused-vars
       onBlur,
       onClick,
       onKeyDown,
       ...rest
     } = this.props;
-    const hasActiveDescendant = childrenArg => React__default["default"].Children.toArray(childrenArg).some(child => child.props && (child.props.isActive || child.props.isCurrentPage || child.props.children instanceof Array && hasActiveDescendant(child.props.children)));
+    const hasActiveDescendant = childrenArg => React__default["default"].Children.toArray(childrenArg).some(child => /*#__PURE__*/React__default["default"].isValidElement(child) && (
+    // This is the type guard
+    child.props.isActive || child.props.isCurrentPage || Array.isArray(child.props.children) && hasActiveDescendant(child.props.children)));
     const accessibilityLabel = {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy
     };
     const itemClassName = cx__default["default"]({
       [`${prefix}--header__submenu`]: true,
-      [customClassName]: !!customClassName
+      [`${customClassName}`]: !!customClassName
     });
-    let isActivePage = isActive ? isActive : isCurrentPage;
+    const isActivePage = isActive ? isActive : isCurrentPage;
     const linkClassName = cx__default["default"]({
       [`${prefix}--header__menu-item`]: true,
       [`${prefix}--header__menu-title`]: true,
@@ -258,12 +269,13 @@ _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "propTypes", {
 });
 _rollupPluginBabelHelpers.defineProperty(HeaderMenu, "contextType", usePrefix.PrefixContext);
 const HeaderMenuForwardRef = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default["default"].createElement(HeaderMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(HeaderMenu, _rollupPluginBabelHelpers["extends"]({
+    menuLinkName: "link"
+  }, props, {
     focusRef: ref
   }));
 });
 HeaderMenuForwardRef.displayName = 'HeaderMenu';
-var HeaderMenuForwardRef$1 = HeaderMenuForwardRef;
 
 exports.HeaderMenu = HeaderMenu;
-exports["default"] = HeaderMenuForwardRef$1;
+exports["default"] = HeaderMenuForwardRef;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.55.0-rc.0",
+  "version": "1.56.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,10 +49,10 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.19.0",
-    "@carbon/icons-react": "^11.39.0",
+    "@carbon/icons-react": "^11.40.0-rc.0",
     "@carbon/layout": "^11.21.0",
-    "@carbon/styles": "^1.55.0-rc.0",
-    "@floating-ui/react": "^0.25.4",
+    "@carbon/styles": "^1.55.0",
+    "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.2.1",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "600138750484cf814dc1b927ed4c277301b5290a"
+  "gitHead": "ecf1b3cc2c2e9ed4908bab90938120e0d4b2aea4"
 }