@carbon/react 1.76.0 → 1.77.0

package/lib/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/lib/components/Tooltip/Tooltip.js

@@ -43,6 +43,8 @@ function Tooltip(_ref) {
     leaveDelayMs = 300,
     defaultOpen = false,
     closeOnActivation = false,
+    dropShadow = false,
+    highContrast = true,
     ...rest
   } = _ref;
   const tooltipRef = React.useRef(null);
@@ -164,8 +166,8 @@ function Tooltip(_ref) {
     React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({}, rest, {
       align: align,
       className: cx__default["default"](`${prefix}--tooltip`, customClassName),
-      dropShadow: false,
-      highContrast: true,
+      dropShadow: dropShadow,
+      highContrast: highContrast,
       onKeyDown: onKeyDown,
       onMouseLeave: onMouseLeave,
       open: open
@@ -236,10 +238,18 @@ Tooltip.propTypes = {
    * description will not be used
    */
   description: PropTypes__default["default"].node,
+  /**
+   * Specify whether a drop shadow should be rendered
+   */
+  dropShadow: PropTypes__default["default"].bool,
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */
   enterDelayMs: PropTypes__default["default"].number,
+  /**
+   * Render the component using the high-contrast theme
+   */
+  highContrast: PropTypes__default["default"].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/lib/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/lib/components/TreeView/TreeNode.js

@@ -45,6 +45,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
     renderIcon: Icon,
     selected: propSelected,
     value,
+    href,
     ...rest
   } = _ref;
   // These are provided by the parent TreeView component
@@ -79,6 +80,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
         depth: depth + 1,
         disabled: disabled || node.props.disabled,
         onTreeSelect,
+        onNodeFocusEvent,
         selected,
         tabIndex: !node.props.disabled && -1 || null
       });
@@ -104,6 +106,9 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
 
     // Prevent the node from being selected
     event.stopPropagation();
+    if (href) {
+      event.preventDefault();
+    }
     if (!enableTreeviewControllable) {
       onToggle?.(event, {
         id,
@@ -131,6 +136,12 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
     }
   }
   function handleKeyDown(event) {
+    function getFocusableNode(node) {
+      if (node?.classList.contains(`${prefix}--tree-node`)) {
+        return node;
+      }
+      return node?.firstChild;
+    }
     if (disabled) {
       return;
     }
@@ -143,6 +154,9 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
         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;
         }
@@ -163,7 +177,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
          * 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();
         }
@@ -175,7 +189,7 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
          * 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, {
@@ -190,6 +204,9 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
     }
     if (match.matches(event, [keys.Enter, keys.Space])) {
       event.preventDefault();
+      if (href) {
+        currentNode.current?.click();
+      }
       handleClick(event);
     }
     rest?.onKeyDown?.(event);
@@ -242,9 +259,10 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
   }, [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,
@@ -254,39 +272,86 @@ const TreeNode = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwar
     role: 'treeitem'
   };
   if (!children) {
+    if (href) {
+      return /*#__PURE__*/React__default["default"].createElement("li", {
+        role: "none"
+      }, /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
+        ref: setRefs,
+        href: !disabled ? href : undefined
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: `${prefix}--tree-node__label`,
+        ref: currentNodeLabel
+      }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        className: `${prefix}--tree-node__icon`
+      }), label)));
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
+        ref: setRefs
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: `${prefix}--tree-node__label`,
+        ref: currentNodeLabel
+      }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        className: `${prefix}--tree-node__icon`
+      }), label));
+    }
+  }
+  if (href) {
+    return /*#__PURE__*/React__default["default"].createElement("li", {
+      role: "none",
+      className: `${prefix}--tree-node-link-parent`
+    }, /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
+      "aria-expanded": !!expanded,
+      ref: setRefs,
+      href: !disabled ? href : undefined
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `${prefix}--tree-node__label`,
+      ref: currentNodeLabel
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: `${prefix}--tree-parent-node__toggle`
+      // @ts-ignore
+      ,
+      disabled: disabled,
+      onClick: handleToggleClick
+    }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
+      className: toggleClasses
+    })), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: `${prefix}--tree-node__label__details`
+    }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+      className: `${prefix}--tree-node__icon`
+    }), label))), /*#__PURE__*/React__default["default"].createElement("ul", {
+      id: `${id}-subtree`,
+      role: "group",
+      className: cx__default["default"](`${prefix}--tree-node__children`, {
+        [`${prefix}--tree-node--hidden`]: !expanded
+      })
+    }, nodesWithProps));
+  } else {
     return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
+      "aria-expanded": !!expanded,
       ref: setRefs
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: `${prefix}--tree-parent-node__toggle`
+      // @ts-ignore
+      ,
+      disabled: disabled,
+      onClick: handleToggleClick
+    }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
+      className: toggleClasses
+    })), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: `${prefix}--tree-node__label__details`
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
       className: `${prefix}--tree-node__icon`
-    }), label));
+    }), label)), /*#__PURE__*/React__default["default"].createElement("ul", {
+      id: `${id}-subtree`,
+      role: "group",
+      className: cx__default["default"](`${prefix}--tree-node__children`, {
+        [`${prefix}--tree-node--hidden`]: !expanded
+      })
+    }, nodesWithProps));
   }
-  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
-    "aria-expanded": !!expanded,
-    ref: setRefs
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--tree-node__label`,
-    ref: currentNodeLabel
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--tree-parent-node__toggle`
-    // @ts-ignore
-    ,
-    disabled: disabled,
-    onClick: handleToggleClick
-  }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
-    className: toggleClasses
-  })), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--tree-node__label__details`
-  }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
-    className: `${prefix}--tree-node__icon`
-  }), label)), /*#__PURE__*/React__default["default"].createElement("ul", {
-    role: "group",
-    className: cx__default["default"](`${prefix}--tree-node__children`, {
-      [`${prefix}--tree-node--hidden`]: !expanded
-    })
-  }, nodesWithProps));
 });
 TreeNode.propTypes = {
   /**
@@ -317,7 +382,7 @@ TreeNode.propTypes = {
    */
   disabled: PropTypes__default["default"].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__default["default"].string,
   /**
@@ -359,7 +424,11 @@ TreeNode.propTypes = {
   /**
    * Specify the value of the TreeNode
    */
-  value: PropTypes__default["default"].string
+  value: PropTypes__default["default"].string,
+  /**
+   * Optional: The URL the TreeNode is linking to
+   */
+  href: PropTypes__default["default"].string
 };
 TreeNode.displayName = 'TreeNode';
 

package/lib/components/TreeView/TreeView.js

@@ -202,7 +202,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/lib/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/lib/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;

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

@@ -121,54 +121,98 @@ declare class HeaderMenu extends React.Component<HeaderMenuProps, HeaderMenuStat
         length: 1;
         toString(): string;
         toLocaleString(): string;
+        toLocaleString(locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string;
         pop(): string | undefined;
         push(...items: string[]): number;
         concat(...items: ConcatArray<string>[]): string[];
         concat(...items: (string | ConcatArray<string>)[]): string[];
-        join(separator?: string | undefined): string;
+        join(separator?: string): string;
         reverse(): string[];
         shift(): string | undefined;
-        slice(start?: number | undefined, end?: number | undefined): string[];
+        slice(start?: number, end?: number): string[];
         sort(compareFn?: ((a: string, b: string) => number) | undefined): [key: string];
-        splice(start: number, deleteCount?: number | undefined): string[];
+        splice(start: number, deleteCount?: number): 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;
+        indexOf(searchElement: string, fromIndex?: number): number;
+        lastIndexOf(searchElement: string, fromIndex?: number): 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<S extends string>(predicate: (value: string, index: number, array: string[]) => value is S, thisArg?: any): S[];
         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;
+        reduce<U>(callbackfn: (previousValue: U, currentValue: string, currentIndex: number, array: string[]) => U, initialValue: U): U;
         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;
+        reduceRight<U>(callbackfn: (previousValue: U, currentValue: string, currentIndex: number, array: string[]) => U, initialValue: U): U;
+        find<S extends string>(predicate: (value: string, index: number, obj: string[]) => value is S, thisArg?: any): S | 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[];
+        fill(value: string, start?: number, end?: number): [key: string];
+        copyWithin(target: number, start: number, end?: number): [key: string];
+        entries(): ArrayIterator<[number, string]>;
+        keys(): ArrayIterator<number>;
+        values(): ArrayIterator<string>;
+        includes(searchElement: string, fromIndex?: number): boolean;
+        flatMap<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined): U[];
         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;
+        findLast<S extends string>(predicate: (value: string, index: number, array: string[]) => value is S, thisArg?: any): S | undefined;
+        findLast(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string | undefined;
+        findLastIndex(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): number;
+        toReversed(): string[];
+        toSorted(compareFn?: ((a: string, b: string) => number) | undefined): string[];
+        toSpliced(start: number, deleteCount: number, ...items: string[]): string[];
+        toSpliced(start: number, deleteCount?: number): string[];
+        with(index: number, value: string): string[];
+        [Symbol.iterator](): ArrayIterator<string>;
+        [Symbol.unscopables]: {
+            [x: number]: boolean | undefined;
+            length?: boolean | undefined;
+            toString?: boolean | undefined;
+            toLocaleString?: boolean | undefined;
+            pop?: boolean | undefined;
+            push?: boolean | undefined;
+            concat?: boolean | undefined;
+            join?: boolean | undefined;
+            reverse?: boolean | undefined;
+            shift?: boolean | undefined;
+            slice?: boolean | undefined;
+            sort?: boolean | undefined;
+            splice?: boolean | undefined;
+            unshift?: boolean | undefined;
+            indexOf?: boolean | undefined;
+            lastIndexOf?: boolean | undefined;
+            every?: boolean | undefined;
+            some?: boolean | undefined;
+            forEach?: boolean | undefined;
+            map?: boolean | undefined;
+            filter?: boolean | undefined;
+            reduce?: boolean | undefined;
+            reduceRight?: boolean | undefined;
+            find?: boolean | undefined;
+            findIndex?: boolean | undefined;
+            fill?: boolean | undefined;
+            copyWithin?: boolean | undefined;
+            entries?: boolean | undefined;
+            keys?: boolean | undefined;
+            values?: boolean | undefined;
+            includes?: boolean | undefined;
+            flatMap?: boolean | undefined;
+            flat?: boolean | undefined;
+            at?: boolean | undefined;
+            findLast?: boolean | undefined;
+            findLastIndex?: boolean | undefined;
+            toReversed?: boolean | undefined;
+            toSorted?: boolean | undefined;
+            toSpliced?: boolean | undefined;
+            with?: boolean | undefined;
+            [Symbol.iterator]?: boolean | undefined;
+            readonly [Symbol.unscopables]?: boolean | undefined;
         };
     };
     static contextType: React.Context<string>;