@wordpress/components 25.13.0 → 25.14.0

package/build-types/tabs/tabpanel.d.ts

@@ -6,5 +6,6 @@
  * Internal dependencies
  */
 import type { TabPanelProps } from './types';
-export declare const TabPanel: import("react").ForwardRefExoticComponent<TabPanelProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof TabPanelProps> & import("react").RefAttributes<HTMLDivElement>>;
+import type { WordPressComponentProps } from '../context';
+export declare const TabPanel: import("react").ForwardRefExoticComponent<Omit<WordPressComponentProps<TabPanelProps, "div", false>, "id"> & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=tabpanel.d.ts.map

package/build-types/tabs/tabpanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabpanel.d.ts","sourceRoot":"","sources":["../../src/tabs/tabpanel.tsx"],"names":[],"mappings":"AAAA;;GAEG;;AAQH;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO7C,eAAO,MAAM,QAAQ,oTAsBlB,CAAC"}
+{"version":3,"file":"tabpanel.d.ts","sourceRoot":"","sources":["../../src/tabs/tabpanel.tsx"],"names":[],"mappings":"AAAA;;GAEG;;AAQH;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,eAAO,MAAM,QAAQ,6JA0BlB,CAAC"}

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

@@ -71,8 +71,10 @@ export type TabListProps = {
 export type TabProps = {
     /**
      * The id of the tab, which is prepended with the `Tabs` instanceId.
+     * The value of this prop should match with the value of the `tabId` prop on
+     * the corresponding `Tabs.TabPanel` component.
      */
-    id: string;
+    tabId: string;
     /**
      * The children elements, generally the text to display on the tab.
      */
@@ -95,9 +97,12 @@ export type TabPanelProps = {
      */
     children?: React.ReactNode;
     /**
-     * A unique identifier for the tabpanel, which is used to generate a unique `id` for the underlying element.
+     * A unique identifier for the tabpanel, which is used to generate an
+     * instanced id for the underlying element.
+     * The value of this prop should match with the value of the `tabId` prop on
+     * the corresponding `Tabs.Tab` component.
      */
-    id: string;
+    tabId: string;
     /**
      * Determines whether or not the tabpanel element should be focusable.
      * If `false`, pressing the tab key will skip over the tabpanel, and instead

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tabs/types.ts"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,KAAK,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GACzB;IACA;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC;IACxB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CAClB,GACD,SAAS,CAAC;AAEb,MAAM,MAAM,SAAS,GAAG;IACvB;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,KAAM,IAAI,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tabs/types.ts"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,KAAK,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GACzB;IACA;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC;IACxB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CAClB,GACD,SAAS,CAAC;AAEb,MAAM,MAAM,SAAS,GAAG;IACvB;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,KAAM,IAAI,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACtB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/build-types/toggle-group-control/toggle-group-control/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,KAAK,SAAS,GAAG,uBAAuB,CAAE,OAAO,CAAE,CAAC;AAEpD;;;;;;GAMG;AACH,wBAAgB,uCAAuC,CACtD,SAAS,EAAE,SAAS,GAClB;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,YAAY,EAAE,SAAS,CAAA;CAAE,CA2B/C"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,KAAK,SAAS,GAAG,uBAAuB,CAAE,OAAO,CAAE,CAAC;AAEpD;;;;;;GAMG;AACH,wBAAgB,uCAAuC,CACtD,SAAS,EAAE,SAAS,GAClB;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,YAAY,EAAE,SAAS,CAAA;CAAE,CAsB/C"}

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

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/hook.ts"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkM5D"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/hook.ts"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuL5D"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "25.13.0",
+	"version": "25.14.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,23 +43,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.47.0",
-		"@wordpress/compose": "^6.24.0",
-		"@wordpress/date": "^4.47.0",
-		"@wordpress/deprecated": "^3.47.0",
-		"@wordpress/dom": "^3.47.0",
-		"@wordpress/element": "^5.24.0",
-		"@wordpress/escape-html": "^2.47.0",
-		"@wordpress/hooks": "^3.47.0",
-		"@wordpress/html-entities": "^3.47.0",
-		"@wordpress/i18n": "^4.47.0",
-		"@wordpress/icons": "^9.38.0",
-		"@wordpress/is-shallow-equal": "^4.47.0",
-		"@wordpress/keycodes": "^3.47.0",
-		"@wordpress/primitives": "^3.45.0",
-		"@wordpress/private-apis": "^0.29.0",
-		"@wordpress/rich-text": "^6.24.0",
-		"@wordpress/warning": "^2.47.0",
+		"@wordpress/a11y": "^3.48.0",
+		"@wordpress/compose": "^6.25.0",
+		"@wordpress/date": "^4.48.0",
+		"@wordpress/deprecated": "^3.48.0",
+		"@wordpress/dom": "^3.48.0",
+		"@wordpress/element": "^5.25.0",
+		"@wordpress/escape-html": "^2.48.0",
+		"@wordpress/hooks": "^3.48.0",
+		"@wordpress/html-entities": "^3.48.0",
+		"@wordpress/i18n": "^4.48.0",
+		"@wordpress/icons": "^9.39.0",
+		"@wordpress/is-shallow-equal": "^4.48.0",
+		"@wordpress/keycodes": "^3.48.0",
+		"@wordpress/primitives": "^3.46.0",
+		"@wordpress/private-apis": "^0.30.0",
+		"@wordpress/rich-text": "^6.25.0",
+		"@wordpress/warning": "^2.48.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -89,5 +89,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
+	"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
 }

package/src/border-control/border-control-dropdown/component.tsx

@@ -149,6 +149,7 @@ const BorderControlDropdown = (
 		popoverControlsClassName,
 		resetButtonClassName,
 		showDropdownHeader,
+		size,
 		__unstablePopoverProps,
 		...otherProps
 	} = useBorderControlDropdown( props );
@@ -178,6 +179,7 @@ const BorderControlDropdown = (
 			tooltipPosition={ dropdownPosition }
 			label={ __( 'Border color and style picker' ) }
 			showTooltip={ true }
+			__next40pxDefaultSize={ size === '__unstable-large' ? true : false }
 		>
 			<span className={ indicatorWrapperClassName }>
 				<ColorIndicator
@@ -198,7 +200,7 @@ const BorderControlDropdown = (
 						<HStack>
 							<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
 							<Button
-								isSmall
+								size="small"
 								label={ __( 'Close border color' ) }
 								icon={ closeSmall }
 								onClick={ onClose }

package/src/border-control/border-control-dropdown/hook.ts

@@ -57,8 +57,8 @@ export function useBorderControlDropdown(
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderControlDropdown( size ), className );
-	}, [ className, cx, size ] );
+		return cx( styles.borderControlDropdown, className );
+	}, [ className, cx ] );
 
 	const indicatorClassName = useMemo( () => {
 		return cx( styles.borderColorIndicator );
@@ -95,6 +95,7 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
+		size,
 		__experimentalIsRenderedInSidebar,
 	};
 }

package/src/border-control/styles.ts

@@ -59,18 +59,11 @@ export const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {
 	`;
 };
 
-export const borderControlDropdown = (
-	size?: 'default' | '__unstable-large'
-) => css`
+export const borderControlDropdown = css`
 	background: #fff;
 
 	&& > button {
-		/*
-		 * Override button component styles to fit within BorderControl
-		 * regardless of size.
-		 */
-		height: ${ size === '__unstable-large' ? '40px' : '30px' };
-		width: ${ size === '__unstable-large' ? '40px' : '30px' };
+		aspect-ratio: 1;
 		padding: 0;
 		display: flex;
 		align-items: center;

package/src/checkbox-control/README.md

@@ -77,11 +77,12 @@ const MyCheckboxControl = () => {
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input element.
 
-#### `label`: `string`
+#### `label`: `string|false`
 
 A label for the input field, that appears at the side of the checkbox.
 The prop will be rendered as content a label element.
 If no prop is passed an empty label is rendered.
+If the prop is set to false no label is rendered.
 
 -   Required: No
 

package/src/checkbox-control/index.tsx

@@ -125,12 +125,14 @@ export function CheckboxControl(
 					/>
 				) : null }
 			</span>
-			<label
-				className="components-checkbox-control__label"
-				htmlFor={ id }
-			>
-				{ label }
-			</label>
+			{ label && (
+				<label
+					className="components-checkbox-control__label"
+					htmlFor={ id }
+				>
+					{ label }
+				</label>
+			) }
 		</BaseControl>
 	);
 }

package/src/checkbox-control/test/__snapshots__/index.tsx.snap

@@ -5,14 +5,14 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,17 +8,31 @@
+@@ -8,13 +8,27 @@
         <span
           class="components-checkbox-control__input-container"
         >
           <input
             class="components-checkbox-control__input"
--           id="inspector-checkbox-control-5"
-+           id="inspector-checkbox-control-6"
+-           id="inspector-checkbox-control-6"
++           id="inspector-checkbox-control-7"
             type="checkbox"
             value="1"
 +         />
@@ -31,11 +31,6 @@ Snapshot Diff:
             />
 +         </svg>
         </span>
-        <label
-          class="components-checkbox-control__label"
--         for="inspector-checkbox-control-5"
-+         for="inspector-checkbox-control-6"
-        />
       </div>
     </div>
   </div>

package/src/checkbox-control/test/index.tsx

@@ -60,6 +60,13 @@ describe( 'CheckboxControl', () => {
 			expect( label ).toBeInTheDocument();
 		} );
 
+		it( 'should not render label element if label is set to false', () => {
+			render( <CheckboxControl label={ false } /> );
+
+			const label = screen.queryByRole( 'label' );
+			expect( label ).not.toBeInTheDocument();
+		} );
+
 		it( 'should render a checkbox in an indeterminate state', () => {
 			render( <CheckboxControl indeterminate /> );
 			expect( getInput() ).toHaveProperty( 'indeterminate', true );

package/src/checkbox-control/types.ts

@@ -19,9 +19,10 @@ export type CheckboxControlProps = Pick<
 	/**
 	 * A label for the input field, that appears at the side of the checkbox.
 	 * The prop will be rendered as content a label element. If no prop is
-	 * passed an empty label is rendered.
+	 * passed an empty label is rendered. If the prop is set to false no label
+	 * is rendered.
 	 */
-	label?: string;
+	label?: string | false;
 	/**
 	 * If checked is true the checkbox will be checked. If checked is false the
 	 * checkbox will be unchecked. If no value is passed the checkbox will be