@wordpress/dataviews 3.0.0 → 4.1.0

package/build-module/components/dataviews-view-config/index.js

@@ -0,0 +1,292 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Button, Popover, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, SelectControl, __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalGrid as Grid, __experimentalVStack as VStack, __experimentalHStack as HStack, __experimentalHeading as Heading, __experimentalText as Text, privateApis as componentsPrivateApis } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { memo, useContext, useState, useMemo } from '@wordpress/element';
+import { cog, seen, unseen } from '@wordpress/icons';
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
+import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
+import DataViewsContext from '../dataviews-context';
+import { unlock } from '../../lock-unlock';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuRadioItemV2: DropdownMenuRadioItem,
+  DropdownMenuItemLabelV2: DropdownMenuItemLabel
+} = unlock(componentsPrivateApis);
+function ViewTypeMenu({
+  defaultLayouts = {
+    list: {},
+    grid: {},
+    table: {}
+  }
+}) {
+  const {
+    view,
+    onChangeView
+  } = useContext(DataViewsContext);
+  const availableLayouts = Object.keys(defaultLayouts);
+  if (availableLayouts.length <= 1) {
+    return null;
+  }
+  const activeView = VIEW_LAYOUTS.find(v => view.type === v.type);
+  return /*#__PURE__*/_jsx(DropdownMenu, {
+    trigger: /*#__PURE__*/_jsx(Button, {
+      size: "compact",
+      icon: activeView?.icon,
+      label: __('Layout')
+    }),
+    children: availableLayouts.map(layout => {
+      const config = VIEW_LAYOUTS.find(v => v.type === layout);
+      if (!config) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(DropdownMenuRadioItem, {
+        value: layout,
+        name: "view-actions-available-view",
+        checked: layout === view.type,
+        hideOnClick: true,
+        onChange: e => {
+          switch (e.target.value) {
+            case 'list':
+            case 'grid':
+            case 'table':
+              return onChangeView({
+                ...view,
+                type: e.target.value,
+                ...defaultLayouts[e.target.value]
+              });
+          }
+          globalThis.SCRIPT_DEBUG === true ? warning('Invalid dataview') : void 0;
+        },
+        children: /*#__PURE__*/_jsx(DropdownMenuItemLabel, {
+          children: config.label
+        })
+      }, layout);
+    })
+  });
+}
+function SortFieldControl() {
+  const {
+    view,
+    fields,
+    onChangeView
+  } = useContext(DataViewsContext);
+  const orderOptions = useMemo(() => {
+    const sortableFields = fields.filter(field => field.enableSorting !== false);
+    return sortableFields.map(field => {
+      return {
+        label: field.label,
+        value: field.id
+      };
+    });
+  }, [fields]);
+  return /*#__PURE__*/_jsx(SelectControl, {
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: true,
+    label: __('Sort by'),
+    value: view.sort?.field,
+    options: orderOptions,
+    onChange: value => {
+      onChangeView({
+        ...view,
+        sort: {
+          direction: view?.sort?.direction || 'desc',
+          field: value
+        }
+      });
+    }
+  });
+}
+function SortDirectionControl() {
+  const {
+    view,
+    onChangeView
+  } = useContext(DataViewsContext);
+  return /*#__PURE__*/_jsx(ToggleGroupControl, {
+    className: "dataviews-view-config__sort-direction",
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: true,
+    isBlock: true,
+    label: __('Order'),
+    value: view.sort?.direction || 'desc',
+    disabled: !view?.sort?.field,
+    onChange: newDirection => {
+      if (!view?.sort?.field) {
+        return;
+      }
+      if (newDirection === 'asc' || newDirection === 'desc') {
+        onChangeView({
+          ...view,
+          sort: {
+            direction: newDirection,
+            field: view.sort.field
+          }
+        });
+        return;
+      }
+      globalThis.SCRIPT_DEBUG === true ? warning('Invalid direction') : void 0;
+    },
+    children: SORTING_DIRECTIONS.map(direction => {
+      return /*#__PURE__*/_jsx(ToggleGroupControlOptionIcon, {
+        value: direction,
+        icon: sortIcons[direction],
+        label: sortLabels[direction]
+      }, direction);
+    })
+  });
+}
+const PAGE_SIZE_VALUES = [10, 20, 50, 100];
+function ItemsPerPageControl() {
+  const {
+    view,
+    onChangeView
+  } = useContext(DataViewsContext);
+  return /*#__PURE__*/_jsx(ToggleGroupControl, {
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: true,
+    isBlock: true,
+    label: __('Items per page'),
+    value: view.perPage || 10,
+    disabled: !view?.sort?.field,
+    onChange: newItemsPerPage => {
+      const newItemsPerPageNumber = typeof newItemsPerPage === 'number' || newItemsPerPage === undefined ? newItemsPerPage : parseInt(newItemsPerPage, 10);
+      onChangeView({
+        ...view,
+        perPage: newItemsPerPageNumber,
+        page: 1
+      });
+    },
+    children: PAGE_SIZE_VALUES.map(value => {
+      return /*#__PURE__*/_jsx(ToggleGroupControlOption, {
+        value: value,
+        label: value.toString()
+      }, value);
+    })
+  });
+}
+function FieldControl() {
+  const {
+    view,
+    fields,
+    onChangeView
+  } = useContext(DataViewsContext);
+  const mandatoryFields = getMandatoryFields(view);
+  const hidableFields = fields.filter(field => field.enableHiding !== false && !mandatoryFields.includes(field.id));
+  const viewFields = view.fields || fields.map(field => field.id);
+  if (!hidableFields?.length) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(ItemGroup, {
+    isBordered: true,
+    isSeparated: true,
+    children: hidableFields?.map(field => {
+      const isVisible = viewFields.includes(field.id);
+      return /*#__PURE__*/_jsx(Item, {
+        children: /*#__PURE__*/_jsxs(HStack, {
+          expanded: true,
+          children: [/*#__PURE__*/_jsx("span", {
+            children: field.label
+          }), /*#__PURE__*/_jsx(Button, {
+            className: "'dataviews-view-config__field-control-button",
+            size: "compact",
+            onClick: () => onChangeView({
+              ...view,
+              fields: isVisible ? viewFields.filter(id => id !== field.id) : [...viewFields, field.id]
+            }),
+            icon: isVisible ? seen : unseen,
+            label: isVisible ? __('Hide field') : __('Show field')
+          })]
+        })
+      }, field.id);
+    })
+  });
+}
+function SettingsSection({
+  title,
+  description,
+  children
+}) {
+  return /*#__PURE__*/_jsxs(Grid, {
+    columns: 12,
+    className: "dataviews-settings-section",
+    gap: 4,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "dataviews-settings-section__sidebar",
+      children: [/*#__PURE__*/_jsx(Heading, {
+        level: 2,
+        className: "dataviews-settings-section__title",
+        children: title
+      }), description && /*#__PURE__*/_jsx(Text, {
+        variant: "muted",
+        className: "dataviews-settings-section__description",
+        children: description
+      })]
+    }), /*#__PURE__*/_jsx(Grid, {
+      columns: 8,
+      gap: 4,
+      className: "dataviews-settings-section__content",
+      children: children
+    })]
+  });
+}
+function DataviewsViewConfigContent() {
+  return /*#__PURE__*/_jsxs(VStack, {
+    className: "dataviews-view-config",
+    spacing: 6,
+    children: [/*#__PURE__*/_jsxs(SettingsSection, {
+      title: __('Appearance'),
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        expanded: true,
+        className: "is-divided-in-two",
+        children: [/*#__PURE__*/_jsx(SortFieldControl, {}), /*#__PURE__*/_jsx(SortDirectionControl, {})]
+      }), /*#__PURE__*/_jsx(ItemsPerPageControl, {})]
+    }), /*#__PURE__*/_jsx(SettingsSection, {
+      title: __('Properties'),
+      children: /*#__PURE__*/_jsx(FieldControl, {})
+    })]
+  });
+}
+function _DataViewsViewConfig({
+  defaultLayouts = {
+    list: {},
+    grid: {},
+    table: {}
+  }
+}) {
+  const [isShowingViewPopover, setIsShowingViewPopover] = useState(false);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ViewTypeMenu, {
+      defaultLayouts: defaultLayouts
+    }), /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(Button, {
+        size: "compact",
+        icon: cog,
+        label: _x('View options', 'View is used as a noun'),
+        onClick: () => setIsShowingViewPopover(true)
+      }), isShowingViewPopover && /*#__PURE__*/_jsx(Popover, {
+        placement: "bottom-end",
+        onClose: () => {
+          setIsShowingViewPopover(false);
+        },
+        focusOnMount: true,
+        children: /*#__PURE__*/_jsx(DataviewsViewConfigContent, {})
+      })]
+    })]
+  });
+}
+const DataViewsViewConfig = memo(_DataViewsViewConfig);
+export default DataViewsViewConfig;
+//# sourceMappingURL=index.js.map

package/build-module/components/dataviews-view-config/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","Popover","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__experimentalToggleGroupControlOptionIcon","ToggleGroupControlOptionIcon","SelectControl","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalGrid","Grid","__experimentalVStack","VStack","__experimentalHStack","HStack","__experimentalHeading","Heading","__experimentalText","Text","privateApis","componentsPrivateApis","__","_x","memo","useContext","useState","useMemo","cog","seen","unseen","warning","SORTING_DIRECTIONS","sortIcons","sortLabels","VIEW_LAYOUTS","getMandatoryFields","DataViewsContext","unlock","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DropdownMenuV2","DropdownMenu","DropdownMenuRadioItemV2","DropdownMenuRadioItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","ViewTypeMenu","defaultLayouts","list","grid","table","view","onChangeView","availableLayouts","Object","keys","length","activeView","find","v","type","trigger","size","icon","label","children","map","layout","config","value","name","checked","hideOnClick","onChange","e","target","globalThis","SCRIPT_DEBUG","SortFieldControl","fields","orderOptions","sortableFields","filter","field","enableSorting","id","__nextHasNoMarginBottom","__next40pxDefaultSize","sort","options","direction","SortDirectionControl","className","isBlock","disabled","newDirection","PAGE_SIZE_VALUES","ItemsPerPageControl","perPage","newItemsPerPage","newItemsPerPageNumber","undefined","parseInt","page","toString","FieldControl","mandatoryFields","hidableFields","enableHiding","includes","viewFields","isBordered","isSeparated","isVisible","expanded","onClick","SettingsSection","title","description","columns","gap","level","variant","DataviewsViewConfigContent","spacing","_DataViewsViewConfig","isShowingViewPopover","setIsShowingViewPopover","placement","onClose","focusOnMount","DataViewsViewConfig"],"sources":["@wordpress/dataviews/src/components/dataviews-view-config/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tPopover,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\tSelectControl,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { memo, useContext, useState, useMemo } from '@wordpress/element';\nimport { cog, seen, unseen } from '@wordpress/icons';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';\nimport { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';\nimport type { SupportedLayouts } from '../../types';\nimport DataViewsContext from '../dataviews-context';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuRadioItemV2: DropdownMenuRadioItem,\n\tDropdownMenuItemLabelV2: DropdownMenuItemLabel,\n} = unlock( componentsPrivateApis );\n\ninterface ViewTypeMenuProps {\n\tdefaultLayouts?: SupportedLayouts;\n}\n\nfunction ViewTypeMenu( {\n\tdefaultLayouts = { list: {}, grid: {}, table: {} },\n}: ViewTypeMenuProps ) {\n\tconst { view, onChangeView } = useContext( DataViewsContext );\n\tconst availableLayouts = Object.keys( defaultLayouts );\n\tif ( availableLayouts.length <= 1 ) {\n\t\treturn null;\n\t}\n\tconst activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={ activeView?.icon }\n\t\t\t\t\tlabel={ __( 'Layout' ) }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ availableLayouts.map( ( layout ) => {\n\t\t\t\tconst config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );\n\t\t\t\tif ( ! config ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\tkey={ layout }\n\t\t\t\t\t\tvalue={ layout }\n\t\t\t\t\t\tname=\"view-actions-available-view\"\n\t\t\t\t\t\tchecked={ layout === view.type }\n\t\t\t\t\t\thideOnClick\n\t\t\t\t\t\tonChange={ ( e: ChangeEvent< HTMLInputElement > ) => {\n\t\t\t\t\t\t\tswitch ( e.target.value ) {\n\t\t\t\t\t\t\t\tcase 'list':\n\t\t\t\t\t\t\t\tcase 'grid':\n\t\t\t\t\t\t\t\tcase 'table':\n\t\t\t\t\t\t\t\t\treturn onChangeView( {\n\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\ttype: e.target.value,\n\t\t\t\t\t\t\t\t\t\t...defaultLayouts[ e.target.value ],\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twarning( 'Invalid dataview' );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t{ config.label }\n\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t</DropdownMenuRadioItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\ninterface ViewActionsProps {\n\tdefaultLayouts?: SupportedLayouts;\n}\n\nfunction SortFieldControl() {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\tconst orderOptions = useMemo( () => {\n\t\tconst sortableFields = fields.filter(\n\t\t\t( field ) => field.enableSorting !== false\n\t\t);\n\t\treturn sortableFields.map( ( field ) => {\n\t\t\treturn {\n\t\t\t\tlabel: field.label,\n\t\t\t\tvalue: field.id,\n\t\t\t};\n\t\t} );\n\t}, [ fields ] );\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Sort by' ) }\n\t\t\tvalue={ view.sort?.field }\n\t\t\toptions={ orderOptions }\n\t\t\tonChange={ ( value: string ) => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tsort: {\n\t\t\t\t\t\tdirection: view?.sort?.direction || 'desc',\n\t\t\t\t\t\tfield: value,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction SortDirectionControl() {\n\tconst { view, onChangeView } = useContext( DataViewsContext );\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tclassName=\"dataviews-view-config__sort-direction\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ __( 'Order' ) }\n\t\t\tvalue={ view.sort?.direction || 'desc' }\n\t\t\tdisabled={ ! view?.sort?.field }\n\t\t\tonChange={ ( newDirection ) => {\n\t\t\t\tif ( ! view?.sort?.field ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( newDirection === 'asc' || newDirection === 'desc' ) {\n\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t...view,\n\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\tdirection: newDirection,\n\t\t\t\t\t\t\tfield: view.sort.field,\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\twarning( 'Invalid direction' );\n\t\t\t} }\n\t\t>\n\t\t\t{ SORTING_DIRECTIONS.map( ( direction ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\tvalue={ direction }\n\t\t\t\t\t\ticon={ sortIcons[ direction ] }\n\t\t\t\t\t\tlabel={ sortLabels[ direction ] }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nconst PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];\nfunction ItemsPerPageControl() {\n\tconst { view, onChangeView } = useContext( DataViewsContext );\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tisBlock\n\t\t\tlabel={ __( 'Items per page' ) }\n\t\t\tvalue={ view.perPage || 10 }\n\t\t\tdisabled={ ! view?.sort?.field }\n\t\t\tonChange={ ( newItemsPerPage ) => {\n\t\t\t\tconst newItemsPerPageNumber =\n\t\t\t\t\ttypeof newItemsPerPage === 'number' ||\n\t\t\t\t\tnewItemsPerPage === undefined\n\t\t\t\t\t\t? newItemsPerPage\n\t\t\t\t\t\t: parseInt( newItemsPerPage, 10 );\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tperPage: newItemsPerPageNumber,\n\t\t\t\t\tpage: 1,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t{ PAGE_SIZE_VALUES.map( ( value ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tlabel={ value.toString() }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nfunction FieldControl() {\n\tconst { view, fields, onChangeView } = useContext( DataViewsContext );\n\tconst mandatoryFields = getMandatoryFields( view );\n\tconst hidableFields = fields.filter(\n\t\t( field ) =>\n\t\t\tfield.enableHiding !== false &&\n\t\t\t! mandatoryFields.includes( field.id )\n\t);\n\tconst viewFields = view.fields || fields.map( ( field ) => field.id );\n\tif ( ! hidableFields?.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<ItemGroup isBordered isSeparated>\n\t\t\t{ hidableFields?.map( ( field ) => {\n\t\t\t\tconst isVisible = viewFields.includes( field.id );\n\t\t\t\treturn (\n\t\t\t\t\t<Item key={ field.id }>\n\t\t\t\t\t\t<HStack expanded>\n\t\t\t\t\t\t\t<span>{ field.label }</span>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"'dataviews-view-config__field-control-button\"\n\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\tfields: isVisible\n\t\t\t\t\t\t\t\t\t\t\t? viewFields.filter(\n\t\t\t\t\t\t\t\t\t\t\t\t\t( id ) => id !== field.id\n\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t\t: [ ...viewFields, field.id ],\n\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ticon={ isVisible ? seen : unseen }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisVisible\n\t\t\t\t\t\t\t\t\t\t? __( 'Hide field' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Show field' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</Item>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ItemGroup>\n\t);\n}\n\nfunction SettingsSection( {\n\ttitle,\n\tdescription,\n\tchildren,\n}: {\n\ttitle: string;\n\tdescription?: string;\n\tchildren: React.ReactNode;\n} ) {\n\treturn (\n\t\t<Grid columns={ 12 } className=\"dataviews-settings-section\" gap={ 4 }>\n\t\t\t<div className=\"dataviews-settings-section__sidebar\">\n\t\t\t\t<Heading\n\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\tclassName=\"dataviews-settings-section__title\"\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\n\t\t\t\t{ description && (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tvariant=\"muted\"\n\t\t\t\t\t\tclassName=\"dataviews-settings-section__description\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<Grid\n\t\t\t\tcolumns={ 8 }\n\t\t\t\tgap={ 4 }\n\t\t\t\tclassName=\"dataviews-settings-section__content\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Grid>\n\t\t</Grid>\n\t);\n}\n\nfunction DataviewsViewConfigContent() {\n\treturn (\n\t\t<VStack className=\"dataviews-view-config\" spacing={ 6 }>\n\t\t\t<SettingsSection title={ __( 'Appearance' ) }>\n\t\t\t\t<HStack expanded className=\"is-divided-in-two\">\n\t\t\t\t\t<SortFieldControl />\n\t\t\t\t\t<SortDirectionControl />\n\t\t\t\t</HStack>\n\t\t\t\t<ItemsPerPageControl />\n\t\t\t</SettingsSection>\n\t\t\t<SettingsSection title={ __( 'Properties' ) }>\n\t\t\t\t<FieldControl />\n\t\t\t</SettingsSection>\n\t\t</VStack>\n\t);\n}\n\nfunction _DataViewsViewConfig( {\n\tdefaultLayouts = { list: {}, grid: {}, table: {} },\n}: ViewActionsProps ) {\n\tconst [ isShowingViewPopover, setIsShowingViewPopover ] =\n\t\tuseState< boolean >( false );\n\n\treturn (\n\t\t<>\n\t\t\t<ViewTypeMenu defaultLayouts={ defaultLayouts } />\n\t\t\t<div>\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={ cog }\n\t\t\t\t\tlabel={ _x( 'View options', 'View is used as a noun' ) }\n\t\t\t\t\tonClick={ () => setIsShowingViewPopover( true ) }\n\t\t\t\t/>\n\t\t\t\t{ isShowingViewPopover && (\n\t\t\t\t\t<Popover\n\t\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\tsetIsShowingViewPopover( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tfocusOnMount\n\t\t\t\t\t>\n\t\t\t\t\t\t<DataviewsViewConfigContent />\n\t\t\t\t\t</Popover>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nconst DataViewsViewConfig = memo( _DataViewsViewConfig );\n\nexport default DataViewsViewConfig;\n"],"mappings":"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","ignoreList":[]}

package/build-module/constants.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { arrowDown, arrowUp } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -54,6 +55,10 @@ export const sortLabels = {
   asc: __('Sort ascending'),
   desc: __('Sort descending')
 };
+export const sortIcons = {
+  asc: arrowUp,
+  desc: arrowDown
+};
 
 // View layouts.
 export const LAYOUT_TABLE = 'table';

package/build-module/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","OPERATOR_IS","OPERATOR_IS_NOT","OPERATOR_IS_ANY","OPERATOR_IS_NONE","OPERATOR_IS_ALL","OPERATOR_IS_NOT_ALL","ALL_OPERATORS","OPERATORS","key","label","SORTING_DIRECTIONS","sortArrows","asc","desc","sortValues","sortLabels","LAYOUT_TABLE","LAYOUT_GRID","LAYOUT_LIST"],"sources":["@wordpress/dataviews/src/constants.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { Operator } from './types';\n\n// Filter operators.\nexport const OPERATOR_IS = 'is';\nexport const OPERATOR_IS_NOT = 'isNot';\nexport const OPERATOR_IS_ANY = 'isAny';\nexport const OPERATOR_IS_NONE = 'isNone';\nexport const OPERATOR_IS_ALL = 'isAll';\nexport const OPERATOR_IS_NOT_ALL = 'isNotAll';\n\nexport const ALL_OPERATORS = [\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_NONE,\n\tOPERATOR_IS_ALL,\n\tOPERATOR_IS_NOT_ALL,\n];\nexport const OPERATORS: Record< Operator, { key: string; label: string } > = {\n\t[ OPERATOR_IS ]: {\n\t\tkey: 'is-filter',\n\t\tlabel: __( 'Is' ),\n\t},\n\t[ OPERATOR_IS_NOT ]: {\n\t\tkey: 'is-not-filter',\n\t\tlabel: __( 'Is not' ),\n\t},\n\t[ OPERATOR_IS_ANY ]: {\n\t\tkey: 'is-any-filter',\n\t\tlabel: __( 'Is any' ),\n\t},\n\t[ OPERATOR_IS_NONE ]: {\n\t\tkey: 'is-none-filter',\n\t\tlabel: __( 'Is none' ),\n\t},\n\t[ OPERATOR_IS_ALL ]: {\n\t\tkey: 'is-all-filter',\n\t\tlabel: __( 'Is all' ),\n\t},\n\t[ OPERATOR_IS_NOT_ALL ]: {\n\t\tkey: 'is-not-all-filter',\n\t\tlabel: __( 'Is not all' ),\n\t},\n};\n\nexport const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;\nexport const sortArrows = { asc: '↑', desc: '↓' };\nexport const sortValues = { asc: 'ascending', desc: 'descending' } as const;\nexport const sortLabels = {\n\tasc: __( 'Sort ascending' ),\n\tdesc: __( 'Sort descending' ),\n};\n\n// View layouts.\nexport const LAYOUT_TABLE = 'table';\nexport const LAYOUT_GRID = 'grid';\nexport const LAYOUT_LIST = 'list';\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;;AAGA;AACA,OAAO,MAAMC,WAAW,GAAG,IAAI;AAC/B,OAAO,MAAMC,eAAe,GAAG,OAAO;AACtC,OAAO,MAAMC,eAAe,GAAG,OAAO;AACtC,OAAO,MAAMC,gBAAgB,GAAG,QAAQ;AACxC,OAAO,MAAMC,eAAe,GAAG,OAAO;AACtC,OAAO,MAAMC,mBAAmB,GAAG,UAAU;AAE7C,OAAO,MAAMC,aAAa,GAAG,CAC5BN,WAAW,EACXC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,CACnB;AACD,OAAO,MAAME,SAA6D,GAAG;EAC5E,CAAEP,WAAW,GAAI;IAChBQ,GAAG,EAAE,WAAW;IAChBC,KAAK,EAAEV,EAAE,CAAE,IAAK;EACjB,CAAC;EACD,CAAEE,eAAe,GAAI;IACpBO,GAAG,EAAE,eAAe;IACpBC,KAAK,EAAEV,EAAE,CAAE,QAAS;EACrB,CAAC;EACD,CAAEG,eAAe,GAAI;IACpBM,GAAG,EAAE,eAAe;IACpBC,KAAK,EAAEV,EAAE,CAAE,QAAS;EACrB,CAAC;EACD,CAAEI,gBAAgB,GAAI;IACrBK,GAAG,EAAE,gBAAgB;IACrBC,KAAK,EAAEV,EAAE,CAAE,SAAU;EACtB,CAAC;EACD,CAAEK,eAAe,GAAI;IACpBI,GAAG,EAAE,eAAe;IACpBC,KAAK,EAAEV,EAAE,CAAE,QAAS;EACrB,CAAC;EACD,CAAEM,mBAAmB,GAAI;IACxBG,GAAG,EAAE,mBAAmB;IACxBC,KAAK,EAAEV,EAAE,CAAE,YAAa;EACzB;AACD,CAAC;AAED,OAAO,MAAMW,kBAAkB,GAAG,CAAE,KAAK,EAAE,MAAM,CAAW;AAC5D,OAAO,MAAMC,UAAU,GAAG;EAAEC,GAAG,EAAE,GAAG;EAAEC,IAAI,EAAE;AAAI,CAAC;AACjD,OAAO,MAAMC,UAAU,GAAG;EAAEF,GAAG,EAAE,WAAW;EAAEC,IAAI,EAAE;AAAa,CAAU;AAC3E,OAAO,MAAME,UAAU,GAAG;EACzBH,GAAG,EAAEb,EAAE,CAAE,gBAAiB,CAAC;EAC3Bc,IAAI,EAAEd,EAAE,CAAE,iBAAkB;AAC7B,CAAC;;AAED;AACA,OAAO,MAAMiB,YAAY,GAAG,OAAO;AACnC,OAAO,MAAMC,WAAW,GAAG,MAAM;AACjC,OAAO,MAAMC,WAAW,GAAG,MAAM","ignoreList":[]}
+{"version":3,"names":["__","arrowDown","arrowUp","OPERATOR_IS","OPERATOR_IS_NOT","OPERATOR_IS_ANY","OPERATOR_IS_NONE","OPERATOR_IS_ALL","OPERATOR_IS_NOT_ALL","ALL_OPERATORS","OPERATORS","key","label","SORTING_DIRECTIONS","sortArrows","asc","desc","sortValues","sortLabels","sortIcons","LAYOUT_TABLE","LAYOUT_GRID","LAYOUT_LIST"],"sources":["@wordpress/dataviews/src/constants.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { arrowDown, arrowUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { Operator } from './types';\n\n// Filter operators.\nexport const OPERATOR_IS = 'is';\nexport const OPERATOR_IS_NOT = 'isNot';\nexport const OPERATOR_IS_ANY = 'isAny';\nexport const OPERATOR_IS_NONE = 'isNone';\nexport const OPERATOR_IS_ALL = 'isAll';\nexport const OPERATOR_IS_NOT_ALL = 'isNotAll';\n\nexport const ALL_OPERATORS = [\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_NONE,\n\tOPERATOR_IS_ALL,\n\tOPERATOR_IS_NOT_ALL,\n];\nexport const OPERATORS: Record< Operator, { key: string; label: string } > = {\n\t[ OPERATOR_IS ]: {\n\t\tkey: 'is-filter',\n\t\tlabel: __( 'Is' ),\n\t},\n\t[ OPERATOR_IS_NOT ]: {\n\t\tkey: 'is-not-filter',\n\t\tlabel: __( 'Is not' ),\n\t},\n\t[ OPERATOR_IS_ANY ]: {\n\t\tkey: 'is-any-filter',\n\t\tlabel: __( 'Is any' ),\n\t},\n\t[ OPERATOR_IS_NONE ]: {\n\t\tkey: 'is-none-filter',\n\t\tlabel: __( 'Is none' ),\n\t},\n\t[ OPERATOR_IS_ALL ]: {\n\t\tkey: 'is-all-filter',\n\t\tlabel: __( 'Is all' ),\n\t},\n\t[ OPERATOR_IS_NOT_ALL ]: {\n\t\tkey: 'is-not-all-filter',\n\t\tlabel: __( 'Is not all' ),\n\t},\n};\n\nexport const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;\nexport const sortArrows = { asc: '↑', desc: '↓' };\nexport const sortValues = { asc: 'ascending', desc: 'descending' } as const;\nexport const sortLabels = {\n\tasc: __( 'Sort ascending' ),\n\tdesc: __( 'Sort descending' ),\n};\nexport const sortIcons = {\n\tasc: arrowUp,\n\tdesc: arrowDown,\n};\n\n// View layouts.\nexport const LAYOUT_TABLE = 'table';\nexport const LAYOUT_GRID = 'grid';\nexport const LAYOUT_LIST = 'list';\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,EAAEC,OAAO,QAAQ,kBAAkB;;AAErD;AACA;AACA;;AAGA;AACA,OAAO,MAAMC,WAAW,GAAG,IAAI;AAC/B,OAAO,MAAMC,eAAe,GAAG,OAAO;AACtC,OAAO,MAAMC,eAAe,GAAG,OAAO;AACtC,OAAO,MAAMC,gBAAgB,GAAG,QAAQ;AACxC,OAAO,MAAMC,eAAe,GAAG,OAAO;AACtC,OAAO,MAAMC,mBAAmB,GAAG,UAAU;AAE7C,OAAO,MAAMC,aAAa,GAAG,CAC5BN,WAAW,EACXC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,CACnB;AACD,OAAO,MAAME,SAA6D,GAAG;EAC5E,CAAEP,WAAW,GAAI;IAChBQ,GAAG,EAAE,WAAW;IAChBC,KAAK,EAAEZ,EAAE,CAAE,IAAK;EACjB,CAAC;EACD,CAAEI,eAAe,GAAI;IACpBO,GAAG,EAAE,eAAe;IACpBC,KAAK,EAAEZ,EAAE,CAAE,QAAS;EACrB,CAAC;EACD,CAAEK,eAAe,GAAI;IACpBM,GAAG,EAAE,eAAe;IACpBC,KAAK,EAAEZ,EAAE,CAAE,QAAS;EACrB,CAAC;EACD,CAAEM,gBAAgB,GAAI;IACrBK,GAAG,EAAE,gBAAgB;IACrBC,KAAK,EAAEZ,EAAE,CAAE,SAAU;EACtB,CAAC;EACD,CAAEO,eAAe,GAAI;IACpBI,GAAG,EAAE,eAAe;IACpBC,KAAK,EAAEZ,EAAE,CAAE,QAAS;EACrB,CAAC;EACD,CAAEQ,mBAAmB,GAAI;IACxBG,GAAG,EAAE,mBAAmB;IACxBC,KAAK,EAAEZ,EAAE,CAAE,YAAa;EACzB;AACD,CAAC;AAED,OAAO,MAAMa,kBAAkB,GAAG,CAAE,KAAK,EAAE,MAAM,CAAW;AAC5D,OAAO,MAAMC,UAAU,GAAG;EAAEC,GAAG,EAAE,GAAG;EAAEC,IAAI,EAAE;AAAI,CAAC;AACjD,OAAO,MAAMC,UAAU,GAAG;EAAEF,GAAG,EAAE,WAAW;EAAEC,IAAI,EAAE;AAAa,CAAU;AAC3E,OAAO,MAAME,UAAU,GAAG;EACzBH,GAAG,EAAEf,EAAE,CAAE,gBAAiB,CAAC;EAC3BgB,IAAI,EAAEhB,EAAE,CAAE,iBAAkB;AAC7B,CAAC;AACD,OAAO,MAAMmB,SAAS,GAAG;EACxBJ,GAAG,EAAEb,OAAO;EACZc,IAAI,EAAEf;AACP,CAAC;;AAED;AACA,OAAO,MAAMmB,YAAY,GAAG,OAAO;AACnC,OAAO,MAAMC,WAAW,GAAG,MAAM;AACjC,OAAO,MAAMC,WAAW,GAAG,MAAM","ignoreList":[]}

package/build-module/dataforms-layouts/index.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import FormRegular from './regular';
+import FormPanel from './panel';
+const FORM_LAYOUTS = [{
+  type: 'regular',
+  component: FormRegular
+}, {
+  type: 'panel',
+  component: FormPanel
+}];
+export function getFormLayout(type) {
+  return FORM_LAYOUTS.find(layout => layout.type === type);
+}
+//# sourceMappingURL=index.js.map

package/build-module/dataforms-layouts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FormRegular","FormPanel","FORM_LAYOUTS","type","component","getFormLayout","find","layout"],"sources":["@wordpress/dataviews/src/dataforms-layouts/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport FormRegular from './regular';\nimport FormPanel from './panel';\n\nconst FORM_LAYOUTS = [\n\t{\n\t\ttype: 'regular',\n\t\tcomponent: FormRegular,\n\t},\n\t{\n\t\ttype: 'panel',\n\t\tcomponent: FormPanel,\n\t},\n];\n\nexport function getFormLayout( type: string ) {\n\treturn FORM_LAYOUTS.find( ( layout ) => layout.type === type );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,WAAW,MAAM,WAAW;AACnC,OAAOC,SAAS,MAAM,SAAS;AAE/B,MAAMC,YAAY,GAAG,CACpB;EACCC,IAAI,EAAE,SAAS;EACfC,SAAS,EAAEJ;AACZ,CAAC,EACD;EACCG,IAAI,EAAE,OAAO;EACbC,SAAS,EAAEH;AACZ,CAAC,CACD;AAED,OAAO,SAASI,aAAaA,CAAEF,IAAY,EAAG;EAC7C,OAAOD,YAAY,CAACI,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACJ,IAAI,KAAKA,IAAK,CAAC;AAC/D","ignoreList":[]}

package/build-module/dataforms-layouts/panel/index.js

@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack, __experimentalHStack as HStack, __experimentalHeading as Heading, __experimentalSpacer as Spacer, Dropdown, Button } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { sprintf, __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from '../../normalize-fields';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function DropdownHeader({
+  title,
+  onClose
+}) {
+  return /*#__PURE__*/_jsx(VStack, {
+    className: "dataforms-layouts-panel__dropdown-header",
+    spacing: 4,
+    children: /*#__PURE__*/_jsxs(HStack, {
+      alignment: "center",
+      children: [/*#__PURE__*/_jsx(Heading, {
+        level: 2,
+        size: 13,
+        children: title
+      }), /*#__PURE__*/_jsx(Spacer, {}), onClose && /*#__PURE__*/_jsx(Button, {
+        className: "dataforms-layouts-panel__dropdown-header-action",
+        label: __('Close'),
+        icon: closeSmall,
+        onClick: onClose
+      })]
+    })
+  });
+}
+function FormField({
+  data,
+  field,
+  onChange
+}) {
+  // Use internal state instead of a ref to make sure that the component
+  // re-renders when the popover's anchor updates.
+  const [popoverAnchor, setPopoverAnchor] = useState(null);
+  // Memoize popoverProps to avoid returning a new object every time.
+  const popoverProps = useMemo(() => ({
+    // Anchor the popover to the middle of the entire row so that it doesn't
+    // move around when the label changes.
+    anchor: popoverAnchor,
+    placement: 'left-start',
+    offset: 36,
+    shift: true
+  }), [popoverAnchor]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    ref: setPopoverAnchor,
+    className: "dataforms-layouts-panel__field",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "dataforms-layouts-panel__field-label",
+      children: field.label
+    }), /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        contentClassName: "dataforms-layouts-panel__field-dropdown",
+        popoverProps: popoverProps,
+        focusOnMount: true,
+        toggleProps: {
+          size: 'compact',
+          variant: 'tertiary',
+          tooltipPosition: 'middle left'
+        },
+        renderToggle: ({
+          isOpen,
+          onToggle
+        }) => /*#__PURE__*/_jsx(Button, {
+          className: "dataforms-layouts-panel__field-control",
+          size: "compact",
+          variant: "tertiary",
+          "aria-expanded": isOpen,
+          "aria-label": sprintf(
+          // translators: %s: Field name.
+          __('Edit %s'), field.label),
+          onClick: onToggle,
+          children: /*#__PURE__*/_jsx(field.render, {
+            item: data
+          })
+        }),
+        renderContent: ({
+          onClose
+        }) => /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(DropdownHeader, {
+            title: field.label,
+            onClose: onClose
+          }), /*#__PURE__*/_jsx(field.Edit, {
+            data: data,
+            field: field,
+            onChange: onChange,
+            hideLabelFromVision: true
+          }, field.id)]
+        })
+      })
+    })]
+  });
+}
+export default function FormPanel({
+  data,
+  fields,
+  form,
+  onChange
+}) {
+  const visibleFields = useMemo(() => normalizeFields(fields.filter(({
+    id
+  }) => !!form.fields?.includes(id))), [fields, form.fields]);
+  return /*#__PURE__*/_jsx(VStack, {
+    spacing: 2,
+    children: visibleFields.map(field => {
+      return /*#__PURE__*/_jsx(FormField, {
+        data: data,
+        field: field,
+        onChange: onChange
+      }, field.id);
+    })
+  });
+}
+//# sourceMappingURL=index.js.map

package/build-module/dataforms-layouts/panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalVStack","VStack","__experimentalHStack","HStack","__experimentalHeading","Heading","__experimentalSpacer","Spacer","Dropdown","Button","useState","useMemo","sprintf","__","closeSmall","normalizeFields","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DropdownHeader","title","onClose","className","spacing","children","alignment","level","size","label","icon","onClick","FormField","data","field","onChange","popoverAnchor","setPopoverAnchor","popoverProps","anchor","placement","offset","shift","ref","contentClassName","focusOnMount","toggleProps","variant","tooltipPosition","renderToggle","isOpen","onToggle","render","item","renderContent","Edit","hideLabelFromVision","id","FormPanel","fields","form","visibleFields","filter","includes","map"],"sources":["@wordpress/dataviews/src/dataforms-layouts/panel/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\t__experimentalHeading as Heading,\n\t__experimentalSpacer as Spacer,\n\tDropdown,\n\tButton,\n} from '@wordpress/components';\nimport { useState, useMemo } from '@wordpress/element';\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { normalizeFields } from '../../normalize-fields';\nimport type { DataFormProps, NormalizedField } from '../../types';\n\ninterface FormFieldProps< Item > {\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: any ) => void;\n}\n\nfunction DropdownHeader( {\n\ttitle,\n\tonClose,\n}: {\n\ttitle: string;\n\tonClose: () => void;\n} ) {\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"dataforms-layouts-panel__dropdown-header\"\n\t\t\tspacing={ 4 }\n\t\t>\n\t\t\t<HStack alignment=\"center\">\n\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\n\t\t\t\t<Spacer />\n\t\t\t\t{ onClose && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"dataforms-layouts-panel__dropdown-header-action\"\n\t\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nfunction FormField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n}: FormFieldProps< Item > ) {\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t// Anchor the popover to the middle of the entire row so that it doesn't\n\t\t\t// move around when the label changes.\n\t\t\tanchor: popoverAnchor,\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\tshift: true,\n\t\t} ),\n\t\t[ popoverAnchor ]\n\t);\n\n\treturn (\n\t\t<HStack\n\t\t\tref={ setPopoverAnchor }\n\t\t\tclassName=\"dataforms-layouts-panel__field\"\n\t\t>\n\t\t\t<div className=\"dataforms-layouts-panel__field-label\">\n\t\t\t\t{ field.label }\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<Dropdown\n\t\t\t\t\tcontentClassName=\"dataforms-layouts-panel__field-dropdown\"\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tfocusOnMount\n\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\tsize: 'compact',\n\t\t\t\t\t\tvariant: 'tertiary',\n\t\t\t\t\t\ttooltipPosition: 'middle left',\n\t\t\t\t\t} }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataforms-layouts-panel__field-control\"\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: Field name.\n\t\t\t\t\t\t\t\t__( 'Edit %s' ),\n\t\t\t\t\t\t\t\tfield.label\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<field.render item={ data } />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DropdownHeader\n\t\t\t\t\t\t\t\ttitle={ field.label }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<field.Edit\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</HStack>\n\t);\n}\n\nexport default function FormPanel< Item >( {\n\tdata,\n\tfields,\n\tform,\n\tonChange,\n}: DataFormProps< Item > ) {\n\tconst visibleFields = useMemo(\n\t\t() =>\n\t\t\tnormalizeFields(\n\t\t\t\tfields.filter( ( { id } ) => !! form.fields?.includes( id ) )\n\t\t\t),\n\t\t[ fields, form.fields ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<FormField\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/dataforms-layouts/regular/index.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from '../../normalize-fields';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function FormRegular({
+  data,
+  fields,
+  form,
+  onChange
+}) {
+  const visibleFields = useMemo(() => normalizeFields(fields.filter(({
+    id
+  }) => !!form.fields?.includes(id))), [fields, form.fields]);
+  return /*#__PURE__*/_jsx(VStack, {
+    spacing: 4,
+    children: visibleFields.map(field => {
+      return /*#__PURE__*/_jsx(field.Edit, {
+        data: data,
+        field: field,
+        onChange: onChange
+      }, field.id);
+    })
+  });
+}
+//# sourceMappingURL=index.js.map

package/build-module/dataforms-layouts/regular/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalVStack","VStack","useMemo","normalizeFields","jsx","_jsx","FormRegular","data","fields","form","onChange","visibleFields","filter","id","includes","spacing","children","map","field","Edit"],"sources":["@wordpress/dataviews/src/dataforms-layouts/regular/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { normalizeFields } from '../../normalize-fields';\nimport type { DataFormProps } from '../../types';\n\nexport default function FormRegular< Item >( {\n\tdata,\n\tfields,\n\tform,\n\tonChange,\n}: DataFormProps< Item > ) {\n\tconst visibleFields = useMemo(\n\t\t() =>\n\t\t\tnormalizeFields(\n\t\t\t\tfields.filter( ( { id } ) => !! form.fields?.includes( id ) )\n\t\t\t),\n\t\t[ fields, form.fields ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 4 }>\n\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<field.Edit\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;AACA,SAASC,eAAe,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzD,eAAe,SAASC,WAAWA,CAAU;EAC5CC,IAAI;EACJC,MAAM;EACNC,IAAI;EACJC;AACsB,CAAC,EAAG;EAC1B,MAAMC,aAAa,GAAGT,OAAO,CAC5B,MACCC,eAAe,CACdK,MAAM,CAACI,MAAM,CAAE,CAAE;IAAEC;EAAG,CAAC,KAAM,CAAC,CAAEJ,IAAI,CAACD,MAAM,EAAEM,QAAQ,CAAED,EAAG,CAAE,CAC7D,CAAC,EACF,CAAEL,MAAM,EAAEC,IAAI,CAACD,MAAM,CACtB,CAAC;EAED,oBACCH,IAAA,CAACJ,MAAM;IAACc,OAAO,EAAG,CAAG;IAAAC,QAAA,EAClBL,aAAa,CAACM,GAAG,CAAIC,KAAK,IAAM;MACjC,oBACCb,IAAA,CAACa,KAAK,CAACC,IAAI;QAEVZ,IAAI,EAAGA,IAAM;QACbW,KAAK,EAAGA,KAAO;QACfR,QAAQ,EAAGA;MAAU,GAHfQ,KAAK,CAACL,EAIZ,CAAC;IAEJ,CAAE;EAAC,CACI,CAAC;AAEX","ignoreList":[]}