diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 48fdf6906b077..02e81b2b0913d 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -8,6 +8,7 @@ import type { ChangeEvent } from 'react';
*/
import {
Button,
+ __experimentalDropdownContentWrapper as DropdownContentWrapper,
Dropdown,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -27,6 +28,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
import { memo, useContext, useMemo } from '@wordpress/element';
import { chevronDown, chevronUp, cog, seen, unseen } from '@wordpress/icons';
import warning from '@wordpress/warning';
+import { useInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
@@ -55,6 +57,8 @@ interface ViewTypeMenuProps {
defaultLayouts?: SupportedLayouts;
}
+const DATAVIEWS_CONFIG_POPOVER_PROPS = { placement: 'bottom-end', offset: 9 };
+
function ViewTypeMenu( {
defaultLayouts = { list: {}, grid: {}, table: {} },
}: ViewTypeMenuProps ) {
@@ -510,7 +514,7 @@ function SettingsSection( {
);
}
-function DataviewsViewConfigContent( {
+function DataviewsViewConfigDropdown( {
density,
setDensity,
}: {
@@ -518,25 +522,52 @@ function DataviewsViewConfigContent( {
setDensity: React.Dispatch< React.SetStateAction< number > >;
} ) {
const { view } = useContext( DataViewsContext );
+ const popoverId = useInstanceId(
+ _DataViewsViewConfig,
+ 'dataviews-view-config-dropdown'
+ );
+
return (
-
-
-
-
-
-
- { view.type === LAYOUT_GRID && (
- {
+ return (
+
- ) }
-
-
-
-
-
-
+ );
+ } }
+ renderContent={ () => (
+
+
+
+
+
+
+
+ { view.type === LAYOUT_GRID && (
+
+ ) }
+
+
+
+
+
+
+
+ ) }
+ />
);
}
@@ -552,28 +583,9 @@ function _DataViewsViewConfig( {
return (
<>
- {
- return (
-
- );
- } }
- renderContent={ () => (
-
- ) }
+
>
);
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index c7d07fe7866bc..7fff110337ee3 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -1,12 +1,9 @@
.dataviews-view-config {
- .components-popover__content {
- width: 320px;
- /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
- container-type: inline-size;
- padding: $grid-unit-20;
- font-size: $default-font-size;
- line-height: $default-line-height;
- }
+ width: 320px;
+ /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
+ container-type: inline-size;
+ font-size: $default-font-size;
+ line-height: $default-line-height;
}
.dataviews-view-config__sort-direction .components-toggle-group-control-option-base {