@wordpress/dataviews 0.2.0 → 0.3.0

package/build-module/view-list.js

@@ -8,14 +8,17 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { useAsyncList } from '@wordpress/compose';
-import { __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
+import { __experimentalHStack as HStack, __experimentalVStack as VStack, Button } from '@wordpress/components';
 import { ENTER, SPACE } from '@wordpress/keycodes';
+import { info } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 export default function ViewList({
   view,
   fields,
   data,
   getItemId,
   onSelectionChange,
+  onDetailsChange,
   selection,
   deferredRendering
 }) {
@@ -35,41 +38,51 @@ export default function ViewList({
     }
   };
   return createElement("ul", {
-    className: "dataviews-list-view"
-  }, usedData.map((item, index) => {
+    className: "dataviews-view-list"
+  }, usedData.map(item => {
     return createElement("li", {
-      key: getItemId?.(item) || index
+      key: getItemId(item),
+      className: classNames({
+        'is-selected': selection.includes(item.id)
+      })
+    }, createElement(HStack, {
+      className: "dataviews-view-list__item-wrapper"
     }, createElement("div", {
       role: "button",
       tabIndex: 0,
       "aria-pressed": selection.includes(item.id),
       onKeyDown: onEnter(item),
-      className: classNames('dataviews-list-view__item', {
-        'dataviews-list-view__item-selected': selection.includes(item.id)
-      }),
+      className: "dataviews-view-list__item",
       onClick: () => onSelectionChange([item])
     }, createElement(HStack, {
-      spacing: 3
+      spacing: 3,
+      justify: "start"
     }, createElement("div", {
-      className: "dataviews-list-view__media-wrapper"
+      className: "dataviews-view-list__media-wrapper"
     }, mediaField?.render({
       item
     }) || createElement("div", {
-      className: "dataviews-list-view__media-placeholder"
-    })), createElement(HStack, null, createElement(VStack, {
+      className: "dataviews-view-list__media-placeholder"
+    })), createElement(VStack, {
       spacing: 1
     }, primaryField?.render({
       item
     }), createElement("div", {
-      className: "dataviews-list-view__fields"
+      className: "dataviews-view-list__fields"
     }, visibleFields.map(field => {
       return createElement("span", {
         key: field.id,
-        className: "dataviews-list-view__field"
+        className: "dataviews-view-list__field"
       }, field.render({
         item
       }));
-    })))))));
+    }))))), onDetailsChange && createElement(Button, {
+      className: "dataviews-view-list__details-button",
+      onClick: () => onDetailsChange([item]),
+      icon: info,
+      label: __('View details'),
+      size: "compact"
+    })));
   }));
 }
 //# sourceMappingURL=view-list.js.map

package/build-module/view-list.js.map

@@ -1 +1 @@
-{"version":3,"names":["classNames","useAsyncList","__experimentalHStack","HStack","__experimentalVStack","VStack","ENTER","SPACE","ViewList","view","fields","data","getItemId","onSelectionChange","selection","deferredRendering","shownData","step","usedData","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","onEnter","item","event","keyCode","createElement","className","map","index","key","role","tabIndex","onKeyDown","onClick","spacing","render"],"sources":["@wordpress/dataviews/src/view-list.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useAsyncList } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\nexport default function ViewList( {\n\tview,\n\tfields,\n\tdata,\n\tgetItemId,\n\tonSelectionChange,\n\tselection,\n\tdeferredRendering,\n} ) {\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.primaryField, view.layout.mediaField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\n\tconst onEnter = ( item ) => ( event ) => {\n\t\tconst { keyCode } = event;\n\t\tif ( [ ENTER, SPACE ].includes( keyCode ) ) {\n\t\t\tonSelectionChange( [ item ] );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ul className=\"dataviews-list-view\">\n\t\t\t{ usedData.map( ( item, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<li key={ getItemId?.( item ) || index }>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\t\taria-pressed={ selection.includes( item.id ) }\n\t\t\t\t\t\t\tonKeyDown={ onEnter( item ) }\n\t\t\t\t\t\t\tclassName={ classNames(\n\t\t\t\t\t\t\t\t'dataviews-list-view__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'dataviews-list-view__item-selected':\n\t\t\t\t\t\t\t\t\t\tselection.includes( item.id ),\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => onSelectionChange( [ item ] ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack spacing={ 3 }>\n\t\t\t\t\t\t\t\t<div className=\"dataviews-list-view__media-wrapper\">\n\t\t\t\t\t\t\t\t\t{ mediaField?.render( { item } ) || (\n\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-list-view__media-placeholder\"></div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-list-view__fields\">\n\t\t\t\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-list-view__field\"\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\t{ field.render( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\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</span>\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</div>\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ul>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["classNames","useAsyncList","__experimentalHStack","HStack","__experimentalVStack","VStack","Button","ENTER","SPACE","info","__","ViewList","view","fields","data","getItemId","onSelectionChange","onDetailsChange","selection","deferredRendering","shownData","step","usedData","mediaField","find","field","id","layout","primaryField","visibleFields","filter","hiddenFields","includes","onEnter","item","event","keyCode","createElement","className","map","key","role","tabIndex","onKeyDown","onClick","spacing","justify","render","icon","label","size"],"sources":["@wordpress/dataviews/src/view-list.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useAsyncList } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n} from '@wordpress/components';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\nimport { info } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\nexport default function ViewList( {\n\tview,\n\tfields,\n\tdata,\n\tgetItemId,\n\tonSelectionChange,\n\tonDetailsChange,\n\tselection,\n\tdeferredRendering,\n} ) {\n\tconst shownData = useAsyncList( data, { step: 3 } );\n\tconst usedData = deferredRendering ? shownData : data;\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout.primaryField\n\t);\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\t! view.hiddenFields.includes( field.id ) &&\n\t\t\t! [ view.layout.primaryField, view.layout.mediaField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\n\tconst onEnter = ( item ) => ( event ) => {\n\t\tconst { keyCode } = event;\n\t\tif ( [ ENTER, SPACE ].includes( keyCode ) ) {\n\t\t\tonSelectionChange( [ item ] );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ul className=\"dataviews-view-list\">\n\t\t\t{ usedData.map( ( item ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tkey={ getItemId( item ) }\n\t\t\t\t\t\tclassName={ classNames( {\n\t\t\t\t\t\t\t'is-selected': selection.includes( item.id ),\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack className=\"dataviews-view-list__item-wrapper\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\t\t\taria-pressed={ selection.includes( item.id ) }\n\t\t\t\t\t\t\t\tonKeyDown={ onEnter( item ) }\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__item\"\n\t\t\t\t\t\t\t\tonClick={ () => onSelectionChange( [ item ] ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack spacing={ 3 } justify=\"start\">\n\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-list__media-wrapper\">\n\t\t\t\t\t\t\t\t\t\t{ mediaField?.render( { item } ) || (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-list__media-placeholder\"></div>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t\t\t\t\t\t{ primaryField?.render( { item } ) }\n\t\t\t\t\t\t\t\t\t\t<div className=\"dataviews-view-list__fields\">\n\t\t\t\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field\"\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\t{ field.render( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\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</span>\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</div>\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ onDetailsChange && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__details-button\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tonDetailsChange( [ item ] )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\ticon={ info }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'View details' ) }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\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</li>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ul>\n\t);\n}\n"],"mappings":"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"}

package/build-module/view-table.js

@@ -1,111 +1,99 @@
 import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
-import { chevronDown, chevronUp, unseen, check, arrowUp, arrowDown, chevronRightSmall, funnel } from '@wordpress/icons';
+import { unseen, funnel } from '@wordpress/icons';
 import { Button, Icon, privateApis as componentsPrivateApis } from '@wordpress/components';
-import { Children, Fragment } from '@wordpress/element';
+import { Children, Fragment, forwardRef, useEffect, useId, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
 import ItemActions from './item-actions';
-import { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
+import { ENUMERATION_TYPE, OPERATORS, SORTING_DIRECTIONS } from './constants';
+import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper';
 const {
   DropdownMenuV2: DropdownMenu,
   DropdownMenuGroupV2: DropdownMenuGroup,
   DropdownMenuItemV2: DropdownMenuItem,
+  DropdownMenuRadioItemV2: DropdownMenuRadioItem,
   DropdownMenuSeparatorV2: DropdownMenuSeparator,
-  DropdownSubMenuV2: DropdownSubMenu,
-  DropdownSubMenuTriggerV2: DropdownSubMenuTrigger
+  DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+  DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText
 } = unlock(componentsPrivateApis);
-const sortingItemsInfo = {
-  asc: {
-    icon: arrowUp,
-    label: __('Sort ascending')
-  },
-  desc: {
-    icon: arrowDown,
-    label: __('Sort descending')
-  }
+const sortArrows = {
+  asc: '↑',
+  desc: '↓'
 };
-const sortIcons = {
-  asc: chevronUp,
-  desc: chevronDown
+const sanitizeOperators = field => {
+  let operators = field.filterBy?.operators;
+  if (!operators || !Array.isArray(operators)) {
+    operators = Object.keys(OPERATORS);
+  }
+  return operators.filter(operator => Object.keys(OPERATORS).includes(operator));
 };
-function HeaderMenu({
+const HeaderMenu = forwardRef(function HeaderMenu({
   field,
   view,
-  onChangeView
-}) {
-  const isSortable = field.enableSorting !== false;
+  onChangeView,
+  onHide
+}, ref) {
   const isHidable = field.enableHiding !== false;
-  if (!isSortable && !isHidable) {
-    return field.header;
-  }
+  const isSortable = field.enableSorting !== false;
   const isSorted = view.sort?.field === field.id;
-  let filter, filterInView;
-  const otherFilters = [];
-  if (field.type === ENUMERATION_TYPE) {
-    let columnOperators = field.filterBy?.operators;
-    if (!columnOperators || !Array.isArray(columnOperators)) {
-      columnOperators = [OPERATOR_IN, OPERATOR_NOT_IN];
-    }
-    const operators = columnOperators.filter(operator => [OPERATOR_IN, OPERATOR_NOT_IN].includes(operator));
-    if (operators.length >= 0) {
-      filter = {
-        field: field.id,
-        operators,
-        elements: field.elements || []
-      };
-      filterInView = {
-        field: filter.field,
-        operator: filter.operators[0],
-        value: undefined
-      };
-    }
+  let filter, filterInView, activeElement, activeOperator, otherFilters;
+  const operators = sanitizeOperators(field);
+  if (field.type === ENUMERATION_TYPE && operators.length > 0) {
+    filter = {
+      field: field.id,
+      operators,
+      elements: field.elements || []
+    };
+    filterInView = view.filters.find(f => f.field === filter.field);
+    otherFilters = view.filters.filter(f => f.field !== filter.field);
+    activeElement = filter.elements.find(element => element.value === filterInView?.value);
+    activeOperator = filterInView?.operator || filter.operators[0];
   }
   const isFilterable = !!filter;
-  if (isFilterable) {
-    const columnFilters = view.filters;
-    columnFilters.forEach(columnFilter => {
-      if (columnFilter.field === filter.field) {
-        filterInView = {
-          ...columnFilter
-        };
-      } else {
-        otherFilters.push(columnFilter);
-      }
-    });
+  if (!isSortable && !isHidable && !isFilterable) {
+    return field.header;
   }
   return createElement(DropdownMenu, {
     align: "start",
     trigger: createElement(Button, {
-      icon: isSorted && sortIcons[view.sort.direction],
-      iconPosition: "right",
-      text: field.header,
-      style: {
-        padding: 0
-      },
-      size: "compact"
-    })
-  }, createElement(WithSeparators, null, isSortable && createElement(DropdownMenuGroup, null, Object.entries(sortingItemsInfo).map(([direction, info]) => {
-    const isActive = isSorted && view.sort.direction === direction;
-    return createElement(DropdownMenuItem, {
-      key: direction,
-      role: "menuitemradio",
-      "aria-checked": isActive,
-      prefix: createElement(Icon, {
-        icon: info.icon
-      }),
-      suffix: isActive && createElement(Icon, {
-        icon: check
-      }),
-      onSelect: event => {
-        event.preventDefault();
+      size: "compact",
+      className: "dataviews-view-table-header-button",
+      ref: ref,
+      variant: "tertiary"
+    }, field.header, isSorted && createElement("span", {
+      "aria-hidden": "true"
+    }, isSorted && sortArrows[view.sort.direction])),
+    style: {
+      minWidth: '240px'
+    }
+  }, createElement(WithSeparators, null, isSortable && createElement(DropdownMenuGroup, null, Object.entries(SORTING_DIRECTIONS).map(([direction, info]) => {
+    const isChecked = isSorted && view.sort.direction === direction;
+    const value = `${field.id}-${direction}`;
+    return createElement(DropdownMenuRadioItem, {
+      key: value
+      // All sorting radio items share the same name, so that
+      // selecting a sorting option automatically deselects the
+      // previously selected one, even if it is displayed in
+      // another submenu. The field and direction are passed via
+      // the `value` prop.
+      ,
+      name: "view-table-sorting",
+      value: value,
+      checked: isChecked,
+      onChange: () => {
         onChangeView({
           ...view,
           sort: {
@@ -114,96 +102,72 @@ function HeaderMenu({
           }
         });
       }
-    }, info.label);
+    }, createElement(DropdownMenuItemLabel, null, info.label));
   })), isHidable && createElement(DropdownMenuItem, {
-    role: "menuitemradio",
-    "aria-checked": false,
     prefix: createElement(Icon, {
       icon: unseen
     }),
-    onSelect: event => {
-      event.preventDefault();
+    onClick: () => {
+      onHide(field);
       onChangeView({
         ...view,
         hiddenFields: view.hiddenFields.concat(field.id)
       });
     }
-  }, __('Hide')), isFilterable && createElement(DropdownMenuGroup, null, createElement(DropdownSubMenu, {
+  }, createElement(DropdownMenuItemLabel, null, __('Hide'))), isFilterable && createElement(DropdownMenuGroup, null, createElement(DropdownMenu, {
     key: filter.field,
-    trigger: createElement(DropdownSubMenuTrigger, {
+    trigger: createElement(DropdownMenuItem, {
       prefix: createElement(Icon, {
         icon: funnel
       }),
-      suffix: createElement(Icon, {
-        icon: chevronRightSmall
-      })
-    }, __('Filter by'))
+      suffix: activeElement && createElement("span", {
+        "aria-hidden": "true"
+      }, activeOperator in OPERATORS && `${OPERATORS[activeOperator].label} `, activeElement?.label)
+    }, createElement(DropdownMenuItemLabel, null, __('Filter by')))
   }, createElement(WithSeparators, null, createElement(DropdownMenuGroup, null, filter.elements.map(element => {
-    let isActive = false;
-    if (filterInView) {
-      // Intentionally use loose comparison, so it does type conversion.
-      // This covers the case where a top-level filter for the same field converts a number into a string.
-      /* eslint-disable eqeqeq */
-      isActive = element.value == filterInView.value;
-      /* eslint-enable eqeqeq */
-    }
-
-    return createElement(DropdownMenuItem, {
+    const isActive = activeElement?.value === element.value;
+    return createElement(DropdownMenuRadioItemCustom, {
       key: element.value,
-      role: "menuitemradio",
-      "aria-checked": isActive,
-      prefix: isActive && createElement(Icon, {
-        icon: check
-      }),
-      onSelect: () => {
+      name: `view-table-${filter.field}`,
+      value: element.value,
+      checked: isActive,
+      onClick: () => {
         onChangeView({
           ...view,
+          page: 1,
           filters: [...otherFilters, {
             field: filter.field,
-            operator: filterInView?.operator,
+            operator: activeOperator,
             value: isActive ? undefined : element.value
           }]
         });
       }
-    }, element.label);
-  })), filter.operators.length > 1 && createElement(DropdownSubMenu, {
-    trigger: createElement(DropdownSubMenuTrigger, {
-      suffix: createElement(Fragment, null, filterInView.operator === OPERATOR_IN ? __('Is') : __('Is not'), createElement(Icon, {
-        icon: chevronRightSmall
-      }), ' ')
-    }, __('Conditions'))
-  }, createElement(DropdownMenuItem, {
-    key: "in-filter",
-    role: "menuitemradio",
-    "aria-checked": filterInView?.operator === OPERATOR_IN,
-    prefix: filterInView?.operator === OPERATOR_IN && createElement(Icon, {
-      icon: check
-    }),
-    onSelect: () => onChangeView({
-      ...view,
-      filters: [...otherFilters, {
-        field: filter.field,
-        operator: OPERATOR_IN,
-        value: filterInView?.value
-      }]
-    })
-  }, __('Is')), createElement(DropdownMenuItem, {
-    key: "not-in-filter",
-    role: "menuitemradio",
-    "aria-checked": filterInView?.operator === OPERATOR_NOT_IN,
-    prefix: filterInView?.operator === OPERATOR_NOT_IN && createElement(Icon, {
-      icon: check
-    }),
-    onSelect: () => onChangeView({
+    }, createElement(DropdownMenuItemLabel, null, element.label), !!element.description && createElement(DropdownMenuItemHelpText, null, element.description));
+  })), filter.operators.length > 1 && createElement(DropdownMenu, {
+    trigger: createElement(DropdownMenuItem, {
+      suffix: createElement("span", {
+        "aria-hidden": "true"
+      }, OPERATORS[activeOperator]?.label)
+    }, createElement(DropdownMenuItemLabel, null, __('Conditions')))
+  }, Object.entries(OPERATORS).map(([operator, {
+    label,
+    key
+  }]) => createElement(DropdownMenuRadioItem, {
+    key: key,
+    name: `view-table-${filter.field}-conditions`,
+    value: operator,
+    checked: activeOperator === operator,
+    onChange: e => onChangeView({
       ...view,
+      page: 1,
       filters: [...otherFilters, {
         field: filter.field,
-        operator: OPERATOR_NOT_IN,
+        operator: e.target.value,
         value: filterInView?.value
       }]
     })
-  }, __('Is not'))))))));
-}
+  }, createElement(DropdownMenuItemLabel, null, label)))))))));
+});
 function WithSeparators({
   children
 }) {
@@ -221,25 +185,43 @@ function ViewTable({
   isLoading = false,
   deferredRendering
 }) {
+  const headerMenuRefs = useRef(new Map());
+  const headerMenuToFocusRef = useRef();
+  const [nextHeaderMenuToFocus, setNextHeaderMenuToFocus] = useState();
+  useEffect(() => {
+    if (headerMenuToFocusRef.current) {
+      headerMenuToFocusRef.current.focus();
+      headerMenuToFocusRef.current = undefined;
+    }
+  });
+  const asyncData = useAsyncList(data);
+  const tableNoticeId = useId();
+  if (nextHeaderMenuToFocus) {
+    // If we need to force focus, we short-circuit rendering here
+    // to prevent any additional work while we handle that.
+    // Clearing out the focus directive is necessary to make sure
+    // future renders don't cause unexpected focus jumps.
+    headerMenuToFocusRef.current = nextHeaderMenuToFocus;
+    setNextHeaderMenuToFocus();
+    return;
+  }
+  const onHide = field => {
+    const hidden = headerMenuRefs.current.get(field.id);
+    const fallback = headerMenuRefs.current.get(hidden.fallback);
+    setNextHeaderMenuToFocus(fallback?.node);
+  };
   const visibleFields = fields.filter(field => !view.hiddenFields.includes(field.id) && ![view.layout.mediaField, view.layout.primaryField].includes(field.id));
-  const shownData = useAsyncList(data);
-  const usedData = deferredRendering ? shownData : data;
+  const usedData = deferredRendering ? asyncData : data;
   const hasData = !!usedData?.length;
-  if (isLoading) {
-    // TODO:Add spinner or progress bar..
-    return createElement("div", {
-      className: "dataviews-loading"
-    }, createElement("h3", null, __('Loading')));
-  }
   const sortValues = {
     asc: 'ascending',
     desc: 'descending'
   };
-  return createElement("div", {
-    className: "dataviews-table-view-wrapper"
-  }, hasData && createElement("table", {
-    className: "dataviews-table-view"
-  }, createElement("thead", null, createElement("tr", null, visibleFields.map(field => createElement("th", {
+  return createElement("div", null, createElement("table", {
+    className: "dataviews-view-table",
+    "aria-busy": isLoading,
+    "aria-describedby": tableNoticeId
+  }, createElement("thead", null, createElement("tr", null, visibleFields.map((field, index) => createElement("th", {
     key: field.id,
     style: {
       width: field.width || undefined,
@@ -250,13 +232,26 @@ function ViewTable({
     "aria-sort": view.sort?.field === field.id && sortValues[view.sort.direction],
     scope: "col"
   }, createElement(HeaderMenu, {
+    ref: node => {
+      if (node) {
+        headerMenuRefs.current.set(field.id, {
+          node,
+          fallback: visibleFields[index > 0 ? index - 1 : 1]?.id
+        });
+      } else {
+        headerMenuRefs.current.delete(field.id);
+      }
+    },
     field: field,
     view: view,
-    onChangeView: onChangeView
+    onChangeView: onChangeView,
+    onHide: onHide
   }))), !!actions?.length && createElement("th", {
     "data-field-id": "actions"
-  }, __('Actions')))), createElement("tbody", null, usedData.map((item, index) => createElement("tr", {
-    key: getItemId?.(item) || index
+  }, createElement("span", {
+    className: "dataviews-view-table-header"
+  }, __('Actions'))))), createElement("tbody", null, hasData && usedData.map(item => createElement("tr", {
+    key: getItemId(item)
   }, visibleFields.map(field => createElement("td", {
     key: field.id,
     style: {
@@ -269,9 +264,13 @@ function ViewTable({
   }))), !!actions?.length && createElement("td", null, createElement(ItemActions, {
     item: item,
     actions: actions
-  })))))), !hasData && createElement("div", {
-    className: "dataviews-no-results"
-  }, createElement("p", null, __('No results'))));
+  })))))), createElement("div", {
+    className: classNames({
+      'dataviews-loading': isLoading,
+      'dataviews-no-results': !hasData && !isLoading
+    }),
+    id: tableNoticeId
+  }, !hasData && createElement("p", null, isLoading ? __('Loading…') : __('No results'))));
 }
 export default ViewTable;
 //# sourceMappingURL=view-table.js.map