Repository: Orfium/orfium-ictinus
Pull request #854: feat: add onClear prop on "filtered" DatePicker
Author: login: tsevdos
Labels: name: enhancement
description: New feature or request
name: v5
description: This feature will be released on version 5 (next)
Created: 2025-05-22T08:29:22Z | Merged: 2025-05-22T12:07:38Z

## Description

[CDP-424](https://orfium.atlassian.net/browse/CDP-424)

## Screenshot

<!-- Provide a screenshot or gif of the change to demonstrate it -->

## Test Plan

<!-- Explain what you tested and why -->

<!--
  Have any questions? Check out the contributing doc for more
-->


[CDP-424]: https://orfium.atlassian.net/browse/CDP-424?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


Diff:
diff --git a/src/__storyshots__/Updated Components/Fields/DatePicker-DatePickerWithFilter.snap b/src/__storyshots__/Updated Components/Fields/DatePicker-DatePickerWithFilter.snap
index 63557f518..3771eeb9c 100644
--- a/src/__storyshots__/Updated Components/Fields/DatePicker-DatePickerWithFilter.snap	
+++ b/src/__storyshots__/Updated Components/Fields/DatePicker-DatePickerWithFilter.snap	
@@ -96,6 +96,25 @@
   fill: #194DCC!important;
 }
 
+.emotion-13 {
+  width: 1rem;
+  height: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+}
+
+.emotion-13:hover,
+.emotion-13:focus-visible {
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  border-radius: 100%;
+  background: rgba(200,206,255,0.20);
+  box-shadow: 0px 0px 0px 8px rgba(200,206,255,0.20);
+}
+
 <div>
   <div
     class="emotion-0"
@@ -148,6 +167,71 @@
         </div>
       </div>
     </div>
+    <div
+      style="margin: 5px;"
+    >
+      <div>
+        <div>
+          <div
+            class="emotion-1"
+          >
+            <div>
+              <button
+                class="emotion-2"
+                data-active="false"
+                data-testid="undefined_filter_button"
+                type="button"
+              >
+                <div
+                  class="emotion-3"
+                  data-testid="undefined_filter_label"
+                >
+                  My date: 11/03/2020 
+                </div>
+                <div
+                  class="emotion-4"
+                >
+                  <div
+                    class="emotion-5"
+                  >
+                    <svg
+                      class="emotion-6"
+                      fill="none"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        clip-rule="evenodd"
+                        d="M6.09346 8.31215C5.65924 7.79108 6.02976 7 6.70803 7H13.292C13.9702 7 14.3408 7.79109 13.9065 8.31215L10.6146 12.2625C10.2947 12.6463 9.70526 12.6463 9.38542 12.2625L6.09346 8.31215Z"
+                        fill="#6265AD"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="emotion-13"
+                  datatestprefixid="undefined_filter_close"
+                  tabindex="0"
+                >
+                  <svg
+                    class="emotion-6"
+                    fill="none"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10.0442 11.1281L6.40819 14.7495C6.24522 14.9118 6.0561 14.9941 5.84084 14.9965C5.62558 14.9988 5.43411 14.9165 5.26642 14.7495C5.09872 14.5824 5.01487 14.396 5.01487 14.19C5.01487 13.9841 5.09872 13.7976 5.26642 13.6306L8.92076 9.99085L5.24805 6.35114C5.08507 6.18882 5.0024 6.00656 5.00005 5.80435C4.99769 5.60216 5.08035 5.41756 5.24805 5.25054C5.41574 5.08351 5.60297 5 5.80975 5C6.01653 5 6.20377 5.08351 6.37145 5.25054L10.0074 8.85364L13.6067 5.26884C13.7697 5.10651 13.9588 5.02417 14.174 5.02183C14.3893 5.01947 14.5808 5.10181 14.7485 5.26884C14.9162 5.43585 15 5.62843 15 5.84658C15 6.06473 14.9162 6.25731 14.7485 6.42433L11.1309 10.0457L14.7668 13.6672C14.9176 13.8173 14.9941 13.9995 14.9965 14.2139C14.9988 14.4283 14.9223 14.6129 14.7668 14.7678C14.6114 14.9226 14.4303 15 14.2235 15C14.0167 15 13.8356 14.9226 13.6802 14.7678L10.0442 11.1281Z"
+                      fill="#6265AD"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
       style="margin: 5px;"
     >
@@ -196,5 +280,70 @@
         </div>
       </div>
     </div>
+    <div
+      style="margin: 5px;"
+    >
+      <div>
+        <div>
+          <div
+            class="emotion-1"
+          >
+            <div>
+              <button
+                class="emotion-2"
+                data-active="false"
+                data-testid="undefined_filter_button"
+                type="button"
+              >
+                <div
+                  class="emotion-3"
+                  data-testid="undefined_filter_label"
+                >
+                  Annotation date: 11/03/2020 - 11/03/2020
+                </div>
+                <div
+                  class="emotion-4"
+                >
+                  <div
+                    class="emotion-5"
+                  >
+                    <svg
+                      class="emotion-6"
+                      fill="none"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        clip-rule="evenodd"
+                        d="M6.09346 8.31215C5.65924 7.79108 6.02976 7 6.70803 7H13.292C13.9702 7 14.3408 7.79109 13.9065 8.31215L10.6146 12.2625C10.2947 12.6463 9.70526 12.6463 9.38542 12.2625L6.09346 8.31215Z"
+                        fill="#6265AD"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="emotion-13"
+                  datatestprefixid="undefined_filter_close"
+                  tabindex="0"
+                >
+                  <svg
+                    class="emotion-6"
+                    fill="none"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10.0442 11.1281L6.40819 14.7495C6.24522 14.9118 6.0561 14.9941 5.84084 14.9965C5.62558 14.9988 5.43411 14.9165 5.26642 14.7495C5.09872 14.5824 5.01487 14.396 5.01487 14.19C5.01487 13.9841 5.09872 13.7976 5.26642 13.6306L8.92076 9.99085L5.24805 6.35114C5.08507 6.18882 5.0024 6.00656 5.00005 5.80435C4.99769 5.60216 5.08035 5.41756 5.24805 5.25054C5.41574 5.08351 5.60297 5 5.80975 5C6.01653 5 6.20377 5.08351 6.37145 5.25054L10.0074 8.85364L13.6067 5.26884C13.7697 5.10651 13.9588 5.02417 14.174 5.02183C14.3893 5.01947 14.5808 5.10181 14.7485 5.26884C14.9162 5.43585 15 5.62843 15 5.84658C15 6.06473 14.9162 6.25731 14.7485 6.42433L11.1309 10.0457L14.7668 13.6672C14.9176 13.8173 14.9941 13.9995 14.9965 14.2139C14.9988 14.4283 14.9223 14.6129 14.7668 14.7678C14.6114 14.9226 14.4303 15 14.2235 15C14.0167 15 13.8356 14.9226 13.6802 14.7678L10.0442 11.1281Z"
+                      fill="#6265AD"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/__storyshots__/Updated Components/Filter-FilterWithDatePicker.snap b/src/__storyshots__/Updated Components/Filter-FilterWithDatePicker.snap
index 63557f518..3771eeb9c 100644
--- a/src/__storyshots__/Updated Components/Filter-FilterWithDatePicker.snap	
+++ b/src/__storyshots__/Updated Components/Filter-FilterWithDatePicker.snap	
@@ -96,6 +96,25 @@
   fill: #194DCC!important;
 }
 
+.emotion-13 {
+  width: 1rem;
+  height: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+}
+
+.emotion-13:hover,
+.emotion-13:focus-visible {
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  border-radius: 100%;
+  background: rgba(200,206,255,0.20);
+  box-shadow: 0px 0px 0px 8px rgba(200,206,255,0.20);
+}
+
 <div>
   <div
     class="emotion-0"
@@ -148,6 +167,71 @@
         </div>
       </div>
     </div>
+    <div
+      style="margin: 5px;"
+    >
+      <div>
+        <div>
+          <div
+            class="emotion-1"
+          >
+            <div>
+              <button
+                class="emotion-2"
+                data-active="false"
+                data-testid="undefined_filter_button"
+                type="button"
+              >
+                <div
+                  class="emotion-3"
+                  data-testid="undefined_filter_label"
+                >
+                  My date: 11/03/2020 
+                </div>
+                <div
+                  class="emotion-4"
+                >
+                  <div
+                    class="emotion-5"
+                  >
+                    <svg
+                      class="emotion-6"
+                      fill="none"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        clip-rule="evenodd"
+                        d="M6.09346 8.31215C5.65924 7.79108 6.02976 7 6.70803 7H13.292C13.9702 7 14.3408 7.79109 13.9065 8.31215L10.6146 12.2625C10.2947 12.6463 9.70526 12.6463 9.38542 12.2625L6.09346 8.31215Z"
+                        fill="#6265AD"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="emotion-13"
+                  datatestprefixid="undefined_filter_close"
+                  tabindex="0"
+                >
+                  <svg
+                    class="emotion-6"
+                    fill="none"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10.0442 11.1281L6.40819 14.7495C6.24522 14.9118 6.0561 14.9941 5.84084 14.9965C5.62558 14.9988 5.43411 14.9165 5.26642 14.7495C5.09872 14.5824 5.01487 14.396 5.01487 14.19C5.01487 13.9841 5.09872 13.7976 5.26642 13.6306L8.92076 9.99085L5.24805 6.35114C5.08507 6.18882 5.0024 6.00656 5.00005 5.80435C4.99769 5.60216 5.08035 5.41756 5.24805 5.25054C5.41574 5.08351 5.60297 5 5.80975 5C6.01653 5 6.20377 5.08351 6.37145 5.25054L10.0074 8.85364L13.6067 5.26884C13.7697 5.10651 13.9588 5.02417 14.174 5.02183C14.3893 5.01947 14.5808 5.10181 14.7485 5.26884C14.9162 5.43585 15 5.62843 15 5.84658C15 6.06473 14.9162 6.25731 14.7485 6.42433L11.1309 10.0457L14.7668 13.6672C14.9176 13.8173 14.9941 13.9995 14.9965 14.2139C14.9988 14.4283 14.9223 14.6129 14.7668 14.7678C14.6114 14.9226 14.4303 15 14.2235 15C14.0167 15 13.8356 14.9226 13.6802 14.7678L10.0442 11.1281Z"
+                      fill="#6265AD"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
       style="margin: 5px;"
     >
@@ -196,5 +280,70 @@
         </div>
       </div>
     </div>
+    <div
+      style="margin: 5px;"
+    >
+      <div>
+        <div>
+          <div
+            class="emotion-1"
+          >
+            <div>
+              <button
+                class="emotion-2"
+                data-active="false"
+                data-testid="undefined_filter_button"
+                type="button"
+              >
+                <div
+                  class="emotion-3"
+                  data-testid="undefined_filter_label"
+                >
+                  Annotation date: 11/03/2020 - 11/03/2020
+                </div>
+                <div
+                  class="emotion-4"
+                >
+                  <div
+                    class="emotion-5"
+                  >
+                    <svg
+                      class="emotion-6"
+                      fill="none"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        clip-rule="evenodd"
+                        d="M6.09346 8.31215C5.65924 7.79108 6.02976 7 6.70803 7H13.292C13.9702 7 14.3408 7.79109 13.9065 8.31215L10.6146 12.2625C10.2947 12.6463 9.70526 12.6463 9.38542 12.2625L6.09346 8.31215Z"
+                        fill="#6265AD"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="emotion-13"
+                  datatestprefixid="undefined_filter_close"
+                  tabindex="0"
+                >
+                  <svg
+                    class="emotion-6"
+                    fill="none"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10.0442 11.1281L6.40819 14.7495C6.24522 14.9118 6.0561 14.9941 5.84084 14.9965C5.62558 14.9988 5.43411 14.9165 5.26642 14.7495C5.09872 14.5824 5.01487 14.396 5.01487 14.19C5.01487 13.9841 5.09872 13.7976 5.26642 13.6306L8.92076 9.99085L5.24805 6.35114C5.08507 6.18882 5.0024 6.00656 5.00005 5.80435C4.99769 5.60216 5.08035 5.41756 5.24805 5.25054C5.41574 5.08351 5.60297 5 5.80975 5C6.01653 5 6.20377 5.08351 6.37145 5.25054L10.0074 8.85364L13.6067 5.26884C13.7697 5.10651 13.9588 5.02417 14.174 5.02183C14.3893 5.01947 14.5808 5.10181 14.7485 5.26884C14.9162 5.43585 15 5.62843 15 5.84658C15 6.06473 14.9162 6.25731 14.7485 6.42433L11.1309 10.0457L14.7668 13.6672C14.9176 13.8173 14.9941 13.9995 14.9965 14.2139C14.9988 14.4283 14.9223 14.6129 14.7668 14.7678C14.6114 14.9226 14.4303 15 14.2235 15C14.0167 15 13.8356 14.9226 13.6802 14.7678L10.0442 11.1281Z"
+                      fill="#6265AD"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/components/DatePicker/DatePickInput/DatePickInput.tsx b/src/components/DatePicker/DatePickInput/DatePickInput.tsx
index 8cd5204dc..c37fc38eb 100644
--- a/src/components/DatePicker/DatePickInput/DatePickInput.tsx
+++ b/src/components/DatePicker/DatePickInput/DatePickInput.tsx
@@ -1,20 +1,18 @@
+import FilterButton from 'components/Filter/components/FilterButton';
+import Icon from 'components/Icon';
+import { getTextInputBaseTokens } from 'components/TextInputBase/TextInputBase.tokens';
 import useTheme from 'hooks/useTheme';
-import type { InputHTMLAttributes } from 'react';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, type InputHTMLAttributes } from 'react';
 import { rem } from 'theme/utils';
 import type { Dayjs } from 'utils/date';
 import dayjs from 'utils/date';
 import { getLocaleFormat } from 'utils/helpers';
 import type { TestProps } from 'utils/types';
-
 import type { TextFieldProps } from '../../TextField/TextField';
 import TextField from '../../TextField/TextField';
 import { DATE_PICKER_LABEL, DATE_RANGE_PICKER_LABEL } from '../constants';
 import type { DateFormatType, DatePickerProps } from '../DatePicker.types';
 import type { Range } from '../OverlayComponent/OverlayComponent';
-import FilterButton from 'components/Filter/components/FilterButton';
-import Icon from 'components/Icon';
-import { getTextInputBaseTokens } from 'components/TextInputBase/TextInputBase.tokens';
 
 // TODO: Need to fix this (TextField onChange prop)
 const ON_CHANGE_MOCK = () => {};
diff --git a/src/components/DatePicker/DatePicker.stories.tsx b/src/components/DatePicker/DatePicker.stories.tsx
index b84798d3a..851c74d4a 100644
--- a/src/components/DatePicker/DatePicker.stories.tsx
+++ b/src/components/DatePicker/DatePicker.stories.tsx
@@ -1,10 +1,15 @@
-import DatePicker from './DatePicker';
+import dayjs from 'dayjs';
+import { useState } from 'react';
+import { FIGMA_URL, Function } from 'utils/common';
 import Stack from '../storyUtils/Stack';
-import { currentDay } from './utils';
+import { CALENDAR_DEFAULT_OPTIONS, options } from './constants';
+import DatePicker from './DatePicker';
 import { openDatePicker } from './play-utils';
-import { options, CALENDAR_DEFAULT_OPTIONS } from './constants';
-import { FIGMA_URL, Function } from 'utils/common';
-import { useState } from 'react';
+import { currentDay } from './utils';
+
+const today = dayjs();
+const yesterday = dayjs().subtract(1, 'days');
+const aWeekAgo = dayjs().subtract(7, 'days');
 
 export default {
   title: 'Updated Components/Fields/DatePicker',
@@ -158,6 +163,21 @@ export const DatePickerWithFilter = {
             );
           }}
         </Function>
+        <Function>
+          {() => {
+            const [date, setDate] = useState({ from: currentDay.toDate(), to: undefined });
+            return (
+              <DatePicker
+                filterConfig={{ label: 'My date', filterType: 'added' }}
+                onClear={() => {
+                  setDate({ from: undefined, to: undefined });
+                }}
+                value={date}
+                onChange={setDate}
+              />
+            );
+          }}
+        </Function>
         <Function>
           {() => {
             const [date, setDate] = useState({
@@ -176,6 +196,42 @@ export const DatePickerWithFilter = {
             );
           }}
         </Function>
+        <Function>
+          {() => {
+            const [date, setDate] = useState({
+              from: currentDay.toDate(),
+              to: currentDay.toDate(),
+            });
+            return (
+              <DatePicker
+                value={date}
+                onChange={setDate}
+                onClear={() => {
+                  setDate({ from: undefined, to: undefined });
+                }}
+                isRangePicker
+                filterConfig={{ label: 'Annotation date', filterType: 'added' }}
+                options={[
+                  {
+                    label: 'Today',
+                    value: 'today',
+                    dates: [today, today],
+                  },
+                  {
+                    label: 'Yesterday',
+                    value: 'yesterday',
+                    dates: [yesterday, yesterday],
+                  },
+                  {
+                    label: 'Last 7 days',
+                    value: 'lastWeek',
+                    dates: [aWeekAgo, today],
+                  },
+                ]}
+              />
+            );
+          }}
+        </Function>
       </Stack>
     );
   },
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index 2d2ec6860..d025bef1a 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -1,9 +1,10 @@
 import useKeyboardEvents from 'hooks/useKeyboardEvents';
-import React, { useCallback, memo, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import isEqual from 'react-fast-compare';
 import type { Dayjs } from 'utils/date';
 import type { TestProps } from 'utils/types';
-
+import ClickAwayListener from '../utils/ClickAwayListener';
+import PositionInScreen from '../utils/PositionInScreen';
 import { EMPTY_STATE } from './constants';
 import { datePickerStyles } from './DatePicker.style';
 import type { DatePickerProps } from './DatePicker.types';
@@ -11,12 +12,11 @@ import DatePickInput from './DatePickInput';
 import type { Range } from './OverlayComponent/OverlayComponent';
 import OverlayComponent from './OverlayComponent/OverlayComponent';
 import { initDates } from './utils';
-import ClickAwayListener from '../utils/ClickAwayListener';
-import PositionInScreen from '../utils/PositionInScreen';
 
 const DatePicker: React.FC<DatePickerProps & TestProps> = ({
   isRangePicker = false,
   onChange = () => {},
+  onClear = () => {},
   disableDates,
   value: initialValue,
   inputProps,
@@ -141,6 +141,10 @@ const DatePicker: React.FC<DatePickerProps & TestProps> = ({
         setIsOpen(false);
         setRange(EMPTY_STATE);
 
+        if (filterConfig?.filterType === 'added') {
+          return onClear();
+        }
+
         return onChange(EMPTY_STATE);
       }
 
@@ -163,7 +167,7 @@ const DatePicker: React.FC<DatePickerProps & TestProps> = ({
         onChange(EMPTY_STATE);
       }
     },
-    [isClearable, filterConfig?.filterType, onChange, value, isRangePicker]
+    [isClearable, filterConfig?.filterType, onChange, onClear, isRangePicker, value.from, value.to]
   );
 
   const onApply = useCallback(() => {
diff --git a/src/components/DatePicker/DatePicker.types.ts b/src/components/DatePicker/DatePicker.types.ts
index f518c60b2..0b09fa14a 100644
--- a/src/components/DatePicker/DatePicker.types.ts
+++ b/src/components/DatePicker/DatePicker.types.ts
@@ -1,7 +1,6 @@
+import type { FilterType } from 'components/Filter/Filter.types';
 import type { Dayjs } from 'utils/date';
-
 import type { TextFieldProps } from '../TextField/TextField';
-import type { FilterType } from 'components/Filter/Filter.types';
 
 export type DisabledDates = {
   daysOfWeek?: number[];
@@ -17,6 +16,8 @@ export type DatePickerProps = {
   isRangePicker?: boolean;
   /** A callback to return user selection */
   onChange?: (range: DateRange) => void;
+  /** A callback that runs ONLY on added filters when the users clears the date (presses the x button)  */
+  onClear?: () => void;
   /** Option to disable some dates */
   disableDates?: DisabledDates;
   /** Value to define if needed an initial state or to handle it externally */


Reviews:
user: login: geokaralis
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-22T09:41:36Z
user: login: kostasdano
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-22T10:14:00Z
user: login: tsevdos
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-22T10:59:20Z
user: login: kostasdano
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-22T11:45:22Z

Review comments:
diff_hunk: @@ -141,6 +141,10 @@ const DatePicker: React.FC<DatePickerProps & TestProps> = ({
         setIsOpen(false);
         setRange(EMPTY_STATE);
 
+        if (filterConfig?.filterType === 'added') {
+          onClear();
+        }
+
path: src/components/DatePicker/DatePicker.tsx
user: login: kostasdano
body: when we click the X icon on Added Filter w/ DatePicker, we have 2 inner callbacks now: `onClear` and `onChange(EMPTY_STATE)`. are we sure we want this?
created_at: 2025-05-22T10:14:00Z
author_association: COLLABORATOR
diff_hunk: @@ -141,6 +141,10 @@ const DatePicker: React.FC<DatePickerProps & TestProps> = ({
         setIsOpen(false);
         setRange(EMPTY_STATE);
 
+        if (filterConfig?.filterType === 'added') {
+          onClear();
+        }
+
path: src/components/DatePicker/DatePicker.tsx
user: login: tsevdos
body: Fixed with https://github.com/Orfium/orfium-ictinus/pull/854/commits/149839573bce15f8a5c4ad801dd47f6d47b05ab1
created_at: 2025-05-22T10:59:20Z
author_association: COLLABORATOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-05-22T11:52:13Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=Orfium_orfium-ictinus&pullRequest=854) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=Orfium_orfium-ictinus&pullRequest=854&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=Orfium_orfium-ictinus&pullRequest=854&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=Orfium_orfium-ictinus&pullRequest=854&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [77.8% Coverage on New Code](https://sonarcloud.io/component_measures?id=Orfium_orfium-ictinus&pullRequest=854&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=Orfium_orfium-ictinus&pullRequest=854&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=Orfium_orfium-ictinus&pullRequest=854)


author_association: NONE