@patternfly/react-core 4.199.5 → 4.200.2

package/src/components/TextInput/examples/TextInput.md

@@ -6,7 +6,9 @@ propComponents: ['TextInput']
 ---
 
 ## Examples
+
 ### Basic
+
 ```js
 import React from 'react';
 import { TextInput } from '@patternfly/react-core';
@@ -139,37 +141,112 @@ TextInputSelectAll = () => {
 ```
 
 ### Icon variants
+
 ```js
 import React from 'react';
 import { TextInput } from '@patternfly/react-core';
 
-class SimpleTextInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      calendar: '',
-      clock: '',
-      custom: ''
-    };
-    this.handleTextInputChange = (value, field) => {
-      this.setState({ [field]: value });
-    };
-  }
+SimpleTextInput = () => {
+  const [calendar, setCalendar] = React.useState('');
+  const [clock, setClock] = React.useState('');
+  const [custom, setCustom] = React.useState('');
 
-  render() {
-    const { calendar, clock, custom } = this.state;
+  return (
+    <>
+      <TextInput
+        value={calendar}
+        type="text"
+        iconVariant="calendar"
+        onChange={value => setCalendar(value)}
+        aria-label="text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={clock}
+        type="text"
+        iconVariant="clock"
+        onChange={value => setClock(value)}
+        aria-label="text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={custom}
+        type="text"
+        customIconDimensions="24px 24px"
+        customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
+        onChange={value => setCustom(value)}
+        aria-label="text input example"
+      />
+    </>
+  );
+};
+```
 
-    return (
-      <>
-        <TextInput value={calendar} type="text" iconVariant='calendar' onChange={(value) => this.handleTextInputChange(value, "calendar")} aria-label="text input example" />
-        <br />
-        <br />
-        <TextInput value={clock} type="text" iconVariant='clock' onChange={(value) => this.handleTextInputChange(value, "clock")} aria-label="text input example" />
-        <br />
-        <br />
-        <TextInput value={custom} type="text" customIconDimensions='24px 24px' customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E' onChange={(value) => this.handleTextInputChange(value, "custom")} aria-label="text input example" />
-      </>
-    );
-  }
-}
+### Icon sprite variants
+
+**Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images 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 { TextInput } from '@patternfly/react-core';
+
+IconSpriteTextInputs = () => {
+  const [success, setSuccess] = React.useState('');
+  const [warning, setWarning] = React.useState('');
+  const [error, setError] = React.useState('');
+  const [calendar, setCalendar] = React.useState('');
+  const [clock, setClock] = React.useState('');
+
+  return (
+    <>
+      <TextInput
+        validated={ValidatedOptions.success}
+        isIconSprite
+        type="text"
+        onChange={value => setSuccess(value)}
+        aria-label="success icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        validated={ValidatedOptions.warning}
+        isIconSprite
+        type="text"
+        onChange={value => setWarning(value)}
+        aria-label="warning icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        validated={ValidatedOptions.error}
+        isIconSprite
+        type="text"
+        onChange={value => setError(value)}
+        aria-label="error icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={calendar}
+        isIconSprite
+        type="text"
+        iconVariant="calendar"
+        onChange={value => setCalendar(value)}
+        aria-label="calendar icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={clock}
+        isIconSprite
+        type="text"
+        iconVariant="clock"
+        onChange={value => setClock(value)}
+        aria-label="clock icon sprite text input example"
+      />
+    </>
+  );
+};
 ```

package/src/components/Toolbar/__tests__/Generated/ToolbarToggleGroup.test.tsx

@@ -1,13 +1,27 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import { ToolbarToggleGroup } from '../../ToolbarToggleGroup';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import React from 'react';
 
-it('ToolbarToggleGroup should match snapshot (auto-generated)', () => {
-  const view = shallow(<ToolbarToggleGroup breakpoint="xl" toggleIcon={<div>ReactNode</div>} />);
-  expect(view).toMatchSnapshot();
+import { render } from '@testing-library/react';
+
+import { ToolbarContentContext, ToolbarToggleGroup } from '../..';
+import { PageContext } from '../../../Page/Page';
+
+describe('ToolbarToggleGroup', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <PageContext.Provider
+        value={{ isManagedSidebar: false, onNavToggle: jest.fn(), isNavOpen: true, width: 1, getBreakpoint: jest.fn() }}
+      >
+        <ToolbarContentContext.Provider
+          value={{
+            expandableContentId: 'test',
+            expandableContentRef: { current: ((<></>) as unknown) as HTMLDivElement },
+            chipContainerRef: { current: ((<></>) as unknown) as HTMLDivElement }
+          }}
+        >
+          <ToolbarToggleGroup breakpoint="xl" toggleIcon={<div>ReactNode</div>} />
+        </ToolbarContentContext.Provider>
+      </PageContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });

package/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarToggleGroup.test.tsx.snap

@@ -1,7 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToolbarToggleGroup should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+exports[`ToolbarToggleGroup should match snapshot 1`] = `
+<div>
+  <div
+    class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
+  >
+    <div
+      class="pf-c-toolbar__toggle"
+    >
+      <button
+        aria-controls="test"
+        aria-disabled="false"
+        aria-haspopup="false"
+        aria-label="Show Filters"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <div>
+          ReactNode
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
 `;

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

@@ -0,0 +1,129 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
+import { Toolbar } from '../Toolbar';
+import { ToolbarItem } from '../ToolbarItem';
+import { ToolbarContent } from '../ToolbarContent';
+import { ToolbarFilter } from '../ToolbarFilter';
+import { ToolbarGroup } from '../ToolbarGroup';
+import { Select, SelectVariant, SelectOption } from '../../Select';
+import { Button } from '../../Button';
+
+describe('Toolbar', () => {
+  it('should render inset', () => {
+    const items = (
+      <React.Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar
+        id="toolbar"
+        inset={{
+          default: 'insetNone',
+          md: 'insetSm',
+          xl: 'inset2xl',
+          '2xl': 'insetLg'
+        }}
+        data-testid="toolbar-test-id"
+      >
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('toolbar-test-id').outerHTML).toMatchSnapshot();
+  });
+
+  it('should render with page inset flag', () => {
+    const items = (
+      <React.Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" usePageInsets data-testid="toolbar-test-id">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('toolbar-test-id').outerHTML).toMatchSnapshot();
+  });
+
+  it('should render with custom chip content', () => {
+    const statusMenuItems = [
+      <SelectOption key="statusNew" value="New" />,
+      <SelectOption key="statusPending" value="Pending" />,
+      <SelectOption key="statusRunning" value="Running" />,
+      <SelectOption key="statusCancelled" value="Cancelled" />
+    ];
+
+    const items = (
+      <React.Fragment>
+        <ToolbarToggleGroup toggleIcon={<React.Fragment />} breakpoint="xl">
+          <ToolbarGroup variant="filter-group">
+            <ToolbarFilter
+              chips={['New', 'Pending']}
+              deleteChip={(category, chip) => {}}
+              deleteChipGroup={category => {}}
+              categoryName="Status"
+            >
+              <Select
+                variant={SelectVariant.checkbox}
+                aria-label="Status"
+                onToggle={(isExpanded: boolean) => {}}
+                onSelect={(event, selection) => {}}
+                selections={['New', 'Pending']}
+                isOpen={true}
+                placeholderText="Status"
+              >
+                {statusMenuItems}
+              </Select>
+            </ToolbarFilter>
+          </ToolbarGroup>
+        </ToolbarToggleGroup>
+      </React.Fragment>
+    );
+
+    const customChipGroupContent = (
+      <React.Fragment>
+        <ToolbarItem>
+          <Button variant="link" onClick={() => {}} isInline>
+            Save filters
+          </Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="link" onClick={() => {}} isInline>
+            Clear all filters
+          </Button>
+        </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar
+        id="toolbar-with-filter"
+        className="pf-m-toggle-group-container"
+        collapseListedFiltersBreakpoint="xl"
+        customChipGroupContent={customChipGroupContent}
+        data-testid="toolbar-test-id"
+      >
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    // Expecting 2 matches for text because the buttons also exist in hidden expandable content for mobile view
+    expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(2);
+    expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(2);
+    expect(screen.getByTestId('toolbar-test-id').outerHTML).toMatchSnapshot();
+  });
+});

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ToolbarItem } from '../ToolbarItem';
+
+describe('ToolbarItem', () => {
+  it('should map width breakpoints', () => {
+    const widths = {
+      default: '100px',
+      sm: '80px',
+      md: '150px',
+      lg: '200px',
+      xl: '250px',
+      '2xl': '300px'
+    };
+
+    render(<ToolbarItem widths={widths}>Test</ToolbarItem>);
+    expect(screen.getByText('Test').outerHTML).toMatchSnapshot();
+  });
+});

package/src/components/Toolbar/__tests__/ToolbarToggleGroup.test.tsx

@@ -1,148 +1,25 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import { shallow } from 'enzyme';
+import React from 'react';
+import { render } from '@testing-library/react';
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
-import { Toolbar } from '../Toolbar';
-import { ToolbarItem } from '../ToolbarItem';
-import { ToolbarContent } from '../ToolbarContent';
-import { ToolbarFilter } from '../ToolbarFilter';
-import { ToolbarGroup } from '../ToolbarGroup';
-import { Select, SelectVariant, SelectOption } from '../../Select';
-import { Button } from '../../Button';
+import { ToolbarContentContext } from '../ToolbarUtils';
 
 describe('ToolbarToggleGroup', () => {
   it('should warn on bad props', () => {
     const myMock = jest.fn() as any;
     global.console = { error: myMock } as any;
-    shallow(<ToolbarToggleGroup breakpoint={undefined as 'xl'} toggleIcon={null} />);
-    expect(myMock).toBeCalled();
-  });
-});
 
-describe('Toolbar', () => {
-  it('should render inset', () => {
-    const items = (
-      <React.Fragment>
-        <ToolbarItem>Test</ToolbarItem>
-        <ToolbarItem>Test 2</ToolbarItem>
-        <ToolbarItem variant="separator" />
-        <ToolbarItem>Test 3 </ToolbarItem>
-      </React.Fragment>
-    );
-
-    const view = render(
-      <Toolbar
-        id="toolbar"
-        inset={{
-          default: 'insetNone',
-          md: 'insetSm',
-          xl: 'inset2xl',
-          '2xl': 'insetLg'
+    render(
+      <ToolbarContentContext.Provider
+        value={{
+          expandableContentId: 'some-id',
+          expandableContentRef: { current: undefined },
+          chipContainerRef: { current: undefined }
         }}
       >
-        <ToolbarContent>{items}</ToolbarContent>
-      </Toolbar>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
-
-  it('should render with page inset flag', () => {
-    const items = (
-      <React.Fragment>
-        <ToolbarItem>Test</ToolbarItem>
-        <ToolbarItem>Test 2</ToolbarItem>
-        <ToolbarItem variant="separator" />
-        <ToolbarItem>Test 3 </ToolbarItem>
-      </React.Fragment>
-    );
-
-    const view = render(
-      <Toolbar id="toolbar" usePageInsets>
-        <ToolbarContent>{items}</ToolbarContent>
-      </Toolbar>
+        <ToolbarToggleGroup breakpoint={undefined as 'xl'} toggleIcon={null} />
+      </ToolbarContentContext.Provider>
     );
-    expect(view.container).toMatchSnapshot();
-  });
-
-  it('should render with custom chip content', () => {
-    const statusMenuItems = [
-      <SelectOption key="statusNew" value="New" />,
-      <SelectOption key="statusPending" value="Pending" />,
-      <SelectOption key="statusRunning" value="Running" />,
-      <SelectOption key="statusCancelled" value="Cancelled" />
-    ];
 
-    const items = (
-      <React.Fragment>
-        <ToolbarToggleGroup toggleIcon={<React.Fragment />} breakpoint="xl">
-          <ToolbarGroup variant="filter-group">
-            <ToolbarFilter
-              chips={['New', 'Pending']}
-              deleteChip={(category, chip) => {}}
-              deleteChipGroup={category => {}}
-              categoryName="Status"
-            >
-              <Select
-                variant={SelectVariant.checkbox}
-                aria-label="Status"
-                onToggle={(isExpanded: boolean) => {}}
-                onSelect={(event, selection) => {}}
-                selections={['New', 'Pending']}
-                isOpen={true}
-                placeholderText="Status"
-              >
-                {statusMenuItems}
-              </Select>
-            </ToolbarFilter>
-          </ToolbarGroup>
-        </ToolbarToggleGroup>
-      </React.Fragment>
-    );
-
-    const customChipGroupContent = (
-      <React.Fragment>
-        <ToolbarItem>
-          <Button variant="link" onClick={() => {}} isInline>
-            Save filters
-          </Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button variant="link" onClick={() => {}} isInline>
-            Clear all filters
-          </Button>
-        </ToolbarItem>
-      </React.Fragment>
-    );
-
-    const view = render(
-      <Toolbar
-        id="toolbar-with-filter"
-        className="pf-m-toggle-group-container"
-        collapseListedFiltersBreakpoint="xl"
-        customChipGroupContent={customChipGroupContent}
-      >
-        <ToolbarContent>{items}</ToolbarContent>
-      </Toolbar>
-    );
-    // Expecting 2 matches for text because the buttons also exist in hidden expandable content for mobile view
-    expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(2);
-    expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(2);
-    expect(view.container).toMatchSnapshot();
-  });
-});
-
-describe('ToolbarItem', () => {
-  it('should map width breakpoints', () => {
-    const widths = {
-      default: '100px',
-      sm: '80px',
-      md: '150px',
-      lg: '200px',
-      xl: '250px',
-      '2xl': '300px'
-    };
-
-    const view = render(<ToolbarItem widths={widths}>Test</ToolbarItem>);
-    expect(view.container).toMatchSnapshot();
+    expect(myMock).toBeCalled();
   });
 });

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toolbar should render inset 1`] = `"<div class=\\"pf-c-toolbar pf-m-inset-none pf-m-inset-sm-on-md pf-m-inset-2xl-on-xl pf-m-inset-lg-on-2xl\\" id=\\"toolbar\\" data-ouia-component-type=\\"PF4/Toolbar\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Toolbar-1\\" data-testid=\\"toolbar-test-id\\"><div class=\\"pf-c-toolbar__content\\"><div class=\\"pf-c-toolbar__content-section\\"><div class=\\"pf-c-toolbar__item\\">Test</div><div class=\\"pf-c-toolbar__item\\">Test 2</div><hr class=\\"pf-c-divider pf-m-vertical\\"><div class=\\"pf-c-toolbar__item\\">Test 3 </div></div><div class=\\"pf-c-toolbar__expandable-content\\" id=\\"toolbar-expandable-content-0\\"><div class=\\"pf-c-toolbar__group\\"></div></div></div><div class=\\"pf-c-toolbar__content pf-m-hidden\\" hidden=\\"\\"><div class=\\"pf-c-toolbar__group\\"></div></div></div>"`;
+
+exports[`Toolbar should render with custom chip content 1`] = `"<div class=\\"pf-c-toolbar pf-m-toggle-group-container\\" id=\\"toolbar-with-filter\\" data-ouia-component-type=\\"PF4/Toolbar\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Toolbar-3\\" data-testid=\\"toolbar-test-id\\"><div class=\\"pf-c-toolbar__content\\"><div class=\\"pf-c-toolbar__content-section\\"><div class=\\"pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl\\"><div class=\\"pf-c-toolbar__toggle\\"><button aria-haspopup=\\"false\\" aria-controls=\\"toolbar-with-filter-expandable-content-3\\" aria-disabled=\\"false\\" aria-label=\\"Show Filters\\" class=\\"pf-c-button pf-m-plain\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-plain-1\\"></button></div><div class=\\"pf-c-toolbar__group pf-m-filter-group\\"><div class=\\"pf-c-toolbar__item\\"><div class=\\"pf-c-select pf-m-expanded\\" data-ouia-component-type=\\"PF4/Select\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Select-checkbox-2\\"><button id=\\"pf-select-toggle-id-1\\" aria-labelledby=\\" pf-select-toggle-id-1\\" aria-expanded=\\"true\\" type=\\"button\\" class=\\"pf-c-select__toggle\\" aria-label=\\"Options menu\\"><div class=\\"pf-c-select__toggle-wrapper\\"><span class=\\"pf-c-select__toggle-text\\">Status</span><div class=\\"pf-c-select__toggle-badge\\"><span class=\\"pf-c-badge pf-m-read\\">2</span></div></div><span class=\\"pf-c-select__toggle-arrow\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"></path></svg></span></button><ul class=\\"pf-c-select__menu\\" role=\\"listbox\\" aria-label=\\"Status\\"><label class=\\"pf-c-check pf-c-select__menu-item\\"><input id=\\"pf-random-id-1-New\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" checked=\\"\\"><span class=\\"pf-c-check__label\\">New</span></label><label class=\\"pf-c-check pf-c-select__menu-item\\"><input id=\\"pf-random-id-1-Pending\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\" checked=\\"\\"><span class=\\"pf-c-check__label\\">Pending</span></label><label class=\\"pf-c-check pf-c-select__menu-item\\"><input id=\\"pf-random-id-1-Running\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\"><span class=\\"pf-c-check__label\\">Running</span></label><label class=\\"pf-c-check pf-c-select__menu-item\\"><input id=\\"pf-random-id-1-Cancelled\\" class=\\"pf-c-check__input\\" type=\\"checkbox\\"><span class=\\"pf-c-check__label\\">Cancelled</span></label></ul></div></div></div></div></div><div class=\\"pf-c-toolbar__expandable-content\\" id=\\"toolbar-with-filter-expandable-content-3\\"><div class=\\"pf-c-toolbar__group\\"></div><div class=\\"pf-c-toolbar__group pf-m-chip-container\\"><div class=\\"pf-c-toolbar__group\\"></div><div class=\\"pf-c-toolbar__item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-link pf-m-inline\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-link-3\\">Save filters</button></div><div class=\\"pf-c-toolbar__item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-link pf-m-inline\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-link-4\\">Clear all filters</button></div></div></div></div><div class=\\"pf-c-toolbar__content\\"><div class=\\"pf-c-toolbar__group pf-m-hidden\\" hidden=\\"\\" aria-hidden=\\"true\\"><div class=\\"pf-c-toolbar__item pf-m-chip-group\\"><div class=\\"pf-c-chip-group pf-m-category\\" role=\\"group\\" aria-labelledby=\\"pf-random-id-2\\" data-ouia-component-type=\\"PF4/ChipGroup\\" data-ouia-safe=\\"true\\"><div class=\\"pf-c-chip-group__main\\"><span class=\\"pf-c-chip-group__label\\" id=\\"pf-random-id-2\\">Status</span><ul class=\\"pf-c-chip-group__list\\" aria-labelledby=\\"pf-random-id-2\\" role=\\"list\\"><li class=\\"pf-c-chip-group__list-item\\"><div class=\\"pf-c-chip\\" data-ouia-component-type=\\"PF4/Chip\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Chip-1\\"><span class=\\"pf-c-chip__text\\" id=\\"pf-random-id-3\\">New</span><button id=\\"remove_pf-random-id-3\\" aria-labelledby=\\"remove_pf-random-id-3 pf-random-id-3\\" aria-disabled=\\"false\\" aria-label=\\"close\\" class=\\"pf-c-button pf-m-plain\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"close\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 352 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"></path></svg></button></div></li><li class=\\"pf-c-chip-group__list-item\\"><div class=\\"pf-c-chip\\" data-ouia-component-type=\\"PF4/Chip\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Chip-2\\"><span class=\\"pf-c-chip__text\\" id=\\"pf-random-id-4\\">Pending</span><button id=\\"remove_pf-random-id-4\\" aria-labelledby=\\"remove_pf-random-id-4 pf-random-id-4\\" aria-disabled=\\"false\\" aria-label=\\"close\\" class=\\"pf-c-button pf-m-plain\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"close\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 352 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"></path></svg></button></div></li></ul></div><div class=\\"pf-c-chip-group__close\\"><button id=\\"remove_group_pf-random-id-2\\" aria-labelledby=\\"remove_group_pf-random-id-2 pf-random-id-2\\" aria-disabled=\\"false\\" aria-label=\\"Close chip group\\" class=\\"pf-c-button pf-m-plain\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"Close chip group\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 512 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z\\"></path></svg></button></div></div></div></div><div class=\\"pf-c-toolbar__group\\"><div class=\\"pf-c-toolbar__item\\">2 filters applied</div></div><div class=\\"pf-c-toolbar__item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-link pf-m-inline\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-link-1\\">Save filters</button></div><div class=\\"pf-c-toolbar__item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-link pf-m-inline\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Button-link-2\\">Clear all filters</button></div></div></div>"`;
+
+exports[`Toolbar should render with page inset flag 1`] = `"<div class=\\"pf-c-toolbar pf-m-page-insets\\" id=\\"toolbar\\" data-ouia-component-type=\\"PF4/Toolbar\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Toolbar-2\\" data-testid=\\"toolbar-test-id\\"><div class=\\"pf-c-toolbar__content\\"><div class=\\"pf-c-toolbar__content-section\\"><div class=\\"pf-c-toolbar__item\\">Test</div><div class=\\"pf-c-toolbar__item\\">Test 2</div><hr class=\\"pf-c-divider pf-m-vertical\\"><div class=\\"pf-c-toolbar__item\\">Test 3 </div></div><div class=\\"pf-c-toolbar__expandable-content\\" id=\\"toolbar-expandable-content-1\\"><div class=\\"pf-c-toolbar__group\\"></div></div></div><div class=\\"pf-c-toolbar__content pf-m-hidden\\" hidden=\\"\\"><div class=\\"pf-c-toolbar__group\\"></div></div></div>"`;

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolbarItem should map width breakpoints 1`] = `"<div class=\\"pf-c-toolbar__item\\" style=\\"--pf-c-toolbar__item--Width: 100px; --pf-c-toolbar__item--Width-on-sm: 80px; --pf-c-toolbar__item--Width-on-md: 150px; --pf-c-toolbar__item--Width-on-lg: 200px; --pf-c-toolbar__item--Width-on-xl: 250px; --pf-c-toolbar__item--Width-on-2xl: 300px;\\">Test</div>"`;

package/src/components/Tooltip/examples/Tooltip.md

@@ -105,10 +105,18 @@ OptionsTooltip = () => {
   const [exitDelayInput, setExitDelayInput] = React.useState(0);
   const [animationDuration, setAnimationDuration] = React.useState(300);
   const tipBoxRef = React.useRef(null);
-  const scrollToRef = ref => ref && ref.current && (ref.current.scrollTop = 400);
+  
+  const scrollToRef = ref => {
+    if (ref && ref.current) {
+      ref.current.scrollTop = 400;
+      ref.current.scrollLeft = 300;
+    }
+  }
+  
   React.useEffect(() => {
     scrollToRef(tipBoxRef);
   }, []);
+  
   return (
     <>
       <div>

package/src/components/Tooltip/examples/TooltipExamples.css

@@ -2,7 +2,7 @@
   height: 450px;
   position: relative;
   width: 100%;
-  overflow-y: scroll;
+  overflow: scroll;
   overscroll-behavior: contain;
   margin: 0 auto;
   border: 2px dashed #ff6b81;
@@ -12,10 +12,10 @@
 .tooltip-box::after {
   content: '';
   display: block;
-  width: 1px;
+  width: 1500px;
   height: 600px;
 }
 .tooltip-button {
   position: absolute;
-  left: 300px;
-}
+  left: 600px;
+}

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

@@ -1,29 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import { SelectOption } from '../../SelectOption';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('SelectOption should match snapshot (auto-generated)', () => {
-  const view = shallow(
-    <SelectOption
-      children={<div>ReactNode</div>}
-      className={"''"}
-      index={0}
-      component={'button'}
-      value={''}
-      isDisabled={false}
-      isPlaceholder={false}
-      isSelected={false}
-      isChecked={false}
-      isFocused={false}
-      sendRef={() => {}}
-      keyHandler={() => {}}
-      onClick={() => {}}
-    />
-  );
-  expect(view).toMatchSnapshot();
-});

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

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SelectOption should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
-`;