fix(select): Issue #71 - Prevent empty space in each field with no selection

Co-authored-by: Ilhan Yapici <[email protected]>

Author: xrutayisire

README.md

@@ -79,7 +79,7 @@ import { converter } from 'react-js-cron'
 const cronString = converter.getCronStringFromValues(
   'day', // period: 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'reboot'
   [], // months: number[] | undefined
-  [],  // monthDays: number[] | undefined
+  [], // monthDays: number[] | undefined
   [], // weekDays: number[] | undefined
   [2], // hours: number[] | undefined
   [1], // minutes: number[] | undefined

package.json

@@ -59,7 +59,7 @@
     }
   },
   "resolutions": {
-    "@ant-design/cssinjs": "1.0.2",
+    "@ant-design/cssinjs": "1.23.0",
     "enhanced-resolve": "5.10.0"
   },
   "peerDependencies": {
@@ -68,7 +68,7 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@ant-design/icons": "4.8.0",
+    "@ant-design/icons": "6.0.0",
     "@babel/core": "7.20.5",
     "@rollup/plugin-commonjs": "23.0.3",
     "@rollup/plugin-node-resolve": "15.0.1",
@@ -93,7 +93,7 @@
     "@types/react-dom": "18.0.9",
     "@typescript-eslint/eslint-plugin": "5.44.0",
     "@typescript-eslint/parser": "5.44.0",
-    "antd": "5.9.4",
+    "antd": "5.24.7",
     "babel-loader": "8.3.0",
     "cz-conventional-changelog": "3.3.0",
     "del-cli": "5.0.0",

src/styles.css

@@ -20,6 +20,21 @@ div.react-js-cron-select {
 .react-js-cron-select.react-js-cron-select-no-prefix {
   margin-left: 0;
 }
+.react-js-cron-select .ant-select-selection-wrap {
+  position: relative;
+  align-items: center;
+}
+/* Absolute position only when there are one child, meaning when no items are selected. */
+.react-js-cron-select
+  .ant-select-selection-overflow:has(> :nth-child(-n + 1):last-child) {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+/* Center placeholder vertically. */
+.react-js-cron-select .ant-select-selection-placeholder {
+  margin-top: -2px;
+}
 div.react-js-cron-error .react-js-cron-select .ant-select-selector {
   border-color: #ff4d4f;
   background: #fff6f6;