fix(FilterBar): disable "down" reorder btns on last row (#7040)

Author: Lukas742

packages/main/src/components/FilterBar/FilterBar.cy.tsx

@@ -185,8 +185,7 @@ describe('FilterBar.cy.tsx', () => {
     cy.findAllByTestId('INPUT').should('have.length', 1);
     cy.findAllByTestId('SWITCH').should('have.length', 1);
     cy.findAllByTestId('SELECT').should('have.length', 1);
-
-    cy.get('[text="Filters (42)"]').click({ force: true });
+    cy.findToolbarButtonByText('Filters (42)').click();
     cy.get('@openSpy').should('have.been.calledOnce');
     cy.get('@afterOpenSpy').should('have.been.calledOnce');
 
@@ -650,7 +649,7 @@ describe('FilterBar.cy.tsx', () => {
     cy.get('[ui5-label]').eq(3).should('have.text', 'Input');
     cy.get('[ui5-label]').eq(4).should('have.text', 'Switch');
 
-    cy.get('[text="Filters"]').click({ force: true });
+    cy.findToolbarButtonByText('Filters').click();
     cy.get('[ui5-dialog]').should('have.attr', 'open');
     cy.wait(200);
     cy.get('[data-text="SELECT w/ initial selected"]').as('notSelected');

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -1,6 +1,5 @@
 import BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
-import TableSelectionMode from '@ui5/webcomponents/dist/types/TableSelectionMode.js';
 import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import group2Icon from '@ui5/webcomponents-icons/dist/group-2.js';
 import listIcon from '@ui5/webcomponents-icons/dist/list.js';
@@ -37,7 +36,8 @@ import type {
   DialogDomRef,
   InputPropTypes,
   SegmentedButtonPropTypes,
-  TableSelectionDomRef
+  TableSelectionMultiDomRef,
+  TableSelectionMultiPropTypes
 } from '../../webComponents/index.js';
 import {
   Bar,
@@ -53,7 +53,7 @@ import {
   Table,
   TableHeaderCell,
   TableHeaderRow,
-  TableSelection,
+  TableSelectionMulti,
   Title
 } from '../../webComponents/index.js';
 import type { FilterGroupItemInternalProps } from '../FilterGroupItem/types.js';
@@ -64,7 +64,7 @@ import type { FilterBarPropTypes } from './types.js';
 
 interface ForceRequiredObject {
   required: string[];
-  target: TableSelectionDomRef;
+  target: TableSelectionMultiDomRef;
   selected: Set<string>;
   prevSelected: Set<string>;
   selectedKeys: Set<string>;
@@ -234,9 +234,10 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
           )
         : orderedChildren;
 
-    return filteredChildren.map((child, index) => {
+    return filteredChildren.map((child, index, arr) => {
       return cloneElement<FilterGroupItemInternalProps>(child, {
-        'data-index': index
+        'data-index': index,
+        'data-filters-count': arr.length
       });
     });
   };
@@ -378,9 +379,10 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
     }
   }, [selectedFilters]);
 
-  const handleCheckBoxChange = (e) => {
-    if (e.target.hasAttribute('ui5-table-selection')) {
-      const _selected: Set<string> = new Set(e.target.selected.length ? e.target.selected.split(' ') : []);
+  const handleCheckBoxChange: TableSelectionMultiPropTypes['onChange'] = (e) => {
+    const selectionFeature = e.target;
+    if (selectionFeature.hasAttribute('ui5-table-selection-multi')) {
+      const _selected: Set<string> = selectionFeature.getSelectedAsSet();
       const prevSelected: Set<string> = new Set(selectedFilters ?? []);
       const alwaysSelected = Object.keys(requiredFilters).filter((key) => requiredFilters[key]);
       const selectedKeys: Set<string> = _selected.symmetricDifference(prevSelected);
@@ -389,7 +391,7 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
       if (alwaysSelected.length) {
         setForceRequired({
           required: alwaysSelected,
-          target: e.target,
+          target: selectionFeature,
           selected: _selected,
           prevSelected,
           selectedKeys
@@ -443,13 +445,7 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
               className={classNames.tableInGroup}
               data-component-name="FilterBarDialogPanelTable"
               data-with-value={showValues}
-              features={
-                <TableSelection
-                  mode={TableSelectionMode.Multiple}
-                  selected={selected}
-                  onChange={handleCheckBoxChange}
-                />
-              }
+              features={<TableSelectionMulti selected={selected} onChange={handleCheckBoxChange} />}
               headerRow={
                 <TableHeaderRow className={classNames.groupedTableHeader}>
                   <TableHeaderCell>{filterText}</TableHeaderCell>
@@ -617,7 +613,7 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
           tabIndex={!isListView ? -1 : undefined}
           features={
             <>
-              <TableSelection mode={TableSelectionMode.Multiple} onChange={handleCheckBoxChange} selected={selected} />
+              <TableSelectionMulti onChange={handleCheckBoxChange} selected={selected} />
             </>
           }
           headerRow={

packages/main/src/components/FilterGroupItem/index.tsx

@@ -56,6 +56,7 @@ const FilterGroupItem = forwardRef<HTMLDivElement, FilterGroupItemPropTypes & Fi
     } = props;
     const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
     const index = props['data-index'];
+    const filtersCount = props['data-filters-count'];
     const isomporphicReorderKey = isMac ? 'CMD' : 'CTRL';
     const tableRowRef = useRef<TableRowDomRef>(null);
 
@@ -99,9 +100,11 @@ const FilterGroupItem = forwardRef<HTMLDivElement, FilterGroupItemPropTypes & Fi
 
     useEffect(() => {
       if (index === 0) {
-        // fallback
         setItemPosition('first');
       }
+      if (index === filtersCount - 1) {
+        setItemPosition('last');
+      }
     }, [index]);
 
     const handleReorder = (e: Parameters<ButtonPropTypes['onClick']>[0]) => {

packages/main/src/components/FilterGroupItem/types.ts

@@ -66,9 +66,16 @@ export interface FilterGroupItemPropTypes extends CommonProps {
   active?: boolean;
 }
 
+/**
+ * @private
+ */
 export interface FilterGroupItemInternalProps extends FilterGroupItemPropTypes {
   /**
    * @private
    */
   'data-index'?: number;
+  /**
+   * @private
+   */
+  'data-filters-count'?: number;
 }