kahuna-base-react-components 1.2.5 → 1.2.7

package/dist/types.d.ts

@@ -160,6 +160,7 @@ interface KDropdownProps {
     label?: string;
     textColor?: string;
     shadowDisabled?: boolean;
+    closeMenuOnSelect?: boolean;
     menuBackground?: string;
     padding?: string;
     gap?: string;
@@ -209,6 +210,7 @@ interface KSelectDateProps {
     anchorToButton?: boolean;
     position?: "top" | "bottom" | "left" | "right";
     align?: "top" | "bottom" | "left" | "right" | "center";
+    hideBackdrop?: boolean;
 }
 declare const KSelectDate: React.FC<KSelectDateProps>;
 
@@ -298,6 +300,7 @@ interface KSelectRangeProps {
     minimumDate?: Date;
     maximumDate?: Date;
     popupCalendarBackground?: string;
+    hideBackdrop?: boolean;
 }
 type DateRangeType = Date | null | [Date | null, Date | null];
 declare const KSelectRange: React.FC<KSelectRangeProps>;

package/package.json

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

package/src/components/KDropdown/KDropdown.tsx

@@ -36,6 +36,7 @@ export interface KDropdownProps {
   label?: string
   textColor?: string
   shadowDisabled?: boolean
+  closeMenuOnSelect?: boolean
   menuBackground?: string
   padding?: string
   gap?: string
@@ -93,6 +94,10 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
   const placeholderColor = props.placeholderColor || "#848484"
   const enableIndicator = props.enableIndicator || false
   const allowContainerShrink = props.allowContainerShrink || false
+  let closeMenuOnSelect = true
+  if (props.closeMenuOnSelect === false) {
+    closeMenuOnSelect = false
+  }
 
   let defaultValue = props.defaultValue
   if (!defaultValue && props.defaultValuePrimitive) {
@@ -225,6 +230,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
         defaultValue={defaultValue}
         isMulti={isMulti}
         name={props.label || ""}
+        closeMenuOnSelect={closeMenuOnSelect}
         placeholder={props.placeholder || ""}
         options={props.options}
         className={"k-dropdown"}

package/src/components/KSelectDate/KSelectDate.stories.tsx

@@ -3,6 +3,7 @@ import KSelectDate, { KSelectDateProps } from "./KSelectDate"
 import { useEffect, useState } from "react"
 //@ts-ignore
 import CalendarNewIcon from "../../assets/calendar-new.svg"
+import KSpan from "../KSpan"
 
 export default {
   title: "ReactComponentLibrary/KSelectDate",
@@ -13,28 +14,52 @@ export default {
 } as Meta<typeof KSelectDate>
 
 const KSelectDateWrapper: React.FC<KSelectDateProps> = (args) => {
-
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)
   useEffect(() => {
     // console.log("selectedDate: ", selectedDate)
   }, [selectedDate])
 
   return (
-    <KSelectDate
-      {...args}
-      value={selectedDate}
-      onChange={(date) => {
-        // 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(undefined)
-          // console.log("Deleting is completed")
-        }
-      }}
-    />
+    <div className=" flex flex-row gap-4 items-center">
+      <div className="flex flex-row items-center justify-center w-auto h-40 z-10">
+        <KSpan text="Lorem Ipsum is simply dummy text of the printing and typesetting industry." />
+      </div>
+      <div className="flex flex-col relative">
+          <KSelectDate
+            {...args}
+            value={selectedDate}
+            onChange={(date) => {
+              // 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(undefined)
+                // console.log("Deleting is completed")
+              }
+            }}
+            anchorToButton
+          />
+          <KSelectDate
+            {...args}
+            value={selectedDate}
+            onChange={(date) => {
+              // 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(undefined)
+                // console.log("Deleting is completed")
+              }
+            }}
+            anchorToButton
+          />
+      </div>
+      <div></div>
+    </div>
   )
 }
 

package/src/components/KSelectDate/KSelectDate.tsx

@@ -34,11 +34,12 @@ export interface KSelectDateProps {
   anchorToButton?: boolean // opens the calendar relative to the button's position, does not have any effect if body is not hidden.
   position?: "top" | "bottom" | "left" | "right" // position of the calendar relative to the button's position, has effect as long as anchorButton is true
   align?: "top" | "bottom" | "left" | "right" | "center" // lets to align the calendar, has effect as long as anchorButton is true
+  hideBackdrop?: boolean
 }
 interface MonthSelectorType {
   monthName: string
   year: string
-  date: Date,
+  date: Date
   monthIndex: string | number
 }
 interface DaySelectorType {
@@ -75,6 +76,8 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
   const position = props.position || "bottom"
   const align = props.align || "center"
 
+  const hideBackdrop = props.hideBackdrop || false
+
   const formatShortWeekday = (locale: string | undefined, date: Date): string => {
     return date.toLocaleDateString(locale, { weekday: "short" }).charAt(0) // Return only the first letter of the weekday
   }
@@ -182,7 +185,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
     )
   }
 
-  const monthSelector = (month: string, year: string, date: Date, monthIndex:string | number) => {
+  const monthSelector = (month: string, year: string, date: Date, monthIndex: string | number) => {
     const monthText: MonthTextType = lang.common.months_short
 
     const text = `${monthText[monthIndex]}, ${year}`
@@ -309,6 +312,9 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
 
   return (
     <React.Fragment>
+      {openCalendar && !hideBackdrop && (
+        <div className="w-[100vw] h-[100vh] fixed left-0 top-0 z-[49] bg-[#0000004d]"/>
+      )}
       {openCalendar && (!hideBody || !anchorToButton) && (
         <div className="w-[100vw] h-[100vh] fixed left-0 top-0 flex items-center justify-center z-50">
           <div>{renderPopUpCalendar()}</div>
@@ -373,7 +379,7 @@ const KSelectDate: React.FC<KSelectDateProps> = (props) => {
       ) : (
         <div className="flex relative">
           {openCalendar && anchorToButton && (
-            <div className={`absolute ${absolutePositionClassName(position, align)}`}>
+            <div className={`absolute ${absolutePositionClassName(position, align)} z-[51]`}>
               <div>{renderPopUpCalendar()}</div>
             </div>
           )}

package/src/components/KSelectRange/KSelectRange.stories.tsx

@@ -50,7 +50,25 @@ const KSelectRangeWrapper: React.FC<KSelectRangeProps> = (args) => {
           // console.log("Deleting is completed")
         }
       }}
-    /></div>
+    />
+        <div className="relative z-10">
+        <KSelectRange
+      {...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>
   )
 }
 
@@ -63,10 +81,10 @@ KSelectRangePrimary.args = {
   backgroundColor: "#F7F7F7",
   hoverBackgroundColor: "#F3F3F3",
   borderRadius: 24,
-  anchorToButton:true,
   position: "top",
   align: "center",
-
+  hideBackdrop: true,
+  anchorToButton: true,
   onChange: (value) => {
     if (value) {
       console.log("value is updated using this value:", value)

package/src/components/KSelectRange/KSelectRange.tsx

@@ -30,6 +30,7 @@ export interface KSelectRangeProps {
   minimumDate?: Date
   maximumDate?: Date
   popupCalendarBackground?: string
+  hideBackdrop?: boolean
 }
 
 export type DateRangeType = Date | null | [Date | null, Date | null]
@@ -47,6 +48,7 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
   const anchorToButton = props.anchorToButton || false
   const position = props.position || "bottom"
   const align = props.align || "center"
+  const hideBackdrop = props.hideBackdrop || false
 
   const [value, setValue] = useState<DateRangeType>(props.value)
   const [range, setRange] = useState<DateRangeType>(props.value)
@@ -59,6 +61,8 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
     approved: -1
   })
 
+  const [openBackdrop, setOpenBackdrop] = useState<boolean>(false)
+
   const convertToMonthYear = (date: Date | null): string => {
     if (!date) return "?"
 
@@ -351,6 +355,7 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
                 onClick={() => {
                   setRange(value)
                   setOpenCalendar(false)
+                  setOpenBackdrop(false)
                   const approvedIndex = shorthandIndex.approved
                   setShorthandIndex({ ...shorthandIndex, current: approvedIndex })
                   if (Array.isArray(value) && value[0] !== null) {
@@ -368,6 +373,7 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
                 onClick={() => {
                   setValue(range)
                   setOpenCalendar(false)
+                  setOpenBackdrop(false)
                   const currentIndex = shorthandIndex.current
                   setShorthandIndex({ ...shorthandIndex, approved: currentIndex })
                   if (Array.isArray(range) && range[0] !== null) {
@@ -395,6 +401,9 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
 
   return (
     <React.Fragment>
+      {openBackdrop && !hideBackdrop && (
+        <div className="w-[100vw] h-[100vh] fixed left-0 top-0 z-[49] bg-[#0000004d]"/>
+      )}
       {openCalendar && !anchorToButton && (
         <div
           className="w-[100vw] h-[100vh] fixed left-0 top-0 flex items-center justify-center z-50"
@@ -405,7 +414,7 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
       )}
       <div className="flex relative">
         {openCalendar && anchorToButton && (
-          <div className={`absolute  ${absolutePositionClassName(position, align)}`}>
+          <div className={`absolute ${absolutePositionClassName(position, align)} z-[51]`}>
             <div>{renderPopUpCalendar()}</div>
           </div>
         )}
@@ -422,9 +431,11 @@ const KSelectRange: React.FC<KSelectRangeProps> = (props) => {
               onClick={() => {
                 if (!openCalendar) {
                   setOpenCalendar(true)
+                  setOpenBackdrop(true)
                 } else {
                   setRange(value)
                   setOpenCalendar(false)
+                  setOpenBackdrop(false)
                   const approvedIndex = shorthandIndex.approved
                   setShorthandIndex({ ...shorthandIndex, current: approvedIndex })
                   if (Array.isArray(value) && value[0] !== null) {