- );
-}
-UseCompositeStorePlaceholder.displayName = 'useCompositeStore';
-
-// The output generated by Storybook for these components is
-// messy, so we apply this transform to make it more useful
-// for anyone reading the docs.
-export function transform( code: string, context: StoryContext ) {
- const storeConfig = ` ${ JSON.stringify( context.args, null, 2 ) } `;
- const formattedStoreConfig = storeConfig.replace( ' {} ', '' );
- return [
- // Include a setup line, showing how to make use of
- // `useCompositeStore` to convert store options into
- // a composite store prop.
- `const store = useCompositeStore(${ formattedStoreConfig });`,
- '',
- 'return (',
- ' ' +
- code
- // The generated output includes a full dump of everything
- // in the store; the reader probably isn't interested in
- // what that looks like, so instead we drop all of that
- // in favor of the store generated above.
- .replaceAll( /store=\{\{[\s\S]*?\}\}/g, 'store={ store }' )
- // Now we tidy the output by removing any unnecessary
- // whitespace...
- .replaceAll( //g, ( match ) =>
- match.replaceAll( /\s+\s/g, ' ' )
- )
- // ...including around children...
- .replaceAll(
- />\s*(\w[\w ]*?)\s*<\//g,
- ( _, value ) => `>${ value }', '}>' )
- // Finally we indent everything to make it more readable.
- .replaceAll( /\n/g, '\n ' ),
- ');',
- ].join( '\n' );
-}
diff --git a/packages/components/src/composite/typeahead.tsx b/packages/components/src/composite/typeahead.tsx
index d5bb7e6e2e4cc..771d58bcb6c25 100644
--- a/packages/components/src/composite/typeahead.tsx
+++ b/packages/components/src/composite/typeahead.tsx
@@ -22,7 +22,7 @@ export const CompositeTypeahead = forwardRef<
const context = useCompositeContext();
return (
diff --git a/packages/components/src/composite/types.ts b/packages/components/src/composite/types.ts
index fcde842e1cba7..ed95c7f0253b3 100644
--- a/packages/components/src/composite/types.ts
+++ b/packages/components/src/composite/types.ts
@@ -3,16 +3,18 @@
*/
import type * as Ariakit from '@ariakit/react';
-export type CompositeContextProps =
- | {
- /**
- * Object returned by the `useCompositeStore` hook.
- */
- store: Ariakit.CompositeStore;
- }
- | undefined;
+export type CompositeContextProps = {
+ /**
+ * The component store, used for advanced usage of the component.
+ *
+ * _Note: Using the store directly is not recommended. Instead, use the props
+ * exposed by the `Composite` component._
+ *
+ */
+ store?: unknown;
+};
-export type CompositeStoreProps = {
+type CompositeStoreProps = {
/**
* The current active item `id`. The active item is the element within the
* composite widget that has either DOM or virtual focus (in case
@@ -117,22 +119,18 @@ export type CompositeStoreProps = {
*/
orientation?: Ariakit.CompositeStoreProps[ 'orientation' ];
/**
- * Determines how the `store`'s `next` and `previous` functions will behave.
+ * Controls how the previous and next items are determined.
* If `rtl` is set to `true`, they will be inverted.
*
* This only affects the composite widget behavior. You still need to set
* `dir="rtl"` on HTML/CSS.
*
- * @default false
+ * @default `isRtl()`
*/
rtl?: Ariakit.CompositeStoreProps[ 'rtl' ];
};
export type CompositeProps = CompositeStoreProps & {
- /**
- * Object returned by the `useCompositeStore` hook.
- */
- store?: Ariakit.CompositeStore;
/**
* Allows the component to be rendered as a different HTML element or React
* component. The value can be a React element or a function that takes in the
diff --git a/packages/components/src/date-time/date/styles.ts b/packages/components/src/date-time/date/styles.ts
index 8f208b53fac22..bffc8ae35d2a6 100644
--- a/packages/components/src/date-time/date/styles.ts
+++ b/packages/components/src/date-time/date/styles.ts
@@ -107,6 +107,7 @@ export const DayButton = styled( Button, {
`
::before {
background: ${ props.isSelected ? COLORS.white : COLORS.theme.accent };
+ border-radius: ${ CONFIG.radiusRound };
bottom: 2px;
content: " ";
height: 4px;
diff --git a/packages/components/src/dimension-control/README.md b/packages/components/src/dimension-control/README.md
index 3cd0191a04606..78c1a60275c13 100644
--- a/packages/components/src/dimension-control/README.md
+++ b/packages/components/src/dimension-control/README.md
@@ -1,5 +1,9 @@
# DimensionControl
+
+This component is deprecated.
+
+
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx
index 52662f31c3f24..25880f9b4fdb3 100644
--- a/packages/components/src/dimension-control/index.tsx
+++ b/packages/components/src/dimension-control/index.tsx
@@ -17,6 +17,7 @@ import sizesTable, { findSizeBySlug } from './sizes';
import type { DimensionControlProps, Size } from './types';
import type { SelectControlSingleSelectionProps } from '../select-control/types';
import { ContextSystemProvider } from '../context';
+import deprecated from '@wordpress/deprecated';
const CONTEXT_VALUE = {
BaseControl: {
@@ -29,7 +30,7 @@ const CONTEXT_VALUE = {
/**
* `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
*
- * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+ * @deprecated
*
* ```jsx
* import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
@@ -62,6 +63,11 @@ export function DimensionControl( props: DimensionControlProps ) {
className = '',
} = props;
+ deprecated( 'wp.components.DimensionControl', {
+ since: '6.7',
+ version: '7.0',
+ } );
+
const onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =
( val ) => {
const theSize = findSizeBySlug( sizes, val );
diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx
index 3a6da44f46116..15a63fcf6ccf6 100644
--- a/packages/components/src/dimension-control/stories/index.story.tsx
+++ b/packages/components/src/dimension-control/stories/index.story.tsx
@@ -13,9 +13,15 @@ import sizes from '../sizes';
*/
import { desktop, tablet, mobile } from '@wordpress/icons';
+/**
+ * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
+ *
+ * This component is deprecated.
+ */
const meta: Meta< typeof DimensionControl > = {
component: DimensionControl,
- title: 'Components (Experimental)/DimensionControl',
+ title: 'Components (Deprecated)/DimensionControl',
+ id: 'components-dimensioncontrol',
argTypes: {
onChange: { action: 'onChange' },
value: { control: { type: null } },
@@ -42,7 +48,6 @@ const Template: StoryFn< typeof DimensionControl > = ( args ) => (
);
export const Default = Template.bind( {} );
-
Default.args = {
__nextHasNoMarginBottom: true,
label: 'Please select a size',
diff --git a/packages/components/src/dimension-control/test/index.test.js b/packages/components/src/dimension-control/test/index.test.js
index 1b34d2983ad0f..14f1c509f70cf 100644
--- a/packages/components/src/dimension-control/test/index.test.js
+++ b/packages/components/src/dimension-control/test/index.test.js
@@ -31,6 +31,7 @@ describe( 'DimensionControl', () => {
const { container } = render(
);
+ expect( console ).toHaveWarned();
expect( container ).toMatchSnapshot();
} );
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 3ddfbd05cd658..32195ebc444ce 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -66,6 +66,7 @@ export {
CompositeItem as __unstableCompositeItem,
useCompositeState as __unstableUseCompositeState,
} from './composite/legacy';
+export { Composite } from './composite';
export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
export { default as CustomSelectControl } from './custom-select-control';
export { default as Dashicon } from './dashicon';
diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index fa9fece048617..b6e033ab24ab7 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -1,8 +1,6 @@
/**
* Internal dependencies
*/
-import { Composite } from './composite';
-import { useCompositeStore } from './composite/store';
import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
import { createPrivateSlotFill } from './slot-fill';
import { DropdownMenuV2 } from './dropdown-menu-v2';
@@ -14,11 +12,6 @@ import { lock } from './lock-unlock';
export const privateApis = {};
lock( privateApis, {
- CompositeV2: Composite,
- CompositeGroupV2: Composite.Group,
- CompositeItemV2: Composite.Item,
- CompositeRowV2: Composite.Row,
- useCompositeStoreV2: useCompositeStore,
__experimentalPopoverLegacyPositionToPlacement,
createPrivateSlotFill,
ComponentsContext,
diff --git a/packages/components/src/slot-fill/index.tsx b/packages/components/src/slot-fill/index.tsx
index b2df054973a5b..03ed33a67f13b 100644
--- a/packages/components/src/slot-fill/index.tsx
+++ b/packages/components/src/slot-fill/index.tsx
@@ -71,6 +71,7 @@ export function Provider( {
);
}
+Provider.displayName = 'SlotFillProvider';
export function createSlotFill( key: SlotKey ) {
const baseName = typeof key === 'symbol' ? key.description : key;
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index 951f70604f41c..2683fe8d79be7 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 7.7.0 (2024-09-05)
+
## 7.6.0 (2024-08-21)
## 7.5.0 (2024-08-07)
diff --git a/packages/compose/package.json b/packages/compose/package.json
index 92b3085e58575..4b68841d1777e 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/compose",
- "version": "7.6.0",
+ "version": "7.7.0",
"description": "WordPress higher-order components (HOCs).",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md
index 16bf8c495eb03..02871d4f31e13 100644
--- a/packages/core-commands/CHANGELOG.md
+++ b/packages/core-commands/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 1.7.0 (2024-09-05)
+
## 1.6.0 (2024-08-21)
## 1.5.0 (2024-08-07)
diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json
index 02b8b76b4f145..bae1e4c211cf0 100644
--- a/packages/core-commands/package.json
+++ b/packages/core-commands/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/core-commands",
- "version": "1.6.0",
+ "version": "1.7.0",
"description": "WordPress core reusable commands.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md
index caed77084733b..6286a55291a54 100644
--- a/packages/core-data/CHANGELOG.md
+++ b/packages/core-data/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 7.7.0 (2024-09-05)
+
## 7.6.0 (2024-08-21)
## 7.5.0 (2024-08-07)
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index e96f324708607..ddb2d2ef09177 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/core-data",
- "version": "7.6.0",
+ "version": "7.7.0",
"description": "Access to and manipulation of core WordPress entities.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index d1aaf0b447cfe..20270ef7f6cff 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -155,7 +155,7 @@ export const getEntityRecord =
}
);
- if ( query !== undefined ) {
+ if ( query !== undefined && query._fields ) {
query = { ...query, include: [ key ] };
// The resolution cache won't consider query as reusable based on the
diff --git a/packages/core-data/src/test/resolvers.js b/packages/core-data/src/test/resolvers.js
index 946b795726d2a..f15bee3b3c2b9 100644
--- a/packages/core-data/src/test/resolvers.js
+++ b/packages/core-data/src/test/resolvers.js
@@ -80,7 +80,6 @@ describe( 'getEntityRecord', () => {
it( 'accepts a query that overrides default api path', async () => {
const query = { context: 'view', _envelope: '1' };
- const queryObj = { include: [ 'post' ], ...query };
const select = {
hasEntityRecords: jest.fn( () => {} ),
@@ -98,13 +97,6 @@ describe( 'getEntityRecord', () => {
query
)( { dispatch, select, registry } );
- // Check resolution cache for an existing entity that fulfills the request with query.
- expect( select.hasEntityRecords ).toHaveBeenCalledWith(
- 'root',
- 'postType',
- queryObj
- );
-
// Trigger apiFetch, test that the query is present in the url.
expect( triggerFetch ).toHaveBeenCalledWith( {
path: '/wp/v2/types/post?context=view&_envelope=1',
@@ -116,7 +108,7 @@ describe( 'getEntityRecord', () => {
'root',
'postType',
POST_TYPE,
- queryObj
+ query
);
// Locks should have been acquired and released.
diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md
index 52f97a68cbf87..c044dfff15e3a 100644
--- a/packages/create-block-interactive-template/CHANGELOG.md
+++ b/packages/create-block-interactive-template/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 2.7.0 (2024-09-05)
+
### Enhancements
- Set the minimum supported WordPress version to 6.6 to make it work seamlessly with the latest version of `@wordpress/scripts` package ([#64920](https://github.com/WordPress/gutenberg/pull/64920)).
diff --git a/packages/create-block-interactive-template/package.json b/packages/create-block-interactive-template/package.json
index 848cd75765215..667d3998ba820 100644
--- a/packages/create-block-interactive-template/package.json
+++ b/packages/create-block-interactive-template/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/create-block-interactive-template",
- "version": "2.6.0",
+ "version": "2.7.0",
"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md
index 50290a8e07e90..0fe0f748b8804 100644
--- a/packages/create-block-tutorial-template/CHANGELOG.md
+++ b/packages/create-block-tutorial-template/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 4.7.0 (2024-09-05)
+
### Enhancements
- Set the minimum supported WordPress version to 6.6 to make it work seamlessly with the latest version of `@wordpress/scripts` package ([#64920](https://github.com/WordPress/gutenberg/pull/64920)).
diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json
index 0d9baf39d8db8..64a8a90bc167c 100644
--- a/packages/create-block-tutorial-template/package.json
+++ b/packages/create-block-tutorial-template/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/create-block-tutorial-template",
- "version": "4.6.0",
+ "version": "4.7.0",
"description": "This is a template for @wordpress/create-block that creates an example 'Copyright Date' block. This block is used in the official WordPress block development Quick Start Guide.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index 3f742b352614e..99e7b1fd37a33 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 4.50.0 (2024-09-05)
+
### Enhancements
- Unpin the `@wordpress/scripts` version and set the minimum supported WordPress version to 6.6 ([#64920](https://github.com/WordPress/gutenberg/pull/64920)).
diff --git a/packages/create-block/package.json b/packages/create-block/package.json
index 7548fca1532f0..2103a85c5894f 100644
--- a/packages/create-block/package.json
+++ b/packages/create-block/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/create-block",
- "version": "4.49.0",
+ "version": "4.50.0",
"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md
index aeec00430f47d..4e0d5a3755357 100644
--- a/packages/customize-widgets/CHANGELOG.md
+++ b/packages/customize-widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 5.7.0 (2024-09-05)
+
## 5.6.0 (2024-08-21)
## 5.5.0 (2024-08-07)
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index 9c8c0a79b771a..a8b50cf9cb318 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/customize-widgets",
- "version": "5.6.1",
+ "version": "5.7.0",
"description": "Widgets blocks in Customizer Module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md
index ae38ef764c535..e6af7fdcb6e24 100644
--- a/packages/data-controls/CHANGELOG.md
+++ b/packages/data-controls/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 4.7.0 (2024-09-05)
+
## 4.6.0 (2024-08-21)
## 4.5.0 (2024-08-07)
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index 216f4000adff8..e97e59b74700c 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/data-controls",
- "version": "4.6.0",
+ "version": "4.7.0",
"description": "A set of common controls for the @wordpress/data api.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index 52b88a1c5d429..4ba90611c2a78 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 10.7.0 (2024-09-05)
+
## 10.6.0 (2024-08-21)
## 10.5.0 (2024-08-07)
diff --git a/packages/data/package.json b/packages/data/package.json
index fb27caaf37798..84ad7a7973bc4 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/data",
- "version": "10.6.0",
+ "version": "10.7.0",
"description": "Data module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index bf93b9e52f657..1e323714c4d5f 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 4.3.0 (2024-09-05)
+
## 4.2.0 (2024-08-21)
## New features
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index e02c0a624aa41..e327a217435c5 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/dataviews",
- "version": "4.2.0",
+ "version": "4.3.0",
"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/dataviews/src/components/dataviews-filters/search-widget.tsx b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
index 1b369222b8f28..459b68990753c 100644
--- a/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
@@ -8,28 +8,18 @@ import removeAccents from 'remove-accents';
/**
* WordPress dependencies
*/
+import { useInstanceId } from '@wordpress/compose';
import { __, sprintf } from '@wordpress/i18n';
import { useState, useMemo, useDeferredValue } from '@wordpress/element';
-import {
- VisuallyHidden,
- Icon,
- privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { VisuallyHidden, Icon, Composite } from '@wordpress/components';
import { search, check } from '@wordpress/icons';
import { SVG, Circle } from '@wordpress/primitives';
/**
* Internal dependencies
*/
-import { unlock } from '../../lock-unlock';
import type { Filter, NormalizedFilter, View } from '../../types';
-const {
- CompositeV2: Composite,
- CompositeItemV2: CompositeItem,
- useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
-
interface SearchWidgetProps {
view: View;
filter: NormalizedFilter;
@@ -84,22 +74,37 @@ const getNewValue = (
return [ value ];
};
+function generateFilterElementCompositeItemId(
+ prefix: string,
+ filterElementValue: string
+) {
+ return `${ prefix }-${ filterElementValue }`;
+}
+
function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
- const compositeStore = useCompositeStore( {
- virtualFocus: true,
- focusLoop: true,
- // When we have no or just one operator, we can set the first item as active.
- // We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,
- // so the first item is not selected, since the focus is on the operators control.
- defaultActiveId: filter.operators?.length === 1 ? undefined : null,
- } );
+ const baseId = useInstanceId( ListBox, 'dataviews-filter-list-box' );
+
+ const [ activeCompositeId, setActiveCompositeId ] = useState<
+ string | null | undefined
+ >(
+ // When there are one or less operators, the first item is set as active
+ // (by setting the initial `activeId` to `undefined`).
+ // With 2 or more operators, the focus is moved on the operators control
+ // (by setting the initial `activeId` to `null`), meaning that there won't
+ // be an active item initially. Focus is then managed via the
+ // `onFocusVisible` callback.
+ filter.operators?.length === 1 ? undefined : null
+ );
const currentFilter = view.filters?.find(
( f ) => f.field === filter.field
);
const currentValue = getCurrentValue( filter, currentFilter );
return (
{
- if ( ! compositeStore.getState().activeId ) {
- compositeStore.move( compositeStore.first() );
+ // `onFocusVisible` needs the `Composite` component to be focusable,
+ // which is implicitly achieved via the `virtualFocus` prop.
+ if ( ! activeCompositeId && filter.elements.length ) {
+ setActiveCompositeId(
+ generateFilterElementCompositeItemId(
+ baseId,
+ filter.elements[ 0 ].value
+ )
+ );
}
} }
- render={ }
+ render={ }
>
{ filter.elements.map( ( element ) => (
- { element.label }
-
+
) ) }
);
diff --git a/packages/dataviews/src/components/dataviews-filters/style.scss b/packages/dataviews/src/components/dataviews-filters/style.scss
index f2841c16f0fec..ad834fb224e2e 100644
--- a/packages/dataviews/src/components/dataviews-filters/style.scss
+++ b/packages/dataviews/src/components/dataviews-filters/style.scss
@@ -169,7 +169,7 @@
display: flex;
align-items: center;
gap: $grid-unit-10;
- border-radius: $radius-block-ui;
+ border-radius: $radius-small;
box-sizing: border-box;
padding: $grid-unit-10 $grid-unit-15;
cursor: default;
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 331d0d62dca00..c01c72d2ebc69 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -38,8 +38,13 @@ import {
sortIcons,
sortLabels,
} from '../../constants';
-import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
-import type { NormalizedField, SupportedLayouts, View } from '../../types';
+import {
+ VIEW_LAYOUTS,
+ getNotHidableFieldIds,
+ getVisibleFieldIds,
+ getHiddenFieldIds,
+} from '../../dataviews-layouts';
+import type { SupportedLayouts, View, Field } from '../../types';
import DataViewsContext from '../dataviews-context';
import { unlock } from '../../lock-unlock';
import DensityPicker from '../../dataviews-layouts/grid/density-picker';
@@ -232,50 +237,34 @@ function ItemsPerPageControl() {
);
}
+interface FieldItemProps {
+ id: any;
+ label: string;
+ index: number;
+ isVisible: boolean;
+ isHidable: boolean;
+}
+
function FieldItem( {
+ field: { id, label, index, isVisible, isHidable },
fields,
- fieldId,
- mandatoryFields,
- viewFields,
view,
onChangeView,
}: {
- fields: NormalizedField< any >[];
- fieldId: string;
- mandatoryFields: string | any[];
- viewFields: string[];
+ field: FieldItemProps;
+ fields: Field< any >[];
view: View;
onChangeView: ( view: View ) => void;
} ) {
- let fieldLabel;
- let fieldIsHidable;
- const fieldObject = fields.find(
- ( f ) => f.id === fieldId
- ) as NormalizedField< any >;
- if ( fieldObject ) {
- fieldLabel = fieldObject.label;
- fieldIsHidable =
- fieldObject.enableHiding !== false &&
- ! mandatoryFields.includes( fieldId );
- } else if ( view.type === LAYOUT_TABLE ) {
- const combinedFieldObject = view.layout?.combinedFields?.find(
- ( f ) => f.id === fieldId
- );
- if ( combinedFieldObject ) {
- fieldLabel = combinedFieldObject.label;
- fieldIsHidable = ! mandatoryFields.includes( fieldId );
- }
- }
+ const visibleFieldIds = getVisibleFieldIds( view, fields );
- const index = view.fields?.indexOf( fieldId ) as number;
- const isVisible = viewFields.includes( fieldId );
return (
-
+
- { fieldLabel }
+ { label }
-
+
