pesona-ui 1.0.14 → 1.0.16

package/dist/index.cjs.js

@@ -8222,46 +8222,77 @@ const Select = React.forwardRef(({ name, label, selectLabel, size = 'md', floati
 });
 Select.displayName = 'Select';
 
-const DropdownDatePicker = React.forwardRef(({ name, label, floatingLabel, error, ...rest }, ref) => {
-    const [locale] = React.useState('en-US'); // Assuming locale is set to 'en-US' for simplicity
-    const selectedDate = rest.value ? new Date(rest.value) : new Date();
+const DropdownDatePicker = React.forwardRef(({ name, label, floatingLabel, locale = 'id', error, value, ...rest }, ref) => {
+    // Helper function to safely parse date
+    const parseDate = (dateString) => {
+        if (!dateString)
+            return new Date();
+        const parsed = new Date(dateString);
+        return isNaN(parsed.getTime()) ? new Date() : parsed;
+    };
+    // Initial date state
+    const initialDate = parseDate(value);
     const [dateValues, setDateValues] = React.useState({
-        day: selectedDate.getDate(),
-        month: selectedDate.getMonth() + 1,
-        year: selectedDate.getFullYear(),
+        day: initialDate.getDate(),
+        month: initialDate.getMonth() + 1,
+        year: initialDate.getFullYear(),
     });
-    const dayOptions = generateDayOptions(dateValues.month, dateValues.year);
-    const monthOptions = generateMonthOptions(locale);
-    const yearOptions = generateYearOptions();
+    // Sync when external value changes
+    React.useEffect(() => {
+        if (value) {
+            const d = parseDate(value);
+            setDateValues({
+                day: d.getDate(),
+                month: d.getMonth() + 1,
+                year: d.getFullYear(),
+            });
+        }
+    }, [value]);
+    // Ensure day is valid for the selected month and year
+    React.useEffect(() => {
+        const maxDay = new Date(dateValues.year, dateValues.month, 0).getDate();
+        if (dateValues.day > maxDay) {
+            setDateValues(prev => ({ ...prev, day: maxDay }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dateValues.month, dateValues.year]);
+    // Handle change for day, month, year with validation
     const handleChange = (field, newValue) => {
-        const newDateValues = { ...dateValues, [field]: newValue };
+        const numericValue = parseInt(newValue, 10);
+        if (isNaN(numericValue))
+            return; // Guard against invalid input
+        const newDateValues = { ...dateValues, [field]: numericValue };
         setDateValues(newDateValues);
         if (rest.onChange) {
+            const formattedDate = `${newDateValues.year}-${String(newDateValues.month).padStart(2, '0')}-${String(newDateValues.day).padStart(2, '0')}`;
             rest.onChange({
                 target: {
                     name,
-                    value: `${newDateValues.year}-${newDateValues.month}-${newDateValues.day}`,
+                    value: formattedDate,
                 },
             });
         }
     };
+    // Memoized options to prevent unnecessary re-calculations
+    const dayOptions = React.useMemo(() => generateDayOptions(dateValues.month - 1, dateValues.year), [dateValues.month, dateValues.year]);
+    const monthOptions = React.useMemo(() => generateMonthOptions(locale), [locale]);
+    const yearOptions = React.useMemo(() => generateYearOptions(), []);
+    // Label rendering
+    const renderLabel = (React.createElement("label", { htmlFor: name },
+        label,
+        " ",
+        rest.required && React.createElement("span", { className: "text-danger" }, "*")));
     return (React.createElement(React.Fragment, null,
-        !floatingLabel && (React.createElement("label", { htmlFor: name },
-            label,
-            " ",
-            rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
+        !floatingLabel && renderLabel,
         React.createElement("div", { className: "row", ref: ref },
             React.createElement("div", { className: "col-md-3" },
-                React.createElement(Select, { name: "day", disabled: rest.disabled, options: dayOptions, value: dateValues.day.toString(), onChange: (e) => handleChange('day', e.target.value), role: "day" })),
+                React.createElement(Select, { name: `${name}-day`, disabled: rest.disabled, options: dayOptions, value: dateValues.day.toString(), onChange: (e) => handleChange('day', e.target.value), "aria-label": "Day" })),
             React.createElement("div", { className: "col-md-5" },
-                React.createElement(Select, { name: "month", disabled: rest.disabled, options: monthOptions, value: dateValues.month.toString(), onChange: (e) => handleChange('month', e.target.value), role: "month" })),
+                React.createElement(Select, { name: `${name}-month`, disabled: rest.disabled, options: monthOptions, value: dateValues.month.toString(), onChange: (e) => handleChange('month', e.target.value), "aria-label": "Month" })),
             React.createElement("div", { className: "col-md-4" },
-                React.createElement(Select, { name: "year", disabled: rest.disabled, options: yearOptions, value: dateValues.year.toString(), onChange: (e) => handleChange('year', e.target.value), role: "year" }))),
-        floatingLabel && (React.createElement("label", { htmlFor: name },
-            label,
-            " ",
-            rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
-        error && React.createElement("small", { className: "form-message" }, error)));
+                React.createElement(Select, { name: `${name}-year`, disabled: rest.disabled, options: yearOptions, value: dateValues.year.toString(), onChange: (e) => handleChange('year', e.target.value), "aria-label": "Year" }))),
+        floatingLabel && renderLabel,
+        error && React.createElement("small", { className: "form-message text-danger" }, error)));
 });
 DropdownDatePicker.displayName = 'DropdownDatePicker';
 
@@ -8497,21 +8528,12 @@ const Radio = React.forwardRef(({ name, label, options, error, ...rest }, ref) =
 });
 
 const RadioButtonGroup = React.forwardRef(({ name, label, size = 'md', options, selectedValue, error, required, ...rest }, ref) => {
-    const [stringSelectedValue, setStringSelectedValue] = React.useState(selectedValue || '');
-    // Update the state when selectedValue changes
-    React.useEffect(() => {
-        if (selectedValue !== undefined) {
-            // Convert selectedValue to string if it's a boolean
-            const valueAsString = typeof selectedValue === 'boolean' ? (selectedValue ? 'true' : 'false') : selectedValue.toString();
-            setStringSelectedValue(valueAsString);
-        }
-    }, [selectedValue]);
     return (React.createElement(React.Fragment, null,
         label && (React.createElement("label", { htmlFor: name },
             label,
             " ",
             required && React.createElement("span", { className: "text-danger" }, "*"))),
-        React.createElement("div", { className: "btn-group", "data-toggle": "buttons" }, options.map((option) => (React.createElement("label", { key: option.value, className: `btn auto btn-default btn-${size} ${option.value === stringSelectedValue ? 'active' : ''}` },
+        React.createElement("div", { className: "btn-group", "data-toggle": "buttons" }, options.map((option) => (React.createElement("label", { key: option.value, className: `btn auto btn-default btn-${size} ${option.value === selectedValue ? 'active' : ''}` },
             React.createElement("input", { type: "radio", id: option.value.toString(), name: name, value: option.value, ref: ref, ...rest }),
             React.createElement("span", null, option.label))))),
         error !== undefined && React.createElement("small", { className: "form-message" }, error)));