kahuna-base-react-components 1.3.2 → 1.3.3

package/package.json

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

package/src/components/KSelectRangeDate/KSelectRangeDate.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useRef, useState } from "react"
+import React, { useEffect, useState } from "react"
 import Calendar from "react-calendar"
 import "./KSelectRangeDateCustom.css"
 //@ts-ignore
@@ -118,28 +118,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 +166,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 +195,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 +205,7 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
           style={{
             border: "1px solid #F3F3F3",
             borderRightWidth: "0px",
-            borderTopLeftRadius: "0px",
+            borderTopLeftRadius: "16px",
             borderBottomLeftRadius: "16px"
           }}
         >
@@ -261,9 +281,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 +332,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 {