Updated - v2.0.2

Author: buildingwatsize

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## 🎉 Release - v2 🎉
 
+## [v2.0.2] - `2024-11-19`
+
+### Updated
+
+- Fixed known vulnerabilities
+- Updated dependencies
+- Fixed bugs on css in example project
+
 ## [v2.0.1] - `2024-09-20`
 
 ### Updated
@@ -210,6 +218,7 @@ I have to skipping for the old versions which was unpublished once on first crea
 
 - Initialized Project
 
+[v2.0.2]: https://github.com/buildingwatsize/thaidatepicker-react/releases/tag/v2.0.2
 [v2.0.1]: https://github.com/buildingwatsize/thaidatepicker-react/releases/tag/v2.0.1
 [v2.0.0]: https://github.com/buildingwatsize/thaidatepicker-react/releases/tag/v2.0.0
 [v1.3.6]: https://github.com/buildingwatsize/thaidatepicker-react/releases/tag/v1.3.6

README.md

@@ -78,6 +78,18 @@ export default App;
 | **customInput**          | A config for using custom input element. To use, you can provide a name of element like `Input`                                                                                                                                                          | _React.ComponentType<any> \| null_                                                                                                                                                                                       | null                                             |             |
 | **noIntegratedStyle**    | A config for define to exclude integrated css `Note: if you using 2 components, which the first one contain noIntegratedStyle props but the second is not. It will import css and then it apply to them all`                                             | _boolean_                                                                                                                                                                                                                | false                                            | v2.0.0      |
 
+## 🎩 Some Useful Tricks
+
+1. To style dates outside the selected month, use the `.react-datepicker__day--outside-month` CSS class.
+
+   ```css
+   .react-datepicker__day--outside-month {
+     color: #aaa;
+   }
+   ```
+
+   > However, be aware that the appearance may resemble the 'disabled' attribute, which could affect the user experience
+
 ## 📝 Need More Example?
 
 I made a couple difference stack demos. Try looking at the examples of "Vite" projects on [./example](./example).

example/with-next-tailwind-ts/package.json

@@ -10,22 +10,22 @@
   "dependencies": {
     "next": "^14.2.13",
     "react": "link:../../node_modules/react",
-    "react-datepicker": "^7.3.0",
+    "react-datepicker": "^7.5.0",
     "react-dom": "link:../../node_modules/react-dom",
     "thaidatepicker-react": "file:../.."
   },
   "devDependencies": {
-    "@types/node": "^22.5.5",
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/typescript-estree": "^8.6.0",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/typescript-estree": "^8.15.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.2.13",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.6",
-    "tailwindcss": "^3.4.12",
-    "typescript": "^5.6.2"
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3"
   }
 }

example/with-next-tailwind-ts/yarn.lock

@@ -14,19 +14,19 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.5.1",
-    "@vercel/analytics": "^1.3.1",
-    "antd": "^5.20.6",
+    "@vercel/analytics": "^1.4.0",
+    "antd": "^5.22.1",
     "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "react": "link:../../node_modules/react",
     "react-dom": "link:../../node_modules/react-dom",
-    "tailwindcss": "^3.4.12",
+    "tailwindcss": "^3.4.15",
     "thaidatepicker-react": "link:../.."
   },
   "devDependencies": {
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.4.6"
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "vite": "^5.4.11"
   }
 }

example/with-vite-antd-tailwind/package.json

@@ -73,6 +73,7 @@ const App = () => {
           left: 0,
           top: 0,
           bottom: 0,
+          zIndex: 1,
         }}
       >
         <div
@@ -116,6 +117,7 @@ const App = () => {
             display: "flex",
             flexDirection: "column",
             height: "100vh",
+            zIndex: 0,
           }}
         >
           <Header

example/with-vite-antd-tailwind/src/App.jsx

@@ -53,6 +53,9 @@ const GetStarted = () => {
             dataSource={propsDataSource}
             columns={propsColumns}
             pagination={{ pageSize: 100, hideOnSinglePage: true }}
+            scroll={{
+              x: true,
+            }}
           />
         </>
       ),