@wordpress/components 20.0.1-next.d6164808d3.0 → 20.0.2-next.957ca95e4c.0

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

@@ -22,6 +22,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-6 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -31,7 +38,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-8 {
   background: #fff;
   border: 1px solid transparent;
   border-radius: 2px;
@@ -49,23 +56,23 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-6 {
+  .emotion-8 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-6:focus-within {
+.emotion-8:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }
 
-.emotion-6:hover {
+.emotion-8:hover {
   border-color: #757575;
 }
 
-.emotion-8 {
+.emotion-10 {
   background: #1e1e1e;
   border-radius: 2px;
   box-shadow: transparent;
@@ -79,12 +86,12 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-8 {
+  .emotion-10 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -97,7 +104,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   flex: 1;
 }
 
-.emotion-12 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -138,34 +145,34 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-12 {
+  .emotion-14 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-12::-moz-focus-inner {
+.emotion-14::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-12:active {
+.emotion-14:active {
   background: #fff;
 }
 
-.emotion-13 {
+.emotion-15 {
   width: 30px;
   padding-left: 0;
   padding-right: 0;
 }
 
-.emotion-14 {
+.emotion-16 {
   color: #fff;
 }
 
-.emotion-14:active {
+.emotion-16:active {
   background: transparent;
 }
 
-.emotion-15 {
+.emotion-17 {
   font-size: 13px;
   line-height: 1;
 }
@@ -176,16 +183,18 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   <div
     class="components-base-control__field emotion-2 emotion-3"
   >
-    <div>
+    <div
+      class="emotion-4 emotion-5"
+    >
       <span
-        class="components-base-control__label emotion-4 emotion-5"
+        class="components-base-control__label emotion-6 emotion-7"
       >
         Test Toggle Group Control
       </span>
     </div>
     <div
       aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-6 emotion-7"
+      class="components-toggle-group-control emotion-8 emotion-9"
       data-wp-c16t="true"
       data-wp-component="ToggleGroupControl"
       id="toggle-group-control-1"
@@ -196,18 +205,18 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
       />
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         role="presentation"
         style="transform: translateX(0px); transition: none; width: 0px;"
       />
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
         data-active="true"
       >
         <button
           aria-checked="true"
           aria-label="Uppercase"
-          class="emotion-12 emotion-13 components-toggle-group-control-option-base emotion-14"
+          class="emotion-14 emotion-15 components-toggle-group-control-option-base emotion-16"
           data-value="uppercase"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -216,7 +225,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
           tabindex="0"
         >
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-17 emotion-18"
           >
             <svg
               aria-hidden="true"
@@ -234,13 +243,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         </button>
       </div>
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="Lowercase"
-          class="emotion-12 emotion-13 components-toggle-group-control-option-base"
+          class="emotion-14 emotion-15 components-toggle-group-control-option-base"
           data-value="lowercase"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -249,7 +258,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
           tabindex="-1"
         >
           <div
-            class="emotion-15 emotion-16"
+            class="emotion-17 emotion-18"
           >
             <svg
               aria-hidden="true"
@@ -293,6 +302,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-6 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -302,7 +318,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-8 {
   background: #fff;
   border: 1px solid transparent;
   border-radius: 2px;
@@ -320,23 +336,23 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-6 {
+  .emotion-8 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-6:focus-within {
+.emotion-8:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }
 
-.emotion-6:hover {
+.emotion-8:hover {
   border-color: #757575;
 }
 
-.emotion-8 {
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -349,7 +365,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   flex: 1;
 }
 
-.emotion-10 {
+.emotion-12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -390,20 +406,20 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-10 {
+  .emotion-12 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-10::-moz-focus-inner {
+.emotion-12::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-10:active {
+.emotion-12:active {
   background: #fff;
 }
 
-.emotion-11 {
+.emotion-13 {
   font-size: 13px;
   line-height: 1;
 }
@@ -414,16 +430,18 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   <div
     class="components-base-control__field emotion-2 emotion-3"
   >
-    <div>
+    <div
+      class="emotion-4 emotion-5"
+    >
       <span
-        class="components-base-control__label emotion-4 emotion-5"
+        class="components-base-control__label emotion-6 emotion-7"
       >
         Test Toggle Group Control
       </span>
     </div>
     <div
       aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-6 emotion-7"
+      class="components-toggle-group-control emotion-8 emotion-9"
       data-wp-c16t="true"
       data-wp-component="ToggleGroupControl"
       id="toggle-group-control-0"
@@ -434,13 +452,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
         style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
       />
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="R"
-          class="emotion-10 components-toggle-group-control-option-base"
+          class="emotion-12 components-toggle-group-control-option-base"
           data-value="rigas"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -449,20 +467,20 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
           tabindex="0"
         >
           <div
-            class="emotion-11 emotion-12"
+            class="emotion-13 emotion-14"
           >
             R
           </div>
         </button>
       </div>
       <div
-        class="emotion-8 emotion-9"
+        class="emotion-10 emotion-11"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="J"
-          class="emotion-10 components-toggle-group-control-option-base"
+          class="emotion-12 components-toggle-group-control-option-base"
           data-value="jack"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -471,7 +489,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
           tabindex="-1"
         >
           <div
-            class="emotion-11 emotion-12"
+            class="emotion-13 emotion-14"
           >
             J
           </div>

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -31,6 +31,7 @@ import BaseControl from '../../base-control';
 import type { ToggleGroupControlProps } from '../types';
 import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
 import ToggleGroupControlContext from '../context';
+import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
 
 const noop = () => {};
@@ -102,11 +103,11 @@ function UnconnectedToggleGroupControl(
 				value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
 			>
 				{ ! hideLabelFromVision && (
-					<div>
+					<VisualLabelWrapper>
 						<BaseControl.VisualLabel>
 							{ label }
 						</BaseControl.VisualLabel>
-					</div>
+					</VisualLabelWrapper>
 				) }
 				<RadioGroup
 					{ ...radio }

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

@@ -73,3 +73,8 @@ export const BackdropView = styled.div`
 	${ reduceMotion( 'transition' ) }
 	z-index: 1;
 `;
+
+export const VisualLabelWrapper = styled.div`
+	// Makes the inline label be the correct height, equivalent to setting line-height: 0
+	display: flex;
+`;

package/src/tooltip/index.js

@@ -1,8 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -211,7 +207,7 @@ function Tooltip( props ) {
 			// quickly blur/mouseleave before delayedSetIsOver is called.
 			delayedSetIsOver.cancel();
 
-			const _isOver = includes( [ 'focus', 'mouseenter' ], event.type );
+			const _isOver = [ 'focus', 'mouseenter' ].includes( event.type );
 			if ( _isOver === isOver ) {
 				return;
 			}

package/src/tree-grid/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -68,7 +63,7 @@ function TreeGrid(
 
 			if (
 				hasModifierKeyPressed ||
-				! includes( [ UP, DOWN, LEFT, RIGHT, HOME, END ], keyCode )
+				! [ UP, DOWN, LEFT, RIGHT, HOME, END ].includes( keyCode )
 			) {
 				return;
 			}
@@ -92,7 +87,7 @@ function TreeGrid(
 				activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
 				keyCode === RIGHT;
 
-			if ( includes( [ LEFT, RIGHT ], keyCode ) ) {
+			if ( [ LEFT, RIGHT ].includes( keyCode ) ) {
 				// Calculate to the next element.
 				let nextIndex;
 				if ( keyCode === LEFT ) {
@@ -177,7 +172,7 @@ function TreeGrid(
 				// Prevent key use for anything else. This ensures Voiceover
 				// doesn't try to handle key navigation.
 				event.preventDefault();
-			} else if ( includes( [ UP, DOWN ], keyCode ) ) {
+			} else if ( [ UP, DOWN ].includes( keyCode ) ) {
 				// Calculate the rowIndex of the next row.
 				const rows = Array.from(
 					treeGridElement.querySelectorAll( '[role="row"]' )
@@ -231,7 +226,7 @@ function TreeGrid(
 				// Prevent key use for anything else. This ensures Voiceover
 				// doesn't try to handle key navigation.
 				event.preventDefault();
-			} else if ( includes( [ HOME, END ], keyCode ) ) {
+			} else if ( [ HOME, END ].includes( keyCode ) ) {
 				// Calculate the rowIndex of the next row.
 				const rows = Array.from(
 					treeGridElement.querySelectorAll( '[role="row"]' )

package/src/utils/strings.ts

@@ -70,3 +70,14 @@ export const normalizeTextString = ( value: string ): string => {
 		.toLocaleLowerCase()
 		.replace( ALL_UNICODE_DASH_CHARACTERS, '-' );
 };
+
+/**
+ * Escapes the RegExp special characters.
+ *
+ * @param {string} string Input string.
+ *
+ * @return {string} Regex-escaped string.
+ */
+export function escapeRegExp( string: string ): string {
+	return string.replace( /[\\^$.*+?()[\]{}|]/g, '\\$&' );
+}

package/tsconfig.json

@@ -30,80 +30,7 @@
 		{ "path": "../react-i18n" },
 		{ "path": "../warning" }
 	],
-	"include": [
-		"src/__next/**/*",
-		"src/animate/**/*",
-		"src/base-control/**/*",
-		"src/base-field/**/*",
-		"src/border-box-control/**/*",
-		"src/border-control/**/*",
-		"src/button/**/*",
-		"src/button-group/**/*",
-		"src/card/**/*",
-		"src/checkbox-control/**/*",
-		"src/circular-option-picker/**/*",
-		"src/color-indicator/**/*",
-		"src/color-palette/**/*",
-		"src/color-picker/**/*",
-		"src/confirm-dialog/**/*",
-		"src/dashicon/**/*",
-		"src/date-time/**/*",
-		"src/disabled/**/*",
-		"src/divider/**/*",
-		"src/draggable/**/*",
-		"src/dropdown/**/*",
-		"src/dropdown-menu/**/*",
-		"src/elevation/**/*",
-		"src/external-link/**/*",
-		"src/flex/**/*",
-		"src/form-group/**/*",
-		"src/form-toggle/**/*",
-		"src/form-token-field/**/*",
-		"src/grid/**/*",
-		"src/h-stack/**/*",
-		"src/heading/**/*",
-		"src/higher-order/with-focus-outside/**/*",
-		"src/icon/**/*",
-		"src/input-control/**/*",
-		"src/item-group/**/*",
-		"src/menu-item/**/*",
-		"src/menu-group/**/*",
-		"src/modal/**/*",
-		"src/navigable-container/**/*",
-		"src/navigator/**/*",
-		"src/number-control/**/*",
-		"src/placeholder/**/*",
-		"src/popover/**/*",
-		"src/radio-control/**/*",
-		"src/range-control/**/*",
-		"src/resizable-box/**/*",
-		"src/scroll-lock/**/*",
-		"src/scrollable/**/*",
-		"src/select-control/**/*",
-		"src/shortcut/**/*",
-		"src/slot-fill/**/*",
-		"src/style-provider/**/*",
-		"src/spacer/**/*",
-		"src/spinner/**/*",
-		"src/surface/**/*",
-		"src/text/**/*",
-		"src/text-control/**/*",
-		"src/text-highlight/**/*",
-		"src/textarea-control/**/*",
-		"src/tip/**/*",
-		"src/toggle-group-control/**/*",
-		"src/tools-panel/**/*",
-		"src/tooltip/**/*",
-		"src/tree-select/**/*",
-		"src/truncate/**/*",
-		"src/ui/**/*",
-		"src/unit-control/**/*",
-		"src/utils/**/*",
-		"src/v-stack/**/*",
-		"src/view/**/*",
-		"src/visually-hidden/**/*",
-		"src/z-stack/**/*"
-	],
+	"include": [ "src/**/*" ],
 	"exclude": [
 		"src/**/*.android.js",
 		"src/**/*.ios.js",
@@ -111,7 +38,49 @@
 		"src/**/react-native-*",
 		"src/**/stories/**.js", // only exclude js files, tsx files should be checked
 		"src/**/test/**.js", // only exclude js files, ts{x} files should be checked
-		"src/ui/__storybook-utils",
-		"src/ui/font-size-control"
+		"src/index.js",
+		"src/alignment-matrix-control",
+		"src/angle-picker-control",
+		"src/autocomplete",
+		"src/box-control",
+		"src/color-list-picker",
+		"src/combobox-control",
+		"src/custom-gradient-picker",
+		"src/custom-select-control",
+		"src/dimension-control",
+		"src/drop-zone",
+		"src/duotone-picker",
+		"src/focal-point-picker",
+		"src/font-size-picker",
+		"src/form-file-upload",
+		"src/gradient-picker",
+		"src/guide",
+		"src/higher-order/navigate-regions",
+		"src/higher-order/with-fallback-styles",
+		"src/higher-order/with-filters",
+		"src/higher-order/with-focus-return",
+		"src/higher-order/with-notices",
+		"src/keyboard-shortcuts",
+		"src/menu-items-choice",
+		"src/navigation",
+		"src/notice",
+		"src/palette-edit",
+		"src/panel",
+		"src/query-controls",
+		"src/radio",
+		"src/radio-group",
+		"src/responsive-wrapper",
+		"src/sandbox",
+		"src/search-control",
+		"src/snackbar",
+		"src/tab-panel",
+		"src/toggle-control",
+		"src/toolbar",
+		"src/toolbar-button",
+		"src/toolbar-context",
+		"src/toolbar-dropdown-menu",
+		"src/toolbar-group",
+		"src/toolbar-item",
+		"src/tree-grid"
 	]
 }