kahuna-base-react-components 1.3.2 → 1.3.4

package/dist/types.d.ts

@@ -179,6 +179,7 @@ interface KDropdownProps {
     border?: string;
     activeBorder?: string;
     onInputChange?: (text: string) => void;
+    sortSelectedFirst?: boolean;
 }
 declare const KDropdown: React.FC<KDropdownProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/KDropdown/KDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import "../../main.css"
 import Select, { MultiValue } from "react-select"
 // @ts-ignore
@@ -54,6 +54,8 @@ export interface KDropdownProps {
   border?: string
   activeBorder?: string
   onInputChange?: (text: string) => void
+  sortSelectedFirst?: boolean
+
 }
 
 const KDropdown: React.FC<KDropdownProps> = (props) => {
@@ -61,7 +63,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
   const [iconCount, setIconCount] = useState<number>(0)
   const [background, setBackground] = useState("#F5F5F5")
   const [border, setBorder] = useState("none")
-
+  
   useEffect(() => {
     const emptyBackground = props.background || "#F5F5F5"
     const activeBackground = props.activeBackground || "#FFF"
@@ -77,6 +79,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
     setSelectedOption(props.selected)
   }, [props.selected])
 
+
   const width = props.width || "100%"
   const height = props.height || "auto"
   const borderRadius = props.borderRadius || 10
@@ -97,6 +100,22 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
   const placeholderColor = props.placeholderColor || "#848484"
   const enableIndicator = props.enableIndicator || false
   const allowContainerShrink = props.allowContainerShrink || false
+
+  const sortedOptions = useMemo<KSelectOption[]>(() => {
+    if (!props.sortSelectedFirst) {
+      return props.options
+    }
+
+    if (!selectedOption || !isMulti) {
+      return props.options
+    }
+
+    const selections = (selectedOption as KSelectOption[]).map((o) => o.value)
+    const selectedOnes = props.options.filter((opt) => selections.includes(opt.value))
+    const others = props.options.filter((opt) => !selections.includes(opt.value))
+    return [...selectedOnes, ...others]
+  }, [props.options, selectedOption, isMulti, props.sortSelectedFirst])
+
   let closeMenuOnSelect = true
   if (props.closeMenuOnSelect === false) {
     closeMenuOnSelect = false
@@ -235,7 +254,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
         name={props.label || ""}
         closeMenuOnSelect={closeMenuOnSelect}
         placeholder={props.placeholder || ""}
-        options={props.options}
+        options={sortedOptions}
         className={"k-dropdown"}
         onInputChange={(text) => {
           if (props.onInputChange) props.onInputChange(text)

package/src/components/KSelectRangeDate/KSelectRangeDate.stories.tsx

@@ -30,43 +30,30 @@ const KSelectRangeDateWrapper: React.FC<KSelectRangeDateProps> = (args) => {
     new Date() // End date: today
   ])
   useEffect(() => {
-    // console.log("selectedDate: ", selectedDate)
+    console.log("selectedDate: ", selectedDate)
   }, [selectedDate])
+  const MILISECONDS_MONTH = 2678400000
+
 
   return (
     <div>
       <KSelectRangeDate
         {...args}
         value={selectedDate}
-        onChange={(date: DateRangeType) => {
-          // console.log("date: ", date)
-          if (date) {
-            setSelectedDate(date)
-            console.log("updating is completed: ", date)
-            // console.log("updating is completed date.toISOString(): ", date?.toISOString())
-          } else {
-            setSelectedDate(null)
-            // console.log("Deleting is completed")
+        onChange={(event: any) => {
+          console.log("works")
+          if (!event) {
+            return
+          }
+          if (event[1] - event[0] > MILISECONDS_MONTH) {
+            console.log("not allowed")
+            return
           }
+
+          setSelectedDate(event)
         }}
       />
-      <div className="relative z-10">
-        <KSelectRangeDate
-          {...args}
-          value={selectedDate}
-          onChange={(date: DateRangeType) => {
-            // console.log("date: ", date)
-            if (date) {
-              setSelectedDate(date)
-              console.log("updating is completed: ", date)
-              // console.log("updating is completed date.toISOString(): ", date?.toISOString())
-            } else {
-              setSelectedDate(null)
-              // console.log("Deleting is completed")
-            }
-          }}
-        />
-      </div>
+      <div className="relative z-10"></div>
     </div>
   )
 }
@@ -80,10 +67,11 @@ KSelectRangePrimary.args = {
   backgroundColor: "#F7F7F7",
   hoverBackgroundColor: "#F3F3F3",
   borderRadius: 24,
-  position: "top",
+  position: "bottom",
   align: "center",
   hideBackdrop: true,
   anchorToButton: true,
+
   onChange: (value) => {
     if (value) {
       console.log("value is updated using this value:", value)

package/src/components/KSelectRangeDate/KSelectRangeDate.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import Calendar from "react-calendar"
 import "./KSelectRangeDateCustom.css"
 //@ts-ignore
@@ -52,11 +52,30 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
 
   const [value, setValue] = useState<DateRangeType>(props.value)
   const [range, setRange] = useState<DateRangeType>(props.value)
+  const [openCalendar, setOpenCalendar] = useState<boolean>(false)
+
+  const skipNextOpenRef = useRef(false)
+
+  useEffect(() => {
+    setValue(props.value)
+    setRange(props.value)
+  }, [props.value])
+
+  useEffect(() => {
+    if (openCalendar) {
+      if(skipNextOpenRef?.current) {
+        skipNextOpenRef.current = false
+        return
+      }
+
+      setRange(props.value)
+    }    
+  }, [props.value, openCalendar])
 
   const [leftCalendarYear, setLeftCalendarYear] = useState<number>(new Date().getFullYear())
   const [leftCalendarMonth, setLeftCalendarMonth] = useState<number>(new Date().getMonth())
 
-  const [openCalendar, setOpenCalendar] = useState<boolean>(false)
+  
   const [shorthandIndex, setShorthandIndex] = useState<{ current: number; approved: number }>({
     current: -1,
     approved: -1
@@ -107,6 +126,7 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
       const newRange: DateRangeType =
         range[0].getTime() > clickedDate.getTime() ? [clickedDate, range[0]] : [range[0], clickedDate]
       setRange(newRange)
+      skipNextOpenRef.current = true
       setOpenCalendar(false)
       setTimeout(() => {
         setOpenCalendar(true)
@@ -118,28 +138,46 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
   }
 
   const tileClassName = ({ date, view }: { date: Date; view: string }) => {
-    if (view === "year") {
+    if (view === "month") {
+
+      if (Array.isArray(range) && range[0] && !range[1] && hoveredDate &&
+       ((date.getTime() > hoveredDate.getTime() && date.getTime() < range[0].getTime()) ||
+       date.getTime() < hoveredDate.getTime() && date.getTime() > range[0].getTime()) ) {
+        
+        return "hovered-range-day"
+      }
+
       // Apply active class for current month
       if (!(Array.isArray(range) && range[0] && range[1])) return
 
       if (
         range[0]?.getFullYear() === date.getFullYear() &&
         range[0]?.getMonth() === date.getMonth() &&
+        range[0]?.getDate() === date.getDate() &&
         range[1]?.getFullYear() === date.getFullYear() &&
-        range[1]?.getMonth() === date.getMonth()
+        range[1]?.getMonth() === date.getMonth() &&
+        range[1]?.getDate() === date.getDate()
       ) {
-        return "active-month-first-month active-month-last-month"
-      } else if (range[0]?.getFullYear() === date.getFullYear() && range[0]?.getMonth() === date.getMonth()) {
-        return "active-month-first-month"
-      } else if (range[1]?.getFullYear() === date.getFullYear() && range[1]?.getMonth() === date.getMonth()) {
-        return "active-month-last-month"
+        return "active-day-first-day active-day-last-day"
+      } else if (range[0]?.getFullYear() === date.getFullYear() && range[0]?.getMonth() === date.getMonth() && range[0]?.getDate() === date.getDate()) {
+        return "active-day-first-day"
+      } else if (range[1]?.getFullYear() === date.getFullYear() && range[1]?.getMonth() === date.getMonth() && range[1]?.getDate() === date.getDate()) {
+        return "active-day-last-day"
       } else if (range[0]?.getTime() < date.getTime() && date.getTime() < range[1]?.getTime()) {
-        if (date.getMonth() % 3 === 0) {
-          return "active-month-range-month-left"
-        } else if (date.getMonth() % 3 === 1) {
-          return "active-month-range-month-middle"
+        const weekStartsOn = 1
+        const col = (date.getDay() - weekStartsOn + 7) % 7
+        const dayOfMonth = date.getDate()
+        const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth()+1, 0).getDate()
+        if (col === 6) {
+          return "active-day-range-day-left"
+        } else if (col === 5) {
+          return "active-day-range-day-right"
+        } else if (dayOfMonth === 1) {
+          return "active-day-range-day-middle first-day-of-month"
+        } else if (dayOfMonth === lastDayOfMonth) {
+          return "active-day-range-day-middle last-day-of-month"
         } else {
-          return "active-month-range-month-right"
+          return "active-day-range-day-middle"
         }
       }
 
@@ -148,15 +186,15 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
   }
 
   const tileContent = ({ date, view }: { date: Date; view: string }) => {
-    if (view === "year") {
-      const month = date.toLocaleString(lang.locale, { month: "long" })
+    if (view === "month") {
+      const day = date.getDate()
       return (
         <div className="absolute left-0 top-0 h-full w-full flex items-center justify-center tile-content-external-div">
           {Array.isArray(range) &&
             range[1] !== null &&
-            ((range[0]?.getFullYear() === date.getFullYear() && range[0]?.getMonth() === date.getMonth()) ||
-              (range[1]?.getFullYear() === date.getFullYear() && range[1]?.getMonth() === date.getMonth())) && (
-              <abbr>{month}</abbr>
+            ((range[0]?.getFullYear() === date.getFullYear() && range[0]?.getMonth() === date.getMonth() && range[0]?.getDate() === date.getDate()) ||
+              (range[1]?.getFullYear() === date.getFullYear() && range[1]?.getMonth() === date.getMonth() && range[1]?.getDate() === date.getDate())) && (
+              <abbr>{day}</abbr>
             )}
         </div>
       )
@@ -177,6 +215,8 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
     }
   }, [range])
 
+  const [hoveredDate, setHoveredDate] = useState<Date | null>(null)
+
   const renderPopUpCalendar = () => {
     return (
       <div className="flex flex-row">
@@ -185,7 +225,7 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
           style={{
             border: "1px solid #F3F3F3",
             borderRightWidth: "0px",
-            borderTopLeftRadius: "0px",
+            borderTopLeftRadius: "16px",
             borderBottomLeftRadius: "16px"
           }}
         >
@@ -261,9 +301,27 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
           />
         </div>
         <div className="flex flex-col gap-0">
-          <div className="flex flex-row">
+          <div className="flex flex-row"            
+          onMouseOver={e => {
+            const tile = (e.target as HTMLElement).closest(".react-calendar__tile")
+            if (!tile) return
+              const abbr = tile.querySelector("abbr[aria-label]") as HTMLElement | null;
+            if (!abbr) return
+            const label = abbr.getAttribute("aria-label")!
+            const date = new Date(label)
+            setHoveredDate(date)
+            }
+          }
+          onMouseOut={e => {
+
+            const leftTile = (e.target as HTMLElement).closest(".react-calendar__tile")
+            if (leftTile) {
+              setHoveredDate(null)
+            }
+            }
+          }>
             <Calendar
-              className="kselect-range left-calendar"
+              className="kselect-range-date left-calendar"
               allowPartialRange
               tileClassName={tileClassName}
               tileContent={tileContent}
@@ -294,7 +352,7 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
               maxDate={props.maximumDate || undefined}
             />
             <Calendar
-              className="kselect-range right-calendar"
+              className="kselect-range-date right-calendar"
               tileClassName={tileClassName}
               tileContent={tileContent}
               locale={lang.locale}

package/src/components/KSelectRangeDate/KSelectRangeDateCustom.css

@@ -3,7 +3,7 @@
     border-right: none !important;
 }
 
-.react-calendar.kselect-range {
+.react-calendar.kselect-range-date {
     width: 350px;
     max-width: 100%;
     background: white;
@@ -19,17 +19,17 @@
     font-weight: 500;
 }
 
-.kselect-range .react-calendar--doubleView {
+.kselect-range-date .react-calendar--doubleView {
     width: 700px;
 }
 
-.kselect-range .react-calendar--doubleView .react-calendar__viewContainer {
+.kselect-range-date .react-calendar--doubleView .react-calendar__viewContainer {
     display: flex;
     margin: -0.5em;
     border-radius: 16px;
 }
 
-.kselect-range .react-calendar--doubleView .react-calendar__viewContainer>* {
+.kselect-range-date .react-calendar--doubleView .react-calendar__viewContainer>* {
     width: 50%;
     margin: 0.5em;
 }
@@ -42,23 +42,23 @@
     box-sizing: border-box;
 }
 
-.kselect-range .react-calendar button {
+.kselect-range-date .react-calendar button {
     margin: 0;
     border: 0;
     outline: none;
 }
 
-.kselect-range .react-calendar button:enabled:hover {
+.kselect-range-date .react-calendar button:enabled:hover {
     cursor: pointer;
 }
 
-.kselect-range .react-calendar__navigation {
+.kselect-range-date .react-calendar__navigation {
     display: flex;
     height: 36px;
     align-items: center;
 }
 
-.kselect-range .react-calendar__navigation button {
+.kselect-range-date .react-calendar__navigation button {
     width: 44px;
     color: #111;
     font-weight: 500;
@@ -67,38 +67,42 @@
     background: none;
 }
 
-.kselect-range .react-calendar__navigation button:disabled {
+.kselect-range-date .react-calendar__navigation button:disabled {
     background-color: #FFF;
 }
 
-.kselect-range .react-calendar__navigation button:enabled:hover,
-.kselect-range .react-calendar__navigation button:enabled:focus {
+.kselect-range-date .react-calendar__navigation button:enabled:hover,
+.kselect-range-date .react-calendar__navigation button:enabled:focus {
     background-color: #F0F0F0;
 }
 
-.kselect-range .react-calendar__month-view__weekdays {
+.kselect-range-date .react-calendar__month-view__weekdays {
     text-align: center;
     text-transform: uppercase;
     font: inherit;
     font-size: 0.75em;
     font-weight: bold;
+    width: 280px;
+    justify-content: center !important;
+    margin-left: 15px;
+
 }
 
-.kselect-range .react-calendar__month-view__weekdays__weekday {
+.kselect-range-date .react-calendar__month-view__weekdays__weekday {
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: 20px;
     letter-spacing: -0.084px;
-    width: 40px;
+    width: 40px ;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.kselect-range .react-calendar__month-view__weekNumbers .react-calendar__tile {
+.kselect-range-date .react-calendar__month-view__weekNumbers .react-calendar__tile {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -108,17 +112,19 @@
     position: relative;
 }
 
-.kselect-range .react-calendar__month-view__days {
-    justify-content: space-between;
+.kselect-range-date .react-calendar__month-view__days {
+    justify-content: center;
+    row-gap: 4px;
 
 }
 
-.kselect-range .react-calendar__month-view__days__day {
+.kselect-range-date .react-calendar__month-view__days__day {
     flex-basis: auto !important;
     border-radius: 20px;
+    position: relative;
 }
 
-.kselect-range .react-calendar__month-view__days__day--weekend {
+.kselect-range-date .react-calendar__month-view__days__day--weekend {
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
@@ -126,22 +132,39 @@
     /* 142.857% */
     letter-spacing: -0.084px;
     color: #1F1F1F;
+    width: 40px;
+}
+.kselect-range-date .hovered-range-day {
+    background-color: #F0F0F0 !important;
 }
 
-.kselect-range .react-calendar__month-view__days__day--neighboringMonth,
-.kselect-range .react-calendar__decade-view__years__year--neighboringDecade,
-.kselect-range .react-calendar__century-view__decades__decade--neighboringCentury {
+.kselect-range-date .react-calendar__month-view__days__day--neighboringMonth {
+    color: rgba(0, 0, 0, 0) !important;
+    background-color: rgba(0, 0, 0, 0) !important;
+}
+.kselect-range-date .react-calendar__month-view__days__day--neighboringMonth.active-day-range-day-middle {
+    background-color: rgba(0, 0, 0, 0) !important;
+}
+.kselect-range-date .react-calendar__month-view__days__day--neighboringMonth.active-day-range-day-left {
+    background: rgba(0, 0, 0, 0) !important;
+}
+.kselect-range-date .react-calendar__month-view__days__day--neighboringMonth.active-day-range-day-right {
+    background: rgba(0, 0, 0, 0) !important;
+}
+
+.kselect-range-date .react-calendar__decade-view__years__year--neighboringDecade,
+.kselect-range-date .react-calendar__century-view__decades__decade--neighboringCentury {
     color: #D6D6D6;
 }
 
-.kselect-range .react-calendar__year-view .react-calendar__tile,
-.kselect-range .react-calendar__decade-view .react-calendar__tile,
-.kselect-range .react-calendar__century-view .react-calendar__tile {
+.kselect-range-date .react-calendar__year-view .react-calendar__tile,
+.kselect-range-date .react-calendar__decade-view .react-calendar__tile,
+.kselect-range-date .react-calendar__century-view .react-calendar__tile {
     padding: 0;
     /*old value : 2em 0.5em*/
 }
 
-.kselect-range .react-calendar__navigation__arrow {
+.kselect-range-date .react-calendar__navigation__arrow {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -151,7 +174,7 @@
     ;
 }
 
-.kselect-range .react-calendar__tile {
+.kselect-range-date .react-calendar__tile {
     height: 40px;
     width: 40px !important;
     background: none;
@@ -159,44 +182,44 @@
     font: inherit;
 }
 
-.kselect-range .react-calendar__tile:disabled {
+.kselect-range-date .react-calendar__tile:disabled {
     background-color: #f0f0f0;
     color: #ababab;
 }
 
-.kselect-range .react-calendar__month-view__days__day--neighboringMonth:disabled,
-.kselect-range .react-calendar__decade-view__years__year--neighboringDecade:disabled,
-.kselect-range .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+.kselect-range-date .react-calendar__month-view__days__day--neighboringMonth:disabled,
+.kselect-range-date .react-calendar__decade-view__years__year--neighboringDecade:disabled,
+.kselect-range-date .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
     color: #cdcdcd;
 }
 
-.kselect-range .react-calendar__tile:enabled:hover,
-.kselect-range .react-calendar__tile:enabled:focus {
+.kselect-range-date .react-calendar__tile:enabled:hover,
+.kselect-range-date .react-calendar__tile:enabled:focus {
     background-color: #F0F0F0;
 }
 
-.kselect-range .react-calendar__tile--now {
+.kselect-range-date .react-calendar__tile--now {
     background: #F2FE67
 }
 
-.kselect-range .react-calendar__tile--now:enabled:hover,
-.kselect-range.react-calendar__tile--now:enabled:focus {
+.kselect-range-date .react-calendar__tile--now:enabled:hover,
+.kselect-range-date.react-calendar__tile--now:enabled:focus {
     background: #FFFFA9;
 }
 
-.kselect-range .react-calendar__tile--hasActive {
+.kselect-range-date .react-calendar__tile--hasActive {
     background: #111111;
     /*76baff*/
     color: #FFFFFF;
 }
 
-.kselect-range .react-calendar__tile--hasActive:enabled:hover,
-.kselect-range .react-calendar__tile--hasActive:enabled:focus {
+.kselect-range-date .react-calendar__tile--hasActive:enabled:hover,
+.kselect-range-date .react-calendar__tile--hasActive:enabled:focus {
     background: #111111;
     /*old value: #a9d4ff*/
 }
 
-.kselect-range .react-calendar__tile--active {
+.kselect-range-date .react-calendar__tile--active {
     background-color: #111;
     color: white;
     border-radius: 0px;
@@ -206,20 +229,20 @@
 .react-calendar__tile--hover.react-calendar__tile--active {
     background-color: #111 !important;
 }
-.kselect-range .react-calendar__tile--active:enabled:focus {
+.kselect-range-date .react-calendar__tile--active:enabled:focus {
     background: #111111;
     /*old value: 1087ff*/
 }
 
-.kselect-range .react-calendar--selectRange .react-calendar__tile--hover {
+.kselect-range-date .react-calendar--selectRange .react-calendar__tile--hover {
     background-color: #F0F0F0;
 }
 
-.kselect-range .react-calendar__month-view__weekdays__weekday {
+.kselect-range-date .react-calendar__month-view__weekdays__weekday {
     text-decoration: none !important;
 }
 
-.kselect-range .react-calendar__month-view__weekdays__weekday--weekend {
+.kselect-range-date .react-calendar__month-view__weekdays__weekday--weekend {
     text-decoration: none;
 }
 
@@ -228,7 +251,7 @@ abbr:where([title]) {
     color: #3D3D3D;
 }
 
-.kselect-range .react-calendar__navigation__label__labelText {
+.kselect-range-date .react-calendar__navigation__label__labelText {
     color: #111;
     font-size: 16px;
     font-weight: 500 !important;
@@ -236,49 +259,64 @@ abbr:where([title]) {
     letter-spacing: -0.176px;
 }
 
-.kselect-range .react-calendar__year-view__months {
+.kselect-range-date .react-calendar__year-view__months {
     row-gap: 8px;
 }
 
-.kselect-range .react-calendar__year-view__months__month {
+.kselect-range-date .react-calendar__year-view__months__month {
     padding: 0px !important;
     position: relative;
 }
 
-.kselect-range .active-month-first-month {
+.kselect-range-date .active-day-first-day:not(.react-calendar__month-view__days__day--neighboringMonth) {
     background-color: #F0F0F0 !important;
     border-top-left-radius: 999px !important;
     border-bottom-left-radius: 999px !important;
 }
 
-.active-month-first-month .tile-content-external-div {
+.active-day-first-day .tile-content-external-div {
     background-color: #111;
     border-radius: 999px !important;
 }
+.active-day-first-day.react-calendar__month-view__days__day--neighboringMonth .tile-content-external-div {
+    display: none;
+}
 
-.kselect-range .active-month-last-month {
+.kselect-range-date .active-day-last-day:not(.react-calendar__month-view__days__day--neighboringMonth) {
     background-color: #F0F0F0 !important;
     border-top-right-radius: 999px !important;
     border-bottom-right-radius: 999px !important;
 }
 
-.active-month-last-month .tile-content-external-div {
+.active-day-last-day .tile-content-external-div {
     background-color: #111;
     border-radius: 999px !important;
 }
+.active-day-last-day.react-calendar__month-view__days__day--neighboringMonth .tile-content-external-div {
+    display: none;
+}
 
-.kselect-range .active-month-range-month-left {
-    background: linear-gradient(90deg, #FFF 0%, #F0F0F0 30.28%, #F0F0F0 100%);
+.kselect-range-date .active-day-range-day-left {
+    background: linear-gradient(90deg, #FFF 0%, #F0F0F0 69.72%, #F0F0F0 100%);
     color: #1F1F1F;
 }
 
-.kselect-range .active-month-range-month-middle {
+.kselect-range-date .active-day-range-day-middle {
     background-color: #F0F0F0 !important;
     color: #1F1F1F;
 }
 
-.kselect-range .active-month-range-month-right {
-    background: linear-gradient(90deg, #F0F0F0 0%, #F0F0F0 69.72%, #FFF 100%);
+.active-day-range-day-middle.first-day-of-month:not(.react-calendar__month-view__days__day--neighboringMonth) {
+    background: linear-gradient(90deg, #FFF 0%, #F0F0F0 69.72%, #F0F0F0 100%);
+    color: #1F1F1F;
+}
+.active-day-range-day-middle.last-day-of-month:not(.react-calendar__month-view__days__day--neighboringMonth) {
+    background: linear-gradient(90deg, #F0F0F0 0%, #F0F0F0 30.28%, #FFF 100%);
+    color: #1F1F1F;
+}
+
+.kselect-range-date .active-day-range-day-right {
+    background: linear-gradient(90deg, #F0F0F0 0%, #F0F0F0 30.28%, #FFF 100%);
     color: #1F1F1F;
 }
 .range-bottom-center {