From 3d9557f9e6f781485ff7d4a92c61a721b8bbb6a2 Mon Sep 17 00:00:00 2001
From: mbauchet <maximebauchet26@gmail.com>
Date: Sun, 30 Jul 2023 16:15:27 +0200
Subject: [PATCH 1/5] add number of months

---
 src/stories/input-elements/DateRangePicker.stories.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/stories/input-elements/DateRangePicker.stories.tsx b/src/stories/input-elements/DateRangePicker.stories.tsx
index 2cfadc7b0..424e98482 100644
--- a/src/stories/input-elements/DateRangePicker.stories.tsx
+++ b/src/stories/input-elements/DateRangePicker.stories.tsx
@@ -199,3 +199,8 @@ UncontrolledWithoutAllowClear.args = {
   defaultValue: { from: new Date(2022, 10, 1), to: new Date() },
   enableClear: false,
 };
+
+export const WithNumberOfMonths = UncontrolledTemplate.bind({});
+WithNumberOfMonths.args = {
+    numberOfMonths: 2
+};
\ No newline at end of file

From 75a94273f81ee65450e0b103ffcc913c697ecdc0 Mon Sep 17 00:00:00 2001
From: mbauchet <maximebauchet26@gmail.com>
Date: Sun, 30 Jul 2023 16:15:54 +0200
Subject: [PATCH 2/5] add number of mnths

---
 .../input-elements/DateRangePicker/DateRangePicker.tsx         | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
index b32bdda26..f792d5a14 100644
--- a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
+++ b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
@@ -48,6 +48,7 @@ export interface DateRangePickerProps
   locale?: Locale;
   enableClear?: boolean;
   enableYearNavigation?: boolean;
+  numberOfMonths?: number;
   children?: React.ReactElement[] | React.ReactElement;
 }
 
@@ -67,6 +68,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
     children,
     className,
     enableYearNavigation = false,
+    numberOfMonths = 1,
     ...other
   } = props;
 
@@ -242,6 +244,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
               from: selectedStartDate,
               to: selectedEndDate,
             }}
+            numberOfMonths={numberOfMonths ?? 1}
             onSelect={
               ((v: DateRange) => {
                 onValueChange?.({ from: v?.from, to: v?.to });

From 81b6fa133a808f8c235aaf57c80ff6f148d33019 Mon Sep 17 00:00:00 2001
From: mbauchet <maximebauchet26@gmail.com>
Date: Wed, 13 Sep 2023 17:37:33 +0200
Subject: [PATCH 3/5] remove number of month

---
 .../input-elements/DateRangePicker/DateRangePicker.tsx           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
index 5aad14d55..6fdba43b3 100644
--- a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
+++ b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
@@ -259,7 +259,6 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
               from: selectedStartDate,
               to: selectedEndDate,
             }}
-            numberOfMonths={1}
             onSelect={
               ((v: DateRange) => {
                 onValueChange?.({ from: v?.from, to: v?.to });

From abc3f897e2948e732b53a32264961c4d31f99dff Mon Sep 17 00:00:00 2001
From: mbauchet <maximebauchet26@gmail.com>
Date: Mon, 20 May 2024 09:50:35 +0200
Subject: [PATCH 4/5] fix select zIndex + add autocomplete props to
 searchselect

---
 .../input-elements/MultiSelect/MultiSelect.tsx   |  2 +-
 .../input-elements/SearchSelect/SearchSelect.tsx | 16 ++++++++++------
 src/components/input-elements/Select/Select.tsx  |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/input-elements/MultiSelect/MultiSelect.tsx b/src/components/input-elements/MultiSelect/MultiSelect.tsx
index 524523c3a..a25ea6582 100644
--- a/src/components/input-elements/MultiSelect/MultiSelect.tsx
+++ b/src/components/input-elements/MultiSelect/MultiSelect.tsx
@@ -87,7 +87,7 @@ const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props,
       <select
         title="multi-select-hidden"
         required={required}
-        className={tremorTwMerge("h-full w-full absolute left-0 top-0 z-0 opacity-0")}
+        className={tremorTwMerge("h-full w-full absolute left-0 top-0 -z-10 opacity-0")}
         value={selectedValue}
         onChange={(e) => {
           e.preventDefault();
diff --git a/src/components/input-elements/SearchSelect/SearchSelect.tsx b/src/components/input-elements/SearchSelect/SearchSelect.tsx
index 3c3e6d096..bb506b8fc 100644
--- a/src/components/input-elements/SearchSelect/SearchSelect.tsx
+++ b/src/components/input-elements/SearchSelect/SearchSelect.tsx
@@ -28,6 +28,7 @@ export interface SearchSelectProps extends React.HTMLAttributes<HTMLInputElement
   errorMessage?: string;
   enableClear?: boolean;
   children: React.ReactNode;
+  autoComplete?: string;
 }
 
 const makeSelectClassName = makeClassName("SearchSelect");
@@ -50,9 +51,10 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
     children,
     className,
     id,
+    autoComplete = "off",
     ...other
   } = props;
-  const comboboxButtonRef = useRef<HTMLButtonElement | null>(null);
+  const comboboxInputRef = useRef<HTMLInputElement | null>(null);
 
   const [searchQuery, setSearchQuery] = useInternalState("", searchValue);
   const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);
@@ -88,7 +90,7 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
       <select
         title="search-select-hidden"
         required={required}
-        className={tremorTwMerge("h-full w-full absolute left-0 top-0 z-0 opacity-0")}
+        className={tremorTwMerge("h-full w-full absolute left-0 top-0 -z-10 opacity-0")}
         value={selectedValue}
         onChange={(e) => {
           e.preventDefault();
@@ -97,8 +99,8 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
         disabled={disabled}
         id={id}
         onFocus={() => {
-          const comboboxButton = comboboxButtonRef.current;
-          if (comboboxButton) comboboxButton.click();
+          const comboboxButton = comboboxInputRef.current;
+          if (comboboxButton) comboboxButton.focus();
         }}
       >
         <option className="hidden" value="" disabled hidden>
@@ -131,7 +133,7 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
       >
         {({ value }) => (
           <>
-            <Combobox.Button ref={comboboxButtonRef} className="w-full">
+            <Combobox.Button className="w-full">
               {Icon && (
                 <span
                   className={tremorTwMerge(
@@ -153,6 +155,7 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
               )}
 
               <Combobox.Input
+                ref={comboboxInputRef}
                 className={tremorTwMerge(
                   // common
                   "w-full outline-none text-left whitespace-nowrap truncate rounded-tremor-default focus:ring-2 transition duration-100 text-tremor-default pr-14 border py-2",
@@ -172,7 +175,8 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
                   setSearchQuery(event.target.value);
                 }}
                 displayValue={(value: string) => valueToNameMapping.get(value) ?? ""}
-                autoComplete="off"
+                autoComplete={autoComplete}
+                required={false}
               />
               <div className={tremorTwMerge("absolute inset-y-0 right-0 flex items-center pr-2.5")}>
                 <ArrowDownHeadIcon
diff --git a/src/components/input-elements/Select/Select.tsx b/src/components/input-elements/Select/Select.tsx
index 01338b457..b4a242233 100644
--- a/src/components/input-elements/Select/Select.tsx
+++ b/src/components/input-elements/Select/Select.tsx
@@ -70,7 +70,7 @@ const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
       <select
         title="select-hidden"
         required={required}
-        className={tremorTwMerge("h-full w-full absolute left-0 top-0 z-0 opacity-0")}
+        className={tremorTwMerge("h-full w-full absolute left-0 top-0 -z-10 opacity-0")}
         value={selectedValue}
         onChange={(e) => {
           e.preventDefault();

From 9ef72f807332e1910aae0dbb1af03043642f5e62 Mon Sep 17 00:00:00 2001
From: mbauchet <maximebauchet26@gmail.com>
Date: Mon, 20 May 2024 09:56:38 +0200
Subject: [PATCH 5/5] remove required false

---
 src/components/input-elements/SearchSelect/SearchSelect.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/input-elements/SearchSelect/SearchSelect.tsx b/src/components/input-elements/SearchSelect/SearchSelect.tsx
index bb506b8fc..24e5e84f1 100644
--- a/src/components/input-elements/SearchSelect/SearchSelect.tsx
+++ b/src/components/input-elements/SearchSelect/SearchSelect.tsx
@@ -99,8 +99,8 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
         disabled={disabled}
         id={id}
         onFocus={() => {
-          const comboboxButton = comboboxInputRef.current;
-          if (comboboxButton) comboboxButton.focus();
+          const comboboxInput = comboboxInputRef.current;
+          if (comboboxInput) comboboxInput.focus();
         }}
       >
         <option className="hidden" value="" disabled hidden>
@@ -176,7 +176,6 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
                 }}
                 displayValue={(value: string) => valueToNameMapping.get(value) ?? ""}
                 autoComplete={autoComplete}
-                required={false}
               />
               <div className={tremorTwMerge("absolute inset-y-0 right-0 flex items-center pr-2.5")}>
                 <ArrowDownHeadIcon