@skalfa/skalfa-component 1.0.52 → 1.0.54

package/dist/input/Select.component.js

@@ -8,7 +8,7 @@ const react_1 = require("react");
 const _utils_1 = require("@utils");
 const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
 ;
-function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options = [], searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions = [], exceptOptions = [], tempOptions, newOption, maxShowOption = 10, creatable, creatableLabel, register, unregister, onChange, onFocus, onBlur, className = "", }) {
+function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options = [], searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions = [], exceptOptions = [], tempOptions, newOption, maxShowOption, creatable, creatableLabel, customOption, selectableOption, register, unregister, onChange, onFocus, onBlur, className = "", }) {
     const [inputShowValue, setInputShowValue] = (0, react_1.useState)("");
     const [keydown, setKeydown] = (0, react_1.useState)(false);
     const [useTemp, setUseTemp] = (0, react_1.useState)(true);
@@ -86,15 +86,33 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
         if (dataOptions?.length || creatableKey) {
             let newFilteredOptions = [];
             if (searchable && !serverSearchable && dataOptions?.length) {
-                if (e.target.value) {
-                    newFilteredOptions = dataOptions.filter((Option) => Option.label?.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1).slice(0, maxShowOption);
+                if (e?.target?.value) {
+                    const val = e.target.value.toLowerCase();
+                    const matched = dataOptions.filter((opt) => {
+                        if (opt.searchable?.some((s) => s.toLowerCase().indexOf(val) > -1))
+                            return true;
+                        if (typeof opt.label === "string" && opt.label.toLowerCase().indexOf(val) > -1)
+                            return true;
+                        if (typeof opt.code === "string" && opt.code.toLowerCase().indexOf(val) > -1)
+                            return true;
+                        if (typeof opt.name === "string" && opt.name.toLowerCase().indexOf(val) > -1)
+                            return true;
+                        return false;
+                    });
+                    newFilteredOptions = typeof maxShowOption === "number" && maxShowOption > 0
+                        ? matched.slice(0, maxShowOption)
+                        : matched;
                 }
                 else {
-                    newFilteredOptions = dataOptions.slice(0, maxShowOption);
+                    newFilteredOptions = typeof maxShowOption === "number" && maxShowOption > 0
+                        ? dataOptions.slice(0, maxShowOption)
+                        : dataOptions;
                 }
             }
             else {
-                newFilteredOptions = dataOptions || [];
+                newFilteredOptions = typeof maxShowOption === "number" && maxShowOption > 0
+                    ? (dataOptions || []).slice(0, maxShowOption)
+                    : (dataOptions || []);
             }
             setActiveOption(-1);
             setFilteredOptions(newFilteredOptions);
@@ -152,30 +170,57 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
     };
     const fetchOptions = async () => {
         setLoadingOption(true);
+        const selectableOpt = selectableOption || serverOptionControl?.selectableOption || serverOptionControl?.params?.selectableOption;
         const serverControl = {
             ...serverOptionControl,
-            params: serverSearchable ? { search: keywordSearch, ...(serverOptionControl?.params || {}) } : (serverOptionControl?.params || {}),
-            headers: { "X-Option": 1 }
+            params: {
+                ...(serverOptionControl?.params || {}),
+                ...(selectableOpt ? { selectableOption: selectableOpt } : {}),
+                ...(serverSearchable ? { search: keywordSearch } : {}),
+            },
+            headers: { "X-Option": 1, ...(serverOptionControl?.headers || {}) }
         };
-        const getCacheOptions = await _utils_1.cavity.get(serverOptionControl?.cacheName || `option_${serverOptionControl?.path}`);
-        const cacheOptions = (getCacheOptions?.data || []);
-        if (cacheOptions?.length) {
-            setDataOptions([...cacheOptions, ...includedOptions].filter((op) => !exceptOptions?.includes(op.value)));
-            setLoadingOption(false);
+        const cacheKey = typeof serverOptionControl?.cacheName === "string" && serverOptionControl.cacheName.trim() !== ""
+            ? serverOptionControl.cacheName
+            : serverOptionControl?.cacheName === true
+                ? `option_${serverOptionControl?.path || serverOptionControl?.url}`
+                : null;
+        if (cacheKey) {
+            const getCacheOptions = await _utils_1.cavity.get(cacheKey);
+            const cacheData = getCacheOptions?.data;
+            const cacheOptions = (Array.isArray(cacheData?.data) ? cacheData.data : Array.isArray(cacheData) ? cacheData : []);
+            if (cacheOptions?.length) {
+                const cached = [...cacheOptions, ...includedOptions].filter((op) => !exceptOptions?.includes(op.value));
+                setDataOptions(cached);
+                setFilteredOptions(typeof maxShowOption === "number" && maxShowOption > 0 ? cached.slice(0, maxShowOption) : cached);
+                setLoadingOption(false);
+                return;
+            }
         }
-        else {
-            const mutateOptions = await (0, _utils_1.api)(serverControl || {});
-            setDataOptions([...(mutateOptions?.data?.data || []), ...(includedOptions || [])].filter((op) => !exceptOptions?.includes(op.value)));
-            setShowOption(true);
-            if (serverOptionControl?.cacheName != false) {
-                _utils_1.cavity.set({
-                    key: serverOptionControl?.cacheName || `option_${serverOptionControl?.path}`,
-                    data: mutateOptions?.data,
-                    expired: 5,
-                });
+        const mutateOptions = await (0, _utils_1.api)(serverControl || {});
+        const fetchedData = mutateOptions?.data?.data || mutateOptions?.data || [];
+        const optionsData = Array.isArray(fetchedData) ? fetchedData.map((item) => {
+            if (item && typeof item === "object") {
+                return {
+                    ...item,
+                    name: item.name ?? item.label,
+                    label: item.label ?? item.name ?? item.code ?? item.value,
+                };
             }
-            setLoadingOption(false);
+            return item;
+        }) : [];
+        const finalOptions = [...optionsData, ...(includedOptions || [])].filter((op) => !exceptOptions?.includes(op.value));
+        setDataOptions(finalOptions);
+        setFilteredOptions(typeof maxShowOption === "number" && maxShowOption > 0 ? finalOptions.slice(0, maxShowOption) : finalOptions);
+        setShowOption(true);
+        if (cacheKey) {
+            _utils_1.cavity.set({
+                key: cacheKey,
+                data: mutateOptions?.data,
+                expired: 5,
+            });
         }
+        setLoadingOption(false);
     };
     const fetchIdbOptions = async () => {
         setLoadingOption(true);
@@ -195,6 +240,7 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                 };
             });
             setDataOptions(rows);
+            setFilteredOptions(typeof maxShowOption === "number" && maxShowOption > 0 ? rows.slice(0, maxShowOption) : rows);
             setLoadingOption(false);
         }
     };
@@ -225,7 +271,7 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
             isFocusingCreatable.current = false;
             setShowOption(false);
             inputHandler.setFocus(false);
-        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), invalidMessage && (0, _utils_1.pcn)(className, "label", "error")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [isCreatingNew && typeof inputHandler.value === "object" && inputHandler.value !== null ? (Object.entries(inputHandler.value).map(([subK, subV]) => ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: `${name.endsWith("_id") ? name.slice(0, -3) : name}[${subK}]`, value: String(subV ?? "") }, subK)))) : ((0, jsx_runtime_1.jsx)("input", { type: "hidden", value: !multiple ? (typeof inputHandler.value === "object" ? JSON.stringify(inputHandler.value) : String(inputHandler.value ?? "")) : Array().concat(inputHandler.value).map((val) => String(val)), name: name })), isCreatingNew && ((0, jsx_runtime_1.jsx)("div", { className: "absolute left-1.5 top-1/2 -translate-y-1/2 bg-stroke text-sm px-3.5 py-1.5 rounded-lg select-none pointer-events-none z-10 font-normal", children: "Baru" })), (0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: !searchable, id: randomId, placeholder: !inputHandler.value || (Array.isArray(inputHandler.value) && !inputHandler.value.length) ? placeholder : "", disabled: disabled, className: (0, _utils_1.cn)("input cursor-pointer", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", isCreatingNew && "pl-[4.8rem]", invalidMessage && "input-error", (0, _utils_1.pcn)(className, "input"), invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: (useTemp && tempOptions ? tempOptions.at(0)?.label : serverSearchable ? keyword : (isCreatingNew ? customText : inputShowValue)), onChange: (e) => {
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), invalidMessage && (0, _utils_1.pcn)(className, "label", "error")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [isCreatingNew && typeof inputHandler.value === "object" && inputHandler.value !== null ? (Object.entries(inputHandler.value).map(([subK, subV]) => ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: `${name.endsWith("_id") ? name.slice(0, -3) : name}[${subK}]`, value: String(subV ?? "") }, subK)))) : ((0, jsx_runtime_1.jsx)("input", { type: "hidden", value: !multiple ? (typeof inputHandler.value === "object" ? JSON.stringify(inputHandler.value) : String(inputHandler.value ?? "")) : Array().concat(inputHandler.value).map((val) => String(val)), name: name })), isCreatingNew && ((0, jsx_runtime_1.jsx)("div", { className: "absolute left-1.5 top-1/2 -translate-y-1/2 bg-stroke text-sm px-3.5 py-1.5 rounded-lg select-none pointer-events-none z-10 font-normal", children: "Baru" })), (0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: !searchable, id: randomId, placeholder: !inputHandler.value || (Array.isArray(inputHandler.value) && !inputHandler.value.length) ? placeholder : "", disabled: disabled, className: (0, _utils_1.cn)("input cursor-pointer pr-10", clearable && "pr-18", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", isCreatingNew && "pl-[4.8rem]", invalidMessage && "input-error", (0, _utils_1.pcn)(className, "input"), invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: (useTemp && tempOptions ? tempOptions.at(0)?.label : serverSearchable ? keyword : (isCreatingNew ? customText : inputShowValue)), onChange: (e) => {
                                 setUseTemp(false);
                                 searchable && setInputShowValue(e.target.value);
                                 serverSearchable && setKeyword(e.target.value);
@@ -286,16 +332,16 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                             }, onKeyDown: (e) => {
                                 dataOptions?.length && onKeyDownOption(e);
                             }, autoComplete: "off", autoFocus: autoFocus }), (multiple && !searchable || (searchable && !inputHandler.focus)) && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("select-multiple-values", leftIcon ? "select-multiple-values-left-icon" : "select-multiple-values-no-icon"), style: { maxWidth: `calc(100% - ${leftIcon ? "5.2rem" : "3.2rem"})` }, children: (0, jsx_runtime_1.jsx)("div", { className: "input-values-container", children: multiple && typeof inputHandler.value != "string" && Array().concat(inputHandler.value)?.map((item, key) => {
-                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { children: dataOptions?.find((option) => option.value == item)?.label }), (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/times", className: "input-values-delete", onClick: () => {
-                                                    const values = Array().concat(inputHandler.value);
-                                                    const index = values.findIndex((val) => val == item);
-                                                    inputHandler.setValue(values.filter((_, val) => val != index));
-                                                    if (!values.filter((_, val) => val != index)?.length) {
-                                                        setInputShowValue("");
-                                                        serverSearchable && setKeyword("");
-                                                        onChange?.("");
-                                                    }
-                                                } })] }, key));
+                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { children: dataOptions?.find((option) => option.value == item)?.label }), (0, jsx_runtime_1.jsx)("div", { className: "input-values-delete", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/times", onClick: () => {
+                                                        const values = Array().concat(inputHandler.value);
+                                                        const index = values.findIndex((val) => val == item);
+                                                        inputHandler.setValue(values.filter((_, val) => val != index));
+                                                        if (!values.filter((_, val) => val != index)?.length) {
+                                                            setInputShowValue("");
+                                                            serverSearchable && setKeyword("");
+                                                            onChange?.("");
+                                                        }
+                                                    } }) })] }, key));
                                 }) }) })), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), !multiple && clearable && inputHandler.value && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-icon", "input-icon-clear", disabled && "input-icon-disabled", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled")), onClick: () => {
                                 setIsCreatingNew(false);
                                 setCustomText("");
@@ -339,7 +385,7 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                                         }, children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "w-4 h-4" }) })] })), (newOption ? [newOption, ...filteredOptions] : filteredOptions).map((option, key) => {
                                 const selected = !isCreatingNew && (!!((typeof inputHandler.value == "string" || typeof inputHandler.value == "number") && inputHandler.value == option.value) ||
                                     (Array.isArray(inputHandler.value) && Array().concat(inputHandler.value).find((val) => val == option.value)));
-                                return ((0, jsx_runtime_1.jsxs)("li", { className: (0, _utils_1.cn)("input-suggest", (key == activeOption || selected) && "input-suggest-active", (0, _utils_1.pcn)(className, "suggest-item"), (key == activeOption || selected) && (0, _utils_1.pcn)(className, "suggest-item", "active")), onMouseDown: () => {
+                                return ((0, jsx_runtime_1.jsxs)("li", { className: (0, _utils_1.cn)("input-suggest flex items-center", (key == activeOption || selected) && "input-suggest-active", (0, _utils_1.pcn)(className, "suggest-item"), (key == activeOption || selected) && (0, _utils_1.pcn)(className, "suggest-item", "active")), onMouseDown: () => {
                                         setKeydown(true);
                                         setTimeout(() => inputHandler.setFocus(true), 110);
                                     }, onMouseUp: () => {
@@ -349,8 +395,11 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                                         setShowOption(false);
                                         setIsCreatingNew(false);
                                         if (!multiple) {
-                                            setInputShowValue(option.label);
-                                            serverSearchable && setKeyword(option.label);
+                                            const displayLabel = typeof option.label === "string" || typeof option.label === "number"
+                                                ? option.label
+                                                : (option.name || option.code || option.value);
+                                            setInputShowValue(displayLabel);
+                                            serverSearchable && setKeyword(typeof displayLabel === "string" ? displayLabel : "");
                                             inputHandler.setValue(option.value);
                                             onChange?.(option.value, option);
                                         }
@@ -370,6 +419,10 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                                             }
                                         }
                                         setTimeout(() => inputHandler.setFocus(false), 120);
-                                    }, children: [selected && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "select-suggest-check" })), option.label] }, key));
+                                    }, children: [selected && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "select-suggest-check" })), customOption
+                                            ? customOption(option)
+                                            : (option.customOption
+                                                ? (typeof option.customOption === "function" ? option.customOption(option) : option.customOption)
+                                                : (option.customLabel || option.label))] }, key));
                             })] }) })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
   "keywords": [

package/src/input/InputDate.component.tsx

@@ -111,7 +111,7 @@ export function InputDateComponent({
               value={inputHandler.value}
               onChange={(e) => {
                 inputHandler.setValue(e.target.value);
-                inputHandler.setValue(false);
+                inputHandler.setIdle(false);
                 onChange?.(e.target.value);
               }}
               onFocus={(e) => {
@@ -158,9 +158,12 @@ export function InputDateComponent({
             {!isSm && inputHandler.focus && (
               <div className="input-date-picker-popover">
                 <InputDatePickerComponent
+                  value={inputHandler.value}
                   onChange={(e) => {
                     inputHandler.setValue(e);
+                    inputHandler.setIdle(false);
                     onChange?.(e);
+                    inputHandler.setFocus(false);
                   }}
                 />
               </div>
@@ -191,8 +194,10 @@ export function InputDateComponent({
         >
           <div className="p-4">
             <InputDatePickerComponent
+              value={inputHandler.value}
               onChange={(e) => {
                 inputHandler.setValue(e);
+                inputHandler.setIdle(false);
                 onChange?.(e);
               }}
             />
@@ -206,6 +211,7 @@ export function InputDateComponent({
 
 
 export interface InputDatePickerProps {
+  value         ?:  string;
   onChange      ?:  (date: string) => void;
   minDate       ?:  string;
   maxDate       ?:  string;
@@ -215,6 +221,7 @@ export interface InputDatePickerProps {
 
 
 export const InputDatePickerComponent: React.FC<InputDatePickerProps> = ({
+  value,
   onChange,
   minDate,
   maxDate,
@@ -223,35 +230,51 @@ export const InputDatePickerComponent: React.FC<InputDatePickerProps> = ({
   const activeYearRef     =  useRef<HTMLDivElement | null>(null);
   const containerYearRef  =  useRef<HTMLDivElement | null>(null);
 
-  const [currentDate, setCurrentDate]    =  useState(moment());
-  const [selectedDate, setSelectedDate]  =  useState(moment());
+  const initialDate = useMemo(() => {
+    return value && moment(value).isValid() ? moment(value) : moment();
+  }, [value]);
+
+  const [currentDate, setCurrentDate]    =  useState(initialDate);
+  const [selectedDate, setSelectedDate]  =  useState(initialDate);
+
+  useEffect(() => {
+    if (value && moment(value).isValid()) {
+      const m = moment(value);
+      setCurrentDate(m);
+      setSelectedDate(m);
+    }
+  }, [value]);
 
   const startDate  =  moment(currentDate).startOf("month").startOf("week");
   const endDate    =  moment(currentDate).endOf("month").endOf("week");
 
-  const handlePrevMonth = () => setCurrentDate(moment(currentDate).subtract(1, "month"));
-  const handleNextMonth = () => setCurrentDate(moment(currentDate).add(1, "month"));
+  const handlePrevMonth = (e?: React.MouseEvent) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    setCurrentDate(moment(currentDate).subtract(1, "month"));
+  };
+  const handleNextMonth = (e?: React.MouseEvent) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    setCurrentDate(moment(currentDate).add(1, "month"));
+  };
 
   const handleDateClick = (date: moment.Moment) => {
-    if ((minDate && date.isBefore(moment(minDate))) || (maxDate && date.isAfter(moment(maxDate)))) { return; }
+    if ((minDate && date.isBefore(moment(minDate), "day")) || (maxDate && date.isAfter(moment(maxDate), "day"))) {
+      return;
+    }
 
     setSelectedDate(date);
     onChange?.(date.format("YYYY-MM-DD"));
   };
 
   const renderDays = () => {
-    const days = [];
-    const startDay = moment(startDate);
-
-    for (let i = 0; i < 7; i++) {
-      days.push(
-        <div key={i} className="text-center font-bold">
-          {startDay.add(i, "days").format("dd")}
-        </div>
-      );
-    }
-
-    return days;
+    const dayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+    return dayNames.map((d, i) => (
+      <div key={i} className="text-center text-[11px] font-semibold text-light-foreground">
+        {d}
+      </div>
+    ));
   };
 
   const renderCells = () => {
@@ -262,23 +285,35 @@ export const InputDatePickerComponent: React.FC<InputDatePickerProps> = ({
     while (day.isBefore(endDate) || day.isSame(endDate, "day")) {
       for (let i = 0; i < 7; i++) {
         const cloneDay = moment(day);
+        const isCurrentMonth = day.isSame(currentDate, "month");
+        const isSelected = day.isSame(selectedDate, "day");
+        const isToday = day.isSame(moment(), "day");
+        const isDisabled =
+          (minDate && day.isBefore(moment(minDate), "day")) ||
+          (maxDate && day.isAfter(moment(maxDate), "day"));
 
         days.push(
-          <div
-            key={day.toString()}
-            className={`w-8 aspect-square flex items-center justify-center text-center rounded-lg transition-all 
-              ${day.isSame(currentDate, "month") ? "text-foreground" : "text-light-foreground"} 
-              ${day.isSame(selectedDate, "day") ? "bg-primary text-background" : "hover:bg-light-primary"}
-              ${day.isSame(moment(), "day") ? "border !border-primary" : "hover:bg-light-primary"} 
-              ${(minDate && day.isBefore(moment(minDate))) || (maxDate && day.isAfter(moment(maxDate))) ? "opacity-10 cursor-not-allowed" : "cursor-pointer"}`}
-            onClick={() => handleDateClick(cloneDay)}
-          >{day.format("D")}</div>
+          <button
+            key={day.format("YYYY-MM-DD")}
+            type="button"
+            className={cn(
+              "w-8 h-8 text-xs flex items-center justify-center text-center rounded-lg transition-all border-none select-none",
+              isCurrentMonth ? "text-foreground font-medium" : "text-light-foreground/40",
+              isSelected ? "bg-primary text-white font-bold hover:bg-primary" : (
+                isToday ? "border border-primary font-semibold hover:bg-light-primary" : "hover:bg-light-primary"
+              ),
+              isDisabled ? "opacity-20 cursor-not-allowed pointer-events-none" : "cursor-pointer"
+            )}
+            onClick={() => !isDisabled && handleDateClick(cloneDay)}
+          >
+            {day.format("D")}
+          </button>
         );
 
         day.add(1, "day");
       }
 
-      rows.push(<div key={day.toString()} className="grid grid-cols-7 gap-1">{days}</div>);
+      rows.push(<div key={day.format("YYYY-MM-DD-row")} className="grid grid-cols-7 gap-1">{days}</div>);
 
       days = [];
     }
@@ -289,7 +324,7 @@ export const InputDatePickerComponent: React.FC<InputDatePickerProps> = ({
   const years = useMemo(() => {
     const dumpYears = [];
 
-    for (let i = 1945; i <= moment().year(); i++) {
+    for (let i = 1940; i <= moment().year() + 10; i++) {
       dumpYears.push(i);
     }
 
@@ -298,55 +333,60 @@ export const InputDatePickerComponent: React.FC<InputDatePickerProps> = ({
 
   useEffect(() => {
     if (activeYearRef.current && containerYearRef.current) {
-      containerYearRef.current.scrollTo({
-        top: activeYearRef.current.offsetTop - containerYearRef.current.offsetTop,
-      });
+      const container = containerYearRef.current;
+      const activeEl = activeYearRef.current;
+      container.scrollTop = activeEl.offsetTop - container.offsetTop - (container.clientHeight / 2) + (activeEl.clientHeight / 2);
     }
-  }, []);
+  }, [currentDate.year()]);
 
   return (
-    <div className="w-full flex gap-2 max-h-[260]">
+    <div className="w-full flex gap-2.5 h-[260px] select-none">
       <div
-        className="w-1/5 overflow-y-auto input-scroll pr-1"
+        className="w-[68px] shrink-0 h-full overflow-y-auto input-scroll pr-1 border-r border-stroke"
         ref={containerYearRef}
       >
-        <div className="flex flex-col">
+        <div className="flex flex-col gap-0.5">
           {years?.map((item) => {
             const isActive = currentDate?.year() === item;
 
             return (
-              <>
-                <div
-                  key={item}
-                  ref={isActive ? activeYearRef : null}
-                  className={`py-1 px-2 font-semibold rounded-[6px] cursor-pointer ${isActive && "bg-light-primary"}`}
-                  onClick={() => setCurrentDate(moment().set("year", item))}
-                >
-                  {item}
-                </div>
-              </>
+              <div
+                key={item}
+                ref={isActive ? activeYearRef : null}
+                className={cn(
+                  "py-1 px-2 font-semibold rounded-md cursor-pointer transition-colors text-center select-none",
+                  isActive ? "bg-primary text-white" : "hover:bg-light-primary text-foreground"
+                )}
+                onClick={() => setCurrentDate(moment(currentDate).set("year", item))}
+              >
+                {item}
+              </div>
             );
           })}
         </div>
       </div>
-      <div className="w-4/5">
-        <div className="flex justify-between items-center mb-2">
+      <div className="flex-1 flex flex-col justify-between pl-0.5">
+        <div className="flex justify-between items-center mb-1.5">
           <button
+            type="button"
             onClick={handlePrevMonth}
-            className="w-8 text-sm aspect-square rounded-full cursor-pointer"
+            className="w-7 h-7 flex items-center justify-center text-xs rounded-full hover:bg-light-primary transition-colors cursor-pointer border-none bg-transparent"
           >
-            <Icon icon="solid/chevron-left" />
+            <Icon icon="solid/chevron-left" className="w-3.5 h-3.5" />
           </button>
-          <h2 className="font-semibold">{currentDate.format("MMMM")}</h2>
+          <h2 className="font-semibold">
+            {currentDate.format("MMMM YYYY")}
+          </h2>
           <button
+            type="button"
             onClick={handleNextMonth}
-            className="w-8 text-sm aspect-square rounded-full cursor-pointer"
+            className="w-7 h-7 flex items-center justify-center text-xs rounded-full hover:bg-light-primary transition-colors cursor-pointer border-none bg-transparent"
           >
-            <Icon icon="solid/chevron-right" />
+            <Icon icon="solid/chevron-right" className="w-3.5 h-3.5" />
           </button>
         </div>
-        <div className="grid grid-cols-7 gap-1 mb-2">{renderDays()}</div>
-        <div>{renderCells()}</div>
+        <div className="grid grid-cols-7 gap-1 mb-1">{renderDays()}</div>
+        <div className="flex flex-col gap-1">{renderCells()}</div>
       </div>
 
       {rightElement && <div>{rightElement}</div>}

package/src/input/InputDatetime.component.tsx

@@ -188,6 +188,7 @@ export function InputDatetimeComponent({
                   />
                   {pickerType === "date" ? (
                     <InputDatePickerComponent
+                      value={dateValue}
                       onChange={(e) => {
                         setDateValue(e);
                         handleChange(e, timeValue);
@@ -246,6 +247,7 @@ export function InputDatetimeComponent({
             />
             {pickerType === "date" ? (
               <InputDatePickerComponent
+                value={dateValue}
                 onChange={(e) => {
                   setDateValue(e);
                   handleChange(e, timeValue);