chore: multi select never has empty item

Author: r0b1n

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

@@ -14,6 +14,7 @@ function Preview(props: DatagridDropdownFilterPreviewProps): ReactElement {
             options={[]}
             empty={!props.clearable}
             clearable={props.clearable}
+            showCheckboxes={false}
             value={getPreviewValue(props)}
             onClear={noop}
             useSelectProps={() => ({ items: [] })}

packages/shared/widget-plugin-dropdown-filter/src/controllers/mixins/SelectControllerMixin.ts

@@ -41,6 +41,9 @@ export function SelectControllerMixin<TBase extends BaseController>(Base: TBase)
         }
 
         get options(): OptionWithState[] {
+            if (this.multiselect) {
+                return this.filterStore.options;
+            }
             return [this.emptyOption, ...this.filterStore.options];
         }
 

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

@@ -18,8 +18,7 @@ type OptionsWrapperProps = {
     isOpen: boolean;
     options: OptionWithState[];
     highlightedIndex: number;
-    showCheckboxes?: boolean;
-    haveEmptyFirstOption?: boolean;
+    showCheckboxes: boolean;
 } & (
     | Pick<UseComboboxPropGetters<OptionWithState>, "getMenuProps" | "getItemProps">
     | Pick<UseSelectPropGetters<OptionWithState>, "getMenuProps" | "getItemProps">
@@ -28,17 +27,7 @@ type OptionsWrapperProps = {
 const noop = (): void => {};
 
 export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefObject<HTMLDivElement>): ReactElement => {
-    const {
-        cls,
-        style,
-        onMenuScroll,
-        isOpen,
-        highlightedIndex,
-        showCheckboxes,
-        haveEmptyFirstOption,
-        getMenuProps,
-        getItemProps
-    } = props;
+    const { cls, style, onMenuScroll, isOpen, highlightedIndex, showCheckboxes, getMenuProps, getItemProps } = props;
     return (
         <div className={cls.popover} hidden={!isOpen} ref={ref} style={style}>
             <div className={cls.menuSlot}>
@@ -54,19 +43,15 @@ export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefOb
                             >
                                 {showCheckboxes && (
                                     <span className={cls.checkboxSlot}>
-                                        {haveEmptyFirstOption && index === 0 ? (
-                                            <div style={{ width: 16, height: 16 }} />
-                                        ) : (
-                                            <input
-                                                className={props.cls.checkbox}
-                                                role="presentation"
-                                                type="checkbox"
-                                                checked={item.selected}
-                                                value={item.caption}
-                                                onChange={noop}
-                                                tabIndex={-1}
-                                            />
-                                        )}
+                                        <input
+                                            className={props.cls.checkbox}
+                                            role="presentation"
+                                            type="checkbox"
+                                            checked={item.selected}
+                                            value={item.caption}
+                                            onChange={noop}
+                                            tabIndex={-1}
+                                        />
                                     </span>
                                 )}
                                 {item.caption}

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

@@ -69,7 +69,6 @@ export const Combobox = observer(function Combobox(props: ComboboxProps) {
                 options={props.options}
                 highlightedIndex={highlightedIndex}
                 showCheckboxes={false}
-                haveEmptyFirstOption={false}
                 getMenuProps={getMenuProps}
                 getItemProps={getItemProps}
             />

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

@@ -14,7 +14,7 @@ interface SelectProps {
     clearable: boolean;
     empty: boolean;
     className?: string;
-    showCheckboxes?: boolean;
+    showCheckboxes: boolean;
     style?: React.CSSProperties;
     useSelectProps: () => UseSelectProps<OptionWithState>;
     onClear: () => void;
@@ -72,7 +72,6 @@ export const Select = observer(function Select(props: SelectProps): React.ReactE
                 options={props.options}
                 highlightedIndex={highlightedIndex}
                 showCheckboxes={showCheckboxes}
-                haveEmptyFirstOption
                 getMenuProps={getMenuProps}
                 getItemProps={getItemProps}
             />

packages/shared/widget-plugin-dropdown-filter/src/controls/tag-picker/TagPicker.tsx

@@ -123,7 +123,6 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
                 options={props.options}
                 highlightedIndex={highlightedIndex}
                 showCheckboxes={showCheckboxes}
-                haveEmptyFirstOption={false}
                 getMenuProps={getMenuProps}
                 getItemProps={getItemProps}
             />