@wordpress/dataviews 10.3.1-next.2f1c7c01b.0 → 10.4.1-next.dc3f6d3c1.0

package/build-module/dataform-controls/email.js

@@ -3,7 +3,7 @@ import {
   Icon,
   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper
 } from "@wordpress/components";
-import { atSymbol } from "@wordpress/icons";
+import { envelope } from "@wordpress/icons";
 import ValidatedText from "./utils/validated-input";
 import { jsx } from "react/jsx-runtime";
 function Email({
@@ -23,7 +23,7 @@ function Email({
         hideLabelFromVision,
         validity,
         type: "email",
-        prefix: /* @__PURE__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: atSymbol }) })
+        prefix: /* @__PURE__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: envelope }) })
       }
     }
   );

package/build-module/dataform-controls/email.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-controls/email.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { atSymbol } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Email< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tvalidity,\n\t\t\t\ttype: 'email',\n\t\t\t\tprefix: (\n\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t<Icon icon={ atSymbol } />\n\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { envelope } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport ValidatedText from './utils/validated-input';\n\nexport default function Email< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tvalidity,\n\t\t\t\ttype: 'email',\n\t\t\t\tprefix: (\n\t\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t\t<Icon icon={ envelope } />\n\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
   "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,2CAA2C;AAAA,OACrC;AACP,SAAS,gBAAgB;AAMzB,OAAO,mBAAmB;AAoBpB;AAlBS,SAAR,MAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,QACC,oBAAC,6BAA0B,SAAQ,QAClC,8BAAC,QAAK,MAAO,UAAW,GACzB;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/dataform-layouts/details/index.js

@@ -0,0 +1,47 @@
+// packages/dataviews/src/dataform-layouts/details/index.tsx
+import { useContext, useMemo } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import DataFormContext from "../../components/dataform-context";
+import { DataFormLayout } from "../data-form-layout";
+import { DEFAULT_LAYOUT } from "../normalize-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormDetailsField({
+  data,
+  field,
+  onChange
+}) {
+  const { fields } = useContext(DataFormContext);
+  const form = useMemo(
+    () => ({
+      layout: DEFAULT_LAYOUT,
+      fields: field.children ?? []
+    }),
+    [field]
+  );
+  if (!field.children) {
+    return null;
+  }
+  const summaryFieldId = field.layout.summary ?? "";
+  const summaryField = summaryFieldId ? fields.find((fieldDef) => fieldDef.id === summaryFieldId) : void 0;
+  let summaryContent;
+  if (summaryField && summaryField.render) {
+    summaryContent = /* @__PURE__ */ jsx(summaryField.render, { item: data, field: summaryField });
+  } else {
+    summaryContent = field.label || __("More details");
+  }
+  return /* @__PURE__ */ jsxs("details", { className: "dataforms-layouts-details__details", children: [
+    /* @__PURE__ */ jsx("summary", { className: "dataforms-layouts-details__summary", children: summaryContent }),
+    /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-details__content", children: /* @__PURE__ */ jsx(
+      DataFormLayout,
+      {
+        data,
+        form,
+        onChange
+      }
+    ) })
+  ] });
+}
+export {
+  FormDetailsField as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/dataform-layouts/details/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/dataform-layouts/details/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tNormalizedForm,\n\tNormalizedDetailsLayout,\n\tFieldLayoutProps,\n} from '../../types';\nimport DataFormContext from '../../components/dataform-context';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\n\nexport default function FormDetailsField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tif ( ! field.children ) {\n\t\treturn null;\n\t}\n\n\t// Find the summary field definition if specified\n\tconst summaryFieldId =\n\t\t( field.layout as NormalizedDetailsLayout ).summary ?? '';\n\tconst summaryField = summaryFieldId\n\t\t? fields.find( ( fieldDef ) => fieldDef.id === summaryFieldId )\n\t\t: undefined;\n\n\t// Render the summary content\n\tlet summaryContent;\n\tif ( summaryField && summaryField.render ) {\n\t\t// Use the field's render function to display the current value\n\t\tsummaryContent = (\n\t\t\t<summaryField.render item={ data } field={ summaryField } />\n\t\t);\n\t} else {\n\t\t// Fall back to the label\n\t\tsummaryContent = field.label || __( 'More details' );\n\t}\n\n\treturn (\n\t\t<details className=\"dataforms-layouts-details__details\">\n\t\t\t<summary className=\"dataforms-layouts-details__summary\">\n\t\t\t\t{ summaryContent }\n\t\t\t</summary>\n\t\t\t<div className=\"dataforms-layouts-details__content\">\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</details>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,YAAY,eAAe;AACpC,SAAS,UAAU;AAUnB,OAAO,qBAAqB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAiC5B,cAQD,YARC;AA/BY,SAAR,iBAA2C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,IAAI,WAAY,eAAgB;AAE/C,QAAM,OAAuB;AAAA,IAC5B,OAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,MAAM,YAAY,CAAC;AAAA,IAC5B;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,MAAK,CAAE,MAAM,UAAW;AACvB,WAAO;AAAA,EACR;AAGA,QAAM,iBACH,MAAM,OAAoC,WAAW;AACxD,QAAM,eAAe,iBAClB,OAAO,KAAM,CAAE,aAAc,SAAS,OAAO,cAAe,IAC5D;AAGH,MAAI;AACJ,MAAK,gBAAgB,aAAa,QAAS;AAE1C,qBACC,oBAAC,aAAa,QAAb,EAAoB,MAAO,MAAO,OAAQ,cAAe;AAAA,EAE5D,OAAO;AAEN,qBAAiB,MAAM,SAAS,GAAI,cAAe;AAAA,EACpD;AAEA,SACC,qBAAC,aAAQ,WAAU,sCAClB;AAAA,wBAAC,aAAQ,WAAU,sCAChB,0BACH;AAAA,IACA,oBAAC,SAAI,WAAU,sCACd;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
+  "names": []
+}

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

@@ -7,6 +7,7 @@ import FormRegularField from "./regular";
 import FormPanelField from "./panel";
 import FormCardField from "./card";
 import FormRowField from "./row";
+import FormDetailsField from "./details";
 import { jsx } from "react/jsx-runtime";
 var FORM_FIELD_LAYOUTS = [
   {
@@ -38,6 +39,10 @@ var FORM_FIELD_LAYOUTS = [
         children
       }
     ) }) })
+  },
+  {
+    type: "details",
+    component: FormDetailsField
   }
 ];
 function getFormFieldLayout(type) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-layouts/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedLayout, NormalizedRowLayout } from '../types';\nimport FormRegularField from './regular';\nimport FormPanelField from './panel';\nimport FormCardField from './card';\nimport FormRowField from './row';\n\nconst FORM_FIELD_LAYOUTS = [\n\t{\n\t\ttype: 'regular',\n\t\tcomponent: FormRegularField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 4 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'panel',\n\t\tcomponent: FormPanelField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 2 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'card',\n\t\tcomponent: FormCardField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 6 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'row',\n\t\tcomponent: FormRowField,\n\t\twrapper: ( {\n\t\t\tchildren,\n\t\t\tlayout,\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\tlayout: NormalizedLayout;\n\t\t} ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 4 }>\n\t\t\t\t<div className=\"dataforms-layouts-row__field\">\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\t\talignment={\n\t\t\t\t\t\t\t( layout as NormalizedRowLayout ).alignment\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</HStack>\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t),\n\t},\n];\n\nexport function getFormFieldLayout( type: string ) {\n\treturn FORM_FIELD_LAYOUTS.find( ( layout ) => layout.type === type );\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAMP,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AAOtB;AALH,IAAM,qBAAqB;AAAA,EAC1B;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE;AAAA,MACV;AAAA,MACA;AAAA,IACD,MAIC,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACxD,8BAAC,SAAI,WAAU,gCACd;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WACG,OAAgC;AAAA,QAGjC;AAAA;AAAA,IACH,GACD,GACD;AAAA,EAEF;AACD;AAEO,SAAS,mBAAoB,MAAe;AAClD,SAAO,mBAAmB,KAAM,CAAE,WAAY,OAAO,SAAS,IAAK;AACpE;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedLayout, NormalizedRowLayout } from '../types';\nimport FormRegularField from './regular';\nimport FormPanelField from './panel';\nimport FormCardField from './card';\nimport FormRowField from './row';\nimport FormDetailsField from './details';\n\nconst FORM_FIELD_LAYOUTS = [\n\t{\n\t\ttype: 'regular',\n\t\tcomponent: FormRegularField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 4 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'panel',\n\t\tcomponent: FormPanelField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 2 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'card',\n\t\tcomponent: FormCardField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 6 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'row',\n\t\tcomponent: FormRowField,\n\t\twrapper: ( {\n\t\t\tchildren,\n\t\t\tlayout,\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\tlayout: NormalizedLayout;\n\t\t} ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 4 }>\n\t\t\t\t<div className=\"dataforms-layouts-row__field\">\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\t\talignment={\n\t\t\t\t\t\t\t( layout as NormalizedRowLayout ).alignment\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</HStack>\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'details',\n\t\tcomponent: FormDetailsField,\n\t},\n];\n\nexport function getFormFieldLayout( type: string ) {\n\treturn FORM_FIELD_LAYOUTS.find( ( layout ) => layout.type === type );\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAMP,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAO1B;AALH,IAAM,qBAAqB;AAAA,EAC1B;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE;AAAA,MACV;AAAA,MACA;AAAA,IACD,MAIC,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACxD,8BAAC,SAAI,WAAU,gCACd;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WACG,OAAgC;AAAA,QAGjC;AAAA;AAAA,IACH,GACD,GACD;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,EACZ;AACD;AAEO,SAAS,mBAAoB,MAAe;AAClD,SAAO,mBAAmB,KAAM,CAAE,WAAY,OAAO,SAAS,IAAK;AACpE;",
   "names": []
 }

package/build-module/dataform-layouts/normalize-form.js

@@ -55,6 +55,11 @@ function normalizeLayout(layout) {
       alignment: layout?.alignment ?? "center",
       styles: layout?.styles ?? {}
     };
+  } else if (layout?.type === "details") {
+    normalizedLayout = {
+      type: "details",
+      summary: layout?.summary ?? ""
+    };
   }
   return normalizedLayout;
 }

package/build-module/dataform-layouts/normalize-form.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-layouts/normalize-form.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type {\n\tForm,\n\tLayout,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tNormalizedLayout,\n\tNormalizedRegularLayout,\n\tNormalizedPanelLayout,\n\tNormalizedCardLayout,\n\tNormalizedRowLayout,\n\tNormalizedCardSummaryField,\n\tCardSummaryField,\n} from '../types';\n\nexport const DEFAULT_LAYOUT: NormalizedLayout = {\n\ttype: 'regular',\n\tlabelPosition: 'top',\n} as NormalizedRegularLayout;\n\nconst normalizeCardSummaryField = (\n\tsum: CardSummaryField\n): NormalizedCardSummaryField => {\n\tif ( typeof sum === 'string' ) {\n\t\treturn [ { id: sum, visibility: 'when-collapsed' } ];\n\t}\n\treturn sum.map( ( item ) => {\n\t\tif ( typeof item === 'string' ) {\n\t\t\treturn { id: item, visibility: 'when-collapsed' };\n\t\t}\n\t\treturn { id: item.id, visibility: item.visibility };\n\t} );\n};\n\n/**\n * Normalizes a layout configuration based on its type.\n *\n * @param layout The layout object to normalize.\n * @return The normalized layout object.\n */\nfunction normalizeLayout( layout?: Layout ): NormalizedLayout {\n\tlet normalizedLayout = DEFAULT_LAYOUT;\n\n\tif ( layout?.type === 'regular' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'regular',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'top',\n\t\t} satisfies NormalizedRegularLayout;\n\t} else if ( layout?.type === 'panel' ) {\n\t\tconst summary = layout.summary ?? [];\n\t\tconst normalizedSummary = Array.isArray( summary )\n\t\t\t? summary\n\t\t\t: [ summary ];\n\n\t\tnormalizedLayout = {\n\t\t\ttype: 'panel',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'side',\n\t\t\topenAs: layout?.openAs ?? 'dropdown',\n\t\t\tsummary: normalizedSummary,\n\t\t} satisfies NormalizedPanelLayout;\n\t} else if ( layout?.type === 'card' ) {\n\t\tif ( layout.withHeader === false ) {\n\t\t\t// Don't let isOpened be false if withHeader is false.\n\t\t\t// Otherwise, the card will not be visible.\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: false,\n\t\t\t\tisOpened: true,\n\t\t\t\tsummary: [],\n\t\t\t\tisCollapsible: false,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t} else {\n\t\t\tconst summary = layout.summary ?? [];\n\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: true,\n\t\t\t\tisOpened:\n\t\t\t\t\ttypeof layout.isOpened === 'boolean'\n\t\t\t\t\t\t? layout.isOpened\n\t\t\t\t\t\t: true,\n\t\t\t\tsummary: normalizeCardSummaryField( summary ),\n\t\t\t\tisCollapsible:\n\t\t\t\t\tlayout.isCollapsible === undefined\n\t\t\t\t\t\t? true\n\t\t\t\t\t\t: layout.isCollapsible,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t}\n\t} else if ( layout?.type === 'row' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'row',\n\t\t\talignment: layout?.alignment ?? 'center',\n\t\t\tstyles: layout?.styles ?? {},\n\t\t} satisfies NormalizedRowLayout;\n\t}\n\n\treturn normalizedLayout;\n}\n\nfunction normalizeForm( form: Form ): NormalizedForm {\n\tconst normalizedFormLayout = normalizeLayout( form?.layout );\n\n\tconst normalizedFields: NormalizedFormField[] = ( form.fields ?? [] ).map(\n\t\t( field ) => {\n\t\t\tif ( typeof field === 'string' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: field,\n\t\t\t\t\tlayout: normalizedFormLayout,\n\t\t\t\t} satisfies NormalizedFormField;\n\t\t\t}\n\n\t\t\tconst fieldLayout = field.layout\n\t\t\t\t? normalizeLayout( field.layout )\n\t\t\t\t: normalizedFormLayout;\n\n\t\t\treturn {\n\t\t\t\tid: field.id,\n\t\t\t\tlayout: fieldLayout,\n\t\t\t\t...( !! field.label && { label: field.label } ),\n\t\t\t\t...( !! field.description && {\n\t\t\t\t\tdescription: field.description,\n\t\t\t\t} ),\n\t\t\t\t...( 'children' in field &&\n\t\t\t\t\tArray.isArray( field.children ) && {\n\t\t\t\t\t\tchildren: normalizeForm( {\n\t\t\t\t\t\t\tfields: field.children,\n\t\t\t\t\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\t\t\t\t} ).fields,\n\t\t\t\t\t} ),\n\t\t\t} satisfies NormalizedFormField;\n\t\t}\n\t);\n\n\treturn {\n\t\tlayout: normalizedFormLayout,\n\t\tfields: normalizedFields,\n\t};\n}\n\nexport default normalizeForm;\n"],
-  "mappings": ";AAiBO,IAAM,iBAAmC;AAAA,EAC/C,MAAM;AAAA,EACN,eAAe;AAChB;AAEA,IAAM,4BAA4B,CACjC,QACgC;AAChC,MAAK,OAAO,QAAQ,UAAW;AAC9B,WAAO,CAAE,EAAE,IAAI,KAAK,YAAY,iBAAiB,CAAE;AAAA,EACpD;AACA,SAAO,IAAI,IAAK,CAAE,SAAU;AAC3B,QAAK,OAAO,SAAS,UAAW;AAC/B,aAAO,EAAE,IAAI,MAAM,YAAY,iBAAiB;AAAA,IACjD;AACA,WAAO,EAAE,IAAI,KAAK,IAAI,YAAY,KAAK,WAAW;AAAA,EACnD,CAAE;AACH;AAQA,SAAS,gBAAiB,QAAoC;AAC7D,MAAI,mBAAmB;AAEvB,MAAK,QAAQ,SAAS,WAAY;AACjC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,IACzC;AAAA,EACD,WAAY,QAAQ,SAAS,SAAU;AACtC,UAAM,UAAU,OAAO,WAAW,CAAC;AACnC,UAAM,oBAAoB,MAAM,QAAS,OAAQ,IAC9C,UACA,CAAE,OAAQ;AAEb,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,MACxC,QAAQ,QAAQ,UAAU;AAAA,MAC1B,SAAS;AAAA,IACV;AAAA,EACD,WAAY,QAAQ,SAAS,QAAS;AACrC,QAAK,OAAO,eAAe,OAAQ;AAGlC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS,CAAC;AAAA,QACV,eAAe;AAAA,MAChB;AAAA,IACD,OAAO;AACN,YAAM,UAAU,OAAO,WAAW,CAAC;AAEnC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UACC,OAAO,OAAO,aAAa,YACxB,OAAO,WACP;AAAA,QACJ,SAAS,0BAA2B,OAAQ;AAAA,QAC5C,eACC,OAAO,kBAAkB,SACtB,OACA,OAAO;AAAA,MACZ;AAAA,IACD;AAAA,EACD,WAAY,QAAQ,SAAS,OAAQ;AACpC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,WAAW,QAAQ,aAAa;AAAA,MAChC,QAAQ,QAAQ,UAAU,CAAC;AAAA,IAC5B;AAAA,EACD;AAEA,SAAO;AACR;AAEA,SAAS,cAAe,MAA6B;AACpD,QAAM,uBAAuB,gBAAiB,MAAM,MAAO;AAE3D,QAAM,oBAA4C,KAAK,UAAU,CAAC,GAAI;AAAA,IACrE,CAAE,UAAW;AACZ,UAAK,OAAO,UAAU,UAAW;AAChC,eAAO;AAAA,UACN,IAAI;AAAA,UACJ,QAAQ;AAAA,QACT;AAAA,MACD;AAEA,YAAM,cAAc,MAAM,SACvB,gBAAiB,MAAM,MAAO,IAC9B;AAEH,aAAO;AAAA,QACN,IAAI,MAAM;AAAA,QACV,QAAQ;AAAA,QACR,GAAK,CAAC,CAAE,MAAM,SAAS,EAAE,OAAO,MAAM,MAAM;AAAA,QAC5C,GAAK,CAAC,CAAE,MAAM,eAAe;AAAA,UAC5B,aAAa,MAAM;AAAA,QACpB;AAAA,QACA,GAAK,cAAc,SAClB,MAAM,QAAS,MAAM,QAAS,KAAK;AAAA,UAClC,UAAU,cAAe;AAAA,YACxB,QAAQ,MAAM;AAAA,YACd,QAAQ;AAAA,UACT,CAAE,EAAE;AAAA,QACL;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EACT;AACD;AAEA,IAAO,yBAAQ;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type {\n\tForm,\n\tLayout,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tNormalizedLayout,\n\tNormalizedRegularLayout,\n\tNormalizedPanelLayout,\n\tNormalizedCardLayout,\n\tNormalizedRowLayout,\n\tNormalizedDetailsLayout,\n\tNormalizedCardSummaryField,\n\tCardSummaryField,\n} from '../types';\n\nexport const DEFAULT_LAYOUT: NormalizedLayout = {\n\ttype: 'regular',\n\tlabelPosition: 'top',\n} as NormalizedRegularLayout;\n\nconst normalizeCardSummaryField = (\n\tsum: CardSummaryField\n): NormalizedCardSummaryField => {\n\tif ( typeof sum === 'string' ) {\n\t\treturn [ { id: sum, visibility: 'when-collapsed' } ];\n\t}\n\treturn sum.map( ( item ) => {\n\t\tif ( typeof item === 'string' ) {\n\t\t\treturn { id: item, visibility: 'when-collapsed' };\n\t\t}\n\t\treturn { id: item.id, visibility: item.visibility };\n\t} );\n};\n\n/**\n * Normalizes a layout configuration based on its type.\n *\n * @param layout The layout object to normalize.\n * @return The normalized layout object.\n */\nfunction normalizeLayout( layout?: Layout ): NormalizedLayout {\n\tlet normalizedLayout = DEFAULT_LAYOUT;\n\n\tif ( layout?.type === 'regular' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'regular',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'top',\n\t\t} satisfies NormalizedRegularLayout;\n\t} else if ( layout?.type === 'panel' ) {\n\t\tconst summary = layout.summary ?? [];\n\t\tconst normalizedSummary = Array.isArray( summary )\n\t\t\t? summary\n\t\t\t: [ summary ];\n\n\t\tnormalizedLayout = {\n\t\t\ttype: 'panel',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'side',\n\t\t\topenAs: layout?.openAs ?? 'dropdown',\n\t\t\tsummary: normalizedSummary,\n\t\t} satisfies NormalizedPanelLayout;\n\t} else if ( layout?.type === 'card' ) {\n\t\tif ( layout.withHeader === false ) {\n\t\t\t// Don't let isOpened be false if withHeader is false.\n\t\t\t// Otherwise, the card will not be visible.\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: false,\n\t\t\t\tisOpened: true,\n\t\t\t\tsummary: [],\n\t\t\t\tisCollapsible: false,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t} else {\n\t\t\tconst summary = layout.summary ?? [];\n\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: true,\n\t\t\t\tisOpened:\n\t\t\t\t\ttypeof layout.isOpened === 'boolean'\n\t\t\t\t\t\t? layout.isOpened\n\t\t\t\t\t\t: true,\n\t\t\t\tsummary: normalizeCardSummaryField( summary ),\n\t\t\t\tisCollapsible:\n\t\t\t\t\tlayout.isCollapsible === undefined\n\t\t\t\t\t\t? true\n\t\t\t\t\t\t: layout.isCollapsible,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t}\n\t} else if ( layout?.type === 'row' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'row',\n\t\t\talignment: layout?.alignment ?? 'center',\n\t\t\tstyles: layout?.styles ?? {},\n\t\t} satisfies NormalizedRowLayout;\n\t} else if ( layout?.type === 'details' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'details',\n\t\t\tsummary: layout?.summary ?? '',\n\t\t} satisfies NormalizedDetailsLayout;\n\t}\n\n\treturn normalizedLayout;\n}\n\nfunction normalizeForm( form: Form ): NormalizedForm {\n\tconst normalizedFormLayout = normalizeLayout( form?.layout );\n\n\tconst normalizedFields: NormalizedFormField[] = ( form.fields ?? [] ).map(\n\t\t( field ) => {\n\t\t\tif ( typeof field === 'string' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: field,\n\t\t\t\t\tlayout: normalizedFormLayout,\n\t\t\t\t} satisfies NormalizedFormField;\n\t\t\t}\n\n\t\t\tconst fieldLayout = field.layout\n\t\t\t\t? normalizeLayout( field.layout )\n\t\t\t\t: normalizedFormLayout;\n\n\t\t\treturn {\n\t\t\t\tid: field.id,\n\t\t\t\tlayout: fieldLayout,\n\t\t\t\t...( !! field.label && { label: field.label } ),\n\t\t\t\t...( !! field.description && {\n\t\t\t\t\tdescription: field.description,\n\t\t\t\t} ),\n\t\t\t\t...( 'children' in field &&\n\t\t\t\t\tArray.isArray( field.children ) && {\n\t\t\t\t\t\tchildren: normalizeForm( {\n\t\t\t\t\t\t\tfields: field.children,\n\t\t\t\t\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\t\t\t\t} ).fields,\n\t\t\t\t\t} ),\n\t\t\t} satisfies NormalizedFormField;\n\t\t}\n\t);\n\n\treturn {\n\t\tlayout: normalizedFormLayout,\n\t\tfields: normalizedFields,\n\t};\n}\n\nexport default normalizeForm;\n"],
+  "mappings": ";AAkBO,IAAM,iBAAmC;AAAA,EAC/C,MAAM;AAAA,EACN,eAAe;AAChB;AAEA,IAAM,4BAA4B,CACjC,QACgC;AAChC,MAAK,OAAO,QAAQ,UAAW;AAC9B,WAAO,CAAE,EAAE,IAAI,KAAK,YAAY,iBAAiB,CAAE;AAAA,EACpD;AACA,SAAO,IAAI,IAAK,CAAE,SAAU;AAC3B,QAAK,OAAO,SAAS,UAAW;AAC/B,aAAO,EAAE,IAAI,MAAM,YAAY,iBAAiB;AAAA,IACjD;AACA,WAAO,EAAE,IAAI,KAAK,IAAI,YAAY,KAAK,WAAW;AAAA,EACnD,CAAE;AACH;AAQA,SAAS,gBAAiB,QAAoC;AAC7D,MAAI,mBAAmB;AAEvB,MAAK,QAAQ,SAAS,WAAY;AACjC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,IACzC;AAAA,EACD,WAAY,QAAQ,SAAS,SAAU;AACtC,UAAM,UAAU,OAAO,WAAW,CAAC;AACnC,UAAM,oBAAoB,MAAM,QAAS,OAAQ,IAC9C,UACA,CAAE,OAAQ;AAEb,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,MACxC,QAAQ,QAAQ,UAAU;AAAA,MAC1B,SAAS;AAAA,IACV;AAAA,EACD,WAAY,QAAQ,SAAS,QAAS;AACrC,QAAK,OAAO,eAAe,OAAQ;AAGlC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS,CAAC;AAAA,QACV,eAAe;AAAA,MAChB;AAAA,IACD,OAAO;AACN,YAAM,UAAU,OAAO,WAAW,CAAC;AAEnC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UACC,OAAO,OAAO,aAAa,YACxB,OAAO,WACP;AAAA,QACJ,SAAS,0BAA2B,OAAQ;AAAA,QAC5C,eACC,OAAO,kBAAkB,SACtB,OACA,OAAO;AAAA,MACZ;AAAA,IACD;AAAA,EACD,WAAY,QAAQ,SAAS,OAAQ;AACpC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,WAAW,QAAQ,aAAa;AAAA,MAChC,QAAQ,QAAQ,UAAU,CAAC;AAAA,IAC5B;AAAA,EACD,WAAY,QAAQ,SAAS,WAAY;AACxC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,QAAQ,WAAW;AAAA,IAC7B;AAAA,EACD;AAEA,SAAO;AACR;AAEA,SAAS,cAAe,MAA6B;AACpD,QAAM,uBAAuB,gBAAiB,MAAM,MAAO;AAE3D,QAAM,oBAA4C,KAAK,UAAU,CAAC,GAAI;AAAA,IACrE,CAAE,UAAW;AACZ,UAAK,OAAO,UAAU,UAAW;AAChC,eAAO;AAAA,UACN,IAAI;AAAA,UACJ,QAAQ;AAAA,QACT;AAAA,MACD;AAEA,YAAM,cAAc,MAAM,SACvB,gBAAiB,MAAM,MAAO,IAC9B;AAEH,aAAO;AAAA,QACN,IAAI,MAAM;AAAA,QACV,QAAQ;AAAA,QACR,GAAK,CAAC,CAAE,MAAM,SAAS,EAAE,OAAO,MAAM,MAAM;AAAA,QAC5C,GAAK,CAAC,CAAE,MAAM,eAAe;AAAA,UAC5B,aAAa,MAAM;AAAA,QACpB;AAAA,QACA,GAAK,cAAc,SAClB,MAAM,QAAS,MAAM,QAAS,KAAK;AAAA,UAClC,UAAU,cAAe;AAAA,YACxB,QAAQ,MAAM;AAAA,YACd,QAAQ;AAAA,UACT,CAAE,EAAE;AAAA,QACL;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EACT;AACD;AAEA,IAAO,yBAAQ;",
   "names": []
 }

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

@@ -10,11 +10,13 @@ import ViewTable from "./table";
 import ViewGrid from "./grid";
 import ViewList from "./list";
 import ViewPickerGrid from "./picker-grid";
+import ViewPickerTable from "./picker-table";
 import {
   LAYOUT_GRID,
   LAYOUT_LIST,
   LAYOUT_TABLE,
-  LAYOUT_PICKER_GRID
+  LAYOUT_PICKER_GRID,
+  LAYOUT_PICKER_TABLE
 } from "../constants";
 import PreviewSizePicker from "./utils/preview-size-picker";
 import DensityPicker from "./table/density-picker";
@@ -46,6 +48,14 @@ var VIEW_LAYOUTS = [
     icon: category,
     viewConfigOptions: PreviewSizePicker,
     isPicker: true
+  },
+  {
+    type: LAYOUT_PICKER_TABLE,
+    label: __("Table"),
+    component: ViewPickerTable,
+    icon: blockTable,
+    viewConfigOptions: DensityPicker,
+    isPicker: true
   }
 ];
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataviews-layouts/index.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tblockTable,\n\tcategory,\n\tformatListBullets,\n\tformatListBulletsRTL,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ViewTable from './table';\nimport ViewGrid from './grid';\nimport ViewList from './list';\nimport ViewPickerGrid from './picker-grid';\nimport {\n\tLAYOUT_GRID,\n\tLAYOUT_LIST,\n\tLAYOUT_TABLE,\n\tLAYOUT_PICKER_GRID,\n} from '../constants';\nimport PreviewSizePicker from './utils/preview-size-picker';\nimport DensityPicker from './table/density-picker';\n\nexport const VIEW_LAYOUTS = [\n\t{\n\t\ttype: LAYOUT_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewTable,\n\t\ticon: blockTable,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: PreviewSizePicker,\n\t},\n\t{\n\t\ttype: LAYOUT_LIST,\n\t\tlabel: __( 'List' ),\n\t\tcomponent: ViewList,\n\t\ticon: isRTL() ? formatListBulletsRTL : formatListBullets,\n\t},\n\t{\n\t\ttype: LAYOUT_PICKER_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewPickerGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: PreviewSizePicker,\n\t\tisPicker: true,\n\t},\n];\n"],
-  "mappings": ";AAGA,SAAS,IAAI,aAAa;AAC1B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAKP,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,cAAc;AACrB,OAAO,oBAAoB;AAC3B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,uBAAuB;AAC9B,OAAO,mBAAmB;AAEnB,IAAM,eAAe;AAAA,EAC3B;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM,MAAM,IAAI,uBAAuB;AAAA,EACxC;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACX;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tblockTable,\n\tcategory,\n\tformatListBullets,\n\tformatListBulletsRTL,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ViewTable from './table';\nimport ViewGrid from './grid';\nimport ViewList from './list';\nimport ViewPickerGrid from './picker-grid';\nimport ViewPickerTable from './picker-table';\nimport {\n\tLAYOUT_GRID,\n\tLAYOUT_LIST,\n\tLAYOUT_TABLE,\n\tLAYOUT_PICKER_GRID,\n\tLAYOUT_PICKER_TABLE,\n} from '../constants';\nimport PreviewSizePicker from './utils/preview-size-picker';\nimport DensityPicker from './table/density-picker';\n\nexport const VIEW_LAYOUTS = [\n\t{\n\t\ttype: LAYOUT_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewTable,\n\t\ticon: blockTable,\n\t\tviewConfigOptions: DensityPicker,\n\t},\n\t{\n\t\ttype: LAYOUT_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: PreviewSizePicker,\n\t},\n\t{\n\t\ttype: LAYOUT_LIST,\n\t\tlabel: __( 'List' ),\n\t\tcomponent: ViewList,\n\t\ticon: isRTL() ? formatListBulletsRTL : formatListBullets,\n\t},\n\t{\n\t\ttype: LAYOUT_PICKER_GRID,\n\t\tlabel: __( 'Grid' ),\n\t\tcomponent: ViewPickerGrid,\n\t\ticon: category,\n\t\tviewConfigOptions: PreviewSizePicker,\n\t\tisPicker: true,\n\t},\n\t{\n\t\ttype: LAYOUT_PICKER_TABLE,\n\t\tlabel: __( 'Table' ),\n\t\tcomponent: ViewPickerTable,\n\t\ticon: blockTable,\n\t\tviewConfigOptions: DensityPicker,\n\t\tisPicker: true,\n\t},\n];\n"],
+  "mappings": ";AAGA,SAAS,IAAI,aAAa;AAC1B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAKP,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,cAAc;AACrB,OAAO,oBAAoB;AAC3B,OAAO,qBAAqB;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,uBAAuB;AAC9B,OAAO,mBAAmB;AAEnB,IAAM,eAAe;AAAA,EAC3B;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,EACpB;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM,MAAM,IAAI,uBAAuB;AAAA,EACxC;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,MAAO;AAAA,IAClB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACX;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,WAAW;AAAA,IACX,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACX;AACD;",
   "names": []
 }

package/build-module/dataviews-layouts/picker-table/index.js

@@ -0,0 +1,397 @@
+// packages/dataviews/src/dataviews-layouts/picker-table/index.tsx
+import clsx from "clsx";
+import { __, sprintf } from "@wordpress/i18n";
+import { Spinner, Composite } from "@wordpress/components";
+import {
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "@wordpress/element";
+import DataViewsContext from "../../components/dataviews-context";
+import DataViewsSelectionCheckbox from "../../components/dataviews-selection-checkbox";
+import { useIsMultiselectPicker } from "../../components/dataviews-picker/footer";
+import { BulkSelectionCheckbox } from "../../components/dataviews-bulk-actions";
+import { sortValues } from "../../constants";
+import ColumnHeaderMenu from "../table/column-header-menu";
+import ColumnPrimary from "../table/column-primary";
+import getDataByGroup from "../utils/get-data-by-group";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TableColumnField({
+  item,
+  fields,
+  column,
+  align
+}) {
+  const field = fields.find((f) => f.id === column);
+  if (!field) {
+    return null;
+  }
+  const className = clsx("dataviews-view-table__cell-content-wrapper", {
+    "dataviews-view-table__cell-align-end": align === "end",
+    "dataviews-view-table__cell-align-center": align === "center"
+  });
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(field.render, { item, field }) });
+}
+function TableRow({
+  item,
+  fields,
+  id,
+  view,
+  titleField,
+  mediaField,
+  descriptionField,
+  selection,
+  getItemId,
+  onChangeSelection,
+  multiselect,
+  posinset
+}) {
+  const { paginationInfo } = useContext(DataViewsContext);
+  const isSelected = selection.includes(id);
+  const [isHovered, setIsHovered] = useState(false);
+  const {
+    showTitle = true,
+    showMedia = true,
+    showDescription = true,
+    infiniteScrollEnabled
+  } = view;
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  const columns = view.fields ?? [];
+  const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription;
+  return /* @__PURE__ */ jsxs(
+    Composite.Item,
+    {
+      render: ({ children, ...props }) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          className: clsx("dataviews-view-table__row", {
+            "is-selected": isSelected,
+            "is-hovered": isHovered
+          }),
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          children,
+          ...props
+        }
+      ),
+      "aria-selected": isSelected,
+      "aria-setsize": paginationInfo.totalItems || void 0,
+      "aria-posinset": posinset,
+      role: infiniteScrollEnabled ? "article" : "option",
+      onClick: () => {
+        if (isSelected) {
+          onChangeSelection(
+            selection.filter((itemId) => id !== itemId)
+          );
+        } else {
+          const newSelection = multiselect ? [...selection, id] : [id];
+          onChangeSelection(newSelection);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "dataviews-view-table__checkbox-column",
+            role: "presentation",
+            children: /* @__PURE__ */ jsx("div", { className: "dataviews-view-table__cell-content-wrapper", children: /* @__PURE__ */ jsx(
+              DataViewsSelectionCheckbox,
+              {
+                item,
+                selection,
+                onChangeSelection,
+                getItemId,
+                titleField,
+                disabled: false,
+                "aria-hidden": true,
+                tabIndex: -1
+              }
+            ) })
+          }
+        ),
+        hasPrimaryColumn && /* @__PURE__ */ jsx("td", { role: "presentation", children: /* @__PURE__ */ jsx(
+          ColumnPrimary,
+          {
+            item,
+            titleField: showTitle ? titleField : void 0,
+            mediaField: showMedia ? mediaField : void 0,
+            descriptionField: showDescription ? descriptionField : void 0,
+            isItemClickable: () => false
+          }
+        ) }),
+        columns.map((column) => {
+          const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {};
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              style: {
+                width,
+                maxWidth,
+                minWidth
+              },
+              role: "presentation",
+              children: /* @__PURE__ */ jsx(
+                TableColumnField,
+                {
+                  fields,
+                  item,
+                  column,
+                  align
+                }
+              )
+            },
+            column
+          );
+        })
+      ]
+    },
+    id
+  );
+}
+function ViewPickerTable({
+  actions,
+  data,
+  fields,
+  getItemId,
+  isLoading = false,
+  onChangeView,
+  onChangeSelection,
+  selection,
+  setOpenedFilter,
+  view,
+  className,
+  empty
+}) {
+  const headerMenuRefs = useRef(/* @__PURE__ */ new Map());
+  const headerMenuToFocusRef = useRef();
+  const [nextHeaderMenuToFocus, setNextHeaderMenuToFocus] = useState();
+  const isMultiselect = useIsMultiselectPicker(actions) ?? false;
+  useEffect(() => {
+    if (headerMenuToFocusRef.current) {
+      headerMenuToFocusRef.current.focus();
+      headerMenuToFocusRef.current = void 0;
+    }
+  });
+  const tableNoticeId = useId();
+  if (nextHeaderMenuToFocus) {
+    headerMenuToFocusRef.current = nextHeaderMenuToFocus;
+    setNextHeaderMenuToFocus(void 0);
+    return;
+  }
+  const onHide = (field) => {
+    const hidden = headerMenuRefs.current.get(field.id);
+    const fallback = hidden ? headerMenuRefs.current.get(hidden.fallback) : void 0;
+    setNextHeaderMenuToFocus(fallback?.node);
+  };
+  const hasData = !!data?.length;
+  const titleField = fields.find((field) => field.id === view.titleField);
+  const mediaField = fields.find((field) => field.id === view.mediaField);
+  const descriptionField = fields.find(
+    (field) => field.id === view.descriptionField
+  );
+  const groupField = view.groupByField ? fields.find((f) => f.id === view.groupByField) : null;
+  const dataByGroup = groupField ? getDataByGroup(data, groupField) : null;
+  const { showTitle = true, showMedia = true, showDescription = true } = view;
+  const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription;
+  const columns = view.fields ?? [];
+  const headerMenuRef = (column, index) => (node) => {
+    if (node) {
+      headerMenuRefs.current.set(column, {
+        node,
+        fallback: columns[index > 0 ? index - 1 : 1]
+      });
+    } else {
+      headerMenuRefs.current.delete(column);
+    }
+  };
+  const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "table",
+      {
+        className: clsx(
+          "dataviews-view-table",
+          "dataviews-view-picker-table",
+          className,
+          {
+            [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
+              view.layout.density
+            )
+          }
+        ),
+        "aria-busy": isLoading,
+        "aria-describedby": tableNoticeId,
+        role: isInfiniteScroll ? "feed" : "listbox",
+        children: [
+          /* @__PURE__ */ jsx("thead", { role: "presentation", children: /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              className: "dataviews-view-table__row",
+              role: "presentation",
+              children: [
+                /* @__PURE__ */ jsx("th", { className: "dataviews-view-table__checkbox-column", children: isMultiselect && /* @__PURE__ */ jsx(
+                  BulkSelectionCheckbox,
+                  {
+                    selection,
+                    onChangeSelection,
+                    data,
+                    actions,
+                    getItemId
+                  }
+                ) }),
+                hasPrimaryColumn && /* @__PURE__ */ jsx("th", { children: titleField && /* @__PURE__ */ jsx(
+                  ColumnHeaderMenu,
+                  {
+                    ref: headerMenuRef(
+                      titleField.id,
+                      0
+                    ),
+                    fieldId: titleField.id,
+                    view,
+                    fields,
+                    onChangeView,
+                    onHide,
+                    setOpenedFilter,
+                    canMove: false
+                  }
+                ) }),
+                columns.map((column, index) => {
+                  const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {};
+                  return /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      style: {
+                        width,
+                        maxWidth,
+                        minWidth,
+                        textAlign: align
+                      },
+                      "aria-sort": view.sort?.direction && view.sort?.field === column ? sortValues[view.sort.direction] : void 0,
+                      scope: "col",
+                      children: /* @__PURE__ */ jsx(
+                        ColumnHeaderMenu,
+                        {
+                          ref: headerMenuRef(column, index),
+                          fieldId: column,
+                          view,
+                          fields,
+                          onChangeView,
+                          onHide,
+                          setOpenedFilter,
+                          canMove: view.layout?.enableMoving ?? true
+                        }
+                      )
+                    },
+                    column
+                  );
+                })
+              ]
+            }
+          ) }),
+          hasData && groupField && dataByGroup ? Array.from(dataByGroup.entries()).map(
+            ([groupName, groupItems]) => /* @__PURE__ */ jsxs(
+              Composite,
+              {
+                virtualFocus: true,
+                orientation: "vertical",
+                render: /* @__PURE__ */ jsx("tbody", { role: "group" }),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "tr",
+                    {
+                      className: "dataviews-view-table__group-header-row",
+                      role: "presentation",
+                      children: /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          colSpan: columns.length + (hasPrimaryColumn ? 1 : 0) + 1,
+                          className: "dataviews-view-table__group-header-cell",
+                          role: "presentation",
+                          children: sprintf(
+                            // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
+                            __("%1$s: %2$s"),
+                            groupField.label,
+                            groupName
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  groupItems.map((item, index) => /* @__PURE__ */ jsx(
+                    TableRow,
+                    {
+                      item,
+                      fields,
+                      id: getItemId(item) || index.toString(),
+                      view,
+                      titleField,
+                      mediaField,
+                      descriptionField,
+                      selection,
+                      getItemId,
+                      onChangeSelection,
+                      multiselect: isMultiselect
+                    },
+                    getItemId(item)
+                  ))
+                ]
+              },
+              `group-${groupName}`
+            )
+          ) : /* @__PURE__ */ jsx(
+            Composite,
+            {
+              render: /* @__PURE__ */ jsx("tbody", { role: "presentation" }),
+              virtualFocus: true,
+              orientation: "vertical",
+              children: hasData && data.map((item, index) => /* @__PURE__ */ jsx(
+                TableRow,
+                {
+                  item,
+                  fields,
+                  id: getItemId(item) || index.toString(),
+                  view,
+                  titleField,
+                  mediaField,
+                  descriptionField,
+                  selection,
+                  getItemId,
+                  onChangeSelection,
+                  multiselect: isMultiselect,
+                  posinset: index + 1
+                },
+                getItemId(item)
+              ))
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx({
+          "dataviews-loading": isLoading,
+          "dataviews-no-results": !hasData && !isLoading
+        }),
+        id: tableNoticeId,
+        children: [
+          !hasData && (isLoading ? /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Spinner, {}) }) : empty),
+          hasData && isLoading && /* @__PURE__ */ jsx("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ jsx(Spinner, {}) })
+        ]
+      }
+    )
+  ] });
+}
+var picker_table_default = ViewPickerTable;
+export {
+  picker_table_default as default
+};
+//# sourceMappingURL=index.js.map