@wordpress/ui 0.11.0 → 0.12.0

package/src/visually-hidden/visually-hidden.tsx

@@ -13,12 +13,10 @@ import styles from './style.module.css';
  * ## Composing with other components
  *
  * When composing with another component that uses the `render` prop
- * pattern, there are two directions — and they produce different results.
- *
- * Most of the time you'll want `VisuallyHidden` as the **host** (outer
- * component) and pass the other component via `render`. This keeps the
- * other component's HTML element and semantics intact, while
- * `VisuallyHidden` only adds its hiding styles:
+ * pattern, keep `VisuallyHidden` as the **host** (outer component) and
+ * pass the other component via `render`. This keeps the other
+ * component's HTML element and semantics intact, while `VisuallyHidden`
+ * only adds its hiding styles:
  *
  * ```jsx
  * // OtherComponent keeps its semantic element (e.g. <h2>).
@@ -26,20 +24,6 @@ import styles from './style.module.css';
  *   Accessible text
  * </VisuallyHidden>
  * ```
- *
- * The opposite direction is also possible, but be aware that it replaces
- * the other component's element with VisuallyHidden's default `<div>`:
- *
- * ```jsx
- * // OtherComponent's element becomes a <div>.
- * <OtherComponent render={ <VisuallyHidden /> }>
- *   Accessible text
- * </OtherComponent>
- * ```
- *
- * Choose based on what you need: if the other component's semantic
- * element matters (e.g. `<label>`, `<legend>`, `<h2>`), keep
- * `VisuallyHidden` as the host so the element is preserved.
  */
 export const VisuallyHidden = forwardRef< HTMLDivElement, VisuallyHiddenProps >(
 	function VisuallyHidden( { render, ...restProps }, ref ) {
@@ -48,7 +32,11 @@ export const VisuallyHidden = forwardRef< HTMLDivElement, VisuallyHiddenProps >(
 			ref,
 			props: mergeProps< 'div' >(
 				{ className: styles[ 'visually-hidden' ] },
-				restProps
+				restProps,
+				{
+					// @ts-expect-error Arbitrary data-* attributes aren't indexable on the typed div props. Kept hardcoded so consumers can't change or remove it.
+					'data-visually-hidden': '',
+				}
 			),
 		} );
 

package/build/types/css-modules.d.cjs

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=css-modules.d.cjs.map

package/build/types/react.d.cjs

@@ -1,5 +0,0 @@
-"use strict";
-
-// packages/ui/src/types/react.d.ts
-var import_react = require("react");
-//# sourceMappingURL=react.d.cjs.map

package/build/types/react.d.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/types/react.d.ts"],
-  "sourcesContent": ["import 'react';\n\ndeclare module 'react' {\n\tinterface CSSProperties {\n\t\t[ key: `--${ string }` ]: string | number | undefined;\n\t}\n}\n"],
-  "mappings": ";;;AAAA,mBAAO;",
-  "names": []
-}

package/build-module/types/css-modules.d.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=css-modules.d.mjs.map

package/build-module/types/react.d.mjs

@@ -1,3 +0,0 @@
-// packages/ui/src/types/react.d.ts
-import "react";
-//# sourceMappingURL=react.d.mjs.map

package/build-module/types/react.d.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/types/react.d.ts"],
-  "sourcesContent": ["import 'react';\n\ndeclare module 'react' {\n\tinterface CSSProperties {\n\t\t[ key: `--${ string }` ]: string | number | undefined;\n\t}\n}\n"],
-  "mappings": ";AAAA,OAAO;",
-  "names": []
-}

package/src/types/css-modules.d.ts

@@ -1,4 +0,0 @@
-declare module '*.module.css' {
-	const classes: { [ key: string ]: string };
-	export default classes;
-}

package/src/types/react.d.ts

@@ -1,7 +0,0 @@
-import 'react';
-
-declare module 'react' {
-	interface CSSProperties {
-		[ key: `--${ string }` ]: string | number | undefined;
-	}
-}