chore: remove unused separator, it is done via css

also use clear button again

Author: r0b1n

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/__tests__/DatagridDropdownFilter.spec.tsx

@@ -1,7 +1,7 @@
 import { EnumFilterStore } from "@mendix/widget-plugin-dropdown-filter/stores/EnumFilterStore";
 import { FilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { ObservableFilterHost } from "@mendix/widget-plugin-filtering/typings/ObservableFilterHost";
-import { listAttribute } from "@mendix/widget-plugin-test-utils";
+import { listAttribute, dynamicValue } from "@mendix/widget-plugin-test-utils";
 import "@testing-library/jest-dom";
 import { render, waitFor } from "@testing-library/react";
 import { AssociationMetaData, AttributeMetaData } from "mendix";
@@ -23,6 +23,7 @@ const commonProps: DatagridDropdownFilterContainerProps = {
     filterable: false,
     multiSelect: false,
     clearable: false,
+    emptySelectionCaption: dynamicValue("Select"),
     selectedItemsStyle: "text",
     selectionMethod: "checkbox"
 };

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/__tests__/__snapshots__/DatagridDropdownFilter.spec.tsx.snap

@@ -3,20 +3,20 @@
 exports[`Dropdown Filter with single instance with single attribute renders correctly 1`] = `
 <DocumentFragment>
   <div
+    aria-activedescendant=""
+    aria-controls="downshift-:r0:-menu"
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Select"
     class="widget-dropdown-filter form-control variant-select filter-custom-class"
     data-empty="true"
     data-expanded="false"
+    id="downshift-:r0:-toggle-button"
+    role="combobox"
+    tabindex="0"
   >
-    <button
-      aria-activedescendant=""
-      aria-controls="downshift-:r0:-menu"
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      aria-label="Select"
+    <div
       class="widget-dropdown-filter-input-container"
-      id="downshift-:r0:-toggle-button"
-      role="combobox"
-      tabindex="0"
     >
       <span
         class="widget-dropdown-filter-toggle"
@@ -37,7 +37,7 @@ exports[`Dropdown Filter with single instance with single attribute renders corr
           />
         </svg>
       </div>
-    </button>
+    </div>
     <div
       class="widget-dropdown-filter-popover"
       hidden=""

packages/shared/widget-plugin-dropdown-filter/src/controls/base/ClearButton.tsx

@@ -1,4 +1,4 @@
-import { createElement, Fragment, ReactElement } from "react";
+import { createElement, ReactElement, useCallback } from "react";
 import { Cross } from "../picker-primitives";
 
 type ClearButtonClassNamesProps = {
@@ -10,18 +10,26 @@ type ClearButtonClassNamesProps = {
 type ClearButtonProps = {
     cls: ClearButtonClassNamesProps;
     onClick?: () => void;
-    showSeparator?: boolean;
     visible: boolean;
 };
 
 export function ClearButton(props: ClearButtonProps): ReactElement | null {
-    const { cls, onClick, showSeparator, visible } = props;
+    const { cls, onClick, visible } = props;
+
+    const onClickHandler = useCallback(
+        (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+            e.preventDefault();
+            if (onClick) {
+                onClick();
+            }
+        },
+        [onClick]
+    );
+
     return visible ? (
-        <Fragment>
-            <button className={cls.clear} tabIndex={-1} aria-label="Clear combobox" onClick={onClick}>
-                <Cross className={cls.clearIcon} />
-            </button>
-            {showSeparator && <div className={cls.separator} role="presentation" />}
-        </Fragment>
+        <button className={cls.clear} aria-label="Clear selection" onClick={onClickHandler}>
+            <Cross className={cls.clearIcon} />
+        </button>
     ) : null;
 }

packages/shared/widget-plugin-dropdown-filter/src/controls/combobox/Combobox.tsx

@@ -55,7 +55,6 @@ export const Combobox = observer(function Combobox(props: ComboboxProps) {
                     props.onClear();
                     inputRef.current?.focus();
                 }}
-                showSeparator={false}
                 visible={!props.empty}
             />
             <button className={cls.toggle} {...getToggleButtonProps({ "aria-label": "Show options" })}>

packages/shared/widget-plugin-dropdown-filter/src/controls/select/Select.tsx

@@ -3,9 +3,10 @@ import { useSelect, UseSelectProps } from "downshift";
 import { observer } from "mobx-react-lite";
 import React, { createElement, useRef } from "react";
 import { OptionWithState } from "../../typings/OptionWithState";
+import { ClearButton } from "../base/ClearButton";
 import { OptionsWrapper } from "../base/OptionsWrapper";
 import { useFloatingMenu } from "../hooks/useFloatingMenu";
-import { Arrow, classes, Cross } from "../picker-primitives";
+import { Arrow, classes } from "../picker-primitives";
 
 interface SelectProps {
     value: string;
@@ -51,20 +52,14 @@ export const Select = observer(function Select(props: SelectProps): React.ReactE
             >
                 <span className={cls.toggle}>{props.value}</span>
                 <div className={`${cls.root}-controls`}>
-                    {showClear && (
-                        <div
-                            className={cls.clear}
-                            tabIndex={-1}
-                            aria-label="Clear combobox"
-                            onClick={event => {
-                                event.stopPropagation();
-                                props.onClear();
-                                toggleRef.current?.focus();
-                            }}
-                        >
-                            <Cross />
-                        </div>
-                    )}
+                    <ClearButton
+                        cls={cls}
+                        onClick={() => {
+                            props.onClear();
+                            toggleRef.current?.focus();
+                        }}
+                        visible={showClear}
+                    />
                     <Arrow className={cls.stateIcon} />
                 </div>
             </button>