@flozy/editor 8.0.1 → 8.0.2

package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js

@@ -1,6 +1,9 @@
 import React from "react";
 import DatePicker from "react-datepicker";
 import { useDataView } from "../../Providers/DataViewProvider";
+import { Grid } from "@mui/material";
+import useCommonStyle from "../../../../commonStyle";
+import { useEditorContext } from "../../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 function isValidDate(dateString) {
   const date = new Date(dateString);
@@ -16,20 +19,27 @@ const DateType = props => {
   const {
     onChange
   } = useDataView();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const handleChange = date => {
     onChange(rowIndex, {
       [property]: date
     });
   };
-  return /*#__PURE__*/_jsx(DatePicker, {
-    disabled: readOnly,
-    selected: isValidDate(value) ? new Date(value) : "",
-    onChange: handleChange,
-    onKeyDown: e => {
-      e.preventDefault();
-      console.log(e?.target.value);
-    },
-    placeholderText: "MM/DD/YYYY"
+  return /*#__PURE__*/_jsx(Grid, {
+    sx: classes.datePicker,
+    children: /*#__PURE__*/_jsx(DatePicker, {
+      disabled: readOnly,
+      selected: isValidDate(value) ? new Date(value) : "",
+      onChange: handleChange,
+      onKeyDown: e => {
+        e.preventDefault();
+        console.log(e?.target.value);
+      },
+      placeholderText: "MM/DD/YYYY"
+    })
   });
 };
 export default DateType;

package/dist/Editor/commonStyle.js

@@ -428,16 +428,71 @@ const useCommonStyle = theme => ({
       width: "100%",
       "& .react-datepicker__input-container": {
         "& .MuiInputBase-root": {
-          background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+          backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
           "& .MuiInputBase-input": {
-            background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
-            color: `${theme?.palette?.editor?.textColor} !important`
+            backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+            color: theme?.palette?.editor?.textColor + " !important"
           },
           "& .MuiOutlinedInput-notchedOutline": {
-            border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder} !important`
+            border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder || theme?.palette?.divider} !important`,
+            borderRadius: "10px"
+          },
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: theme?.palette?.primary?.main
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: theme?.palette?.primary?.dark
           }
         }
       }
+    },
+    "& .react-datepicker": {
+      backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+      // borderRadius: "10px",
+      border: `1px solid ${theme?.palette?.divider || "#ccc"}`,
+      boxShadow: "2px 4px 8px rgba(0, 0, 0, 0.4)",
+      color: theme?.palette?.editor?.textColor + " !important"
+    },
+    "& .react-datepicker__header": {
+      backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+      borderBottom: `1px solid ${theme?.palette?.divider || "#ddd"}`,
+      color: theme?.palette?.editor?.textColor + " !important"
+    },
+    "& .react-datepicker__day": {
+      color: theme?.palette?.editor?.textColor,
+      "&:hover": {
+        backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground,
+        color: theme?.palette?.editor?.textColor || "#fff"
+      }
+    },
+    "& .react-datepicker__current-month": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .react-datepicker__day-name": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .react-datepicker__day--selected": {
+      background: theme?.palette?.editor?.activeColor,
+      color: "#fff",
+      "&:hover": {
+        background: theme?.palette?.editor?.activeColor,
+        color: "#fff"
+      }
+    },
+    "& .react-datepicker__day--keyboard-selected": {
+      backgroundColor: "#bad9f1",
+      color: "#000",
+      "&:hover": {
+        backgroundColor: "#bad9f1",
+        color: "#000"
+      }
+    },
+    "& .react-datepicker__day--today": {
+      fontWeight: "bold",
+      borderBottom: `2px solid ${theme?.palette?.editor?.activeColor}`
+    },
+    "& .react-datepicker__triangle": {
+      display: "none"
     }
   },
   signaturePopUpNameField: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"