sprint-asia-custom-component 0.1.108 → 0.1.111

package/dist/index.js

@@ -24138,7 +24138,8 @@
       type: "button",
       className: `
                         ${!isEdited && "bg-neutral30 cursor-not-allowed"} 
-                        ${mode === "default" && "border-neutral50 bg-neutral20 cursor-pointer"} 
+                        ${mode === "default" && currentOption === "" && "border-neutral50 bg-neutral20 cursor-pointer"} 
+                        ${mode === "default" && currentOption !== "" && "border-black bg-neutral20 cursor-pointer"} 
                         ${mode === "danger" && "border-danger500 bg-danger50 cursor-pointer"} 
                         flex items-center w-full py-2.5 text-left px-4 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden`,
       onClick: () => isEdited && handleToggleDropdownText()
@@ -44216,15 +44217,15 @@
   const ModalState = ({
     isOpen = false,
     onClose = () => {},
-    title = 'Title Modal',
-    subtitle = 'Subtitle Modal',
-    type = 'default',
+    title = "Title Modal",
+    subtitle = "Subtitle Modal",
+    type = "default",
     addition = "state",
     placeholderTextArea,
     onChangeTextArea,
     valueTextArea,
-    titleButtonLeft = 'Cancel',
-    titleButtonRight = 'Okay',
+    titleButtonLeft = "Cancel",
+    titleButtonRight = "Okay",
     leftAction = onClose,
     rightAction = onClose,
     fileUploaded,
@@ -44233,12 +44234,12 @@
     const cancelButtonRef = React.useRef(null);
     React.useState(false);
     const isButtonActive = () => {
-      if (addition === 'textarea') {
+      if (addition === "textarea") {
         // Check if valueTextArea is a string before calling .trim()
-        return typeof valueTextArea === 'string' && valueTextArea.trim() !== '';
-      } else if (addition === 'dropzone&input') {
-        return fileUploaded && typeof textInputValue === 'string' && textInputValue.trim() !== '';
-      } else if (addition === 'state') {
+        return typeof valueTextArea === "string" && valueTextArea.trim() !== "";
+      } else if (addition === "dropzone&input") {
+        return fileUploaded && typeof textInputValue === "string" && textInputValue.trim() !== "";
+      } else if (addition === "state") {
         return true;
       }
       return false;
@@ -44253,7 +44254,7 @@
       as: "div",
       className: "fixed inset-0 overflow-y-auto z-50",
       initialFocus: cancelButtonRef,
-      onClose: () => isOpen,
+      onClose: onClose,
       static: false
     }, /*#__PURE__*/React__default["default"].createElement(qe.Child, {
       as: React.Fragment,
@@ -44313,7 +44314,7 @@
       className: "bg-gray-50 px-4 sm:flex sm:flex-row-reverse"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "my-3"
-    }, type === 'default' ? /*#__PURE__*/React__default["default"].createElement("div", {
+    }, type === "default" ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ml-2"
     }, /*#__PURE__*/React__default["default"].createElement(PrimaryButton, {
       title: titleButtonRight,
@@ -47905,7 +47906,7 @@
     onClickRightButton
   }) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white z-50"
+      className: "fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex items-center mr-48"
     }, isActiveLeftButton && /*#__PURE__*/React__default["default"].createElement("div", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.108",
+  "version": "0.1.111",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/dropdown/dropdownText/index.js

@@ -61,7 +61,8 @@ const DropdownText = ({
             type="button"
             className={`
                         ${!isEdited && "bg-neutral30 cursor-not-allowed"} 
-                        ${mode === "default" && "border-neutral50 bg-neutral20 cursor-pointer"} 
+                        ${mode === "default" && currentOption === "" && "border-neutral50 bg-neutral20 cursor-pointer"} 
+                        ${mode === "default" && currentOption !== "" && "border-black bg-neutral20 cursor-pointer"} 
                         ${mode === "danger" && "border-danger500 bg-danger50 cursor-pointer"} 
                         flex items-center w-full py-2.5 text-left px-4 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden`}
             onClick={() => isEdited && handleToggleDropdownText()}

package/src/components/footer/index.js

@@ -15,7 +15,7 @@ const Footer = ({
   onClickRightButton,
 }) => {
   return (
-    <div className="fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white z-50">
+    <div className="fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white">
       <div className="flex items-center mr-48">
         {isActiveLeftButton && (
           <div className="m-1">

package/src/components/modal/modalState/index.js

@@ -1,143 +1,154 @@
-import React from 'react'
-import { Fragment, useRef, useState, useEffect } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
-import PrimaryButton from '../../button/primarybutton';
-import OutlineButton from '../../button/outlinebutton';
-import DangerButton from '../../button/dangerbutton';
-import Dropzone from '../../dropzone/uploadfile';
-import TextInput from '../../textinput';
-import TextEditor from '../../texteditor';
+import React from "react";
+import { Fragment, useRef, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import PrimaryButton from "../../button/primarybutton";
+import OutlineButton from "../../button/outlinebutton";
+import DangerButton from "../../button/dangerbutton";
+import Dropzone from "../../dropzone/uploadfile";
+import TextInput from "../../textinput";
+import TextEditor from "../../texteditor";
 
 const ModalState = ({
-    isOpen = false,
-    onClose = () => {},
-    title = 'Title Modal',
-    subtitle = 'Subtitle Modal',
-    type = 'default',
-    addition = "state",
-    placeholderTextArea,
-    onChangeTextArea,
-    valueTextArea,
-    titleButtonLeft = 'Cancel',
-    titleButtonRight = 'Okay',
-    leftAction = onClose,
-    rightAction = onClose,
-    fileUploaded,
-    textInputValue,
-
+  isOpen = false,
+  onClose = () => {},
+  title = "Title Modal",
+  subtitle = "Subtitle Modal",
+  type = "default",
+  addition = "state",
+  placeholderTextArea,
+  onChangeTextArea,
+  valueTextArea,
+  titleButtonLeft = "Cancel",
+  titleButtonRight = "Okay",
+  leftAction = onClose,
+  rightAction = onClose,
+  fileUploaded,
+  textInputValue,
 }) => {
-    const cancelButtonRef = useRef(null);
-    const [isActive, setIsActive] = useState(false);
-
-    const isButtonActive = () => {
-        if (addition === 'textarea') {
-          // Check if valueTextArea is a string before calling .trim()
-          return typeof valueTextArea === 'string' && valueTextArea.trim() !== '';
-        } 
-        else if (addition === 'dropzone&input') {
-          return fileUploaded && typeof textInputValue === 'string' && textInputValue.trim() !== '';
-        }
-        else if (addition === 'state') {
-            return true
-        }
-        return false;
-      };
-
+  const cancelButtonRef = useRef(null);
+  const [isActive, setIsActive] = useState(false);
 
-    function handleBackgroundClick(e) {
-        e.stopPropagation()
+  const isButtonActive = () => {
+    if (addition === "textarea") {
+      // Check if valueTextArea is a string before calling .trim()
+      return typeof valueTextArea === "string" && valueTextArea.trim() !== "";
+    } else if (addition === "dropzone&input") {
+      return fileUploaded && typeof textInputValue === "string" && textInputValue.trim() !== "";
+    } else if (addition === "state") {
+      return true;
     }
+    return false;
+  };
+
+  function handleBackgroundClick(e) {
+    e.stopPropagation();
+  }
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
-        <Dialog as="div" className="fixed inset-0 overflow-y-auto z-50" initialFocus={cancelButtonRef} onClose={() => isOpen} static={false}>
-            <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0"
-                enterTo="opacity-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-            >
-                <div className="fixed inset-0 bg-black bg-opacity-25" onClick={handleBackgroundClick}/>
-            </Transition.Child>
+      <Dialog
+        as="div"
+        className="fixed inset-0 overflow-y-auto z-50"
+        initialFocus={cancelButtonRef}
+        onClose={onClose}
+        static={false}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-25" onClick={handleBackgroundClick} />
+        </Transition.Child>
 
-            <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-                <div className="min-h-screen flex items-center justify-center">
-                    <Dialog.Panel className="relative w-full max-w-lg bg-white rounded-lg shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                        <div className="flex justify-between py-3 px-6">
-                            <p className="font-semibold text-xl text-black">{title}</p>
-                            <p className="cursor-pointer text-xl" onClick={onClose}>
-                            x
-                            </p>
-                        </div>
-                        <div className="border-t border-b border-neutral30 py-6">
-                            <p className="font-normal text-lg text-neutral500 px-6">{subtitle}</p>
-                            {
-                                addition == "textarea" && 
-                                    <div className='py-3 px-6'>
-                                        <textarea
-                                            value={valueTextArea}
-                                            onChange={onChangeTextArea}
-                                            placeholder={placeholderTextArea}
-                                            className="w-full p-3.5 text-sm text-neutral300 border border-neutral50 rounded-md bg-neutral20 focus:outline-none"
-                                        />
-                                    </div>
-                            }
-                            {
-                            addition == "dropzone&input" && 
-                                <div className='py-3 px-6'>
-                                    <div>
-                                        <Dropzone />
-                                    </div>
-                                    <div className='pt-3'>
-                                        <TextInput title='Limit Amount'/>
-                                    </div>
-                                </div>
-                            }
-                            {
-                            addition === "texteditor" && 
-                            <div className='py-3 px-6'>
-                                <TextEditor
-                                    value={valueTextArea}
-                                    onChange={onChangeTextArea}
-                                    title="Your Decline Reason"
-                                    placeholder="Please provide a detailed reason for the decline."
-                                />
-                            </div>
-                            }
-                        </div>
-                        <div className="bg-gray-50 px-4 sm:flex sm:flex-row-reverse">
-                            <div className="my-3">
-                                {type === 'default' ? (
-                                    <div className='ml-2'>
-                                        <PrimaryButton title={titleButtonRight} type="wrap" size="large" onClick={rightAction} isActive={isButtonActive()} />
-                                    </div>
-                                ) : (
-                                    <div className='ml-2'>
-                                        <DangerButton title={titleButtonRight} type="wrap" size="large" onClick={rightAction} isActive={isButtonActive()}/>
-                                    </div>
-                                )}
-                            </div>
-                            <div className="mt-3">
-                                <OutlineButton title={titleButtonLeft} type="full" size="large" onClick={leftAction} />
-                            </div>
-                        </div>
-                    </Dialog.Panel>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enterTo="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+          leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <div className="min-h-screen flex items-center justify-center">
+            <Dialog.Panel className="relative w-full max-w-lg bg-white rounded-lg shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <div className="flex justify-between py-3 px-6">
+                <p className="font-semibold text-xl text-black">{title}</p>
+                <p className="cursor-pointer text-xl" onClick={onClose}>
+                  x
+                </p>
+              </div>
+              <div className="border-t border-b border-neutral30 py-6">
+                <p className="font-normal text-lg text-neutral500 px-6">{subtitle}</p>
+                {addition == "textarea" && (
+                  <div className="py-3 px-6">
+                    <textarea
+                      value={valueTextArea}
+                      onChange={onChangeTextArea}
+                      placeholder={placeholderTextArea}
+                      className="w-full p-3.5 text-sm text-neutral300 border border-neutral50 rounded-md bg-neutral20 focus:outline-none"
+                    />
+                  </div>
+                )}
+                {addition == "dropzone&input" && (
+                  <div className="py-3 px-6">
+                    <div>
+                      <Dropzone />
+                    </div>
+                    <div className="pt-3">
+                      <TextInput title="Limit Amount" />
+                    </div>
+                  </div>
+                )}
+                {addition === "texteditor" && (
+                  <div className="py-3 px-6">
+                    <TextEditor
+                      value={valueTextArea}
+                      onChange={onChangeTextArea}
+                      title="Your Decline Reason"
+                      placeholder="Please provide a detailed reason for the decline."
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="bg-gray-50 px-4 sm:flex sm:flex-row-reverse">
+                <div className="my-3">
+                  {type === "default" ? (
+                    <div className="ml-2">
+                      <PrimaryButton
+                        title={titleButtonRight}
+                        type="wrap"
+                        size="large"
+                        onClick={rightAction}
+                        isActive={isButtonActive()}
+                      />
+                    </div>
+                  ) : (
+                    <div className="ml-2">
+                      <DangerButton
+                        title={titleButtonRight}
+                        type="wrap"
+                        size="large"
+                        onClick={rightAction}
+                        isActive={isButtonActive()}
+                      />
+                    </div>
+                  )}
+                </div>
+                <div className="mt-3">
+                  <OutlineButton title={titleButtonLeft} type="full" size="large" onClick={leftAction} />
                 </div>
-            </Transition.Child>
-        </Dialog>
+              </div>
+            </Dialog.Panel>
+          </div>
+        </Transition.Child>
+      </Dialog>
     </Transition.Root>
   );
 };
 
-export default ModalState;
+export default ModalState;