kahuna-base-react-components 1.3.3 → 1.3.5

package/dist/types.d.ts

@@ -41,6 +41,26 @@ interface KSpanProps {
 }
 declare const KSpan: React.FC<KSpanProps>;
 
+interface KTooltipProps {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+    align?: "top" | "bottom" | "left" | "right" | "center";
+    backgroundColor?: string;
+    width?: string;
+    height?: string;
+    zIndex?: number;
+    border?: string;
+    borderRadius?: string;
+    boxShadow?: string;
+    showArrow?: boolean;
+    arrowColor?: string;
+    padding?: string;
+    marginTop?: string;
+    marginLeft?: string;
+}
+declare const KTooltip: React.FC<KTooltipProps>;
+
 interface KTitleSpanProps {
     text: string;
     fontSize?: number;
@@ -51,6 +71,7 @@ interface KTitleSpanProps {
     letterSpacing?: string;
     bold?: boolean;
     ellipsis?: boolean;
+    tooltipProps?: Partial<KTooltipProps>;
 }
 declare const KTitleSpan: React.FC<KTitleSpanProps>;
 
@@ -179,6 +200,7 @@ interface KDropdownProps {
     border?: string;
     activeBorder?: string;
     onInputChange?: (text: string) => void;
+    sortSelectedFirst?: boolean;
 }
 declare const KDropdown: React.FC<KDropdownProps>;
 
@@ -220,26 +242,6 @@ interface KSelectDateProps {
 }
 declare const KSelectDate: React.FC<KSelectDateProps>;
 
-interface KTooltipProps {
-    children: React.ReactNode;
-    content: React.ReactNode;
-    position?: "top" | "bottom" | "left" | "right";
-    align?: "top" | "bottom" | "left" | "right" | "center";
-    backgroundColor?: string;
-    width?: string;
-    height?: string;
-    zIndex?: number;
-    border?: string;
-    borderRadius?: string;
-    boxShadow?: string;
-    showArrow?: boolean;
-    arrowColor?: string;
-    padding?: string;
-    marginTop?: string;
-    marginLeft?: string;
-}
-declare const KTooltip: React.FC<KTooltipProps>;
-
 interface SliderLabelOption {
     label: string;
     value: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "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, { useEffect, 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)

package/src/components/KSpan/KSpan.stories.tsx

@@ -24,7 +24,7 @@ const Template: StoryFn<typeof KSpanWrapper> = (args) => <KSpanWrapper {...args}
 
 export const KSpanPrimary = Template.bind({})
 KSpanPrimary.args = {
-  text: "Login",
+  text: "Burada uzun metin var, overflow olabilir.",
   fontSize: 14,
   color: "#1F1F1F",
   fontWeight: 400,

package/src/components/KTitleSpan/KTitleSpan.stories.tsx

@@ -1,5 +1,6 @@
 import {Meta, StoryFn} from "@storybook/react";
 import KTitleSpan, { KTitleSpanProps } from "./KTitleSpan";
+import KSpan from "../KSpan";
 
 export default {
   title: "ReactComponentLibrary/KTitleSpan",
@@ -21,18 +22,27 @@ const KTitleSpanWrapper: React.FC<KTitleSpanProps> = (args) => {
 }
 
 const Template: StoryFn<typeof KTitleSpanWrapper> = (args) => <KTitleSpanWrapper {...args} />;
-
+const myText = "Hello how are you, how is it going? "
 export const KTitleSpanPrimary = Template.bind({});
 KTitleSpanPrimary.args = {
-  text: "Hello how?",
+  text: myText,
   fontSize: 48,
   color: "#111",
   lineHeight: "56px",
   fontStyle: "normal",
   letterSpacing: "-0.48px",
   bold: false,
-  ellipsis: true
-};
+  ellipsis: true,
+  tooltipProps: {
+    width: "150px",
+    position: "bottom",
+    content: (
+      <div className="w-full whitespace-normal">
+        <KSpan text={myText} color="#111" />
+      </div>
+    )
+  }
+}
 
 export const KTitleSpanSecondary = Template.bind({});
 KTitleSpanSecondary.args = {

package/src/components/KTitleSpan/KTitleSpan.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react"
 import "../../main.css"
 import KTooltip from "../KTooltip"
 import KSpan from "../KSpan"
+import { KTooltipProps } from "../KTooltip/KTooltip"
 
 export interface KTitleSpanProps {
   text: string
@@ -13,6 +14,7 @@ export interface KTitleSpanProps {
   letterSpacing?: string
   bold?: boolean
   ellipsis?: boolean
+  tooltipProps?: Partial<KTooltipProps>
 }
 
 const KTitleSpan: React.FC<KTitleSpanProps> = (props) => {
@@ -55,6 +57,7 @@ const KTitleSpan: React.FC<KTitleSpanProps> = (props) => {
               <KSpan text={props.text} color="#111" />
             </div>
           }
+          {...props.tooltipProps}
         >
           <span
             ref={textRef}

package/src/components/KTooltip/KTooltip.stories.tsx

@@ -21,11 +21,7 @@ const Template: StoryFn<KTooltipProps> = (args) => (
 
 export const KTooltipPrimary = Template.bind({})
 KTooltipPrimary.args = {
-  content: (
-    <div className="bg-red-100 flex justify-center items-center">
-      <div className="bg-green-300 font-extrabold ">BURADA</div>
-    </div>
-  ),
+  content: "null",
   position: "top",
   align: "right",
   zIndex: 1000,
@@ -38,7 +34,7 @@ KTooltipPrimary.args = {
 }
 
 export const KTooltipSecondary = Template.bind({})
-KTooltipPrimary.args = {
+KTooltipSecondary.args = {
   content: (
     <div className="flex flex-col gap-2 justify-center items-start px-4 py-2">
       <div

package/src/components/KTooltip/KTooltip.tsx

@@ -3,7 +3,7 @@ import "../../main.css"
 
 export interface KTooltipProps {
   children: React.ReactNode
-  content: React.ReactNode
+  content: React.ReactNode // if content === null the tooltip will not be visible
   position?: "top" | "bottom" | "left" | "right"
   align?: "top" | "bottom" | "left" | "right" | "center"
   backgroundColor?: string
@@ -61,7 +61,7 @@ const KTooltip: React.FC<KTooltipProps> = (props) => {
     <div className="relative box-border" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
       {props.children}
 
-      <div
+      {props.content !== null && <div
         className={`${absolutePositionClassName(position, align)} absolute ${
           isVisible ? "k-tooltip-enter" : "k-tooltip-exit"
         }`}
@@ -81,7 +81,7 @@ const KTooltip: React.FC<KTooltipProps> = (props) => {
           {props.content}
         </div>
         {showArrow && <div className={`arrow-${position}`} style={{ backgroundColor: arrowColor, zIndex: -200 }}></div>}
-      </div>
+      </div>}
     </div>
   )
 }