@wordpress/components 19.0.0 → 19.0.4

package/build-style/style.css

@@ -638,15 +638,15 @@ svg.components-checkbox-control__checked {
   justify-content: flex-end;
 }
 .components-circular-option-picker .components-circular-option-picker__swatches {
-  margin-right: -12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
 }
 
 .components-circular-option-picker__option-wrapper {
   display: inline-block;
   height: 28px;
   width: 28px;
-  margin-right: 12px;
-  margin-bottom: 12px;
   vertical-align: top;
   transform: scale(1);
   transition: 100ms transform ease;
@@ -753,55 +753,12 @@ svg.components-checkbox-control__checked {
   line-height: 22px;
 }
 
-.components-color-edit__color-option-main-area {
-  display: flex;
-  align-items: center;
-}
-.components-color-edit__color-option-main-area div.components-circular-option-picker__option-wrapper {
-  display: block;
-  margin: 8px;
-}
-
-.components-color-edit__color-option.is-hover {
-  background: #e0e0e0;
-}
-
-.components-color-edit__cancel-button {
-  float: right;
-}
-
-.components-color-edit__color-option-color-name {
-  width: 100%;
-}
-
-.components-color-edit__label-and-insert-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.components-color-edit__insert-button {
-  margin-top: -8px;
-}
-
-.components-color-edit__hidden-control {
-  position: relative;
-  left: -9999px;
-}
-
-.components-color-edit__color-option-color-name-input .components-base-control__field {
-  margin-bottom: 0;
-  margin-right: 8px;
-}
-
-.components-color-edit__slug-input {
-  margin-left: 8px;
-}
-
-.components-color-edit__reset-button {
-  float: right;
+@media (min-width: 782px) {
+  .components-color-edit__color-popover.components-popover .components-popover__content.components-popover__content.components-popover__content {
+    margin-right: 156px;
+    margin-top: -49px;
+  }
 }
-
 .component-color-indicator {
   width: 25px;
   height: 16px;
@@ -901,6 +858,27 @@ input.components-combobox-control__input[type=text]:focus {
   width: 100%;
 }
 
+.components-color-list-picker__color-picker {
+  margin: 8px 0;
+}
+
+.components-color-palette__custom-color {
+  border: none;
+  background: none;
+  outline: 0;
+  display: block;
+  border-radius: 2px;
+  height: 48px;
+  text-align: right;
+  width: 100%;
+  background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
+  background-position: 0 0, 25px 25px;
+  background-size: calc(2 * 25px) calc(2 * 25px);
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+}
+
 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
   opacity: 0.4;
 }
@@ -3161,6 +3139,12 @@ body.is-dragging-components-draggable {
     animation-delay: 0s;
   }
 }
+@media (min-width: 600px) {
+  .components-modal__frame.is-full-screen {
+    width: 90vw;
+    min-height: 90vh;
+  }
+}
 @media (min-width: 960px) {
   .components-modal__frame {
     max-height: 70%;
@@ -3926,6 +3910,10 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   display: block;
 }
 
+.components-resizable-box__container > img {
+  width: inherit;
+}
+
 .components-resizable-box__handle::after {
   display: block;
   content: "";

package/build-types/range-control/styles/range-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-control-styles.d.ts","sourceRoot":"","sources":["../../../src/range-control/styles/range-control-styles.js"],"names":[],"mappings":"AAoBA;;;0GAUE;AAQF;;;;;0GAWE;AAEF;;;4GAIE;AAEF;;;4GAIE;AAcF;;;;;;4GAcE;AAcF;;;;;;4GAYE;AAEF;;;4GAOE;AAcF;;;;;;4GASE;AAQF;;;;;4GAWE;AAWF;;;;;4GAkBE;AAoBF;;;;;4GAYE;AAEF;;;mHAaE;AAsBF;;;;;4GAwBE;AAIF;;;;;;;;;;;;;;;;;;WAYE;AAEF;;;4GAYE"}
+{"version":3,"file":"range-control-styles.d.ts","sourceRoot":"","sources":["../../../src/range-control/styles/range-control-styles.js"],"names":[],"mappings":"AAoBA;;;0GAUE;AAQF;;;;;0GAWE;AAEF;;;4GAIE;AAEF;;;4GAIE;AAcF;;;;;;4GAcE;AAcF;;;;;;4GAYE;AAEF;;;4GAOE;AAcF;;;;;;4GASE;AAQF;;;;;4GAWE;AAWF;;;;;4GAqBE;AAoBF;;;;;4GAYE;AAEF;;;mHAaE;AAsBF;;;;;4GAwBE;AAIF;;;;;;;;;;;;;;;;;;WAYE;AAEF;;;4GAYE"}

package/build-types/tools-panel/styles.d.ts

@@ -4,7 +4,7 @@ export declare const ToolsPanel: import("@emotion/utils").SerializedStyles;
  * an inner dom element to be injected. The following rule allows for the
  * CSS grid display to be re-established.
  */
-export declare const ToolsPanelWithInnerWrapper: import("@emotion/utils").SerializedStyles;
+export declare const ToolsPanelWithInnerWrapper: (columns: number) => import("@emotion/utils").SerializedStyles;
 export declare const ToolsPanelHiddenInnerWrapper: import("@emotion/utils").SerializedStyles;
 export declare const ToolsPanelHeader: import("@emotion/utils").SerializedStyles;
 export declare const ToolsPanelHeading: import("@emotion/utils").SerializedStyles;

package/build-types/tools-panel/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/tools-panel/styles.ts"],"names":[],"mappings":"AAgCA,eAAO,MAAM,UAAU,2CAMtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,2CAKtC,CAAC;AAEF,eAAO,MAAM,4BAA4B,2CAIxC,CAAC;AAEF,eAAO,MAAM,gBAAgB,2CAsB5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,2CAS7B,CAAC;AAEF,eAAO,MAAM,cAAc,2CAwB1B,CAAC;AAEF,eAAO,MAAM,yBAAyB,2CAErC,CAAC;AAEF,eAAO,MAAM,YAAY,2CAExB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/tools-panel/styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,UAAU,2CAMtB,CAAC;AAEF;;;;GAIG;AAEH,eAAO,MAAM,0BAA0B,YAAc,MAAM,8CAS1D,CAAC;AAEF,eAAO,MAAM,4BAA4B,2CAIxC,CAAC;AAEF,eAAO,MAAM,gBAAgB,2CAkB5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,2CAS7B,CAAC;AAEF,eAAO,MAAM,cAAc,2CAoB1B,CAAC;AAEF,eAAO,MAAM,yBAAyB,2CAErC,CAAC;AAEF,eAAO,MAAM,YAAY,2CAExB,CAAC"}

package/build-types/tools-panel/tools-panel/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel/component.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AA6BhD,QAAA,MAAM,mBAAmB,6EAA6C,CAAC;AAEvE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel/component.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAgChD,QAAA,MAAM,mBAAmB,6EAA6C,CAAC;AAEvE,eAAe,mBAAmB,CAAC"}

package/build-types/tools-panel/tools-panel/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel/hook.ts"],"names":[],"mappings":";AASA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,KAAK,EACX,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EAEnB,eAAe,EACf,MAAM,UAAU,CAAC;AAgBlB,wBAAgB,aAAa,CAC5B,KAAK,EAAE,uBAAuB,CAAE,eAAe,EAAE,KAAK,CAAE;;;;kCA2BtB,cAAc;qCAMX,MAAM;uCAgCnC,MAAM,UACN,qBAAqB;;;;;;;wBAmDD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiElC"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel/hook.ts"],"names":[],"mappings":";AASA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,KAAK,EACX,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EAEnB,eAAe,EACf,MAAM,UAAU,CAAC;AAkBlB,wBAAgB,aAAa,CAC5B,KAAK,EAAE,uBAAuB,CAAE,eAAe,EAAE,KAAK,CAAE;;;;kCA2BtB,cAAc;qCAMX,MAAM;uCAgCnC,MAAM,UACN,qBAAqB;;;;;;;wBAoDD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiElC"}

package/build-types/tools-panel/tools-panel-header/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-header/component.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAEX,qBAAqB,EACrB,MAAM,UAAU,CAAC;AAkKlB,QAAA,MAAM,yBAAyB,kFAG9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-header/component.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAEX,qBAAqB,EACrB,MAAM,UAAU,CAAC;AAmKlB,QAAA,MAAM,yBAAyB,kFAG9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/build-types/utils/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export { default as useControlledState } from "./use-controlled-state";
 export { default as useUpdateEffect } from "./use-update-effect";
+export { useCombinedRef } from "./use-combined-ref";
 export { useControlledValue } from "./use-controlled-value";
 export { useCx } from "./use-cx";
 export { useLatestRef } from "./use-latest-ref";

package/build-types/utils/hooks/use-combined-ref.d.ts

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { MutableRefObject, RefCallback } from 'react';
+declare type Ref<T> = MutableRefObject<T | null> | RefCallback<T | null>;
+export declare function useCombinedRef<T extends HTMLElement>(...refs: Ref<T>[]): MutableRefObject<null>;
+export {};
+//# sourceMappingURL=use-combined-ref.d.ts.map

package/build-types/utils/hooks/use-combined-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-combined-ref.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-combined-ref.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3D,aAAK,GAAG,CAAE,CAAC,IAAK,gBAAgB,CAAE,CAAC,GAAG,IAAI,CAAE,GAAG,WAAW,CAAE,CAAC,GAAG,IAAI,CAAE,CAAC;AAEvE,wBAAgB,cAAc,CAAE,CAAC,SAAS,WAAW,EAAI,GAAG,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,0BAgB3E"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.0.0",
+	"version": "19.0.4",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,25 +29,25 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.13.10",
+		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.4.0",
 		"@emotion/css": "^11.1.3",
 		"@emotion/react": "^11.4.1",
 		"@emotion/styled": "^11.3.0",
 		"@emotion/utils": "1.0.0",
-		"@wordpress/a11y": "^3.2.3",
-		"@wordpress/compose": "^5.0.4",
-		"@wordpress/date": "^4.2.2",
-		"@wordpress/deprecated": "^3.2.2",
-		"@wordpress/dom": "^3.2.5",
-		"@wordpress/element": "^4.0.3",
-		"@wordpress/hooks": "^3.2.1",
-		"@wordpress/i18n": "^4.2.3",
-		"@wordpress/icons": "^6.0.1",
-		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keycodes": "^3.2.3",
-		"@wordpress/primitives": "^3.0.3",
-		"@wordpress/rich-text": "^5.0.4",
+		"@wordpress/a11y": "^3.2.4",
+		"@wordpress/compose": "^5.0.6",
+		"@wordpress/date": "^4.2.3",
+		"@wordpress/deprecated": "^3.2.3",
+		"@wordpress/dom": "^3.2.7",
+		"@wordpress/element": "^4.0.4",
+		"@wordpress/hooks": "^3.2.2",
+		"@wordpress/i18n": "^4.2.4",
+		"@wordpress/icons": "^6.1.1",
+		"@wordpress/is-shallow-equal": "^4.2.1",
+		"@wordpress/keycodes": "^3.2.4",
+		"@wordpress/primitives": "^3.0.4",
+		"@wordpress/rich-text": "^5.0.6",
 		"@wordpress/warning": "^2.2.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "157f4ae53ab98e574af01f72213ae5a9613159ff"
+	"gitHead": "ca22e8852fcc91889510e417bdaa180ad60f8dac"
 }

package/src/angle-picker-control/index.js

@@ -49,7 +49,9 @@ export default function AnglePickerControl( {
 						<Spacer
 							as={ Text }
 							marginRight={ space( 3 ) }
-							color="blue"
+							style={ {
+								color: 'var( --wp-admin-theme-color )',
+							} }
 						>
 							°
 						</Spacer>

package/src/angle-picker-control/styles/angle-picker-control-styles.js

@@ -36,9 +36,9 @@ export const CircleIndicatorWrapper = styled.div`
 `;
 
 export const CircleIndicator = styled.div`
-	background: #3858e9;
+	background: ${ COLORS.admin.theme };
 	border-radius: 50%;
-	border: ${ INNER_CIRCLE_SIZE }px solid #3858e9;
+	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.admin.theme };
 	bottom: 0;
 	box-sizing: border-box;
 	display: block;

package/src/base-control/index.js

@@ -74,7 +74,7 @@ function BaseControl( {
 			</StyledField>
 			{ !! help && (
 				<StyledHelp
-					id={ id + '__help' }
+					id={ id ? id + '__help' : undefined }
 					className="components-base-control__help"
 				>
 					{ help }

package/src/circular-option-picker/style.scss

@@ -11,10 +11,10 @@ $color-palette-circle-spacing: 12px;
 		justify-content: flex-end;
 	}
 
-	// Effectively negates the end swatch spacing to keep the swatches
-	// from wrapping before necessary.
 	.components-circular-option-picker__swatches {
-		margin-right: -$color-palette-circle-spacing;
+		display: flex;
+		flex-wrap: wrap;
+		gap: $color-palette-circle-spacing;
 	}
 }
 
@@ -22,8 +22,6 @@ $color-palette-circle-spacing: 12px;
 	display: inline-block;
 	height: $color-palette-circle-size;
 	width: $color-palette-circle-size;
-	margin-right: $color-palette-circle-spacing;
-	margin-bottom: $color-palette-circle-spacing;
 	vertical-align: top;
 	transform: scale(1);
 	transition: 100ms transform ease;