@patternfly/react-core 4.199.5 → 4.200.2

package/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap

@@ -1,174 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`dropdown items a 1`] = `
-<div>
-  <li
-    role="none"
-  >
-    <a
-      class=""
-    >
-      Something
-    </a>
-  </li>
-</div>
-`;
+exports[`InternalDropdownItem dropdown items a 1`] = `"<a class=\\"\\">Something</a>"`;
 
-exports[`dropdown items aria-disabled a 1`] = `
-<div>
-  <li
-    role="none"
-  >
-    <a
-      aria-disabled="true"
-      class="pf-m-aria-disabled"
-    >
-      Something
-    </a>
-  </li>
-</div>
-`;
+exports[`InternalDropdownItem dropdown items aria-disabled a 1`] = `"<a aria-disabled=\\"true\\" class=\\"pf-m-aria-disabled\\">Something</a>"`;
 
-exports[`dropdown items aria-disabled button 1`] = `
-<div>
-  <li
-    role="none"
-  >
-    <button
-      aria-disabled="true"
-      class="pf-m-aria-disabled"
-      type="button"
-    >
-      Something
-    </button>
-  </li>
-</div>
-`;
+exports[`InternalDropdownItem dropdown items aria-disabled button 1`] = `"<button aria-disabled=\\"true\\" type=\\"button\\" class=\\"pf-m-aria-disabled\\">Something</button>"`;
 
-exports[`dropdown items button 1`] = `
-<div>
-  <li
-    role="none"
-  >
-    <button
-      class=""
-      type="button"
-    >
-      Something
-    </button>
-  </li>
-</div>
-`;
+exports[`InternalDropdownItem dropdown items button 1`] = `"<button type=\\"button\\" class=\\"\\">Something</button>"`;
 
-exports[`dropdown items description a 1`] = `
-<div>
-  <li
-    role="none"
-  >
-    <a
-      class="pf-m-description"
-    >
-      <div
-        class="pf-c-dropdown__menu-item-main"
-      >
-        Something
-      </div>
-      <div
-        class="pf-c-dropdown__menu-item-description"
-      >
-        Something's link description
-      </div>
-    </a>
-  </li>
-</div>
-`;
+exports[`InternalDropdownItem dropdown items description a 1`] = `"<div class=\\"pf-c-dropdown__menu-item-description\\">Something's link description</div>"`;
 
-exports[`dropdown items description button 1`] = `
-<div>
-  <li
-    role="none"
-  >
-    <button
-      class="pf-m-description"
-      type="button"
-    >
-      <div
-        class="pf-c-dropdown__menu-item-main"
-      >
-        Something
-      </div>
-      <div
-        class="pf-c-dropdown__menu-item-description"
-      >
-        Something's button description
-      </div>
-    </button>
-  </li>
-</div>
-`;
+exports[`InternalDropdownItem dropdown items description button 1`] = `"<div class=\\"pf-c-dropdown__menu-item-description\\">Something's button description</div>"`;
 
-exports[`dropdown items disabled a 1`] = `
-<div>
-  <li
-    role="none"
-  >
-    <a
-      aria-disabled="true"
-      class=""
-    >
-      Something
-    </a>
-  </li>
-</div>
-`;
+exports[`InternalDropdownItem dropdown items disabled a 1`] = `"<a aria-disabled=\\"true\\" class=\\"\\">Something</a>"`;
 
-exports[`dropdown items disabled button 1`] = `
-<div>
-  <li
-    role="none"
-  >
-    <button
-      aria-disabled="true"
-      class=""
-      type="button"
-    >
-      Something
-    </button>
-  </li>
-</div>
-`;
+exports[`InternalDropdownItem dropdown items disabled button 1`] = `"<button aria-disabled=\\"true\\" type=\\"button\\" class=\\"\\">Something</button>"`;
 
-exports[`dropdown items hover a 1`] = `
-<div>
-  <li
-    role="none"
-  >
-    <a
-      class=""
-    >
-      Something
-    </a>
-  </li>
-</div>
-`;
+exports[`InternalDropdownItem dropdown items hover a 1`] = `"<a class=\\"\\">Something</a>"`;
 
-exports[`dropdown items hover button 1`] = `
-<div>
-  <li
-    role="none"
-  >
-    <button
-      class=""
-      type="button"
-    >
-      Something
-    </button>
-  </li>
-</div>
-`;
-
-exports[`dropdown items separator 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
-`;
+exports[`InternalDropdownItem dropdown items hover button 1`] = `"<button type=\\"button\\" class=\\"\\">Something</button>"`;

package/src/components/FormSelect/FormSelect.tsx

@@ -23,6 +23,8 @@ export interface FormSelectProps
   isDisabled?: boolean;
   /** Sets the FormSelect required. */
   isRequired?: boolean;
+  /** Use the external file instead of a data URI */
+  isIconSprite?: boolean;
   /** Optional callback for updating when selection loses focus */
   onBlur?: (event: React.FormEvent<HTMLSelectElement>) => void;
   /** Optional callback for updating when selection gets focus */
@@ -52,6 +54,7 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
     validated: 'default',
     isDisabled: false,
     isRequired: false,
+    isIconSprite: false,
     onBlur: (): any => undefined,
     onFocus: (): any => undefined,
     onChange: (): any => undefined,
@@ -63,7 +66,18 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
   };
 
   render() {
-    const { children, className, value, validated, isDisabled, isRequired, ouiaId, ouiaSafe, ...props } = this.props;
+    const {
+      children,
+      className,
+      value,
+      validated,
+      isDisabled,
+      isRequired,
+      isIconSprite,
+      ouiaId,
+      ouiaSafe,
+      ...props
+    } = this.props;
     /* find selected option and get placeholder flag */
     const selectedOption = React.Children.toArray(children).find((option: any) => option.props.value === value) as any;
     const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;
@@ -72,6 +86,7 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
         {...props}
         className={css(
           styles.formControl,
+          isIconSprite && styles.modifiers.iconSprite,
           className,
           validated === ValidatedOptions.success && styles.modifiers.success,
           validated === ValidatedOptions.warning && styles.modifiers.warning,

package/src/components/FormSelect/examples/FormSelect.md

@@ -258,3 +258,61 @@ class FormSelectInputGrouped extends React.Component {
   }
 }
 ```
+
+### Icon sprite variant
+
+**Note:** The dropdown toggle icon is applied as a background image to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
+
+```js isBeta
+import React from 'react';
+import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
+
+class FormSelectIconSpriteInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      validated: ValidatedOptions.default
+    };
+
+    this.onChange = (value, event) => {
+      if (value === '3') {
+        this.setState({ value, validated: ValidatedOptions.success, helperText: 'You chose wisely' });
+      } else if (value === '') {
+        this.setState({ value, validated: ValidatedOptions.warning, helperText: 'You must select a value' });
+      } else {
+        this.setState({
+          value,
+          validated: ValidatedOptions.error,
+          invalidText: 'You must chose Three (thought that was obvious)'
+        });
+      }
+    };
+
+    this.options = [
+      { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
+      { value: '1', label: 'One', disabled: false, isPlaceholder: false },
+      { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
+      { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
+    ];
+  }
+
+  render() {
+    const { value, validated, helperText, invalidText } = this.state;
+
+    return (
+      <FormSelect
+        validated={validated}
+        isIconSprite
+        value={value}
+        onChange={this.onChange}
+        aria-label="FormSelect Input"
+      >
+        {this.options.map((option, index) => (
+          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+        ))}
+      </FormSelect>
+    );
+  }
+}
+```

package/src/components/Nav/__tests__/Generated/NavList.test.tsx

@@ -1,21 +1,31 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import * as ReactCoreUtils from '@patternfly/react-core/src/helpers/util';
+
 import { NavList } from '../../NavList';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { NavContext } from '../../Nav';
+
+describe('NavList', () => {
+  beforeAll(() => {
+    jest.spyOn(ReactCoreUtils, 'isElementInView').mockReturnValue(true);
+  });
 
-it('NavList should match snapshot (auto-generated)', () => {
-  const view = shallow(
-    <NavList
-      children={<>ReactNode</>}
-      className={"''"}
-      variant={'default'}
-      ariaLeftScroll={"'Scroll left'"}
-      ariaRightScroll={"'Scroll right'"}
-    />
-  );
-  expect(view).toMatchSnapshot();
+  it('should match snapshot', () => {
+    const view = render(
+      <NavContext.Provider
+        value={{
+          onSelect: jest.fn(),
+          onToggle: jest.fn(),
+          updateIsScrollable: jest.fn(),
+          isHorizontal: false,
+          flyoutRef: undefined,
+          setFlyoutRef: jest.fn()
+        }}
+      >
+        <NavList children={<>ReactNode</>} className="" ariaLeftScroll="Scroll left" ariaRightScroll="Scroll right" />
+      </NavContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });

package/src/components/Nav/__tests__/Generated/__snapshots__/NavList.test.tsx.snap

@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NavList should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+exports[`NavList should match snapshot 1`] = `
+<div>
+  <ul
+    class="pf-c-nav__list"
+  >
+    ReactNode
+  </ul>
+</div>
 `;

package/src/components/OptionsMenu/__tests__/Generated/OptionsMenuItem.test.tsx

@@ -1,22 +1,24 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
 import { OptionsMenuItem } from '../../OptionsMenuItem';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { DropdownArrowContext } from '../../../Dropdown';
 
-it('OptionsMenuItem should match snapshot (auto-generated)', () => {
-  const view = shallow(
-    <OptionsMenuItem
-      children={<>ReactNode</>}
-      className={'string'}
-      isSelected={false}
-      isDisabled={true}
-      onSelect={() => null as any}
-      id={"''"}
-    />
-  );
-  expect(view).toMatchSnapshot();
+describe('OptionsMenuItem', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <DropdownArrowContext.Provider value={{ sendRef: jest.fn(), keyHandler: undefined }}>
+        <OptionsMenuItem
+          children={<>ReactNode</>}
+          className={'string'}
+          isSelected={false}
+          isDisabled={true}
+          onSelect={() => null as any}
+          id={"''"}
+        />{' '}
+      </DropdownArrowContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });

package/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap

@@ -1,14 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OptionsMenuItem should match snapshot (auto-generated) 1`] = `
-<DropdownItem
-  aria-disabled={true}
-  className="string"
-  component="button"
-  id="''"
-  isDisabled={true}
-  onClick={[Function]}
->
-  ReactNode
-</DropdownItem>
+exports[`OptionsMenuItem should match snapshot 1`] = `
+<div>
+  <li
+    id="''"
+    role="menuitem"
+  >
+    <button
+      aria-disabled="true"
+      class="string"
+      data-ouia-component-id="OUIA-Generated-DropdownItem-1"
+      data-ouia-component-type="PF4/DropdownItem"
+      data-ouia-safe="true"
+      tabindex="-1"
+      type="button"
+    >
+      ReactNode
+    </button>
+  </li>
+   
+</div>
 `;

package/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx

@@ -1,13 +1,17 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
 import { OverflowMenuDropdownItem } from '../../OverflowMenuDropdownItem';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { DropdownArrowContext } from '../../../Dropdown';
 
-it('OverflowMenuDropdownItem should match snapshot (auto-generated)', () => {
-  const view = shallow(<OverflowMenuDropdownItem children={'any'} isShared={false} />);
-  expect(view).toMatchSnapshot();
+describe('OverflowMenuDropdownItem', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <DropdownArrowContext.Provider value={{ sendRef: jest.fn(), keyHandler: undefined }}>
+        <OverflowMenuDropdownItem children={'any'} isShared={false} />
+      </DropdownArrowContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });

package/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap

@@ -1,7 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OverflowMenuDropdownItem should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
+<div>
+  <li
+    role="menuitem"
+  >
+    <button
+      aria-disabled="false"
+      class=""
+      data-ouia-component-id="OUIA-Generated-DropdownItem-1"
+      data-ouia-component-type="PF4/DropdownItem"
+      data-ouia-safe="true"
+      tabindex="-1"
+      type="button"
+    >
+      any
+    </button>
+  </li>
+</div>
 `;

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

@@ -1,13 +1,25 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
 import { SelectGroup } from '../../SelectGroup';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { SelectContext } from '../..';
 
-it('SelectGroup should match snapshot (auto-generated)', () => {
-  const view = shallow(<SelectGroup children={[]} className={"''"} label={"''"} titleId={"''"} />);
-  expect(view).toMatchSnapshot();
+describe('SelectGroup', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <SelectContext.Provider
+        value={{
+          onSelect: jest.fn(),
+          onClose: jest.fn(),
+          onFavorite: jest.fn(),
+          variant: 'default',
+          inputIdPrefix: 'something'
+        }}
+      >
+        <SelectGroup children={[]} className="" label="" titleId="" />
+      </SelectContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });

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

@@ -1,29 +1,25 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
 import { SelectMenu } from '../../SelectMenu';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { SelectContext } from '../..';
 
-it('SelectMenu should match snapshot (auto-generated)', () => {
-  const view = shallow(
-    <SelectMenu
-      children={[undefined as React.ReactElement]}
-      isCustomContent={false}
-      className={"''"}
-      isExpanded={false}
-      isGrouped={false}
-      selected={''}
-      checked={[]}
-      openedOnEnter={false}
-      maxHeight={''}
-      noResultsFoundText={'string'}
-      createText={'string'}
-      sendRef={() => {}}
-      keyHandler={() => {}}
-    />
-  );
-  expect(view).toMatchSnapshot();
+describe('SelectMenu', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <SelectContext.Provider
+        value={{
+          onSelect: jest.fn(),
+          onClose: jest.fn(),
+          onFavorite: jest.fn(),
+          variant: 'default',
+          inputIdPrefix: 'something'
+        }}
+      >
+        <SelectMenu />
+      </SelectContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });

package/src/components/Select/__tests__/Generated/__snapshots__/SelectGroup.test.tsx.snap

@@ -1,7 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectGroup should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+exports[`SelectGroup should match snapshot 1`] = `
+<div>
+  <div
+    class="pf-c-select__menu-group"
+  >
+    <div
+      aria-hidden="true"
+      class="pf-c-select__menu-group-title"
+      id=""
+    />
+    <ul
+      role="listbox"
+    />
+  </div>
+</div>
 `;

package/src/components/Select/__tests__/Generated/__snapshots__/SelectMenu.test.tsx.snap

@@ -1,22 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectMenu should match snapshot (auto-generated) 1`] = `
-<SelectMenu
-  checked={Array []}
-  className="''"
-  createText="string"
-  hasInlineFilter={false}
-  innerRef={null}
-  isCustomContent={false}
-  isExpanded={false}
-  isGrouped={false}
-  isLastOptionBeforeFooter={[Function]}
-  keyHandler={[Function]}
-  maxHeight=""
-  noResultsFoundText="string"
-  openedOnEnter={false}
-  position="left"
-  selected=""
-  sendRef={[Function]}
-/>
+exports[`SelectMenu should match snapshot 1`] = `
+<div>
+  <ul
+    class="pf-c-select__menu"
+    role="listbox"
+  />
+</div>
 `;

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

@@ -1,14 +1,21 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+
 import { SelectGroup } from '../SelectGroup';
+import { SelectProvider } from '../selectConstants';
 
-describe('select group', () => {
+describe('SelectGroup', () => {
   test('renders with children successfully', () => {
-    const view = shallow(
-      <SelectGroup label="test">
-        <div>child</div>
-      </SelectGroup>
+    render(
+      <SelectProvider
+        value={{ onSelect: () => {}, onFavorite: () => {}, onClose: () => {}, variant: 'single', inputIdPrefix: '' }}
+      >
+        <SelectGroup label="test" data-testid="test-id">
+          <div>child</div>
+        </SelectGroup>
+      </SelectProvider>
     );
-    expect(view).toMatchSnapshot();
+    expect(screen.getByTestId('test-id').outerHTML).toMatchSnapshot();
   });
 });