sprint-asia-custom-component 0.1.73 → 0.1.74

package/dist/index.js

@@ -23816,14 +23816,17 @@
     endDate,
     onChangeEndDate,
     isRequired,
-    title
+    title,
+    className
   }) => {
     const onChange = dates => {
       const [start, end] = dates;
       onChangeStartDate(start);
       onChangeEndDate(end);
     };
-    return /*#__PURE__*/React__default["default"].createElement("div", null, title && /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `w-full ${className}`
+    }, title && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-sm font-normal text-black mb-1"

package/package.json

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

package/src/components/datepicker/index.js

@@ -1,46 +1,42 @@
 import React from "react";
 import DatePicker from "react-datepicker";
-import 'react-datepicker/dist/react-datepicker.css';
+import "react-datepicker/dist/react-datepicker.css";
 import { PiCalendarBlankDuotone } from "react-icons/pi";
 
-const CustomDatePicker = ({
-    startDate,
-    onChangeStartDate,
-    endDate,
-    onChangeEndDate,
-    isRequired,
-    title
-}) => {
-    const onChange = (dates) => {
-        const [start, end] = dates
-        onChangeStartDate(start)
-        onChangeEndDate(end)
-    };
+const CustomDatePicker = ({ startDate, onChangeStartDate, endDate, onChangeEndDate, isRequired, title, className }) => {
+  const onChange = (dates) => {
+    const [start, end] = dates;
+    onChangeStartDate(start);
+    onChangeEndDate(end);
+  };
 
   return (
-    <div>
-        {title && (
-            <div className="flex">
-                <p className="text-sm font-normal text-black mb-1">{title}</p>
-                {isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
-            </div>
-        )}
-        <div className="cursor-pointer py-1 border border-neutral40 bg-neutral20 rounded-md w-fit flex items-center">
-            <div className="p-2">
-                <PiCalendarBlankDuotone size={16} className="text-neutral300"/>
-            </div>
-            <DatePicker
-                selected={startDate}
-                onChange={onChange}
-                startDate={startDate}
-                endDate={endDate}
-                selectsRange
-                utcOffset={0}
-                dateFormat="d MMM yyyy"
-                className="cursor-pointer bg-neutral20 text-neutral300 rounded-md pr-2 focus:outline-none text-sm"
-            />
+    <div className={`w-full ${className}`}>
+      {title && (
+        <div className="flex">
+          <p className="text-sm font-normal text-black mb-1">{title}</p>
+          {isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
         </div>
+      )}
+
+      <div className="cursor-pointer py-1 border border-neutral40 bg-neutral20 rounded-md w-fit flex items-center">
+        <div className="p-2">
+          <PiCalendarBlankDuotone size={16} className="text-neutral300" />
+        </div>
+
+        <DatePicker
+          selected={startDate}
+          onChange={onChange}
+          startDate={startDate}
+          endDate={endDate}
+          selectsRange
+          utcOffset={0}
+          dateFormat="d MMM yyyy"
+          className="cursor-pointer bg-neutral20 text-neutral300 rounded-md pr-2 focus:outline-none text-sm"
+        />
+      </div>
     </div>
-)}
+  );
+};
 
-export default CustomDatePicker;
+export default CustomDatePicker;