fix(common): select and dual list select types

Author: Hyperkid123

packages/common/src/dual-list-select/dual-list-select.tsx

@@ -15,14 +15,19 @@ interface DualListSelectComponentProps<T = OptionValue> {
   handleMoveLeft: () => void;
   handleClearLeftValues: () => void;
   handleClearRightValues: () => void;
-  filterOptions?: (options: SelectOption<T>[], filterValue: string) => SelectOption<T>[];
+  filterOptions?: (options: SelectOption<T>[], filterValue: string) => SelectOption<T>[] | ((value: string) => void);
   filterValue?: string;
   filterValueText?: string;
   filterPlaceholder?: string;
   filterOptionsText?: string;
   filterValuePlaceholder?: string;
   noOptionsText?: string;
   noValueText?: string;
+  // Missing props that are actually used in implementation
+  sortOptions: () => void;
+  sortValues: () => void;
+  filterValues: (value: string) => void;
+  state: DualListSelectState<T>;
   [key: string]: unknown;
 }
 

packages/common/src/select/flat-options.ts

@@ -1,22 +1,14 @@
 import { ReactNode } from "react";
+import { FlatSelectOption, OptionValue } from '../types/shared-types';
 
-interface Option {
+export interface Option {
     label: string | ReactNode;
     value: any;
     selectAll?: boolean;
     selectNone?: boolean;
 }
 
-interface ResultedOption {
-    label?: string | ReactNode;
-    value?: any;
-    selectAll?: boolean;
-    selectNone?: boolean;
-    group?: string | ReactNode;
-    divider?: boolean;
-}
-
-interface Options {
+export interface Options {
     label?: string | ReactNode;
     value?: any;
     divider?: boolean;
@@ -25,8 +17,8 @@ interface Options {
     options?: Option[];
 }
 
-const flatOptions = (options: Options[]): ResultedOption[] =>
-    options.flatMap((option) => (option.options ? [{ group: option.label }, ...option.options.map(opt => opt as ResultedOption)] : [option as ResultedOption]));
+const flatOptions = <T extends OptionValue = OptionValue>(options: Options[]): FlatSelectOption<T>[] =>
+    options.flatMap((option) => (option.options ? [{ group: option.label } as FlatSelectOption<T>, ...option.options.map(opt => opt as FlatSelectOption<T>)] : [option as FlatSelectOption<T>]));
 
 export default flatOptions;
-export type { Option, ResultedOption, Options };
+export type ResultedOption = FlatSelectOption;

packages/common/src/select/select.tsx

@@ -5,7 +5,7 @@ import { AnyObject } from "@data-driven-forms/react-form-renderer";
 import clsx from 'clsx';
 import useSelect from '../use-select/use-select';
 import deepEqual from './deep-equal';
-import { SelectOption, OptionValue, SelectValue } from '../types/shared-types';
+import { SelectOption, OptionValue, SelectValue, FlatSelectOption } from '../types/shared-types';
 
 export interface SelectProps<T = OptionValue> {
   options?: SelectOption<T>[];
@@ -26,12 +26,17 @@ export interface SelectProps<T = OptionValue> {
   selectVariant?: string;
   updatingMessage?: React.ReactNode;
   noOptionsMessage?: React.ReactNode;
+  noResultsMessage?: React.ReactNode;
   isSearchable?: boolean;
   isClearable?: boolean;
   SelectComponent?: React.ComponentType<AnyObject>;
   noValueUpdates?: boolean;
-  optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[];
+  optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[];
   compareValues?: (valueA: T, valueB: T) => boolean;
+  menuIsPortal?: boolean;
+  menuPortalTarget?: Element;
+  showMoreLabel?: string;
+  showLessLabel?: string;
 }
 
 const Select = <T extends OptionValue = OptionValue>({

packages/common/src/use-select/reducer.ts

@@ -1,29 +1,29 @@
 import { AnyObject } from '@data-driven-forms/react-form-renderer';
-import { SelectOption, OptionValue } from '../types/shared-types';
+import { SelectOption, OptionValue, FlatSelectOption } from '../types/shared-types';
 
 export interface SelectState<T = OptionValue> {
   isLoading: boolean;
-  options: SelectOption<T>[];
+  options: (SelectOption<T> | FlatSelectOption<T>)[];
   promises: AnyObject;
   isInitialLoaded: boolean;
-  originalOptions?: SelectOption<T>[];
+  originalOptions?: (SelectOption<T> | FlatSelectOption<T>)[];
 }
 
 interface InitProps<T = OptionValue> {
   propsOptions: SelectOption<T>[];
-  optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[];
+  optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[];
 }
 
 type ReducerAction<T = OptionValue> =
-  | { type: 'updateOptions'; payload: SelectOption<T>[]; optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[] }
+  | { type: 'updateOptions'; payload: SelectOption<T>[]; optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[] }
   | { type: 'startLoading' }
-  | { type: 'setOptions'; payload: SelectOption<T>[]; optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[] }
+  | { type: 'setOptions'; payload: SelectOption<T>[]; optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[] }
   | { type: 'initialLoaded' }
   | {
       type: 'setPromises';
       payload: AnyObject;
       options?: SelectOption<T>[];
-      optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[];
+      optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[];
       compareValues?: (value1: T, value2: T) => boolean;
     };
 

packages/common/src/use-select/use-select.ts

@@ -6,11 +6,11 @@ import { AnyObject } from '@data-driven-forms/react-form-renderer';
 import useIsMounted from '../hooks/use-is-mounted';
 import reducer, { init, SelectState } from './reducer';
 import fnToString from '../utils/fn-to-string';
-import { SelectOption, OptionValue, SelectValue } from '../types/shared-types';
+import { SelectOption, OptionValue, SelectValue, FlatSelectOption } from '../types/shared-types';
 
 interface UseSelectProps<T = OptionValue> {
     loadOptions?: (inputValue?: string) => Promise<SelectOption<T>[]>;
-    optionsTransformer?: (options: AnyObject[]) => SelectOption<T>[];
+    optionsTransformer?: (options: AnyObject[]) => FlatSelectOption<T>[];
     options?: SelectOption<T>[];
     noValueUpdates?: boolean;
     onChange?: (value?: SelectValue<T>) => void;
@@ -27,8 +27,8 @@ const getSelectValue = <T extends OptionValue>(
   stateValue: SelectValue<T>,
   simpleValue: boolean,
   isMulti: boolean,
-  allOptions: SelectOption<T>[]
-): SelectOption<T>[] | SelectValue<T> => {
+  allOptions: (SelectOption<T> | FlatSelectOption<T>)[]
+): (SelectOption<T> | FlatSelectOption<T>)[] | SelectValue<T> => {
   let enhancedValue = stateValue;
 
   let hasSelectAll = isMulti && allOptions.find(({ selectAll }) => selectAll);
@@ -62,7 +62,7 @@ const handleSelectChange = <T extends OptionValue>(
   simpleValue: boolean,
   isMulti: boolean,
   onChange: (value?: SelectValue<T>) => void,
-  allOptions: SelectOption<T>[],
+  allOptions: (SelectOption<T> | FlatSelectOption<T>)[],
   removeSelectAll: boolean,
   removeSelectNone: boolean
 ): void => {