@wordpress/components 29.9.0 → 29.10.0

package/build-style/style.css

@@ -1,16 +1,13 @@
 @charset "UTF-8";
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
 /**
  * Colors
  */
 /**
  * Breakpoints & Media Queries
  */
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -19,14 +16,50 @@
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
 /**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
 /**
  * Colors
  */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
 /**
  * Fonts & basic variables.
  */
@@ -62,6 +95,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -569,19 +605,19 @@ p + .components-button.is-tertiary {
 }
 
 .components-checkbox-control__input[type=checkbox] {
+  border: 1px solid #1e1e1e;
+  margin-right: 12px;
+  transition: none;
+  border-radius: 2px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  border: 1px solid #1e1e1e;
-  margin-right: 12px;
-  transition: none;
+  box-shadow: 0 0 0 transparent;
   border-radius: 2px;
+  border: 1px solid #949494;
   background: #fff;
   color: #1e1e1e;
   clear: none;
@@ -910,13 +946,13 @@ input.components-combobox-control__input[type=text]:focus {
 .components-combobox-control__suggestions-container {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
+  box-shadow: 0 0 0 transparent;
+  border-radius: 2px;
+  border: 1px solid #949494;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
@@ -1436,13 +1472,13 @@ body.is-dragging-components-draggable {
 .components-form-token-field__input-container {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
+  box-shadow: 0 0 0 transparent;
+  border-radius: 2px;
+  border: 1px solid #949494;
   width: 100%;
   padding: 0;
   cursor: text;
@@ -2389,13 +2425,13 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder__input[type=url] {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
+  box-shadow: 0 0 0 transparent;
+  border-radius: 2px;
+  border: 1px solid #949494;
   flex: 1 1 auto;
 }
 @media not (prefers-reduced-motion) {
@@ -2671,15 +2707,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-radio-control__input[type=radio] {
   grid-column: 1;
   grid-row: 1;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
-  /* Fonts smaller than 16px causes mobile safari to zoom. */
-  font-size: 16px;
-  /* Override core line-height. To be reviewed. */
-  line-height: normal;
   border: 1px solid #1e1e1e;
   margin-right: 12px;
   transition: none;
@@ -2700,27 +2727,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
     transition: box-shadow 0.1s linear;
   }
 }
-@media (min-width: 600px) {
-  .components-radio-control__input[type=radio] {
-    font-size: 13px;
-    /* Override core line-height. To be reviewed. */
-    line-height: normal;
-  }
-}
-.components-radio-control__input[type=radio]:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-.components-radio-control__input[type=radio]::-webkit-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-radio-control__input[type=radio]::-moz-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.components-radio-control__input[type=radio]:-ms-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
 @media (min-width: 600px) {
   .components-radio-control__input[type=radio] {
     height: 16px;
@@ -3028,16 +3034,19 @@ body.lockscroll {
   cursor: pointer;
 }
 
-.components-snackbar__action.components-button {
+.components-snackbar__action.components-button,
+.components-snackbar__action.components-external-link {
   margin-left: 32px;
   color: #fff;
   flex-shrink: 0;
 }
-.components-snackbar__action.components-button:focus {
+.components-snackbar__action.components-button:focus,
+.components-snackbar__action.components-external-link:focus {
   box-shadow: none;
   outline: 1px dotted #fff;
 }
-.components-snackbar__action.components-button:hover {
+.components-snackbar__action.components-button:hover,
+.components-snackbar__action.components-external-link:hover {
   text-decoration: none;
   color: currentColor;
 }
@@ -3157,15 +3166,17 @@ body.lockscroll {
   width: 100%;
   height: 32px;
   margin: 0;
+  background: var(--wp-components-color-background, #fff);
+  color: var(--wp-components-color-foreground, #1e1e1e);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
+  box-shadow: 0 0 0 transparent;
+  border-radius: 2px;
+  border: 1px solid #949494;
 }
 @media not (prefers-reduced-motion) {
   .components-text-control__input,
@@ -3219,8 +3230,8 @@ body.lockscroll {
 .components-text-control__input[type=email]:focus,
 .components-text-control__input[type=month]:focus,
 .components-text-control__input[type=number]:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 .components-text-control__input::-webkit-input-placeholder,

package/build-types/notice/types.d.ts

@@ -10,11 +10,13 @@ type CommonNoticeActionProps = {
 };
 type NoticeActionWithURL = CommonNoticeActionProps & {
     url: string;
+    openInNewTab?: boolean;
     onClick?: never;
 };
 type NoticeActionWithOnClick = CommonNoticeActionProps & {
     url?: never;
-    onClick: MouseEventHandler<HTMLButtonElement>;
+    openInNewTab?: never;
+    onClick: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
 };
 export type NoticeAction = NoticeActionWithURL | NoticeActionWithOnClick;
 export type NoticeChildren = string | JSX.Element;

package/build-types/notice/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/notice/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,KAAK,uBAAuB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAC;CAC3C,CAAC;AAIF,KAAK,mBAAmB,GAAG,uBAAuB,GAAG;IACpD,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AACF,KAAK,uBAAuB,GAAG,uBAAuB,GAAG;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,iBAAiB,CAAE,iBAAiB,CAAE,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,uBAAuB,CAAC;AAEzE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;;;;;;;;;;;OAiBG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,EAAE,KAAK,CAAE,YAAY,CAAE,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B;;OAEG;IACH,OAAO,EAAE,KAAK,CACb,IAAI,CAAE,WAAW,EAAE,UAAU,CAAE,GAAG;QACjC,EAAE,EAAE,MAAM,CAAC;QACX,OAAO,EAAE,MAAM,CAAC;KAChB,CACD,CAAC;IACF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/notice/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,KAAK,uBAAuB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAC;CAC3C,CAAC;AAIF,KAAK,mBAAmB,GAAG,uBAAuB,GAAG;IACpD,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AACF,KAAK,uBAAuB,GAAG,uBAAuB,GAAG;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,OAAO,EAAE,iBAAiB,CAAE,iBAAiB,GAAG,iBAAiB,CAAE,CAAC;CACpE,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,uBAAuB,CAAC;AAEzE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;;;;;;;;;;;OAiBG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,EAAE,KAAK,CAAE,YAAY,CAAE,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B;;OAEG;IACH,OAAO,EAAE,KAAK,CACb,IAAI,CAAE,WAAW,EAAE,UAAU,CAAE,GAAG;QACjC,EAAE,EAAE,MAAM,CAAC;QACX,OAAO,EAAE,MAAM,CAAC;KAChB,CACD,CAAC;IACF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC"}

package/build-types/popover/types.d.ts

@@ -121,6 +121,8 @@ export type PopoverProps = {
     /**
      * Adjusts the size of the popover to prevent its contents from going out of
      * view when meeting the viewport edges.
+     * _Note: The `resize` and `shift` props are not intended to be used together.
+     * Enabling both can cause unexpected behavior._
      *
      * @default true
      */
@@ -128,6 +130,8 @@ export type PopoverProps = {
     /**
      * Enables the `Popover` to shift in order to stay in view when meeting the
      * viewport edges.
+     * _Note: The `resize` and `shift` props are not intended to be used together.
+     * Enabling both can cause unexpected behavior._
      *
      * @default false
      */

package/build-types/popover/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"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"}

package/build-types/snackbar/index.d.ts

@@ -16,7 +16,7 @@ export declare const Snackbar: import("react").ForwardRefExoticComponent<Pick<im
     explicitDismiss?: boolean;
     listRef?: import("react").MutableRefObject<HTMLDivElement | null>;
 } & {
-    actions?: Pick<NoticeAction, "label" | "url" | "onClick">[];
+    actions?: Pick<NoticeAction, "label" | "url" | "onClick" | "openInNewTab">[];
 } & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className" | "children" | "as" | "actions" | "onRemove" | "spokenMessage" | "politeness" | "onDismiss" | keyof {
     icon?: import("react").ReactNode;
     explicitDismiss?: boolean;

package/build-types/snackbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/snackbar/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA6JpD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;uCAAoC,CAAC;AAE1D,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/snackbar/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAyKpD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;uCAAoC,CAAC;AAE1D,eAAe,QAAQ,CAAC"}

package/build-types/snackbar/types.d.ts

@@ -40,7 +40,7 @@ export type SnackbarProps = Pick<NoticeProps, 'className' | 'children' | 'spoken
      *
      * @default []
      */
-    actions?: Pick<NoticeAction, 'label' | 'url' | 'onClick'>[];
+    actions?: Pick<NoticeAction, 'label' | 'url' | 'onClick' | 'openInNewTab'>[];
 };
 export type SnackbarListProps = {
     notices: Array<Omit<SnackbarProps, 'children'> & {

package/build-types/snackbar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/snackbar/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD;;GAEG;AACH,OAAO,KAAK,EACX,WAAW,EACX,cAAc,EACd,YAAY,EACZ,MAAM,iBAAiB,CAAC;AAEzB,KAAK,iBAAiB,GAAG;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAE,cAAc,GAAG,IAAI,CAAE,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAC/B,WAAW,EACT,WAAW,GACX,UAAU,GACV,eAAe,GACf,UAAU,GACV,YAAY,GACZ,WAAW,CACb,GACA,iBAAiB,GAAG;IACnB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,IAAI,CAAE,YAAY,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAE,EAAE,CAAC;CAC9D,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,OAAO,EAAE,KAAK,CACb,IAAI,CAAE,aAAa,EAAE,UAAU,CAAE,GAAG;QACnC,EAAE,EAAE,MAAM,CAAC;QACX,OAAO,EAAE,MAAM,CAAC;KAChB,CACD,CAAC;IACF,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,cAAc,GAAG,KAAK,CAAE,cAAc,CAAE,CAAC;CACpD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/snackbar/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD;;GAEG;AACH,OAAO,KAAK,EACX,WAAW,EACX,cAAc,EACd,YAAY,EACZ,MAAM,iBAAiB,CAAC;AAEzB,KAAK,iBAAiB,GAAG;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAE,cAAc,GAAG,IAAI,CAAE,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAC/B,WAAW,EACT,WAAW,GACX,UAAU,GACV,eAAe,GACf,UAAU,GACV,YAAY,GACZ,WAAW,CACb,GACA,iBAAiB,GAAG;IACnB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,IAAI,CACb,YAAY,EACZ,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,cAAc,CAC5C,EAAE,CAAC;CACJ,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,OAAO,EAAE,KAAK,CACb,IAAI,CAAE,aAAa,EAAE,UAAU,CAAE,GAAG;QACnC,EAAE,EAAE,MAAM,CAAC;QACX,OAAO,EAAE,MAAM,CAAC;KAChB,CACD,CAAC;IACF,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,cAAc,GAAG,KAAK,CAAE,cAAc,CAAE,CAAC;CACpD,CAAC"}

package/build-types/spinner/index.d.ts

@@ -4,12 +4,12 @@ export declare function UnforwardedSpinner({ className, ...props }: WordPressCom
 /**
  * `Spinner` is a component used to notify users that their action is being processed.
  *
- * ```js
- *   import { Spinner } from '@wordpress/components';
+ * ```jsx
+ * import { Spinner } from '@wordpress/components';
  *
- *   function Example() {
- *     return <Spinner />;
- *   }
+ * function Example() {
+ * 	return <Spinner />;
+ * }
  * ```
  */
 export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref">, "children" | "as"> & import("react").RefAttributes<any>>;

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

@@ -1 +1 @@
-{"version":3,"file":"textarea-control-styles.d.ts","sourceRoot":"","sources":["../../../src/textarea-control/styles/textarea-control-styles.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,cAAc;;SAfI,MAAQ,WAC/B;2HAgEP,CAAC"}
+{"version":3,"file":"textarea-control-styles.d.ts","sourceRoot":"","sources":["../../../src/textarea-control/styles/textarea-control-styles.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,cAAc;;SAfI,MAAQ,WAC/B;2HAkEP,CAAC"}

package/build-types/utils/with-ignore-ime-events.d.ts

@@ -1,14 +1,14 @@
 /**
- * A higher-order function that wraps a keydown event handler to ensure it is not an IME event.
+ * A higher-order function that wraps a keyboard event handler to ensure it is not an IME event.
  *
  * In CJK languages, an IME (Input Method Editor) is used to input complex characters.
- * During an IME composition, keydown events (e.g. Enter or Escape) can be fired
+ * During an IME composition, keyboard events (e.g. Enter or Escape) can be fired
  * which are intended to control the IME and not the application.
  * These events should be ignored by any application logic.
  *
- * @param keydownHandler The keydown event handler to execute after ensuring it was not an IME event.
+ * @param handler The keyboard event handler to execute after ensuring it was not an IME event.
  *
  * @return A wrapped version of the given event handler that ignores IME events.
  */
-export declare function withIgnoreIMEEvents<E extends React.KeyboardEvent | KeyboardEvent>(keydownHandler: (event: E) => void): (event: E) => void;
+export declare function withIgnoreIMEEvents<E extends React.KeyboardEvent | KeyboardEvent>(handler: (event: E) => void): (event: E) => void;
 //# sourceMappingURL=with-ignore-ime-events.d.ts.map

package/build-types/utils/with-ignore-ime-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-ignore-ime-events.d.ts","sourceRoot":"","sources":["../../src/utils/with-ignore-ime-events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAClC,CAAC,SAAS,KAAK,CAAC,aAAa,GAAG,aAAa,EAC3C,cAAc,EAAE,CAAE,KAAK,EAAE,CAAC,KAAM,IAAI,WACtB,CAAC,UAgBjB"}
+{"version":3,"file":"with-ignore-ime-events.d.ts","sourceRoot":"","sources":["../../src/utils/with-ignore-ime-events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAClC,CAAC,SAAS,KAAK,CAAC,aAAa,GAAG,aAAa,EAC3C,OAAO,EAAE,CAAE,KAAK,EAAE,CAAC,KAAM,IAAI,WACf,CAAC,UAgBjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "29.9.0",
+	"version": "29.10.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.23.0",
-		"@wordpress/compose": "^7.23.0",
-		"@wordpress/date": "^5.23.0",
-		"@wordpress/deprecated": "^4.23.0",
-		"@wordpress/dom": "^4.23.0",
-		"@wordpress/element": "^6.23.0",
-		"@wordpress/escape-html": "^3.23.0",
-		"@wordpress/hooks": "^4.23.0",
-		"@wordpress/html-entities": "^4.23.0",
-		"@wordpress/i18n": "^5.23.0",
-		"@wordpress/icons": "^10.23.0",
-		"@wordpress/is-shallow-equal": "^5.23.0",
-		"@wordpress/keycodes": "^4.23.0",
-		"@wordpress/primitives": "^4.23.0",
-		"@wordpress/private-apis": "^1.23.0",
-		"@wordpress/rich-text": "^7.23.0",
-		"@wordpress/warning": "^3.23.0",
+		"@wordpress/a11y": "^4.24.0",
+		"@wordpress/compose": "^7.24.0",
+		"@wordpress/date": "^5.24.0",
+		"@wordpress/deprecated": "^4.24.0",
+		"@wordpress/dom": "^4.24.0",
+		"@wordpress/element": "^6.24.0",
+		"@wordpress/escape-html": "^3.24.0",
+		"@wordpress/hooks": "^4.24.0",
+		"@wordpress/html-entities": "^4.24.0",
+		"@wordpress/i18n": "^5.24.0",
+		"@wordpress/icons": "^10.24.0",
+		"@wordpress/is-shallow-equal": "^5.24.0",
+		"@wordpress/keycodes": "^4.24.0",
+		"@wordpress/primitives": "^4.24.0",
+		"@wordpress/private-apis": "^1.24.0",
+		"@wordpress/rich-text": "^7.24.0",
+		"@wordpress/warning": "^3.24.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab5c79cd40adbb68898536c50e035b0a734338ea"
+	"gitHead": "9c03d1458cae76792ae15e67b421205836bf4393"
 }

package/src/color-picker/color-copy-button.tsx

@@ -3,7 +3,7 @@
  */
 import { useCopyToClipboard } from '@wordpress/compose';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { copy } from '@wordpress/icons';
+import { copy, check } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -55,8 +55,8 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 		};
 	}, [] );
 
-	const label =
-		copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' );
+	const isCopied = copiedColor === color.toHex();
+	const label = isCopied ? __( 'Copied!' ) : __( 'Copy' );
 
 	return (
 		<Tooltip delay={ 0 } hideOnClick={ false } text={ label }>
@@ -64,7 +64,7 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 				size="compact"
 				aria-label={ label }
 				ref={ copyRef }
-				icon={ copy }
+				icon={ isCopied ? check : copy }
 				showTooltip={ false }
 			/>
 		</Tooltip>

package/src/notice/README.md

@@ -61,7 +61,7 @@ If an icon is included in the Notice, it should be color-coded to match the Noti
 To display a plain notice, pass `Notice` a string:
 
 ```jsx
-import { Notice } from `@wordpress/components`;
+import { Notice } from '@wordpress/components';
 
 const MyNotice = () => (
 	<Notice status="error">An unknown error occurred.</Notice>
@@ -71,7 +71,7 @@ const MyNotice = () => (
 For more complex markup, you can pass any JSX element:
 
 ```jsx
-import { Notice } from `@wordpress/components`;
+import { Notice } from '@wordpress/components';
 
 const MyNotice = () => (
 	<Notice status="error">
@@ -145,6 +145,7 @@ An array of notice actions. Each member object should contain:
 
 - `label`: `string` containing the text of the button/link
 - `url`: `string` OR `onClick`: `( event: SyntheticEvent ) => void` to specify what the action does.
+- `openInNewTab`: `boolean` (optional) When set to `true`, opens the URL in a new browser tab.
 - `className`: `string` (optional) to add custom classes to the button styles.
 - `noDefaultClasses`: `boolean` (optional) A value of `true` will remove all default styling.
 - `variant`: `'primary' | 'secondary' | 'link'` (optional) You can denote a primary button action for a notice by passing a value of `primary`.

package/src/notice/types.ts

@@ -14,11 +14,13 @@ type CommonNoticeActionProps = {
 // `onClick` will be ignored.
 type NoticeActionWithURL = CommonNoticeActionProps & {
 	url: string;
+	openInNewTab?: boolean;
 	onClick?: never;
 };
 type NoticeActionWithOnClick = CommonNoticeActionProps & {
 	url?: never;
-	onClick: MouseEventHandler< HTMLButtonElement >;
+	openInNewTab?: never;
+	onClick: MouseEventHandler< HTMLButtonElement | HTMLAnchorElement >;
 };
 
 export type NoticeAction = NoticeActionWithURL | NoticeActionWithOnClick;

package/src/popover/README.md

@@ -223,9 +223,20 @@ Possible values:
 
 Adjusts the size of the popover to prevent its contents from going out of view when meeting the viewport edges.
 
+**Note:** The `resize` and `shift` props are not intended to be used together. Enabling both can cause unexpected behavior.
+
 -   Required: No
 -   Default: `true`
 
+### `shift`: `boolean`
+
+Enables the `Popover` to shift in order to stay in view when meeting the viewport edges.
+
+**Note:** The `shift` and `resize` props are not intended to be used together. If you enable `shift`, set `resize` to `false`.
+
+-   Required: No
+-   Default: `false`
+
 ### `variant`: `'toolbar' | 'unstyled'`
 
 Specifies the popover's style.

package/src/popover/types.ts

@@ -129,6 +129,8 @@ export type PopoverProps = {
 	/**
 	 * Adjusts the size of the popover to prevent its contents from going out of
 	 * view when meeting the viewport edges.
+	 * _Note: The `resize` and `shift` props are not intended to be used together.
+	 * Enabling both can cause unexpected behavior._
 	 *
 	 * @default true
 	 */
@@ -136,6 +138,8 @@ export type PopoverProps = {
 	/**
 	 * Enables the `Popover` to shift in order to stay in view when meeting the
 	 * viewport edges.
+	 * _Note: The `resize` and `shift` props are not intended to be used together.
+	 * Enabling both can cause unexpected behavior._
 	 *
 	 * @default false
 	 */

package/src/snackbar/index.tsx

@@ -22,6 +22,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import Button from '../button';
+import ExternalLink from '../external-link';
 import type { SnackbarProps } from './types';
 import type { NoticeAction } from '../notice/types';
 import type { WordPressComponentProps } from '../context';
@@ -80,7 +81,7 @@ function UnforwardedSnackbar(
 	}
 
 	function onActionClick(
-		event: MouseEvent< HTMLButtonElement >,
+		event: MouseEvent< HTMLButtonElement | HTMLAnchorElement >,
 		onClick: NoticeAction[ 'onClick' ]
 	) {
 		event.stopPropagation();
@@ -147,22 +148,34 @@ function UnforwardedSnackbar(
 					<div className="components-snackbar__icon">{ icon }</div>
 				) }
 				{ children }
-				{ actions.map( ( { label, onClick, url }, index ) => {
-					return (
-						<Button
-							__next40pxDefaultSize
-							key={ index }
-							href={ url }
-							variant="link"
-							onClick={ (
-								event: MouseEvent< HTMLButtonElement >
-							) => onActionClick( event, onClick ) }
-							className="components-snackbar__action"
-						>
-							{ label }
-						</Button>
-					);
-				} ) }
+				{ actions.map(
+					( { label, onClick, url, openInNewTab = false }, index ) =>
+						url !== undefined && openInNewTab ? (
+							<ExternalLink
+								key={ index }
+								href={ url }
+								onClick={ ( event ) =>
+									onActionClick( event, onClick )
+								}
+								className="components-snackbar__action"
+							>
+								{ label }
+							</ExternalLink>
+						) : (
+							<Button
+								__next40pxDefaultSize
+								key={ index }
+								href={ url }
+								variant="link"
+								onClick={ (
+									event: MouseEvent< HTMLButtonElement >
+								) => onActionClick( event, onClick ) }
+								className="components-snackbar__action"
+							>
+								{ label }
+							</Button>
+						)
+				) }
 				{ explicitDismiss && (
 					<span
 						role="button"

package/src/snackbar/style.scss

@@ -45,7 +45,8 @@
 	}
 }
 
-.components-snackbar__action.components-button {
+.components-snackbar__action.components-button,
+.components-snackbar__action.components-external-link {
 	margin-left: $grid-unit-40;
 	color: $white;
 	flex-shrink: 0;

package/src/snackbar/types.ts

@@ -56,7 +56,10 @@ export type SnackbarProps = Pick<
 		 *
 		 * @default []
 		 */
-		actions?: Pick< NoticeAction, 'label' | 'url' | 'onClick' >[];
+		actions?: Pick<
+			NoticeAction,
+			'label' | 'url' | 'onClick' | 'openInNewTab'
+		>[];
 	};
 
 export type SnackbarListProps = {