@wordpress/components 21.0.2 → 21.0.4

package/src/popover/limit-shift.ts

@@ -0,0 +1,205 @@
+/**
+ * External dependencies
+ */
+import type {
+	Axis,
+	Coords,
+	Placement,
+	Side,
+	MiddlewareArguments,
+} from '@floating-ui/react-dom';
+
+/**
+ * Parts of this source were derived and modified from `floating-ui`,
+ * released under the MIT license.
+ *
+ * https://github.com/floating-ui/floating-ui
+ *
+ * Copyright (c) 2021 Floating UI contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Custom limiter function for the `shift` middleware.
+ * This function is mostly identical default `limitShift` from ``@floating-ui`;
+ * the only difference is that, when computing the min/max shift limits, it
+ * also takes into account the iframe offset that is added by the
+ * custom "frameOffset" middleware.
+ *
+ * All unexported types and functions are also from the `@floating-ui` library,
+ * and have been copied to this file for convenience.
+ */
+
+type LimitShiftOffset =
+	| ( ( args: MiddlewareArguments ) =>
+			| number
+			| {
+					/**
+					 * Offset the limiting of the axis that runs along the alignment of the
+					 * floating element.
+					 */
+					mainAxis?: number;
+					/**
+					 * Offset the limiting of the axis that runs along the side of the
+					 * floating element.
+					 */
+					crossAxis?: number;
+			  } )
+	| number
+	| {
+			/**
+			 * Offset the limiting of the axis that runs along the alignment of the
+			 * floating element.
+			 */
+			mainAxis?: number;
+			/**
+			 * Offset the limiting of the axis that runs along the side of the
+			 * floating element.
+			 */
+			crossAxis?: number;
+	  };
+
+type LimitShiftOptions = {
+	/**
+	 * Offset when limiting starts. `0` will limit when the opposite edges of the
+	 * reference and floating elements are aligned.
+	 * - positive = start limiting earlier
+	 * - negative = start limiting later
+	 */
+	offset: LimitShiftOffset;
+	/**
+	 * Whether to limit the axis that runs along the alignment of the floating
+	 * element.
+	 */
+	mainAxis: boolean;
+	/**
+	 * Whether to limit the axis that runs along the side of the floating element.
+	 */
+	crossAxis: boolean;
+};
+
+function getSide( placement: Placement ): Side {
+	return placement.split( '-' )[ 0 ] as Side;
+}
+
+function getMainAxisFromPlacement( placement: Placement ): Axis {
+	return [ 'top', 'bottom' ].includes( getSide( placement ) ) ? 'x' : 'y';
+}
+
+function getCrossAxis( axis: Axis ): Axis {
+	return axis === 'x' ? 'y' : 'x';
+}
+
+export const limitShift = (
+	options: Partial< LimitShiftOptions > = {}
+): {
+	options: Partial< LimitShiftOffset >;
+	fn: ( middlewareArguments: MiddlewareArguments ) => Coords;
+} => ( {
+	options,
+	fn( middlewareArguments ) {
+		const { x, y, placement, rects, middlewareData } = middlewareArguments;
+		const {
+			offset = 0,
+			mainAxis: checkMainAxis = true,
+			crossAxis: checkCrossAxis = true,
+		} = options;
+
+		const coords = { x, y };
+		const mainAxis = getMainAxisFromPlacement( placement );
+		const crossAxis = getCrossAxis( mainAxis );
+
+		let mainAxisCoord = coords[ mainAxis ];
+		let crossAxisCoord = coords[ crossAxis ];
+
+		const rawOffset =
+			typeof offset === 'function'
+				? offset( middlewareArguments )
+				: offset;
+		const computedOffset =
+			typeof rawOffset === 'number'
+				? { mainAxis: rawOffset, crossAxis: 0 }
+				: { mainAxis: 0, crossAxis: 0, ...rawOffset };
+
+		// At the moment of writing, this is the only difference
+		// with the `limitShift` function from `@floating-ui`.
+		// This offset needs to be added to all min/max limits
+		// in order to make the shift-limiting work as expected.
+		const additionalFrameOffset = {
+			x: 0,
+			y: 0,
+			...middlewareData.frameOffset?.amount,
+		};
+
+		if ( checkMainAxis ) {
+			const len = mainAxis === 'y' ? 'height' : 'width';
+			const limitMin =
+				rects.reference[ mainAxis ] -
+				rects.floating[ len ] +
+				computedOffset.mainAxis +
+				additionalFrameOffset[ mainAxis ];
+			const limitMax =
+				rects.reference[ mainAxis ] +
+				rects.reference[ len ] -
+				computedOffset.mainAxis +
+				additionalFrameOffset[ mainAxis ];
+
+			if ( mainAxisCoord < limitMin ) {
+				mainAxisCoord = limitMin;
+			} else if ( mainAxisCoord > limitMax ) {
+				mainAxisCoord = limitMax;
+			}
+		}
+
+		if ( checkCrossAxis ) {
+			const len = mainAxis === 'y' ? 'width' : 'height';
+			const isOriginSide = [ 'top', 'left' ].includes(
+				getSide( placement )
+			);
+			const limitMin =
+				rects.reference[ crossAxis ] -
+				rects.floating[ len ] +
+				( isOriginSide
+					? middlewareData.offset?.[ crossAxis ] ?? 0
+					: 0 ) +
+				( isOriginSide ? 0 : computedOffset.crossAxis ) +
+				additionalFrameOffset[ crossAxis ];
+			const limitMax =
+				rects.reference[ crossAxis ] +
+				rects.reference[ len ] +
+				( isOriginSide
+					? 0
+					: middlewareData.offset?.[ crossAxis ] ?? 0 ) -
+				( isOriginSide ? computedOffset.crossAxis : 0 ) +
+				additionalFrameOffset[ crossAxis ];
+
+			if ( crossAxisCoord < limitMin ) {
+				crossAxisCoord = limitMin;
+			} else if ( crossAxisCoord > limitMax ) {
+				crossAxisCoord = limitMax;
+			}
+		}
+
+		return {
+			[ mainAxis ]: mainAxisCoord,
+			[ crossAxis ]: crossAxisCoord,
+		} as Coords;
+	},
+} );

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

@@ -159,6 +159,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-15 {
+  color: #1e1e1e;
   width: 30px;
   padding-left: 0;
   padding-right: 0;

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -55,13 +55,6 @@ export const buttonView = css`
 	}
 `;
 
-export const buttonActive = css`
-	color: ${ COLORS.white };
-	&:active {
-		background: transparent;
-	}
-`;
-
 export const ButtonContentView = styled.div`
 	font-size: ${ CONFIG.fontSize };
 	line-height: 1;
@@ -82,8 +75,17 @@ export const isIcon = ( {
 	};
 
 	return css`
+		color: ${ COLORS.gray[ 900 ] };
 		width: ${ iconButtonSizes[ size ] };
 		padding-left: 0;
 		padding-right: 0;
 	`;
 };
+
+export const buttonActive = css`
+	color: ${ COLORS.white };
+
+	&:active {
+		background: transparent;
+	}
+`;

package/src/tree-grid/index.js

@@ -36,12 +36,13 @@ function getRowFocusables( rowElement ) {
  * Renders both a table and tbody element, used to create a tree hierarchy.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
- * @param {Object}    props               Component props.
- * @param {WPElement} props.children      Children to be rendered.
- * @param {Function}  props.onExpandRow   Callback to fire when row is expanded.
- * @param {Function}  props.onCollapseRow Callback to fire when row is collapsed.
- * @param {Function}  props.onFocusRow    Callback to fire when moving focus to a different row.
- * @param {Object}    ref                 A ref to the underlying DOM table element.
+ * @param {Object}    props                      Component props.
+ * @param {WPElement} props.children             Children to be rendered.
+ * @param {Function}  props.onExpandRow          Callback to fire when row is expanded.
+ * @param {Function}  props.onCollapseRow        Callback to fire when row is collapsed.
+ * @param {Function}  props.onFocusRow           Callback to fire when moving focus to a different row.
+ * @param {string}    props.applicationAriaLabel Label to use for the application role.
+ * @param {Object}    ref                        A ref to the underlying DOM table element.
  */
 function TreeGrid(
 	{
@@ -49,6 +50,7 @@ function TreeGrid(
 		onExpandRow = () => {},
 		onCollapseRow = () => {},
 		onFocusRow = () => {},
+		applicationAriaLabel,
 		...props
 	},
 	ref
@@ -286,14 +288,21 @@ function TreeGrid(
 	/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 	return (
 		<RovingTabIndexContainer>
-			<table
-				{ ...props }
-				role="treegrid"
-				onKeyDown={ onKeyDown }
-				ref={ ref }
-			>
-				<tbody>{ children }</tbody>
-			</table>
+			{
+				// Prevent browser mode from triggering in NVDA by wrapping List View
+				// in a role=application wrapper.
+				// see: https://github.com/WordPress/gutenberg/issues/43729
+			 }
+			<div role="application" aria-label={ applicationAriaLabel }>
+				<table
+					{ ...props }
+					role="treegrid"
+					onKeyDown={ onKeyDown }
+					ref={ ref }
+				>
+					<tbody>{ children }</tbody>
+				</table>
+			</div>
 		</RovingTabIndexContainer>
 	);
 	/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */

package/src/tree-grid/test/__snapshots__/cell.js.snap

@@ -1,23 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TreeGridCell uses a child render function to render children 1`] = `
-<table
-  onKeyDown={[Function]}
-  role="treegrid"
+<div
+  role="application"
 >
-  <tbody>
-    <tr>
-      <td
-        role="gridcell"
-      >
-        <button
-          className="my-button"
-          onFocus={[Function]}
+  <table
+    onKeyDown={[Function]}
+    role="treegrid"
+  >
+    <tbody>
+      <tr>
+        <td
+          role="gridcell"
         >
-          Click Me!
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
+          <button
+            className="my-button"
+            onFocus={[Function]}
+          >
+            Click Me!
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table>"`;
+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>"`;