From 441d0123955b687db824983b4d907b5ade8b51b4 Mon Sep 17 00:00:00 2001
From: lipemat <mat@matlipe.com>
Date: Mon, 15 Feb 2021 17:08:33 -0500
Subject: [PATCH] Add Grid component to @wordpress/components

Available as of Gutenberg 9.9

https://make.wordpress.org/core/2021/02/05/whats-new-in-gutenberg-9-9-5-february/

https://github.com/WordPress/gutenberg/pull/28531
---
 wordpress__components/index.d.ts | 70 +++++++++++++++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

diff --git a/wordpress__components/index.d.ts b/wordpress__components/index.d.ts
index ed038f5..b2ad187 100644
--- a/wordpress__components/index.d.ts
+++ b/wordpress__components/index.d.ts
@@ -1,5 +1,12 @@
 declare module '@wordpress/components' {
-	import {ComponentType, InputHTMLAttributes, ReactNode, SelectHTMLAttributes, SVGAttributes} from 'react';
+	import {
+		ComponentType,
+		CSSProperties,
+		InputHTMLAttributes,
+		ReactNode,
+		SelectHTMLAttributes,
+		SVGAttributes,
+	} from 'react';
 	import {ClassNamesFn} from 'classnames/types';
 	import {SVG} from '@wordpress/primitives';
 
@@ -366,6 +373,65 @@ declare module '@wordpress/components' {
 		className: string;
 	}
 
+	interface Grid {
+		align?: CSSProperties['alignItems'];
+		/**
+		 * Adjusts the horizontal and vertical alignment of children.
+		 */
+		alignment?:
+			'bottom'
+			| 'bottomLeft'
+			| 'bottomRight'
+			| 'center'
+			| 'edge'
+			| 'left'
+			| 'right'
+			| 'stretch'
+			| 'top'
+			| 'topLeft'
+			| 'topRight';
+		/**
+		 * Adjusts the number of columns of the `Grid`.
+		 *
+		 * @default 2
+		 */
+		columns?: Array<number | undefined> | number;
+		/**
+		 * Adjusts the `grid-column-gap`.
+		 */
+		columnGap?: CSSProperties['gridColumnGap'];
+		/**
+		 * Changes the CSS display from `grid` to `inline-grid`.
+		 */
+		isInline?: boolean;
+		/**
+		 * Gap between each child.
+		 *
+		 * @default 3
+		 */
+		gap?: number;
+		/**
+		 * Adjusts the inline alignment of children.
+		 */
+		justify?: CSSProperties['justifyContent'];
+		/**
+		 * Adjusts the `grid-row-gap`.
+		 */
+		rowGap?: CSSProperties['gridRowGap'];
+		/**
+		 * Adjusts the number of rows of the `Grid`.
+		 */
+		rows?: Array<number | undefined> | number;
+		/**
+		 * Adjusts the CSS grid `template-columns`.
+		 */
+		templateColumns?: CSSProperties['gridTemplateColumns'];
+		/**
+		 * Adjusts the CSS grid `template-rows`.
+		 */
+		templateRows?: CSSProperties['gridTemplateRows'];
+	}
+
 	interface Guide {
 		onFinish: () => void;
 		children: ComponentType<GuidePage>[];
@@ -434,6 +500,7 @@ declare module '@wordpress/components' {
 	export const ColorPalette: ComponentType<ColorPalette>;
 	export const ColorPicker: ComponentType<ColorPicker>;
 	export const Dashicon: ComponentType<Dashicon>;
+	export const Grid: ComponentType<Grid>;
 	export const Guide: ComponentType<Guide>;
 	export const GuidePage: ComponentType<GuidePage>;
 	export const PanelBody: ComponentType<PanelBody>;
@@ -450,6 +517,7 @@ declare module '@wordpress/components' {
 		ColorPalette: ComponentType<ColorPalette>;
 		ColorPicker: ComponentType<ColorPicker>;
 		Dashicon: ComponentType<Dashicon>;
+		Grid: ComponentType<Grid>;
 		Guide: ComponentType<Guide>;
 		GuidePage: ComponentType<GuidePage>;
 		PanelBody: ComponentType<PanelBody>;