@wordpress/components 27.6.0 → 28.0.1

package/src/mobile/link-picker/link-picker-results.native.js

@@ -6,7 +6,6 @@ import { ActivityIndicator, FlatList, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -15,6 +14,8 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import styles from './styles.scss';
+import BottomSheet from '../bottom-sheet';
+import { BottomSheetConsumer } from '../bottom-sheet/bottom-sheet-context';
 
 const PER_PAGE = 20;
 const REQUEST_DEBOUNCE_DELAY = 400;

package/src/mobile/link-settings/link-rel.native.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { Path, SVG } from '@wordpress/primitives';
 
 export default (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

package/src/mobile/media-edit/index.native.js

@@ -3,12 +3,16 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Picker } from '@wordpress/components';
 import {
 	requestMediaEditor,
 	mediaSources,
 } from '@wordpress/react-native-bridge';
 
+/**
+ * Internal dependencies
+ */
+import Picker from '../picker';
+
 export const MEDIA_TYPE_IMAGE = 'image';
 
 export const MEDIA_EDITOR = 'MEDIA_EDITOR';

package/src/mobile/picker/index.android.js

@@ -9,13 +9,14 @@ import { View } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { PanelBody, TextControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import BottomSheet from '../bottom-sheet';
 import styles from './styles.scss';
+import PanelBody from '../../panel/body';
+import TextControl from '../../text-control';
 
 function Separator() {
 	const separatorStyle = usePreferredColorSchemeStyle(
@@ -61,7 +62,7 @@ export default class Picker extends Component {
 					icon={ option.icon }
 					leftAlign={ leftAlign }
 					label={ option.label }
-					separatorType={ 'none' }
+					separatorType="none"
 					onPress={ () => this.onCellPress( option.value ) }
 					disabled={ option.disabled }
 					style={
@@ -93,7 +94,7 @@ export default class Picker extends Component {
 						<TextControl
 							label={ __( 'Cancel' ) }
 							onPress={ this.onClose }
-							separatorType={ 'none' }
+							separatorType="none"
 						/>
 					) }
 				</PanelBody>

package/src/mobile/picker/index.ios.js

@@ -9,13 +9,13 @@ import { ActionSheetIOS } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { Component, forwardRef, useContext } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { BottomSheetContext } from '@wordpress/components';
 import { usePreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 
 class Picker extends Component {
 	presentPicker() {

package/src/mobile/segmented-control/index.native.js

@@ -173,7 +173,7 @@ const SegmentedControls = ( {
 							accessibilityState={ {
 								selected: activeSegmentIndex === index,
 							} }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityLabel={ segment }
 							accessibilityHint={ `${ index + 1 } on ${
 								segments.length

package/src/mobile/utils/use-unit-converter-to-mobile.native.js

@@ -6,18 +6,7 @@ import { Dimensions } from 'react-native';
 /**
  * WordPress dependencies
  */
-import {
-	useContext,
-	useEffect,
-	useState,
-	useMemo,
-	useCallback,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import GlobalStylesContext from '../global-styles-context';
+import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 
 const getValueAndUnit = ( value, unit ) => {
 	const regex = /(\d+\.?\d*)(.*)/;
@@ -63,8 +52,7 @@ const convertUnitToMobile = ( containerSize, globalStyles, value, unit ) => {
 	}
 };
 
-const useConvertUnitToMobile = ( value, unit ) => {
-	const { globalStyles: styles } = useContext( GlobalStylesContext );
+const useConvertUnitToMobile = ( value, unit, styles ) => {
 	const [ windowSizes, setWindowSizes ] = useState(
 		Dimensions.get( 'window' )
 	);

package/src/notice/stories/index.story.tsx

@@ -109,7 +109,7 @@ export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
 	return (
 		<>
 			<NoticeList notices={ notices } onRemove={ removeNotice } />
-			<Button variant={ 'primary' } onClick={ resetNotices }>
+			<Button variant="primary" onClick={ resetNotices }>
 				Reset Notices
 			</Button>
 		</>

package/src/palette-edit/test/index.tsx

@@ -154,7 +154,7 @@ describe( 'PaletteEdit', () => {
 		render(
 			<PaletteEdit
 				{ ...defaultProps }
-				emptyMessage={ 'Test empty message' }
+				emptyMessage="Test empty message"
 			/>
 		);
 
@@ -170,11 +170,13 @@ describe( 'PaletteEdit', () => {
 			} )
 		);
 
-		expect(
-			screen.getByRole( 'button', {
-				name: 'Remove all colors',
-			} )
-		).toBeVisible();
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Remove all colors',
+				} )
+			).toBeVisible();
+		} );
 	} );
 
 	it( 'shows a reset option when the `canReset` prop is enabled', async () => {
@@ -187,11 +189,13 @@ describe( 'PaletteEdit', () => {
 				name: 'Color options',
 			} )
 		);
-		expect(
-			screen.getByRole( 'button', {
-				name: 'Reset colors',
-			} )
-		).toBeVisible();
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Reset colors',
+				} )
+			).toBeVisible();
+		} );
 	} );
 
 	it( 'does not show a reset colors option when `canReset` is disabled', async () => {

package/src/panel/actions.native.js

@@ -6,7 +6,6 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { TextControl } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 
@@ -15,6 +14,7 @@ import { useMemo } from '@wordpress/element';
  */
 import styles from './actions.scss';
 import BottomSeparatorCover from './bottom-separator-cover';
+import TextControl from '../text-control';
 
 function PanelActions( { actions, getStylesFromColorScheme } ) {
 	const mappedActions = useMemo( () => {

package/src/popover/index.tsx

@@ -78,7 +78,7 @@ export const SLOT_NAME = 'Popover';
 const ArrowTriangle = () => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
-		viewBox={ `0 0 100 100` }
+		viewBox="0 0 100 100"
 		className="components-popover__triangle"
 		role="presentation"
 	>

package/src/private-apis.ts

@@ -15,7 +15,6 @@ import {
 } from './composite/v2';
 import { default as CustomSelectControl } from './custom-select-control';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
-import { default as ProgressBar } from './progress-bar';
 import { createPrivateSlotFill } from './slot-fill';
 import {
 	DropdownMenu as DropdownMenuV2,
@@ -44,7 +43,6 @@ lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,
-	ProgressBar,
 	Tabs,
 	Theme,
 	DropdownMenuV2,

package/src/progress-bar/README.md

@@ -1,13 +1,47 @@
 # ProgressBar
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 A simple horizontal progress bar component.
 
 Supports two modes: determinate and indeterminate. A progress bar is determinate when a specific progress value has been specified (from 0 to 100), and indeterminate when a value hasn't been specified.
 
+## Usage
+
+Basic usage:
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = () => {
+	return <ProgressBar />;
+};
+```
+
+You can also make it determinate by passing a `value` (from 0 to 100) representing the progress:
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = ( { progress } ) => {
+	return <ProgressBar value={ progress } />;
+};
+```
+
+You can customize its appearance by passing a custom CSS class name to `className`.
+
+```css
+.my-custom-progress-bar {
+	width: 100%;
+}
+```
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = () => {
+	return <ProgressBar className="my-custom-progress-bar" />;
+};
+```
+
 ### Props
 
 The component accepts the following props:
@@ -23,7 +57,7 @@ If a `value` is not specified, the progress bar will be considered indeterminate
 
 A CSS class to apply to the underlying `div` element, serving as a progress bar track.
 
-- Required: No
+-   Required: No
 
 #### Inherited props
 

package/src/progress-bar/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -26,13 +26,11 @@ function UnforwardedProgressBar(
 	return (
 		<ProgressBarStyled.Track className={ className }>
 			<ProgressBarStyled.Indicator
-				style={
-					{
-						'--indicator-width': ! isIndeterminate
-							? `${ value }%`
-							: undefined,
-					} as CSSProperties
-				}
+				style={ {
+					'--indicator-width': ! isIndeterminate
+						? `${ value }%`
+						: undefined,
+				} }
 				isIndeterminate={ isIndeterminate }
 			/>
 			<ProgressBarStyled.ProgressElement
@@ -46,6 +44,21 @@ function UnforwardedProgressBar(
 	);
 }
 
+/**
+ * A simple horizontal progress bar component.
+ *
+ * Supports two modes: determinate and indeterminate. A progress bar is determinate
+ * when a specific progress value has been specified (from 0 to 100), and indeterminate
+ * when a value hasn't been specified.
+ *
+ * ```jsx
+ * import { ProgressBar } from '@wordpress/components';
+ *
+ * const MyLoadingComponent = () => {
+ * 	return <ProgressBar />;
+ * };
+ * ```
+ */
 export const ProgressBar = forwardRef( UnforwardedProgressBar );
 
 export default ProgressBar;

package/src/progress-bar/stories/index.story.tsx

@@ -10,13 +10,11 @@ import { ProgressBar } from '..';
 
 const meta: Meta< typeof ProgressBar > = {
 	component: ProgressBar,
-	title: 'Components (Experimental)/ProgressBar',
+	title: 'Components/ProgressBar',
 	argTypes: {
 		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
 	},
-	tags: [ 'status-private' ],
 	parameters: {
-		badges: [ 'private' ],
 		controls: {
 			expanded: true,
 		},
@@ -31,3 +29,38 @@ const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => {
 
 export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} );
 Default.args = {};
+
+const withCustomWidthCustomCSS = `
+	.custom-progress-bar {
+		width: 100%;
+	}
+`;
+
+/**
+ * A progress bar with a custom width.
+ *
+ * You can override the default `width` by passing a custom CSS class via the
+ * `className` prop.
+ *
+ * This example shows a progress bar with an overriden `width` of `100%` which
+ * makes it fit all available horizontal space of the parent element. The CSS
+ * class looks like this:
+ *
+ * ```css
+ * .custom-progress-bar {
+ *   width: 100%;
+ * }
+ * ```
+ */
+export const WithCustomWidth = Template.bind( {} );
+WithCustomWidth.args = {
+	className: 'custom-progress-bar',
+};
+WithCustomWidth.decorators = [
+	( Story ) => (
+		<>
+			<style>{ withCustomWidthCustomCSS }</style>
+			<Story />
+		</>
+	),
+];

package/src/progress-bar/styles.ts

@@ -24,8 +24,6 @@ export const INDETERMINATE_TRACK_WIDTH = 50;
 export const Track = styled.div`
 	position: relative;
 	overflow: hidden;
-	width: 100%;
-	max-width: 160px;
 	height: ${ CONFIG.borderWidthFocus };
 	/* Text color at 10% opacity */
 	background-color: color-mix(
@@ -38,6 +36,10 @@ export const Track = styled.div`
 	// Windows high contrast mode.
 	outline: 2px solid transparent;
 	outline-offset: 2px;
+
+	:where( & ) {
+		width: 160px;
+	}
 `;
 
 export const Indicator = styled.div< {

package/src/query-controls/index.native.js

@@ -7,7 +7,8 @@ import { useCallback, memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { RangeControl, SelectControl } from '../';
+import RangeControl from '../range-control';
+import SelectControl from '../select-control';
 import CategorySelect from './category-select';
 
 const DEFAULT_MIN_ITEMS = 1;

package/src/search-control/index.native.js

@@ -22,7 +22,6 @@ import {
 	useCallback,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button, Gridicons } from '@wordpress/components';
 import {
 	Icon,
 	cancelCircleFilled as cancelCircleFilledIcon,
@@ -35,6 +34,8 @@ import {
  */
 import allStyles from './style.scss';
 import platformStyles from './platform-style.scss';
+import Button from '../button';
+import Gridicons from '../mobile/gridicons';
 
 // Merge platform specific styles with the default styles.
 const baseStyles = { ...allStyles };
@@ -236,7 +237,7 @@ function SearchControl( {
 					onPress={ onCancel }
 					style={ cancelButtonTextStyle }
 					accessible
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					accessibilityLabel={ __( 'Cancel search' ) }
 					accessibilityHint={ __( 'Cancel search' ) }
 				>

package/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { observableMap } from '@wordpress/compose';
 
@@ -98,7 +98,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 export default function SlotFillProvider( {
 	children,
 }: SlotFillProviderProps ) {
-	const registry = useMemo( createSlotRegistry, [] );
+	const [ registry ] = useState( createSlotRegistry );
 	return (
 		<SlotFillContext.Provider value={ registry }>
 			{ children }

package/src/slot-fill/provider.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import type { Component } from '@wordpress/element';
-import { useMemo } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -118,7 +118,7 @@ function createSlotRegistry(): BaseSlotFillContext {
 }
 
 export function SlotFillProvider( { children }: SlotFillProviderProps ) {
-	const contextValue = useMemo( createSlotRegistry, [] );
+	const [ contextValue ] = useState( createSlotRegistry );
 	return (
 		<SlotFillContext.Provider value={ contextValue }>
 			{ children }

package/src/snackbar/list.tsx

@@ -87,9 +87,9 @@ export function SnackbarList( {
 					return (
 						<motion.div
 							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
-							initial={ 'init' }
-							animate={ 'open' }
-							exit={ 'exit' }
+							initial="init"
+							animate="open"
+							exit="exit"
 							key={ notice.id }
 							variants={
 								isReducedMotion ? undefined : SNACKBAR_VARIANTS

package/src/tab-panel/index.tsx

@@ -232,7 +232,7 @@ const UnforwardedTabPanel = (
 					id={ `${ prependInstanceId( selectedTab.name ) }-view` }
 					store={ tabStore }
 					tabId={ prependInstanceId( selectedTab.name ) }
-					className={ 'components-tab-panel__tab-content' }
+					className="components-tab-panel__tab-content"
 				>
 					{ children( selectedTab ) }
 				</Ariakit.TabPanel>

package/src/tab-panel/style.scss

@@ -81,3 +81,19 @@
 		outline: 2px solid transparent;
 	}
 }
+
+.components-tab-panel__tab-content {
+	&:focus {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible {
+		border-radius: 2px;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: 0;
+	}
+}

package/src/tabs/stories/index.story.tsx

@@ -31,7 +31,6 @@ const meta: Meta< typeof Tabs > = {
 	tags: [ 'status-private' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
-		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
@@ -69,6 +68,20 @@ const Template: StoryFn< typeof Tabs > = ( props ) => {
 
 export const Default = Template.bind( {} );
 
+const VerticalTemplate: StoryFn< typeof Tabs > = ( props ) => {
+	return (
+		<Tabs orientation="vertical" { ...props }>
+			<Tabs.TabList style={ { maxWidth: '10rem' } }>
+				<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
+				<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
+				<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
+			</Tabs.TabList>
+		</Tabs>
+	);
+};
+
+export const Vertical = VerticalTemplate.bind( {} );
+
 const DisabledTabTemplate: StoryFn< typeof Tabs > = ( props ) => {
 	return (
 		<Tabs { ...props }>
@@ -203,7 +216,7 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
 								<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
 							</Tabs.TabList>
 							<Button
-								variant={ 'tertiary' }
+								variant="tertiary"
 								style={ {
 									marginLeft: 'auto',
 									alignSelf: 'center',
@@ -225,10 +238,7 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
 					</Tabs>
 				</div>
 			) : (
-				<Button
-					variant={ 'tertiary' }
-					onClick={ () => setIsOpen( true ) }
-				>
+				<Button variant="tertiary" onClick={ () => setIsOpen( true ) }>
 					Open Tabs
 				</Button>
 			) }
@@ -269,31 +279,29 @@ const ControlledModeTemplate: StoryFn< typeof Tabs > = ( props ) => {
 					<p>Selected tab: Tab 3</p>
 				</Tabs.TabPanel>
 			</Tabs>
-			{
-				<div style={ { marginTop: '200px' } }>
-					<p>Select a tab:</p>
-					<DropdownMenu
-						controls={ [
-							{
-								onClick: () => setSelectedTabId( 'tab1' ),
-								title: 'Tab 1',
-								isActive: selectedTabId === 'tab1',
-							},
-							{
-								onClick: () => setSelectedTabId( 'tab2' ),
-								title: 'Tab 2',
-								isActive: selectedTabId === 'tab2',
-							},
-							{
-								onClick: () => setSelectedTabId( 'tab3' ),
-								title: 'Tab 3',
-								isActive: selectedTabId === 'tab3',
-							},
-						] }
-						label="Choose a tab. The power is yours."
-					/>
-				</div>
-			}
+			<div style={ { marginTop: '200px' } }>
+				<p>Select a tab:</p>
+				<DropdownMenu
+					controls={ [
+						{
+							onClick: () => setSelectedTabId( 'tab1' ),
+							title: 'Tab 1',
+							isActive: selectedTabId === 'tab1',
+						},
+						{
+							onClick: () => setSelectedTabId( 'tab2' ),
+							title: 'Tab 2',
+							isActive: selectedTabId === 'tab2',
+						},
+						{
+							onClick: () => setSelectedTabId( 'tab3' ),
+							title: 'Tab 3',
+							isActive: selectedTabId === 'tab3',
+						},
+					] }
+					label="Choose a tab. The power is yours."
+				/>
+			</div>
 		</>
 	);
 };