From c11727976c242dd01f461cef6b0008622cfbb5ba Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Wed, 17 May 2023 16:02:19 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20clearable=20option=20t?=
 =?UTF-8?q?o=20Select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Based on a feedback given from another project, we want to be able
to disable the clear feature on the select.

Resolve #60
---
 .changeset/swift-shoes-tell.md                |  5 +++
 .../src/components/Forms/Select/index.mdx     |  8 ++++
 .../components/Forms/Select/index.spec.tsx    | 39 +++++++++++++++++++
 .../src/components/Forms/Select/index.tsx     |  4 +-
 .../components/Forms/Select/mono.stories.tsx  | 10 +++++
 5 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/swift-shoes-tell.md

diff --git a/.changeset/swift-shoes-tell.md b/.changeset/swift-shoes-tell.md
new file mode 100644
index 0000000..7ed0eb4
--- /dev/null
+++ b/.changeset/swift-shoes-tell.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add clearable option to Select
diff --git a/packages/react/src/components/Forms/Select/index.mdx b/packages/react/src/components/Forms/Select/index.mdx
index e84a44e..a3519db 100644
--- a/packages/react/src/components/Forms/Select/index.mdx
+++ b/packages/react/src/components/Forms/Select/index.mdx
@@ -75,6 +75,14 @@ By default, the select has a default width, like all inputs. But you can force i
   <Story id="components-forms-select-mono--full-width"/>
 </Canvas>
 
+## Clearable
+
+By default, the select is clearable ( the cross icon on the right is shown ). You can disable it by using the `clearable` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-select-mono--not-clearable"/>
+</Canvas>
+
 ## Controlled / Non Controlled
 
 Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below
diff --git a/packages/react/src/components/Forms/Select/index.spec.tsx b/packages/react/src/components/Forms/Select/index.spec.tsx
index 5c592d6..f18f1e3 100644
--- a/packages/react/src/components/Forms/Select/index.spec.tsx
+++ b/packages/react/src/components/Forms/Select/index.spec.tsx
@@ -1028,5 +1028,44 @@ describe("<Select/>", () => {
         city: null,
       });
     });
+
+    it("should not be clearable", async () => {
+      render(
+        <CunninghamProvider>
+          <Select
+            label="City"
+            options={[
+              {
+                label: "Paris",
+              },
+              {
+                label: "London",
+              },
+              {
+                label: "New York",
+              },
+              {
+                label: "Tokyo",
+              },
+            ]}
+            clearable={false}
+            defaultValue="Paris"
+          />
+        </CunninghamProvider>
+      );
+      screen.getByRole("combobox", {
+        name: "City",
+      });
+      const valueRendered = document.querySelector(".c__select__inner__value");
+
+      // Make sure default value is rendered.
+      expect(valueRendered).toHaveTextContent("Paris");
+      // Make sure the clear button is not rendered.
+      expect(
+        screen.queryByRole("button", {
+          name: "Clear selection",
+        })
+      ).not.toBeInTheDocument();
+    });
   });
 });
diff --git a/packages/react/src/components/Forms/Select/index.tsx b/packages/react/src/components/Forms/Select/index.tsx
index f3d8cc8..473bfbd 100644
--- a/packages/react/src/components/Forms/Select/index.tsx
+++ b/packages/react/src/components/Forms/Select/index.tsx
@@ -34,6 +34,7 @@ type Props = PropsWithChildren &
       target: { value: string | number | undefined };
     }) => void;
     disabled?: boolean;
+    clearable?: boolean;
   };
 
 function getOptionsFilter(inputValue?: string) {
@@ -96,6 +97,7 @@ const SelectAux = ({
   downshiftReturn,
   value,
   disabled,
+  clearable = true,
 }: SelectAuxProps) => {
   const { t } = useCunningham();
   const labelProps = downshiftReturn.getLabelProps();
@@ -148,7 +150,7 @@ const SelectAux = ({
             <div className="c__select__inner">
               <div className="c__select__inner__value">{children}</div>
               <div className="c__select__inner__actions">
-                {!disabled && downshiftReturn.selectedItem && (
+                {clearable && !disabled && downshiftReturn.selectedItem && (
                   <>
                     <Button
                       color="tertiary"
diff --git a/packages/react/src/components/Forms/Select/mono.stories.tsx b/packages/react/src/components/Forms/Select/mono.stories.tsx
index 79a116b..62762e9 100644
--- a/packages/react/src/components/Forms/Select/mono.stories.tsx
+++ b/packages/react/src/components/Forms/Select/mono.stories.tsx
@@ -155,6 +155,16 @@ export const FullWidth = {
   },
 };
 
+export const NotClearable = {
+  render: Template,
+  args: {
+    label: "Select a city",
+    options: OPTIONS,
+    defaultValue: OPTIONS[4].value,
+    clearable: false,
+  },
+};
+
 export const Success = {
   render: Template,