@carbon/react 1.76.0 → 1.77.0

package/es/components/Tag/DismissibleTag.d.ts

@@ -22,7 +22,7 @@ export interface DismissibleTagBaseProps {
      */
     disabled?: boolean;
     /**
-     * Specify the id for the selectabletag.
+     * Specify the id for the selectable tag.
      */
     id?: string;
     /**
@@ -63,7 +63,7 @@ export interface DismissibleTagBaseProps {
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
 declare const DismissibleTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, decorator, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType>({ className, decorator, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>

package/es/components/Tag/OperationalTag.d.ts

@@ -55,7 +55,7 @@ export interface OperationalTagBaseProps {
 }
 export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
 declare const OperationalTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType>({ className, disabled, id, renderIcon, size, text, type, ...other }: OperationalTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>

package/es/components/Tag/SelectableTag.d.ts

@@ -18,7 +18,7 @@ export interface SelectableTagBaseProps {
      */
     disabled?: boolean;
     /**
-     * Specify the id for the selectabletag.
+     * Specify the id for the selectable tag.
      */
     id?: string;
     /**
@@ -50,7 +50,7 @@ export interface SelectableTagBaseProps {
 }
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
 declare const SelectableTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, onChange, onClick, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType>({ className, disabled, id, renderIcon, onChange, onClick, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>

package/es/components/Text/index.d.ts

@@ -9,10 +9,10 @@ import { Text, TextBaseProps, TextProps } from './Text';
 export { TextDirection, Text };
 export type { TextBaseProps, TextProps, TextDirectionProps, GetTextDirection, TextDir, };
 export declare const Label: {
-    (props: TextProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>>): import("react/jsx-runtime").JSX.Element;
+    (props: TextProps<React.ElementType>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Legend: {
-    (props: TextProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>>): import("react/jsx-runtime").JSX.Element;
+    (props: TextProps<React.ElementType>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/es/components/TextInput/PasswordInput.d.ts

@@ -2,7 +2,7 @@ import React, { InputHTMLAttributes, ReactNode } from 'react';
 type ExcludedAttributes = 'size';
 export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
-     * Provide a custom className that is applied directly to the underlyling `<input>` node
+     * Provide a custom className that is applied directly to the underlying `<input>` node
      */
     className?: string;
     /**

package/es/components/Theme/index.d.ts

@@ -13,7 +13,7 @@ export interface GlobalThemeProps {
 }
 export declare const ThemeContext: React.Context<GlobalThemeProps>;
 export declare const GlobalTheme: React.ForwardRefExoticComponent<GlobalThemeProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<unknown>>;
 type ThemeBaseProps = GlobalThemeProps & {
     className?: string;

package/es/components/Tile/Tile.d.ts

@@ -10,7 +10,7 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     light?: boolean;
     /**
      * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
-     * when `slug` prop is present
+     * when an AILabel is present
      */
     hasRoundedCorners?: boolean;
     /**

package/es/components/Tile/Tile.js

@@ -66,7 +66,7 @@ Tile.propTypes = {
   decorator: PropTypes.node,
   /**
    * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
-   * when `slug` prop is present
+   * when an AILabel is present
    */
   hasRoundedCorners: PropTypes.bool,
   /**

package/es/components/Toggletip/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,11 +12,11 @@ type ToggletipLabelProps<E extends ElementType> = {
     as?: E;
     children?: ReactNode;
     className?: string;
-};
+} & Omit<React.ComponentPropsWithoutRef<E>, 'as' | 'children' | 'className'>;
 /**
  * Used to render the label for a Toggletip
  */
-export declare function ToggletipLabel<E extends ElementType>({ as: BaseComponent, children, className: customClassName, }: ToggletipLabelProps<E>): import("react/jsx-runtime").JSX.Element;
+export declare function ToggletipLabel<E extends ElementType>({ as: BaseComponent, children, className: customClassName, ...rest }: ToggletipLabelProps<E>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ToggletipLabel {
     var propTypes: {
         /**

package/es/components/Toggletip/index.js

@@ -23,14 +23,15 @@ function ToggletipLabel(_ref) {
   let {
     as: BaseComponent = 'span',
     children,
-    className: customClassName
+    className: customClassName,
+    ...rest
   } = _ref;
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-label`, customClassName);
   const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, {
+  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
     className: className
-  }, children);
+  }, rest), children);
 }
 ToggletipLabel.propTypes = {
   /**
@@ -120,7 +121,7 @@ function Toggletip(_ref2) {
     }
   };
 
-  // If the `Toggletip` is the last focusable item in the tab order, it shoudl also close when the browser window loses focus  (#12922)
+  // If the `Toggletip` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
   useWindowEvent('blur', () => {
     if (open) {
       actions.close();

package/es/components/Tooltip/Tooltip.d.ts

@@ -40,10 +40,18 @@ interface TooltipBaseProps {
      * description will not be used
      */
     description?: React.ReactNode;
+    /**
+     * Specify whether a drop shadow should be rendered
+     */
+    dropShadow?: boolean;
     /**
      * Specify the duration in milliseconds to delay before displaying the tooltip
      */
     enterDelayMs?: number;
+    /**
+     * Render the component using the high-contrast theme
+     */
+    highContrast?: boolean;
     /**
      * Provide the label to be rendered inside of the Tooltip. The label will use
      * `aria-labelledby` and will fully describe the child node that is provided.
@@ -60,7 +68,7 @@ interface TooltipBaseProps {
     leaveDelayMs?: number;
 }
 export type TooltipProps<T extends React.ElementType> = PolymorphicProps<T, TooltipBaseProps>;
-declare function Tooltip<T extends React.ElementType>({ align, className: customClassName, children, label, description, enterDelayMs, leaveDelayMs, defaultOpen, closeOnActivation, ...rest }: TooltipProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip<T extends React.ElementType>({ align, className: customClassName, children, label, description, enterDelayMs, leaveDelayMs, defaultOpen, closeOnActivation, dropShadow, highContrast, ...rest }: TooltipProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Tooltip {
     var propTypes: {
         /**
@@ -94,10 +102,18 @@ declare namespace Tooltip {
          * description will not be used
          */
         description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify whether a drop shadow should be rendered
+         */
+        dropShadow: PropTypes.Requireable<boolean>;
         /**
          * Specify the duration in milliseconds to delay before displaying the tooltip
          */
         enterDelayMs: PropTypes.Requireable<number>;
+        /**
+         * Render the component using the high-contrast theme
+         */
+        highContrast: PropTypes.Requireable<boolean>;
         /**
          * Provide the label to be rendered inside of the Tooltip. The label will use
          * `aria-labelledby` and will fully describe the child node that is provided.

package/es/components/Tooltip/Tooltip.js

@@ -33,6 +33,8 @@ function Tooltip(_ref) {
     leaveDelayMs = 300,
     defaultOpen = false,
     closeOnActivation = false,
+    dropShadow = false,
+    highContrast = true,
     ...rest
   } = _ref;
   const tooltipRef = useRef(null);
@@ -154,8 +156,8 @@ function Tooltip(_ref) {
     React__default.createElement(Popover, _extends({}, rest, {
       align: align,
       className: cx(`${prefix}--tooltip`, customClassName),
-      dropShadow: false,
-      highContrast: true,
+      dropShadow: dropShadow,
+      highContrast: highContrast,
       onKeyDown: onKeyDown,
       onMouseLeave: onMouseLeave,
       open: open
@@ -226,10 +228,18 @@ Tooltip.propTypes = {
    * description will not be used
    */
   description: PropTypes.node,
+  /**
+   * Specify whether a drop shadow should be rendered
+   */
+  dropShadow: PropTypes.bool,
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */
   enterDelayMs: PropTypes.number,
+  /**
+   * Render the component using the high-contrast theme
+   */
+  highContrast: PropTypes.bool,
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.

package/es/components/TreeView/TreeNode.d.ts

@@ -34,7 +34,7 @@ export type TreeNodeProps = {
      */
     disabled?: boolean;
     /**
-     * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active and props.selected
+     * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active, props.selected and aria-owns
      */
     id?: string;
     /**
@@ -48,7 +48,7 @@ export type TreeNodeProps = {
     /**
      * Callback function for when the node receives or loses focus
      */
-    onNodeFocusEvent?: (event: React.FocusEvent<HTMLLIElement>) => void;
+    onNodeFocusEvent?: (event: React.FocusEvent<HTMLElement>) => void;
     /**
      * Callback function for when the node is selected
      */
@@ -75,13 +75,17 @@ export type TreeNodeProps = {
      * Specify the value of the TreeNode
      */
     value?: string;
-} & Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onSelect'>;
+    /**
+     * Optional: The URL the TreeNode is linking to
+     */
+    href?: string;
+} & Omit<React.LiHTMLAttributes<HTMLElement>, 'onSelect'>;
 declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * The ID of the active node in the tree
      */
-    active?: string | number | undefined;
+    active?: string | number;
     /**
      * Specify the children of the TreeNode
      */
@@ -89,29 +93,29 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * Specify an optional className to be applied to the TreeNode
      */
-    className?: string | undefined;
+    className?: string;
     /**
      * **[Experimental]** The default expansion state of the node.
      * *This is only supported with the `enable-treeview-controllable` feature flag!*
      */
-    defaultIsExpanded?: boolean | undefined;
+    defaultIsExpanded?: boolean;
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * TreeNode depth to determine spacing
      */
-    depth?: number | undefined;
+    depth?: number;
     /**
      * Specify if the TreeNode is disabled
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
-     * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active and props.selected
+     * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active, props.selected and aria-owns
      */
-    id?: string | undefined;
+    id?: string;
     /**
      * Specify if the TreeNode is expanded (only applicable to parent nodes)
      */
-    isExpanded?: boolean | undefined;
+    isExpanded?: boolean;
     /**
      * Rendered label for the TreeNode
      */
@@ -119,32 +123,36 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * Callback function for when the node receives or loses focus
      */
-    onNodeFocusEvent?: ((event: React.FocusEvent<HTMLLIElement>) => void) | undefined;
+    onNodeFocusEvent?: (event: React.FocusEvent<HTMLElement>) => void;
     /**
      * Callback function for when the node is selected
      */
-    onSelect?: ((event: React.MouseEvent, node?: TreeNodeProps) => void) | undefined;
+    onSelect?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
     /**
      * Callback function for when a parent node is expanded or collapsed
      */
-    onToggle?: ((event: React.MouseEvent, node?: TreeNodeProps) => void) | undefined;
+    onToggle?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
     /**
      * Callback function for when any node in the tree is selected
      */
-    onTreeSelect?: ((event: React.MouseEvent, node?: TreeNodeProps) => void) | undefined;
+    onTreeSelect?: (event: React.MouseEvent, node?: TreeNodeProps) => void;
     /**
      * Optional prop to allow each node to have an associated icon.
      * Can be a React component class
      */
-    renderIcon?: React.ComponentType<{}> | undefined;
+    renderIcon?: ComponentType | FunctionComponent;
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * Array containing all selected node IDs in the tree
      */
-    selected?: (string | number)[] | undefined;
+    selected?: Array<string | number>;
     /**
      * Specify the value of the TreeNode
      */
-    value?: string | undefined;
-} & Omit<React.LiHTMLAttributes<HTMLLIElement>, "onSelect"> & React.RefAttributes<HTMLLIElement>>;
+    value?: string;
+    /**
+     * Optional: The URL the TreeNode is linking to
+     */
+    href?: string;
+} & Omit<React.LiHTMLAttributes<HTMLElement>, "onSelect"> & React.RefAttributes<HTMLElement>>;
 export default TreeNode;

package/es/components/TreeView/TreeNode.js

@@ -35,6 +35,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
     renderIcon: Icon,
     selected: propSelected,
     value,
+    href,
     ...rest
   } = _ref;
   // These are provided by the parent TreeView component
@@ -69,6 +70,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
         depth: depth + 1,
         disabled: disabled || node.props.disabled,
         onTreeSelect,
+        onNodeFocusEvent,
         selected,
         tabIndex: !node.props.disabled && -1 || null
       });
@@ -94,6 +96,9 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
 
     // Prevent the node from being selected
     event.stopPropagation();
+    if (href) {
+      event.preventDefault();
+    }
     if (!enableTreeviewControllable) {
       onToggle?.(event, {
         id,
@@ -121,6 +126,12 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
     }
   }
   function handleKeyDown(event) {
+    function getFocusableNode(node) {
+      if (node?.classList.contains(`${prefix}--tree-node`)) {
+        return node;
+      }
+      return node?.firstChild;
+    }
     if (disabled) {
       return;
     }
@@ -133,6 +144,9 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
         if (node.classList.contains(`${prefix}--tree-parent-node`)) {
           return node;
         }
+        if (node.classList.contains(`${prefix}--tree-node-link-parent`)) {
+          return node.firstChild;
+        }
         if (node.classList.contains(`${prefix}--tree`)) {
           return null;
         }
@@ -153,7 +167,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
          * When focus is on a leaf node or a closed parent node, move focus to
          * its parent node (unless its depth is level 1)
          */
-        const parentNode = findParentTreeNode(currentNode.current?.parentElement || null);
+        const parentNode = findParentTreeNode(href ? currentNode.current?.parentElement?.parentElement : currentNode.current?.parentElement);
         if (parentNode instanceof HTMLElement) {
           parentNode.focus();
         }
@@ -165,7 +179,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
          * When focus is on an expanded parent node, move focus to the first
          * child node
          */
-        (currentNode.current?.lastChild?.firstChild).focus();
+        getFocusableNode(href ? currentNode.current?.parentElement?.lastChild?.firstChild : currentNode.current?.lastChild?.firstChild).focus();
       } else {
         if (!enableTreeviewControllable) {
           onToggle?.(event, {
@@ -180,6 +194,9 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
     }
     if (matches(event, [Enter, Space])) {
       event.preventDefault();
+      if (href) {
+        currentNode.current?.click();
+      }
       handleClick(event);
     }
     rest?.onKeyDown?.(event);
@@ -232,9 +249,10 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
   }, [children, depth, Icon, isExpanded, enableTreeviewControllable, setExpanded]);
   const treeNodeProps = {
     ...rest,
-    ['aria-current']: isActive || undefined,
-    ['aria-selected']: disabled ? undefined : isSelected,
+    ['aria-current']: !href ? isActive || undefined : isActive ? 'page' : undefined,
+    ['aria-selected']: !href ? disabled ? undefined : isSelected : undefined,
     ['aria-disabled']: disabled,
+    ['aria-owns']: children ? `${id}-subtree` : undefined,
     className: treeNodeClasses,
     id,
     onBlur: handleFocusEvent,
@@ -244,39 +262,86 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
     role: 'treeitem'
   };
   if (!children) {
+    if (href) {
+      return /*#__PURE__*/React__default.createElement("li", {
+        role: "none"
+      }, /*#__PURE__*/React__default.createElement("a", _extends({}, treeNodeProps, {
+        ref: setRefs,
+        href: !disabled ? href : undefined
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: `${prefix}--tree-node__label`,
+        ref: currentNodeLabel
+      }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+        className: `${prefix}--tree-node__icon`
+      }), label)));
+    } else {
+      return /*#__PURE__*/React__default.createElement("li", _extends({}, treeNodeProps, {
+        ref: setRefs
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: `${prefix}--tree-node__label`,
+        ref: currentNodeLabel
+      }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+        className: `${prefix}--tree-node__icon`
+      }), label));
+    }
+  }
+  if (href) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      role: "none",
+      className: `${prefix}--tree-node-link-parent`
+    }, /*#__PURE__*/React__default.createElement("a", _extends({}, treeNodeProps, {
+      "aria-expanded": !!expanded,
+      ref: setRefs,
+      href: !disabled ? href : undefined
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--tree-node__label`,
+      ref: currentNodeLabel
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: `${prefix}--tree-parent-node__toggle`
+      // @ts-ignore
+      ,
+      disabled: disabled,
+      onClick: handleToggleClick
+    }, /*#__PURE__*/React__default.createElement(CaretDown, {
+      className: toggleClasses
+    })), /*#__PURE__*/React__default.createElement("span", {
+      className: `${prefix}--tree-node__label__details`
+    }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+      className: `${prefix}--tree-node__icon`
+    }), label))), /*#__PURE__*/React__default.createElement("ul", {
+      id: `${id}-subtree`,
+      role: "group",
+      className: cx(`${prefix}--tree-node__children`, {
+        [`${prefix}--tree-node--hidden`]: !expanded
+      })
+    }, nodesWithProps));
+  } else {
     return /*#__PURE__*/React__default.createElement("li", _extends({}, treeNodeProps, {
+      "aria-expanded": !!expanded,
       ref: setRefs
     }), /*#__PURE__*/React__default.createElement("div", {
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: `${prefix}--tree-parent-node__toggle`
+      // @ts-ignore
+      ,
+      disabled: disabled,
+      onClick: handleToggleClick
+    }, /*#__PURE__*/React__default.createElement(CaretDown, {
+      className: toggleClasses
+    })), /*#__PURE__*/React__default.createElement("span", {
+      className: `${prefix}--tree-node__label__details`
     }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label));
+    }), label)), /*#__PURE__*/React__default.createElement("ul", {
+      id: `${id}-subtree`,
+      role: "group",
+      className: cx(`${prefix}--tree-node__children`, {
+        [`${prefix}--tree-node--hidden`]: !expanded
+      })
+    }, nodesWithProps));
   }
-  return /*#__PURE__*/React__default.createElement("li", _extends({}, treeNodeProps, {
-    "aria-expanded": !!expanded,
-    ref: setRefs
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--tree-node__label`,
-    ref: currentNodeLabel
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--tree-parent-node__toggle`
-    // @ts-ignore
-    ,
-    disabled: disabled,
-    onClick: handleToggleClick
-  }, /*#__PURE__*/React__default.createElement(CaretDown, {
-    className: toggleClasses
-  })), /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--tree-node__label__details`
-  }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
-    className: `${prefix}--tree-node__icon`
-  }), label)), /*#__PURE__*/React__default.createElement("ul", {
-    role: "group",
-    className: cx(`${prefix}--tree-node__children`, {
-      [`${prefix}--tree-node--hidden`]: !expanded
-    })
-  }, nodesWithProps));
 });
 TreeNode.propTypes = {
   /**
@@ -307,7 +372,7 @@ TreeNode.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active and props.selected
+   * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active, props.selected and aria-owns
    */
   id: PropTypes.string,
   /**
@@ -349,7 +414,11 @@ TreeNode.propTypes = {
   /**
    * Specify the value of the TreeNode
    */
-  value: PropTypes.string
+  value: PropTypes.string,
+  /**
+   * Optional: The URL the TreeNode is linking to
+   */
+  href: PropTypes.string
 };
 TreeNode.displayName = 'TreeNode';
 

package/es/components/TreeView/TreeView.js

@@ -192,7 +192,7 @@ const TreeView = _ref => {
         if (node.classList.contains(`${prefix}--tree-node--disabled`) || node.classList.contains(`${prefix}--tree-node--hidden`)) {
           return NodeFilter.FILTER_REJECT;
         }
-        if (node.matches(`li.${prefix}--tree-node`)) {
+        if (node.matches(`.${prefix}--tree-node`)) {
           return NodeFilter.FILTER_ACCEPT;
         }
         return NodeFilter.FILTER_SKIP;

package/es/components/UIShell/Content.d.ts

@@ -68,33 +68,33 @@ declare const Content: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
-        "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "true" | "false" | "time" | "step" | "date" | "page" | "location" | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
-        "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
         "aria-label"?: string | undefined;
         "aria-labelledby"?: string | undefined;
@@ -107,9 +107,9 @@ declare const Content: {
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-readonly"?: (boolean | "true" | "false") | undefined;
-        "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
         "aria-required"?: (boolean | "true" | "false") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;

package/es/components/UIShell/HeaderGlobalBar.d.ts

@@ -7,5 +7,5 @@
 /**
  * Generic container for `HeaderGlobalAction` components
  */
-declare const HeaderGlobalBar: (props: import("../../types/common").ReactAttr<"div">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const HeaderGlobalBar: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement;
 export default HeaderGlobalBar;