gbs-add-block 0.0.37 → 0.0.38

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.37)
+# GBS Building Blocks 2.0 (v0.0.38)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,11 +6,9 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.37)
+## What's New 🎉 (Ver 0.0.38)
 
-- Updated Form Renderer with form builder and AI support
-- Updated Grid
-- Updated DatePicker
+- Updated Material Input Component
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/materialInput/index.tsx

@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React, { useState, useRef } from "react";
 import { MaterialInputProps } from "./types";
 
@@ -11,9 +18,13 @@ const MaterialInput = ({
   required = false,
   disabled = false,
   className = "",
+  textarea = false,
+  rows = 3,
+  cols = 30,
+  ...props
 }: MaterialInputProps) => {
   const [isFocused, setIsFocused] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);
 
   const handleFocus = () => setIsFocused(true);
   const handleBlur = () => {
@@ -27,16 +38,50 @@ const MaterialInput = ({
   return (
     <div className={`relative w-full ${className}`}>
       <div className="relative">
-        <input
-          ref={inputRef}
-          type={type}
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          disabled={disabled}
-          required={required}
-          className={`
+        {textarea ? (
+          <textarea
+            {...props}
+            ref={inputRef as React.RefObject<HTMLTextAreaElement>}
+            value={value}
+            onChange={(e) => {
+              if (onChange) onChange(e.target.value);
+            }}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            rows={rows}
+            cols={cols}
+            disabled={disabled}
+            required={required}
+            className={`
+            peer w-full px-3 py-3
+            bg-transparent
+            border rounded-md
+            outline-none
+            transition-all duration-200 ease-in-out
+            placeholder-transparent
+            ${
+              error
+                ? "border-red-500 focus:border-red-500"
+                : "border-gray-300 focus:border-blue-500"
+            }
+            ${disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-900"}
+          `}
+          />
+        ) : (
+          <input
+            {...props}
+            autoComplete="off"
+            ref={inputRef as React.RefObject<HTMLInputElement>}
+            type={type}
+            value={value}
+            onChange={(e) => {
+              if (onChange) onChange(e.target.value);
+            }}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            required={required}
+            className={`
             peer w-full px-3 py-3
             bg-transparent
             border rounded-md
@@ -50,7 +95,8 @@ const MaterialInput = ({
             }
             ${disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-900"}
           `}
-        />
+          />
+        )}
         <label
           onClick={() => inputRef.current?.focus()}
           className={`
@@ -58,7 +104,7 @@ const MaterialInput = ({
             pointer-events-none
             transition-all duration-200 ease-in-out
             cursor-text
-            ${isFloating ? "-top-2 text-xs bg-white px-1" : "top-3 text-base"}
+            ${isFloating ? "-top-2 text-xs bg-white px-1" : "top-2 text-base"}
             ${
               error
                 ? "text-red-500"

package/source/components/materialInput/types.ts

@@ -1,11 +1,16 @@
+import { InputHTMLAttributes } from "react";
+
 export type MaterialInputProps = {
-  label: string;
+  label?: string;
   type?: string;
-  value: string;
-  onChange: (value: string) => void;
+  value?: string;
+  onChange?: (value: string) => void;
   error?: string;
   helperText?: string;
   required?: boolean;
   disabled?: boolean;
   className?: string;
-};
+  textarea?: boolean;
+  rows?: number;
+  cols?: number;
+} & InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>;