✨(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", {