@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.4

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

@@ -1,332 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DataList Cell default 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__cell"
-  >
-    Secondary
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList Cells 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-content"
-  >
-    <div
-      class="pf-v5-c-data-list__cell data-list-custom"
-      id="primary-item"
-    >
-      Primary Id
-    </div>
-    <div
-      class="pf-v5-c-data-list__cell data-list-custom"
-      id="primary-item"
-    >
-      Primary Id 2
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - 2xl 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-2xl"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - always 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - lg 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-lg"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - md 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-md"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - none 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-none"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - sm 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-sm"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataList variants Breakpoint - xl 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-xl"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList DataListAction button 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-action"
-  >
-    <button
-      aria-disabled="false"
-      class="pf-v5-c-button pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-Button-primary-1"
-      data-ouia-component-type="PF5/Button"
-      data-ouia-safe="true"
-      id="delete-item-1"
-      type="button"
-    >
-      Delete
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList DataListAction dropdown 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-action"
-  >
-    <div
-      class="pf-v5-c-data-list__action"
-    >
-      <button
-        aria-expanded="false"
-        class="pf-v5-c-menu-toggle"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-menu-toggle__text"
-        />
-        <span
-          class="pf-v5-c-menu-toggle__controls"
-        >
-          <span
-            class="pf-v5-c-menu-toggle__toggle-icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 320 512"
-              width="1em"
-            >
-              <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"
-              />
-            </svg>
-          </span>
-        </span>
-      </button>
-      <div
-        class="pf-v5-c-menu"
-        data-ouia-component-id="OUIA-Generated-Dropdown-1"
-        data-ouia-component-type="PF5/Dropdown"
-        data-ouia-safe="true"
-        style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
-      >
-        <div
-          class="pf-v5-c-menu__content"
-        >
-          <ul
-            class="pf-v5-c-menu__list"
-            role="menu"
-          >
-            <li
-              class="pf-v5-c-menu__list-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-1"
-              data-ouia-component-type="PF5/DropdownItem"
-              data-ouia-safe="true"
-              role="none"
-            >
-              <button
-                class="pf-v5-c-menu__item"
-                role="menuitem"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="pf-v5-c-menu__item-main"
-                >
-                  <span
-                    class="pf-v5-c-menu__item-text"
-                  >
-                    action-1
-                  </span>
-                </span>
-              </button>
-            </li>
-            ,
-            <li
-              class="pf-v5-c-menu__list-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-2"
-              data-ouia-component-type="PF5/DropdownItem"
-              data-ouia-safe="true"
-              role="none"
-            >
-              <button
-                class="pf-v5-c-menu__item"
-                role="menuitem"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="pf-v5-c-menu__item-main"
-                >
-                  <span
-                    class="pf-v5-c-menu__item-text"
-                  >
-                    action-2
-                  </span>
-                </span>
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DataList DataListContent 1`] = `
-<DocumentFragment>
-  <section
-    aria-label="Primary Content Details"
-    class="pf-v5-c-data-list__expandable-content"
-    id=""
-  >
-    <div
-      class="pf-v5-c-data-list__expandable-content-body"
-    >
-       test
-    </div>
-  </section>
-</DocumentFragment>
-`;
-
-exports[`DataList DataListContent hasNoPadding 1`] = `
-<DocumentFragment>
-  <section
-    aria-label="Primary Content Details"
-    class="pf-v5-c-data-list__expandable-content"
-    hidden=""
-    id=""
-  >
-    <div
-      class="pf-v5-c-data-list__expandable-content-body pf-m-no-padding"
-    >
-      test
-    </div>
-  </section>
-</DocumentFragment>
-`;
-
-exports[`DataList Item 1`] = `
-<DocumentFragment>
-  <li
-    aria-labelledby="item-1"
-    class="pf-v5-c-data-list__item data-list-item-custom"
-    id=""
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList Item default 1`] = `
-<DocumentFragment>
-  <li
-    aria-labelledby="item-1"
-    class="pf-v5-c-data-list__item"
-    id=""
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList List 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-grid-md data-list-custom"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList List compact 1`] = `
+exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-compact pf-m-grid-md"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList List default 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
+    aria-label="list"
     class="pf-v5-c-data-list pf-m-grid-md"
     role="list"
   />
 </DocumentFragment>
 `;
-
-exports[`DataList List draggable 1`] = `
-<DocumentFragment>
-  <ul
-    aria-label="this is a simple list"
-    class="pf-v5-c-data-list pf-m-compact pf-m-grid-md"
-    role="list"
-  />
-</DocumentFragment>
-`;
-
-exports[`DataList item row default 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-data-list__item-row"
-  />
-</DocumentFragment>
-`;

package/src/components/DataList/__tests__/__snapshots__/DataListAction.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-action"
+  >
+    test
+  </div>
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListCell.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cell renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__cell"
+  >
+    Secondary
+  </div>
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListContent.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <section
+    aria-label="Primary Content Details"
+    class="pf-v5-c-data-list__expandable-content"
+    id=""
+  >
+    <div
+      class="pf-v5-c-data-list__expandable-content-body"
+    >
+       test
+    </div>
+  </section>
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListItem.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <li
+    aria-labelledby="item-1"
+    class="pf-v5-c-data-list__item"
+    id=""
+  />
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListItemCells.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cells renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-content"
+  />
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListItemRow.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Item row renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-row"
+  />
+</DocumentFragment>
+`;

package/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders to match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-data-list__item-control"
+  >
+    <div
+      class="pf-v5-c-data-list__toggle"
+    >
+      <button
+        aria-controls="false"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-label="Details"
+        aria-labelledby=" ex-toggle2"
+        class="pf-v5-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe="true"
+        id="ex-toggle2"
+        type="button"
+      >
+        <div
+          class="pf-v5-c-data-list__toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -166,8 +166,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
           </DataListAction>
           <DataListAction
             visibility={{ default: 'hidden', lg: 'visible' }}
-            aria-labelledby="check-action-item2 check-action-action2"
-            id="check-action-action2"
+            aria-labelledby="check-action-item2 check-action-action2a"
+            id="check-action-action2a"
             aria-label="Actions"
           >
             <Button variant="primary">Primary</Button>
@@ -192,7 +192,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
           <DataListAction
             visibility={{ xl: 'hidden' }}
             aria-labelledby="check-action-item3 check-action-action3"
-            id="check-actiokn-action3"
+            id="check-action-action3"
             aria-label="Actions"
             isPlainButtonAction
           >
@@ -231,8 +231,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
           </DataListAction>
           <DataListAction
             visibility={{ default: 'hidden', xl: 'visible' }}
-            aria-labelledby="check-action-item3 check-action-action3"
-            id="check-action-action3"
+            aria-labelledby="check-action-item3 check-action-action3a"
+            id="check-action-action3a"
             aria-label="Actions"
           >
             <Button variant="primary">Primary</Button>

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -162,7 +162,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               ]}
             />
             <DataListAction
-              aria-labelledby="m-ex-item2 mex-action2"
+              aria-labelledby="m-ex-item2 m-ex-action2"
               id="m-ex-action2"
               aria-label="Actions"
               isPlainButtonAction

package/src/components/DatePicker/DatePicker.tsx

@@ -98,7 +98,7 @@ const DatePickerBase = (
     className,
     locale = undefined,
     dateFormat = yyyyMMddFormat,
-    dateParse = (val: string) => val.split('-').length === 3 && new Date(`${val}T00:00:00`),
+    dateParse = (val: string) => (val.split('-').length === 3 ? new Date(`${val}T00:00:00`) : new Date(undefined)),
     isDisabled = false,
     placeholder = 'YYYY-MM-DD',
     value: valueProp = '',
@@ -230,7 +230,7 @@ const DatePickerBase = (
   return (
     <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
       <Popover
-        elementToFocus={valueDate ? focusSelectorForSelectedDate : focusSelectorForUnselectedDate}
+        elementToFocus={isValidDate(valueDate) ? focusSelectorForSelectedDate : focusSelectorForUnselectedDate}
         position="bottom"
         bodyContent={
           <CalendarMonth
@@ -285,7 +285,7 @@ const DatePickerBase = (
       >
         <div className={styles.datePickerInput} ref={triggerRef}>
           <InputGroup>
-            <InputGroupItem isFill>
+            <InputGroupItem>
               <TextInput
                 isDisabled={isDisabled}
                 isRequired={requiredDateOptions?.isRequired}

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

@@ -16,13 +16,9 @@ test('disabled date picker', () => {
 test('Date picker with multiple validators does not show invalid icon on valid input', async () => {
   const user = userEvent.setup();
 
-  const rangeValidator = (date: Date) => {
-    return '';
-  };
+  const rangeValidator = (_date: Date) => '';
 
-  const rangeValidatorB = (date: Date) => {
-    return '';
-  };
+  const rangeValidatorB = (_date: Date) => '';
 
   render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
 
@@ -119,7 +115,7 @@ test('Does not render emptyDateText when requiredDateOptions.isRequired is false
   await user.click(screen.getByRole('textbox'));
   await user.click(document.body);
 
-  expect(screen.queryByText('Date cannot be blank')).not.toBeInTheDocument;
+  expect(screen.queryByText('Date cannot be blank')).not.toBeInTheDocument();
 });
 
 test('Renders text input as invalid on blur when requiredDateOptions.isRequired is true', async () => {

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

@@ -13,7 +13,7 @@ exports[`With popover opened 1`] = `
         class="pf-v5-c-input-group"
       >
         <div
-          class="pf-v5-c-input-group__item pf-m-fill"
+          class="pf-v5-c-input-group__item"
         >
           <span
             class="pf-v5-c-form-control"
@@ -787,7 +787,7 @@ exports[`disabled date picker 1`] = `
         class="pf-v5-c-input-group"
       >
         <div
-          class="pf-v5-c-input-group__item pf-m-fill"
+          class="pf-v5-c-input-group__item"
         >
           <span
             class="pf-v5-c-form-control pf-m-disabled"