@wordpress/components 40.0.0 → 40.1.0

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -1,359 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`ToggleGroupControl controlled should render correctly with icons 1`] = `
-<div>
-  <div
-    class="style-wrapper components-base-control"
-  >
-    <div
-      class="style-field components-base-control__field"
-    >
-      <label
-        class="style-label components-base-control__label"
-        for="wp-components-base-control-19"
-      >
-        Test Toggle Group Control
-      </label>
-      <div
-        aria-label="Test Toggle Group Control"
-        class="style-toggle-group-control style-has-enclosing-borders components-toggle-group-control"
-        data-wp-c16t="true"
-        data-wp-component="ToggleGroupControl"
-        id="wp-components-base-control-19"
-        role="radiogroup"
-      >
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="true"
-            aria-label="Uppercase"
-            class="style-button style-is-icon style-is-pressed components-toggle-group-control-option-base"
-            data-active-item="true"
-            data-value="uppercase"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-19-40"
-            name=":r3e:"
-            role="radio"
-            type="button"
-            value="uppercase"
-          >
-            <div
-              class="style-button-content"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
-                />
-              </svg>
-            </div>
-          </button>
-        </div>
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="Lowercase"
-            class="style-button style-is-icon components-toggle-group-control-option-base"
-            data-value="lowercase"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-19-41"
-            name=":r3e:"
-            role="radio"
-            type="button"
-            value="lowercase"
-          >
-            <div
-              class="style-button-content"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
-                />
-              </svg>
-            </div>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <button
-    class="components-button is-next-40px-default-size"
-    type="button"
-  >
-    Reset
-  </button>
-</div>
-`;
-
-exports[`ToggleGroupControl controlled should render correctly with text options 1`] = `
-<div>
-  <div
-    class="style-wrapper components-base-control"
-  >
-    <div
-      class="style-field components-base-control__field"
-    >
-      <label
-        class="style-label components-base-control__label"
-        for="wp-components-base-control-18"
-      >
-        Test Toggle Group Control
-      </label>
-      <div
-        aria-label="Test Toggle Group Control"
-        class="style-toggle-group-control style-has-enclosing-borders components-toggle-group-control"
-        data-wp-c16t="true"
-        data-wp-component="ToggleGroupControl"
-        id="wp-components-base-control-18"
-        role="radiogroup"
-      >
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="R"
-            class="style-button components-toggle-group-control-option-base"
-            data-value="rigas"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-18-38"
-            name=":r37:"
-            role="radio"
-            type="button"
-            value="rigas"
-          >
-            <div
-              class="style-button-content"
-            >
-              R
-            </div>
-          </button>
-        </div>
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="J"
-            class="style-button components-toggle-group-control-option-base"
-            data-value="jack"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-18-39"
-            name=":r37:"
-            role="radio"
-            type="button"
-            value="jack"
-          >
-            <div
-              class="style-button-content"
-            >
-              J
-            </div>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <button
-    class="components-button is-next-40px-default-size"
-    type="button"
-  >
-    Reset
-  </button>
-</div>
-`;
-
-exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] = `
-<div>
-  <div
-    class="style-wrapper components-base-control"
-  >
-    <div
-      class="style-field components-base-control__field"
-    >
-      <label
-        class="style-label components-base-control__label"
-        for="wp-components-base-control-1"
-      >
-        Test Toggle Group Control
-      </label>
-      <div
-        aria-label="Test Toggle Group Control"
-        class="style-toggle-group-control style-has-enclosing-borders components-toggle-group-control"
-        data-wp-c16t="true"
-        data-wp-component="ToggleGroupControl"
-        id="wp-components-base-control-1"
-        role="radiogroup"
-      >
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="true"
-            aria-label="Uppercase"
-            class="style-button style-is-icon style-is-pressed components-toggle-group-control-option-base"
-            data-active-item="true"
-            data-value="uppercase"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-1-2"
-            name=":r7:"
-            role="radio"
-            type="button"
-            value="uppercase"
-          >
-            <div
-              class="style-button-content"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
-                />
-              </svg>
-            </div>
-          </button>
-        </div>
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="Lowercase"
-            class="style-button style-is-icon components-toggle-group-control-option-base"
-            data-value="lowercase"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-1-3"
-            name=":r7:"
-            role="radio"
-            type="button"
-            value="lowercase"
-          >
-            <div
-              class="style-button-content"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
-                />
-              </svg>
-            </div>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ToggleGroupControl uncontrolled should render correctly with text options 1`] = `
-<div>
-  <div
-    class="style-wrapper components-base-control"
-  >
-    <div
-      class="style-field components-base-control__field"
-    >
-      <label
-        class="style-label components-base-control__label"
-        for="wp-components-base-control-0"
-      >
-        Test Toggle Group Control
-      </label>
-      <div
-        aria-label="Test Toggle Group Control"
-        class="style-toggle-group-control style-has-enclosing-borders components-toggle-group-control"
-        data-wp-c16t="true"
-        data-wp-component="ToggleGroupControl"
-        id="wp-components-base-control-0"
-        role="radiogroup"
-      >
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="R"
-            class="style-button components-toggle-group-control-option-base"
-            data-value="rigas"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-0-0"
-            name=":r0:"
-            role="radio"
-            type="button"
-            value="rigas"
-          >
-            <div
-              class="style-button-content"
-            >
-              R
-            </div>
-          </button>
-        </div>
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="J"
-            class="style-button components-toggle-group-control-option-base"
-            data-value="jack"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-0-1"
-            name=":r0:"
-            role="radio"
-            type="button"
-            value="jack"
-          >
-            <div
-              class="style-button-content"
-            >
-              J
-            </div>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/tree-grid/test/__snapshots__/index.tsx.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role="application"><table role="treegrid"><tbody><tr role="row" aria-level="1" aria-posinset="1" aria-setsize="1"><td role="gridcell">Test</td></tr></tbody></table></div>"`;

package/src/tree-grid/test/__snapshots__/roving-tab-index-item.tsx.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`RovingTabIndexItem allows another component to be specified as the rendered component using the \`as\` prop 1`] = `
-<div>
-  <button />
-</div>
-`;
-
-exports[`RovingTabIndexItem allows children to be declared using a child render function as an alternative to \`as\` 1`] = `
-<div>
-  <button
-    class="my-button"
-  >
-    Click Me!
-  </button>
-</div>
-`;
-
-exports[`RovingTabIndexItem forwards props to the \`as\` component 1`] = `
-<div>
-  <button
-    class="my-button"
-  >
-    Click Me!
-  </button>
-</div>
-`;

package/src/tree-grid/test/__snapshots__/roving-tab-index.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`RovingTabIndex does not render any elements other than its children 1`] = `
-<div>
-  <div>
-    child element
-  </div>
-</div>
-`;

package/src/tree-grid/test/cell.tsx

@@ -1,46 +0,0 @@
-import { render } from '@testing-library/react';
-import { forwardRef } from '@wordpress/element';
-import TreeGrid from '..';
-import TreeGridCell from '../cell';
-
-const TestButton = forwardRef(
-	(
-		{ ...props }: React.ComponentPropsWithoutRef< 'button' >,
-		ref: React.ForwardedRef< HTMLButtonElement >
-	) => <button { ...props } ref={ ref }></button>
-);
-
-describe( 'TreeGridCell', () => {
-	it( 'requires TreeGrid to be declared as a parent component somewhere in the component hierarchy', () => {
-		expect( () =>
-			render(
-				<TreeGridCell>
-					{ ( props ) => (
-						<TestButton className="my-button" { ...props }>
-							Click Me!
-						</TestButton>
-					) }
-				</TreeGridCell>
-			)
-		).toThrow();
-		expect( console ).toHaveErrored();
-	} );
-
-	it( 'uses a child render function to render children', () => {
-		const { container } = render(
-			<TreeGrid>
-				<tr>
-					<TreeGridCell>
-						{ ( props ) => (
-							<TestButton className="my-button" { ...props }>
-								Click Me!
-							</TestButton>
-						) }
-					</TreeGridCell>
-				</tr>
-			</TreeGrid>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );

package/src/tree-grid/test/row.tsx

@@ -1,37 +0,0 @@
-import { render } from '@testing-library/react';
-import TreeGridRow from '../row';
-
-describe( 'TreeGridRow', () => {
-	it( 'renders a tr with support for level, positionInSet and setSize props', () => {
-		const { container } = render(
-			<table>
-				<tbody>
-					<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 1 }>
-						<td>Test</td>
-					</TreeGridRow>
-				</tbody>
-			</table>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'forwards other props to the rendered tr element', () => {
-		const { container } = render(
-			<table>
-				<tbody>
-					<TreeGridRow
-						className="my-row"
-						level={ 1 }
-						positionInSet={ 1 }
-						setSize={ 1 }
-					>
-						<td>Test</td>
-					</TreeGridRow>
-				</tbody>
-			</table>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );