🎨(react) improve select mono-common code

- simplify the reading of the condition
displaying the clear button
- update CHANGELOG.md for release

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/mono-common.tsx

@@ -93,6 +93,9 @@ export const SelectMonoAux = ({
  const labelProps = downshiftReturn.getLabelProps();
  const ref = useRef<HTMLDivElement>(null);
 
+ const isToReset =
+ !props.isLoading && clearable && !disabled && downshiftReturn.selectedItem;
+
  return (
  <>
  <Field state={state} {...props}>
@@ -138,31 +141,28 @@ export const SelectMonoAux = ({
  <div className="c__select__inner">
  <div className="c__select__inner__value">{children}</div>
  <div className="c__select__inner__actions">
- {!props.isLoading &&
- clearable &&
- !disabled &&
- downshiftReturn.selectedItem && (
- <>
- <Button
- color="tertiary-text"
- size="nano"
- aria-label={t(
- "components.forms.select.clear_button_aria_label",
- )}
- 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>}
- type="button"
- />
- <div className="c__select__inner__actions__separator" />
- </>
- )}
+ {isToReset && (
+ <>
+ <Button
+ color="tertiary-text"
+ size="nano"
+ aria-label={t(
+ "components.forms.select.clear_button_aria_label",
+ )}
+ 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>}
+ type="button"
+ />
+ <div className="c__select__inner__actions__separator" />
+ </>
+ )}
 
  <Button
  color="tertiary-text"