add toggleClassName to button

Author: sct

package.json

@@ -65,8 +65,5 @@
         "tailwindcss": "^3.2.4",
         "tslib": "^2.4.0",
         "typescript": "^4.8.4"
-    },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.com"
     }
 }

pages/index.js

@@ -21,6 +21,7 @@ export default function Playground() {
     const [disabled, setDisabled] = useState(false);
     const [inputClassName, setInputClassName] = useState("");
     const [containerClassName, setContainerClassName] = useState("");
+    const [toggleClassName, setToggleClassName] = useState("");
     const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
     const [readOnly, setReadOnly] = useState(false);
     const [minDate, setMinDate] = useState("");
@@ -61,6 +62,7 @@ export default function Playground() {
                     disabled={disabled}
                     inputClassName={inputClassName}
                     containerClassName={containerClassName}
+                    toggleClassName={toggleClassName}
                     displayFormat={displayFormat}
                     readOnly={readOnly}
                     minDate={minDate}
@@ -230,15 +232,15 @@ export default function Playground() {
                         />
                     </div>
                     <div className="mb-2">
-                        <label className="block" htmlFor="startWeekOnClassName">
-                            Start Week On
+                        <label className="block" htmlFor="maxDate">
+                            Maximum Date
                         </label>
                         <input
                             className="rounded border px-4 py-2 w-full border-gray-200"
-                            id="startWeekOnClassName"
-                            value={startWeekOn}
+                            id="maxDate"
+                            value={maxDate}
                             onChange={e => {
-                                setStartWeekOn(e.target.value);
+                                setMaxDate(e.target.value);
                             }}
                         />
                     </div>
@@ -297,15 +299,28 @@ export default function Playground() {
                         />
                     </div>
                     <div className="mb-2">
-                        <label className="block" htmlFor="maxDate">
-                            Maximum Date
+                        <label className="block" htmlFor="containerClassName">
+                            Toggle Class
                         </label>
                         <input
                             className="rounded border px-4 py-2 w-full border-gray-200"
-                            id="maxDate"
-                            value={maxDate}
+                            id="toggleClassName"
+                            value={toggleClassName}
                             onChange={e => {
-                                setMaxDate(e.target.value);
+                                setToggleClassName(e.target.value);
+                            }}
+                        />
+                    </div>
+                    <div className="mb-2">
+                        <label className="block" htmlFor="startWeekOnClassName">
+                            Start Week On
+                        </label>
+                        <input
+                            className="rounded border px-4 py-2 w-full border-gray-200"
+                            id="startWeekOnClassName"
+                            value={startWeekOn}
+                            onChange={e => {
+                                setStartWeekOn(e.target.value);
                             }}
                         />
                     </div>

src/components/Datepicker.tsx

@@ -40,6 +40,7 @@ interface Props {
     i18n?: string;
     disabled?: boolean;
     inputClassName?: string | null;
+    toggleClassName?: string | null;
     inputId?: string;
     inputName?: string;
     containerClassName?: string | null;
@@ -67,6 +68,7 @@ const Datepicker: React.FC<Props> = ({
     disabled = false,
     inputClassName = null,
     containerClassName = null,
+    toggleClassName = null,
     displayFormat = "YYYY-MM-DD",
     readOnly = false,
     minDate = null,
@@ -283,6 +285,7 @@ const Datepicker: React.FC<Props> = ({
             disabled,
             inputClassName,
             containerClassName,
+            toggleClassName,
             readOnly,
             displayFormat,
             minDate,
@@ -309,6 +312,7 @@ const Datepicker: React.FC<Props> = ({
         disabled,
         inputClassName,
         containerClassName,
+        toggleClassName,
         readOnly,
         displayFormat,
         firstGotoDate,

src/components/Input.tsx

@@ -25,6 +25,7 @@ const Input: React.FC = () => {
         separator,
         disabled,
         inputClassName,
+        toggleClassName,
         readOnly,
         displayFormat,
         inputId,
@@ -190,7 +191,7 @@ const Input: React.FC = () => {
                 type="button"
                 ref={buttonRef}
                 disabled={disabled}
-                className="absolute top-0 right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed"
+                className={`absolute right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed ${toggleClassName}`}
             >
                 {inputText ? <CloseIcon className="h-5 w-5" /> : <DateIcon className="h-5 w-5" />}
             </button>

src/contexts/DatepickerContext.ts

@@ -26,6 +26,7 @@ interface DatepickerStore {
     disabled?: boolean;
     inputClassName?: string | null;
     containerClassName?: string | null;
+    toggleClassName?: string | null;
     readOnly?: boolean;
     startWeekOn?: string | null;
     displayFormat?: string;
@@ -61,6 +62,7 @@ const DatepickerContext = createContext<DatepickerStore>({
     disabled: false,
     inputClassName: "",
     containerClassName: "",
+    toggleClassName: "",
     readOnly: false,
     displayFormat: "YYYY-MM-DD",
     minDate: null,