kahuna-base-react-components 1.1.0 → 1.1.1

package/dist/types.d.ts

@@ -123,6 +123,7 @@ interface KTextAreaProps {
     fontSize?: string;
     iconSize?: string;
     checked?: boolean;
+    maxHeight?: number;
 }
 declare const KTextArea: React.FC<KTextAreaProps>;
 

package/package.json

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

package/src/components/KTextArea/KTextArea.stories.tsx

@@ -25,9 +25,13 @@ KTextAreaPrimary.args = {
       console.log("Enter is clicked and our value is:", event.currentTarget)
     }
   },
-  rows: 4,
   placeholder: "Placeholder...",
-  hoverBackground: "white"
+  hoverBackground: "white",
+  width: 200,
+  height: 20,
+  leftIcon: TracksIcon,
+  activeBackground: "#FFF"
+
 }
 
 export const KTextAreaLeftIcon = Template.bind({})

package/src/components/KTextArea/KTextArea.tsx

@@ -28,6 +28,7 @@ export interface KTextAreaProps {
   fontSize?: string
   iconSize?: string
   checked?: boolean
+  maxHeight?: number
 }
 
 const KTextArea: React.FC<KTextAreaProps> = (props) => {
@@ -58,7 +59,16 @@ const KTextArea: React.FC<KTextAreaProps> = (props) => {
   const border = props.border || "none"
   const fontSize = props.fontSize || "14px"
   const iconSize = props.iconSize || "20px"
-  const rows = props.rows || 2
+  const rows = props.rows || 1
+
+  const autoResize = props.maxHeight && props.maxHeight !== props.height
+  const maxHeight = props.maxHeight || 200
+
+  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const textarea = e.target
+    textarea.style.height = "auto"
+    textarea.style.height = `${textarea.scrollHeight}px` // Set the height to scrollHeight
+  }
 
   return (
     <div
@@ -89,22 +99,27 @@ const KTextArea: React.FC<KTextAreaProps> = (props) => {
           width,
           height,
           accentColor,
-          fontSize
+          fontSize,
+          overflow: autoResize ? "hidden" : "auto",
+          minHeight: height,
+          resize: autoResize ? "none" : "vertical",
+          ...(autoResize && { maxHeight })
         }}
-        rows={rows}
         value={props.value}
+        rows={rows}
         placeholder={props.placeholder || ""}
         disabled={disabled}
         onBlur={(event) => {
-          console.log("onBulur", event.target.value)
           if (props.onBlur) props.onBlur(event.target.value)
         }}
         onChange={(event) => {
-          console.log("OnChange", event.target.value)
+          if (autoResize) {
+            handleInput(event)
+          }
+
           props.onChange(event.target.value)
         }}
         onKeyDown={(event) => {
-          console.log("OnKeyDown", event)
           if (props.onKeyDown) props.onKeyDown(event)
         }}
       />