@wordpress/edit-site 5.20.1 → 5.21.1-next.f8d8eceb.0

package/build/components/dataviews/{text-filter.js → search.js}

@@ -4,17 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = TextFilter;
+exports.default = Search;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _useDebouncedInput = _interopRequireDefault(require("../../utils/use-debounced-input"));
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -23,17 +18,28 @@ var _useDebouncedInput = _interopRequireDefault(require("../../utils/use-debounc
  * Internal dependencies
  */
 
-function TextFilter({
-  className,
-  searchLabel = (0, _i18n.__)('Filter list'),
-  onChange
+function Search({
+  label,
+  view,
+  onChangeView
 }) {
-  const [search, setSearch, debouncedSearch] = (0, _useDebouncedInput.default)();
+  const [search, setSearch, debouncedSearch] = (0, _useDebouncedInput.default)(view.search);
+  (0, _element.useEffect)(() => {
+    setSearch(view.search);
+  }, [view]);
+  const onChangeViewRef = (0, _element.useRef)(onChangeView);
+  (0, _element.useEffect)(() => {
+    onChangeViewRef.current = onChangeView;
+  }, [onChangeView]);
   (0, _element.useEffect)(() => {
-    onChange(debouncedSearch);
-  }, [debouncedSearch, onChange]);
+    onChangeViewRef.current(currentView => ({
+      ...currentView,
+      page: 1,
+      search: debouncedSearch
+    }));
+  }, [debouncedSearch]);
+  const searchLabel = label || (0, _i18n.__)('Filter list');
   return (0, _react.createElement)(_components.SearchControl, {
-    className: (0, _classnames.default)('dataviews__text-filter', className),
     onChange: setSearch,
     value: search,
     label: searchLabel,
@@ -41,4 +47,4 @@ function TextFilter({
     size: "compact"
   });
 }
-//# sourceMappingURL=text-filter.js.map
+//# sourceMappingURL=search.js.map

package/build/components/dataviews/search.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_element","_components","_useDebouncedInput","_interopRequireDefault","Search","label","view","onChangeView","search","setSearch","debouncedSearch","useDebouncedInput","useEffect","onChangeViewRef","useRef","current","currentView","page","searchLabel","__","_react","createElement","SearchControl","onChange","value","placeholder","size"],"sources":["@wordpress/edit-site/src/components/dataviews/search.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useDebouncedInput from '../../utils/use-debounced-input';\n\nexport default function Search( { label, view, onChangeView } ) {\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput(\n\t\tview.search\n\t);\n\tuseEffect( () => {\n\t\tsetSearch( view.search );\n\t}, [ view ] );\n\tconst onChangeViewRef = useRef( onChangeView );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current = onChangeView;\n\t}, [ onChangeView ] );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current( ( currentView ) => ( {\n\t\t\t...currentView,\n\t\t\tpage: 1,\n\t\t\tsearch: debouncedSearch,\n\t\t} ) );\n\t}, [ debouncedSearch ] );\n\tconst searchLabel = label || __( 'Filter list' );\n\treturn (\n\t\t<SearchControl\n\t\t\tonChange={ setSearch }\n\t\t\tvalue={ search }\n\t\t\tlabel={ searchLabel }\n\t\t\tplaceholder={ searchLabel }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAKA,IAAAG,kBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAGe,SAASK,MAAMA,CAAE;EAAEC,KAAK;EAAEC,IAAI;EAAEC;AAAa,CAAC,EAAG;EAC/D,MAAM,CAAEC,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAG,IAAAC,0BAAiB,EAC/DL,IAAI,CAACE,MACN,CAAC;EACD,IAAAI,kBAAS,EAAE,MAAM;IAChBH,SAAS,CAAEH,IAAI,CAACE,MAAO,CAAC;EACzB,CAAC,EAAE,CAAEF,IAAI,CAAG,CAAC;EACb,MAAMO,eAAe,GAAG,IAAAC,eAAM,EAAEP,YAAa,CAAC;EAC9C,IAAAK,kBAAS,EAAE,MAAM;IAChBC,eAAe,CAACE,OAAO,GAAGR,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EACrB,IAAAK,kBAAS,EAAE,MAAM;IAChBC,eAAe,CAACE,OAAO,CAAIC,WAAW,KAAQ;MAC7C,GAAGA,WAAW;MACdC,IAAI,EAAE,CAAC;MACPT,MAAM,EAAEE;IACT,CAAC,CAAG,CAAC;EACN,CAAC,EAAE,CAAEA,eAAe,CAAG,CAAC;EACxB,MAAMQ,WAAW,GAAGb,KAAK,IAAI,IAAAc,QAAE,EAAE,aAAc,CAAC;EAChD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACpB,WAAA,CAAAqB,aAAa;IACbC,QAAQ,EAAGd,SAAW;IACtBe,KAAK,EAAGhB,MAAQ;IAChBH,KAAK,EAAGa,WAAa;IACrBO,WAAW,EAAGP,WAAa;IAC3BQ,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ"}

package/build/components/dataviews/view-actions.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PAGE_SIZE_VALUES = void 0;
-exports.PageSizeControl = PageSizeControl;
 exports.default = ViewActions;
 var _react = require("react");
 var _components = require("@wordpress/components");
@@ -26,51 +24,69 @@ const {
   DropdownSubMenuV2,
   DropdownSubMenuTriggerV2
 } = (0, _lockUnlock.unlock)(_components.privateApis);
-const PAGE_SIZE_VALUES = [5, 20, 50];
-exports.PAGE_SIZE_VALUES = PAGE_SIZE_VALUES;
-function PageSizeControl({
-  dataView
+const availableViews = [{
+  id: 'list',
+  label: (0, _i18n.__)('List')
+}, {
+  id: 'grid',
+  label: (0, _i18n.__)('Grid')
+}];
+function ViewTypeMenu({
+  view,
+  onChangeView
 }) {
-  const label = (0, _i18n.__)('Rows per page:');
-  return (0, _react.createElement)(_components.SelectControl, {
-    __nextHasNoMarginBottom: true,
-    label: label,
-    hideLabelFromVision: true
-    // TODO: This should probably use a label based on the wanted design
-    // and we could remove InputControlPrefixWrapper usage.
-    ,
-    prefix: (0, _react.createElement)(_components.__experimentalInputControlPrefixWrapper, {
-      as: "span",
-      className: "dataviews__per-page-control-prefix"
-    }, label),
-    value: dataView.getState().pagination.pageSize,
-    options: PAGE_SIZE_VALUES.map(pageSize => ({
-      value: pageSize,
-      label: pageSize
-    })),
-    onChange: value => dataView.setPageSize(+value)
-  });
+  const activeView = availableViews.find(v => view.type === v.id);
+  return (0, _react.createElement)(DropdownSubMenuV2, {
+    trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+      suffix: (0, _react.createElement)(_react.Fragment, null, activeView.label, (0, _react.createElement)(_components.Icon, {
+        icon: _icons.chevronRightSmall
+      }))
+    }, (0, _i18n.__)('Layout'))
+  }, availableViews.map(availableView => {
+    return (0, _react.createElement)(DropdownMenuItemV2, {
+      key: availableView.id,
+      prefix: availableView.id === view.type && (0, _react.createElement)(_components.Icon, {
+        icon: _icons.check
+      }),
+      onSelect: event => {
+        // We need to handle this on DropDown component probably..
+        event.preventDefault();
+        onChangeView({
+          ...view,
+          type: availableView.id
+        });
+      }
+      // TODO: check about role and a11y.
+      ,
+      role: "menuitemcheckbox"
+    }, availableView.label);
+  }));
 }
+const PAGE_SIZE_VALUES = [5, 20, 50];
 function PageSizeMenu({
-  dataView
+  view,
+  onChangeView
 }) {
-  const currenPageSize = dataView.getState().pagination.pageSize;
   return (0, _react.createElement)(DropdownSubMenuV2, {
     trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
-      suffix: (0, _react.createElement)(_react.Fragment, null, currenPageSize, (0, _react.createElement)(_components.Icon, {
+      suffix: (0, _react.createElement)(_react.Fragment, null, view.perPage, (0, _react.createElement)(_components.Icon, {
         icon: _icons.chevronRightSmall
       }))
     }, (0, _i18n.__)('Rows per page'))
   }, PAGE_SIZE_VALUES.map(size => {
     return (0, _react.createElement)(DropdownMenuItemV2, {
       key: size,
-      prefix: currenPageSize === size && (0, _react.createElement)(_components.Icon, {
+      prefix: view.perPage === size && (0, _react.createElement)(_components.Icon, {
         icon: _icons.check
       }),
       onSelect: event => {
         // We need to handle this on DropDown component probably..
         event.preventDefault();
-        dataView.setPageSize(size);
+        onChangeView({
+          ...view,
+          perPage: size,
+          page: 1
+        });
       }
       // TODO: check about role and a11y.
       ,
@@ -79,10 +95,12 @@ function PageSizeMenu({
   }));
 }
 function FieldsVisibilityMenu({
-  dataView
+  view,
+  onChangeView,
+  fields
 }) {
-  const hideableFields = dataView.getAllColumns().filter(columnn => columnn.getCanHide());
-  if (!hideableFields?.length) {
+  const hidableFields = fields.filter(field => field.enableHiding !== false);
+  if (!hidableFields?.length) {
     return null;
   }
   return (0, _react.createElement)(DropdownSubMenuV2, {
@@ -91,18 +109,21 @@ function FieldsVisibilityMenu({
         icon: _icons.chevronRightSmall
       })
     }, (0, _i18n.__)('Fields'))
-  }, hideableFields?.map(field => {
+  }, hidableFields?.map(field => {
     return (0, _react.createElement)(DropdownMenuItemV2, {
       key: field.id,
-      prefix: field.getIsVisible() && (0, _react.createElement)(_components.Icon, {
+      prefix: !view.hiddenFields?.includes(field.id) && (0, _react.createElement)(_components.Icon, {
         icon: _icons.check
       }),
       onSelect: event => {
         event.preventDefault();
-        field.getToggleVisibilityHandler()(event);
+        onChangeView({
+          ...view,
+          hiddenFields: view.hiddenFields?.includes(field.id) ? view.hiddenFields.filter(id => id !== field.id) : [...view.hiddenFields, field.id]
+        });
       },
       role: "menuitemcheckbox"
-    }, field.columnDef.header);
+    }, field.header);
   }));
 }
 
@@ -118,47 +139,56 @@ const sortingItemsInfo = {
   }
 };
 function SortMenu({
-  dataView
+  fields,
+  view,
+  onChangeView
 }) {
-  const sortableFields = dataView.getAllColumns().filter(columnn => columnn.getCanSort());
+  const sortableFields = fields.filter(field => field.enableSorting !== false);
   if (!sortableFields?.length) {
     return null;
   }
-  const currentSortedField = sortableFields.find(field => field.getIsSorted());
+  const currentSortedField = fields.find(field => field.id === view.sort?.field);
   return (0, _react.createElement)(DropdownSubMenuV2, {
     trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
-      suffix: (0, _react.createElement)(_react.Fragment, null, currentSortedField?.columnDef.header, (0, _react.createElement)(_components.Icon, {
+      suffix: (0, _react.createElement)(_react.Fragment, null, currentSortedField?.header, (0, _react.createElement)(_components.Icon, {
         icon: _icons.chevronRightSmall
       }))
     }, (0, _i18n.__)('Sort by'))
   }, sortableFields?.map(field => {
-    const sortedDirection = field.getIsSorted();
+    const sortedDirection = view.sort?.direction;
     return (0, _react.createElement)(DropdownSubMenuV2, {
       key: field.id,
       trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
         suffix: (0, _react.createElement)(_components.Icon, {
           icon: _icons.chevronRightSmall
         })
-      }, field.columnDef.header),
+      }, field.header),
       side: "left"
     }, Object.entries(sortingItemsInfo).map(([direction, info]) => {
+      const isActive = currentSortedField && sortedDirection === direction && field.id === currentSortedField.id;
       return (0, _react.createElement)(DropdownMenuItemV2, {
         key: direction,
         prefix: (0, _react.createElement)(_components.Icon, {
           icon: info.icon
         }),
-        suffix: sortedDirection === direction && (0, _react.createElement)(_components.Icon, {
+        suffix: isActive && (0, _react.createElement)(_components.Icon, {
           icon: _icons.check
         }),
         onSelect: event => {
           event.preventDefault();
           if (sortedDirection === direction) {
-            dataView.resetSorting();
+            onChangeView({
+              ...view,
+              sort: undefined
+            });
           } else {
-            dataView.setSorting([{
-              id: field.id,
-              desc: direction === 'desc'
-            }]);
+            onChangeView({
+              ...view,
+              sort: {
+                field: field.id,
+                direction
+              }
+            });
           }
         }
       }, info.label);
@@ -166,24 +196,32 @@ function SortMenu({
   }));
 }
 function ViewActions({
-  dataView,
-  className
+  fields,
+  view,
+  onChangeView
 }) {
   return (0, _react.createElement)(DropdownMenuV2, {
     label: (0, _i18n.__)('Actions'),
-    className: className,
     trigger: (0, _react.createElement)(_components.Button, {
       variant: "tertiary",
       icon: _icons.blockTable
     }, (0, _i18n.__)('View'), (0, _react.createElement)(_components.Icon, {
       icon: _icons.chevronDown
     }))
-  }, (0, _react.createElement)(DropdownMenuGroupV2, null, (0, _react.createElement)(SortMenu, {
-    dataView: dataView
+  }, (0, _react.createElement)(DropdownMenuGroupV2, null, (0, _react.createElement)(ViewTypeMenu, {
+    view: view,
+    onChangeView: onChangeView
+  }), (0, _react.createElement)(SortMenu, {
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView
   }), (0, _react.createElement)(FieldsVisibilityMenu, {
-    dataView: dataView
+    fields: fields,
+    view: view,
+    onChangeView: onChangeView
   }), (0, _react.createElement)(PageSizeMenu, {
-    dataView: dataView
+    view: view,
+    onChangeView: onChangeView
   })));
 }
 //# sourceMappingURL=view-actions.js.map

package/build/components/dataviews/view-actions.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_icons","_i18n","_lockUnlock","DropdownMenuV2","DropdownMenuGroupV2","DropdownMenuItemV2","DropdownSubMenuV2","DropdownSubMenuTriggerV2","unlock","componentsPrivateApis","PAGE_SIZE_VALUES","exports","PageSizeControl","dataView","label","__","_react","createElement","SelectControl","__nextHasNoMarginBottom","hideLabelFromVision","prefix","__experimentalInputControlPrefixWrapper","as","className","value","getState","pagination","pageSize","options","map","onChange","setPageSize","PageSizeMenu","currenPageSize","trigger","suffix","Fragment","Icon","icon","chevronRightSmall","size","key","check","onSelect","event","preventDefault","role","FieldsVisibilityMenu","hideableFields","getAllColumns","filter","columnn","getCanHide","length","field","id","getIsVisible","getToggleVisibilityHandler","columnDef","header","sortingItemsInfo","asc","arrowUp","desc","arrowDown","SortMenu","sortableFields","getCanSort","currentSortedField","find","getIsSorted","sortedDirection","side","Object","entries","direction","info","resetSorting","setSorting","ViewActions","Button","variant","blockTable","chevronDown"],"sources":["@wordpress/edit-site/src/components/dataviews/view-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\tSelectControl,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport {\n\tchevronRightSmall,\n\tcheck,\n\tblockTable,\n\tchevronDown,\n\tarrowUp,\n\tarrowDown,\n} from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tDropdownMenuV2,\n\tDropdownMenuGroupV2,\n\tDropdownMenuItemV2,\n\tDropdownSubMenuV2,\n\tDropdownSubMenuTriggerV2,\n} = unlock( componentsPrivateApis );\n\nexport const PAGE_SIZE_VALUES = [ 5, 20, 50 ];\n\nexport function PageSizeControl( { dataView } ) {\n\tconst label = __( 'Rows per page:' );\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\t// TODO: This should probably use a label based on the wanted design\n\t\t\t// and we could remove InputControlPrefixWrapper usage.\n\t\t\tprefix={\n\t\t\t\t<InputControlPrefixWrapper\n\t\t\t\t\tas=\"span\"\n\t\t\t\t\tclassName=\"dataviews__per-page-control-prefix\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t}\n\t\t\tvalue={ dataView.getState().pagination.pageSize }\n\t\t\toptions={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( {\n\t\t\t\tvalue: pageSize,\n\t\t\t\tlabel: pageSize,\n\t\t\t} ) ) }\n\t\t\tonChange={ ( value ) => dataView.setPageSize( +value ) }\n\t\t/>\n\t);\n}\n\nfunction PageSizeMenu( { dataView } ) {\n\tconst currenPageSize = dataView.getState().pagination.pageSize;\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ currenPageSize }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ /* TODO: probably label per view type. */ }\n\t\t\t\t\t{ __( 'Rows per page' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ PAGE_SIZE_VALUES.map( ( size ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\tkey={ size }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tcurrenPageSize === size && <Icon icon={ check } />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t// We need to handle this on DropDown component probably..\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tdataView.setPageSize( size );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// TODO: check about role and a11y.\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ size }\n\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\nfunction FieldsVisibilityMenu( { dataView } ) {\n\tconst hideableFields = dataView\n\t\t.getAllColumns()\n\t\t.filter( ( columnn ) => columnn.getCanHide() );\n\tif ( ! hideableFields?.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Fields' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ hideableFields?.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tfield.getIsVisible() && <Icon icon={ check } />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tfield.getToggleVisibilityHandler()( event );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.columnDef.header }\n\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\n// This object is used to construct the sorting options per sortable field.\nconst sortingItemsInfo = {\n\tasc: { icon: arrowUp, label: __( 'Sort ascending' ) },\n\tdesc: { icon: arrowDown, label: __( 'Sort descending' ) },\n};\nfunction SortMenu( { dataView } ) {\n\tconst sortableFields = dataView\n\t\t.getAllColumns()\n\t\t.filter( ( columnn ) => columnn.getCanSort() );\n\tif ( ! sortableFields?.length ) {\n\t\treturn null;\n\t}\n\tconst currentSortedField = sortableFields.find( ( field ) =>\n\t\tfield.getIsSorted()\n\t);\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ currentSortedField?.columnDef.header }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Sort by' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ sortableFields?.map( ( field ) => {\n\t\t\t\tconst sortedDirection = field.getIsSorted();\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownSubMenuV2\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ field.columnDef.header }\n\t\t\t\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tside=\"left\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ Object.entries( sortingItemsInfo ).map(\n\t\t\t\t\t\t\t( [ direction, info ] ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\t\t\t\t\tprefix={ <Icon icon={ info.icon } /> }\n\t\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\t\tsortedDirection === direction && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tsortedDirection === direction\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\tdataView.resetSorting();\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tdataView.setSorting( [\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tid: field.id,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdesc:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdirection ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'desc',\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ info.label }\n\t\t\t\t\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DropdownSubMenuV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\nexport default function ViewActions( { dataView, className } ) {\n\treturn (\n\t\t<DropdownMenuV2\n\t\t\tlabel={ __( 'Actions' ) }\n\t\t\tclassName={ className }\n\t\t\ttrigger={\n\t\t\t\t<Button variant=\"tertiary\" icon={ blockTable }>\n\t\t\t\t\t{ __( 'View' ) }\n\t\t\t\t\t<Icon icon={ chevronDown } />\n\t\t\t\t</Button>\n\t\t\t}\n\t\t>\n\t\t\t<DropdownMenuGroupV2>\n\t\t\t\t<SortMenu dataView={ dataView } />\n\t\t\t\t<FieldsVisibilityMenu dataView={ dataView } />\n\t\t\t\t<PageSizeMenu dataView={ dataView } />\n\t\t\t</DropdownMenuGroupV2>\n\t\t</DropdownMenuV2>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_icons","_i18n","_lockUnlock","DropdownMenuV2","DropdownMenuGroupV2","DropdownMenuItemV2","DropdownSubMenuV2","DropdownSubMenuTriggerV2","unlock","componentsPrivateApis","availableViews","id","label","__","ViewTypeMenu","view","onChangeView","activeView","find","v","type","_react","createElement","trigger","suffix","Fragment","Icon","icon","chevronRightSmall","map","availableView","key","prefix","check","onSelect","event","preventDefault","role","PAGE_SIZE_VALUES","PageSizeMenu","perPage","size","page","FieldsVisibilityMenu","fields","hidableFields","filter","field","enableHiding","length","hiddenFields","includes","header","sortingItemsInfo","asc","arrowUp","desc","arrowDown","SortMenu","sortableFields","enableSorting","currentSortedField","sort","sortedDirection","direction","side","Object","entries","info","isActive","undefined","ViewActions","Button","variant","blockTable","chevronDown"],"sources":["@wordpress/edit-site/src/components/dataviews/view-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport {\n\tchevronRightSmall,\n\tcheck,\n\tblockTable,\n\tchevronDown,\n\tarrowUp,\n\tarrowDown,\n} from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tDropdownMenuV2,\n\tDropdownMenuGroupV2,\n\tDropdownMenuItemV2,\n\tDropdownSubMenuV2,\n\tDropdownSubMenuTriggerV2,\n} = unlock( componentsPrivateApis );\n\nconst availableViews = [\n\t{\n\t\tid: 'list',\n\t\tlabel: __( 'List' ),\n\t},\n\t{\n\t\tid: 'grid',\n\t\tlabel: __( 'Grid' ),\n\t},\n];\n\nfunction ViewTypeMenu( { view, onChangeView } ) {\n\tconst activeView = availableViews.find( ( v ) => view.type === v.id );\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ activeView.label }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ availableViews.map( ( availableView ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\tkey={ availableView.id }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tavailableView.id === view.type && (\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t// We need to handle this on DropDown component probably..\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( { ...view, type: availableView.id } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// TODO: check about role and a11y.\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ availableView.label }\n\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\nconst PAGE_SIZE_VALUES = [ 5, 20, 50 ];\nfunction PageSizeMenu( { view, onChangeView } ) {\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ view.perPage }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ /* TODO: probably label per view type. */ }\n\t\t\t\t\t{ __( 'Rows per page' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ PAGE_SIZE_VALUES.map( ( size ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\tkey={ size }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tview.perPage === size && <Icon icon={ check } />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t// We need to handle this on DropDown component probably..\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( { ...view, perPage: size, page: 1 } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// TODO: check about role and a11y.\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ size }\n\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\nfunction FieldsVisibilityMenu( { view, onChangeView, fields } ) {\n\tconst hidableFields = fields.filter(\n\t\t( field ) => field.enableHiding !== false\n\t);\n\tif ( ! hidableFields?.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Fields' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ hidableFields?.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\t! view.hiddenFields?.includes( field.id ) && (\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\thiddenFields: view.hiddenFields?.includes(\n\t\t\t\t\t\t\t\t\tfield.id\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t? view.hiddenFields.filter(\n\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  )\n\t\t\t\t\t\t\t\t\t: [ ...view.hiddenFields, field.id ],\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\n// This object is used to construct the sorting options per sortable field.\nconst sortingItemsInfo = {\n\tasc: { icon: arrowUp, label: __( 'Sort ascending' ) },\n\tdesc: { icon: arrowDown, label: __( 'Sort descending' ) },\n};\nfunction SortMenu( { fields, view, onChangeView } ) {\n\tconst sortableFields = fields.filter(\n\t\t( field ) => field.enableSorting !== false\n\t);\n\tif ( ! sortableFields?.length ) {\n\t\treturn null;\n\t}\n\tconst currentSortedField = fields.find(\n\t\t( field ) => field.id === view.sort?.field\n\t);\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ currentSortedField?.header }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Sort by' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ sortableFields?.map( ( field ) => {\n\t\t\t\tconst sortedDirection = view.sort?.direction;\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownSubMenuV2\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tside=\"left\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ Object.entries( sortingItemsInfo ).map(\n\t\t\t\t\t\t\t( [ direction, info ] ) => {\n\t\t\t\t\t\t\t\tconst isActive =\n\t\t\t\t\t\t\t\t\tcurrentSortedField &&\n\t\t\t\t\t\t\t\t\tsortedDirection === direction &&\n\t\t\t\t\t\t\t\t\tfield.id === currentSortedField.id;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\t\t\t\t\tprefix={ <Icon icon={ info.icon } /> }\n\t\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\t\tisActive && <Icon icon={ check } />\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tsortedDirection === direction\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsort: undefined,\n\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\t\t\tsort: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfield: field.id,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdirection,\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ info.label }\n\t\t\t\t\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DropdownSubMenuV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\nexport default function ViewActions( { fields, view, onChangeView } ) {\n\treturn (\n\t\t<DropdownMenuV2\n\t\t\tlabel={ __( 'Actions' ) }\n\t\t\ttrigger={\n\t\t\t\t<Button variant=\"tertiary\" icon={ blockTable }>\n\t\t\t\t\t{ __( 'View' ) }\n\t\t\t\t\t<Icon icon={ chevronDown } />\n\t\t\t\t</Button>\n\t\t\t}\n\t\t>\n\t\t\t<DropdownMenuGroupV2>\n\t\t\t\t<ViewTypeMenu view={ view } onChangeView={ onChangeView } />\n\t\t\t\t<SortMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<FieldsVisibilityMenu\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t/>\n\t\t\t\t<PageSizeMenu view={ view } onChangeView={ onChangeView } />\n\t\t\t</DropdownMenuGroupV2>\n\t\t</DropdownMenuV2>\n\t);\n}\n"],"mappings":"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"}

package/build/components/dataviews/view-grid.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewGrid = ViewGrid;
+var _react = require("react");
+var _components = require("@wordpress/components");
+var _itemActions = _interopRequireDefault(require("./item-actions"));
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function ViewGrid({
+  data,
+  fields,
+  view,
+  actions
+}) {
+  const mediaField = fields.find(field => field.id === view.layout.mediaField);
+  const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && field.id !== view.layout.mediaField);
+  return (0, _react.createElement)(_components.__experimentalGrid, {
+    gap: 8,
+    columns: 2,
+    alignment: "top"
+  }, data.map((item, index) => {
+    return (0, _react.createElement)(_components.__experimentalVStack, {
+      key: index
+    }, (0, _react.createElement)("div", {
+      className: "dataviews-view-grid__media"
+    }, mediaField?.render({
+      item,
+      view
+    }) || (0, _react.createElement)(_components.Placeholder, {
+      withIllustration: true,
+      style: {
+        width: '100%',
+        minHeight: '200px'
+      }
+    })), (0, _react.createElement)(_components.__experimentalHStack, {
+      justify: "space-between",
+      alignment: "top"
+    }, (0, _react.createElement)(_components.FlexBlock, null, (0, _react.createElement)(_components.__experimentalVStack, null, visibleFields.map(field => (0, _react.createElement)("div", {
+      key: field.id
+    }, field.render({
+      item,
+      view
+    }))))), (0, _react.createElement)(_components.FlexBlock, null, (0, _react.createElement)(_itemActions.default, {
+      item: item,
+      actions: actions
+    }))));
+  }));
+}
+//# sourceMappingURL=view-grid.js.map

package/build/components/dataviews/view-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_itemActions","_interopRequireDefault","ViewGrid","data","fields","view","actions","mediaField","find","field","id","layout","visibleFields","filter","hiddenFields","includes","_react","createElement","__experimentalGrid","gap","columns","alignment","map","item","index","__experimentalVStack","key","className","render","Placeholder","withIllustration","style","width","minHeight","__experimentalHStack","justify","FlexBlock","default"],"sources":["@wordpress/edit-site/src/components/dataviews/view-grid.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexBlock,\n\tPlaceholder,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ItemActions from './item-actions';\n\nexport function ViewGrid( { data, fields, view, actions } ) {\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\tfield.id !== view.layout.mediaField\n\t);\n\treturn (\n\t\t<Grid gap={ 8 } columns={ 2 } alignment=\"top\">\n\t\t\t{ data.map( ( item, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack key={ index }>\n\t\t\t\t\t\t<div className=\"dataviews-view-grid__media\">\n\t\t\t\t\t\t\t{ mediaField?.render( { item, view } ) || (\n\t\t\t\t\t\t\t\t<Placeholder\n\t\t\t\t\t\t\t\t\twithIllustration\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\t\tminHeight: '200px',\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) }\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<HStack justify=\"space-between\" alignment=\"top\">\n\t\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t\t\t<div key={ field.id }>\n\t\t\t\t\t\t\t\t\t\t\t{ field.render( { item, view } ) }\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t\t<ItemActions\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAWA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AAdA;AACA;AACA;;AASA;AACA;AACA;;AAGO,SAASG,QAAQA,CAAE;EAAEC,IAAI;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAQ,CAAC,EAAG;EAC3D,MAAMC,UAAU,GAAGH,MAAM,CAACI,IAAI,CAC3BC,KAAK,IAAMA,KAAK,CAACC,EAAE,KAAKL,IAAI,CAACM,MAAM,CAACJ,UACvC,CAAC;EACD,MAAMK,aAAa,GAAGR,MAAM,CAACS,MAAM,CAChCJ,KAAK,IACN,CAAEJ,IAAI,CAACS,YAAY,CAACC,QAAQ,CAAEN,KAAK,CAACC,EAAG,CAAC,IACxCD,KAAK,CAACC,EAAE,KAAKL,IAAI,CAACM,MAAM,CAACJ,UAC3B,CAAC;EACD,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAAoB,kBAAI;IAACC,GAAG,EAAG,CAAG;IAACC,OAAO,EAAG,CAAG;IAACC,SAAS,EAAC;EAAK,GAC1ClB,IAAI,CAACmB,GAAG,CAAE,CAAEC,IAAI,EAAEC,KAAK,KAAM;IAC9B,OACC,IAAAR,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAA2B,oBAAM;MAACC,GAAG,EAAGF;IAAO,GACpB,IAAAR,MAAA,CAAAC,aAAA;MAAKU,SAAS,EAAC;IAA4B,GACxCpB,UAAU,EAAEqB,MAAM,CAAE;MAAEL,IAAI;MAAElB;IAAK,CAAE,CAAC,IACrC,IAAAW,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAA+B,WAAW;MACXC,gBAAgB;MAChBC,KAAK,EAAG;QACPC,KAAK,EAAE,MAAM;QACbC,SAAS,EAAE;MACZ;IAAG,CACH,CAEE,CAAC,EAEN,IAAAjB,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAAoC,oBAAM;MAACC,OAAO,EAAC,eAAe;MAACd,SAAS,EAAC;IAAK,GAC9C,IAAAL,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAAsC,SAAS,QACT,IAAApB,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAA2B,oBAAM,QACJb,aAAa,CAACU,GAAG,CAAIb,KAAK,IAC3B,IAAAO,MAAA,CAAAC,aAAA;MAAKS,GAAG,EAAGjB,KAAK,CAACC;IAAI,GAClBD,KAAK,CAACmB,MAAM,CAAE;MAAEL,IAAI;MAAElB;IAAK,CAAE,CAC3B,CACJ,CACK,CACE,CAAC,EACZ,IAAAW,MAAA,CAAAC,aAAA,EAACnB,WAAA,CAAAsC,SAAS,QACT,IAAApB,MAAA,CAAAC,aAAA,EAACjB,YAAA,CAAAqC,OAAW;MACXd,IAAI,EAAGA,IAAM;MACbjB,OAAO,EAAGA;IAAS,CACnB,CACS,CACJ,CACD,CAAC;EAEX,CAAE,CACG,CAAC;AAET"}