fix(sw-350): fixed ui-comments for calendar, search and widget

components/DatePicker/Screen/Desktop.tsx

@@ -60,10 +60,9 @@ export default function DatePickerDesktop({
       lang={lang}
       locale={locale}
       mode="range"
-      numberOfMonths={2}
-      onSelect={handleOnSelect}
+      onDayClick={(day) => handleOnSelect(day)}
       pagedNavigation
-      required
+      required={false}
       selected={selectedDate}
       startMonth={currentDate}
       weekStartsOn={1}

components/DatePicker/Screen/Mobile.tsx

@@ -78,7 +78,7 @@ export default function DatePickerMobile({
       mode="range"
       /** Showing full year or what's left of it */
       numberOfMonths={12}
-      onSelect={handleOnSelect}
+      onDayClick={(day) => handleOnSelect(day)}
       required
       selected={selectedDate}
       startMonth={startMonth}

components/DatePicker/Screen/desktop.module.css

@@ -47,8 +47,8 @@ td.rangeStart[aria-selected="true"] button.dayButton:hover {
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
-td.rangeStart[aria-selected="true"]:not([data-outside="true"])
-  button.dayButton {
+td.rangeStart[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
+td.day[aria-selected="true"] button.dayButton {
   background: var(--Primary-Light-On-Surface-Accent);
   border: none;
   color: var(--Base-Button-Inverted-Fill-Normal);
@@ -75,6 +75,7 @@ td.rangeMiddle[aria-selected="true"] button.dayButton {
   background: var(--Base-Background-Primary-Normal);
   border: none;
   border-radius: 0;
+  color: var(--UI-Text-High-contrast);
 }
 
 td.day[data-disabled="true"],

components/DatePicker/Screen/mobile.module.css

@@ -113,8 +113,8 @@ td.rangeStart[aria-selected="true"] button.dayButton:hover {
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
-td.rangeStart[aria-selected="true"]:not([data-outside="true"])
-  button.dayButton {
+td.rangeStart[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
+td.day[aria-selected="true"] button.dayButton {
   background: var(--Primary-Light-On-Surface-Accent);
   border: none;
   color: var(--Base-Button-Inverted-Fill-Normal);
@@ -141,6 +141,7 @@ td.rangeMiddle[aria-selected="true"] button.dayButton {
   background: var(--Base-Background-Primary-Normal);
   border: none;
   border-radius: 0;
+  color: var(--UI-Text-High-contrast);
 }
 
 td.day[data-disabled="true"],

components/DatePicker/date-picker.module.css

@@ -22,6 +22,11 @@
 
 .hideWrapper {
   background-color: var(--Main-Grey-White);
+  display: none;
+}
+
+.container[data-isopen="true"] .hideWrapper {
+  display: block;
 }
 
 @media screen and (max-width: 1366px) {

components/DatePicker/index.tsx

@@ -14,8 +14,6 @@ import DatePickerMobile from "./Screen/Mobile"
 
 import styles from "./date-picker.module.css"
 
-import type { DateRange } from "react-day-picker"
-
 import type { DatePickerFormProps } from "@/types/components/datepicker"
 
 const locales = {
@@ -26,26 +24,54 @@ const locales = {
   [Lang.sv]: sv,
 }
 
-export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
+export default function DatePickerForm({
+  name = "date",
+  onToggleOpen,
+}: DatePickerFormProps) {
   const lang = useLang()
   const [isOpen, setIsOpen] = useState(false)
   const selectedDate = useWatch({ name })
   const { register, setValue } = useFormContext()
   const ref = useRef<HTMLDivElement | null>(null)
 
+  const [isSelectingFrom, setIsSelectingFrom] = useState(true)
+
   function close() {
     setIsOpen(false)
+    onToggleOpen && onToggleOpen(false)
   }
 
   function handleOnClick() {
-    setIsOpen((prevIsOpen) => !prevIsOpen)
+    setIsOpen((prevIsOpen) => {
+      const newState = !prevIsOpen
+      onToggleOpen && onToggleOpen(newState)
+      return newState
+    })
   }
 
-  function handleSelectDate(selected: DateRange) {
-    setValue(name, {
-      from: dt(selected.from).format("YYYY-MM-DD"),
-      to: dt(selected.to).format("YYYY-MM-DD"),
-    })
+  function handleSelectDate(selected: Date) {
+    if (isSelectingFrom) {
+      setValue(name, {
+        from: dt(selected).format("YYYY-MM-DD"),
+        to: undefined,
+      })
+      setIsSelectingFrom(false)
+    } else {
+      const fromDate = dt(selectedDate.from)
+      const toDate = dt(selected)
+      if (toDate.isAfter(fromDate)) {
+        setValue(name, {
+          from: selectedDate.from,
+          to: toDate.format("YYYY-MM-DD"),
+        })
+        setIsSelectingFrom(true)
+      } else {
+        setValue(name, {
+          from: selectedDate.from,
+          to: undefined,
+        })
+      }
+    }
   }
 
   useEffect(() => {
@@ -53,13 +79,14 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
       const target = evt.target as HTMLElement
       if (ref.current && target && !ref.current.contains(target)) {
         setIsOpen(false)
+        onToggleOpen && onToggleOpen(false)
       }
     }
     document.body.addEventListener("click", handleClickOutside)
     return () => {
       document.body.removeEventListener("click", handleClickOutside)
     }
-  }, [setIsOpen])
+  }, [setIsOpen, onToggleOpen])
 
   const selectedFromDate = dt(selectedDate.from)
     .locale(lang)