fix: properly hide outside dates

einride · Nov 6, 2023 · 53a1b38 · 53a1b38
1 parent 9307489
commit 53a1b38
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 2 deletions.
diff --git a/.changeset/tender-dancers-remain.md b/.changeset/tender-dancers-remain.md
@@ -0,0 +1,6 @@
+---
+"@einride/ui-dates": patch
+"@einride/ui": patch
+---
+
+Properly hide outsides dates.
diff --git a/packages/einride-ui-dates/src/components/DatePickerInput/DatePickerInput.tsx b/packages/einride-ui-dates/src/components/DatePickerInput/DatePickerInput.tsx
@@ -185,6 +185,7 @@ export const DatePickerInput = ({
       <StyledDatePickerInput
         ariaLabels={{ previousMonth: "Previous month", nextMonth: "Next month" }}
         hasLabel={"label" in props}
+        hideOutsideDates
         maxLevel="month"
         popoverProps={{ clickOutsideEvents: ["pointerdown"] }} // to ensure popover is closed when clicking on a menu trigger
         valueFormat={inputFormat}

diff --git a/packages/einride-ui-dates/src/components/DateRangePickerInput/DateRangePickerInput.tsx b/packages/einride-ui-dates/src/components/DateRangePickerInput/DateRangePickerInput.tsx
@@ -166,7 +166,7 @@ export const DateRangePickerInput = ({
                 color: ${theme.colors.content.positive};
               }
               &[data-outside] {
-                display: none;
+                display: none; // TODO: use hideOutsideDates instead when bug is fixed in Mantine
               }
               &[data-in-range]:not([data-selected]) {
                 background: ${theme.colors.background.tertiary};

diff --git a/packages/einride-ui/src/components/controls/dates/DatePicker/DatePicker.tsx b/packages/einride-ui/src/components/controls/dates/DatePicker/DatePicker.tsx
@@ -193,6 +193,7 @@ export const DatePicker = ({
         ariaLabels={{ previousMonth: "Previous month", nextMonth: "Next month" }}
         hasLabel={"label" in props}
         maxLevel="month"
+        hideOutsideDates
         popoverProps={{ clickOutsideEvents: ["pointerdown"] }} // to ensure popover is closed when clicking on a menu trigger
         valueFormat={inputFormat}
         withAsterisk={false}

diff --git a/packages/einride-ui/src/components/controls/dates/DateRangePicker/DateRangePicker.tsx b/packages/einride-ui/src/components/controls/dates/DateRangePicker/DateRangePicker.tsx
@@ -170,7 +170,7 @@ export const DateRangePicker = ({
                 color: ${theme.colors.content.positive};
               }
               &[data-outside] {
-                display: none;
+                display: none; // TODO: use hideOutsideDates instead when bug is fixed in Mantine
               }
               &[data-in-range]:not([data-selected]) {
                 background: ${theme.colors.background.tertiary};