@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/src/components/Select/Select.tsx

@@ -33,7 +33,7 @@ import {
 } from '../../helpers';
 import { KeyTypes } from '../../helpers/constants';
 import { Divider } from '../Divider';
-import { ToggleMenuBaseProps, Popper } from '../../helpers/Popper/Popper';
+import { Popper } from '../../helpers/Popper/Popper';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites';
 import { ValidatedOptions } from '../../helpers/constants';
 import { findTabbableElements } from '../../helpers/util';
@@ -48,8 +48,7 @@ export interface SelectViewMoreObject {
   onClick: (event: React.MouseEvent | React.ChangeEvent) => void;
 }
 export interface SelectProps
-  extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>,
-    Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
+  extends Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
     OUIAProps {
   /** Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[] */
   children?: React.ReactElement[];
@@ -186,8 +185,6 @@ export interface SelectProps
    * appended inline, e.g. `menuAppendTo="parent"`
    */
   isFlipEnabled?: boolean;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** z-index of the select menu when menuAppendTo is not inline. */
   zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -271,7 +268,6 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     isCreateSelectOptionObject: false,
     shouldResetOnSelect: true,
     isFlipEnabled: true,
-    removeFindDomNode: false,
     zIndex: 9999
   };
 
@@ -1039,7 +1035,6 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       isCreateOptionOnTop,
       shouldResetOnSelect,
       isFlipEnabled,
-      removeFindDomNode,
       zIndex,
       ...props
     } = this.props;
@@ -1485,7 +1480,6 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                 direction={direction}
                 appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
                 isVisible={isOpen}
-                removeFindDomNode={removeFindDomNode}
                 zIndex={zIndex}
               />
             )}

package/src/components/Select/SelectMenu.tsx

@@ -40,6 +40,7 @@ export interface SelectMenuProps extends Omit<React.HTMLProps<HTMLElement>, 'che
   keyHandler?: (index: number, innerIndex: number, position: string) => void;
   /** Flag indicating select has an inline text input for filtering */
   hasInlineFilter?: boolean;
+  /** @hide forwarded ref */
   innerRef?: any;
   /** Content rendered in the footer of the select menu */
   footer?: React.ReactNode;

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

@@ -86,14 +86,7 @@ describe('Select', () => {
       const consoleError = jest.spyOn(console, 'error');
       const { asFragment } = render(
         <React.StrictMode>
-          <Select
-            removeFindDomNode
-            variant={SelectVariant.single}
-            onSelect={jest.fn()}
-            onToggle={jest.fn()}
-            isOpen
-            ouiaId="test-id"
-          >
+          <Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isOpen ouiaId="test-id">
             {selectOptions}
           </Select>
         </React.StrictMode>

package/src/components/SimpleList/SimpleListItem.tsx

@@ -18,8 +18,6 @@ export interface SimpleListItemProps {
   componentProps?: any;
   /** Indicates if the link is current/highlighted */
   isActive?: boolean;
-  /** @deprecated please use isActive instead */
-  isCurrent?: boolean;
   /** OnClick callback for the SimpleList item */
   onClick?: (event: React.MouseEvent | React.ChangeEvent) => void;
   /** Type of button SimpleList item */
@@ -35,7 +33,6 @@ export class SimpleListItem extends React.Component<SimpleListItemProps> {
     children: null,
     className: '',
     isActive: false,
-    isCurrent: false,
     component: 'button',
     componentClassName: '',
     type: 'button',
@@ -46,7 +43,6 @@ export class SimpleListItem extends React.Component<SimpleListItemProps> {
   render() {
     const {
       children,
-      isCurrent,
       isActive,
       className,
       component: Component,
@@ -64,7 +60,7 @@ export class SimpleListItem extends React.Component<SimpleListItemProps> {
         {({ currentRef, updateCurrentRef, isControlled }) => {
           const isButton = Component === 'button';
           const isCurrentItem =
-            this.ref && currentRef && isControlled ? currentRef.current === this.ref.current : isActive || isCurrent;
+            this.ref && currentRef && isControlled ? currentRef.current === this.ref.current : isActive;
 
           const additionalComponentProps = isButton
             ? {

package/src/components/Skeleton/examples/Skeleton.md

@@ -9,118 +9,25 @@ propComponents: ['Skeleton']
 
 ### Default
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<Skeleton screenreaderText="Loading contents" />;
+```ts file="./SkeletonDefault.tsx"
 ```
 
 ### Percentage widths
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Skeleton width="25%" screenreaderText="Loading contents" />
-  <br />
-  <Skeleton width="33%" />
-  <br />
-  <Skeleton width="50%" />
-  <br />
-  <Skeleton width="66%" />
-  <br />
-  <Skeleton width="75%" />
-  <br />
-  <Skeleton />
-</React.Fragment>;
+```ts file="./SkeletonPercentageWidth.tsx"
 ```
 
 ### Percentage heights
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-  <Skeleton height="25%" width="15%" screenreaderText="Loading contents" />
-  <Skeleton height="33%" width="15%" />
-  <Skeleton height="50%" width="15%" />
-  <Skeleton height="66%" width="15%" />
-  <Skeleton height="75%" width="15%" />
-  <Skeleton height="100%" width="15%" />
-</div>;
+```ts file="./SkeletonPercentageHeight.tsx"
 ```
 
 ### Text modifiers
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  --pf-global--FontSize--4xl
-  <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
-  <br />
-  --pf-global--FontSize--3xl
-  <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
-  <br />
-  --pf-global--FontSize--2xl
-  <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
-  <br />
-  --pf-global--FontSize--xl
-  <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
-  <br />
-  --pf-global--FontSize--lg
-  <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
-  <br />
-  --pf-global--FontSize--md
-  <Skeleton fontSize="md" screenreaderText="Loading font size md" />
-  <br />
-  --pf-global--FontSize--sm
-  <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
-</React.Fragment>;
+```ts file="./SkeletonText.tsx"
 ```
 
 ### Shapes
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  Small circle
-  <Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
-  <br />
-  Medium circle
-  <Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
-  <br />
-  Large circle
-  <Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
-  <br />
-  Small square
-  <Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
-  <br />
-  Medium square
-  <Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
-  <br />
-  Large square
-  <Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
-  <br />
-  Small rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
-  </div>
-  <br />
-  Medium rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
-  </div>
-  <br />
-  Large rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
-  </div>
-</React.Fragment>;
+```ts file="./SkeletonShapes.tsx"
 ```

package/src/components/Skeleton/examples/SkeletonDefault.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading contents" />;

package/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonPercentageHeight: React.FunctionComponent = () => (
+  <div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+    <Skeleton height="25%" width="15%" screenreaderText="Loaded 25% of content" />
+    <Skeleton height="33%" width="15%" screenreaderText="Loaded 33% of content" />
+    <Skeleton height="50%" width="15%" screenreaderText="Loaded 50% of content" />
+    <Skeleton height="66%" width="15%" screenreaderText="Loaded 66% of content" />
+    <Skeleton height="75%" width="15%" screenreaderText="Loaded 75% of content" />
+    <Skeleton height="100%" width="15%" screenreaderText="Loaded 100% of content" />
+  </div>
+);

package/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonPercentageWidth: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+    <br />
+    <Skeleton width="33%" screenreaderText="Loaded 33% of content" />
+    <br />
+    <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+    <br />
+    <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
+    <br />
+    <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
+    <br />
+    <Skeleton />
+  </React.Fragment>
+);

package/src/components/Skeleton/examples/SkeletonShapes.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonShapes: React.FunctionComponent = () => (
+  <React.Fragment>
+    Small circle
+    <Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
+    <br />
+    Medium circle
+    <Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
+    <br />
+    Large circle
+    <Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
+    <br />
+    Small square
+    <Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
+    <br />
+    Medium square
+    <Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
+    <br />
+    Large square
+    <Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
+    <br />
+    Small rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
+    </div>
+    <br />
+    Medium rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
+    </div>
+    <br />
+    Large rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
+    </div>
+  </React.Fragment>
+);

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonText: React.FunctionComponent = () => (
+  <React.Fragment>
+    --pf-global--FontSize--4xl
+    <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
+    <br />
+    --pf-global--FontSize--3xl
+    <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
+    <br />
+    --pf-global--FontSize--2xl
+    <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
+    <br />
+    --pf-global--FontSize--xl
+    <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
+    <br />
+    --pf-global--FontSize--lg
+    <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
+    <br />
+    --pf-global--FontSize--md
+    <Skeleton fontSize="md" screenreaderText="Loading font size md" />
+    <br />
+    --pf-global--FontSize--sm
+    <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
+  </React.Fragment>
+);

package/src/components/Slider/Slider.tsx

@@ -419,6 +419,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
             {buildSteps()}
           </div>
         )}
+        {isInputVisible && inputPosition === 'aboveThumb' && (
+          <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
+        )}
         {hasTooltipOverThumb ? (
           <Tooltip entryDelay={0} content={findAriaTextValue()}>
             {thumbComponent}
@@ -426,9 +429,6 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
         ) : (
           thumbComponent
         )}
-        {isInputVisible && inputPosition === 'aboveThumb' && (
-          <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
-        )}
       </div>
       {isInputVisible && inputPosition === 'right' && <div className={css(styles.sliderValue)}>{displayInput()}</div>}
       {rightActions && <div className={css(styles.sliderActions)}>{rightActions}</div>}

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -475,17 +475,6 @@ exports[`slider renders slider with input above thumb 1`] = `
           </div>
         </div>
       </div>
-      <div
-        aria-disabled="false"
-        aria-label="Value"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="50"
-        aria-valuetext="50"
-        class="pf-c-slider__thumb"
-        role="slider"
-        tabindex="0"
-      />
       <div
         class="pf-c-slider__value pf-m-floating"
       >
@@ -509,6 +498,17 @@ exports[`slider renders slider with input above thumb 1`] = `
           </span>
         </div>
       </div>
+      <div
+        aria-disabled="false"
+        aria-label="Value"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        aria-valuetext="50"
+        class="pf-c-slider__thumb"
+        role="slider"
+        tabindex="0"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -639,16 +639,20 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
         </div>
       </div>
       <div
-        aria-disabled="false"
-        aria-label="Value"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="50"
-        aria-valuetext="50"
-        class="pf-c-slider__thumb"
-        role="slider"
-        tabindex="0"
-      />
+        style="display: contents;"
+      >
+        <div
+          aria-disabled="false"
+          aria-label="Value"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="50"
+          aria-valuetext="50"
+          class="pf-c-slider__thumb"
+          role="slider"
+          tabindex="0"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/src/components/Spinner/Spinner.tsx

@@ -9,15 +9,13 @@ export enum spinnerSize {
   xl = 'xl'
 }
 
-export interface SpinnerProps extends Omit<React.HTMLProps<HTMLSpanElement>, 'size'> {
+export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
   /** Additional classes added to the Spinner. */
   className?: string;
   /** Size variant of progress. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
   /** Text describing that current loading status or progress */
   'aria-valuetext'?: string;
-  /** Whether to use an SVG (new) rather than a span (old) */
-  isSVG?: boolean;
   /** Diameter of spinner set as CSS variable */
   diameter?: string;
   /** @beta Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop. */
@@ -33,37 +31,24 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
   className = '',
   size = 'xl',
   'aria-valuetext': ariaValueText = 'Loading...',
-  isSVG = false,
   diameter,
   isInline = false,
   'aria-label': ariaLabel,
   'aria-labelledBy': ariaLabelledBy,
   ...props
-}: SpinnerProps) => {
-  const Component = isSVG ? 'svg' : ('span' as any);
-
-  return (
-    <Component
-      className={css(styles.spinner, isInline ? styles.modifiers.inline : styles.modifiers[size], className)}
-      role="progressbar"
-      aria-valuetext={ariaValueText}
-      {...(isSVG && { viewBox: '0 0 100 100' })}
-      {...(diameter && { style: { '--pf-c-spinner--diameter': diameter } })}
-      {...(ariaLabel && { 'aria-label': ariaLabel })}
-      {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })}
-      {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })}
-      {...props}
-    >
-      {isSVG ? (
-        <circle className={styles.spinnerPath} cx="50" cy="50" r="45" fill="none" />
-      ) : (
-        <React.Fragment>
-          <span className={css(styles.spinnerClipper)} />
-          <span className={css(styles.spinnerLeadBall)} />
-          <span className={css(styles.spinnerTailBall)} />
-        </React.Fragment>
-      )}
-    </Component>
-  );
-};
+}: SpinnerProps) => (
+  <svg
+    className={css(styles.spinner, isInline ? styles.modifiers.inline : styles.modifiers[size], className)}
+    role="progressbar"
+    aria-valuetext={ariaValueText}
+    viewBox="0 0 100 100"
+    {...(diameter && { style: { ['--pf-c-spinner--diameter']: diameter } as React.CSSProperties })}
+    {...(ariaLabel && { 'aria-label': ariaLabel })}
+    {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })}
+    {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })}
+    {...props}
+  >
+    <circle className={styles.spinnerPath} cx="50" cy="50" r="45" fill="none" />
+  </svg>
+);
 Spinner.displayName = 'Spinner';

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

@@ -25,4 +25,4 @@ test('large spinner', () => {
 test('extra large spinner', () => {
   const { asFragment } = render(<Spinner size="xl" />);
   expect(asFragment()).toMatchSnapshot();
-});
+});

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

@@ -2,105 +2,100 @@
 
 exports[`extra large spinner 1`] = `
 <DocumentFragment>
-  <span
+  <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
     class="pf-c-spinner pf-m-xl"
     role="progressbar"
+    viewBox="0 0 100 100"
   >
-    <span
-      class="pf-c-spinner__clipper"
+    <circle
+      class="pf-c-spinner__path"
+      cx="50"
+      cy="50"
+      fill="none"
+      r="45"
     />
-    <span
-      class="pf-c-spinner__lead-ball"
-    />
-    <span
-      class="pf-c-spinner__tail-ball"
-    />
-  </span>
+  </svg>
 </DocumentFragment>
 `;
 
 exports[`large spinner 1`] = `
 <DocumentFragment>
-  <span
+  <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
     class="pf-c-spinner pf-m-lg"
     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>
 </DocumentFragment>
 `;
 
 exports[`medium spinner 1`] = `
 <DocumentFragment>
-  <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>
 </DocumentFragment>
 `;
 
 exports[`simple spinner 1`] = `
 <DocumentFragment>
-  <span
+  <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
     class="pf-c-spinner pf-m-xl"
     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>
 </DocumentFragment>
 `;
 
 exports[`small spinner 1`] = `
 <DocumentFragment>
-  <span
+  <svg
     aria-label="Contents"
     aria-valuetext="Loading..."
     class="pf-c-spinner pf-m-sm"
     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>
 </DocumentFragment>
 `;

package/src/components/Spinner/examples/SpinnerBasic.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
 import { Spinner } from '@patternfly/react-core';
 
-export const SpinnerBasic: React.FunctionComponent = () => <Spinner isSVG aria-label="Contents of the basic example" />;
+export const SpinnerBasic: React.FunctionComponent = () => <Spinner aria-label="Contents of the basic example" />;