fix: fixed transitions selects

tremorlabs · Nov 5, 2023 · a29bb70 · a29bb70
1 parent 7e2b41e
commit a29bb70
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 40 deletions.
diff --git a/src/components/input-elements/DatePicker/DatePicker.tsx b/src/components/input-elements/DatePicker/DatePicker.tsx
@@ -151,6 +151,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
         </button>
       ) : null}
       <Transition
+        className="absolute z-10 min-w-min left-0"
         enter="transition ease duration-100 transform"
         enterFrom="opacity-0 -translate-y-4"
         enterTo="opacity-100 translate-y-0"
@@ -161,7 +162,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
         <Popover.Panel
           className={tremorTwMerge(
             // common
-            "absolute z-10 divide-y overflow-y-auto min-w-min left-0 outline-none rounded-tremor-default p-3",
+            "divide-y overflow-y-auto outline-none rounded-tremor-default p-3",
             // light
             "bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
             // dark

diff --git a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
@@ -242,6 +242,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
           ) : null}
         </div>
         <Transition
+          className="absolute z-10 min-w-min left-0"
           enter="transition ease duration-100 transform"
           enterFrom="opacity-0 -translate-y-4"
           enterTo="opacity-100 translate-y-0"
@@ -253,7 +254,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
             focus={true}
             className={tremorTwMerge(
               // common
-              "absolute z-10 divide-y overflow-y-auto min-w-min left-0 outline-none rounded-tremor-default p-3",
+              "divide-y overflow-y-auto outline-none rounded-tremor-default p-3",
               // light
               "bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
               // dark
@@ -329,6 +330,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
                 {value ? valueToNameMapping.get(value) ?? selectPlaceholder : selectPlaceholder}
               </Listbox.Button>
               <Transition
+                className="absolute z-10 w-full inset-x-0 right-0"
                 enter="transition ease duration-100 transform"
                 enterFrom="opacity-0 -translate-y-4"
                 enterTo="opacity-100 translate-y-0"
@@ -339,7 +341,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
                 <Listbox.Options
                   className={tremorTwMerge(
                     // common
-                    "absolute z-10 divide-y overflow-y-auto w-full inset-x-0 right-0 outline-none",
+                    "divide-y overflow-y-auto outline-none",
                     // light
                     "shadow-tremor-dropdown bg-tremor-background border-tremor-border divide-tremor-border rounded-tremor-default",
                     // dark

diff --git a/src/components/input-elements/MultiSelect/MultiSelect.tsx b/src/components/input-elements/MultiSelect/MultiSelect.tsx
@@ -229,6 +229,7 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>((props, r
             </button>
           ) : null}
           <Transition
+            className="absolute z-10 max-h-[228px] w-full left-0 "
             enter="transition ease duration-100 transform"
             enterFrom="opacity-0 -translate-y-4"
             enterTo="opacity-100 translate-y-0"
@@ -239,7 +240,7 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>((props, r
             <Listbox.Options
               className={tremorTwMerge(
                 // common
-                "absolute z-10 divide-y overflow-y-auto max-h-[228px] w-full left-0 outline-none rounded-tremor-default",
+                "divide-y overflow-y-auto outline-none rounded-tremor-default",
                 // light
                 "bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
                 // dark

diff --git a/src/components/input-elements/SearchSelect/SearchSelect.tsx b/src/components/input-elements/SearchSelect/SearchSelect.tsx
@@ -174,6 +174,7 @@ const SearchSelect = React.forwardRef<HTMLDivElement, SearchSelectProps>((props,
           ) : null}
           {filteredOptions.length > 0 && (
             <Transition
+              className="absolute z-10 max-h-[228px] w-full left-0"
               enter="transition ease duration-100 transform"
               enterFrom="opacity-0 -translate-y-4"
               enterTo="opacity-100 translate-y-0"
@@ -184,7 +185,7 @@ const SearchSelect = React.forwardRef<HTMLDivElement, SearchSelectProps>((props,
               <Combobox.Options
                 className={tremorTwMerge(
                   // common
-                  "absolute z-10 divide-y overflow-y-auto max-h-[228px] w-full left-0 outline-none rounded-tremor-default text-tremor-default",
+                  "divide-y overflow-y-auto outline-none rounded-tremor-default text-tremor-default",
                   // light
                   "bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
                   // dark

diff --git a/src/components/input-elements/Select/Select.tsx b/src/components/input-elements/Select/Select.tsx
@@ -156,6 +156,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
             </button>
           ) : null}
           <Transition
+            className="absolute z-10 max-h-[228px] w-full left-0"
             enter="transition ease duration-100 transform"
             enterFrom="opacity-0 -translate-y-4"
             enterTo="opacity-100 translate-y-0"
@@ -166,7 +167,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
             <Listbox.Options
               className={tremorTwMerge(
                 // common
-                "absolute z-10 divide-y overflow-y-auto max-h-[228px] w-full left-0 outline-none rounded-tremor-default",
+                "divide-y overflow-y-auto outline-none rounded-tremor-default",
                 // light
                 "bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
                 // dark

diff --git a/src/stories/input-elements/DatePicker.stories.tsx b/src/stories/input-elements/DatePicker.stories.tsx
@@ -32,6 +32,7 @@ function Controlled({ ...args }) {
   const [value, setValue] = useState<Date | undefined>(args.value!);
   return (
     <div className="space-y-4">
+      <DatePicker {...args} value={value} onValueChange={(v: Date | undefined) => setValue(v)} />
       <DatePicker {...args} value={value} onValueChange={(v: Date | undefined) => setValue(v)} />
       <Button
         onClick={() => {

diff --git a/src/stories/input-elements/DateRangePicker.stories.tsx b/src/stories/input-elements/DateRangePicker.stories.tsx
@@ -90,6 +90,7 @@ function Controlled({ ...args }) {
 
   return (
     <div className="space-y-4">
+      <DateRangePicker {...args} value={value} onValueChange={(v) => setValue(v)} />
       <DateRangePicker {...args} value={value} onValueChange={(v) => setValue(v)} />
       <Button
         onClick={() => {

diff --git a/src/stories/input-elements/helpers/SimpleMultiSelect.tsx b/src/stories/input-elements/helpers/SimpleMultiSelect.tsx
@@ -10,25 +10,47 @@ export const SimpleMultiSelect = (args: any) => (
   </MultiSelect>
 );
 
-export const SimpleMultiSelectControlled = (args: any) => {
+export const SimpleMultiSelectControlled = () => {
   const [value, setValue] = React.useState<string[]>([]);
+
+  const handleValueChange = (values: string[]) => {
+    setValue(values);
+    // You can perform any additional actions here when the value changes.
+  };
+
+  const handleReset = () => {
+    setValue([]);
+  };
+
+  const handleSetToOne = () => {
+    setValue(["1"]);
+  };
+
   return (
-    <>
+    <div>
+      <MultiSelect
+        value={value}
+        onValueChange={handleValueChange}
+        // Add any other props you need
+      >
+        <MultiSelectItem value={"5"}>Five</MultiSelectItem>
+        <MultiSelectItem value={"3"}>Three</MultiSelectItem>
+        <MultiSelectItem value={"1"}>One</MultiSelectItem>
+      </MultiSelect>
       <MultiSelect
         value={value}
-        onValueChange={(values) => {
-          setValue(values);
-          alert(values);
-        }}
-        {...args}
+        onValueChange={handleValueChange}
+        // Add any other props you need
       >
         <MultiSelectItem value={"5"}>Five</MultiSelectItem>
         <MultiSelectItem value={"3"}>Three</MultiSelectItem>
         <MultiSelectItem value={"1"}>One</MultiSelectItem>
       </MultiSelect>
-      <Button onClick={() => setValue([])}>Reset</Button>
-      <Button onClick={() => setValue(["1"])}>Set to One</Button>
-      <p>value: {value}</p>
-    </>
+      <Button onClick={handleReset}>Reset</Button>
+      <Button onClick={handleSetToOne}>Set to One</Button>
+      <p>value: {value.join(", ")}</p>
+    </div>
   );
 };
+
+export default SimpleMultiSelectControlled;
diff --git a/src/stories/input-elements/helpers/SimpleSearchSelect.tsx b/src/stories/input-elements/helpers/SimpleSearchSelect.tsx
@@ -19,6 +19,20 @@ export const SimpleSearchSelectControlled = (args: any) => {
   const [value, setValue] = React.useState<string>("5");
   return (
     <div className="space-y-4">
+      <SearchSelect
+        value={value}
+        onValueChange={(value) => {
+          setValue(value);
+          alert(value);
+        }}
+        {...args}
+      >
+        <SearchSelectItem value={"5"}>Five</SearchSelectItem>
+        <SearchSelectItem value={"3"}>Three</SearchSelectItem>
+        <SearchSelectItem value={"1"}>One</SearchSelectItem>
+        <SearchSelectItem value={"30"}>Thirty</SearchSelectItem>
+        <SearchSelectItem value={"33"}>Thirtythree</SearchSelectItem>
+      </SearchSelect>
       <SearchSelect
         value={value}
         onValueChange={(value) => {

diff --git a/src/stories/input-elements/helpers/SimpleSelect.tsx b/src/stories/input-elements/helpers/SimpleSelect.tsx
@@ -17,32 +17,51 @@ export const SimpleSelect = (args: any) => (
   </Select>
 );
 
-export const SimpleSelectControlled = (args: any) => {
-  const [value, setValue] = React.useState<string>("5");
+export function SimpleSelectControlled() {
+  const [value, setValue] = React.useState("5");
+
+  const handleValueChange = (newValue: string) => {
+    setValue(newValue);
+    alert(newValue);
+  };
+
+  const handleReset = () => {
+    setValue("");
+  };
+
+  const handleSetToOne = () => {
+    setValue("1");
+  };
+
   return (
     <div className="space-y-4">
-      <Select
-        value={value}
-        onValueChange={(value) => {
-          setValue(value);
-          alert(value);
-        }}
-        {...args}
-      >
-        <SelectItem value={"1"}>One</SelectItem>
-        <SelectItem value={"2"}>Two</SelectItem>
-        <SelectItem value={"3"}>Three</SelectItem>
-        <SelectItem value={"4"}>Four</SelectItem>
-        <SelectItem value={"5"}>Five</SelectItem>
-        <SelectItem value={"6"}>Six</SelectItem>
-        <SelectItem value={"7"}>Seven</SelectItem>
-        <SelectItem value={"8"}>Eight</SelectItem>
-        <SelectItem value={"9"}>Nine</SelectItem>
-        <SelectItem value={"10"}>Ten</SelectItem>
+      <Select value={value} onValueChange={handleValueChange}>
+        <SelectItem value="1">One</SelectItem>
+        <SelectItem value="2">Two</SelectItem>
+        <SelectItem value="3">Three</SelectItem>
+        <SelectItem value="4">Four</SelectItem>
+        <SelectItem value="5">Five</SelectItem>
+        <SelectItem value="6">Six</SelectItem>
+        <SelectItem value="7">Seven</SelectItem>
+        <SelectItem value="8">Eight</SelectItem>
+        <SelectItem value="9">Nine</SelectItem>
+        <SelectItem value="10">Ten</SelectItem>
+      </Select>
+      <Select value={value} onValueChange={handleValueChange}>
+        <SelectItem value="1">One</SelectItem>
+        <SelectItem value="2">Two</SelectItem>
+        <SelectItem value="3">Three</SelectItem>
+        <SelectItem value="4">Four</SelectItem>
+        <SelectItem value="5">Five</SelectItem>
+        <SelectItem value="6">Six</SelectItem>
+        <SelectItem value="7">Seven</SelectItem>
+        <SelectItem value="8">Eight</SelectItem>
+        <SelectItem value="9">Nine</SelectItem>
+        <SelectItem value="10">Ten</SelectItem>
       </Select>
-      <Button onClick={() => setValue("")}>Reset</Button>
-      <Button onClick={() => setValue("1")}>Set to One</Button>
+      <Button onClick={handleReset}>Reset</Button>
+      <Button onClick={handleSetToOne}>Set to One</Button>
       <p>value: {value}</p>
     </div>
   );
-};
+}