✨(react) add async mode to Select

.gitignore

@@ -27,6 +27,7 @@ dist
 *.njsproj
 *.sln
 *.sw?
+*.tool-versions
 
 vite.config.ts.timestamp-*
 env.d

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @openfun/cunningham-react
 
+## 2.10.0
+
+### Minor Changes
+
+- 0b45f51: add async option fetching mode to select mono
+
 ## 2.9.4
 
 ### Patch Changes
@@ -425,6 +431,8 @@
 - 4ebbf16: Add component's tokens handling
 
 [unreleased]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]
+[2.10.0]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]...@openfun/[email protected]
+[2.9.4]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]...@openfun/[email protected]
 [2.9.3]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]...@openfun/[email protected]
 [2.9.2]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]...@openfun/[email protected]
 [2.9.1]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]...@openfun/[email protected]

packages/react/src/components/Forms/Select/_index.scss

@@ -3,6 +3,15 @@
 .c__select {
   position: relative;
 
+  &__loader {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    cursor: wait;
+  }
+
   &__wrapper {
     border-radius: var(--c--components--forms-select--border-radius);
     border-width: var(--c--components--forms-select--border-width);
@@ -99,6 +108,10 @@
       }
       &__open {
         color: var(--c--theme--colors--greyscale-900);
+
+        &--hidden {
+          display: none;
+        }
       }
     }
   }

packages/react/src/components/Forms/Select/index.tsx

@@ -23,6 +23,14 @@ export type OptionWithoutRender = Omit<BaseOption, "value" | "render"> & {
 
 export type Option = OptionWithoutRender | OptionWithRender;
 
+export type ContextCallbackFetchOptions = {
+  search?: string | number;
+};
+
+export type CallbackFetchOptions = (
+  context: ContextCallbackFetchOptions,
+) => Promise<Option[]>;
+
 export interface SelectHandle {
   blur: () => void;
 }
@@ -31,7 +39,7 @@ export type SelectProps = PropsWithChildren &
   FieldProps & {
     label: string;
     hideLabel?: boolean;
-    options: Option[];
+    options: Option[] | CallbackFetchOptions;
     searchable?: boolean;
     name?: string;
     defaultValue?: string | number | string[];
@@ -45,6 +53,7 @@ export type SelectProps = PropsWithChildren &
     disabled?: boolean;
     clearable?: boolean;
     multi?: boolean;
+    isLoading?: boolean;
     showLabelWhenSelected?: boolean;
     monoline?: boolean;
     selectedItemsStyle?: "pills" | "text";
@@ -63,6 +72,10 @@ export const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   return props.multi ? (
     <SelectMulti {...props} ref={ref} />
   ) : (
-    <SelectMono {...props} ref={ref} />
+    <SelectMono
+      {...props}
+      ref={ref}
+      value={Array.isArray(props.value) ? undefined : props.value}
+    />
   );
 });

packages/react/src/components/Forms/Select/mono-common.tsx

@@ -8,6 +8,7 @@ import { Button } from ":/components/Button";
 import { Option, SelectProps } from ":/components/Forms/Select";
 import { isOptionWithRender } from ":/components/Forms/Select/utils";
 import { SelectMenu } from ":/components/Forms/Select/select-menu";
+import { UpdateArrayOptionsType } from ":/components/Forms/Select/mono-searchable";
 
 export function getOptionsFilter(inputValue?: string) {
   return (option: Option) => {
@@ -53,6 +54,7 @@ export interface SubProps extends SelectProps {
 export interface SelectAuxProps extends SubProps {
   options: Option[];
   labelAsPlaceholder: boolean;
+  updateArrayOptions?: UpdateArrayOptionsType;
   downshiftReturn: {
     isOpen: boolean;
     wrapperProps?: HTMLAttributes<HTMLDivElement>;
@@ -84,12 +86,16 @@ export const SelectMonoAux = ({
   disabled,
   clearable = true,
   onBlur,
+  updateArrayOptions,
   ...props
 }: SelectAuxProps) => {
   const { t } = useCunningham();
   const labelProps = downshiftReturn.getLabelProps();
   const ref = useRef<HTMLDivElement>(null);
 
+  const isToReset =
+    !props.isLoading && clearable && !disabled && downshiftReturn.selectedItem;
+
   return (
     <>
       <Field state={state} {...props}>
@@ -135,7 +141,7 @@ export const SelectMonoAux = ({
               <div className="c__select__inner">
                 <div className="c__select__inner__value">{children}</div>
                 <div className="c__select__inner__actions">
-                  {clearable && !disabled && downshiftReturn.selectedItem && (
+                  {isToReset && (
                     <>
                       <Button
                         color="tertiary-text"
@@ -146,6 +152,9 @@ export const SelectMonoAux = ({
                         className="c__select__inner__actions__clear"
                         onClick={(e) => {
                           downshiftReturn.selectItem(null);
+                          if (typeof updateArrayOptions === "function") {
+                            updateArrayOptions(undefined);
+                          }
                           e.stopPropagation();
                         }}
                         icon={<span className="material-icons">close</span>}
@@ -158,7 +167,9 @@ export const SelectMonoAux = ({
                   <Button
                     color="tertiary-text"
                     size="nano"
-                    className="c__select__inner__actions__open"
+                    className={`c__select__inner__actions__open 
+                      c__select__inner__actions__open${props.isLoading ? "--hidden" : ""}
+                    `}
                     icon={
                       <span
                         className={classNames("material-icons", {