fix: Add disabled dates and update transitions

tremorlabs · Oct 30, 2023 · cf9c78a · cf9c78a
1 parent 4e1f1a2
commit cf9c78a
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 71 deletions.
diff --git a/src/components/input-elements/DatePicker/DatePicker.tsx b/src/components/input-elements/DatePicker/DatePicker.tsx
@@ -36,6 +36,7 @@ export interface DatePickerProps
   displayFormat?: string;
   enableYearNavigation?: boolean;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  disabledDates?: Date[];
   children?: React.ReactElement[] | React.ReactElement;
 }
 
@@ -54,6 +55,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
     className,
     enableYearNavigation = false,
     weekStartsOn = 0,
+    disabledDates,
     ...other
   } = props;
 
@@ -63,8 +65,8 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
     const disabledDays = [];
     if (minDate) disabledDays.push({ before: minDate });
     if (maxDate) disabledDays.push({ after: maxDate });
-    return disabledDays;
-  }, [minDate, maxDate]);
+    return [...disabledDays, ...(disabledDates ?? [])];
+  }, [minDate, maxDate, disabledDates]);
 
   const formattedSelection = !selectedValue
     ? placeholder
@@ -149,12 +151,12 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
         </button>
       ) : null}
       <Transition
-        enter="transition duration-100 ease-out"
-        enterFrom="transform scale-95 opacity-0"
-        enterTo="transform scale-100 opacity-100"
-        leave="transition duration-75 ease-out"
-        leaveFrom="transform scale-100 opacity-100"
-        leaveTo="transform scale-95 opacity-0"
+        enter="transition ease duration-100 transform"
+        enterFrom="opacity-0 -translate-y-4"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease duration-100 transform"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 -translate-y-4"
       >
         <Popover.Panel
           className={tremorTwMerge(

diff --git a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
@@ -50,6 +50,7 @@ export interface DateRangePickerProps
   displayFormat?: string;
   enableYearNavigation?: boolean;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  disabledDates?: Date[];
   children?: React.ReactElement[] | React.ReactElement;
 }
 
@@ -71,6 +72,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
     className,
     enableYearNavigation = false,
     weekStartsOn = 0,
+    disabledDates,
     ...other
   } = props;
 
@@ -82,8 +84,8 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
     const disabledDays = [];
     if (minDate) disabledDays.push({ before: minDate });
     if (maxDate) disabledDays.push({ after: maxDate });
-    return disabledDays;
-  }, [minDate, maxDate]);
+    return [...disabledDays, ...(disabledDates ?? [])];
+  }, [minDate, maxDate, disabledDates]);
 
   const selectValues = useMemo(() => {
     const selectValues = new Map<
@@ -168,13 +170,13 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
       <Popover
         as="div"
         className={tremorTwMerge(
-          "w-full overflow-hidden",
+          "w-full",
           enableSelect ? "rounded-l-tremor-default" : "rounded-tremor-default",
           isCalendarButtonFocused &&
             "ring-2 ring-tremor-brand-muted dark:ring-dark-tremor-brand-muted z-10",
         )}
       >
-        <div className="relative w-full overflow-hidden">
+        <div className="relative w-full">
           <Popover.Button
             onFocus={() => setIsCalendarButtonFocused(true)}
             onBlur={() => setIsCalendarButtonFocused(false)}
@@ -240,12 +242,12 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
           ) : null}
         </div>
         <Transition
-          enter="transition duration-100 ease-out"
-          enterFrom="transform scale-95 opacity-0"
-          enterTo="transform scale-100 opacity-100"
-          leave="transition duration-75 ease-out"
-          leaveFrom="transform scale-100 opacity-100"
-          leaveTo="transform scale-95 opacity-0"
+          enter="transition ease duration-100 transform"
+          enterFrom="opacity-0 -translate-y-4"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease duration-100 transform"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 -translate-y-4"
         >
           <Popover.Panel
             focus={true}
@@ -297,7 +299,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
         <Listbox
           as="div"
           className={tremorTwMerge(
-            "w-48 overflow-hidden -ml-px rounded-r-tremor-default",
+            "w-48 -ml-px rounded-r-tremor-default",
             isSelectButtonFocused &&
               "ring-2 ring-tremor-brand-muted dark:focus:ring-dark-tremor-brand-muted z-10",
           )}
@@ -327,12 +329,12 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
                 {value ? valueToNameMapping.get(value) ?? selectPlaceholder : selectPlaceholder}
               </Listbox.Button>
               <Transition
-                enter="transition duration-100 ease-out"
-                enterFrom="transform scale-95 opacity-0"
-                enterTo="transform scale-100 opacity-100"
-                leave="transition duration-75 ease-out"
-                leaveFrom="transform scale-100 opacity-100"
-                leaveTo="transform scale-95 opacity-0"
+                enter="transition ease duration-100 transform"
+                enterFrom="opacity-0 -translate-y-4"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease duration-100 transform"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 -translate-y-4"
               >
                 <Listbox.Options
                   className={tremorTwMerge(

diff --git a/src/components/input-elements/MultiSelect/MultiSelect.tsx b/src/components/input-elements/MultiSelect/MultiSelect.tsx
@@ -229,12 +229,12 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>((props, r
             </button>
           ) : null}
           <Transition
-            enter="transition duration-100 ease-out"
-            enterFrom="transform scale-95 opacity-0"
-            enterTo="transform scale-100 opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform scale-100 opacity-100"
-            leaveTo="transform scale-95 opacity-0"
+            enter="transition ease duration-100 transform"
+            enterFrom="opacity-0 -translate-y-4"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease duration-100 transform"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 -translate-y-4"
           >
             <Listbox.Options
               className={tremorTwMerge(

diff --git a/src/components/input-elements/SearchSelect/SearchSelect.tsx b/src/components/input-elements/SearchSelect/SearchSelect.tsx
@@ -174,12 +174,12 @@ const SearchSelect = React.forwardRef<HTMLDivElement, SearchSelectProps>((props,
           ) : null}
           {filteredOptions.length > 0 && (
             <Transition
-              enter="transition duration-100 ease-out"
-              enterFrom="transform scale-95 opacity-0"
-              enterTo="transform scale-100 opacity-100"
-              leave="transition duration-75 ease-out"
-              leaveFrom="transform scale-100 opacity-100"
-              leaveTo="transform scale-95 opacity-0"
+              enter="transition ease duration-100 transform"
+              enterFrom="opacity-0 -translate-y-4"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease duration-100 transform"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 -translate-y-4"
             >
               <Combobox.Options
                 className={tremorTwMerge(

diff --git a/src/components/input-elements/Select/Select.tsx b/src/components/input-elements/Select/Select.tsx
@@ -156,12 +156,12 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
             </button>
           ) : null}
           <Transition
-            enter="transition duration-100 ease-out"
-            enterFrom="transform scale-95 opacity-0"
-            enterTo="transform scale-100 opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform scale-100 opacity-100"
-            leaveTo="transform scale-95 opacity-0"
+            enter="transition ease duration-100 transform"
+            enterFrom="opacity-0 -translate-y-4"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease duration-100 transform"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 -translate-y-4"
           >
             <Listbox.Options
               className={tremorTwMerge(

diff --git a/src/stories/input-elements/DatePicker.stories.tsx b/src/stories/input-elements/DatePicker.stories.tsx
@@ -63,29 +63,29 @@ export const UncontrolledDefault: Story = {
   ...UncontrolledTemplate,
 };
 
-export const UncontrolledWithDefaultValue: Story = {
+export const UncontrolledDefaultValue: Story = {
   ...UncontrolledTemplate,
   args: {
     defaultValue: new Date(2022, 10, 1),
   },
 };
 
-export const UncontrolledWithDisplayFormat: Story = {
+export const UncontrolledDisplayFormat: Story = {
   ...UncontrolledTemplate,
   args: {
     displayFormat: "dd/MM/yyyy",
   },
 };
 
-export const UncontrolledWithFrLocale: Story = {
+export const UncontrolledFrLocale: Story = {
   ...UncontrolledTemplate,
   args: {
     locale: fr,
     placeholder: "Sélectionnez...",
   },
 };
 
-export const UncontrolledWithMinMax: Story = {
+export const UncontrolledMinMax: Story = {
   ...UncontrolledTemplate,
   args: {
     defaultValue: new Date(2022, 10, 1),
@@ -94,30 +94,40 @@ export const UncontrolledWithMinMax: Story = {
   },
 };
 
-export const UncontrolledWithDisabled: Story = {
+export const UncontrolledDisabled: Story = {
   ...UncontrolledTemplate,
   args: {
     defaultValue: new Date(2022, 10, 1),
     disabled: true,
   },
 };
 
-export const UncontrolledWithYearNavigation: Story = {
+export const UncontrolledDisabledDates: Story = {
+  ...UncontrolledTemplate,
+  args: {
+    defaultValue: new Date(2023, 10, 25),
+    minDate: new Date(2023, 10, 5),
+    maxDate: new Date(2023, 10, 28),
+    disabledDates: [new Date(2023, 10, 10), new Date(2023, 10, 11)],
+  },
+};
+
+export const UncontrolledYearNavigation: Story = {
   ...UncontrolledTemplate,
   args: {
     enableYearNavigation: true,
   },
 };
 
-export const UncontrolledWithoutEnableClear: Story = {
+export const UncontrolledoutEnableClear: Story = {
   ...UncontrolledTemplate,
   args: {
     defaultValue: new Date(2022, 10, 1),
     enableClear: false,
   },
 };
 
-export const UncontrolledWithWeekStartsOnWednesday: Story = {
+export const UncontrolledWeekStartsOnWednesday: Story = {
   ...UncontrolledTemplate,
   args: {
     defaultValue: new Date(2022, 10, 1),
@@ -129,7 +139,7 @@ export const ControlledDefault: Story = {
   ...ControlledTemplate,
 };
 
-export const ControlledWithDefaultValue: Story = {
+export const ControlledDefaultValue: Story = {
   ...ControlledTemplate,
   args: {
     defaultValue: new Date(2022, 10, 1),