kahuna-base-react-components 1.3.5 → 1.3.6

package/dist/languages/index.d.ts

@@ -23,7 +23,7 @@ export declare const getLanguageJson: () => {
         yesterday: string;
         last_three_days: string;
         last_week: string;
-        last_two_week: string;
+        last_two_weeks: string;
         last_month: string;
         last_three_months: string;
         last_six_months: string;
@@ -59,7 +59,7 @@ export declare const lang: {
         yesterday: string;
         last_three_days: string;
         last_week: string;
-        last_two_week: string;
+        last_two_weeks: string;
         last_month: string;
         last_three_months: string;
         last_six_months: string;

package/dist/types.d.ts

@@ -58,6 +58,7 @@ interface KTooltipProps {
     padding?: string;
     marginTop?: string;
     marginLeft?: string;
+    hideDelay?: number;
 }
 declare const KTooltip: React.FC<KTooltipProps>;
 
@@ -121,7 +122,7 @@ interface KInputProps {
     hoverBorder?: string;
     activeBorder?: string;
 }
-declare const KInput$1: React.FC<KInputProps>;
+declare const KInput: React.FC<KInputProps>;
 
 interface KTextAreaProps {
     value: string;
@@ -291,7 +292,7 @@ interface KCodeInputProps {
     isCodeCorrect?: boolean;
     autoBlur?: boolean;
 }
-declare const KInput: React.FC<KCodeInputProps>;
+declare const KCodeInput: React.FC<KCodeInputProps>;
 
 interface KSelectRangeProps {
     value: DateRangeType$1;
@@ -339,4 +340,4 @@ interface KSelectRangeDateProps {
 type DateRangeType = Date | null | [Date | null, Date | null];
 declare const KSelectRangeDate: React.FC<KSelectRangeDateProps>;
 
-export { KButton, KInput as KCodeInput, KDropdown, KInput$1 as KInput, KLogo, KSelectDate, KSelectRange, KSelectRangeDate, KSlider, KSliderLabel, KSpan, KTextArea, KTitleSpan, KTooltip };
+export { KButton, KCodeInput, KDropdown, KInput, KLogo, KSelectDate, KSelectRange, KSelectRangeDate, KSlider, KSliderLabel, KSpan, KTextArea, KTitleSpan, KTooltip };

package/package.json

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

package/src/components/KCodeInput/KCodeInput.tsx

@@ -34,7 +34,7 @@ export interface KCodeInputProps {
   autoBlur?: boolean
 }
 
-const KInput: React.FC<KCodeInputProps> = (props) => {
+const KCodeInput: React.FC<KCodeInputProps> = (props) => {
   const autoFocus = props.autoFocus || false
   const autoBlur = props.autoBlur || false
   const borderRadius = props.borderRadius || 10
@@ -257,4 +257,4 @@ const KInput: React.FC<KCodeInputProps> = (props) => {
   )
 }
 
-export default KInput
+export default KCodeInput

package/src/components/KSelectRangeDate/KSelectRangeDate.tsx

@@ -279,7 +279,7 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
             width="140px"
             background={shorthandIndex.current === 3 ? "#F7F7F7" : "#FFF"}
             textColor={shorthandIndex.current === 3 ? "#000" : "#999"}
-            text={lang.button_text.last_two_week}
+            text={lang.button_text.last_two_weeks}
             borderRadius={8}
             shadowDisabled
             hoverBackground="#F0F0F0"

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

@@ -28,7 +28,8 @@ KTooltipPrimary.args = {
   arrowColor: "green",
   showArrow: true,
   padding: "10px",
-  border: "1px solid red"
+  border: "1px solid red",
+  marginLeft: "200px", 
   //boxShadow: "3px 3px 10px #000",
   //borderRadius: "100px",
 }
@@ -85,7 +86,8 @@ KTooltipSecondary.args = {
     </div>
   ),
   arrowColor: "red",
-  padding: "0px"
+  padding: "0px",
+  hideDelay: 200
   //boxShadow: "3px 3px 10px #000",
   //borderRadius: "100px",
 }

package/src/components/KTooltip/KTooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useRef, useState } from "react"
 import "../../main.css"
 
 export interface KTooltipProps {
@@ -18,13 +18,30 @@ export interface KTooltipProps {
   padding?: string
   marginTop?: string // position and align is used to position the tooltip. for additional changes in vertical positioning use this prop
   marginLeft?: string // position and align is used to position the tooltip. for minor changes in horizontal positioning use this prop
+  hideDelay?: number
 }
 
 const KTooltip: React.FC<KTooltipProps> = (props) => {
   const [isVisible, setIsVisible] = useState(false)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
-  const showTooltip = () => setIsVisible(true)
-  const hideTooltip = () => setIsVisible(false)
+  const showTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+    setIsVisible(true)
+  }
+
+  const hideTooltip = () => {
+    if (props.hideDelay && props.hideDelay > 0) {
+      timeoutRef.current = setTimeout(() => {
+        setIsVisible(false)
+      }, props.hideDelay)
+    } else {
+      setIsVisible(false)
+    }
+  }
 
   const position = props.position || "top"
   const align = props.align || "center"

package/src/languages/en.json

@@ -21,7 +21,7 @@
         "yesterday": "Yesterday",
         "last_three_days": "Last 3 days",
         "last_week": "Last week",
-        "last_two_week": "Last 2 week",
+        "last_two_weeks": "Last 2 weeks",
         "last_month": "Last Month",
         "last_three_months": "Last 3 months",
         "last_six_months": "Last 6 months",

package/src/languages/tr.json

@@ -21,7 +21,7 @@
         "yesterday": "Dün",
         "last_three_days": "Son 3 gün",
         "last_week": "Son hafta",
-        "last_two_week": "Son 2 hafta",
+        "last_two_weeks": "Son 2 hafta",
         "last_month": "Son ay",
         "last_three_months": "Son 3 ay",
         "last_six_months": "Son 6 ay",