pixelize-design-library 2.1.72 → 2.1.73

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -1,8 +1,11 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
+// import React, { useEffect, useRef, useState } from "react";
+// import { NoteTextAreaProps } from "./NoteTextAreaProps";
+// import styled from "@emotion/styled";
+// import { Spinner } from "@chakra-ui/react";
+// import { CustomThemeProps } from "../../Theme/themeProps";
+// import { useCustomTheme } from "../../Theme/useCustomTheme";
+// import { Paperclip, X } from "lucide-react";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -35,116 +38,452 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+// const Container = styled.div<{ isActive: boolean }>`
+//   border: ${({ isActive }) =>
+//     isActive ? "1px solid #3182ce" : "1px solid #c0c6cc"};
+//   border-radius: 5px;
+//   box-shadow: ${({ isActive }) =>
+//     isActive
+//       ? "-1px 1px 8px 4px rgb(49 130 206 / 24%), 0px 2px 6px 0 rgb(49 130 206 / 19%)"
+//       : "none"};
+// `;
+// const TextAreaContainer = styled.div<{ isActive: boolean }>`
+//   width: 100%;
+//   cursor: text;
+//   padding: 12px 15px;
+//   display: ${({ isActive }) => (isActive ? "block" : "none")};
+// `;
+// const PlaceholderText = styled.div<{ isActive: boolean }>`
+//   color: #c0c6cc;
+//   width: 100%;
+//   cursor: text;
+//   display: ${({ isActive }) => (isActive ? "block" : "none")};
+//   padding: 12px 15px;
+// `;
+// const InputTitle = styled.input`
+//   width: 100%;
+//   height: auto;
+//   border: none;
+//   outline: none;
+//   background: none;
+//   color: black;
+//   fontsize: 1rem;
+//   fontweight: 500;
+//   marginbottom: 2px;
+// `;
+// const NotesTextArea = styled.textarea<{ isActive: boolean; noteValue: string }>`
+//   color: ${({ isActive, noteValue }) =>
+//     isActive && noteValue ? "#000000" : "#c0c6cc"};
+//   width: 100%;
+//   height: auto;
+//   border: none;
+//   outline: none;
+//   background: none;
+//   fontweight: 300;
+// `;
+// const FileUploadLabel = styled.label`
+//   cursor: pointer;
+// `;
+// const AddTitleButton = styled.div`
+//   color: #616e88;
+//   cursor: pointer;
+//   fontsize: 0.8rem;
+// `;
+// const Button = styled.button<{
+//   noteValue: string;
+//   isSaveButton: boolean;
+//   isLoading: boolean;
+//   theme: CustomThemeProps;
+//   disabled: boolean;
+// }>`
+//   border: none;
+//   padding: 3px 15px;
+//   text-align: center;
+//   text-decoration: none;
+//   background: ${({ isSaveButton, noteValue, isLoading, theme }) =>
+//     isSaveButton
+//       ? noteValue && !isLoading
+//         ? theme.colors.primary[500]
+//         : theme.colors.primary[500]
+//       : "white"};
+//   color: ${({ isSaveButton, isLoading }) =>
+//     isSaveButton && !isLoading ? "white" : "white"};
+//   font-size: 1rem;
+//   margin-right: 5px;
+//   border-radius: 5px;
+//   opacity: ${({ isSaveButton, noteValue, isLoading, disabled }) =>
+//     isSaveButton && (!noteValue || isLoading || disabled) ? "0.5" : "1"};
+//   cursor: ${({ isSaveButton, noteValue, isLoading, disabled }) =>
+//     isSaveButton && (!noteValue || isLoading || disabled)
+//       ? "initial"
+//       : "pointer"};
+//   pointer-events: ${({ isLoading }) => (isLoading ? "none" : "auto")};
+// `;
+// const CancelButton = styled.button`
+//   border: none;
+//   color: #5e5c5c;
+//   padding: 3px 15px;
+//   text-align: center;
+//   text-decoration: none;
+//   background: white;
+//   font-size: 1rem;
+//   margin-right: 5px;
+//   border-radius: 5px;
+// `;
+// const FileViewer = styled.div`
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+//   width: 300px;
+// `;
+// const FileEdit = styled(X)`
+//   cursor: pointer;
+//   color: #ff0000;
+// `;
+// const ErrorText = styled.div`
+//   color: #ff0000;
+//   font-size: 0.8rem;
+//   margin-top: 8px;
+// `;
+// const countWords = (text: string) => {
+//   return text.trim().split(/\s+/).length;
+// };
+// export default function NoteTextArea({
+//   width = "100%",
+//   handleSubmit,
+//   handleCancel,
+//   value,
+//   title,
+//   file,
+//   isEditable = false,
+//   saveButtonLoading,
+//   maxFileSize = 1 * 1024 * 1024,
+//   maxFilesSizeError = "Some files are too large. Maximum allowed size is",
+//   maxNoteWordCount = 15,
+//   onChange,
+//   ref,
+// }: NoteTextAreaProps) {
+//   const theme = useCustomTheme();
+//   const noteAreaRef = useRef<HTMLTextAreaElement>(null);
+//   const [isActive, setIsActive] = useState<boolean>(false);
+//   const [noteValue, setNoteValue] = useState<string>("");
+//   const [titleValue, setTitleValue] = useState<string>("");
+//   const [titleShow, setTitleShow] = useState<boolean>(false);
+//   const [files, setFiles] = useState<File[]>([]);
+//   const [fileError, setFileError] = useState<string>("");
+//   const [isSaveDisabled, setIsSaveDisabled] = useState(false);
+//   useEffect(() => {
+//     const titleWordCount = countWords(titleValue);
+//     setIsSaveDisabled(titleWordCount > maxNoteWordCount);
+//   }, [titleValue, maxNoteWordCount]);
+//   useEffect(() => {
+//     const noteWordCount = countWords(noteValue);
+//     setIsSaveDisabled(noteWordCount > maxNoteWordCount);
+//   }, [noteValue, maxNoteWordCount]);
+//   useEffect(() => {
+//     if (isEditable) {
+//       setIsActive(true);
+//       if (value) {
+//         setNoteValue(value);
+//       }
+//       if (title) {
+//         setTitleValue(title);
+//         setTitleShow(true);
+//       }
+//       if (file) {
+//         setFiles(file);
+//       }
+//     }
+//   }, [value, title, file, isEditable]);
+//   useEffect(() => {
+//     if (!saveButtonLoading) {
+//       setIsActive(false);
+//       if (!isEditable) {
+//         setNoteValue("");
+//         setTitleValue("");
+//         setTitleShow(false);
+//         setFiles([]);
+//       }
+//     }
+//     if (isEditable) {
+//       setIsActive(true);
+//     }
+//   }, [saveButtonLoading, isEditable]);
+//   const handleTextArea = () => {
+//     setIsActive(true);
+//     if (!isEditable) {
+//       setNoteValue("");
+//       setTitleValue("");
+//       setTitleShow(false);
+//       setFiles([]);
+//     }
+//   };
+//   const handleCloseTextArea = () => {
+//     setIsActive(false);
+//     if (handleCancel) {
+//       handleCancel(!isActive);
+//     }
+//     if (!isEditable) {
+//       setNoteValue("");
+//       setTitleValue("");
+//       setTitleShow(false);
+//       setFiles([]);
+//     }
+//     setFileError("");
+//   };
+//   const handleNoteChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+//     setNoteValue(event.target.value);
+//     onChange?.(event.target.value);
+//     adjustHeight();
+//   };
+//   useEffect(() => {
+//     if (isActive && noteAreaRef.current) {
+//       noteAreaRef.current.focus();
+//     }
+//   }, [isActive]);
+//   const adjustHeight = () => {
+//     const textarea = noteAreaRef.current;
+//     if (!textarea) return;
+//     textarea.style.height = "auto";
+//     textarea.style.height = `${textarea.scrollHeight}px`;
+//   };
+//   const handleSetTitle = () => {
+//     setTitleShow(true);
+//   };
+//   const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+//     event.target.value.length === 0 && setTitleShow(false);
+//     setTitleValue(event.target.value);
+//   };
+//   const formatBytes = (bytes: any, decimals = 2) => {
+//     if (bytes === 0) return "0 Bytes";
+//     const k = 1024;
+//     const dm = decimals < 0 ? 0 : decimals;
+//     const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+//     const i = Math.floor(Math.log(bytes) / Math.log(k));
+//     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+//   };
+//   const shortenFileName = (name: string, maxLength = 20) => {
+//     const extension = name.substring(name.lastIndexOf("."));
+//     if (name.length <= maxLength) return name;
+//     const nameWithoutExtension = name.replace(extension, "");
+//     const start = nameWithoutExtension.substring(
+//       0,
+//       maxLength - extension.length - 3
+//     );
+//     return `${start}...${extension} `;
+//   };
+//   return (
+//     <Container style={{ width }} isActive={isActive}>
+//       <PlaceholderText isActive={!isActive} onClick={handleTextArea}>
+//         <span>Add a note...</span>
+//       </PlaceholderText>
+//       <TextAreaContainer isActive={isActive}>
+//         {titleShow && (
+//           <InputTitle
+//             value={titleValue}
+//             onChange={handleTitleChange}
+//             placeholder="Add a title..."
+//             ref={ref}
+//           />
+//         )}
+//         <NotesTextArea
+//           ref={noteAreaRef}
+//           isActive={isActive}
+//           noteValue={noteValue}
+//           value={noteValue}
+//           onChange={handleNoteChange}
+//           placeholder="Add a note..."
+//         />
+//       </TextAreaContainer>
+//       {isActive && (
+//         <>
+//           <hr style={{ margin: 0 }} />
+//           <div style={{ padding: "12px 15px" }}>
+//             <div style={{ display: "flex", alignItems: "center" }}>
+//               <FileUploadLabel htmlFor="file-upload">
+//                 <Paperclip size={17} />
+//                 <input
+//                   id="file-upload"
+//                   type="file"
+//                   style={{ display: "none" }}
+//                   onChange={(e) => {
+//                     const newFiles = Array.from(e.target.files || []);
+//                     const validFiles = newFiles.filter(
+//                       (file) => file.size <= maxFileSize
+//                     );
+//                     const invalidFiles = newFiles.filter(
+//                       (file) => file.size > maxFileSize
+//                     );
+//                     if (invalidFiles.length > 0) {
+//                       setFileError(
+//                         `${maxFilesSizeError} ${formatBytes(maxFileSize)}.`
+//                       );
+//                     } else {
+//                       setFileError("");
+//                     }
+//                     if (validFiles.length > 0) {
+//                       setFiles((prevFiles) => [...prevFiles, ...validFiles]);
+//                     }
+//                   }}
+//                   multiple
+//                   // onChange={(event) => {
+//                   //   if (event.target.files && event.target.files.length > 0) {
+//                   //     const filesArray = Array.from(event.target.files);
+//                   //     const validFiles = filesArray.filter(
+//                   //       (file) => file.size <= maxFileSize
+//                   //     );
+//                   //     setFiles([...files, ...validFiles]);
+//                   //   }
+//                   // }}
+//                 />
+//               </FileUploadLabel>
+//               {!titleShow && (
+//                 <>
+//                   <div
+//                     style={{
+//                       height: "15px",
+//                       width: "1px",
+//                       backgroundColor: "#c0c6cc",
+//                       marginRight: "5px",
+//                       marginLeft: "5px",
+//                     }}
+//                   ></div>
+//                   <AddTitleButton onClick={handleSetTitle}>
+//                     Add a Title
+//                   </AddTitleButton>
+//                 </>
+//               )}
+//               <div style={{ marginLeft: "auto" }}>
+//                 <CancelButton onClick={handleCloseTextArea}>
+//                   Cancel
+//                 </CancelButton>
+//                 <Button
+//                   isSaveButton={true}
+//                   noteValue={noteValue}
+//                   isLoading={saveButtonLoading}
+//                   disabled={!noteValue || isSaveDisabled}
+//                   theme={theme}
+//                   onClick={() => {
+//                     handleSubmit(noteValue, titleValue, files);
+//                     // handleCloseTextArea();
+//                   }}
+//                 >
+//                   {saveButtonLoading && (
+//                     <span style={{ marginRight: "6px" }}>
+//                       <Spinner
+//                         thickness="2px"
+//                         speed="0.75s"
+//                         emptyColor="gray.200"
+//                         color="blue.500"
+//                         size="xs"
+//                       />
+//                     </span>
+//                   )}
+//                   Save
+//                 </Button>
+//               </div>
+//             </div>
+//             <div style={{ display: "flex", gap: "10px" }}>
+//               <div>Note:</div>
+//               <div>You can add up to {maxNoteWordCount} words only</div>
+//             </div>
+//             {fileError && <ErrorText>{fileError}</ErrorText>}{" "}
+//             {/* Display file error */}
+//             {files.length > 0 && (
+//               <div>
+//                 {files.map((item, index) => (
+//                   <FileViewer key={index}>
+//                     <>
+//                       <span>{shortenFileName(item.name)}</span>
+//                       <span>{formatBytes(item.size)}</span>
+//                     </>
+//                     <FileEdit
+//                       onClick={() =>
+//                         setFiles(files.filter((fileItem) => fileItem !== item))
+//                       }
+//                     />
+//                   </FileViewer>
+//                 ))}
+//               </div>
+//             )}
+//           </div>
+//         </>
+//       )}
+//     </Container>
+//   );
+// }
 var react_1 = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
 var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
-var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: 5px;\n  box-shadow: ", ";\n"], ["\n  border: ", ";\n  border-radius: 5px;\n  box-shadow: ", ";\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return isActive ? "1px solid #3182ce" : "1px solid #c0c6cc";
-}, function (_a) {
-    var isActive = _a.isActive;
-    return isActive
-        ? "-1px 1px 8px 4px rgb(49 130 206 / 24%), 0px 2px 6px 0 rgb(49 130 206 / 19%)"
-        : "none";
-});
-var TextAreaContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  cursor: text;\n  padding: 12px 15px;\n  display: ", ";\n"], ["\n  width: 100%;\n  cursor: text;\n  padding: 12px 15px;\n  display: ", ";\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return (isActive ? "block" : "none");
-});
-var PlaceholderText = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #c0c6cc;\n  width: 100%;\n  cursor: text;\n  display: ", ";\n  padding: 12px 15px;\n"], ["\n  color: #c0c6cc;\n  width: 100%;\n  cursor: text;\n  display: ", ";\n  padding: 12px 15px;\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return (isActive ? "block" : "none");
-});
-var InputTitle = styled_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border: none;\n  outline: none;\n  background: none;\n  color: black;\n  fontsize: 1rem;\n  fontweight: 500;\n  marginbottom: 2px;\n"], ["\n  width: 100%;\n  height: auto;\n  border: none;\n  outline: none;\n  background: none;\n  color: black;\n  fontsize: 1rem;\n  fontweight: 500;\n  marginbottom: 2px;\n"])));
-var NotesTextArea = styled_1.default.textarea(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  width: 100%;\n  height: auto;\n  border: none;\n  outline: none;\n  background: none;\n  fontweight: 300;\n"], ["\n  color: ", ";\n  width: 100%;\n  height: auto;\n  border: none;\n  outline: none;\n  background: none;\n  fontweight: 300;\n"])), function (_a) {
-    var isActive = _a.isActive, noteValue = _a.noteValue;
-    return isActive && noteValue ? "#000000" : "#c0c6cc";
-});
-var FileUploadLabel = styled_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var AddTitleButton = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: #616e88;\n  cursor: pointer;\n  fontsize: 0.8rem;\n"], ["\n  color: #616e88;\n  cursor: pointer;\n  fontsize: 0.8rem;\n"])));
-var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: none;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: ", ";\n  color: ", ";\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n"], ["\n  border: none;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: ", ";\n  color: ", ";\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n"])), function (_a) {
-    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, theme = _a.theme;
-    return isSaveButton
-        ? noteValue && !isLoading
-            ? theme.colors.primary[500]
-            : theme.colors.primary[500]
-        : "white";
-}, function (_a) {
-    var isSaveButton = _a.isSaveButton, isLoading = _a.isLoading;
-    return isSaveButton && !isLoading ? "white" : "white";
-}, function (_a) {
-    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, disabled = _a.disabled;
-    return isSaveButton && (!noteValue || isLoading || disabled) ? "0.5" : "1";
-}, function (_a) {
-    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, disabled = _a.disabled;
-    return isSaveButton && (!noteValue || isLoading || disabled)
-        ? "initial"
-        : "pointer";
-}, function (_a) {
-    var isLoading = _a.isLoading;
-    return (isLoading ? "none" : "auto");
-});
-var CancelButton = styled_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border: none;\n  color: #5e5c5c;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: white;\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n"], ["\n  border: none;\n  color: #5e5c5c;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: white;\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n"])));
-var FileViewer = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 300px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 300px;\n"])));
-var FileEdit = (0, styled_1.default)(lucide_react_1.X)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  cursor: pointer;\n  color: #ff0000;\n"], ["\n  cursor: pointer;\n  color: #ff0000;\n"])));
-var ErrorText = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: #ff0000;\n  font-size: 0.8rem;\n  margin-top: 8px;\n"], ["\n  color: #ff0000;\n  font-size: 0.8rem;\n  margin-top: 8px;\n"])));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var countWords = function (text) {
-    return text.trim().split(/\s+/).length;
+    if (text === void 0) { text = ""; }
+    var t = text.trim();
+    if (!t)
+        return 0;
+    return t.split(/\s+/).length;
 };
 function NoteTextArea(_a) {
-    var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c, saveButtonLoading = _a.saveButtonLoading, _d = _a.maxFileSize, maxFileSize = _d === void 0 ? 1 * 1024 * 1024 : _d, _e = _a.maxFilesSizeError, maxFilesSizeError = _e === void 0 ? "Some files are too large. Maximum allowed size is" : _e, _f = _a.maxNoteWordCount, maxNoteWordCount = _f === void 0 ? 15 : _f, onChange = _a.onChange, ref = _a.ref;
+    var _b;
+    var _c = _a.width, width = _c === void 0 ? "100%" : _c, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _d = _a.isEditable, isEditable = _d === void 0 ? false : _d, saveButtonLoading = _a.saveButtonLoading, _e = _a.maxFileSize, maxFileSize = _e === void 0 ? 1 * 1024 * 1024 : _e, _f = _a.maxFilesSizeError, maxFilesSizeError = _f === void 0 ? "Some files are too large. Maximum allowed size is" : _f, _g = _a.maxNoteWordCount, maxNoteWordCount = _g === void 0 ? 15 : _g, onChange = _a.onChange, inputRef = _a.ref;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var noteAreaRef = (0, react_1.useRef)(null);
-    var _g = (0, react_1.useState)(false), isActive = _g[0], setIsActive = _g[1];
-    var _h = (0, react_1.useState)(""), noteValue = _h[0], setNoteValue = _h[1];
-    var _j = (0, react_1.useState)(""), titleValue = _j[0], setTitleValue = _j[1];
-    var _k = (0, react_1.useState)(false), titleShow = _k[0], setTitleShow = _k[1];
-    var _l = (0, react_1.useState)([]), files = _l[0], setFiles = _l[1];
-    var _m = (0, react_1.useState)(""), fileError = _m[0], setFileError = _m[1];
-    var _o = (0, react_1.useState)(false), isSaveDisabled = _o[0], setIsSaveDisabled = _o[1];
+    var _h = (0, react_1.useState)(false), isActive = _h[0], setIsActive = _h[1];
+    var _j = (0, react_1.useState)(""), noteValue = _j[0], setNoteValue = _j[1];
+    var _k = (0, react_1.useState)(""), titleValue = _k[0], setTitleValue = _k[1];
+    var _l = (0, react_1.useState)(false), titleShow = _l[0], setTitleShow = _l[1];
+    var _m = (0, react_1.useState)([]), files = _m[0], setFiles = _m[1];
+    var _o = (0, react_1.useState)(""), fileError = _o[0], setFileError = _o[1];
+    var _p = (0, react_1.useState)(false), isSaveDisabled = _p[0], setIsSaveDisabled = _p[1];
     (0, react_1.useEffect)(function () {
-        var titleWordCount = countWords(titleValue);
-        setIsSaveDisabled(titleWordCount > maxNoteWordCount);
+        setIsSaveDisabled(countWords(titleValue) > maxNoteWordCount);
     }, [titleValue, maxNoteWordCount]);
     (0, react_1.useEffect)(function () {
-        var noteWordCount = countWords(noteValue);
-        setIsSaveDisabled(noteWordCount > maxNoteWordCount);
+        setIsSaveDisabled(countWords(noteValue) > maxNoteWordCount);
     }, [noteValue, maxNoteWordCount]);
     (0, react_1.useEffect)(function () {
         if (isEditable) {
             setIsActive(true);
-            if (value) {
+            if (value)
                 setNoteValue(value);
-            }
             if (title) {
                 setTitleValue(title);
                 setTitleShow(true);
             }
-            if (file) {
-                setFiles(file);
-            }
+            if (file)
+                setFiles(Array.isArray(file) ? file : []);
         }
     }, [value, title, file, isEditable]);
     (0, react_1.useEffect)(function () {
         if (!saveButtonLoading) {
-            setIsActive(false);
+            // keep previous behavior: reset only if not editable
             if (!isEditable) {
+                setIsActive(false);
                 setNoteValue("");
                 setTitleValue("");
                 setTitleShow(false);
                 setFiles([]);
             }
         }
-        if (isEditable) {
+        if (isEditable)
             setIsActive(true);
-        }
     }, [saveButtonLoading, isEditable]);
+    (0, react_1.useEffect)(function () {
+        if (isActive && noteAreaRef.current) {
+            // ensure textarea fits content
+            noteAreaRef.current.style.height = "auto";
+            noteAreaRef.current.style.height = "".concat(noteAreaRef.current.scrollHeight, "px");
+            noteAreaRef.current.focus();
+        }
+    }, [isActive]);
+    var adjustHeight = function () {
+        var t = noteAreaRef.current;
+        if (!t)
+            return;
+        t.style.height = "auto";
+        t.style.height = "".concat(t.scrollHeight, "px");
+    };
     var handleTextArea = function () {
         setIsActive(true);
         if (!isEditable) {
@@ -156,9 +495,7 @@ function NoteTextArea(_a) {
     };
     var handleCloseTextArea = function () {
         setIsActive(false);
-        if (handleCancel) {
-            handleCancel(!isActive);
-        }
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel(!isActive);
         if (!isEditable) {
             setNoteValue("");
             setTitleValue("");
@@ -167,108 +504,92 @@ function NoteTextArea(_a) {
         }
         setFileError("");
     };
-    var handleNoteChange = function (event) {
-        setNoteValue(event.target.value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
+    var handleNoteChange = function (e) {
+        setNoteValue(e.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
         adjustHeight();
     };
-    (0, react_1.useEffect)(function () {
-        if (isActive && noteAreaRef.current) {
-            noteAreaRef.current.focus();
-        }
-    }, [isActive]);
-    var adjustHeight = function () {
-        var textarea = noteAreaRef.current;
-        if (!textarea)
-            return;
-        textarea.style.height = "auto";
-        textarea.style.height = "".concat(textarea.scrollHeight, "px");
-    };
-    var handleSetTitle = function () {
-        setTitleShow(true);
-    };
-    var handleTitleChange = function (event) {
-        event.target.value.length === 0 && setTitleShow(false);
-        setTitleValue(event.target.value);
-    };
     var formatBytes = function (bytes, decimals) {
         if (decimals === void 0) { decimals = 2; }
         if (bytes === 0)
             return "0 Bytes";
         var k = 1024;
         var dm = decimals < 0 ? 0 : decimals;
-        var sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+        var sizes = ["Bytes", "KB", "MB", "GB"];
         var i = Math.floor(Math.log(bytes) / Math.log(k));
         return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
     };
     var shortenFileName = function (name, maxLength) {
-        if (maxLength === void 0) { maxLength = 20; }
+        if (maxLength === void 0) { maxLength = 24; }
         var extension = name.substring(name.lastIndexOf("."));
         if (name.length <= maxLength)
             return name;
         var nameWithoutExtension = name.replace(extension, "");
         var start = nameWithoutExtension.substring(0, maxLength - extension.length - 3);
-        return "".concat(start, "...").concat(extension, " ");
+        return "".concat(start, "...").concat(extension);
     };
-    return (react_1.default.createElement(Container, { style: { width: width }, isActive: isActive },
-        react_1.default.createElement(PlaceholderText, { isActive: !isActive, onClick: handleTextArea },
-            react_1.default.createElement("span", null, "Add a note...")),
-        react_1.default.createElement(TextAreaContainer, { isActive: isActive },
-            titleShow && (react_1.default.createElement(InputTitle, { value: titleValue, onChange: handleTitleChange, placeholder: "Add a title...", ref: ref })),
-            react_1.default.createElement(NotesTextArea, { ref: noteAreaRef, isActive: isActive, noteValue: noteValue, value: noteValue, onChange: handleNoteChange, placeholder: "Add a note..." })),
+    return (react_1.default.createElement(react_2.Box, { w: width, borderRadius: "0.25rem", overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[300] : theme.colors.gray[200], bg: isActive ? theme.colors.gray[50] : "transparent", boxShadow: isActive ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.primary) : "none" },
+        !isActive && (react_1.default.createElement(react_2.Flex, { px: 4, 
+            //  py={4}
+            align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.white, borderRadius: "0.25rem", minH: "44px" },
+            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[300], fontStyle: "italic", fontSize: "md" }, "Add a note..."))),
         isActive && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("hr", { style: { margin: 0 } }),
-            react_1.default.createElement("div", { style: { padding: "12px 15px" } },
-                react_1.default.createElement("div", { style: { display: "flex", alignItems: "center" } },
-                    react_1.default.createElement(FileUploadLabel, { htmlFor: "file-upload" },
-                        react_1.default.createElement(lucide_react_1.Paperclip, { size: 17 }),
-                        react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (e) {
-                                var newFiles = Array.from(e.target.files || []);
-                                var validFiles = newFiles.filter(function (file) { return file.size <= maxFileSize; });
-                                var invalidFiles = newFiles.filter(function (file) { return file.size > maxFileSize; });
-                                if (invalidFiles.length > 0) {
-                                    setFileError("".concat(maxFilesSizeError, " ").concat(formatBytes(maxFileSize), "."));
-                                }
-                                else {
-                                    setFileError("");
-                                }
-                                if (validFiles.length > 0) {
-                                    setFiles(function (prevFiles) { return __spreadArray(__spreadArray([], prevFiles, true), validFiles, true); });
-                                }
-                            }, multiple: true })),
-                    !titleShow && (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("div", { style: {
-                                height: "15px",
-                                width: "1px",
-                                backgroundColor: "#c0c6cc",
-                                marginRight: "5px",
-                                marginLeft: "5px",
-                            } }),
-                        react_1.default.createElement(AddTitleButton, { onClick: handleSetTitle }, "Add a Title"))),
-                    react_1.default.createElement("div", { style: { marginLeft: "auto" } },
-                        react_1.default.createElement(CancelButton, { onClick: handleCloseTextArea }, "Cancel"),
-                        react_1.default.createElement(Button, { isSaveButton: true, noteValue: noteValue, isLoading: saveButtonLoading, disabled: !noteValue || isSaveDisabled, theme: theme, onClick: function () {
-                                handleSubmit(noteValue, titleValue, files);
-                                // handleCloseTextArea();
-                            } },
-                            saveButtonLoading && (react_1.default.createElement("span", { style: { marginRight: "6px" } },
-                                react_1.default.createElement(react_2.Spinner, { thickness: "2px", speed: "0.75s", emptyColor: "gray.200", color: "blue.500", size: "xs" }))),
+            react_1.default.createElement(react_2.Box, { bg: theme.colors.white },
+                titleShow && (react_1.default.createElement(react_2.Input, { ref: inputRef, value: titleValue, onChange: function (e) {
+                        if (e.target.value.length === 0)
+                            setTitleShow(false);
+                        setTitleValue(e.target.value);
+                    }, placeholder: "Add a title...", variant: "unstyled", pl: 3, pt: 0, pr: 0, pb: 0, fontWeight: 500, fontSize: "0.95rem", _placeholder: {
+                        fontStyle: "italic",
+                        color: theme.colors.gray[300],
+                        background: theme.colors.white,
+                    } })),
+                react_1.default.createElement(react_2.Box, { bg: theme.colors.white, 
+                    // borderRadius="6px"
+                    // border="1px solid"
+                    // borderColor="gray.100"
+                    minH: "80px", pl: 3, pt: 2, position: "relative" },
+                    react_1.default.createElement(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: "Add a note...", variant: "unstyled", resize: "none", minH: "80px", _placeholder: { fontStyle: "italic", color: theme.colors.gray[300] }, style: { overflow: "hidden" }, p: 0 }))),
+            react_1.default.createElement(react_2.Divider, null),
+            react_1.default.createElement(react_2.Box, { px: 4, py: 3 },
+                react_1.default.createElement(react_2.Flex, { align: "center" },
+                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 3 },
+                        react_1.default.createElement(react_2.Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", gap: 2 },
+                            react_1.default.createElement(lucide_react_1.Paperclip, { size: 18 })),
+                        react_1.default.createElement(react_2.Box, { h: "18px", w: "1px", bg: theme.colors.gray[200] }),
+                        !titleShow ? (react_1.default.createElement(react_2.Text, { onClick: function () { return setTitleShow(true); }, cursor: "pointer", color: theme.colors.gray[600], fontWeight: 500, fontSize: "sm" }, "Add a Title")) : (react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], fontSize: "sm", fontWeight: 500 }, titleValue ? titleValue : "Title"))),
+                    react_1.default.createElement(react_2.Flex, { ml: "auto", gap: 3, align: "center" },
+                        react_1.default.createElement(react_2.Button, { variant: "ghost", colorScheme: "gray", borderRadius: "6px", onClick: handleCloseTextArea, _hover: { bg: "transparent" } }, "Cancel"),
+                        react_1.default.createElement(react_2.Button, { colorScheme: "purple", borderRadius: "8px", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: function () { return handleSubmit(noteValue, titleValue, files); } },
+                            saveButtonLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null,
                             "Save"))),
-                react_1.default.createElement("div", { style: { display: "flex", gap: "10px" } },
-                    react_1.default.createElement("div", null, "Note:"),
-                    react_1.default.createElement("div", null,
+                react_1.default.createElement(react_2.Flex, { mt: 3, gap: 2, align: "center", color: theme.colors.gray[600], fontSize: "sm" },
+                    react_1.default.createElement(react_2.Text, { fontWeight: 600 }, "Note:"),
+                    react_1.default.createElement(react_2.Text, null,
                         "You can add up to ",
                         maxNoteWordCount,
                         " words only")),
-                fileError && react_1.default.createElement(ErrorText, null, fileError),
-                " ",
-                files.length > 0 && (react_1.default.createElement("div", null, files.map(function (item, index) { return (react_1.default.createElement(FileViewer, { key: index },
-                    react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("span", null, shortenFileName(item.name)),
-                        react_1.default.createElement("span", null, formatBytes(item.size))),
-                    react_1.default.createElement(FileEdit, { onClick: function () {
-                            return setFiles(files.filter(function (fileItem) { return fileItem !== item; }));
+                react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (e) {
+                        var newFiles = Array.from(e.target.files || []);
+                        var validFiles = newFiles.filter(function (f) { return f.size <= maxFileSize; });
+                        var invalidFiles = newFiles.filter(function (f) { return f.size > maxFileSize; });
+                        if (invalidFiles.length > 0) {
+                            setFileError("".concat(maxFilesSizeError, " ").concat(formatBytes(maxFileSize), "."));
+                        }
+                        else {
+                            setFileError("");
+                        }
+                        if (validFiles.length > 0) {
+                            setFiles(function (prev) { return __spreadArray(__spreadArray([], prev, true), validFiles, true); });
+                        }
+                    }, multiple: true }),
+                fileError && (react_1.default.createElement(react_2.Text, { color: theme.colors.red[500], mt: 2, fontSize: "sm" }, fileError)),
+                files.length > 0 && (react_1.default.createElement(react_2.Box, { mt: 3 }, files.map(function (f, idx) { return (react_1.default.createElement(react_2.Flex, { key: idx, align: "center", justify: "space-between", w: "320px", mb: 2 },
+                    react_1.default.createElement(react_2.Flex, { gap: 3, align: "center" },
+                        react_1.default.createElement(react_2.Text, { fontSize: "sm" }, shortenFileName(f.name)),
+                        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, formatBytes(f.size))),
+                    react_1.default.createElement(lucide_react_1.X, { size: 16, cursor: "pointer", color: theme.colors.red[600], onClick: function () {
+                            return setFiles(function (prev) { return prev.filter(function (fileItem) { return fileItem !== f; }); });
                         } }))); }))))))));
 }
 exports.default = NoteTextArea;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;