feat(common): allow to flat options

Author: rvsia

packages/common/src/select/reducer.js

@@ -1,9 +1,11 @@
+export const flatOptions = (options) => options.flatMap((option) => (option.options ? [{ group: option.label }, ...option.options] : [option]));
+
 const reducer = (state, { type, payload, options = [] }) => {
   switch (type) {
     case 'updateOptions':
       return {
         ...state,
-        options: payload,
+        options: state.useFlatOptions ? flatOptions(payload) : payload,
         isLoading: false,
         promises: {},
       };
@@ -15,7 +17,7 @@ const reducer = (state, { type, payload, options = [] }) => {
     case 'setOptions':
       return {
         ...state,
-        options: payload,
+        options: state.useFlatOptions ? flatOptions(payload) : payload,
       };
     case 'initialLoaded':
       return {
@@ -29,7 +31,9 @@ const reducer = (state, { type, payload, options = [] }) => {
           ...state.promises,
           ...payload,
         },
-        options: [...state.options, ...options.filter(({ value }) => !state.options.find((option) => option.value === value))],
+        options: state.useFlatOptions
+          ? flatOptions([...state.options, ...options.filter(({ value }) => !state.options.find((option) => option.value === value))])
+          : [...state.options, ...options.filter(({ value }) => !state.options.find((option) => option.value === value))],
       };
     default:
       return state;

packages/common/src/select/select.d.ts

@@ -28,6 +28,7 @@ export interface SelectProps {
   isSearchable?: boolean;
   SelectComponent?: React.ComponentType;
   noValueUpdates?: boolean;
+  useFlatOptions?: boolean;
 }
 
 declare const Select: React.ComponentType<SelectProps>;

packages/common/src/select/select.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import isEqual from 'lodash/isEqual';
 import fnToString from '../utils/fn-to-string';
-import reducer from './reducer';
+import reducer, { flatOptions } from './reducer';
 import useIsMounted from '../hooks/use-is-mounted';
 
 const getSelectValue = (stateValue, simpleValue, isMulti, allOptions) => {
@@ -73,11 +73,13 @@ const Select = ({
   loadOptionsChangeCounter,
   SelectComponent,
   noValueUpdates,
+  useFlatOptions,
   ...props
 }) => {
   const [state, dispatch] = useReducer(reducer, {
     isLoading: false,
-    options: propsOptions,
+    options: useFlatOptions ? flatOptions(propsOptions) : propsOptions,
+    useFlatOptions,
     promises: {},
     isInitialLoaded: false,
   });
@@ -220,6 +222,7 @@ Select.propTypes = {
   isSearchable: PropTypes.bool,
   SelectComponent: PropTypes.elementType.isRequired,
   noValueUpdates: PropTypes.bool,
+  useFlatOptions: PropTypes.bool,
 };
 
 Select.defaultProps = {