@patternfly/react-core 4.268.2 → 5.0.0-alpha.2

package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -152,21 +152,6 @@ exports[`Button isInline 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button isLarge 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-c-button pf-m-primary pf-m-display-lg"
-    data-ouia-component-id="OUIA-Generated-Button-primary-8"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Large Button
-  </button>
-</DocumentFragment>
-`;
-
 exports[`Button isLoading 1`] = `
 <DocumentFragment>
   <button
@@ -180,22 +165,21 @@ exports[`Button isLoading 1`] = `
     <span
       class="pf-c-button__progress"
     >
-      <span
+      <svg
         aria-label="Contents"
         aria-valuetext="Loading"
         class="pf-c-spinner pf-m-md"
         role="progressbar"
+        viewBox="0 0 100 100"
       >
-        <span
-          class="pf-c-spinner__clipper"
-        />
-        <span
-          class="pf-c-spinner__lead-ball"
-        />
-        <span
-          class="pf-c-spinner__tail-ball"
+        <circle
+          class="pf-c-spinner__path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="45"
         />
-      </span>
+      </svg>
     </span>
     Loading Button
   </button>
@@ -216,22 +200,21 @@ exports[`Button isLoading icon only 1`] = `
     <span
       class="pf-c-button__progress"
     >
-      <span
+      <svg
         aria-label="Contents"
         aria-valuetext="Loading"
         class="pf-c-spinner pf-m-md"
         role="progressbar"
+        viewBox="0 0 100 100"
       >
-        <span
-          class="pf-c-spinner__clipper"
-        />
-        <span
-          class="pf-c-spinner__lead-ball"
+        <circle
+          class="pf-c-spinner__path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="45"
         />
-        <span
-          class="pf-c-spinner__tail-ball"
-        />
-      </span>
+      </svg>
     </span>
     <div>
       ICON
@@ -254,43 +237,27 @@ exports[`Button isLoading inline link 1`] = `
     <span
       class="pf-c-button__progress"
     >
-      <span
+      <svg
         aria-label="Contents"
         aria-valuetext="Loading"
         class="pf-c-spinner pf-m-inline"
         role="progressbar"
+        viewBox="0 0 100 100"
       >
-        <span
-          class="pf-c-spinner__clipper"
-        />
-        <span
-          class="pf-c-spinner__lead-ball"
+        <circle
+          class="pf-c-spinner__path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="45"
         />
-        <span
-          class="pf-c-spinner__tail-ball"
-        />
-      </span>
+      </svg>
     </span>
     Loading Button
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button isSmall 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-c-button pf-m-primary pf-m-small"
-    data-ouia-component-id="OUIA-Generated-Button-primary-7"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Small Button
-  </button>
-</DocumentFragment>
-`;
-
 exports[`Button link button 1`] = `
 <DocumentFragment>
   <button
@@ -387,6 +354,36 @@ exports[`Button secondary button 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Button size large 1`] = `
+<DocumentFragment>
+  <button
+    aria-disabled="false"
+    class="pf-c-button pf-m-primary pf-m-display-lg"
+    data-ouia-component-id="OUIA-Generated-Button-primary-8"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    type="button"
+  >
+    Large Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button size small 1`] = `
+<DocumentFragment>
+  <button
+    aria-disabled="false"
+    class="pf-c-button pf-m-primary pf-m-small"
+    data-ouia-component-id="OUIA-Generated-Button-primary-7"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    type="button"
+  >
+    Small Button
+  </button>
+</DocumentFragment>
+`;
+
 exports[`Button tertiary button 1`] = `
 <DocumentFragment>
   <button

package/src/components/Button/examples/Button.md

@@ -43,14 +43,14 @@ To indicate that an action is currently unavailable, all button variations can b
 
 ### Small buttons
 
-To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `isSmall` property.
+To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `"sm"` value for the `size` property.
 
 ```ts file="./ButtonSmall.tsx"
 ```
 
 ### Call to action (CTA) buttons
 
-CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `isLarge` property. 
+CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `"lg"` value for the `size` property. 
 
 ```ts file="./ButtonCallToAction.tsx"
 ```

package/src/components/Button/examples/ButtonCallToAction.tsx

@@ -4,16 +4,16 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 
 export const ButtonCallToAction: React.FunctionComponent = () => (
   <React.Fragment>
-    <Button variant="primary" isLarge>
+    <Button variant="primary" size="lg">
       Call to action
     </Button>{' '}
-    <Button variant="secondary" isLarge>
+    <Button variant="secondary" size="lg">
       Call to action
     </Button>{' '}
-    <Button variant="tertiary" isLarge>
+    <Button variant="tertiary" size="lg">
       Call to action
     </Button>{' '}
-    <Button variant="link" isLarge>
+    <Button variant="link" size="lg">
       Call to action <ArrowRightIcon />
     </Button>
     <br />

package/src/components/Button/examples/ButtonSmall.tsx

@@ -3,19 +3,19 @@ import { Button } from '@patternfly/react-core';
 
 export const ButtonSmall: React.FunctionComponent = () => (
   <React.Fragment>
-    <Button variant="primary" isSmall>
+    <Button variant="primary" size="sm">
       Primary
     </Button>{' '}
-    <Button variant="secondary" isSmall>
+    <Button variant="secondary" size="sm">
       Secondary
     </Button>{' '}
-    <Button variant="tertiary" isSmall>
+    <Button variant="tertiary" size="sm">
       Tertiary
     </Button>{' '}
-    <Button variant="danger" isSmall>
+    <Button variant="danger" size="sm">
       Danger
     </Button>{' '}
-    <Button variant="warning" isSmall>
+    <Button variant="warning" size="sm">
       Warning
     </Button>
     <br />

package/src/components/Card/Card.tsx

@@ -12,8 +12,6 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   className?: string;
   /** Sets the base component to render. defaults to article */
   component?: keyof JSX.IntrinsicElements;
-  /** @deprecated to make a card hoverable, use isSelectable or isSelectableRaised. */
-  isHoverable?: boolean;
   /** Modifies the card to include compact styling. Should not be used with isLarge. */
   isCompact?: boolean;
   /** Modifies the card to include selectable styling */
@@ -70,7 +68,6 @@ export const Card: React.FunctionComponent<CardProps> = ({
   id = '',
   className = '',
   component = 'article',
-  isHoverable = false,
   isCompact = false,
   isSelectable = false,
   isSelectableRaised = false,
@@ -107,7 +104,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
     if (isSelectableRaised) {
       return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
     }
-    if (isSelectable || isHoverable) {
+    if (isSelectable) {
       return css(styles.modifiers.selectable, isSelected && styles.modifiers.selected);
     }
     return '';

package/src/components/Card/__tests__/Card.test.tsx

@@ -37,11 +37,6 @@ describe('Card', () => {
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 
-  test('card with isHoverable applied ', () => {
-    const { asFragment } = render(<Card isHoverable />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   test('card with isCompact applied ', () => {
     const { asFragment } = render(<Card isCompact />);
     expect(asFragment()).toMatchSnapshot();

package/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap

@@ -4,18 +4,6 @@ exports[`Card card with isCompact applied  1`] = `
 <DocumentFragment>
   <article
     class="pf-c-card pf-m-compact"
-    data-ouia-component-id="OUIA-Generated-Card-7"
-    data-ouia-component-type="PF4/Card"
-    data-ouia-safe="true"
-    id=""
-  />
-</DocumentFragment>
-`;
-
-exports[`Card card with isHoverable applied  1`] = `
-<DocumentFragment>
-  <article
-    class="pf-c-card pf-m-selectable"
     data-ouia-component-id="OUIA-Generated-Card-6"
     data-ouia-component-type="PF4/Card"
     data-ouia-safe="true"

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
-import { PopoverPosition } from '../Popover';
 import { TooltipPosition } from '../Tooltip';
 import { TextInput } from '../TextInput';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
@@ -48,9 +47,8 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   isBlock?: boolean;
   /** Adds Clipboard Copy variant styles. */
   variant?: typeof ClipboardCopyVariant | 'inline' | 'expansion' | 'inline-compact';
-  /** Copy button popover position. */
+  /** Copy button tooltip position. */
   position?:
-    | PopoverPosition
     | TooltipPosition
     | 'auto'
     | 'top'
@@ -65,8 +63,6 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** Maximum width of the tooltip (default 150px). */
   maxWidth?: string;
   /** Delay in ms before the tooltip disappears. */
@@ -118,7 +114,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     isExpanded: false,
     isCode: false,
     variant: 'inline',
-    position: PopoverPosition.top,
+    position: TooltipPosition.top,
     maxWidth: '150px',
     exitDelay: 1500,
     entryDelay: 300,
@@ -127,8 +123,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     textAriaLabel: 'Copyable input',
     toggleAriaLabel: 'Show content',
     additionalActions: null,
-    ouiaSafe: true,
-    removeFindDomNode: false
+    ouiaSafe: true
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -180,7 +175,6 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       additionalActions,
       ouiaId,
       ouiaSafe,
-      removeFindDomNode,
       ...divProps
     } = this.props;
     const textIdPrefix = 'text-input-';
@@ -273,7 +267,6 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                       this.setState({ copied: true });
                     }}
                     onTooltipHidden={() => this.setState({ copied: false })}
-                    removeFindDomNode={removeFindDomNode}
                   >
                     {this.state.copied ? clickTip : hoverTip}
                   </ClipboardCopyButton>

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import { Button } from '../Button';
 import { Tooltip, TooltipPosition } from '../Tooltip';
-import { PopoverPosition } from '../Popover';
 
 export interface ClipboardCopyButtonProps
   extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
@@ -25,7 +24,6 @@ export interface ClipboardCopyButtonProps
   /** Position of the copy button tooltip */
   position?:
     | TooltipPosition
-    | PopoverPosition
     | 'auto'
     | 'top'
     | 'bottom'
@@ -39,8 +37,6 @@ export interface ClipboardCopyButtonProps
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** Aria-label for the copy button */
   'aria-label'?: string;
   /** Variant of the copy button */
@@ -61,7 +57,6 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   children,
   variant = 'control',
   onTooltipHidden = () => {},
-  removeFindDomNode = false,
   ...props
 }: ClipboardCopyButtonProps) => (
   <Tooltip
@@ -74,7 +69,6 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
     aria="none"
     content={<div>{children}</div>}
     onTooltipHidden={onTooltipHidden}
-    removeFindDomNode={removeFindDomNode}
   >
     <Button
       type="button"

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -21,31 +21,35 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
         type="text"
         value="[object Object]"
       />
-      <button
-        aria-disabled="false"
-        aria-label="'Copy to clipboard'"
-        aria-labelledby="copy-button-0 text-input-0"
-        class="pf-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-1"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        id="copy-button-0"
-        type="button"
+      <div
+        style="display: contents;"
       >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 448 512"
-          width="1em"
+        <button
+          aria-disabled="false"
+          aria-label="'Copy to clipboard'"
+          aria-labelledby="copy-button-0 text-input-0"
+          class="pf-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          id="copy-button-0"
+          type="button"
         >
-          <path
-            d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-          />
-        </svg>
-      </button>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -2,30 +2,34 @@
 
 exports[`copy button render 1`] = `
 <DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="click this button to copy text"
-    aria-labelledby="my-id my-text-id"
-    class="pf-c-button pf-m-control fancy-copy-button"
-    data-ouia-component-id="OUIA-Generated-Button-control-1"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    id="my-id"
-    type="button"
+  <div
+    style="display: contents;"
   >
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      style="vertical-align: -0.125em;"
-      viewBox="0 0 448 512"
-      width="1em"
+    <button
+      aria-disabled="false"
+      aria-label="click this button to copy text"
+      aria-labelledby="my-id my-text-id"
+      class="pf-c-button pf-m-control fancy-copy-button"
+      data-ouia-component-id="OUIA-Generated-Button-control-1"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      id="my-id"
+      type="button"
     >
-      <path
-        d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-      />
-    </svg>
-  </button>
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 448 512"
+        width="1em"
+      >
+        <path
+          d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+        />
+      </svg>
+    </button>
+  </div>
 </DocumentFragment>
 `;

package/src/components/ContextSelector/ContextSelector.tsx

@@ -1,20 +1,15 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
 import { css } from '@patternfly/react-styles';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import { ContextSelectorToggle } from './ContextSelectorToggle';
 import { ContextSelectorMenuList } from './ContextSelectorMenuList';
 import { ContextSelectorContext } from './contextSelectorConstants';
-import { Button, ButtonVariant } from '../Button';
-import { TextInput } from '../TextInput';
-import { InputGroup } from '../InputGroup';
-import { KeyTypes } from '../../helpers/constants';
 import { FocusTrap, getUniqueId } from '../../helpers';
-import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { Popper } from '../../helpers/Popper/Popper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { SearchInput } from '../SearchInput';
 
-export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>, OUIAProps {
+export interface ContextSelectorProps extends OUIAProps {
   /** content rendered inside the Context Selector */
   children?: React.ReactNode;
   /** Classes applied to root element of Context Selector */
@@ -66,8 +61,6 @@ export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuApp
   isFlipEnabled?: boolean;
   /** Id of the context selector */
   id?: string;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** z-index of the context selector when menuAppendTo is not inline. */
   zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -98,7 +91,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     isPlain: false,
     isText: false,
     isFlipEnabled: true,
-    removeFindDomNode: false,
     zIndex: 9999
   };
   constructor(props: ContextSelectorProps) {
@@ -111,12 +103,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
   parentRef: React.RefObject<HTMLDivElement> = React.createRef();
   popperRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-  onEnterPressed = (event: any) => {
-    if (event.key === KeyTypes.Enter) {
-      this.props.onSearchButtonClick();
-    }
-  };
-
   render() {
     const {
       children,
@@ -141,7 +127,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
       disableFocusTrap,
       isFlipEnabled,
       id,
-      removeFindDomNode,
       zIndex,
       ...props
     } = this.props;
@@ -159,23 +144,16 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
             focusTrapOptions={{ clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }}
           >
             <div className={css(styles.contextSelectorMenuSearch)}>
-              <InputGroup>
-                <TextInput
-                  value={searchInputValue}
-                  type="search"
-                  placeholder={searchInputPlaceholder}
-                  onChange={onSearchInputChange}
-                  onKeyPress={this.onEnterPressed}
-                  aria-label={searchButtonAriaLabel}
-                />
-                <Button
-                  variant={ButtonVariant.control}
-                  aria-label={searchButtonAriaLabel}
-                  onClick={onSearchButtonClick}
-                >
-                  <SearchIcon aria-hidden="true" />
-                </Button>
-              </InputGroup>
+              <SearchInput
+                type="search"
+                submitSearchButtonLabel={searchButtonAriaLabel}
+                placeholder={searchInputPlaceholder}
+                onChange={onSearchInputChange}
+                onSearch={(value, event, _) => {
+                  onSearchButtonClick(event);
+                }}
+                value={searchInputValue}
+              />
             </div>
             <ContextSelectorContext.Provider value={{ onSelect }}>
               <ContextSelectorMenuList isOpen={isOpen}>{children}</ContextSelectorMenuList>
@@ -238,7 +216,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
         popper={popperContainer}
         appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
         isVisible={isOpen}
-        removeFindDomNode={removeFindDomNode}
         zIndex={zIndex}
       />
     );

package/src/components/ContextSelector/__tests__/ContextSelector.test.tsx

@@ -33,7 +33,7 @@ describe('ContextSelector', () => {
     const consoleError = jest.spyOn(console, 'error');
     const { asFragment } = render(
       <React.StrictMode>
-        <ContextSelector removeFindDomNode isOpen id="render">
+        <ContextSelector isOpen id="render">
           {items}
         </ContextSelector>
       </React.StrictMode>